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

package/datepicker/testing/index.d.ts

@@ -1,241 +1,10 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
+import { D as DatepickerTriggerHarnessBase, a as DatepickerToggleHarnessFilters } from '../../date-range-input-harness.d-CaEyN8dT.js';
+export { c as CalendarCellHarnessFilters, C as CalendarHarnessFilters, h as CalendarView, d as DateRangeInputHarnessFilters, b as DatepickerInputHarnessFilters, j as MatCalendarCellHarness, i as MatCalendarHarness, g as MatDateRangeInputHarness, M as MatDatepickerInputHarness, f as MatEndDateHarness, e as MatStartDateHarness } from '../../date-range-input-harness.d-CaEyN8dT.js';
 import { HarnessPredicate } from '@angular/cdk/testing';
-import { MatFormFieldControlHarness } from '@angular/material/form-field/testing/control';
-
-/** A set of criteria that can be used to filter a list of calendar cell instances. */
-export declare interface CalendarCellHarnessFilters extends BaseHarnessFilters {
-    /** Filters based on the text of the cell. */
-    text?: string | RegExp;
-    /** Filters based on whether the cell is selected. */
-    selected?: boolean;
-    /** Filters based on whether the cell is activated using keyboard navigation */
-    active?: boolean;
-    /** Filters based on whether the cell is disabled. */
-    disabled?: boolean;
-    /** Filters based on whether the cell represents today's date. */
-    today?: boolean;
-    /** Filters based on whether the cell is inside of the main range. */
-    inRange?: boolean;
-    /** Filters based on whether the cell is inside of the comparison range. */
-    inComparisonRange?: boolean;
-    /** Filters based on whether the cell is inside of the preview range. */
-    inPreviewRange?: boolean;
-}
-
-/** A set of criteria that can be used to filter a list of calendar instances. */
-export declare interface CalendarHarnessFilters extends BaseHarnessFilters {
-}
-
-/** Possible views of a `MatCalendarHarness`. */
-export declare enum CalendarView {
-    MONTH = 0,
-    YEAR = 1,
-    MULTI_YEAR = 2
-}
-
-/** A set of criteria that can be used to filter a list of datepicker input instances. */
-export declare interface DatepickerInputHarnessFilters extends BaseHarnessFilters {
-    /** Filters based on the value of the input. */
-    value?: string | RegExp;
-    /** Filters based on the placeholder text of the input. */
-    placeholder?: string | RegExp;
-}
-
-/** A set of criteria that can be used to filter a list of datepicker toggle instances. */
-export declare interface DatepickerToggleHarnessFilters extends BaseHarnessFilters {
-}
-
-/** Interface for a test harness that can open and close a calendar. */
-declare interface DatepickerTrigger {
-    isCalendarOpen(): Promise<boolean>;
-    openCalendar(): Promise<void>;
-    closeCalendar(): Promise<void>;
-    hasCalendar(): Promise<boolean>;
-    getCalendar(filter?: CalendarHarnessFilters): Promise<MatCalendarHarness>;
-}
-
-/** Base class for harnesses that can trigger a calendar. */
-declare abstract class DatepickerTriggerHarnessBase extends ComponentHarness implements DatepickerTrigger {
-    /** Whether the trigger is disabled. */
-    abstract isDisabled(): Promise<boolean>;
-    /** Whether the calendar associated with the trigger is open. */
-    abstract isCalendarOpen(): Promise<boolean>;
-    /** Opens the calendar associated with the trigger. */
-    protected abstract _openCalendar(): Promise<void>;
-    /** Opens the calendar if the trigger is enabled and it has a calendar. */
-    openCalendar(): Promise<void>;
-    /** Closes the calendar if it is open. */
-    closeCalendar(): Promise<void>;
-    /** Gets whether there is a calendar associated with the trigger. */
-    hasCalendar(): Promise<boolean>;
-    /**
-     * Gets the `MatCalendarHarness` that is associated with the trigger.
-     * @param filter Optionally filters which calendar is included.
-     */
-    getCalendar(filter?: CalendarHarnessFilters): Promise<MatCalendarHarness>;
-}
-
-/** A set of criteria that can be used to filter a list of date range input instances. */
-export declare interface DateRangeInputHarnessFilters extends BaseHarnessFilters {
-    /** Filters based on the value of the input. */
-    value?: string | RegExp;
-}
-
-/** Harness for interacting with a standard Material calendar cell in tests. */
-export declare class MatCalendarCellHarness extends ComponentHarness {
-    static hostSelector: string;
-    /** Reference to the inner content element inside the cell. */
-    private _content;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatCalendarCellHarness`
-     * that meets certain criteria.
-     * @param options Options for filtering which cell instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: CalendarCellHarnessFilters): HarnessPredicate<MatCalendarCellHarness>;
-    /** Gets the text of the calendar cell. */
-    getText(): Promise<string>;
-    /** Gets the aria-label of the calendar cell. */
-    getAriaLabel(): Promise<string>;
-    /** Whether the cell is selected. */
-    isSelected(): Promise<boolean>;
-    /** Whether the cell is disabled. */
-    isDisabled(): Promise<boolean>;
-    /** Whether the cell is currently activated using keyboard navigation. */
-    isActive(): Promise<boolean>;
-    /** Whether the cell represents today's date. */
-    isToday(): Promise<boolean>;
-    /** Selects the calendar cell. Won't do anything if the cell is disabled. */
-    select(): Promise<void>;
-    /** Hovers over the calendar cell. */
-    hover(): Promise<void>;
-    /** Moves the mouse away from the calendar cell. */
-    mouseAway(): Promise<void>;
-    /** Focuses the calendar cell. */
-    focus(): Promise<void>;
-    /** Removes focus from the calendar cell. */
-    blur(): Promise<void>;
-    /** Whether the cell is the start of the main range. */
-    isRangeStart(): Promise<boolean>;
-    /** Whether the cell is the end of the main range. */
-    isRangeEnd(): Promise<boolean>;
-    /** Whether the cell is part of the main range. */
-    isInRange(): Promise<boolean>;
-    /** Whether the cell is the start of the comparison range. */
-    isComparisonRangeStart(): Promise<boolean>;
-    /** Whether the cell is the end of the comparison range. */
-    isComparisonRangeEnd(): Promise<boolean>;
-    /** Whether the cell is inside of the comparison range. */
-    isInComparisonRange(): Promise<boolean>;
-    /** Whether the cell is the start of the preview range. */
-    isPreviewRangeStart(): Promise<boolean>;
-    /** Whether the cell is the end of the preview range. */
-    isPreviewRangeEnd(): Promise<boolean>;
-    /** Whether the cell is inside of the preview range. */
-    isInPreviewRange(): Promise<boolean>;
-    /** Returns whether the cell has a particular CSS class-based state. */
-    private _hasState;
-}
-
-/** Harness for interacting with a standard Material calendar in tests. */
-export declare class MatCalendarHarness extends ComponentHarness {
-    static hostSelector: string;
-    /** Queries for the calendar's period toggle button. */
-    private _periodButton;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatCalendarHarness`
-     * that meets certain criteria.
-     * @param options Options for filtering which calendar instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: CalendarHarnessFilters): HarnessPredicate<MatCalendarHarness>;
-    /**
-     * Gets a list of cells inside the calendar.
-     * @param filter Optionally filters which cells are included.
-     */
-    getCells(filter?: CalendarCellHarnessFilters): Promise<MatCalendarCellHarness[]>;
-    /** Gets the current view that is being shown inside the calendar. */
-    getCurrentView(): Promise<CalendarView>;
-    /** Gets the label of the current calendar view. */
-    getCurrentViewLabel(): Promise<string>;
-    /** Changes the calendar view by clicking on the view toggle button. */
-    changeView(): Promise<void>;
-    /** Goes to the next page of the current view (e.g. next month when inside the month view). */
-    next(): Promise<void>;
-    /**
-     * Goes to the previous page of the current view
-     * (e.g. previous month when inside the month view).
-     */
-    previous(): Promise<void>;
-    /**
-     * Selects a cell in the current calendar view.
-     * @param filter An optional filter to apply to the cells. The first cell matching the filter
-     *     will be selected.
-     */
-    selectCell(filter?: CalendarCellHarnessFilters): Promise<void>;
-}
-
-/** Harness for interacting with a standard Material datepicker inputs in tests. */
-export declare class MatDatepickerInputHarness extends MatDatepickerInputHarnessBase implements DatepickerTrigger {
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatDatepickerInputHarness`
-     * that meets certain criteria.
-     * @param options Options for filtering which input instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: DatepickerInputHarnessFilters): HarnessPredicate<MatDatepickerInputHarness>;
-    /** Gets whether the calendar associated with the input is open. */
-    isCalendarOpen(): Promise<boolean>;
-    /** Opens the calendar associated with the input. */
-    openCalendar(): Promise<void>;
-    /** Closes the calendar associated with the input. */
-    closeCalendar(): Promise<void>;
-    /** Whether a calendar is associated with the input. */
-    hasCalendar(): Promise<boolean>;
-    /**
-     * Gets the `MatCalendarHarness` that is associated with the trigger.
-     * @param filter Optionally filters which calendar is included.
-     */
-    getCalendar(filter?: CalendarHarnessFilters): Promise<MatCalendarHarness>;
-}
-
-/** Base class for datepicker input harnesses. */
-declare abstract class MatDatepickerInputHarnessBase extends MatFormFieldControlHarness {
-    /** Whether the input is disabled. */
-    isDisabled(): Promise<boolean>;
-    /** Whether the input is required. */
-    isRequired(): Promise<boolean>;
-    /** Gets the value of the input. */
-    getValue(): Promise<string>;
-    /**
-     * Sets the value of the input. The value will be set by simulating
-     * keypresses that correspond to the given value.
-     */
-    setValue(newValue: string): Promise<void>;
-    /** Gets the placeholder of the input. */
-    getPlaceholder(): Promise<string>;
-    /**
-     * Focuses the input and returns a promise that indicates when the
-     * action is complete.
-     */
-    focus(): Promise<void>;
-    /**
-     * Blurs the input and returns a promise that indicates when the
-     * action is complete.
-     */
-    blur(): Promise<void>;
-    /** Whether the input is focused. */
-    isFocused(): Promise<boolean>;
-    /** Gets the formatted minimum date for the input's value. */
-    getMin(): Promise<string | null>;
-    /** Gets the formatted maximum date for the input's value. */
-    getMax(): Promise<string | null>;
-}
+import '../../form-field/testing/control/index.js';
 
 /** Harness for interacting with a standard Material datepicker toggle in tests. */
-export declare class MatDatepickerToggleHarness extends DatepickerTriggerHarnessBase {
+declare class MatDatepickerToggleHarness extends DatepickerTriggerHarnessBase {
     static hostSelector: string;
     /** The clickable button inside the toggle. */
     private _button;
@@ -253,55 +22,4 @@ export declare class MatDatepickerToggleHarness extends DatepickerTriggerHarness
     protected _openCalendar(): Promise<void>;
 }
 
-/** Harness for interacting with a standard Material date range input in tests. */
-export declare class MatDateRangeInputHarness extends DatepickerTriggerHarnessBase {
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatDateRangeInputHarness`
-     * that meets certain criteria.
-     * @param options Options for filtering which input instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: DateRangeInputHarnessFilters): HarnessPredicate<MatDateRangeInputHarness>;
-    /** Gets the combined value of the start and end inputs, including the separator. */
-    getValue(): Promise<string>;
-    /** Gets the inner start date input inside the range input. */
-    getStartInput(): Promise<MatStartDateHarness>;
-    /** Gets the inner start date input inside the range input. */
-    getEndInput(): Promise<MatEndDateHarness>;
-    /** Gets the separator text between the values of the two inputs. */
-    getSeparator(): Promise<string>;
-    /** Gets whether the range input is disabled. */
-    isDisabled(): Promise<boolean>;
-    /** Gets whether the range input is required. */
-    isRequired(): Promise<boolean>;
-    /** Opens the calendar associated with the input. */
-    isCalendarOpen(): Promise<boolean>;
-    protected _openCalendar(): Promise<void>;
-}
-
-/** Harness for interacting with a standard Material date range end input in tests. */
-export declare class MatEndDateHarness extends MatDatepickerInputHarnessBase {
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatEndDateHarness`
-     * that meets certain criteria.
-     * @param options Options for filtering which input instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: DatepickerInputHarnessFilters): HarnessPredicate<MatEndDateHarness>;
-}
-
-/** Harness for interacting with a standard Material date range start input in tests. */
-export declare class MatStartDateHarness extends MatDatepickerInputHarnessBase {
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatStartDateHarness`
-     * that meets certain criteria.
-     * @param options Options for filtering which input instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: DatepickerInputHarnessFilters): HarnessPredicate<MatStartDateHarness>;
-}
-
-export { }
+export { DatepickerToggleHarnessFilters, MatDatepickerToggleHarness };

