@angular/material 17.0.0 → 17.1.0-next.0

package/slider/index.d.ts

@@ -1,10 +1,5 @@
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanColor } from '@angular/material/core';
-import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor } from '@angular/material/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
@@ -13,11 +8,11 @@ import * as i0 from '@angular/core';
 import * as i4 from '@angular/material/core';
 import { MatRipple } from '@angular/material/core';
 import { NgZone } from '@angular/core';
-import { NumberInput } from '@angular/cdk/coercion';
 import { OnDestroy } from '@angular/core';
 import { QueryList } from '@angular/core';
 import { RippleGlobalOptions } from '@angular/material/core';
 import { Subject } from 'rxjs';
+import { ThemePalette } from '@angular/material/core';
 
 declare namespace i1 {
     export {
@@ -56,9 +51,10 @@ declare const MAT_SLIDER_THUMB_VALUE_ACCESSOR: any;
  * Allows users to select from a range of values by moving the slider thumb. It is similar in
  * behavior to the native `<input type="range">` element.
  */
-export declare class MatSlider extends _MatSliderMixinBase implements AfterViewInit, CanDisableRipple, OnDestroy, _MatSlider {
+export declare class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     readonly _ngZone: NgZone;
     readonly _cdr: ChangeDetectorRef;
+    readonly _elementRef: ElementRef<HTMLElement>;
     readonly _dir: Directionality;
     readonly _globalRippleOptions?: RippleGlobalOptions | undefined;
     /** The active portion of the slider track. */
@@ -71,33 +67,35 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     _inputs: QueryList<_MatSliderRangeThumb>;
     /** Whether the slider is disabled. */
     get disabled(): boolean;
-    set disabled(v: BooleanInput);
+    set disabled(v: boolean);
     private _disabled;
     /** Whether the slider displays a numeric value label upon pressing the thumb. */
     get discrete(): boolean;
-    set discrete(v: BooleanInput);
+    set discrete(v: boolean);
     private _discrete;
     /** Whether the slider displays tick marks along the slider track. */
-    get showTickMarks(): boolean;
-    set showTickMarks(v: BooleanInput);
-    private _showTickMarks;
+    showTickMarks: boolean;
     /** The minimum value that the slider can have. */
     get min(): number;
-    set min(v: NumberInput);
+    set min(v: number);
     private _min;
+    /** Palette color of the slider. */
+    color: ThemePalette;
+    /** Whether ripples are disabled in the slider. */
+    disableRipple: boolean;
     private _updateMin;
     private _updateMinRange;
     private _updateMinNonRange;
     /** The maximum value that the slider can have. */
     get max(): number;
-    set max(v: NumberInput);
+    set max(v: number);
     private _max;
     private _updateMax;
     private _updateMaxRange;
     private _updateMaxNonRange;
     /** The values at which the thumb will snap. */
     get step(): number;
-    set step(v: NumberInput);
+    set step(v: number);
     private _step;
     private _updateStep;
     private _updateStepRange;
@@ -137,7 +135,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     _hasAnimation: boolean;
     private _resizeTimer;
     private _platform;
-    constructor(_ngZone: NgZone, _cdr: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _dir: Directionality, _globalRippleOptions?: RippleGlobalOptions | undefined, animationMode?: string);
+    constructor(_ngZone: NgZone, _cdr: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _dir: Directionality, _globalRippleOptions?: RippleGlobalOptions | undefined, animationMode?: string);
     /** The radius of the native slider's knob. AFAIK there is no way to avoid hardcoding this. */
     _knobRadius: number;
     _inputPadding: number;
@@ -207,7 +205,14 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     /** Whether the given pointer event occurred within the bounds of the slider pointer's DOM Rect. */
     _isCursorOnSliderThumb(event: PointerEvent, rect: DOMRect): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "discrete": { "alias": "discrete"; "required": false; }; "showTickMarks": { "alias": "showTickMarks"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; }, {}, ["_input", "_inputs"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "disabled": { "alias": "disabled"; "required": false; }; "discrete": { "alias": "discrete"; "required": false; }; "showTickMarks": { "alias": "showTickMarks"; "required": false; }; "min": { "alias": "min"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; }, {}, ["_input", "_inputs"], ["*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_discrete: unknown;
+    static ngAcceptInputType_showTickMarks: unknown;
+    static ngAcceptInputType_min: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
+    static ngAcceptInputType_max: unknown;
+    static ngAcceptInputType_step: unknown;
 }
 
 declare interface _MatSlider {
@@ -292,12 +297,6 @@ export declare interface MatSliderDragEvent {
     value: number;
 }
 
-declare const _MatSliderMixinBase: _Constructor<CanColor> & _AbstractConstructor<CanColor> & _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & {
-    new (_elementRef: ElementRef<HTMLElement>): {
-        _elementRef: ElementRef<HTMLElement>;
-    };
-};
-
 export declare class MatSliderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<MatSliderModule, [typeof i1.MatSlider, typeof i2.MatSliderThumb, typeof i2.MatSliderRangeThumb, typeof i3.MatSliderVisualThumb], [typeof i4.MatCommonModule, typeof i4.MatRippleModule], [typeof i1.MatSlider, typeof i2.MatSliderThumb, typeof i2.MatSliderRangeThumb]>;
@@ -378,7 +377,7 @@ export declare class MatSliderThumb implements _MatSliderThumb, OnDestroy, Contr
     readonly _cdr: ChangeDetectorRef;
     protected _slider: _MatSlider;
     get value(): number;
-    set value(v: NumberInput);
+    set value(value: number);
     /** Event emitted when the `value` is changed. */
     readonly valueChange: EventEmitter<number>;
     /** Event emitted when the slider thumb starts being dragged. */
@@ -399,15 +398,15 @@ export declare class MatSliderThumb implements _MatSliderThumb, OnDestroy, Contr
     thumbPosition: _MatThumb;
     /** @docs-private */
     get min(): number;
-    set min(v: NumberInput);
+    set min(v: number);
     /** @docs-private */
     get max(): number;
-    set max(v: NumberInput);
+    set max(v: number);
     get step(): number;
-    set step(v: NumberInput);
+    set step(v: number);
     /** @docs-private */
     get disabled(): boolean;
-    set disabled(v: BooleanInput);
+    set disabled(v: boolean);
     /** The percentage of the slider that coincides with the value. */
     get percentage(): number;
     /** @docs-private */
@@ -533,6 +532,7 @@ export declare class MatSliderThumb implements _MatSliderThumb, OnDestroy, Contr
     blur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderThumb, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderThumb, "input[matSliderThumb]", ["matSliderThumb"], { "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; }, never, never, false, never>;
+    static ngAcceptInputType_value: unknown;
 }
 
 declare interface _MatSliderThumb {
@@ -683,13 +683,13 @@ declare interface _MatSliderVisualThumb {
  * Thumb types: range slider has two thumbs (START, END) whereas single point
  * slider only has one thumb (END).
  */
-declare const enum _MatThumb {
+declare enum _MatThumb {
     START = 1,
     END = 2
 }
 
 /** Tick mark enum, for discrete sliders. */
-declare const enum _MatTickMark {
+declare enum _MatTickMark {
     ACTIVE = 0,
     INACTIVE = 1
 }

package/slider/testing/index.d.ts

@@ -86,7 +86,7 @@ export declare interface SliderThumbHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Possible positions of a slider thumb. */
-export declare const enum ThumbPosition {
+export declare enum ThumbPosition {
     START = 0,
     END = 1
 }

package/sort/_sort-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/tokens/m2/mat/sort' as tokens-mat-sort;
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
@@ -5,42 +6,72 @@
 @use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-sort.$prefix,
-      tokens-mat-sort.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-sort.$prefix,
+        tokens-mat-sort.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-sort.$prefix,
-      tokens-mat-sort.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-sort.$prefix,
+        tokens-mat-sort.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-scale: inspection.get-theme-density($theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-sort.$prefix,
-      tokens-mat-sort.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-sort.$prefix,
+        tokens-mat-sort.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-sort.$prefix, map.get($tokens, tokens-mat-sort.$prefix));
+  }
+}

package/sort/index.d.ts

@@ -1,11 +1,7 @@
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterViewInit } from '@angular/core';
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { AriaDescriber } from '@angular/cdk/a11y';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanDisable } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor } from '@angular/material/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
@@ -72,7 +68,7 @@ export declare const MAT_SORT_HEADER_INTL_PROVIDER: {
 export declare function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl: MatSortHeaderIntl): MatSortHeaderIntl;
 
 /** Container for MatSortables to manage the sort state and provide default sort parameters. */
-export declare class MatSort extends _MatSortBase implements CanDisable, HasInitialized, OnChanges, OnDestroy, OnInit {
+export declare class MatSort extends _MatSortBase implements HasInitialized, OnChanges, OnDestroy, OnInit {
     private _defaultOptions?;
     /** Collection of all registered sortables that this directive manages. */
     sortables: Map<string, MatSortable>;
@@ -93,9 +89,9 @@ export declare class MatSort extends _MatSortBase implements CanDisable, HasInit
      * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
      * May be overridden by the MatSortable's disable clear input.
      */
-    get disableClear(): boolean;
-    set disableClear(v: BooleanInput);
-    private _disableClear;
+    disableClear: boolean;
+    /** Whether the sortable is disabled. */
+    disabled: boolean;
     /** Event emitted when the user changes either the active sort or sort direction. */
     readonly sortChange: EventEmitter<Sort>;
     constructor(_defaultOptions?: MatSortDefaultOptions | undefined);
@@ -117,7 +113,9 @@ export declare class MatSort extends _MatSortBase implements CanDisable, HasInit
     ngOnChanges(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSort, [{ optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSort, "[matSort]", ["matSort"], { "disabled": { "alias": "matSortDisabled"; "required": false; }; "active": { "alias": "matSortActive"; "required": false; }; "start": { "alias": "matSortStart"; "required": false; }; "direction": { "alias": "matSortDirection"; "required": false; }; "disableClear": { "alias": "matSortDisableClear"; "required": false; }; }, { "sortChange": "matSortChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSort, "[matSort]", ["matSort"], { "active": { "alias": "matSortActive"; "required": false; }; "start": { "alias": "matSortStart"; "required": false; }; "direction": { "alias": "matSortDirection"; "required": false; }; "disableClear": { "alias": "matSortDisableClear"; "required": false; }; "disabled": { "alias": "matSortDisabled"; "required": false; }; }, { "sortChange": "matSortChange"; }, never, never, false, never>;
+    static ngAcceptInputType_disableClear: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
 
 /** Interface for a directive that holds sorting state consumed by `MatSortHeader`. */
@@ -144,7 +142,7 @@ export declare const matSortAnimations: {
 };
 
 /** @docs-private */
-declare const _MatSortBase: (new (...args: any[]) => HasInitialized) & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & {
+declare const _MatSortBase: (new (...args: any[]) => HasInitialized) & {
     new (): {};
 };
 
@@ -165,7 +163,7 @@ export declare interface MatSortDefaultOptions {
  * If used on header cells in a CdkTable, it will automatically default its id from its containing
  * column definition.
  */
-export declare class MatSortHeader extends _MatSortHeaderBase implements CanDisable, MatSortable, OnDestroy, OnInit, AfterViewInit {
+export declare class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewInit {
     /**
      * @deprecated `_intl` parameter isn't being used anymore and it'll be removed.
      * @breaking-change 13.0.0
@@ -210,6 +208,8 @@ export declare class MatSortHeader extends _MatSortHeaderBase implements CanDisa
     arrowPosition: SortHeaderArrowPosition;
     /** Overrides the sort start value of the containing MatSort for this MatSortable. */
     start: SortDirection;
+    /** whether the sort header is disabled. */
+    disabled: boolean;
     /**
      * Description applied to MatSortHeader's button element with aria-describedby. This text should
      * describe the action that will occur when the user clicks the sort header.
@@ -218,9 +218,7 @@ export declare class MatSortHeader extends _MatSortHeaderBase implements CanDisa
     set sortActionDescription(value: string);
     private _sortActionDescription;
     /** Overrides the disable clear value of the containing MatSort for this MatSortable. */
-    get disableClear(): boolean;
-    set disableClear(v: BooleanInput);
-    private _disableClear;
+    disableClear: boolean;
     constructor(
     /**
      * @deprecated `_intl` parameter isn't being used anymore and it'll be removed.
@@ -278,14 +276,11 @@ export declare class MatSortHeader extends _MatSortHeaderBase implements CanDisa
     /** Handles changes in the sorting state. */
     private _handleStateChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSortHeader, [null, null, { optional: true; }, { optional: true; }, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSortHeader, "[mat-sort-header]", ["matSortHeader"], { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "mat-sort-header"; "required": false; }; "arrowPosition": { "alias": "arrowPosition"; "required": false; }; "start": { "alias": "start"; "required": false; }; "sortActionDescription": { "alias": "sortActionDescription"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSortHeader, "[mat-sort-header]", ["matSortHeader"], { "id": { "alias": "mat-sort-header"; "required": false; }; "arrowPosition": { "alias": "arrowPosition"; "required": false; }; "start": { "alias": "start"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "sortActionDescription": { "alias": "sortActionDescription"; "required": false; }; "disableClear": { "alias": "disableClear"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_disableClear: unknown;
 }
 
-/** @docs-private */
-declare const _MatSortHeaderBase: _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & {
-    new (): {};
-};
-
 /** Column definition associated with a `MatSortHeader`. */
 declare interface MatSortHeaderColumnDef {
     name: string;

package/stepper/_stepper-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -5,50 +6,82 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper;
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-      tokens-mat-stepper.get-color-tokens($theme));
-
-    .mat-step-header.mat-accent {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-        tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent));
-    }
+        tokens-mat-stepper.get-color-tokens($theme));
 
-    .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));
+      .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));
+      }
+
+      .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));
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-      tokens-mat-stepper.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @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));
+    }
   }
 }
 
 @mixin density($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-      tokens-mat-stepper.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @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));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
+    @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);
-    }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-stepper.$prefix, map.get($tokens, tokens-mat-stepper.$prefix));
+  }
+}

