@angular/material-experimental 17.2.0-next.1 → 17.2.0-rc.0

package/_index.scss

@@ -9,5 +9,6 @@
 @forward './theming/m3-palettes' as m3-* show $m3-red-palette, $m3-green-palette, $m3-blue-palette,
   $m3-yellow-palette, $m3-cyan-palette, $m3-magenta-palette, $m3-orange-palette,
   $m3-chartreuse-palette, $m3-azure-palette, $m3-violet-palette, $m3-rose-palette;
+@forward './theming/color-api-back-compat' show color-variants-back-compat;
 
 // Additional public APIs for individual components

package/esm2022/version.mjs

@@ -7,5 +7,5 @@
  */
 import { Version } from '@angular/core';
 /** Current version of the Material experimental package. */
-export const VERSION = new Version('17.2.0-next.1');
+export const VERSION = new Version('17.2.0-rc.0');
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC1leHBlcmltZW50YWwvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXRDLDREQUE0RDtBQUM1RCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxPQUFPLENBQUMsbUJBQW1CLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge1ZlcnNpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKiogQ3VycmVudCB2ZXJzaW9uIG9mIHRoZSBNYXRlcmlhbCBleHBlcmltZW50YWwgcGFja2FnZS4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gbmV3IFZlcnNpb24oJzAuMC4wLVBMQUNFSE9MREVSJyk7XG4iXX0=

package/fesm2022/material-experimental.mjs

@@ -1,7 +1,7 @@
 import { Version } from '@angular/core';
 
 /** Current version of the Material experimental package. */
-const VERSION = new Version('17.2.0-next.1');
+const VERSION = new Version('17.2.0-rc.0');
 
 export { VERSION };
 //# sourceMappingURL=material-experimental.mjs.map