package/dialog/_dialog-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../core/style/sass-utils';
-@use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
-@use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
+@use './m2-dialog';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -14,14 +13,8 @@
   } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-dialog.$prefix,
-        tokens-mdc-dialog.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix,
-        tokens-mat-dialog.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-dialog.$prefix, m2-dialog.get-unthemable-tokens());
     }
   }
 }
@@ -31,14 +24,8 @@
     @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-mdc-dialog.$prefix,
-        tokens-mdc-dialog.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix,
-        tokens-mat-dialog.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-dialog.$prefix, m2-dialog.get-color-tokens($theme));
     }
   }
 }
@@ -48,21 +35,15 @@
     @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-mdc-dialog.$prefix,
-        tokens-mdc-dialog.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix,
-        tokens-mat-dialog.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-dialog.$prefix, m2-dialog.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }
@@ -71,12 +52,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mdc-dialog.$prefix,
-      tokens: tokens-mdc-dialog.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mat-dialog.$prefix,
-      tokens: tokens-mat-dialog.get-token-slots(),
+      namespace: m2-dialog.$prefix,
+      tokens: m2-dialog.get-token-slots(),
     ),
   );
 }
@@ -110,12 +87,8 @@
   );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-      tokens-mdc-dialog.$prefix,
-      map.get($tokens, tokens-mdc-dialog.$prefix)
-    );
-    @include token-utils.create-token-values(
-      tokens-mat-dialog.$prefix,
-      map.get($tokens, tokens-mat-dialog.$prefix)
+      m2-dialog.$prefix,
+      map.get($tokens, m2-dialog.$prefix)
     );
   }
 }