package/stepper/index.d.ts

@@ -1,17 +1,15 @@
-import { _AbstractConstructor } from '@angular/material/core';
 import { AbstractControl } from '@angular/forms';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { AnimationTriggerMetadata } from '@angular/animations';
-import { CanColor } from '@angular/material/core';
 import { CdkStep } from '@angular/cdk/stepper';
+import { CdkStepHeader } from '@angular/cdk/stepper';
 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 { _Constructor } from '@angular/material/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
@@ -118,7 +116,7 @@ export declare class MatStepContent {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatStepContent, "ng-template[matStepContent]", never, {}, {}, never, never, false, never>;
 }
 
-export declare class MatStepHeader extends _MatStepHeaderBase implements AfterViewInit, OnDestroy, CanColor {
+export declare class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDestroy {
     _intl: MatStepperIntl;
     private _focusMonitor;
     private _intlSubscription;
@@ -142,6 +140,8 @@ export declare class MatStepHeader extends _MatStepHeaderBase implements AfterVi
     optional: boolean;
     /** Whether the ripple should be disabled. */
     disableRipple: boolean;
+    /** Theme palette color of the step header. */
+    color: ThemePalette;
     constructor(_intl: MatStepperIntl, _focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -157,19 +157,9 @@ export declare class MatStepHeader extends _MatStepHeaderBase implements AfterVi
     _getIconContext(): MatStepperIconContext;
     _getDefaultTextForState(state: StepState): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatStepHeader, "mat-step-header", never, { "color": { "alias": "color"; "required": false; }; "state": { "alias": "state"; "required": false; }; "label": { "alias": "label"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "iconOverrides": { "alias": "iconOverrides"; "required": false; }; "index": { "alias": "index"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "active": { "alias": "active"; "required": false; }; "optional": { "alias": "optional"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatStepHeader, "mat-step-header", never, { "state": { "alias": "state"; "required": false; }; "label": { "alias": "label"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "iconOverrides": { "alias": "iconOverrides"; "required": false; }; "index": { "alias": "index"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "active": { "alias": "active"; "required": false; }; "optional": { "alias": "optional"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
 }
 
-/** @docs-private */
-declare const _MatStepHeaderBase: _Constructor<CanColor> & _AbstractConstructor<CanColor> & {
-    new (elementRef: ElementRef): {
-        _elementRef: ElementRef<HTMLElement>;
-        focus(): void;
-    };
-    ɵfac: unknown;
-    ɵdir: unknown;
-};
-
 export declare class MatStepLabel extends CdkStepLabel {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepLabel, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatStepLabel, "[matStepLabel]", never, {}, {}, never, never, false, never>;

package/stepper/testing/index.d.ts

@@ -136,7 +136,7 @@ export declare interface StepperHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Possible orientations for a stepper. */
-export declare const enum StepperOrientation {
+export declare enum StepperOrientation {
     HORIZONTAL = 0,
     VERTICAL = 1
 }