@angular/material 18.0.0-next.4 → 18.0.0-next.6

package/core/tokens/_token-utils.scss

@@ -5,14 +5,14 @@
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
 @use '../style/sass-utils';
-@use '../theming/palette';
-@use '../theming/theming';
-@use '../typography/typography';
+@use '../m2/palette' as m2-palette;
+@use '../m2/theming' as m2-theming;
+@use '../m2/typography' as m2-typography;
 
 // Indicates whether we're building internally. Used for backwards compatibility.
 $private-is-internal-build: false;
 
-$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+$_placeholder-color-palette: m2-theming.define-palette(m2-palette.$red-palette);
 
 // Placeholder color config that can be passed to token getter functions when generating token
 // slots.
@@ -21,11 +21,11 @@ $placeholder-color-config: (
   accent: $_placeholder-color-palette,
   warn: $_placeholder-color-palette,
   is-dark: false,
-  foreground: palette.$light-theme-foreground-palette,
-  background: palette.$light-theme-background-palette,
+  foreground: m2-palette.$light-theme-foreground-palette,
+  background: m2-palette.$light-theme-background-palette,
 );
 
-$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
+$_placeholder-typography-level-config: m2-typography.typography-config-level-from-mdc(body1);
 
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
@@ -203,42 +203,50 @@ $_component-prefix: null;
   }
   $overrides: map.get($tokens, list.append($prefix, $color-variant));
   @if $overrides == null {
-    @error #{'Invalid color variant: '}#{$color-variant}#{'. Supported color variants are: '}#{
-      _supported-color-variants($tokens, $prefix)
-    }#{'.'};
+    $variants: _supported-color-variants($tokens, $prefix);
+    $secondary-message: if($variants == (),
+      'Mixin does not support color variants',
+      'Supported color variants are: #{$variants}'
+    );
+
+    @error 'Invalid color variant: #{$color-variant}. #{$secondary-message}.';
   }
   @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
 }
 
-/// Emits new token values for the given tokens.
-/// Verifies that the tokens passed in are valid tokens.
+/// Emits new token values for the given token overrides.
+/// Verifies that the overrides passed in are valid tokens.
 /// New token values are emitted under the current selector or root.
