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

package/sort/index.d.ts

@@ -1,15 +1,41 @@
-import { AfterViewInit } from '@angular/core';
-import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
-import * as i1 from '@angular/material/core';
-import { InjectionToken } from '@angular/core';
-import { Observable } from 'rxjs';
-import { OnChanges } from '@angular/core';
-import { OnDestroy } from '@angular/core';
-import { OnInit } from '@angular/core';
-import { Optional } from '@angular/core';
+import { Optional, OnDestroy, OnInit, AfterViewInit } from '@angular/core';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import { M as MatSortable, a as MatSort, S as SortHeaderArrowPosition } from '../sort.d-i-bF_IaU.js';
+export { d as MAT_SORT_DEFAULT_OPTIONS, c as MatSortDefaultOptions, b as Sort } from '../sort.d-i-bF_IaU.js';
+import { S as SortDirection } from '../sort-direction.d-CF7VUsH-.js';
 import { Subject } from 'rxjs';
-import { WritableSignal } from '@angular/core';
+import '@angular/cdk/bidi';
+
+/**
+ * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
+ * include it in a custom provider.
+ */
+declare class MatSortHeaderIntl {
+    /**
+     * Stream that emits whenever the labels here are changed. Use this to notify
+     * components if the labels have changed after initialization.
+     */
+    readonly changes: Subject<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSortHeaderIntl, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MatSortHeaderIntl>;
+}
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl: MatSortHeaderIntl): MatSortHeaderIntl;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare const MAT_SORT_HEADER_INTL_PROVIDER: {
+    provide: typeof MatSortHeaderIntl;
+    deps: Optional[][];
+    useFactory: typeof MAT_SORT_HEADER_INTL_PROVIDER_FACTORY;
+};
 
 /**
  * Valid positions for the arrow to be in for its opacity and translation. If the state is a
@@ -21,8 +47,7 @@ import { WritableSignal } from '@angular/core';
  * @deprecated No longer being used, to be removed.
  * @breaking-change 21.0.0
  */
-export declare type ArrowViewState = SortDirection | 'hint' | 'active';
-
+type ArrowViewState = SortDirection | 'hint' | 'active';
 /**
  * States describing the arrow's animated position (animating fromState to toState).
  * If the fromState is not defined, there will be no animated transition to the toState.
@@ -30,130 +55,14 @@ export declare type ArrowViewState = SortDirection | 'hint' | 'active';
  * @deprecated No longer being used, to be removed.
  * @breaking-change 21.0.0
  */
