@angular/material 20.0.0-rc.1 → 20.0.0-rc.2

package/table/_m3-table.scss

@@ -1,44 +1,53 @@
 @use 'sass:map';
 @use 'sass:list';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, table);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-table.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-table
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: sass-utils.merge-all(
-    m3-utils.generate-typography-tokens($systems, header-headline, title-small),
-    m3-utils.generate-typography-tokens($systems, row-item-label-text, body-medium),
-    m3-utils.generate-typography-tokens(
-        $systems, footer-supporting-text, body-medium),
-    (
-      row-item-outline-width: m3-utils.hardcode(1px, $exclude-hardcoded),
-      background-color: map.get($systems, md-sys-color, surface),
-      header-headline-color: map.get($systems, md-sys-color, on-surface),
-      row-item-label-text-color: map.get($systems, md-sys-color, on-surface),
-      row-item-outline-color: map.get($systems, md-sys-color, outline),
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  @return (
+    base: (
+      table-row-item-outline-width: 1px,
     ),
+    color: (
+      table-background-color: map.get($system, surface),
+      table-header-headline-color: map.get($system, on-surface),
+      table-row-item-label-text-color: map.get($system, on-surface),
+      table-row-item-outline-color: map.get($system, outline),
+    ),
+    typography: (
+      table-header-headline-font: map.get($system, title-small-font),
+      table-header-headline-line-height: map.get($system, title-small-line-height),
+      table-header-headline-size: map.get($system, title-small-size),
+      table-header-headline-tracking: map.get($system, title-small-tracking),
+      table-header-headline-weight: map.get($system, title-small-weight),
+      table-row-item-label-text-font: map.get($system, body-medium-font),
+      table-row-item-label-text-line-height: map.get($system, body-medium-line-height),
+      table-row-item-label-text-size: map.get($system, body-medium-size),
+      table-row-item-label-text-tracking: map.get($system, body-medium-tracking),
+      table-row-item-label-text-weight: map.get($system, body-medium-weight),
+      table-footer-supporting-text-font: map.get($system, body-medium-font),
+      table-footer-supporting-text-line-height: map.get($system, body-medium-line-height),
+      table-footer-supporting-text-size: map.get($system, body-medium-size),
+      table-footer-supporting-text-tracking: map.get($system, body-medium-tracking),
+      table-footer-supporting-text-weight: map.get($system, body-medium-weight),
+    ),
+    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
   );
-
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -4);
   $index: ($scale * -1) + 1;
 
   @return (
-    header-container-height: list.nth((56px, 52px, 48px, 44px, 40px), $index),
-    footer-container-height: list.nth((52px, 48px, 44px, 40px, 36px), $index),
-    row-item-container-height: list.nth((52px, 48px, 44px, 40px, 36px), $index),
+    table-header-container-height: list.nth((56px, 52px, 48px, 44px, 40px), $index),
+    table-footer-container-height: list.nth((52px, 48px, 44px, 40px, 36px), $index),
+    table-row-item-container-height: list.nth((52px, 48px, 44px, 40px, 36px), $index),
   );
 }

package/table/_table-theme.scss

@@ -3,51 +3,46 @@
 @use './m3-table';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-table.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-table.$prefix, m2-table.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-table.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-table.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-table.$prefix, m2-table.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-table.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-table.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-table.$prefix, m2-table.get-typography-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-table.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(m3-table.$prefix, m3-table.get-density-tokens($theme));
+    @include token-utils.create-token-values(map.get(m3-table.get-tokens($theme), density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-table.$prefix, m2-table.get-density-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-table.get-density-tokens($theme));
     }
   }
 }
@@ -56,23 +51,23 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-table.$prefix,
-      tokens: m2-table.get-token-slots(),
+      namespace: table,
+      tokens: token-utils.get-overrides(m3-table.get-tokens(), table)
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -87,15 +82,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-      m2-table.$prefix,
-      map.get($tokens, m2-table.$prefix)
-    );
-  }
-}

