@angular/material 16.2.0-next.2 → 16.2.0-next.4

package/autocomplete/index.d.ts

@@ -2,6 +2,7 @@ import { _AbstractConstructor } from '@angular/material/core';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
+import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
@@ -98,19 +99,21 @@ export declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
  */
 export declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
 
-export declare class MatAutocomplete extends _MatAutocompleteBase {
+export declare class MatAutocomplete extends _MatAutocompleteBase implements OnDestroy {
     /** Reference to all option groups within the autocomplete. */
     optionGroups: QueryList<MatOptgroup>;
     /** Reference to all options within the autocomplete. */
     options: QueryList<MatOption>;
     protected _visibleClass: string;
     protected _hiddenClass: string;
+    _animationDone: EventEmitter<AnimationEvent_2>;
     /** Whether checkmark indicator for single-selection options is hidden. */
     get hideSingleSelectionIndicator(): boolean;
     set hideSingleSelectionIndicator(value: BooleanInput);
     private _hideSingleSelectionIndicator;
     /** Syncs the parent state with the individual options. */
     _syncParentProperties(): void;
+    ngOnDestroy(): void;
     protected _skipPredicate(_option: _MatOptionBase): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocomplete, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, {}, ["optionGroups", "options"], ["*"], false, never>;
@@ -134,6 +137,8 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     protected abstract _visibleClass: string;
     /** Class to apply to the panel when it's hidden. */
     protected abstract _hiddenClass: string;
+    /** Emits when the panel animation is done. Null if the panel doesn't animate. */
+    abstract _animationDone: EventEmitter<AnimationEvent_2> | null;
     /** Manages active item in option list based on key events. */
     _keyManager: ActiveDescendantKeyManager<_MatOptionBase>;
     /** Whether the autocomplete panel should be visible, depending on option length. */
@@ -170,6 +175,15 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     get autoSelectActiveOption(): boolean;
     set autoSelectActiveOption(value: BooleanInput);
     private _autoSelectActiveOption;
+    /**
+     * Whether the user is required to make a selection when they're interacting with the
+     * autocomplete. If the user moves away from the autcomplete without selecting an option from
+     * the list, the value will be reset. If the user opens the panel and closes it without
+     * interacting or selecting a value, the initial value will be kept.
+     */
+    get requireSelection(): boolean;
+    set requireSelection(value: BooleanInput);
+    private _requireSelection;
     /**
      * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
      * match the width of its host.
@@ -220,7 +234,7 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     private _setThemeClasses;
     protected _skipPredicate(option: _MatOptionBase): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never, never, false, never>;
 }
 
 /** Default `mat-autocomplete` options that can be overridden. */
@@ -229,6 +243,11 @@ export declare interface MatAutocompleteDefaultOptions {
     autoActiveFirstOption?: boolean;
     /** Whether the active option should be selected as the user is navigating. */
     autoSelectActiveOption?: boolean;
+    /**
+     * Whether the user is required to make a selection when
+     * they're interacting with the autocomplete.
+     */
+    requireSelection?: boolean;
     /** Class or list of classes to be applied to the autocomplete's overlay panel. */
     overlayPanelClass?: string | string[];
     /** Wheter icon indicators should be hidden for single-selection. */
@@ -302,8 +321,12 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _componentDestroyed;
     private _autocompleteDisabled;
     private _scrollStrategy;
+    private _keydownSubscription;
+    private _outsideClickSubscription;
     /** Old value of the native input. Used to work around issues with the `input` event on IE. */
     private _previousValue;
+    /** Value of the input element when the panel was opened. */
+    private _valueOnOpen;
     /** Strategy that is used to position the panel. */
     private _positionStrategy;
     /** Whether or not the label state is being overridden. */
@@ -413,6 +436,11 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
      * stream every time the option list changes.
      */
     private _subscribeToClosingActions;
+    /**
+     * Emits the opened event once it's known that the panel will be shown and stores
+     * the state of the trigger right before the opening sequence was finished.
+     */
+    private _emitOpened;
     /** Destroys the autocomplete suggestion panel. */
     private _destroyPanel;
     private _assignOptionValue;
@@ -428,6 +456,10 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
      */
     private _clearPreviousSelectedOption;
     private _attachOverlay;
+    /** Handles keyboard events coming from the overlay panel. */
+    private _handlePanelKeydown;
+    /** Updates the panel's visibility state and any trigger state tied to id. */
+    private _updatePanelState;
     private _getOverlayConfig;
     private _getOverlayPosition;
     /** Sets the positions on a position strategy based on the directive's input state. */
@@ -450,8 +482,6 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _getWindow;
     /** Scrolls to a particular option in the list. */
     private _scrollToOption;
-    /** Handles keyboard events coming from the overlay panel. */
-    private _handleOverlayEvents;
     /**
      * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
      * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options

package/button/_fab-theme.scss

@@ -1,75 +1,102 @@
 @use 'sass:map';
 @use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 
 @use './button-theme-private';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
+@use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
+@use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
 @use '../core/typography/typography';
 
-@mixin _fab-variant($foreground, $background) {
-  @include mdc-fab-theme.theme((
-    container-color: $background,
-    icon-color: $foreground,
-  ));
+@mixin _fab-variant($config, $foreground, $background) {
+  $color-config: map.merge(
+    $config,
+    (
+      primary: (
+        default: $background,
+        default-contrast: $foreground,
+      ),
+    )
+  );
+  $color-tokens: tokens-mdc-fab.get-color-tokens($color-config);
+  @include mdc-fab-theme.theme($color-tokens);
 
   --mat-mdc-fab-color: #{$foreground};
 }
 
+@function white-or-black($color, $is-dark) {
+  @return if(mdc-helpers.variable-safe-contrast-tone($color, $is-dark) == 'dark', #000, #fff);
+}
+
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $is-dark: map.get($config, is-dark);
 
-    .mat-mdc-fab, .mat-mdc-mini-fab {
+  $is-dark: map.get($config, is-dark);
+  $background: map.get($config, background);
+
+  $surface: theming.get-color-from-palette($background, card);
+  $primary: theming.get-color-from-palette(map.get($config, primary));
+  $accent: theming.get-color-from-palette(map.get($config, accent));
+  $warn: theming.get-color-from-palette(map.get($config, warn));
+
+  $on-surface: white-or-black($surface, $is-dark);
+  $on-primary: white-or-black($primary, $is-dark);
+  $on-accent: white-or-black($accent, $is-dark);
+  $on-warn: white-or-black($warn, $is-dark);
+
+  $disabled: rgba($on-surface, 0.12);
+  $on-disabled: rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38));
+
+  .mat-mdc-fab,
+  .mat-mdc-mini-fab {
+    // TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
+    // being wrapped by using-mdc-theme. This workaround needs to be
+    // revisited w/ a more holistic solution.
+    @include mdc-helpers.using-mdc-theme($config) {
       @include button-theme-private.ripple-theme-styles($config, true);
+    }
 
-      &.mat-unthemed {
-        @include _fab-variant($on-surface, mdc-theme-color.prop-value(surface));
-      }
-
-      &.mat-primary {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-primary),
-          mdc-theme-color.prop-value(primary)
-        );
-      }
-
-      &.mat-accent {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-secondary),
-          mdc-theme-color.prop-value(secondary)
-        );
-      }
-
-      &.mat-warn {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-error),
-          mdc-theme-color.prop-value(error)
-        );
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include _fab-variant(
-          rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38)),
-          rgba($on-surface, 0.12)
-        );
-      }
+    @include button-theme-private.apply-disabled-style() {
+      @include _fab-variant($config, $on-disabled, $disabled);
+    }
+
+    &.mat-unthemed {
+      @include _fab-variant($config, $on-surface, $surface);
+    }
+
+    &.mat-primary {
+      @include _fab-variant($config, $on-primary, $primary);
+    }
+
+    &.mat-accent {
+      @include _fab-variant($config, $on-accent, $accent);
+    }
+
+    &.mat-warn {
+      @include _fab-variant($config, $on-warn, $warn);
     }
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
-    theming.get-typography-config($config-or-theme));
+    theming.get-typography-config($config-or-theme)
+  );
+
   @include mdc-helpers.using-mdc-typography($config) {
     @include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
   }
+
+  $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($config);
+  .mat-mdc-extended-fab {
+    @include mdc-extended-fab-theme.theme($typography-tokens);
+  }
 }
 
-@mixin density($config-or-theme) {}
+@mixin density($config-or-theme) {
+}
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);

package/card/_card-theme.scss

@@ -79,8 +79,24 @@
 }
 
 @mixin theme-from-tokens($tokens) {
-  @include mdc-elevated-card-theme.theme(map.get($tokens, tokens-mdc-elevated-card.$prefix));
-  @include mdc-outlined-card-theme.theme(map.get($tokens, tokens-mdc-outlined-card.$prefix));
-  @include token-utils.create-token-values(
-      tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
+  @if ($tokens != ()) {
+    $elevated-card-tokens: map.get($tokens, tokens-mdc-elevated-card.$prefix);
+    // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.
+    $elevated-card-tokens: token-utils.resolve-elevation(
+        $elevated-card-tokens,
+        container-elevation,
+        container-shadow-color
+    );
+    $outlined-card-tokens: map.get($tokens, tokens-mdc-outlined-card.$prefix);
+    // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.
+    $outlined-card-tokens: token-utils.resolve-elevation(
+        $outlined-card-tokens,
+        container-elevation,
+        container-shadow-color
+    );
+    @include mdc-elevated-card-theme.theme($elevated-card-tokens);
+    @include mdc-outlined-card-theme.theme($outlined-card-tokens);
+    @include token-utils.create-token-values(
+        tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
+  }
 }

package/checkbox/_checkbox-theme.scss

@@ -90,7 +90,9 @@
 }
 
 @mixin theme-from-tokens($tokens) {
-  // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
-  //   so this mixin is currently incomplete.
-  @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
+  @if ($tokens != ()) {
+    // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
+    //   so this mixin is currently incomplete.
+    @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
+  }
 }

package/core/index.d.ts

@@ -606,9 +606,9 @@ export declare class _MatOptionBase<T = any> implements FocusableOption, AfterVi
      */
     get viewValue(): string;
     /** Selects the option. */
-    select(): void;
+    select(emitEvent?: boolean): void;
     /** Deselects the option. */
-    deselect(): void;
+    deselect(emitEvent?: boolean): void;
     /** Sets focus onto this option. */
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
     /**

package/core/tokens/_token-utils.scss

@@ -39,6 +39,7 @@ $placeholder-typography-config: (
   caption: $_placeholder-typography-level-config,
   button: $_placeholder-typography-level-config,
   overline: $_placeholder-typography-level-config,
+  subheading-1: $_placeholder-typography-level-config,
 );
 
 // Placeholder density config that can be passed to token getter functions when generating token
@@ -93,6 +94,19 @@ $_component-prefix: null;
   }
 }
 
+// Returns the name of a token including the current prefix. Intended to be used in calculations
+// involving tokens. `create-token-slot` should be used when outputting tokens.
+@function get-token-variable($token) {
+  @if $_component-prefix == null or $_tokens == null {
+    @error '`get-token-variable` must be used within `use-tokens`';
+  }
+  @if not map.has-key($_tokens, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
+  }
+
+  @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
+}
+
 @mixin create-token-values($prefix, $tokens) {
   @include _configure-token-prefix($prefix...) {
     @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);

package/core/tokens/m2/mat/_expansion.scss

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, expansion);
+
+// 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,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @return (
+    container-background-color: theming.get-color-from-palette($background, card),
+    container-text-color: theming.get-color-from-palette($foreground, text),
+    actions-divider-color: theming.get-color-from-palette($foreground, divider),
+    header-hover-state-layer-color: theming.get-color-from-palette($background, hover),
+    header-focus-state-layer-color: theming.get-color-from-palette($background, hover),
+    header-disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
+    header-text-color: theming.get-color-from-palette($foreground, text),
+    header-description-color: theming.get-color-from-palette($foreground, secondary-text),
+    header-indicator-color: theming.get-color-from-palette($foreground, secondary-text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    header-text-font: typography-utils.font-family($config, subheading-1) or $fallback-font-family,
+    header-text-size: typography-utils.font-size($config, subheading-1),
+    header-text-weight: typography-utils.font-weight($config, subheading-1),
+
+    // TODO(crisbeto): these two properties weren't set at all before the introduction of tokens,
+    // but it's inconsistent not to provide them since the container sets all of them. Eventually
+    // we should change the values to use come from `subheading-1`.
+    header-text-line-height: inherit,
+    header-text-tracking: inherit,
+
+    container-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    container-text-line-height: typography-utils.line-height($config, body-1),
+    container-text-size: typography-utils.font-size($config, body-1),
+    container-text-tracking: typography-utils.letter-spacing($config, body-1),
+    container-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -3);
+  $collapsed-scale: (
+    0: 48px,
+    -1: 44px,
+    -2: 40px,
+    -3: 36px,
+  );
+  $expanded-scale: (
+    0: 64px,
+    -1: 60px,
+    -2: 56px,
+    -3: 48px,
+  );
+
+  @return (
+    header-collapsed-state-height: map.get($collapsed-scale, $scale),
+    header-expanded-state-height: map.get($expanded-scale, $scale),
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_menu.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, menu);
+
+// 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,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $on-surface: if($is-dark, #fff, #000);
+  $active-state-layer-color: rgba($on-surface, if($is-dark, 0.08, 0.04));
+  $text-color: theming.get-color-from-palette($foreground, text);
+
+  @return (
+    item-label-text-color: $text-color,
+    item-icon-color: $text-color,
+    item-hover-state-layer-color: $active-state-layer-color,
+    item-focus-state-layer-color: $active-state-layer-color,
+    container-color: theming.get-color-from-palette($background, card),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    item-label-text-font:
+      typography-utils.font-family($config, body-1) or typography-utils.font-family($config),
+    item-label-text-size: typography-utils.font-size($config, body-1),
+    item-label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    item-label-text-line-height: typography-utils.line-height($config, body-1),
+    item-label-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_stepper.scss

@@ -0,0 +1,118 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, stepper);
+
+// 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 ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary: map.get($config, primary);
+  $warn: map.get($config, warn);
+
+  @return map.merge(private-get-color-palette-color-tokens($primary), (
+    // Background for stepper container.
+    container-color: theming.get-color-from-palette($background, card),
+    // Color of the line indicator connecting the steps.
+    line-color: theming.get-color-from-palette($foreground, divider),
+    // Background color of the header while hovered.
+    header-hover-state-layer-color: theming.get-color-from-palette($background, hover),
+    // Background color of the header while focused.
+    header-focus-state-layer-color: theming.get-color-from-palette($background, hover),
+    // Color of the text inside the step header.
+    header-label-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    // Color for the "optional" label in the step header.
+    header-optional-label-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    // Color of the header text when a step is selected.
+    header-selected-state-label-text-color: theming.get-color-from-palette($foreground, text),
+    // Color of the header text when a step is in an error state.
+    header-error-state-label-text-color: theming.get-color-from-palette($warn, text),
+    // Background color of the header icon.
+    header-icon-background-color: theming.get-color-from-palette($foreground, secondary-text),
+    // Foreground color of the header icon in the error state.
+    header-error-state-icon-foreground-color: theming.get-color-from-palette($warn, text),
+    // Background color of the header icon in the error state.
+    header-error-state-icon-background-color: transparent,
+  ));
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // Font family of the entire stepper.
+    container-text-font: typography-utils.font-family($config),
+    // Font family of the text inside the step header.
+    header-label-text-font: typography-utils.font-family($config, body-1) or
+      typography-utils.font-family($config),
+    // Size of the text inside the step header.
+    header-label-text-size: typography-utils.font-size($config, body-1),
+    // Weight of the text inside the step header.
+    header-label-text-weight: typography-utils.font-weight($config, body-1),
+    // Color of the header text when a step is in an error state.
+    header-error-state-label-text-size: typography-utils.font-size($config, body-2),
+    // Size of the header text in the selected state.
+    header-selected-state-label-text-size: typography-utils.font-size($config, body-2),
+    // Weight of the header text in the selected state.
+    header-selected-state-label-text-weight: typography-utils.font-weight($config, body-2),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -4);
+  $height-config: (
+    0: 72px,
+    -1: 68px,
+    -2: 64px,
+    -3: 60px,
+    -4: 42px,
+  );
+
+  @return (
+    header-height: map.get($height-config, $scale),
+  );
+}
+
+// Generates the tokens used to theme the stepper based on a palette.
+@function private-get-color-palette-color-tokens($palette) {
+  $active-state-foreground: theming.get-color-from-palette($palette, default-contrast);
+  $active-state-background: theming.get-color-from-palette($palette);
+
+  @return (
+    // Foreground color of the header icon.
+    header-icon-foreground-color: theming.get-color-from-palette($palette, default-contrast),
+    // 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,
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}