@angular/material 19.0.0-next.0 → 19.0.0-next.10

package/stepper/_stepper-theme.scss

@@ -12,8 +12,8 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs color theme styles for mat-stepper.
@@ -24,20 +24,25 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-        tokens-mat-stepper.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-stepper.$prefix,
+        tokens-mat-stepper.get-color-tokens($theme)
+      );
 
       .mat-step-header.mat-accent {
-        @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent));
+        @include token-utils.create-token-values(
+          tokens-mat-stepper.$prefix,
+          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent)
+        );
       }
 
       .mat-step-header.mat-warn {
-        @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(
+          tokens-mat-stepper.$prefix,
+          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn)
+        );
       }
     }
   }
@@ -48,11 +53,12 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-        tokens-mat-stepper.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-stepper.$prefix,
+        tokens-mat-stepper.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -62,22 +68,30 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-        tokens-mat-stepper.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-stepper.$prefix,
+        tokens-mat-stepper.get-density-tokens($theme)
+      );
     }
   }
 }
 
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-stepper.$prefix,
+      tokens: tokens-mat-stepper.get-token-slots(),
+    ),
+  );
+}
+
 /// 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,
-    (prefix: tokens-mat-stepper.$prefix, tokens: tokens-mat-stepper.get-token-slots()),
-  );
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for mat-stepper.
@@ -85,12 +99,11 @@
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
 ///   $color-variant: The color variant to use for the stepper: primary, secondary,
 ///   tertiary, or error (If not specified, primary color values will be used).
-@mixin theme($theme,  $options...) {
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -107,14 +120,14 @@
 
 @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');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     $mat-stepper-tokens: token-utils.get-tokens-for(
       $tokens,
       tokens-mat-stepper.$prefix,
       $options...
     );
-    @include token-utils.create-token-values(
-        tokens-mat-stepper.$prefix, $mat-stepper-tokens);
+    @include token-utils.create-token-values(tokens-mat-stepper.$prefix, $mat-stepper-tokens);
   }
 }

package/stepper/index.d.ts

@@ -9,12 +9,8 @@ import { CdkStepLabel } from '@angular/cdk/stepper';
 import { CdkStepper } from '@angular/cdk/stepper';
 import { CdkStepperNext } from '@angular/cdk/stepper';
 import { CdkStepperPrevious } from '@angular/cdk/stepper';
-import { ChangeDetectorRef } from '@angular/core';
-import { Directionality } from '@angular/cdk/bidi';
-import { ElementRef } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { EventEmitter } from '@angular/core';
-import { FocusMonitor } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
@@ -27,14 +23,12 @@ import { NgForm } from '@angular/forms';
 import { OnDestroy } from '@angular/core';
 import { Optional } from '@angular/core';
 import { QueryList } from '@angular/core';
-import { StepperOptions } from '@angular/cdk/stepper';
 import { StepperOrientation } from '@angular/cdk/stepper';
 import { StepState } from '@angular/cdk/stepper';
 import { Subject } from 'rxjs';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { TemplateRef } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
