@angular/material 18.1.0-next.3 → 18.1.0-rc.0

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,7 +15,7 @@ $prefix: (mat, autocomplete);
     background-color: map.get($systems, md-sys-color, surface-container),
     container-shape: map.get($systems, md-sys-shape, corner-extra-small),
     container-elevation-shadow:
-      token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+      token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
   );
 
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
-@use '@material/elevation' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, datepicker);
@@ -67,10 +67,10 @@ $prefix: (mat, datepicker);
     ),
     calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
     calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0),
+    calendar-container-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(0),
       $exclude-hardcoded),
     calendar-container-touch-elevation-shadow:
-      token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+      token-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
     calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../../style/sass-utils';
+@use '../../../style/elevation';
 @use '../../token-utils';
-@use '@material/elevation' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, select);
@@ -26,7 +26,7 @@ $prefix: (mat, select);
       focused-arrow-color: map.get($systems, md-sys-color, primary),
       invalid-arrow-color: map.get($systems, md-sys-color, error),
       container-elevation-shadow:
-        token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+        token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
     )
   ), (
     // Color variants:

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

@@ -16,10 +16,7 @@ $prefix: (mdc, chip);
   $tokens: sass-utils.merge-all(
     token-utils.generate-typography-tokens($systems, label-text, label-large),
     (
-      container-shape: token-utils.hardcode((
-        family: rounded,
-        radius: 8px,
-      ), $exclude-hardcoded),
+      container-shape-radius: token-utils.hardcode(8px, $exclude-hardcoded),
       with-avatar-avatar-size: token-utils.hardcode(24px, $exclude-hardcoded),
       label-text-color: map.get($systems, md-sys-color, on-surface-variant),
       disabled-label-text-color: sass-utils.safe-color-change(

package/core/tokens/m3/mdc/_elevated-card.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +11,12 @@ $prefix: (mdc, elevated-card);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC elevated-card
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('elevated-card', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('elevated-card', $systems, $exclude-hardcoded);
+  $elevation: map.get($tokens, container-elevation);
 
-  @return token-utils.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+  @if ($elevation != null) {
+    $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation));
+  }
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }

package/core/tokens/m3/mdc/_extended-fab.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +11,22 @@ $prefix: (mdc, extended-fab);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC extended-fab
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('extended-fab-primary', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('extended-fab-primary', $systems, $exclude-hardcoded);
+  $elevation-tokens: (
+    container-elevation,
+    focus-container-elevation,
+    hover-container-elevation,
+    pressed-container-elevation,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
+    }
+  }
+
   $variant-tokens: (
     // Color variants
     primary: (), // Default, no overrides needed.
@@ -17,5 +34,5 @@ $prefix: (mdc, extended-fab);
     tertiary: token-utils.get-mdc-tokens('extended-fab-tertiary', $systems, $exclude-hardcoded)
   );
 
-  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+  @return token-utils.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
 }

package/core/tokens/m3/mdc/_fab-small.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +11,22 @@ $prefix: (mdc, fab-small);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC fab-small
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('fab-primary-small', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('fab-primary-small', $systems, $exclude-hardcoded);
+  $elevation-tokens: (
+    container-elevation,
+    focus-container-elevation,
+    hover-container-elevation,
+    pressed-container-elevation,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
+    }
+  }
+
   $variant-tokens: (
     // Color variants
     primary: (), // Default, no overrides needed.
@@ -17,5 +34,5 @@ $prefix: (mdc, fab-small);
     tertiary: token-utils.get-mdc-tokens('fab-tertiary-small', $systems, $exclude-hardcoded)
   );
 
-  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+  @return token-utils.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
 }

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

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +11,22 @@ $prefix: (mdc, fab);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC fab
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('fab-primary', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('fab-primary', $systems, $exclude-hardcoded);
+  $elevation-tokens: (
+    container-elevation,
+    focus-container-elevation,
+    hover-container-elevation,
+    pressed-container-elevation,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
+    }
+  }
+
   $variant-tokens: (
     // Color variants
     primary: (), // Default, no overrides needed.
@@ -17,5 +34,5 @@ $prefix: (mdc, fab);
     tertiary: token-utils.get-mdc-tokens('fab-tertiary', $systems, $exclude-hardcoded)
   );
 
-  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+  @return token-utils.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
 }

package/core/tokens/m3/mdc/_outlined-card.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +11,12 @@ $prefix: (mdc, outlined-card);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC outlined-card
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('outlined-card', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('outlined-card', $systems, $exclude-hardcoded);
+  $elevation: map.get($tokens, container-elevation);
 
-  @return token-utils.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+  @if ($elevation != null) {
+    $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation));
+  }
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }

package/core/tokens/m3/mdc/{_tab.scss → _secondary-navigation-tab.scss}

@@ -1,7 +1,7 @@
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, tab);
+$prefix: (mdc, secondary-navigation-tab);
 
 /// Generates the tokens for MDC tab
 /// @param {Map} $systems The MDC system tokens

package/datepicker/index.d.ts

@@ -699,9 +699,11 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     /** The view that the calendar should start in. */
     startView: 'month' | 'year' | 'multi-year';
     /**
-     * Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it
-     * has no effect in M3 themes. For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants
+     * Theme color of the datepicker's calendar. This API is supported in M2 themes only, it
+     * has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
      */
     get color(): ThemePalette;
     set color(value: ThemePalette);
@@ -1162,7 +1164,9 @@ export declare interface MatDatepickerPanel<C extends MatDatepickerControl<D>, S
     closedStream: EventEmitter<void>;
     /**
      * Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it
-     * has no effect in M3 themes. For information on applying color variants in M3, see
+     * has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
      * https://material.angular.io/guide/theming#using-component-color-variants
      */
     color: ThemePalette;

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.1.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.1.0-next.1", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.3", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0-next.3", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.3", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',