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

package/date-range-input-harness.d-CaEyN8dT.d.ts

@@ -0,0 +1,279 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { MatFormFieldControlHarness } from './form-field/testing/control/index.js';
+
+/** A set of criteria that can be used to filter a list of datepicker input instances. */
+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. */
+interface DatepickerToggleHarnessFilters extends BaseHarnessFilters {
+}
+/** A set of criteria that can be used to filter a list of calendar instances. */
+interface CalendarHarnessFilters extends BaseHarnessFilters {
+}
+/** A set of criteria that can be used to filter a list of calendar cell instances. */
+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 date range input instances. */
+interface DateRangeInputHarnessFilters extends BaseHarnessFilters {
+    /** Filters based on the value of the input. */
+    value?: string | RegExp;
+}
+
+/** 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>;
+}
+
+/** Harness for interacting with a standard Material calendar cell in tests. */
+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;
+}
+
+/** Possible views of a `MatCalendarHarness`. */
+declare enum CalendarView {
+    MONTH = 0,
+    YEAR = 1,
+    MULTI_YEAR = 2
+}
+/** Harness for interacting with a standard Material calendar in tests. */
+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>;
+}
+
+/** Interface for a test harness that can open and close a calendar. */
+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>;
+}
+
+/** Harness for interacting with a standard Material datepicker inputs in tests. */
+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>;
+}
+
+/** Harness for interacting with a standard Material date range start input in tests. */
+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>;
+}
+/** Harness for interacting with a standard Material date range end input in tests. */
+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 input in tests. */
+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>;
+}
+
+export { DatepickerTriggerHarnessBase as D, MatDatepickerInputHarness as M, MatStartDateHarness as e, MatEndDateHarness as f, MatDateRangeInputHarness as g, CalendarView as h, MatCalendarHarness as i, MatCalendarCellHarness as j };
+export type { CalendarHarnessFilters as C, DatepickerToggleHarnessFilters as a, DatepickerInputHarnessFilters as b, CalendarCellHarnessFilters as c, DateRangeInputHarnessFilters as d };

package/datepicker/_datepicker-theme.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
 @use 'sass:map';
-@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker;
+@use './m2-datepicker';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -19,17 +19,15 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @mixin _calendar-color($theme, $palette-name) {
   $palette-color: inspection.get-theme-color($theme, $palette-name);
-  $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color);
-  $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color);
-  $calendar-tokens: tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens(
+  $range-color: m2-datepicker.private-get-range-background-color($palette-color);
+  $range-tokens: m2-datepicker.get-range-color-tokens($range-color);
+  $calendar-tokens: m2-datepicker.private-get-calendar-color-palette-color-tokens(
     $theme,
     $palette-name
   );
 
-  @include token-utils.create-token-values(
-    tokens-mat-datepicker.$prefix,
-    map.merge($calendar-tokens, $range-tokens)
-  );
+  @include token-utils.create-token-values-mixed(
+    m2-datepicker.$prefix, map.merge($calendar-tokens, $range-tokens));
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -40,10 +38,8 @@ $calendar-weekday-table-font-size: 11px !default;
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-datepicker.$prefix, m2-datepicker.get-unthemable-tokens());
     }
   }
 }
@@ -58,10 +54,8 @@ $calendar-weekday-table-font-size: 11px !default;
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-datepicker.$prefix, m2-datepicker.get-color-tokens($theme));
     }
 
     .mat-datepicker-content {
@@ -76,19 +70,13 @@ $calendar-weekday-table-font-size: 11px !default;
 
     .mat-datepicker-toggle-active {
       &.mat-accent {
-        $accent-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens(
-          $theme,
-          accent
-        );
-        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
+        $accent-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $accent-tokens);
       }
 
       &.mat-warn {
-        $warn-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens(
-          $theme,
-          warn
-        );
-        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
+        $warn-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $warn-tokens);
       }
     }
   }
@@ -101,9 +89,9 @@ $calendar-weekday-table-font-size: 11px !default;
     @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-datepicker.$prefix,
-        tokens-mat-datepicker.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-datepicker.$prefix,
+        m2-datepicker.get-typography-tokens($theme)
       );
     }
   }