-@mixin batch-create-token-values(
-  $tokens: (),
-  $mat-prefix: '',
-  $mdc-prefix: '',
-  $mat-tokens: (),
-  $mdc-tokens: ()
-) {
-  $custom-mat-tokens: ();
-  $custom-mdc-tokens: ();
+@mixin batch-create-token-values($overrides: (), $token-maps...) {
+  @include _validate-token-overrides($overrides, $token-maps);
 
-  $mat-token-names: map.keys($mat-tokens);
-  $mdc-token-names: map.keys($mdc-tokens);
-  $valid-token-names: _get-valid-token-names($mat-tokens, $mdc-tokens);
+  @each $token-map in $token-maps {
+    $prefix: map.get($token-map, prefix);
+    $tokens: map.get($token-map, tokens);
 
-  @each $name, $value in $tokens {
-    $is-mat-token: list.index($mat-token-names, $name) != null;
-    $is-mdc-token: list.index($mdc-token-names, $name) != null;
+    @each $name, $value in $tokens {
+      $tokens: map.set($tokens, $name, map.get($overrides, $name));
+    }
 
-    @if ($is-mat-token) {
-      $custom-mat-tokens: map.set($custom-mat-tokens, $name, $value);
+    @include sass-utils.current-selector-or-root() {
+      @include create-token-values($prefix, $tokens);
     }
+  }
+}
 
-    @if ($is-mdc-token) {
-      $custom-mdc-tokens: map.set($custom-mdc-tokens, $name, $value);
+/// Verifies that the token overrides exist and are used in one of the given token maps.
+@mixin _validate-token-overrides($overrides: (), $token-maps) {
+  $valid-token-names: ();
+
+  @each $token-map in $token-maps {
+    @each $name, $value in map.get($token-map, tokens) {
+      @if ($value != null and list.index($valid-token-names, $name) == null) {
+        $valid-token-names: list.append($valid-token-names, $name);
+      }
     }
+  }
 
+  @each $name in map.keys($overrides) {
     @if (list.index($valid-token-names, $name) == null) {
       @error (
         'Invalid token: "' + $name + '"'
@@ -246,22 +254,4 @@ $_component-prefix: null;
       );
     }
   }
-
-  @include sass-utils.current-selector-or-root() {
-    @include create-token-values($mat-prefix, $custom-mat-tokens);
-    @include create-token-values($mdc-prefix, $custom-mdc-tokens);
-  }
-}
-
-/// Returns the union of token names whose values are not null.
-@function _get-valid-token-names($mat-tokens, $mdc-tokens) {
-  $mat-and-mdc-tokens: map.merge($mat-tokens, $mdc-tokens);
-
-  @each $name, $value in $mat-and-mdc-tokens {
-    @if ($value == null) {
-      $mat-and-mdc-tokens: map.remove($mat-and-mdc-tokens, $name);
-    }
-  }
-
-  @return map.keys($mat-and-mdc-tokens);
 }

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

@@ -2,7 +2,7 @@
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, chip);
@@ -26,8 +26,8 @@ $prefix: (mat, chip);
   $foreground: null;
   @if $palette-name == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $grey-50: map.get(palette.$grey-palette, 50);
-    $grey-900: map.get(palette.$grey-palette, 900);
+    $grey-50: map.get(m2-palette.$grey-palette, 50);
+    $grey-900: map.get(m2-palette.$grey-palette, 900);
     $foreground: if($is-dark, $grey-50, $grey-900);
   }
   @else {

package/core/tokens/m2/mat/_form-field.scss

@@ -6,7 +6,7 @@
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, form-field);
@@ -34,10 +34,10 @@ $prefix: (mat, form-field);
     // always on a white background inside the dropdown, causing them to blend in.
     // Since we can't change background of the dropdown, we need to explicitly
     // reset the color of the options to something dark.
-    select-option-text-color: if($is-dark, palette.$dark-primary-text, inherit),
+    select-option-text-color: if($is-dark, m2-palette.$dark-primary-text, inherit),
     // Note the spelling of the `GrayText` here which is a system color. See:
     // https://developer.mozilla.org/en-US/docs/Web/CSS/system-color
-    select-disabled-option-text-color: if($is-dark, palette.$dark-disabled-text, GrayText),
+    select-disabled-option-text-color: if($is-dark, m2-palette.$dark-disabled-text, GrayText),
 
     // These tokens are necessary for M3. MDC has them built in already, but:
     // 1. They are too specific, breaking a lot of internal clients.

package/core/tokens/m2/mdc/_checkbox.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
+@use '../../../m2/theming' as m2-theming;
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -51,7 +52,7 @@ $prefix: (mdc, checkbox);
   $border-color: sass-utils.safe-color-change(
       inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
   $active-border-color:
-    theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+    m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
   $selected-checkmark-color: null;
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions

package/core/tokens/m2/mdc/_chip.scss

@@ -5,7 +5,7 @@
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, chip);
@@ -224,8 +224,8 @@ $prefix: (mdc, chip);
 
   @if $palette-name == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $grey-50: map.get(palette.$grey-palette, 50);
-    $grey-900: map.get(palette.$grey-palette, 900);
+    $grey-50: map.get(m2-palette.$grey-palette, 50);
+    $grey-900: map.get(m2-palette.$grey-palette, 900);
     $foreground: if($is-dark, $grey-50, $grey-900);
 
     $surface: inspection.get-theme-color($theme, background, card);

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

@@ -1,5 +1,6 @@
 @use 'sass:map';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
+@use '../../../m2/theming' as m2-theming;
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -45,7 +46,7 @@ $prefix: (mdc, radio);
 @function get-color-tokens($theme, $palette-name: accent) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $palette-color: inspection.get-theme-color($theme, $palette-name, default);
-  $icon-color: theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+  $icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
 
   @return (
     disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),

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

@@ -732,10 +732,7 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     readonly openedStream: EventEmitter<void>;
     /** Emits when the datepicker has been closed. */
     readonly closedStream: EventEmitter<void>;
-    /**
-     * Classes to be passed to the date picker panel.
-     * Supports string and string array values, similar to `ngClass`.
-     */
+    /** Classes to be passed to the date picker panel. */
     get panelClass(): string | string[];
     set panelClass(value: string | string[]);
     private _panelClass;
@@ -1267,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/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]',