@angular/material 19.0.0-next.9 → 19.0.0-rc.1

package/core/theming/_definition.scss

@@ -6,6 +6,16 @@
 @use '../tokens/m3-tokens';
 @use './config-validation';
 
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+$system-fallback-prefix: mat-sys;
+
+// Default system level prefix to use when directly calling the `system-level-*` mixins.
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+// TODO: Remove this variable after internal clients are migrated from "sys"
+$system-level-prefix: mat-sys;
+
 /// Map key used to store internals of theme config.
 $internals: _mat-theming-internals-do-not-access;
 /// The theme version of generated themes.
@@ -40,7 +50,7 @@ $theme-version: 1;
   $type: map.get($config, theme-type) or light;
   $primary: map.get($config, primary) or palettes.$violet-palette;
   $tertiary: map.get($config, tertiary) or $primary;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
   sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
@@ -76,7 +86,7 @@ $theme-version: 1;
   $bold: map.get($config, bold-weight) or 700;
   $medium: map.get($config, medium-weight) or 500;
   $regular: map.get($config, regular-weight) or 400;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
   sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (

package/core/theming/_theming.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:color';
 
 // Whether to enable compatibility with legacy methods for accessing theme information.
 $theme-legacy-inspection-api-compatibility: true !default;
@@ -332,7 +333,7 @@ $private-internal-name: _mat-theming-internals-do-not-access;
   // We convert the rgba color into a solid one by taking the opacity from the rgba
   // value and using it to determine the percentage of the background to put
   // into foreground when mixing the colors together.
-  @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%);
+  @return color.mix($background-color, rgba($color, 1), (1 - color.opacity($color)) * 100%);
 }
 
 // Clamps the density scale to a number between the given min and max.

package/core/tokens/_m3-system.scss

@@ -1,5 +1,6 @@
 @use '../style/elevation';
 @use '../style/sass-utils';
+@use '../theming/config-validation';
 @use '../theming/definition';
 @use './m3/definitions';
 @use 'sass:map';
@@ -7,22 +8,15 @@
 @use 'sass:list';
 @use './m3-tokens';
 
-// Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
-$_system-fallback-prefix: mat-sys;
-
-// Default system level prefix to use when directly calling the `system-level-*` mixins
-$_system-level-prefix: sys;
-
 /// Emits necessary CSS variables for Material's system level values for the values defined in the
 /// config map. The config map can have values color, typography, and/or density.
 ///
 /// If the config map's color value is an Angular Material color palette, it will be used as the
-/// primary and tertiary colors with a light theme type. Otherwise if the color value is a map,
-/// it must have a `primary` value containing an Angular Material color palette, and optionally
-/// a different `tertiary` palette (defaults to primary palette) and `theme-type` that is either
-/// `light` or `dark` (defaults to light). Color variable definitions will not be emitted if there
-/// are no color values in the config.
+/// primary and tertiary colors with a `color-scheme` theme type. Otherwise if the color value is a
+/// map, it must have a `primary` value containing an Angular Material color palette, and
+/// optionally a different `tertiary` palette (defaults to primary palette) and `theme-type` that
+/// is either `light`, `dark`, or 'color-scheme` (defaults to `color-scheme`). Color variable
+/// definitions will not be emitted if there are no color values in the config.
 ///
 /// If the config map's typography value is a font family string, it will be used as the
 /// plain and brand font family with default bold, medium, and regular weights of 700, 500, and 400,
@@ -44,11 +38,19 @@ $_system-level-prefix: sys;
   $color: map.get($config, color);
   $color-config: null;
   @if ($color) {
-    $color-config: if(meta.type-of($color) == 'map',
-      definition.define-colors($color),
-      definition.define-colors((primary: $color)));
-    @include system-level-colors($color-config, $overrides, $_system-fallback-prefix);
-    @include system-level-elevation($color-config, $overrides, $_system-fallback-prefix);
+    // validate-palette returns null if it is a valid M3 palette
+    $is-palette: config-validation.validate-palette($color) == null;
+
+    // Default to "color-scheme" theme type if the config's color does not provide one.
+    @if (not $is-palette and not map.has-key($color, theme-type)) {
+      $color: map.set($color, theme-type, color-scheme);
+    }
+
+    $color-config: if($is-palette,
+            definition.define-colors((primary: $color, theme-type: color-scheme)),
+            definition.define-colors($color));
+    @include system-level-colors($color-config, $overrides, definition.$system-fallback-prefix);
+    @include system-level-elevation($color-config, $overrides, definition.$system-fallback-prefix);
   }
 
   $typography: map.get($config, typography);
