@angular/material-experimental 17.1.0-next.2 → 17.1.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "17.1.0-next.2",
+  "version": "17.1.0-rc.0",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -49,62 +49,62 @@
   },
   "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.1.0-next.2",
+    "@angular/cdk": "17.1.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.1.0-next.2"
+    "@angular/material": "17.1.0-rc.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@material/animation": "15.0.0-canary.a246a4439.0",
-    "@material/auto-init": "15.0.0-canary.a246a4439.0",
-    "@material/banner": "15.0.0-canary.a246a4439.0",
-    "@material/base": "15.0.0-canary.a246a4439.0",
-    "@material/button": "15.0.0-canary.a246a4439.0",
-    "@material/card": "15.0.0-canary.a246a4439.0",
-    "@material/checkbox": "15.0.0-canary.a246a4439.0",
-    "@material/chips": "15.0.0-canary.a246a4439.0",
-    "@material/circular-progress": "15.0.0-canary.a246a4439.0",
-    "@material/data-table": "15.0.0-canary.a246a4439.0",
-    "@material/density": "15.0.0-canary.a246a4439.0",
-    "@material/dialog": "15.0.0-canary.a246a4439.0",
-    "@material/dom": "15.0.0-canary.a246a4439.0",
-    "@material/drawer": "15.0.0-canary.a246a4439.0",
-    "@material/elevation": "15.0.0-canary.a246a4439.0",
-    "@material/fab": "15.0.0-canary.a246a4439.0",
-    "@material/feature-targeting": "15.0.0-canary.a246a4439.0",
-    "@material/floating-label": "15.0.0-canary.a246a4439.0",
-    "@material/form-field": "15.0.0-canary.a246a4439.0",
-    "@material/icon-button": "15.0.0-canary.a246a4439.0",
-    "@material/image-list": "15.0.0-canary.a246a4439.0",
-    "@material/layout-grid": "15.0.0-canary.a246a4439.0",
-    "@material/line-ripple": "15.0.0-canary.a246a4439.0",
-    "@material/linear-progress": "15.0.0-canary.a246a4439.0",
-    "@material/list": "15.0.0-canary.a246a4439.0",
-    "@material/menu": "15.0.0-canary.a246a4439.0",
-    "@material/menu-surface": "15.0.0-canary.a246a4439.0",
-    "@material/notched-outline": "15.0.0-canary.a246a4439.0",
-    "@material/radio": "15.0.0-canary.a246a4439.0",
-    "@material/ripple": "15.0.0-canary.a246a4439.0",
-    "@material/rtl": "15.0.0-canary.a246a4439.0",
-    "@material/segmented-button": "15.0.0-canary.a246a4439.0",
-    "@material/select": "15.0.0-canary.a246a4439.0",
-    "@material/shape": "15.0.0-canary.a246a4439.0",
-    "@material/slider": "15.0.0-canary.a246a4439.0",
-    "@material/snackbar": "15.0.0-canary.a246a4439.0",
-    "@material/switch": "15.0.0-canary.a246a4439.0",
-    "@material/tab": "15.0.0-canary.a246a4439.0",
-    "@material/tab-bar": "15.0.0-canary.a246a4439.0",
-    "@material/tab-indicator": "15.0.0-canary.a246a4439.0",
-    "@material/tab-scroller": "15.0.0-canary.a246a4439.0",
-    "@material/textfield": "15.0.0-canary.a246a4439.0",
-    "@material/theme": "15.0.0-canary.a246a4439.0",
-    "@material/tooltip": "15.0.0-canary.a246a4439.0",
-    "@material/top-app-bar": "15.0.0-canary.a246a4439.0",
-    "@material/touch-target": "15.0.0-canary.a246a4439.0",
-    "@material/typography": "15.0.0-canary.a246a4439.0"
+    "@material/animation": "15.0.0-canary.7f224ddd4.0",
+    "@material/auto-init": "15.0.0-canary.7f224ddd4.0",
+    "@material/banner": "15.0.0-canary.7f224ddd4.0",
+    "@material/base": "15.0.0-canary.7f224ddd4.0",
+    "@material/button": "15.0.0-canary.7f224ddd4.0",
+    "@material/card": "15.0.0-canary.7f224ddd4.0",
+    "@material/checkbox": "15.0.0-canary.7f224ddd4.0",
+    "@material/chips": "15.0.0-canary.7f224ddd4.0",
+    "@material/circular-progress": "15.0.0-canary.7f224ddd4.0",
+    "@material/data-table": "15.0.0-canary.7f224ddd4.0",
+    "@material/density": "15.0.0-canary.7f224ddd4.0",
+    "@material/dialog": "15.0.0-canary.7f224ddd4.0",
+    "@material/dom": "15.0.0-canary.7f224ddd4.0",
+    "@material/drawer": "15.0.0-canary.7f224ddd4.0",
+    "@material/elevation": "15.0.0-canary.7f224ddd4.0",
+    "@material/fab": "15.0.0-canary.7f224ddd4.0",
+    "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
+    "@material/floating-label": "15.0.0-canary.7f224ddd4.0",
+    "@material/form-field": "15.0.0-canary.7f224ddd4.0",
+    "@material/icon-button": "15.0.0-canary.7f224ddd4.0",
+    "@material/image-list": "15.0.0-canary.7f224ddd4.0",
+    "@material/layout-grid": "15.0.0-canary.7f224ddd4.0",
+    "@material/line-ripple": "15.0.0-canary.7f224ddd4.0",
+    "@material/linear-progress": "15.0.0-canary.7f224ddd4.0",
+    "@material/list": "15.0.0-canary.7f224ddd4.0",
+    "@material/menu": "15.0.0-canary.7f224ddd4.0",
+    "@material/menu-surface": "15.0.0-canary.7f224ddd4.0",
+    "@material/notched-outline": "15.0.0-canary.7f224ddd4.0",
+    "@material/radio": "15.0.0-canary.7f224ddd4.0",
+    "@material/ripple": "15.0.0-canary.7f224ddd4.0",
+    "@material/rtl": "15.0.0-canary.7f224ddd4.0",
+    "@material/segmented-button": "15.0.0-canary.7f224ddd4.0",
+    "@material/select": "15.0.0-canary.7f224ddd4.0",
+    "@material/shape": "15.0.0-canary.7f224ddd4.0",
+    "@material/slider": "15.0.0-canary.7f224ddd4.0",
+    "@material/snackbar": "15.0.0-canary.7f224ddd4.0",
+    "@material/switch": "15.0.0-canary.7f224ddd4.0",
+    "@material/tab": "15.0.0-canary.7f224ddd4.0",
+    "@material/tab-bar": "15.0.0-canary.7f224ddd4.0",
+    "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0",
+    "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0",
+    "@material/textfield": "15.0.0-canary.7f224ddd4.0",
+    "@material/theme": "15.0.0-canary.7f224ddd4.0",
+    "@material/tooltip": "15.0.0-canary.7f224ddd4.0",
+    "@material/top-app-bar": "15.0.0-canary.7f224ddd4.0",
+    "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
+    "@material/typography": "15.0.0-canary.7f224ddd4.0"
   },
   "sideEffects": false,
   "module": "./fesm2022/material-experimental.mjs",