package/{core/tokens/m2/mdc/_dialog.scss → dialog/_m2-dialog.scss}

@@ -1,52 +1,28 @@
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@use '../core/tokens/m2-utils';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
+@use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, dialog);
+$prefix: (mat, dialog);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
 @function get-unthemable-tokens() {
   @return (
-    // Border radius of the container.
     container-shape: 4px,
-    // =============================================================================================
-    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
-    // =============================================================================================
-    container-elevation: null,
-    container-shadow-color: null,
-    with-divider-divider-height: null,
-    with-divider-divider-color: null,
-    with-icon-icon-size: null,
-    with-icon-icon-color: null,
-    action-label-text-font: null,
-    action-label-text-line-height: null,
-    action-label-text-size: null,
-    action-label-text-weight: null,
-    action-label-text-tracking: null,
-    action-label-text-color: null,
-    action-hover-state-layer-color: null,
-    action-hover-state-layer-opacity: null,
-    action-hover-label-text-color: null,
-    action-focus-state-layer-color: null,
-    action-focus-state-layer-opacity: null,
-    action-focus-label-text-color: null,
-    action-pressed-state-layer-color: null,
-    action-pressed-state-layer-opacity: null,
-    action-pressed-label-text-color: null,
-    headline-color: null,
-    headline-font: null,
-    headline-line-height: null,
-    headline-size: null,
-    headline-tracking: null,
-    headline-weight: null,
-    z-index: null,
-    container-surface-tint-layer-color: null,
+    container-elevation-shadow: elevation.get-box-shadow(24),
+    container-max-width: 80vw,
+    container-small-max-width: 80vw,
+    container-min-width: 0,
+    actions-alignment: start,
+    actions-padding: 8px,
+    content-padding: 20px 24px,
+    with-actions-content-padding: 20px 24px,
+
+    // Note: the CSS class is `title` while the M2 tokens call it `subhead`.
+    // M3 calls it `headline` which is what we're aligning with.
+    headline-padding: 0 24px 9px,
   );
 }
 