-export declare interface ArrowViewStateTransition {
+interface ArrowViewStateTransition {
     fromState?: ArrowViewState;
     toState?: ArrowViewState;
 }
-
-declare namespace i2 {
-    export {
-        SortHeaderArrowPosition,
-        MatSortable,
-        Sort,
-        MatSortDefaultOptions,
-        MAT_SORT_DEFAULT_OPTIONS,
-        MatSort
-    }
-}
-
-declare namespace i3 {
-    export {
-        ArrowViewState,
-        ArrowViewStateTransition,
-        MatSortHeader
-    }
-}
-
-/** Injection token to be used to override the default options for `mat-sort`. */
-export declare const MAT_SORT_DEFAULT_OPTIONS: InjectionToken<MatSortDefaultOptions>;
-
-/** @docs-private */
-export declare const MAT_SORT_HEADER_INTL_PROVIDER: {
-    provide: typeof MatSortHeaderIntl;
-    deps: Optional[][];
-    useFactory: typeof MAT_SORT_HEADER_INTL_PROVIDER_FACTORY;
-};
-
-/** @docs-private */
-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 implements OnChanges, OnDestroy, OnInit {
-    private _defaultOptions?;
-    private _initializedStream;
-    /** Collection of all registered sortables that this directive manages. */
-    sortables: Map<string, MatSortable>;
-    /** Used to notify any child components listening to state changes. */
-    readonly _stateChanges: Subject<void>;
-    /** The id of the most recently sorted MatSortable. */
-    active: string;
-    /**
-     * The direction to set when an MatSortable is initially sorted.
-     * May be overridden by the MatSortable's sort start.
-     */
-    start: SortDirection;
-    /** The sort direction of the currently active MatSortable. */
-    get direction(): SortDirection;
-    set direction(direction: SortDirection);
-    private _direction;
-    /**
-     * 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.
-     */
-    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>;
-    /** Emits when the paginator is initialized. */
-    initialized: Observable<void>;
-    constructor(_defaultOptions?: MatSortDefaultOptions | undefined);
-    /**
-     * Register function to be used by the contained MatSortables. Adds the MatSortable to the
-     * collection of MatSortables.
-     */
-    register(sortable: MatSortable): void;
-    /**
-     * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
-     * collection of contained MatSortables.
-     */
-    deregister(sortable: MatSortable): void;
-    /** Sets the active sort id and determines the new sort direction. */
-    sort(sortable: MatSortable): void;
-    /** Returns the next sort direction of the active sortable, checking for potential overrides. */
-    getNextSortDirection(sortable: MatSortable): SortDirection;
-    ngOnInit(): void;
-    ngOnChanges(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSort, [{ optional: true; }]>;
-    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, true, never>;
-    static ngAcceptInputType_disableClear: unknown;
-    static ngAcceptInputType_disabled: unknown;
-}
-
-/** Interface for a directive that holds sorting state consumed by `MatSortHeader`. */
-export declare interface MatSortable {
-    /** The id of the column being sorted. */
-    id: string;
-    /** Starting sort direction. */
-    start: SortDirection;
-    /** Whether to disable clearing the sorting state. */
-    disableClear: boolean;
-}
-
-/**
- * Animations used by MatSort.
- * @docs-private
- * @deprecated No longer being used, to be removed.
- * @breaking-change 21.0.0
- */
-export declare const matSortAnimations: {
-    readonly indicator: any;
-    readonly leftPointer: any;
-    readonly rightPointer: any;
-    readonly arrowOpacity: any;
-    readonly arrowPosition: any;
-    readonly allowChildren: any;
-};
-
-/** Default options for `mat-sort`.  */
-export declare interface MatSortDefaultOptions {
-    /** Whether to disable clearing the sorting state. */
-    disableClear?: boolean;
-    /** Position of the arrow that displays when sorted. */
-    arrowPosition?: SortHeaderArrowPosition;
+/** Column definition associated with a `MatSortHeader`. */
+interface MatSortHeaderColumnDef {
+    name: string;
 }
-
 /**
  * Applies sorting behavior (click to change sort) and styles to an element, including an
  * arrow to display the current sort direction.
@@ -163,7 +72,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 implements MatSortable, OnDestroy, OnInit, AfterViewInit {
+declare class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewInit {
     _intl: MatSortHeaderIntl;
     _sort: MatSort;
     _columnDef: MatSortHeaderColumnDef | null;
@@ -172,12 +81,12 @@ export declare class MatSortHeader implements MatSortable, OnDestroy, OnInit, Af
     private _elementRef;
     private _ariaDescriber;
     private _renderChanges;
-    protected _animationModule: "NoopAnimations" | "BrowserAnimations" | null;
+    protected _animationsDisabled: boolean;
     /**
      * Indicates which state was just cleared from the sort header.
      * Will be reset on the next interaction. Used for coordinating animations.
      */
-    protected _recentlyCleared: WritableSignal<SortDirection | null>;
+    protected _recentlyCleared: i0.WritableSignal<SortDirection | null>;
     /**
      * The element with role="button" inside this component's view. We need this
      * in order to apply a description with AriaDescriber.
@@ -229,43 +138,26 @@ export declare class MatSortHeader implements MatSortable, OnDestroy, OnInit, Af
     static ngAcceptInputType_disableClear: unknown;
 }
 
-/** Column definition associated with a `MatSortHeader`. */
-declare interface MatSortHeaderColumnDef {
-    name: string;
-}
-
-/**
- * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
- * include it in a custom provider.
- */
-export declare class MatSortHeaderIntl {
-    /**
-     * Stream that emits whenever the labels here are changed. Use this to notify
-     * components if the labels have changed after initialization.
-     */
-    readonly changes: Subject<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSortHeaderIntl, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MatSortHeaderIntl>;
-}
-
-export declare class MatSortModule {
+declare class MatSortModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSortModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSortModule, never, [typeof i1.MatCommonModule, typeof i2.MatSort, typeof i3.MatSortHeader], [typeof i2.MatSort, typeof i3.MatSortHeader]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSortModule, never, [typeof MatCommonModule, typeof MatSort, typeof MatSortHeader], [typeof MatSort, typeof MatSortHeader]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSortModule>;
 }
 
-/** The current sort state. */
-export declare interface Sort {
-    /** The id of the column being sorted. */
-    active: string;
-    /** The sort direction. */
-    direction: SortDirection;
-}
-
-
-export declare type SortDirection = 'asc' | 'desc' | '';
-
-/** Position of the arrow that displays when sorted. */
-export declare type SortHeaderArrowPosition = 'before' | 'after';
+/**
+ * Animations used by MatSort.
+ * @docs-private
+ * @deprecated No longer being used, to be removed.
+ * @breaking-change 21.0.0
+ */
+declare const matSortAnimations: {
+    readonly indicator: any;
+    readonly leftPointer: any;
+    readonly rightPointer: any;
+    readonly arrowOpacity: any;
+    readonly arrowPosition: any;
+    readonly allowChildren: any;
+};
 
-export { }
+export { MAT_SORT_HEADER_INTL_PROVIDER, MAT_SORT_HEADER_INTL_PROVIDER_FACTORY, MatSort, MatSortHeader, MatSortHeaderIntl, MatSortModule, MatSortable, SortDirection, SortHeaderArrowPosition, matSortAnimations };
+export type { ArrowViewState, ArrowViewStateTransition };

package/sort/testing/index.d.ts

@@ -1,25 +1,15 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { SortDirection } from '@angular/material/sort';
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { S as SortDirection } from '../../sort-direction.d-CF7VUsH-.js';
 
-/** Harness for interacting with a standard `mat-sort` in tests. */
-export declare class MatSortHarness extends ComponentHarness {
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `mat-sort` with specific attributes.
-     * @param options Options for narrowing the search.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: SortHarnessFilters): HarnessPredicate<MatSortHarness>;
-    /** Gets all of the sort headers in the `mat-sort`. */
-    getSortHeaders(filter?: SortHeaderHarnessFilters): Promise<MatSortHeaderHarness[]>;
-    /** Gets the selected header in the `mat-sort`. */
-    getActiveHeader(): Promise<MatSortHeaderHarness | null>;
+interface SortHarnessFilters extends BaseHarnessFilters {
+}
+interface SortHeaderHarnessFilters extends BaseHarnessFilters {
+    label?: string | RegExp;
+    sortDirection?: SortDirection;
 }
 
 /** Harness for interacting with a standard Angular Material sort header in tests. */
-export declare class MatSortHeaderHarness extends ComponentHarness {
+declare class MatSortHeaderHarness extends ComponentHarness {
     static hostSelector: string;
     private _container;
     /**
@@ -39,12 +29,20 @@ export declare class MatSortHeaderHarness extends ComponentHarness {
     click(): Promise<void>;
 }
 
-export declare interface SortHarnessFilters extends BaseHarnessFilters {
-}
-
-export declare interface SortHeaderHarnessFilters extends BaseHarnessFilters {
-    label?: string | RegExp;
-    sortDirection?: SortDirection;
+/** Harness for interacting with a standard `mat-sort` in tests. */
+declare class MatSortHarness extends ComponentHarness {
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a `mat-sort` with specific attributes.
+     * @param options Options for narrowing the search.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: SortHarnessFilters): HarnessPredicate<MatSortHarness>;
+    /** Gets all of the sort headers in the `mat-sort`. */
+    getSortHeaders(filter?: SortHeaderHarnessFilters): Promise<MatSortHeaderHarness[]>;
+    /** Gets the selected header in the `mat-sort`. */
+    getActiveHeader(): Promise<MatSortHeaderHarness | null>;
 }
 
-export { }
+export { MatSortHarness, MatSortHeaderHarness };
+export type { SortHarnessFilters, SortHeaderHarnessFilters };

package/sort-direction.d-CF7VUsH-.d.ts

@@ -0,0 +1,3 @@
+type SortDirection = 'asc' | 'desc' | '';
+
+export type { SortDirection as S };

package/sort.d-i-bF_IaU.d.ts

@@ -0,0 +1,88 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, OnChanges, OnDestroy, OnInit, EventEmitter } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+import { S as SortDirection } from './sort-direction.d-CF7VUsH-.js';
+
+/** Position of the arrow that displays when sorted. */
+type SortHeaderArrowPosition = 'before' | 'after';
+/** Interface for a directive that holds sorting state consumed by `MatSortHeader`. */
+interface MatSortable {
+    /** The id of the column being sorted. */
+    id: string;
+    /** Starting sort direction. */
+    start: SortDirection;
+    /** Whether to disable clearing the sorting state. */
+    disableClear: boolean;
+}
+/** The current sort state. */
+interface Sort {
+    /** The id of the column being sorted. */
+    active: string;
+    /** The sort direction. */
+    direction: SortDirection;
+}
+/** Default options for `mat-sort`.  */
+interface MatSortDefaultOptions {
+    /** Whether to disable clearing the sorting state. */
+    disableClear?: boolean;
+    /** Position of the arrow that displays when sorted. */
+    arrowPosition?: SortHeaderArrowPosition;
+}
+/** Injection token to be used to override the default options for `mat-sort`. */
+declare const MAT_SORT_DEFAULT_OPTIONS: InjectionToken<MatSortDefaultOptions>;
+/** Container for MatSortables to manage the sort state and provide default sort parameters. */
+declare class MatSort implements OnChanges, OnDestroy, OnInit {
+    private _defaultOptions?;
+    private _initializedStream;
+    /** Collection of all registered sortables that this directive manages. */
+    sortables: Map<string, MatSortable>;
+    /** Used to notify any child components listening to state changes. */
+    readonly _stateChanges: Subject<void>;
+    /** The id of the most recently sorted MatSortable. */
+    active: string;
+    /**
+     * The direction to set when an MatSortable is initially sorted.
+     * May be overridden by the MatSortable's sort start.
+     */
+    start: SortDirection;
+    /** The sort direction of the currently active MatSortable. */
+    get direction(): SortDirection;
+    set direction(direction: SortDirection);
+    private _direction;
+    /**
+     * 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.
+     */
+    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>;
+    /** Emits when the paginator is initialized. */
+    initialized: Observable<void>;
+    constructor(_defaultOptions?: MatSortDefaultOptions | undefined);
+    /**
+     * Register function to be used by the contained MatSortables. Adds the MatSortable to the
+     * collection of MatSortables.
+     */
+    register(sortable: MatSortable): void;
+    /**
+     * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
+     * collection of contained MatSortables.
+     */
+    deregister(sortable: MatSortable): void;
+    /** Sets the active sort id and determines the new sort direction. */
+    sort(sortable: MatSortable): void;
+    /** Returns the next sort direction of the active sortable, checking for potential overrides. */
+    getNextSortDirection(sortable: MatSortable): SortDirection;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSort, [{ optional: true; }]>;
+    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, true, never>;
+    static ngAcceptInputType_disableClear: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+export { MatSort as a, MAT_SORT_DEFAULT_OPTIONS as d };
+export type { MatSortable as M, SortHeaderArrowPosition as S, Sort as b, MatSortDefaultOptions as c };

package/{core/tokens/m2/mat/_stepper.scss → stepper/_m2-stepper.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
+@use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, stepper);
@@ -11,9 +11,7 @@ $prefix: (mat, stepper);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    // Border radius for step header on focus
     header-focus-state-layer-shape: 0,
-    // Border radius for step header on hover
     header-hover-state-layer-shape: 0,
   );
 }
@@ -21,28 +19,17 @@ $prefix: (mat, stepper);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return map.merge(private-get-color-palette-color-tokens($theme, primary), (
-    // Background for stepper container.
     container-color: inspection.get-theme-color($theme, background, card),
-    // Color of the line indicator connecting the steps.
     line-color: inspection.get-theme-color($theme, foreground, divider),
-    // Background color of the header while hovered.
     header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    // Background color of the header while focused.
     header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    // Color of the text inside the step header.
     header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    // Color for the "optional" label in the step header.
     header-optional-label-text-color: inspection.get-theme-color(
         $theme, foreground, secondary-text),
-    // Color of the header text when a step is selected.
     header-selected-state-label-text-color: inspection.get-theme-color($theme, foreground, text),
-    // Color of the header text when a step is in an error state.
     header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text),
-    // Background color of the header icon.
     header-icon-background-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    // Foreground color of the header icon in the error state.
     header-error-state-icon-foreground-color: inspection.get-theme-color($theme, warn, text),
-    // Background color of the header icon in the error state.
     header-error-state-icon-background-color: transparent,
   ));
 }