package/theming/_custom-tokens.scss

@@ -334,8 +334,94 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-icon
 @function icon($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     color: _hardcode(inherit, $exclude-hardcoded),
+  ), (
+    // Color variants:
+    primary: (
+      color: map.get($systems, md-sys-color, primary),
+    ),
+    secondary: (
+      color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      color: map.get($systems, md-sys-color, error),
+    )
+  ));
+}
+
+/// Generates custom tokens for the mat-button.
+/// @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-button
+@function text-button($systems, $exclude-hardcoded) {
+  @return (
+    state-layer-color: map.get($systems, md-sys-color, primary),
+    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ripple-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, primary),
+      $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),
+  );
+}
+
+/// 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
+/// @return {Map} A set of custom tokens for the mat-flat-button
+@function filled-button($systems, $exclude-hardcoded) {
+  @return (
+    state-layer-color: map.get($systems, md-sys-color, on-primary),
+    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ripple-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-primary),
+      $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),
+  );
+}
+
+/// Generates custom tokens for the mat-raised-button.
+/// @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-raised-button
+@function elevated-button($systems, $exclude-hardcoded) {
+  @return (
+    state-layer-color: map.get($systems, md-sys-color, primary),
+    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ripple-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, primary),
+      $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),
+  );
+}
+
+/// Generates custom tokens for the mat-outlined-button.
+/// @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-outlined-button
+@function outlined-button($systems, $exclude-hardcoded) {
+  @return (
+    state-layer-color: map.get($systems, md-sys-color, primary),
+    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ripple-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, primary),
+      $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),
   );
 }
 