@@ -57,7 +59,8 @@ $_system-level-prefix: sys;
     $typography-config: if(meta.type-of($typography) == 'map',
       definition.define-typography($typography),
       definition.define-typography((plain-family: $typography)));
-    @include system-level-typography($typography-config, $overrides, $_system-fallback-prefix);
+    @include system-level-typography(
+        $typography-config, $overrides, definition.$system-fallback-prefix);
   }
 
   $density: map.get($config, density);
@@ -79,14 +82,13 @@ $_system-level-prefix: sys;
     }
   }
 
-  @include system-level-shape($overrides: $overrides, $prefix: $_system-fallback-prefix);
-  @include system-level-motion($overrides:$overrides, $prefix: $_system-fallback-prefix);
-  @include system-level-state($overrides: $overrides, $prefix: $_system-fallback-prefix);
+  @include system-level-shape($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
+  @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
 }
 
 /// Emits the system-level CSS variables for each of the provided override values. E.g. to
 /// change the primary color to red, use `mat.theme-overrides((primary: red));`
-@mixin theme-overrides($overrides, $prefix: $_system-fallback-prefix) {
+@mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
   $sys-names: map-merge-all(
       definitions.md-sys-color-values-light(),
       definitions.md-sys-typescale-values(),
@@ -119,16 +121,14 @@ $_system-level-prefix: sys;
 
   @if (not $prefix) {
     $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        color-system-variables-prefix) or $_system-level-prefix;
+        color-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   $ref: (
     md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
   );
 
-  $sys-colors: if($type == dark,
-    definitions.md-sys-color-values-dark($ref),
-    definitions.md-sys-color-values-light($ref));
+  $sys-colors: _generate-sys-colors($ref, $type);
 
   // Manually insert a subset of palette values that are used directly by components
   // instead of system variables.
@@ -144,6 +144,30 @@ $_system-level-prefix: sys;
   }
 }
 