@@ -50,20 +37,13 @@ $prefix: (mat, stepper);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // Font family of the entire stepper.
     container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    // Font family of the text inside the step header.
     header-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    // Size of the text inside the step header.
     header-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    // Weight of the text inside the step header.
     header-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
-    // Color of the header text when a step is in an error state.
     header-error-state-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    // Size of the header text in the selected state.
     header-selected-state-label-text-size: inspection.get-theme-typography(
         $theme, body-1, font-size),
-    // Weight of the header text in the selected state.
     header-selected-state-label-text-weight: inspection.get-theme-typography(
         $theme, body-1, font-weight),
   );
@@ -91,19 +71,12 @@ $prefix: (mat, stepper);
   $active-state-background: inspection.get-theme-color($theme, $palette-name);
 
   @return (
-    // Foreground color of the header icon.
     header-icon-foreground-color: $active-state-foreground,
-    // Background color of the header icon in the selected state.
     header-selected-state-icon-background-color: $active-state-background,
-    // Foreground color of the header icon in the selected state.
     header-selected-state-icon-foreground-color: $active-state-foreground,
-    // Background color of the header icon in the selected state.
     header-done-state-icon-background-color: $active-state-background,
-    // Foreground color of the header icon in the selected state.
     header-done-state-icon-foreground-color: $active-state-foreground,
-    // Background color of the header icon in the editing state.
     header-edit-state-icon-background-color: $active-state-background,
-    // Foreground color of the header icon in the editing state.
     header-edit-state-icon-foreground-color: $active-state-foreground,
   );
 }
