@angular/material 20.0.0-next.1 → 20.0.0-next.2

package/core/tokens/m3/definitions/_md-sys-color.scss

@@ -7,12 +7,15 @@
 
 @use './md-ref-palette';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default-dark: (
   'md-ref-palette': md-ref-palette.values(),
 );
 
 @function values-dark($deps: $_default-dark) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral6'),
     'error': map.get($deps, 'md-ref-palette', 'error80'),
     'error-container': map.get($deps, 'md-ref-palette', 'error30'),
@@ -64,6 +67,24 @@ $_default-dark: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'surface-bright': #37393b,
+      'surface-container': #1e1f20,
+      'surface-container-high': #282a2c,
+      'surface-container-highest': #333537,
+      'surface-container-low': #1b1b1b,
+      'surface-container-lowest': #0e0e0e,
+      'surface-dim': #131313,
+      'surface-tint': #d1e1ff,
+    ));
+  }
+
+  @return $values;
 }
 
 $_default-light: (
@@ -71,7 +92,7 @@ $_default-light: (
 );
 
 @function values-light($deps: $_default-light) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral98'),
     'error': map.get($deps, 'md-ref-palette', 'error40'),
     'error-container': map.get($deps, 'md-ref-palette', 'error90'),
@@ -123,4 +144,25 @@ $_default-light: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),
+      'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),
+      'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),
+      'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-bright': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-container': #f0f4f9,
+      'surface-container-high': #e9eef6,
+      'surface-container-highest': #dde3ea,
+      'surface-container-low': #f8fafd,
+      'surface-container-lowest': map.get($deps, 'md-ref-palette', 'primary100'),
+      'surface-dim': #d3dbe5,
+      'surface-tint': #6991d6,
+    ));
+  }
+
+  @return $values;
 }

package/core/tokens/m3/definitions/_md-sys-typescale.scss

@@ -7,12 +7,15 @@
 
 @use './md-ref-typeface';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default: (
   'md-ref-typeface': md-ref-typeface.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     // Warning: risk of reduced fidelity from using this composite typography token.
     // Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font"
     // property shorthand. Consider using the discrete properties instead.
@@ -305,4 +308,20 @@ $_default: (
     'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
     'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'body-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'display-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-medium-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'label-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'title-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'title-small-tracking': if($exclude-hardcoded-values, null, 0),
+    ));
+  }
+
+  @return $values;
 }

package/core/tokens/m3/mat/_tonal-button.scss

@@ -0,0 +1,101 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../../style/sass-utils';
+@use '../../token-definition';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tonal-button);
+
+/// Generates custom tokens for the mat-flat-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 custom tokens for the mat-flat-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-definition.get-mdc-tokens('filled-tonal-button', $systems, $exclude-hardcoded);
+
+  $tokens: map.merge($mdc-tokens, (
+    horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded),
+    icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded),
+    icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded),
+    state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ripple-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-secondary-container),
+      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+    ),
+    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+  ));
+
+  $variant-tokens: (
+    // Color variants:
+    primary: (),
+    secondary: (),
+    tertiary: (
+      container-color: map.get($systems, md-sys-color, tertiary-container),
+      focus-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      hover-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      pressed-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      pressed-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-tertiary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    error: (
+      container-color: map.get($systems, md-sys-color, error-container),
+      focus-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      hover-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      label-text-color: map.get($systems, md-sys-color, on-error-container),
+      pressed-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      pressed-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-error-container),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-error-container),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-error-container),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-error-container),
+      state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-error-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  );
+
+  @return token-definition.namespace-tokens($prefix, (
+    _fix-tokens($tokens),
+    token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens))
+  ), $token-slots);
+}
+
+
+/// Fixes inconsistent values in the tonal button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of tonal 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-definition.get-mdc-tokens('filled-tonal-button', (), false);
+
+  @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity,
+    )
+  ));
+}

package/datepicker/_datepicker-theme.scss