package/fesm2022/material-experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('17.2.0-next.1');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('17.2.0-rc.0');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "17.2.0-next.1",
+  "version": "17.2.0-rc.0",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -49,12 +49,12 @@
   },
   "peerDependencies": {
     "@angular/animations": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
-    "@angular/cdk": "17.2.0-next.1",
+    "@angular/cdk": "17.2.0-rc.0",
     "@angular/core": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
     "@angular/common": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
     "@angular/forms": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
     "@angular/platform-browser": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
-    "@angular/material": "17.2.0-next.1"
+    "@angular/material": "17.2.0-rc.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/theming/_color-api-back-compat.scss

@@ -0,0 +1,98 @@
+@use '@angular/material' as mat;
+
+@mixin color-variant-styles($theme, $color-variant) {
+  // Some components use the secondary color rather than primary color for `.mat-primary`.
+  // Those components should use the $secondary-color-variant.
+  $secondary-color-variant: if($color-variant == primary, secondary, $color-variant);
+
+  @include mat.option-color($theme, $color-variant: $secondary-color-variant);
+  @include mat.progress-spinner-color($theme, $color-variant: $color-variant);
+  @include mat.pseudo-checkbox-color($theme, $color-variant: $color-variant);
+  @include mat.stepper-color($theme, $color-variant: $color-variant);
+
+  &.mat-icon {
+    @include mat.icon-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-checkbox {
+    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-slider {
+    @include mat.slider-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-tab-group,
+  &.mat-mdc-tab-nav-bar {
+    @include mat.tabs-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-slide-toggle {
+    @include mat.slide-toggle-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-form-field {
+    @include mat.select-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-radio-button {
+    @include mat.radio-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-progress-bar {
+    @include mat.progress-bar-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-form-field {
+    @include mat.form-field-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-datepicker-content {
+    @include mat.datepicker-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-button-base {
+    @include mat.button-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-standard-chip {
+    @include mat.chips-color($theme, $color-variant: $secondary-color-variant);
+  }
+
+  .mdc-list-item__start,
+  .mdc-list-item__end {
+    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+    @include mat.radio-color($theme, $color-variant: $color-variant);
+  }
+
+  // M3 dropped support for warn/error color FABs.
+  @if $color-variant != error {
+    &.mat-mdc-fab,
+    &.mat-mdc-mini-fab {
+      @include mat.fab-color($theme, $color-variant: $color-variant);
+    }
+  }
+}
+
+@mixin color-variants-back-compat($theme) {
+  .mat-primary {
+    @include color-variant-styles($theme, primary);
+  }
+  .mat-badge {
+    @include mat.badge-color($theme, $color-variant: primary);
+  }
+
+  .mat-accent {
+    @include color-variant-styles($theme, tertiary);
+  }
+  .mat-badge-accent {
+    @include mat.badge-color($theme, $color-variant: tertiary);
+  }
+
+  .mat-warn {
+    @include color-variant-styles($theme, error);
+  }
+  .mat-badge-warn {
+    @include mat.badge-color($theme, $color-variant: error);
+  }
+}

package/theming/_custom-tokens.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 /// Hardcode the given value, or null if hardcoded values are excluded.
 @function _hardcode($value, $exclude-hardcoded) {
@@ -28,6 +29,9 @@
 @function autocomplete($systems, $exclude-hardcoded) {
   @return (
     background-color: map.get($systems, md-sys-color, surface-container),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+    container-elevation-shadow:
+      _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
   );
 }
 
@@ -186,13 +190,51 @@
   );
 }
 
+/// Generates custom tokens for the mat-chip.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-chip
+@function chip($systems, $exclude-hardcoded) {
+  @return ((
+    disabled-container-opacity: _hardcode(1, $exclude-hardcoded),
+    selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+    selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
+    trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    selected-trailing-action-state-layer-color:
+        map.get($systems, md-sys-color, on-secondary-container),
+    trailing-action-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+    trailing-action-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+    trailing-action-opacity: _hardcode(1, $exclude-hardcoded),
+    trailing-action-focus-opacity: _hardcode(1, $exclude-hardcoded),
+  ), (
+    primary: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-primary-container),
+    ),
+    secondary: (), // Default, no overrides needed.
+    tertiary: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-error-container),
+    ),
+  ));
+}
+
 /// Generates custom tokens for the mdc-chip. (MDC has a chip component, but they
 /// seem to have made up the tokens rather than using ones generated from the token database,
 /// therefore we need a custom token function for it).
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mdc-chip
-@function chip($systems, $exclude-hardcoded) {
+@function mdc-chip($systems, $exclude-hardcoded) {
   @return (mat.private-merge-all(
     _generate-typography-tokens($systems, label-text, label-large),
     (
@@ -208,16 +250,10 @@
       ),
       with-icon-icon-size: _hardcode(18px, $exclude-hardcoded),
       with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-icon-disabled-icon-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
+      with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface),
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
       with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-trailing-icon-disabled-trailing-icon-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
+      with-trailing-icon-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
       focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
       focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
       outline-width: _hardcode(1px, $exclude-hardcoded),
@@ -227,18 +263,48 @@
         $alpha: 0.12,
       ),
       focus-outline-color: map.get($systems, md-sys-color, on-surface-variant),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      with-avatar-disabled-avatar-opacity: _hardcode(0.38, $exclude-hardcoded),
+      elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container),
+      flat-selected-outline-width: _hardcode(0, $exclude-hardcoded),
+      selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      flat-disabled-selected-container-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.12,
+      ),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+      with-icon-disabled-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
+      with-trailing-icon-disabled-trailing-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
     ),
   ), (
     // Color variants:
     primary: (
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, primary-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
     ),
     secondary: (), // Default, no overrides needed.
     tertiary: (
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
     ),
     error: (
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, error-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-error-container),
     )
   ));
 }
@@ -1005,6 +1071,8 @@
           map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
       focused-arrow-color: map.get($systems, md-sys-color, primary),
       invalid-arrow-color: map.get($systems, md-sys-color, error),
+      container-elevation-shadow:
+        _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
     )
   ), (
     // Color variants:
@@ -1027,12 +1095,14 @@
 /// @return {Map} A set of custom tokens for the mat-sidenav
 @function sidenav($systems, $exclude-hardcoded) {
   @return (
-    container-shape: 16px,
-    container-divider-color: map.get($systems, md-sys-color, outline),
+    container-elevation-shadow: _hardcode(none, $exclude-hardcoded),
+    container-divider-color: _hardcode(transparent, $exclude-hardcoded),
+    container-width: _hardcode(360px, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-large),
     container-background-color: map.get($systems, md-sys-color, surface),
     container-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    content-background-color: _hardcode(inherit, $exclude-hardcoded),
-    content-text-color: _hardcode(inherit, $exclude-hardcoded),
+    content-background-color: map.get($systems, md-sys-color, background),
+    content-text-color: map.get($systems, md-sys-color, on-background),
     scrim-color: mat.private-safe-color-change(
         map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
   );
@@ -1085,6 +1155,35 @@
   ));
 }
 