package/tabs/_m2-tabs.scss

@@ -4,9 +4,6 @@
 @use '../core/style/sass-utils';
 @use '../core/tokens/m2-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 //
@@ -17,14 +14,14 @@ $prefix: (mat, tab);
   @return (
     // This is specified both here and in the density tokens, because it determines the size of the
     // tab itself and there are internal tests who don't configure the theme correctly.
-    container-height: 48px,
+    tab-container-height: 48px,
     // For some period of time, the MDC tabs removed the divider. This has been added back in
     // and will be present in M3.
-    divider-color: transparent,
-    divider-height: 0,
-    active-indicator-height: 2px,
+    tab-divider-color: transparent,
+    tab-divider-height: 0,
+    tab-active-indicator-height: 2px,
     // Currently set to zero, but used by the gmat styles to make the indicator rounded.
-    active-indicator-shape: 0,
+    tab-active-indicator-shape: 0,
   );
 }
 
@@ -36,25 +33,25 @@ $prefix: (mat, tab);
   $ripple-color: inspection.get-theme-color($theme, $palette-name, default);
 
   $tokens: (
-    disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
-    pagination-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
+    tab-disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
+    tab-pagination-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
 
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
-    inactive-label-text-color: $inactive-label-text-color,
-    active-label-text-color: $active-label-text-color,
+    tab-inactive-label-text-color: $inactive-label-text-color,
+    tab-active-label-text-color: $active-label-text-color,
 
     // Tokens needed to implement the gmat styles. Externally they don't change.
-    active-ripple-color: $ripple-color,
-    inactive-ripple-color: $ripple-color,
-    inactive-focus-label-text-color: $inactive-label-text-color,
-    inactive-hover-label-text-color: $inactive-label-text-color,
-    active-focus-label-text-color: $active-label-text-color,
-    active-hover-label-text-color: $active-label-text-color,
-    active-focus-indicator-color: $active-label-text-color,
-    active-hover-indicator-color: $active-label-text-color,
-    active-indicator-color: inspection.get-theme-color($theme, $palette-name, default),
-    background-color: inspection.get-theme-color($theme, $palette-name, default),
-    foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+    tab-active-ripple-color: $ripple-color,
+    tab-inactive-ripple-color: $ripple-color,
+    tab-inactive-focus-label-text-color: $inactive-label-text-color,
+    tab-inactive-hover-label-text-color: $inactive-label-text-color,
+    tab-active-focus-label-text-color: $active-label-text-color,
+    tab-active-hover-label-text-color: $active-label-text-color,
+    tab-active-focus-indicator-color: $active-label-text-color,
+    tab-active-hover-indicator-color: $active-label-text-color,
+    tab-active-indicator-color: inspection.get-theme-color($theme, $palette-name, default),
+    tab-background-color: inspection.get-theme-color($theme, $palette-name, default),
+    tab-foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
 
   @each $token in $exclude {
@@ -68,11 +65,11 @@ $prefix: (mat, tab);
 @function get-typography-tokens($theme) {
   @return (
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
-    label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
-    label-text-line-height: inspection.get-theme-typography($theme, button, line-height),
-    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    tab-label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    tab-label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    tab-label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    tab-label-text-line-height: inspection.get-theme-typography($theme, button, line-height),
+    tab-label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
   );
 }
 
@@ -81,7 +78,7 @@ $prefix: (mat, tab);
   $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
 
   @return (
-    container-height: map.get((
+    tab-container-height: map.get((
       0: 48px,
       -1: 44px,
       -2: 40px,

package/tabs/_m3-tabs.scss

@@ -1,70 +1,59 @@
 @use '../core/tokens/m3-utils';
-@use '../core/style/sass-utils';
 @use 'sass:map';
 @use 'sass:list';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab);
+@use '../core/tokens/m3';
 
 /// Generates the tokens for MDC tab
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC tab
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: sass-utils.merge-all(
-      m3-utils.generate-typography-tokens($systems, label-text, title-small),
-      (
-        active-focus-indicator-color: map.get($systems, md-sys-color, primary),
-        active-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
-        active-hover-indicator-color: map.get($systems, md-sys-color, primary),
-        active-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
-        active-indicator-color: map.get($systems, md-sys-color, primary),
-        active-indicator-height: m3-utils.hardcode(2px, $exclude-hardcoded),
-        active-indicator-shape: m3-utils.hardcode(0, $exclude-hardcoded),
-        active-label-text-color: map.get($systems, md-sys-color, on-surface),
-        active-ripple-color: map.get($systems, md-sys-color, on-surface),
-        divider-color: map.get($systems, md-sys-color, surface-variant),
-        divider-height: m3-utils.hardcode(1px, $exclude-hardcoded),
-        inactive-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
-        inactive-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
-        inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
-        inactive-ripple-color: map.get($systems, md-sys-color, on-surface),
-        pagination-icon-color: map.get($systems, md-sys-color, on-surface),
-      ),
-  );
+/// @param {String} $color-variant The color variant to use for the component
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
 
-  $variant-tokens: (
-    // Color variants
-    primary: (), // Default, no overrides needed
-    secondary: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, secondary),
-      active-hover-indicator-color: map.get($systems, md-sys-color, secondary),
-      active-indicator-color: map.get($systems, md-sys-color, secondary),
+  @return (
+    base: (
+      tab-active-indicator-height: 2px,
+      tab-active-indicator-shape: 0,
+      tab-divider-height: 1px,
     ),
-    tertiary: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, tertiary),
-      active-hover-indicator-color: map.get($systems, md-sys-color, tertiary),
-      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    color: (
+      tab-active-focus-indicator-color: map.get($system, primary),
+      tab-active-focus-label-text-color: map.get($system, on-surface),
+      tab-active-hover-indicator-color: map.get($system, primary),
+      tab-active-hover-label-text-color: map.get($system, on-surface),
+      tab-active-indicator-color: map.get($system, primary),
+      tab-active-label-text-color: map.get($system, on-surface),
+      tab-active-ripple-color: map.get($system, on-surface),
+      tab-divider-color: map.get($system, surface-variant),
+      tab-inactive-focus-label-text-color: map.get($system, on-surface),
+      tab-inactive-hover-label-text-color: map.get($system, on-surface),
+      tab-inactive-label-text-color: map.get($system, on-surface),
+      tab-inactive-ripple-color: map.get($system, on-surface),
+      tab-pagination-icon-color: map.get($system, on-surface),
+      tab-disabled-ripple-color: map.get($system, on-surface-variant),
+      tab-background-color: null,
+      tab-foreground-color: null,
     ),
-    error: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, error),
-      active-hover-indicator-color: map.get($systems, md-sys-color, error),
-      active-indicator-color: map.get($systems, md-sys-color, error),
-    )
+    typography: (
+      tab-label-text-font: map.get($system, title-small-font),
+      tab-label-text-line-height: map.get($system, title-small-line-height),
+      tab-label-text-size: map.get($system, title-small-size),
+      tab-label-text-tracking: map.get($system, title-small-tracking),
+      tab-label-text-weight: map.get($system, title-small-weight),
+    ),
+    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
   );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -4);
   $index: ($scale * -1) + 1;
 
   @return (
-    container-height: list.nth((48px, 44px, 40px, 36px, 32px), $index),
+    tab-container-height: list.nth((48px, 44px, 40px, 36px, 32px), $index),
   );
 }

package/tabs/_tabs-theme.scss

@@ -3,7 +3,6 @@
 @use './m3-tabs';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use 'sass:map';
@@ -13,67 +12,62 @@
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-tabs.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-          m2-tabs.$prefix, m2-tabs.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-tabs.get-unthemable-tokens());
     }
   }
 }
 
 /// Outputs color theme styles for the mat-tab.
 /// @param {Map} $theme The theme to generate color styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the tab indicator: primary, secondary,