@@ -26,7 +26,7 @@ $calendar-weekday-table-font-size: 11px !default;
     $palette-name
   );
 
-  @include token-utils.create-token-values(
+  @include token-utils.create-token-values-mixed(
     tokens-mat-datepicker.$prefix,
     map.merge($calendar-tokens, $range-tokens)
   );
@@ -40,7 +40,7 @@ $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(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-datepicker.$prefix,
         tokens-mat-datepicker.get-unthemable-tokens()
       );
@@ -58,7 +58,7 @@ $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(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-datepicker.$prefix,
         tokens-mat-datepicker.get-color-tokens($theme)
       );
@@ -80,7 +80,8 @@ $calendar-weekday-table-font-size: 11px !default;
           $theme,
           accent
         );
-        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
+        @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix,
+          $accent-tokens);
       }
 
       &.mat-warn {
@@ -88,7 +89,7 @@ $calendar-weekday-table-font-size: 11px !default;
           $theme,
           warn
         );
-        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
+        @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $warn-tokens);
       }
     }
   }
@@ -101,7 +102,7 @@ $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(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-datepicker.$prefix,
         tokens-mat-datepicker.get-typography-tokens($theme)
       );
@@ -124,7 +125,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(tokens-mat-datepicker.$prefix, $tokens);
   }
 }
 

package/datepicker/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { OnChanges, OnDestroy, AfterViewChecked, EventEmitter, SimpleChanges, FactoryProvider, AfterContentInit, ChangeDetectorRef, AfterViewInit, ElementRef, InjectionToken, OnInit, DoCheck, TemplateRef } from '@angular/core';
-import { b as MatButton, m as MatButtonModule } from '../module.d-18a67f56.js';
+import { c as MatButton, n as MatButtonModule } from '../module.d-792a497c.js';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/a11y';

package/dialog/_dialog-theme.scss

@@ -14,11 +14,11 @@
   } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-dialog.$prefix,
         tokens-mdc-dialog.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-dialog.$prefix,
         tokens-mat-dialog.get-unthemable-tokens()
       );
@@ -31,11 +31,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-dialog.$prefix,
         tokens-mdc-dialog.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-dialog.$prefix,
         tokens-mat-dialog.get-color-tokens($theme)
       );
@@ -48,11 +48,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-dialog.$prefix,
         tokens-mdc-dialog.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-dialog.$prefix,
         tokens-mat-dialog.get-typography-tokens($theme)
       );

package/divider/_divider-theme.scss

@@ -11,7 +11,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-divider.$prefix,
         tokens-mat-divider.get-unthemable-tokens()
       );
@@ -24,7 +24,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-divider.$prefix,
         tokens-mat-divider.get-color-tokens($theme)
       );

package/expansion/_expansion-theme.scss

@@ -12,7 +12,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-expansion.$prefix,
         tokens-mat-expansion.get-unthemable-tokens()
       );
@@ -25,7 +25,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-expansion.$prefix,
         tokens-mat-expansion.get-color-tokens($theme)
       );
@@ -41,7 +41,7 @@
     $theme: inspection.private-get-typography-back-compat-theme($theme);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-expansion.$prefix,
         tokens-mat-expansion.get-typography-tokens($theme)
       );
@@ -54,7 +54,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-expansion.$prefix,
         tokens-mat-expansion.get-density-tokens($theme)
       );

package/fesm2022/autocomplete.mjs

@@ -55,6 +55,7 @@ function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
         autoSelectActiveOption: false,
         hideSingleSelectionIndicator: false,
         requireSelection: false,
+        hasBackdrop: false,
     };
 }
 /** Autocomplete component. */
@@ -995,6 +996,8 @@ class MatAutocompleteTrigger {
             scrollStrategy: this._scrollStrategy(),
             width: this._getPanelWidth(),
             direction: this._dir ?? undefined,
+            hasBackdrop: this._defaults?.hasBackdrop,
+            backdropClass: this._defaults?.backdropClass,
             panelClass: this._defaults?.overlayPanelClass,
         });
     }