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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "17.0.0-next.5",
+  "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.5",
+    "@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.5"
+    "@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

@@ -63,3 +63,11 @@
     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,19 +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): (),
-    (mat, card): (),
     (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

@@ -203,6 +203,16 @@
           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(
@@ -225,6 +235,11 @@
           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.