-///      tertiary, or error (If not specified, default primary color will be used).
-@mixin color($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(
+        map.get(m3-tabs.get-tokens($theme, $color-variant), color));
   } @else {
     .mat-mdc-tab-group,
     .mat-mdc-tab-nav-bar {
       @include token-utils.create-token-values-mixed(
-          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, primary,
-            $exclude: (background-color, foreground-color)));
+          m2-tabs.get-color-tokens($theme, primary,
+            $exclude: (tab-background-color, tab-foreground-color)));
 
       &.mat-accent {
         @include token-utils.create-token-values-mixed(
-          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, accent,
-            $exclude: (background-color, foreground-color)));
+          m2-tabs.get-color-tokens($theme, accent,
+            $exclude: (tab-background-color, tab-foreground-color)));
       }
 
       &.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, warn,
-            $exclude: (background-color, foreground-color)));
+          m2-tabs.get-color-tokens($theme, warn,
+            $exclude: (tab-background-color, tab-foreground-color)));
       }
 
       &.mat-background-primary {
         $tokens: m2-tabs.get-color-tokens($theme, primary);
-        @include token-utils.create-token-values-mixed(
-            m2-tabs.$prefix, (
-              background-color: map.get($tokens, background-color),
-              foreground-color: map.get($tokens, foreground-color),
-            ));
+        @include token-utils.create-token-values-mixed((
+          tab-background-color: map.get($tokens, background-color),
+          tab-foreground-color: map.get($tokens, foreground-color)
+        ));
       }
 
       &.mat-background-accent {
         $tokens: m2-tabs.get-color-tokens($theme, accent);
-        @include token-utils.create-token-values-mixed(
-            m2-tabs.$prefix, (
-            background-color: map.get($tokens, background-color),
-            foreground-color: map.get($tokens, foreground-color),
-          ));
+        @include token-utils.create-token-values-mixed((
+          tab-background-color: map.get($tokens, background-color),
+          tab-foreground-color: map.get($tokens, foreground-color),
+        ));
       }
 
       &.mat-background-warn {
         $tokens: m2-tabs.get-color-tokens($theme, warn);
-        @include token-utils.create-token-values-mixed(
-            m2-tabs.$prefix, (
-            background-color: map.get($tokens, background-color),
-            foreground-color: map.get($tokens, foreground-color),
-          ));
+        @include token-utils.create-token-values-mixed((
+          tab-background-color: map.get($tokens, background-color),
+          tab-foreground-color: map.get($tokens, foreground-color),
+        ));
       }
     }
   }