@@ -113,8 +86,8 @@ $prefix: (mat, stepper);
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
       get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/stepper/_m3-stepper.scss

@@ -0,0 +1,102 @@
+@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, stepper);
+
+/// Generates custom tokens for the mat-stepper.
+/// @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-stepper
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-color: map.get($systems, md-sys-color, surface),
+    line-color: map.get($systems, md-sys-color, outline),
+    header-hover-state-layer-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, inverse-surface),
+      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+    ),
+    header-focus-state-layer-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, inverse-surface),
+      $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+    ),
+    header-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    header-icon-background-color: map.get($systems, md-sys-color, on-surface-variant),
+    header-icon-foreground-color: map.get($systems, md-sys-color, surface),
+    header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
+    header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+    header-done-state-icon-background-color: map.get($systems, md-sys-color, primary),
+    header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+    header-error-state-label-text-color: map.get($systems, md-sys-color, error),
+    header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error),
+    header-error-state-icon-background-color:
+      m3-utils.hardcode(transparent, $exclude-hardcoded),
+    container-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+    header-label-text-font: map.get($systems, md-sys-typescale, title-small-font),
+    header-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    header-focus-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
+    header-hover-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
+    header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    header-selected-state-label-text-weight: map.get(
+        $systems, md-sys-typescale, title-small-weight),
+    header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
+    header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+  );
+
+  $variant-tokens: (
+    // Color variants
+    primary: (
+      header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+      header-done-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+      header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+    ),
+    secondary: (
+      header-edit-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+      header-done-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+      header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+      header-selected-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      header-edit-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+      header-done-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+      header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+      header-selected-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: (
+      header-edit-state-icon-background-color: map.get($systems, md-sys-color, error),
+      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+      header-done-state-icon-background-color: map.get($systems, md-sys-color, error),
+      header-done-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+      header-selected-state-icon-background-color: map.get($systems, md-sys-color, error),
+      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+    )
+  );
+
+  @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);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    header-height: list.nth((72px, 68px, 64px, 60px, 42px), $index),
+  );
+}