@@ -56,17 +32,14 @@ $prefix: (mdc, dialog);
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $text-base: if(token-definition.$private-is-internal-build,
+  $text-base: if(m2-utils.$private-is-internal-build,
     if($is-dark, #fff, #000),
     inspection.get-theme-color($theme, foreground, text, 1)
   );
 
   @return (
-    // Background color of the container.
     container-color: inspection.get-theme-color($theme, background, dialog),
-    // Color of the dialog header.
     subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
-    // Color of the dialog body text.
     supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
   );
 }
@@ -74,13 +47,11 @@ $prefix: (mdc, dialog);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // Typography of the dialog header.
     subhead-font: inspection.get-theme-typography($theme, headline-6, font-family),
     subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
     subhead-size: inspection.get-theme-typography($theme, headline-6, font-size),
     subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
     subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
-    // Typography of the dialog body text.
     supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family),
     supporting-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
     supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size),
@@ -99,8 +70,8 @@ $prefix: (mdc, dialog);
 @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/dialog/_m3-dialog.scss

@@ -0,0 +1,47 @@
+@use '../core/tokens/m3-utils';
+@use 'sass:map';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, dialog);
+
+/// Generates custom tokens for the dialog.
+/// @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 dialog
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  // headline-padding:
+  // The vertical padding values are a bit weird, because MDC uses a `::before` pseudo
+  // element to size the title which in turn means that we can't set a specific padding
+  // and get the exact same space out of it. These values were determined through
+  // trial and error so that the first line of text is 24px from the top and the bottom
+  // of the text is 16px from the content under it.
+  $tokens: (
+    actions-alignment: m3-utils.hardcode(flex-end, $exclude-hardcoded),
+    actions-padding: m3-utils.hardcode(16px 24px, $exclude-hardcoded),
+    container-color: map.get($systems, md-sys-color, surface),
+    container-elevation-shadow: m3-utils.hardcode(none, $exclude-hardcoded),
+    container-max-width: m3-utils.hardcode(560px, $exclude-hardcoded),
+    container-min-width: m3-utils.hardcode(280px, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-large),
+    container-small-max-width:
+    m3-utils.hardcode(calc(100vw - 32px), $exclude-hardcoded),
+    content-padding: m3-utils.hardcode(20px 24px, $exclude-hardcoded),
+    headline-padding: m3-utils.hardcode(6px 24px 13px, $exclude-hardcoded),
+    subhead-color: map.get($systems, md-sys-color, on-surface),
+    subhead-font: map.get($systems, md-sys-typescale, headline-small-font),
+    subhead-line-height: map.get($systems, md-sys-typescale, headline-small-line-height),
+    subhead-size: map.get($systems, md-sys-typescale, headline-small-size),
+    subhead-tracking: map.get($systems, md-sys-typescale, headline-small-tracking),
+    subhead-weight: map.get($systems, md-sys-typescale, headline-small-weight),
+    supporting-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    supporting-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+    supporting-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height),
+    supporting-text-size: map.get($systems, md-sys-typescale, body-medium-size),
+    supporting-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking),
+    supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight),
+    with-actions-content-padding: m3-utils.hardcode(20px 24px 0, $exclude-hardcoded),
+  );
+
+  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+}