-import { ViewContainerRef } from '@angular/core';
 
 declare namespace i10 {
     export {
@@ -103,12 +97,11 @@ export declare class MatStep extends CdkStep implements ErrorStateMatcher, After
     _lazyContent: MatStepContent;
     /** Currently-attached portal containing the lazy content. */
     _portal: TemplatePortal;
-    constructor(stepper: MatStepper, _errorStateMatcher: ErrorStateMatcher, _viewContainerRef: ViewContainerRef, stepperOptions?: StepperOptions);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     /** Custom error state matcher that additionally checks for validity of interacted form. */
     isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatStep, [null, { skipSelf: true; }, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatStep, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatStep, "mat-step", ["matStep"], { "color": { "alias": "color"; "required": false; }; }, {}, ["stepLabel", "_lazyContent"], ["*"], true, never>;
 }
 
@@ -117,7 +110,7 @@ export declare class MatStep extends CdkStep implements ErrorStateMatcher, After
  */
 export declare class MatStepContent {
     _template: TemplateRef<any>;
-    constructor(_template: TemplateRef<any>);
+    constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepContent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatStepContent, "ng-template[matStepContent]", never, {}, {}, never, never, true, never>;
 }
@@ -154,7 +147,7 @@ export declare class MatStepHeader extends CdkStepHeader implements AfterViewIni
      * https://material.angular.io/guide/theming#using-component-color-variants.
      */
     color: ThemePalette;
-    constructor(_intl: MatStepperIntl, _focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef);
+    constructor(...args: unknown[]);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Focuses the step header. */
@@ -218,11 +211,11 @@ export declare class MatStepper extends CdkStepper implements AfterContentInit {
     private _animationDuration;
     /** Whether the stepper is rendering on the server. */
     protected _isServer: boolean;
-    constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>);
+    constructor(...args: unknown[]);
     ngAfterContentInit(): void;
     _stepIsNavigable(index: number, step: MatStep): boolean;
     _getAnimationDuration(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatStepper, [{ optional: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatStepper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatStepper, "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], ["*"], true, never>;
 }
 
@@ -242,7 +235,7 @@ export declare class MatStepperIcon {
     templateRef: TemplateRef<MatStepperIconContext>;
     /** Name of the icon to be overridden. */
     name: StepState;
-    constructor(templateRef: TemplateRef<MatStepperIconContext>);
+    constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepperIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatStepperIcon, "ng-template[matStepperIcon]", never, { "name": { "alias": "matStepperIcon"; "required": false; }; }, {}, never, never, true, never>;
 }

package/table/_table-theme.scss

@@ -10,11 +10,12 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-          tokens-mat-table.$prefix, tokens-mat-table.get-unthemable-tokens());
+        tokens-mat-table.$prefix,
+        tokens-mat-table.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -22,11 +23,12 @@
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-table.$prefix,
-        tokens-mat-table.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-table.$prefix,
+        tokens-mat-table.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -34,11 +36,12 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-table.$prefix,
-        tokens-mat-table.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-table.$prefix,
+        tokens-mat-table.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -46,28 +49,35 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-table.$prefix,
-        tokens-mat-table.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-table.$prefix,
+        tokens-mat-table.get-density-tokens($theme)
+      );
     }
   }
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-table.$prefix, tokens: tokens-mat-table.get-token-slots()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-table.$prefix,
+      tokens: tokens-mat-table.get-token-slots(),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @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));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -84,9 +94,12 @@
 
 @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');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mat-table.$prefix, map.get($tokens, tokens-mat-table.$prefix));
+      tokens-mat-table.$prefix,
+      map.get($tokens, tokens-mat-table.$prefix)
+    );
   }
 }

package/tabs/_tabs-common.scss

@@ -83,7 +83,7 @@ $mat-tab-animation-duration: 500ms !default;
     }
   }
 
