diff --git a/navigationbar/lib/_navigation-bar-theme.scss b/navigationbar/lib/_navigation-bar-theme.scss
index 20573fb1d..ed51c181e 100644
--- a/navigationbar/lib/_navigation-bar-theme.scss
+++ b/navigationbar/lib/_navigation-bar-theme.scss
@@ -3,13 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use 'sass:map';
 
 @use '../../elevation/lib/elevation-theme';
-@use '../../navigationtab/lib/navigation-tab-theme';
 @use '../../sass/map-ext';
 @use '../../sass/resolvers';
 @use '../../sass/theme';
@@ -50,12 +46,6 @@ $dark-theme: tokens.md-comp-navigation-bar-values(
     $elevation-tokens: (container-elevation)
   );
 
-  .md3-navigation-tab {
-    @include navigation-tab-theme.theme-styles(
-      map-ext.pick($theme, map.keys(navigation-tab-theme.$light-theme))
-    );
-  }
-
   $theme: theme.create-theme-vars($theme, 'navigation-bar');
 
   @include _container-color(map.get($theme, container-color));
diff --git a/navigationtab/_navigation-tab.scss b/navigationtab/_navigation-tab.scss
index a5f92aac9..5bc6ad800 100644
--- a/navigationtab/_navigation-tab.scss
+++ b/navigationtab/_navigation-tab.scss
@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/navigation-tab-theme' show
-  theme;
+@forward './lib/navigation-tab' show theme;
diff --git a/navigationtab/lib/_navigation-tab-theme.scss b/navigationtab/lib/_navigation-tab-theme.scss
deleted file mode 100644
index 48d3a68b3..000000000
--- a/navigationtab/lib/_navigation-tab-theme.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:map';
-
-@use '../../badge/badge';
-@use '../../ripple/ripple-theme';
-@use '../../focus/focus-ring';
-@use '../../sass/theme';
-@use '../../tokens';
-
-$_custom-property-prefix: 'navigation-bar';
-
-$light-theme: tokens.md-comp-navigation-bar-values();
-$dark-theme: tokens.md-comp-navigation-bar-values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-non-dynamic(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme-styles(
-    $light-theme,
-    $theme,
-    $require-all: false
-  );
-
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  & {
-    @each $token, $value in $theme {
-      --_#{$token}: #{$value};
-    }
-  }
-
-  font-family: var(--_label-text-font);
-  font-size: var(--_label-text-size);
-  letter-spacing: var(--_label-text-tracking);
-  font-weight: var(--_label-text-weight);
-  line-height: var(--_label-text-line-height);
-
-  .md3-navigation-tab__icon {
-    width: var(--_icon-size);
-    height: var(--_icon-size);
-    font-size: var(--_icon-size);
-  }
-
-  &.md3-navigation-tab--active {
-    .md3-navigation-tab__icon {
-      color: var(--_active-icon-color);
-    }
-
-    .md3-navigation-tab__label-text {
-      color: var(--_active-label-text-color);
-    }
-
-    &:hover {
-      .md3-navigation-tab__icon {
-        color: var(--_active-hover-icon-color);
-      }
-
-      .md3-navigation-tab__label-text {
-        color: var(--_active-hover-label-text-color);
-      }
-    }
-
-    &:focus {
-      .md3-navigation-tab__icon {
-        color: var(--_active-focus-icon-color);
-      }
-
-      .md3-navigation-tab__label-text {
-        color: var(--_active-focus-label-text-color);
-      }
-    }
-
-    &:active {
-      .md3-navigation-tab__icon {
-        color: var(--_active-pressed-icon-color);
-      }
-
-      .md3-navigation-tab__label-text {
-        color: var(--_active-pressed-label-text-color);
-      }
-    }
-
-    @include ripple-theme.theme(
-      (
-        hover-state-layer-color: var(--_active-hover-state-layer-color),
-        focus-state-layer-color: var(--_active-focus-state-layer-color),
-        pressed-state-layer-color: var(--_active-pressed-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  &:not(.md3-navigation-tab--active) {
-    .md3-navigation-tab__icon {
-      color: var(--_inactive-icon-color);
-    }
-
-    .md3-navigation-tab__label-text {
-      color: var(--_inactive-label-text-color);
-    }
-
-    &:hover {
-      .md3-navigation-tab__icon {
-        color: var(--_inactive-hover-icon-color);
-      }
-
-      .md3-navigation-tab__label-text {
-        color: var(--_inactive-hover-label-text-color);
-      }
-    }
-
-    &:focus {
-      .md3-navigation-tab__icon {
-        color: var(--_inactive-focus-icon-color);
-      }
-
-      .md3-navigation-tab__label-text {
-        color: var(--_inactive-focus-label-text-color);
-      }
-    }
-
-    &:active {
-      .md3-navigation-tab__icon {
-        color: var(--_inactive-pressed-icon-color);
-      }
-
-      .md3-navigation-tab__label-text {
-        color: var(--_inactive-pressed-label-text-color);
-      }
-    }
-
-    @include ripple-theme.theme(
-      (
-        hover-state-layer-color: var(--_inactive-hover-state-layer-color),
-        focus-state-layer-color: var(--_inactive-focus-state-layer-color),
-        pressed-state-layer-color: var(--_inactive-pressed-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  .md3-navigation-tab__active-indicator {
-    background-color: var(--_active-indicator-color);
-    border-radius: var(--_active-indicator-shape);
-  }
-
-  // Keep icon-content in sync with active-indicator size.
-  .md3-navigation-tab__active-indicator,
-  .md3-navigation-tab__icon-content {
-    height: var(--_active-indicator-height);
-  }
-
-  // Keep icon-content in sync with active-indicator size.
-  &.md3-navigation-tab--active .md3-navigation-tab__active-indicator,
-  .md3-navigation-tab__icon-content {
-    width: var(--_active-indicator-width);
-  }
-
-  @include focus-ring.theme(
-    (
-      container-outer-padding-vertical: -4px,
-      container-outer-padding-horizontal: -4px,
-    )
-  );
-
-  @include badge.theme(
-    (
-      color: var(--_badge-color),
-      size: var(--_badge-size),
-      shape: var(--_badge-shape),
-      large-color: var(--_large-badge-color),
-      large-size: var(--_large-badge-size),
-      large-shape: var(--_large-badge-shape),
-    )
-  );
-}
diff --git a/navigationtab/lib/_navigation-tab.scss b/navigationtab/lib/_navigation-tab.scss
index 592af82a9..08c9b6935 100644
--- a/navigationtab/lib/_navigation-tab.scss
+++ b/navigationtab/lib/_navigation-tab.scss
@@ -6,11 +6,44 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+@use 'sass:map';
+
+@use '../../badge/badge';
+@use '../../ripple/ripple-theme';
+@use '../../focus/focus-ring';
 @use '../../motion/animation';
+@use '../../sass/theme';
+@use '../../tokens';
 
 $animation-duration: 100ms;
+$_custom-property-prefix: 'navigation-bar';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-navigation-bar-values(),
+    $tokens
+  );
+
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-navigation-bar-values();
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  * {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  :host {
+    display: flex;
+    flex-grow: 1;
+  }
 
-@mixin static-styles() {
   .md3-navigation-tab {
     align-items: center;
     appearance: none;
@@ -29,6 +62,29 @@ $animation-duration: 100ms;
     position: relative;
     text-align: center;
     width: 100%;
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    letter-spacing: var(--_label-text-tracking);
+    font-weight: var(--_label-text-weight);
+    line-height: var(--_label-text-line-height);
+
+    @include focus-ring.theme(
+      (
+        container-outer-padding-vertical: -4px,
+        container-outer-padding-horizontal: -4px,
+      )
+    );
+
+    @include badge.theme(
+      (
+        color: var(--_badge-color),
+        size: var(--_badge-size),
+        shape: var(--_badge-shape),
+        large-color: var(--_large-badge-color),
+        large-size: var(--_large-badge-size),
+        large-shape: var(--_large-badge-shape),
+      )
+    );
 
     // Firefox draws a dotted border around focused buttons unless specifically overridden.
     &::-moz-focus-inner {
@@ -69,17 +125,34 @@ $animation-duration: 100ms;
     transition: animation.standard(width, $animation-duration),
       animation.standard(opacity, $animation-duration);
     width: 32px;
+    background-color: var(--_active-indicator-color);
+    border-radius: var(--_active-indicator-shape);
 
     .md3-navigation-tab--active & {
       opacity: 1;
     }
   }
 
+  // Keep icon-content in sync with active-indicator size.
+  .md3-navigation-tab__active-indicator,
+  .md3-navigation-tab__icon-content {
+    height: var(--_active-indicator-height);
+  }
+
+  // Keep icon-content in sync with active-indicator size.
+  .md3-navigation-tab--active .md3-navigation-tab__active-indicator,
+  .md3-navigation-tab__icon-content {
+    width: var(--_active-indicator-width);
+  }
+
   .md3-navigation-tab__icon {
     fill: currentColor;
     align-self: center;
     display: inline-block;
     position: relative;
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+    font-size: var(--_icon-size);
 
     &.md3-navigation-tab__icon--active {
       display: none;
@@ -97,4 +170,106 @@ $animation-duration: 100ms;
   .md3-navigation-tab__ripple {
     z-index: 0;
   }
+
+  .md3-navigation-tab--active {
+    .md3-navigation-tab__icon {
+      color: var(--_active-icon-color);
+    }
+
+    .md3-navigation-tab__label-text {
+      color: var(--_active-label-text-color);
+    }
+
+    &:hover {
+      .md3-navigation-tab__icon {
+        color: var(--_active-hover-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_active-hover-label-text-color);
+      }
+    }
+
+    &:focus {
+      .md3-navigation-tab__icon {
+        color: var(--_active-focus-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_active-focus-label-text-color);
+      }
+    }
+
+    &:active {
+      .md3-navigation-tab__icon {
+        color: var(--_active-pressed-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_active-pressed-label-text-color);
+      }
+    }
+
+    @include ripple-theme.theme(
+      (
+        hover-state-layer-color: var(--_active-hover-state-layer-color),
+        focus-state-layer-color: var(--_active-focus-state-layer-color),
+        pressed-state-layer-color: var(--_active-pressed-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .md3-navigation-tab:not(.md3-navigation-tab--active) {
+    .md3-navigation-tab__icon {
+      color: var(--_inactive-icon-color);
+    }
+
+    .md3-navigation-tab__label-text {
+      color: var(--_inactive-label-text-color);
+    }
+
+    &:hover {
+      .md3-navigation-tab__icon {
+        color: var(--_inactive-hover-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_inactive-hover-label-text-color);
+      }
+    }
+
+    &:focus {
+      .md3-navigation-tab__icon {
+        color: var(--_inactive-focus-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_inactive-focus-label-text-color);
+      }
+    }
+
+    &:active {
+      .md3-navigation-tab__icon {
+        color: var(--_inactive-pressed-icon-color);
+      }
+
+      .md3-navigation-tab__label-text {
+        color: var(--_inactive-pressed-label-text-color);
+      }
+    }
+
+    @include ripple-theme.theme(
+      (
+        hover-state-layer-color: var(--_inactive-hover-state-layer-color),
+        focus-state-layer-color: var(--_inactive-focus-state-layer-color),
+        pressed-state-layer-color: var(--_inactive-pressed-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
 }
diff --git a/navigationtab/lib/navigation-tab-styles.scss b/navigationtab/lib/navigation-tab-styles.scss
index 70107e7f6..56409ad58 100644
--- a/navigationtab/lib/navigation-tab-styles.scss
+++ b/navigationtab/lib/navigation-tab-styles.scss
@@ -3,19 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './navigation-tab';
-@use './navigation-tab-theme';
 
-@include navigation-tab.static-styles();
-
-:host {
-  display: flex;
-  flex-grow: 1;
-}
-
-.md3-navigation-tab {
-  @include navigation-tab-theme.theme-styles(navigation-tab-theme.$light-theme);
-}
+@include navigation-tab.styles;