+@function _generate-sys-colors($ref, $type) {
+  $light-sys-colors: definitions.md-sys-color-values-light($ref);
+  @if ($type == light) {
+    @return $light-sys-colors;
+  }
+
+  $dark-sys-colors: definitions.md-sys-color-values-dark($ref);
+  @if ($type == dark) {
+    @return $dark-sys-colors;
+  }
+
+  @if ($type == color-scheme) {
+    $light-dark-sys-colors: ();
+    @each $name, $light-value in $light-sys-colors {
+      $dark-value: map.get($dark-sys-colors, $name);
+      $light-dark-sys-colors:
+          map.set($light-dark-sys-colors, $name, light-dark($light-value, $dark-value));
+    }
+    @return $light-dark-sys-colors;
+  }
+
+  @error 'Unknown theme-type provided: #{$type}';
+}
+
 @mixin system-level-typography($theme, $overrides: (), $prefix: null) {
   $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
   $brand: map.get($font-definition, brand);
@@ -157,7 +181,7 @@ $_system-level-prefix: sys;
 
   @if (not $prefix) {
     $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        typography-system-variables-prefix) or $_system-level-prefix;
+        typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   & {
@@ -167,7 +191,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
   $shadow-color: map.get(
       $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
 
@@ -180,7 +204,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-shape($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -188,7 +212,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-state($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -196,21 +220,13 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-motion($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
-  & {
-    @each $name, $value in definitions.md-sys-motion-values() {
-      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-    }
-  }
-}
-
 // Return a new map where the values are the same as the provided map's
 // keys, prefixed with "--mat-sys-". For example:
 // (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2)
 @function _create-system-app-vars-map($map) {
   $new-map: ();
   @each $key, $value in $map {
-    $new-map: map.set($new-map, $key, --#{$_system-fallback-prefix}-#{$key});
+    $new-map: map.set($new-map, $key, --#{definition.$system-fallback-prefix}-#{$key});
   }
   @return $new-map;
 }

package/core/tokens/_m3-tokens.scss

@@ -130,7 +130,7 @@ $_cached-token-slots: null;
 @function create-map($keys, $prefix) {
   $result: ();
   @each $key in $keys {
-    $result: map-merge($result, ($key: var(--#{$prefix}-#{$key})));
+    $result: map.merge($result, ($key: var(--#{$prefix}-#{$key})));
   }
   @return $result;
 }
@@ -191,8 +191,8 @@ $_cached-token-slots: null;
             'tertiary-fixed',
             'tertiary-fixed-dim'
     );
-    @return map-merge(create-map($keys, $prefix), (
-            shadow: map.get($mdc-sys-color, shadow)
+    @return map.merge(create-map($keys, $prefix), (
+      shadow: map.get($mdc-sys-color, shadow)
     ));
   }
 

package/core/tokens/_token-definition.scss

@@ -124,11 +124,12 @@ $_system-fallbacks: null;
 /// Maps the values in a map to new values using the given mapping function
 /// @param {Map} $map The maps whose values will be mapped to new values.
 /// @param {Function} $fn The value mapping function.
-/// @param {Map} A new map with its values updated using the mapping function.
-@function map-values($map, $fn) {
+/// @param {ArgList} $args Additional arguments to pass to the mapping function.
+/// @return {Map} A new map with its values updated using the mapping function.
+@function map-values($map, $fn, $args...) {
   $result: ();
   @each $key, $value in $map {
-    $result: map.set($result, $key, meta.call($fn, $value));
+    $result: map.set($result, $key, meta.call($fn, $value, $args...));
   }
   @return $result;
 }

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

@@ -56,7 +56,7 @@ $prefix: (mat, badge);
   // the value to determine the percentage of the background to put into foreground when
   // mixing the colors together.
   @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) {
-    $badge-opacity: opacity($disabled-background);
+    $badge-opacity: color.opacity($disabled-background);
     $disabled-background: color.mix($app-background,
       rgba($disabled-background, 1), (1 - $badge-opacity) * 100%);
   }

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

@@ -60,7 +60,7 @@ $private-default-overlap-color: #a8dab5;
   // for a solid border, but because we're using a dashed border for the
   // preview range, we need to bump its opacity to ensure that it's visible.
   @if meta.type-of($preview-outline-color) == color {
-    $preview-outline-opacity: math.min(opacity($preview-outline-color) * 2, 1);
+    $preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1);
     $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
   }
 

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

@@ -1,6 +1,7 @@
 @use '../../token-definition';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, menu);
@@ -18,9 +19,10 @@ $prefix: (mat, menu);
     item-trailing-spacing: 16px,
     item-with-icon-leading-spacing: 16px,
     item-with-icon-trailing-spacing: 16px,
-    // Note that this uses a value, rather than a computed box-shadow, because we use
-    // the value at runtime to determine which shadow to set based on the menu's depth.
-    base-elevation-level: 8,
+    container-elevation-shadow: elevation.get-box-shadow(8),
+
+    // Unused
+    base-elevation-level: null,
   );
 }
 

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

@@ -26,7 +26,7 @@ $prefix: (mat, sort);
   // when mixing the colors together. Otherwise, if it resolves to something different
   // (e.g. it resolves to a CSS variable), we use the color directly.
   @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
-    $text-opacity: opacity($text-color);
+    $text-opacity: color.opacity($text-color);
     $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
   }
   @else {

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../style/sass-utils';
 @use '../../token-definition';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, menu);
@@ -35,9 +36,11 @@ $prefix: (mat, menu);
       item-with-icon-leading-spacing: token-definition.hardcode(12px, $exclude-hardcoded),
       item-with-icon-trailing-spacing: token-definition.hardcode(12px, $exclude-hardcoded),
       container-color: map.get($systems, md-sys-color, surface-container),
-      // Note that this uses a value, rather than a computed box-shadow, because we use
-      // the value at runtime to determine which shadow to set based on the menu's depth.
-      base-elevation-level: token-definition.hardcode(2, $exclude-hardcoded),
+      container-elevation-shadow: token-definition.hardcode(
+        elevation.get-box-shadow(2), $exclude-hardcoded),
+
+      // Unused
+      base-elevation-level: null,
     )
   );
 

package/core/tokens/m3/mdc/_filled-text-field.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:list';
 @use '../../token-definition';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -34,8 +33,8 @@ $prefix: (mdc, filled-text-field);
   );
 
   @return token-definition.namespace-tokens($prefix, (
-    _fix-tokens($mdc-tokens),
-    token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens))
+    _fix-tokens($mdc-tokens, $systems),
+    token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens), $systems)
   ), $token-slots);
 }
 
@@ -43,8 +42,9 @@ $prefix: (mdc, filled-text-field);
 /// Fixes inconsistent values in the filled text field tokens so that they can produce valid
 /// styles.
 /// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
+/// @param {Map} $systems The MDC system tokens
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-tokens($initial-tokens) {
+@function _fix-tokens($initial-tokens, $systems) {
   // Need to get the hardcoded values, because they include opacities that are used for the disabled
   // state.
   $hardcoded-tokens: token-definition.get-mdc-tokens('filled-text-field', (), false);
@@ -80,13 +80,11 @@ $prefix: (mdc, filled-text-field);
     )
   ));
 
-  $container-shape: map.get($tokens, container-shape);
-
-  // The M2 token slots define a single `container-shape` slot while the M3 tokens provide a list
-  // of shapes (e.g. top/bottom/left/right). Extract the first value so it matches the expected
-  // token slot in M2.
-  @if meta.type-of($container-shape) == 'list' {
-    $tokens: map.set($tokens, container-shape, list.nth($container-shape, 1));
+  // The system tokens have this set as `corner-extra-small-top` which assumes that the value will
+  // be set as a `border-radius`, however we set it as `border-top-left-radius` and
+  // `border-top-right-radius`. Changing it at this point will be breaking so instead we remap it.
+  @if (map.get($tokens, container-shape)) {
+    $tokens: map.set($tokens, container-shape, map.get($systems, md-sys-shape, corner-extra-small));
   }
 
   @return $tokens;

package/datepicker/_datepicker-theme.scss

@@ -145,18 +145,22 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-/// Outputs the CSS variable values for the given tokens.
-/// @param {Map} $tokens The token values to emit.
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
     (
       namespace: tokens-mat-datepicker.$prefix,
       tokens: tokens-mat-datepicker.get-token-slots(),
-    )
+    ),
   );
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):

package/datepicker/index.d.ts

@@ -17,13 +17,12 @@ import { FactoryProvider } from '@angular/core';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
-import * as i1 from '@angular/common';
-import * as i2 from '@angular/material/button';
-import * as i20 from '@angular/cdk/scrolling';
-import * as i3 from '@angular/cdk/overlay';
-import * as i4 from '@angular/cdk/a11y';
-import * as i5 from '@angular/cdk/portal';
-import * as i6 from '@angular/material/core';
+import * as i1 from '@angular/material/button';
+import * as i19 from '@angular/cdk/scrolling';
+import * as i2 from '@angular/cdk/overlay';
+import * as i3 from '@angular/cdk/a11y';
+import * as i4 from '@angular/cdk/portal';
+import * as i5 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatFormFieldControl } from '@angular/material/form-field';
@@ -116,20 +115,6 @@ export declare type ExtractDateTypeFromSelection<T> = T extends DateRange<infer
 declare function getActiveOffset<D>(dateAdapter: DateAdapter<D>, activeDate: D, minDate: D | null, maxDate: D | null): number;
 
 declare namespace i10 {
-    export {
-        MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY,
-        MAT_DATEPICKER_SCROLL_STRATEGY,
-        DatepickerDropdownPositionX,
-        DatepickerDropdownPositionY,
-        MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
-        MatDatepickerContent,
-        MatDatepickerControl,
-        MatDatepickerPanel,
-        MatDatepickerBase
-    }
-}
-
-declare namespace i11 {
     export {
         MAT_DATEPICKER_VALUE_ACCESSOR,
         MAT_DATEPICKER_VALIDATORS,
@@ -137,26 +122,26 @@ declare namespace i11 {
     }
 }
 
-declare namespace i12 {
+declare namespace i11 {
     export {
         MatDatepickerToggleIcon,
         MatDatepickerToggle
     }
 }
 
-declare namespace i13 {
+declare namespace i12 {
     export {
         MatMonthView
     }
 }
 
-declare namespace i14 {
+declare namespace i13 {
     export {
         MatYearView
     }
 }
 
-declare namespace i15 {
+declare namespace i14 {
     export {
         isSameMultiYearView,
         getActiveOffset,
@@ -166,13 +151,13 @@ declare namespace i15 {
     }
 }
 
-declare namespace i16 {
+declare namespace i15 {
     export {
         MatDateRangeInput
     }
 }
 
-declare namespace i17 {
+declare namespace i16 {
     export {
         MatDateRangeInputParent,
         MAT_DATE_RANGE_INPUT_PARENT,
@@ -181,14 +166,14 @@ declare namespace i17 {
     }
 }
 
-declare namespace i18 {
+declare namespace i17 {
     export {
         MatDateRangePickerInput,
         MatDateRangePicker
     }
 }
 
-declare namespace i19 {
+declare namespace i18 {
     export {
         MatDatepickerApply,
         MatDatepickerCancel,
@@ -196,7 +181,7 @@ declare namespace i19 {
     }
 }
 
-declare namespace i7 {
+declare namespace i6 {
     export {
         MatCalendarView,
         MatCalendarHeader,
@@ -204,7 +189,7 @@ declare namespace i7 {
     }
 }
 
-declare namespace i8 {
+declare namespace i7 {
     export {
         MatCalendarCellCssClasses,
         MatCalendarCellClassFunction,
@@ -214,12 +199,26 @@ declare namespace i8 {
     }
 }
 
-declare namespace i9 {
+declare namespace i8 {
     export {
         MatDatepicker
     }
 }
 
+declare namespace i9 {
+    export {
+        MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY,
+        MAT_DATEPICKER_SCROLL_STRATEGY,
+        DatepickerDropdownPositionX,
+        DatepickerDropdownPositionY,
+        MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
+        MatDatepickerContent,
+        MatDatepickerControl,
+        MatDatepickerPanel,
+        MatDatepickerBase
+    }
+}
+
 declare function isSameMultiYearView<D>(dateAdapter: DateAdapter<D>, date1: D, date2: D, minDate: D | null, maxDate: D | null): boolean;
 
 /**
@@ -455,6 +454,10 @@ export declare class MatCalendarBody<D = any> implements OnChanges, OnDestroy, A
     _cellPadding: string;
     /** Width of an individual cell. */
     _cellWidth: string;
+    /** ID for the start date label. */
+    _startDateLabelId: string;
+    /** ID for the end date label. */
+    _endDateLabelId: string;
     private _didDragSinceMouseDown;
     private _injector;
     /**
@@ -555,9 +558,6 @@ export declare class MatCalendarBody<D = any> implements OnChanges, OnDestroy, A
     private _touchendHandler;
     /** Finds the MatCalendarCell that corresponds to a DOM node. */
     private _getCellFromElement;
-    private _id;
-    _startDateLabelId: string;
-    _endDateLabelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarBody<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarBody<any>, "[mat-calendar-body]", ["matCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "startValue": { "alias": "startValue"; "required": false; }; "endValue": { "alias": "endValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; "isRange": { "alias": "isRange"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "previewStart": { "alias": "previewStart"; "required": false; }; "previewEnd": { "alias": "previewEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; }, never, never, true, never>;
 }
@@ -621,7 +621,6 @@ export declare class MatCalendarHeader<D> {
      * for the minimum year, and the second string is the formatted label for the maximum year.
      */
     private _formatMinAndMaxYearLabels;
-    private _id;
     _periodButtonLabelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarHeader<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarHeader<any>, "mat-calendar-header", ["matCalendarHeader"], {}, {}, never, ["*"], true, never>;
@@ -1148,7 +1147,7 @@ export declare class MatDatepickerIntl {
 
 export declare class MatDatepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDatepickerModule, never, [typeof i1.CommonModule, typeof i2.MatButtonModule, typeof i3.OverlayModule, typeof i4.A11yModule, typeof i5.PortalModule, typeof i6.MatCommonModule, typeof i7.MatCalendar, typeof i8.MatCalendarBody, typeof i9.MatDatepicker, typeof i10.MatDatepickerContent, typeof i11.MatDatepickerInput, typeof i12.MatDatepickerToggle, typeof i12.MatDatepickerToggleIcon, typeof i13.MatMonthView, typeof i14.MatYearView, typeof i15.MatMultiYearView, typeof i7.MatCalendarHeader, typeof i16.MatDateRangeInput, typeof i17.MatStartDate, typeof i17.MatEndDate, typeof i18.MatDateRangePicker, typeof i19.MatDatepickerActions, typeof i19.MatDatepickerCancel, typeof i19.MatDatepickerApply], [typeof i20.CdkScrollableModule, typeof i7.MatCalendar, typeof i8.MatCalendarBody, typeof i9.MatDatepicker, typeof i10.MatDatepickerContent, typeof i11.MatDatepickerInput, typeof i12.MatDatepickerToggle, typeof i12.MatDatepickerToggleIcon, typeof i13.MatMonthView, typeof i14.MatYearView, typeof i15.MatMultiYearView, typeof i7.MatCalendarHeader, typeof i16.MatDateRangeInput, typeof i17.MatStartDate, typeof i17.MatEndDate, typeof i18.MatDateRangePicker, typeof i19.MatDatepickerActions, typeof i19.MatDatepickerCancel, typeof i19.MatDatepickerApply]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDatepickerModule, never, [typeof i1.MatButtonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof i4.PortalModule, typeof i5.MatCommonModule, typeof i6.MatCalendar, typeof i7.MatCalendarBody, typeof i8.MatDatepicker, typeof i9.MatDatepickerContent, typeof i10.MatDatepickerInput, typeof i11.MatDatepickerToggle, typeof i11.MatDatepickerToggleIcon, typeof i12.MatMonthView, typeof i13.MatYearView, typeof i14.MatMultiYearView, typeof i6.MatCalendarHeader, typeof i15.MatDateRangeInput, typeof i16.MatStartDate, typeof i16.MatEndDate, typeof i17.MatDateRangePicker, typeof i18.MatDatepickerActions, typeof i18.MatDatepickerCancel, typeof i18.MatDatepickerApply], [typeof i19.CdkScrollableModule, typeof i6.MatCalendar, typeof i7.MatCalendarBody, typeof i8.MatDatepicker, typeof i9.MatDatepickerContent, typeof i10.MatDatepickerInput, typeof i11.MatDatepickerToggle, typeof i11.MatDatepickerToggleIcon, typeof i12.MatMonthView, typeof i13.MatYearView, typeof i14.MatMultiYearView, typeof i6.MatCalendarHeader, typeof i15.MatDateRangeInput, typeof i16.MatStartDate, typeof i16.MatEndDate, typeof i17.MatDateRangePicker, typeof i18.MatDatepickerActions, typeof i18.MatDatepickerCancel, typeof i18.MatDatepickerApply]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatDatepickerModule>;
 }
 

package/dialog/_dialog-theme.scss

@@ -67,9 +67,9 @@
   }
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
     (
       namespace: tokens-mdc-dialog.$prefix,
       tokens: tokens-mdc-dialog.get-token-slots(),
@@ -77,10 +77,14 @@
     (
       namespace: tokens-mat-dialog.$prefix,
       tokens: tokens-mat-dialog.get-token-slots(),
-    )
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {
     @if inspection.get-theme-version($theme) == 1 {