-  .mat-mdc-tab-ripple {
+  .mat-mdc-tab-ripple.mat-mdc-tab-ripple {
     position: absolute;
     top: 0;
     left: 0;
@@ -109,6 +109,17 @@ $mat-tab-animation-duration: 500ms !default;
     @include token-utils.create-token-slot(height, container-height);
   }
 
+  @include token-utils.use-tokens(
+    tokens-mat-tab-header.$prefix,
+    tokens-mat-tab-header.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
+    @include token-utils.create-token-slot(line-height, label-text-line-height);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+  }
+
   &.mdc-tab {
     // MDC's tabs stretch to fit the header by default, whereas stretching on our current ones
     // is an opt-in behavior. Also technically we don't need to combine the two classes, but
@@ -131,12 +142,6 @@ $mat-tab-animation-duration: 500ms !default;
     tokens-mat-tab-header.$prefix,
     tokens-mat-tab-header.get-token-slots()
   ) {
-    @include token-utils.create-token-slot(font-family, label-text-font);
-    @include token-utils.create-token-slot(font-size, label-text-size);
-    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
-    @include token-utils.create-token-slot(line-height, label-text-line-height);
-    @include token-utils.create-token-slot(font-weight, label-text-weight);
-
     &:hover .mdc-tab__text-label {
       @include token-utils.create-token-slot(color, inactive-hover-label-text-color);
     }
@@ -300,10 +305,7 @@ $mat-tab-animation-duration: 500ms !default;
     -webkit-tap-highlight-color: transparent;
     touch-action: none;
     box-sizing: content-box;
-    background: none;
-    border: none;
     outline: 0;
-    padding: 0;
 
     &::-moz-focus-inner {
       border: 0;
@@ -478,7 +480,7 @@ $mat-tab-animation-duration: 500ms !default;
 
       > #{$header-selector}, > .mat-mdc-tab-header-pagination {
         .mat-mdc-tab-header-pagination-chevron,
-        .mat-mdc-focus-indicator::before {
+        .mat-focus-indicator::before {
           @include token-utils.create-token-slot(border-color, foreground-color);
         }
 

package/tabs/_tabs-theme.scss

@@ -15,19 +15,24 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
         tokens-mdc-secondary-navigation-tab.$prefix,
-        tokens-mdc-secondary-navigation-tab.get-unthemable-tokens());
+        tokens-mdc-secondary-navigation-tab.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-unthemable-tokens());
+        tokens-mdc-tab-indicator.$prefix,
+        tokens-mdc-tab-indicator.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens());
+        tokens-mat-tab-header.$prefix,
+        tokens-mat-tab-header.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
         tokens-mat-tab-header-with-background.$prefix,
-        tokens-mat-tab-header-with-background.get-unthemable-tokens());
+        tokens-mat-tab-header-with-background.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -40,9 +45,9 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
-    .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
+  } @else {
+    .mat-mdc-tab-group,
+    .mat-mdc-tab-nav-bar {
       @include _palette-styles($theme, primary);
 
       &.mat-accent {
@@ -69,8 +74,10 @@
 }
 
 @mixin _background-styles($theme, $palette-name) {
-  @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
-    tokens-mat-tab-header-with-background.get-color-tokens($theme, $palette-name));
+  @include token-utils.create-token-values(
+    tokens-mat-tab-header-with-background.$prefix,
+    tokens-mat-tab-header-with-background.get-color-tokens($theme, $palette-name)
+  );
 }
 
 @mixin _palette-styles($theme, $palette-name) {
@@ -80,9 +87,12 @@
   );
   @include token-utils.create-token-values(
     tokens-mdc-tab-indicator.$prefix,
-    tokens-mdc-tab-indicator.get-color-tokens($theme, $palette-name));
-  @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
-   tokens-mat-tab-header.get-color-tokens($theme, $palette-name));
+    tokens-mdc-tab-indicator.get-color-tokens($theme, $palette-name)
+  );
+  @include token-utils.create-token-values(
+    tokens-mat-tab-header.$prefix,
+    tokens-mat-tab-header.get-color-tokens($theme, $palette-name)
+  );
 }
 
 /// Outputs typography theme styles for the mat-tab.
