@angular/material-experimental 17.0.0-next.4 → 17.0.0-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "17.0.0-next.4",
+  "version": "17.0.0-next.6",
   "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.0.0-next.4",
+    "@angular/cdk": "17.0.0-next.6",
     "@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.0.0-next.4"
+    "@angular/material": "17.0.0-next.6"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/popover-edit/_popover-edit-theme.scss

@@ -6,7 +6,7 @@
 }
 
 @mixin color($theme) {
-  $background-color: mat.private-get-theme-color($theme, background, 'card');
+  $background-color: mat.get-theme-color($theme, background, 'card');
 
   // TODO: these structural styles don't belong in the `color` part of a theme.
   // We should figure out a better place for them.
@@ -42,7 +42,7 @@
     position: relative;
 
     &::after {
-      background-color: mat.private-get-theme-color($theme, primary);
+      background-color: mat.get-theme-color($theme, primary);
       bottom: 0;
       content: '';
       height: 2px;
@@ -78,7 +78,7 @@
   .mat-edit-pane {
     @include mat.private-theme-elevation(2, $theme);
     background: $background-color;
-    color: mat.private-get-theme-color($theme, foreground, text);
+    color: mat.get-theme-color($theme, foreground, text);
     display: block;
     padding: 16px 24px;
 
@@ -144,8 +144,8 @@
 
 @mixin typography($theme) {
   [mat-edit-title] {
-    font: mat.private-get-theme-typography($theme, headline-6, font);
-    letter-spacing: mat.private-get-theme-typography($theme, headline-6, letter-spacing);
+    font: mat.get-theme-typography($theme, headline-6, font);
+    letter-spacing: mat.get-theme-typography($theme, headline-6, letter-spacing);
   }
 }
 
@@ -154,13 +154,13 @@
 
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mat-popover-edit') {
-    @if mat.private-theme-has($theme, color) {
+    @if mat.theme-has($theme, color) {
       @include color($theme);
     }
-    @if mat.private-theme-has($theme, density) {
+    @if mat.theme-has($theme, density) {
       @include density($theme);
     }
-    @if mat.private-theme-has($theme, typography) {
+    @if mat.theme-has($theme, typography) {
       @include typography($theme);
     }
   }

package/theming/_custom-tokens.scss

@@ -11,7 +11,7 @@
   $result: ();
   @each $prop in (font, line-height, size, tracking, weight) {
     $result: map.set($result, #{$base-name}-#{$prop},
-        map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
+      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
   }
   @return $result;
 }
@@ -25,7 +25,49 @@
       _generate-typography-tokens($systems, title-text, title-large),
       _generate-typography-tokens($systems, subtitle-text, title-medium),
       (
-        subtitle-text-color: map.get($systems, md-ref-color, on-surface)
+        subtitle-text-color: map.get($systems, md-sys-color, on-surface)
       )
   );
 }
+
+/// Generates custom tokens for the mat-toolbar.
+/// @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-toolbar
+@function toolbar($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+      _generate-typography-tokens($systems, title-text, title-large),
+      (
+        container-background-color: map.get($systems, md-sys-color, surface),
+        container-text-color: map.get($systems, md-sys-color, on-surface),
+      )
+  );
+}
+
+/// Generates custom tokens for the mat-slider.
+/// @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-slider
+@function slider($systems, $exclude-hardcoded) {
+  @return (
+    value-indicator-opacity: 1,
+  );
+}
+
+/// 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
+/// @return {Map} A set of custom tokens for the mat-snack-bar
+@function snack-bar($systems, $exclude-hardcoded) {
+  @return (
+    button-color: map.get($systems, md-sys-color, inverse-primary),
+  );
+}
+
+@function radio($systems, $exclude-hardcoded) {
+  @return (
+    ripple-color: map.get($systems, md-sys-color, on-surface),
+    checked-ripple-color: map.get($systems, md-sys-color, primary),
+    disabled-label-color: map.get($systems, md-sys-color, on-surface),
+  );
+}

package/theming/_m3-density.scss

@@ -15,12 +15,25 @@
 /// )
 // TODO(mmalerba): Add density tokens for remaining components.
 $_density-tokens: (
+  // MDC tokens
     (mdc, checkbox): (
     state-layer-size: (40px, 36px, 32px, 28px),
   ),
     (mdc, elevated-card): (),
     (mdc, outlined-card): (),
+    (mdc, slider): (),
+    (mdc, plain-tooltip): (),
+    (mdc, radio): (
+    state-layer-size: (40px, 36px, 32px, 28px),
+  ),
+  // Custom Angular Material tokens
     (mat, card): (),
+    (mat, toolbar): (
+    standard-height: (64px, 60px, 56px, 52px),
+    mobile-height: (56px, 52px, 48px, 44px),
+  ),
+    (mat, slider): (),
+    (mat, radio): (),
 );
 
 /// Gets the value for the given density scale from the given set of density values.

package/theming/_m3-tokens.scss

@@ -188,6 +188,31 @@
           mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
           $token-slots
       ),
+      _namespace-tokens(
+            (mdc, slider),
+          mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
+          $token-slots
+      ),
+      _namespace-tokens(
+            (mdc, snackbar),
+          mdc-tokens.md-comp-snackbar-values($systems, $exclude-hardcoded),
+          $token-slots,
+      ),
+      _namespace-tokens(
+            (mdc, plain-tooltip),
+          mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
+          $token-slots
+      ),
+      _namespace-tokens(
+            (mdc, circular-progress),
+          mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
+          $token-slots
+      ),
+      _namespace-tokens(
+            (mdc, radio),
+          mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
+          $token-slots
+      ),
       // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
       // values.
       _namespace-tokens(
@@ -195,6 +220,26 @@
           custom-tokens.card($systems, $exclude-hardcoded),
           $token-slots
       ),
+      _namespace-tokens(
+            (mat, toolbar),
+          custom-tokens.toolbar($systems, $exclude-hardcoded),
+          $token-slots,
+      ),
+      _namespace-tokens(
+            (mat, slider),
+          custom-tokens.slider($systems, $exclude-hardcoded),
+          $token-slots
+      ),
+      _namespace-tokens(
+            (mat, snack-bar),
+          custom-tokens.snack-bar($systems, $exclude-hardcoded),
+          $token-slots
+      ),
+      _namespace-tokens(
+            (mat, radio),
+          custom-tokens.radio($systems, $exclude-hardcoded),
+          $token-slots
+      ),
   );
 
   // Strip out tokens that are systemized by our made up density system.