@@ -346,6 +432,7 @@
 @function icon-button($systems, $exclude-hardcoded) {
   @return (
     state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     ripple-color: mat.private-safe-color-change(
       map.get($systems, md-sys-color, on-surface-variant),
       $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
@@ -508,8 +595,23 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-slider
 @function slider($systems, $exclude-hardcoded) {
+  $ripple-color: map.get($systems, md-sys-color, primary);
+  $hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)});
+  $focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)});
+
   @return (
+    ripple-color: $ripple-color,
+    hover-state-layer-color: $hover-ripple-color,
+    focus-state-layer-color: $focus-ripple-color,
     value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
+    value-indicator-padding: _hardcode(0, $exclude-hardcoded),
+    value-indicator-width: _hardcode(28px, $exclude-hardcoded),
+    value-indicator-height: _hardcode(28px, $exclude-hardcoded),
+    value-indicator-caret-display: _hardcode(none, $exclude-hardcoded),
+    value-indicator-border-radius: _hardcode(50% 50% 50% 0, $exclude-hardcoded),
+    value-indicator-text-transform: _hardcode(rotate(45deg), $exclude-hardcoded),
+    value-indicator-container-transform:
+      _hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded)
   );
 }
 
@@ -578,6 +680,8 @@
   @return mat.private-merge-all(
     _generate-typography-tokens($systems, label-text, title-small),
     (
+      divider-color: map.get($systems, md-sys-color, surface-variant),
+      divider-height: 1px,
       disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value.
       pagination-icon-color: map.get($systems, md-sys-color, on-surface),
       inactive-label-text-color: map.get($systems, md-sys-color, on-surface),

package/theming/_m3-density.scss

@@ -28,6 +28,18 @@ $_density-tokens: (
   (mdc, extended-fab): (),
   (mdc, fab): (),
   (mdc, filled-text-field): (),
+  (mdc, text-button): (
+    container-height: (40px, 36px, 32px, 28px),
+  ),
+  (mdc, protected-button): (
+    container-height: (40px, 36px, 32px, 28px),
+  ),
+  (mdc, filled-button): (
+    container-height: (40px, 36px, 32px, 28px),
+  ),
+  (mdc, outlined-button): (
+    container-height: (40px, 36px, 32px, 28px),
+  ),
   (mdc, icon-button): (
     state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px),
   ),
@@ -63,7 +75,13 @@ $_density-tokens: (
     header-expanded-state-height: (64px, 60px, 56px, 48px),
   ),
   (mat, fab): (),
-  (mat, form-fild): (),
+  (mat, form-field): (
+    container-height: (56px, 52px, 48px, 44px, 40px, 36px),
+    filled-label-display: (block, block, none, none, none, none),
+    container-vertical-padding: (16px, 14px, 12px, 10px, 8px, 6px),
+    filled-with-label-container-padding-top: (24px, 22px, 12px, 10px, 8px, 6px),
+    filled-with-label-container-padding-bottom: (8px, 6px, 12px, 10px, 8px, 6px),
+  ),
   (mat, grid-list): (),
   (mat, icon): (),
   (mat, icon-button): (),