@@ -83,11 +77,10 @@
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-tabs.get-tokens($theme), typography));
   } @else {
     .mat-mdc-tab-header {
-      @include token-utils.create-token-values-mixed(
-        m2-tabs.$prefix, m2-tabs.get-typography-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-tabs.get-typography-tokens($theme));
     }
   }
 }
@@ -96,11 +89,10 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(m3-tabs.$prefix, m3-tabs.get-density-tokens($theme));
+    @include token-utils.create-token-values(map.get(m3-tabs.get-tokens($theme), density));
   } @else {
     .mat-mdc-tab-header {
-      @include token-utils.create-token-values-mixed(
-        m2-tabs.$prefix, m2-tabs.get-density-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-tabs.get-density-tokens($theme));
     }
   }
 }
@@ -109,8 +101,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-tabs.$prefix,
-      tokens: m2-tabs.get-token-slots(),
+      namespace: tab,
+      tokens: token-utils.get-overrides(m3-tabs.get-tokens(), tab)
     ),
   );
 }
@@ -118,21 +110,19 @@
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-tab.
 /// @param {Map} $theme The theme to generate styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the tab indicator: primary, secondary,
-///      tertiary, or error (If not specified, default primary color will be used).
-@mixin theme($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -147,14 +137,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens, $options...) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  $tabs-tokens: token-utils.get-tokens-for($tokens, m2-tabs.$prefix, $options...);
-  $tabs-tokens-without-options: token-utils.get-tokens-for($tokens, m2-tabs.$prefix);
-
-  @include token-utils.create-token-values(m2-tabs.$prefix, $tabs-tokens-without-options);
-  @include token-utils.create-token-values(m2-tabs.$prefix, $tabs-tokens);
-}