@@ -90,18 +100,24 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     .mat-mdc-tab-header {
       @include token-utils.create-token-values(
         tokens-mdc-secondary-navigation-tab.$prefix,
-        tokens-mdc-secondary-navigation-tab.get-typography-tokens($theme));
+        tokens-mdc-secondary-navigation-tab.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-tab-indicator.$prefix,
+        tokens-mdc-tab-indicator.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
-        tokens-mat-tab-header.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
-        tokens-mat-tab-header-with-background.get-typography-tokens($theme));
+        tokens-mat-tab-header.$prefix,
+        tokens-mat-tab-header.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-tab-header-with-background.$prefix,
+        tokens-mat-tab-header-with-background.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -111,42 +127,61 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     .mat-mdc-tab-header {
       @include token-utils.create-token-values(
         tokens-mdc-secondary-navigation-tab.$prefix,
-        tokens-mdc-secondary-navigation-tab.get-density-tokens($theme));
+        tokens-mdc-secondary-navigation-tab.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
-        tokens-mat-tab-header.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
-        tokens-mat-tab-header-with-background.get-density-tokens($theme));
+        tokens-mdc-tab-indicator.$prefix,
+        tokens-mdc-tab-indicator.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-tab-header.$prefix,
+        tokens-mat-tab-header.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-tab-header-with-background.$prefix,
+        tokens-mat-tab-header-with-background.get-density-tokens($theme)
+      );
     }
   }
 }
 
-/// Outputs the CSS variable values for the given tokens.
-/// @param {Map} $tokens The token values to emit.
-@mixin overrides($tokens: ()) {
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
   $tab-tokens: tokens-mdc-secondary-navigation-tab.get-token-slots();
   $tab-indicator-tokens: tokens-mdc-tab-indicator.get-token-slots();
   $tab-header-tokens: tokens-mat-tab-header.get-token-slots();
   $tab-header-with-background-tokens: tokens-mat-tab-header-with-background.get-token-slots();
 
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mdc-secondary-navigation-tab.$prefix, tokens: $tab-tokens),
-    (prefix: tokens-mdc-tab-indicator.$prefix, tokens: $tab-indicator-tokens),
-    (prefix: tokens-mat-tab-header.$prefix, tokens: $tab-header-tokens),
+  @return (
+    (
+      namespace: tokens-mdc-secondary-navigation-tab.$prefix,
+      tokens: $tab-tokens,
+    ),
+    (
+      namespace: tokens-mdc-tab-indicator.$prefix,
+      tokens: $tab-indicator-tokens,
+    ),
     (
-      prefix: tokens-mat-tab-header-with-background.$prefix,
+      namespace: tokens-mat-tab-header.$prefix,
+      tokens: $tab-header-tokens,
+    ),
+    (
+      namespace: tokens-mat-tab-header-with-background.$prefix,
       tokens: $tab-header-with-background-tokens,
     ),
   );
 }
 
+/// 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()...);
+}
+
 /// 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):
@@ -156,8 +191,7 @@
   @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...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -174,18 +208,31 @@
 
 @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');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   $mdc-tab-indicator-tokens: token-utils.get-tokens-for(
-      $tokens, tokens-mdc-tab-indicator.$prefix, $options...);
+    $tokens,
+    tokens-mdc-tab-indicator.$prefix,
+    $options...
+  );
   $mat-tab-header-tokens: token-utils.get-tokens-for(
-      $tokens, tokens-mat-tab-header.$prefix, $options...);
+    $tokens,
+    tokens-mat-tab-header.$prefix,
+    $options...
+  );
   // Don't pass $options here, because the mdc-tab doesn't have color variants,
   // only the mdc-tab-indicator and mat-tab-header do.
-  $mdc-secondary-navigation-tab-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mdc-secondary-navigation-tab.$prefix);
-  @include token-utils.create-token-values(tokens-mdc-secondary-navigation-tab.$prefix,
-    $mdc-secondary-navigation-tab-tokens);
-  @include token-utils.create-token-values(tokens-mdc-tab-indicator.$prefix,
-    $mdc-tab-indicator-tokens);
+  $mdc-secondary-navigation-tab-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-secondary-navigation-tab.$prefix
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-secondary-navigation-tab.$prefix,
+    $mdc-secondary-navigation-tab-tokens
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-tab-indicator.$prefix,
+    $mdc-tab-indicator-tokens
+  );
   @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, $mat-tab-header-tokens);
 }