@@ -111,12 +99,12 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @mixin date-range-colors(
   $range-color,
-  $comparison-color: tokens-mat-datepicker.$private-default-comparison-color,
-  $overlap-color: tokens-mat-datepicker.$private-default-overlap-color,
+  $comparison-color: m2-datepicker.$private-default-comparison-color,
+  $overlap-color: m2-datepicker.$private-default-overlap-color,
   $overlap-selected-color:
-    tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color)
+    m2-datepicker.private-get-default-overlap-selected-color($overlap-color)
 ) {
-  $tokens: tokens-mat-datepicker.get-range-color-tokens(
+  $tokens: m2-datepicker.get-range-color-tokens(
     $range-color: $range-color,
     $comparison-color: $comparison-color,
     $overlap-color: $overlap-color,
@@ -124,7 +112,7 @@ $calendar-weekday-table-font-size: 11px !default;
   );
 
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $tokens);
+    @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $tokens);
   }
 }
 
@@ -132,7 +120,7 @@ $calendar-weekday-table-font-size: 11px !default;
 /// @param {Map} $theme The theme to generate density styles for.
 @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 {
     // TODO(crisbeto): move this into the structural styles
     // once the icon button density is switched to tokens.
@@ -149,8 +137,8 @@ $calendar-weekday-table-font-size: 11px !default;
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-datepicker.$prefix,
-      tokens: tokens-mat-datepicker.get-token-slots(),
+      namespace: m2-datepicker.$prefix,
+      tokens: m2-datepicker.get-token-slots(),
     ),
   );
 }
@@ -190,9 +178,6 @@ $calendar-weekday-table-font-size: 11px !default;
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   $mat-datepicker-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-datepicker.$prefix,
-    $options...
-  );
-  @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens);
+    $tokens, m2-datepicker.$prefix, $options...);
+  @include token-utils.create-token-values(m2-datepicker.$prefix, $mat-datepicker-tokens);
 }

package/{core/tokens/m2/mat/_datepicker.scss → datepicker/_m2-datepicker.scss}

@@ -1,10 +1,10 @@
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/inspection';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, datepicker);
@@ -175,8 +175,8 @@ $private-default-overlap-color: #a8dab5;
 @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/{core/tokens/m3/mat/_datepicker.scss → datepicker/_m3-datepicker.scss}

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, datepicker);
@@ -12,7 +12,7 @@ $prefix: (mat, datepicker);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-datepicker
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: ((
+  $tokens: (
     calendar-date-in-range-state-background-color:
       map.get($systems, md-sys-color, primary-container),
     calendar-date-in-comparison-range-state-background-color:
@@ -42,7 +42,7 @@ $prefix: (mat, datepicker);
     calendar-period-button-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-header-divider-color: token-definition.hardcode(transparent, $exclude-hardcoded),
+    calendar-header-divider-color: m3-utils.hardcode(transparent, $exclude-hardcoded),
     calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
     calendar-date-today-disabled-state-outline-color: sass-utils.safe-color-change(
@@ -50,7 +50,7 @@ $prefix: (mat, datepicker);
       $alpha: 0.38
     ),
     calendar-date-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-date-outline-color: token-definition.hardcode(transparent, $exclude-hardcoded),
+    calendar-date-outline-color: m3-utils.hardcode(transparent, $exclude-hardcoded),
     calendar-date-disabled-state-text-color: sass-utils.safe-color-change(
       map.get($systems, md-sys-color, on-surface),
       $alpha: 0.38
@@ -68,9 +68,9 @@ $prefix: (mat, datepicker);
     calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
     calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
     calendar-container-elevation-shadow:
-        token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
+        m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     calendar-container-touch-elevation-shadow:
-      token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
+      m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
     calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     calendar-text-font: map.get($systems, md-sys-typescale, body-medium-font),
@@ -81,7 +81,9 @@ $prefix: (mat, datepicker);
     calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
     calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
     calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
-  ), (
+  );
+
+  $variant-tokens: (
     // Color variants:
     primary: (), // Default, no overrides needed.
     secondary: (
@@ -117,7 +119,7 @@ $prefix: (mat, datepicker);
       calendar-date-today-outline-color: map.get($systems, md-sys-color, error),
       calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, error),
     )
-  ));
+  );
 
-  @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }