@angular/material 18.0.0-next.5 → 18.0.0-rc.0

package/core/tokens/m3/mdc/_radio.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, radio);
+
+/// Generates the tokens for MDC radio
+/// @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 tokens for the MDC radio
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('radio-button', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, error),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+
+  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+}

package/core/tokens/m3/mdc/_slider.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, slider);
+
+/// Generates the tokens for MDC slider
+/// @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 tokens for the MDC slider
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('slider', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-track-color: map.get($systems, md-sys-color, secondary),
+      focus-handle-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      handle-color: map.get($systems, md-sys-color, secondary),
+      hover-handle-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-container-color: map.get($systems, md-sys-color, secondary),
+      label-label-text-color: map.get($systems, md-sys-color, on-secondary),
+      pressed-handle-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-secondary),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      active-track-color: map.get($systems, md-sys-color, tertiary),
+      focus-handle-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      handle-color: map.get($systems, md-sys-color, tertiary),
+      hover-handle-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-container-color: map.get($systems, md-sys-color, tertiary),
+      label-label-text-color: map.get($systems, md-sys-color, on-tertiary),
+      pressed-handle-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-tertiary),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: (
+      active-track-color: map.get($systems, md-sys-color, error),
+      focus-handle-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      handle-color: map.get($systems, md-sys-color, error),
+      hover-handle-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-container-color: map.get($systems, md-sys-color, error),
+      label-label-text-color: map.get($systems, md-sys-color, on-error),
+      pressed-handle-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-error),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-error),
+    ),
+  );
+
+  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+}

package/core/tokens/m3/mdc/_snack-bar.scss

@@ -0,0 +1,15 @@
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, snackbar);
+
+/// Generates the tokens for MDC snackbar
+/// @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 tokens for the MDC snackbar
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('snackbar', $systems, $exclude-hardcoded);
+
+  @return token-utils.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+}

package/core/tokens/m3/mdc/_switch.scss

@@ -0,0 +1,70 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, switch);
+
+/// Generates the tokens for MDC switch
+/// @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 tokens for the MDC switch
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('switch', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-track-color: map.get($systems, md-sys-color, secondary),
+      selected-handle-color: map.get($systems, md-sys-color, on-secondary),
+      selected-hover-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-track-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-track-color: map.get($systems, md-sys-color, secondary),
+      selected-track-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-handle-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-hover-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-track-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-focus-track-color: map.get($systems, md-sys-color, error),
+      selected-handle-color: map.get($systems, md-sys-color, on-error),
+      selected-hover-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-track-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-pressed-track-color: map.get($systems, md-sys-color, error),
+      selected-track-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+
+  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+}

package/core/tokens/m3/mdc/_tab-indicator.scss

@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, tab-indicator);
+
+/// Generates the tokens for MDC tab-indicator
+/// @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 tokens for the MDC tab-indicator
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    active-indicator-height: token-utils.hardcode(2px, $exclude-hardcoded),
+    active-indicator-shape: token-utils.hardcode(0, $exclude-hardcoded),
+    active-indicator-color: map.get($systems, md-sys-color, primary),
+  );
+  $variant-tokens: (
+    // Color variants
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-indicator-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
+}

package/core/tokens/m3/mdc/_tab.scss

@@ -0,0 +1,15 @@
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, tab);
+
+/// Generates the tokens for MDC tab
+/// @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 tokens for the MDC tab
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('secondary-navigation-tab', $systems, $exclude-hardcoded);
+
+  @return token-utils.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+}

package/core/tokens/m3/mdc/_text-button.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, text-button);
+
+/// Generates the tokens for MDC text-button
+/// @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 tokens for the MDC text-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('text-button', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      hover-label-text-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary)
+    ),
+    tertiary: (
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      hover-label-text-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary)
+    ),
+    error: (
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      hover-label-text-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-text-color: map.get($systems, md-sys-color, error),
+      pressed-label-text-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, error)
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, (
+    _fix-tokens($mdc-tokens),
+    token-utils.map-values($variant-tokens, meta.get-function(_fix-tokens))
+  ), $token-slots);
+}
+
+
+/// Fixes inconsistent values in the text button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of text button tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: token-utils.get-mdc-tokens('text-button', (), false);
+
+  @return token-utils.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+  ));
+}

package/core/typography/_all-typography.scss

@@ -1,4 +1,5 @@
 @use './typography';
+@use '../m2/typography' as m2-typography;
 @use '../../autocomplete/autocomplete-theme';
 @use '../../badge/badge-theme';
 @use '../../bottom-sheet/bottom-sheet-theme';
@@ -40,9 +41,9 @@
 
 // Includes all of the typographic styles.
 @mixin all-component-typographies($theme: null) {
-  // If no actual color configuration has been specified, create a default one.
+  // If no actual typography configuration has been specified, create a default one.
   @if not inspection.theme-has($theme, typography) {
-    $theme: typography.define-typography-config();
+    $theme: m2-typography.define-typography-config();
   }
 
   // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only

package/core/typography/_typography-utils.scss

@@ -1,10 +1,4 @@
 @use 'sass:list';
-@use 'sass:math';
-@use './property-getters';
-
-// Property getters live in their own file to avoid circular dependencies, but we re-export them
-// here so that historical imports from this file continue to work without needing to be updated.
-@forward './property-getters';
 
 /// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
 /// the individual properties if a value that isn't allowed in the shorthand is passed in.
@@ -35,23 +29,3 @@
     font: $font-weight list.slash($font-size, $line-height) $font-family;
   }
 }
-
-/// Emits CSS styles for the given typography level.
-/// @param {Map} $config A typography config.
-/// @param {Map} $level A typography level.
-@mixin typography-level($config, $level) {
-  // we deliberately do not use the font shorthand here because it overrides
-  // certain font properties that can't be configured in the current typography
-  // config, e.g. the font-variant-caps or font-feature-settings property
-  font-size: property-getters.font-size($config, $level);
-  font-weight: property-getters.font-weight($config, $level);
-  line-height: property-getters.line-height($config, $level);
-  font-family: property-getters.font-family($config, $level);
-  letter-spacing: property-getters.letter-spacing($config, $level);
-}
-
-/// Coerce a value to `em` if it is a unitless number, otherwise returns
-/// the value provided.
-@function private-coerce-unitless-to-em($value) {
-  @return if(math.is-unitless($value), 1em * $value, $value);
-}

package/core/typography/_typography.scss

@@ -3,12 +3,10 @@
 @use 'sass:string';
 @use 'typography-utils';
 @use '../theming/inspection';
-@use './versioning';
 
 // Definition and versioning functions live in their own files to avoid circular dependencies, but
 // we re-export them here so that historical imports from this file continue to work without needing
 // to be updated.
-@forward './definition';
 @forward './versioning';
 
 @mixin typography-hierarchy($theme, $selector: '.mat-typography', $back-compat: false) {

package/core/typography/_versioning.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use './definition';
+@use '../m2/typography' as m2-typography;
 
 // Whether a config is for the Material Design 2018 typography system.
 @function private-typography-is-2018-config($config) {
@@ -44,7 +44,7 @@
         $non-null-args: map.merge($non-null-args, ($key: $value));
       }
     }
-    @return definition.define-legacy-typography-config($non-null-args...);
+    @return m2-typography.define-legacy-typography-config($non-null-args...);
   }
   @return $config;
 }
@@ -83,7 +83,7 @@
       button: map.get($config, button),
       caption: map.get($config, caption),
       overline: if(map.get($config, overline), map.get($config, overline),
-        definition.define-typography-level(12px, 32px, 500)
+        m2-typography.define-typography-level(12px, 32px, 500)
       )
     );
   }

package/datepicker/_datepicker-theme.scss

@@ -134,6 +134,15 @@ $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,
+    (prefix: tokens-mat-datepicker.$prefix, tokens: tokens-mat-datepicker.get-token-slots()),
+  );
+}
+
 /// 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

@@ -1264,6 +1264,11 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     ngControl: NgControl | null;
     /** Emits when the input's state has changed. */
     readonly stateChanges: Subject<void>;
+    /**
+     * Disable the automatic labeling to avoid issues like #27241.
+     * @docs-private
+     */
+    readonly disableAutomaticLabeling = true;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, control: ControlContainer, _dateAdapter: DateAdapter<D>, _formField?: _MatFormFieldPartial | undefined);
     /**
      * Implemented as a part of `MatFormFieldControl`.

package/dialog/_dialog-theme.scss

@@ -56,6 +56,14 @@
   @else {}
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mdc-dialog.$prefix, tokens: tokens-mdc-dialog.get-token-slots()),
+    (prefix: tokens-mat-dialog.$prefix, tokens: tokens-mat-dialog.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {
     @if inspection.get-theme-version($theme) == 1 {

package/dialog/index.d.ts

@@ -13,7 +13,8 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i1 from '@angular/cdk/dialog';
+import * as i1 from '@angular/cdk/scrolling';
+import * as i1_2 from '@angular/cdk/dialog';
 import * as i2 from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
 import * as i4 from '@angular/material/core';
@@ -395,7 +396,7 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
  */
 export declare class MatDialogContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkScrollable; inputs: {}; outputs: {}; }]>;
 }
 
 declare abstract class MatDialogLayoutSection implements OnInit, OnDestroy {
@@ -413,7 +414,7 @@ declare abstract class MatDialogLayoutSection implements OnInit, OnDestroy {
 
 export declare class MatDialogModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent], [typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1_2.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent], [typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatDialogModule>;
 }
 

package/divider/_divider-theme.scss

@@ -44,6 +44,13 @@
   @else {}
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mat-divider.$prefix, tokens: tokens-mat-divider.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') {
     @if inspection.get-theme-version($theme) == 1 {

package/esm2022/autocomplete/autocomplete-origin.mjs

@@ -17,10 +17,10 @@ export class MatAutocompleteOrigin {
     elementRef) {
         this.elementRef = elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.1", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',

package/esm2022/autocomplete/autocomplete-trigger.mjs

@@ -806,10 +806,10 @@ export class MatAutocompleteTrigger {
             this._trackedModal = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocompleteTrigger, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MAT_AUTOCOMPLETE_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: MAT_FORM_FIELD, host: true, optional: true }, { token: DOCUMENT, optional: true }, { token: i3.ViewportRuler }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.1", type: MatAutocompleteTrigger, isStandalone: true, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled", booleanAttribute] }, host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-controls": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-mdc-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocompleteTrigger, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MAT_AUTOCOMPLETE_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: MAT_FORM_FIELD, host: true, optional: true }, { token: DOCUMENT, optional: true }, { token: i3.ViewportRuler }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: MatAutocompleteTrigger, isStandalone: true, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled", booleanAttribute] }, host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-controls": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-mdc-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[matAutocomplete], textarea[matAutocomplete]`,

package/esm2022/autocomplete/autocomplete.mjs

@@ -175,10 +175,10 @@ export class MatAutocomplete {
     _skipPredicate() {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocomplete, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.1", type: MatAutocomplete, isStandalone: true, selector: "mat-autocomplete", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], displayWith: "displayWith", autoActiveFirstOption: ["autoActiveFirstOption", "autoActiveFirstOption", booleanAttribute], autoSelectActiveOption: ["autoSelectActiveOption", "autoSelectActiveOption", booleanAttribute], requireSelection: ["requireSelection", "requireSelection", booleanAttribute], panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], classList: ["class", "classList"], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute] }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed", optionActivated: "optionActivated" }, host: { classAttribute: "mat-mdc-autocomplete" }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], queries: [{ propertyName: "options", predicate: MatOption, descendants: true }, { propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], exportAs: ["matAutocomplete"], ngImport: i0, template: "<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [class]=\"_classList\"\n    [class.mat-mdc-autocomplete-visible]=\"showPanel\"\n    [class.mat-mdc-autocomplete-hidden]=\"!showPanel\"\n    [class.mat-primary]=\"_color === 'primary'\"\n    [class.mat-accent]=\"_color === 'accent'\"\n    [class.mat-warn]=\"_color === 'warn'\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n    (@panelAnimation.done)=\"_animationDone.next($event)\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;box-sizing:border-box;position:static;border-radius:var(--mat-autocomplete-container-shape);box-shadow:var(--mat-autocomplete-container-elevation-shadow);background-color:var(--mat-autocomplete-background-color)}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden;pointer-events:none}mat-autocomplete{display:none}"], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocomplete, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: MatAutocomplete, isStandalone: true, selector: "mat-autocomplete", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], displayWith: "displayWith", autoActiveFirstOption: ["autoActiveFirstOption", "autoActiveFirstOption", booleanAttribute], autoSelectActiveOption: ["autoSelectActiveOption", "autoSelectActiveOption", booleanAttribute], requireSelection: ["requireSelection", "requireSelection", booleanAttribute], panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], classList: ["class", "classList"], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute] }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed", optionActivated: "optionActivated" }, host: { classAttribute: "mat-mdc-autocomplete" }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], queries: [{ propertyName: "options", predicate: MatOption, descendants: true }, { propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], exportAs: ["matAutocomplete"], ngImport: i0, template: "<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [class]=\"_classList\"\n    [class.mat-mdc-autocomplete-visible]=\"showPanel\"\n    [class.mat-mdc-autocomplete-hidden]=\"!showPanel\"\n    [class.mat-primary]=\"_color === 'primary'\"\n    [class.mat-accent]=\"_color === 'accent'\"\n    [class.mat-warn]=\"_color === 'warn'\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n    (@panelAnimation.done)=\"_animationDone.next($event)\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;box-sizing:border-box;position:static;border-radius:var(--mat-autocomplete-container-shape);box-shadow:var(--mat-autocomplete-container-elevation-shadow);background-color:var(--mat-autocomplete-background-color)}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden;pointer-events:none}mat-autocomplete{display:none}"], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'mat-autocomplete', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'matAutocomplete', host: {
                         'class': 'mat-mdc-autocomplete',

package/esm2022/autocomplete/module.mjs

@@ -15,8 +15,8 @@ import { MatAutocompleteTrigger, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVID
 import { MatAutocompleteOrigin } from './autocomplete-origin';
 import * as i0 from "@angular/core";
 export class MatAutocompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocompleteModule, imports: [OverlayModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocompleteModule, imports: [OverlayModule,
             MatOptionModule,
             MatCommonModule,
             CommonModule,
@@ -28,14 +28,14 @@ export class MatAutocompleteModule {
             MatCommonModule,
             MatAutocompleteTrigger,
             MatAutocompleteOrigin] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [OverlayModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [OverlayModule,
             MatOptionModule,
             MatCommonModule,
             CommonModule, CdkScrollableModule,
             MatOptionModule,
             MatCommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/badge/badge-module.mjs

@@ -11,11 +11,11 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { MatBadge, _MatBadgeStyleLoader } from './badge';
 import * as i0 from "@angular/core";
 export class MatBadgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatBadgeModule, imports: [A11yModule, MatCommonModule, MatBadge, _MatBadgeStyleLoader], exports: [MatBadge, MatCommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatBadgeModule, imports: [A11yModule, MatCommonModule, MatCommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatBadgeModule, imports: [A11yModule, MatCommonModule, MatBadge, _MatBadgeStyleLoader], exports: [MatBadge, MatCommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatBadgeModule, imports: [A11yModule, MatCommonModule, MatCommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.1", ngImport: i0, type: MatBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     // Note: we _shouldn't_ have to import `_MatBadgeStyleLoader`,