+/// Generates custom tokens for the mat-slide-toggle.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-slide-toggle
+@function switch($systems, $exclude-hardcoded) {
+  @return ((
+    unselected-handle-size: 16px,
+    selected-handle-size: 24px,
+    with-icon-handle-size: 24px,
+    pressed-handle-size: 28px,
+    selected-handle-horizontal-margin: 0 24px,
+    selected-with-icon-handle-horizontal-margin: 0 24px,
+    selected-pressed-handle-horizontal-margin: 0 22px,
+    unselected-handle-horizontal-margin: 0 8px,
+    unselected-with-icon-handle-horizontal-margin: 0 4px,
+    unselected-pressed-handle-horizontal-margin: 0 2px,
+    // The hidden and visible track represent whichever track is visible or
+    // hidden in the ui. This could be the .mdc-switch__track :before or
+    // :after depending on whether the switch is selected or unselected.
+    //
+    // The m2 slide-toggle uses transforms to hide & show the tracks while
+    // the m3 slide-toggle uses opacity.
+    visible-track-opacity: 1,
+    hidden-track-opacity: 0,
+    visible-track-transition: opacity 75ms,
+    hidden-track-transition: opacity 75ms,
+  ), ());
+}
+
 /// Generates custom tokens for the mat-snack-bar.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

package/theming/_m3-tokens.scss

@@ -464,6 +464,17 @@
   @return $tokens;
 }
 
+/// Fixes values in the list tokens that are inconsistent with its usage.
+/// @param {Map} $initial-tokens Map of list tokens currently being generated.
+/// @return {Map} The given tokens, with the inconsistent values replaced with valid ones.
+@function _fix-list-tokens($tokens) {
+  // This does not match the spec, which defines this to be `md.sys.color.surface`.
+  // However, this interferes with the use case of placing a list on other components. For example,
+  // the bottom sheet's container color is `md.sys.color.surface-container-low`. Instead, allow the
+  // list to just display the colors for its background.
+  @return map.set($tokens, list-item-container-color, transparent);
+}
+
 /// Generates a set of namespaced tokens for all components.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -514,7 +525,7 @@
     ),
     _namespace-tokens(
       (mdc, chip),
-      custom-tokens.chip($systems, $exclude-hardcoded),
+      custom-tokens.mdc-chip($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
@@ -660,7 +671,9 @@
     ),
     _namespace-tokens(
       (mdc, list),
-      mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
+      _fix-list-tokens(
+        mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded)
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -753,6 +766,11 @@
       custom-tokens.card($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, chip),
+      custom-tokens.chip($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, datepicker),
       custom-tokens.datepicker($systems, $exclude-hardcoded),
@@ -904,6 +922,11 @@
       custom-tokens.stepper($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, switch),
+      custom-tokens.switch($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, tab-header),
       custom-tokens.tab-header($systems, $exclude-hardcoded),