package/tabs/index.d.ts

@@ -3,7 +3,7 @@ import { InjectionToken, TemplateRef, OnInit, OnChanges, OnDestroy, SimpleChange
 import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
 import { CdkPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { Subject, BehaviorSubject } from 'rxjs';
-import { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
+import { FocusKeyManager, FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
 import { Direction } from '@angular/cdk/bidi';
 import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
 import { b as RippleTarget, f as RippleConfig, R as RippleGlobalOptions } from '../ripple.d-BT30YVLB.js';
@@ -259,7 +259,7 @@ declare abstract class MatPaginatedTabHeader implements AfterContentChecked, Aft
     /** Whether the scroll distance has changed and should be applied after the view is checked. */
     private _scrollDistanceChanged;
     /** Used to manage focus between the tabs. */
-    private _keyManager;
+    protected _keyManager: FocusKeyManager<MatPaginatedTabHeaderItem> | undefined;
     /** Cached text content of the header. */
     private _currentTextContent;
     /** Stream that will stop the automated scrolling. */
@@ -729,6 +729,7 @@ declare class MatTabChangeEvent {
  * Provides anchored navigation with animated ink bar.
  */
 declare class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit, AfterViewInit {
+    _focusedItem: i0.WritableSignal<MatPaginatedTabHeaderItem | null>;
     /** Whether the ink bar should fit its width to the size of the tab label content. */
     get fitInkBarToContent(): boolean;
     set fitInkBarToContent(value: boolean);
@@ -779,6 +780,7 @@ declare class MatTabNav extends MatPaginatedTabHeader implements AfterContentIni
     /** Notifies the component that the active link has been changed. */
     updateActiveLink(): void;
     _getRole(): string | null;
+    _hasFocus(link: MatTabLink): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNav, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; "stretchTabs": { "alias": "mat-stretch-tabs"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabPanel": { "alias": "tabPanel"; "required": false; }; }, {}, ["_items"], ["*"], true, never>;
     static ngAcceptInputType_fitInkBarToContent: unknown;
@@ -795,6 +797,7 @@ declare class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy,
     private readonly _destroyed;
     /** Whether the tab link is active or not. */
     protected _isActive: boolean;
+    protected _tabIndex: i0.Signal<number>;
     /** Whether the link is active. */
     get active(): boolean;
     set active(value: boolean);
@@ -828,7 +831,6 @@ declare class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy,
     _getAriaSelected(): string | null;
     _getAriaCurrent(): string | null;
     _getRole(): string | null;
-    _getTabIndex(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLink, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatTabLink, "[mat-tab-link], [matTabLink]", ["matTabLink"], { "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_active: unknown;

package/timepicker/_m2-timepicker.scss

@@ -3,22 +3,19 @@
 @use '../core/style/sass-utils';
 @use '../core/style/elevation';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, timepicker);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-shape: 4px,
-    container-elevation-shadow: elevation.get-box-shadow(8),
+    timepicker-container-shape: 4px,
+    timepicker-container-elevation-shadow: elevation.get-box-shadow(8),
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    container-background-color: inspection.get-theme-color($theme, background, card)
+    timepicker-container-background-color: inspection.get-theme-color($theme, background, card)
   );
 }