@angular/material 16.0.0-next.3 → 16.0.0-next.5

package/progress-bar/_progress-bar-theme.scss

@@ -1,46 +1,39 @@
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
-@use '@material/theme/theme-color' as mdc-theme-color;
+@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
 @use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
-@use 'sass:color';
-@use 'sass:meta';
+@use 'sass:map';
 
-
-@mixin _palette-styles($color) {
-  $color-value: mdc-theme-color.prop-value($color);
+@mixin _palette-styles($config, $palette-name) {
+  $palette-config: map.merge($config, (primary: map.get($config, $palette-name)));
+  $color-tokens: tokens-mdc-linear-progress.get-color-tokens($palette-config);
 
   // We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
   // variable since MDC's buffer animation works by constructing an SVG string from this color.
+  // We also can't set the `track-color` by creating our own token slot because the track-color
+  // is set in the SVG string in `theme-styles`.
   @include mdc-linear-progress-theme.theme-styles((
     // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
     // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
     // and doesn't match the Material design spec. For now we approximate the buffer background by
     // applying an opacity to the color of the bar.
-    track-color: if(
-      meta.type-of($color-value) == color,
-      color.adjust($color-value, $alpha: -0.75),
-      $color-value
-    ),
+    track-color: map.get($color-tokens, track-color),
   ));
 
-  @include mdc-linear-progress-theme.theme((
-    active-indicator-color: $color-value,
-  ));
+  @include mdc-linear-progress-theme.theme($color-tokens);
 }
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-progress-bar {
-      @include _palette-styles(primary);
 
-      &.mat-accent {
-        @include _palette-styles(secondary);
-      }
+  .mat-mdc-progress-bar {
+    @include _palette-styles($config, primary);
+
+    &.mat-accent {
+      @include _palette-styles($config, accent);
+    }
 
-      &.mat-warn {
-        @include _palette-styles(error);
-      }
+    &.mat-warn {
+      @include _palette-styles($config, warn);
     }
   }
 }

package/progress-bar/index.d.ts

@@ -81,7 +81,7 @@ export declare class MatProgressBar extends _MatProgressBarBase implements After
     /** Event handler for `transitionend` events. */
     private _transitionendHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatProgressBar, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatProgressBar, "mat-progress-bar", ["matProgressBar"], { "color": "color"; "value": "value"; "bufferValue": "bufferValue"; "mode": "mode"; }, { "animationEnd": "animationEnd"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatProgressBar, "mat-progress-bar", ["matProgressBar"], { "color": { "alias": "color"; "required": false; }; "value": { "alias": "value"; "required": false; }; "bufferValue": { "alias": "bufferValue"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "animationEnd": "animationEnd"; }, never, never, false, never>;
 }
 
 /** @docs-private */

package/progress-spinner/index.d.ts

@@ -63,7 +63,7 @@ export declare class MatProgressSpinner extends _MatProgressSpinnerBase implemen
     /** Stroke width of the circle in percent. */
     _circleStrokeWidth(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatProgressSpinner, [null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatProgressSpinner, "mat-progress-spinner, mat-spinner", ["matProgressSpinner"], { "color": "color"; "mode": "mode"; "value": "value"; "diameter": "diameter"; "strokeWidth": "strokeWidth"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatProgressSpinner, "mat-progress-spinner, mat-spinner", ["matProgressSpinner"], { "color": { "alias": "color"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "value": { "alias": "value"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare const _MatProgressSpinnerBase: _Constructor<CanColor> & _AbstractConstructor<CanColor> & {

package/radio/_radio-theme.scss

@@ -3,31 +3,44 @@
 @use '@material/form-field' as mdc-form-field;
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
-@use './radio-private';
+@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
+@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
 @use 'sass:map';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
 
   @include mdc-helpers.using-mdc-theme($config) {
     .mat-mdc-radio-button {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
+    }
+  }
 
-      &.mat-primary {
-        @include radio-private.private-radio-color($config, $primary);
-      }
+  .mat-mdc-radio-button {
+    &.mat-primary {
+      $primary-config: map.merge($config, (accent: $primary));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($primary-config));
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-color-tokens($primary-config));
+    }
 
-      &.mat-accent {
-        @include radio-private.private-radio-color($config, $accent);
-      }
+    &.mat-accent {
+      $accent-config: map.merge($config, (accent: $accent));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($accent-config));
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-color-tokens($accent-config));
+    }
 
-      &.mat-warn {
-        @include radio-private.private-radio-color($config, $warn);
-      }
+    &.mat-warn {
+      $warn-config: map.merge($config, (accent: $warn));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($warn-config));
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-color-tokens($warn-config));
     }
   }
 }
@@ -35,16 +48,19 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    @include mdc-radio.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+
+  .mat-mdc-radio-button {
+    @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($config));
+    @include mdc-helpers.using-mdc-typography($config) {
+      @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+    }
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-radio-button .mdc-radio {
-    @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);
+    @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($density-scale));
   }
 
   @include mdc-helpers.if-touch-targets-unsupported($density-scale) {

package/radio/index.d.ts

@@ -58,7 +58,7 @@ export declare const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any;
 export declare class MatRadioButton extends _MatRadioButtonBase {
     constructor(radioGroup: MatRadioGroup, elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor, _radioDispatcher: UniqueSelectionDispatcher, animationMode?: string, _providerOverride?: MatRadioDefaultOptions, tabIndex?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRadioButton, [{ optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatRadioButton, "mat-radio-button", ["matRadioButton"], { "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatRadioButton, "mat-radio-button", ["matRadioButton"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 
 /** @docs-private */
@@ -160,7 +160,7 @@ export declare abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBa
     /** Gets the tabindex for the underlying input element. */
     private _updateTabIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatRadioButtonBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatRadioButtonBase, never, never, { "id": "id"; "name": "name"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "checked": "checked"; "value": "value"; "labelPosition": "labelPosition"; "disabled": "disabled"; "required": "required"; "color": "color"; }, { "change": "change"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatRadioButtonBase, never, never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "change": "change"; }, never, never, false, never>;
 }
 
 declare const _MatRadioButtonMixinBase: _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & typeof MatRadioButtonBase;
@@ -296,7 +296,7 @@ export declare abstract class _MatRadioGroupBase<T extends _MatRadioButtonBase>
      */
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatRadioGroupBase<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatRadioGroupBase<any>, never, never, { "color": "color"; "name": "name"; "labelPosition": "labelPosition"; "value": "value"; "selected": "selected"; "disabled": "disabled"; "required": "required"; }, { "change": "change"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatRadioGroupBase<any>, never, never, { "color": { "alias": "color"; "required": false; }; "name": { "alias": "name"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "change": "change"; }, never, never, false, never>;
 }
 
 export declare class MatRadioModule {

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ const package_config_1 = require("./package-config");
  * Note that the fallback version range does not use caret, but tilde because that is
  * the default for Angular framework dependencies in CLI projects.
  */
-const fallbackMaterialVersionRange = `~16.0.0-next.3`;
+const fallbackMaterialVersionRange = `~16.0.0-next.5`;
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/material`.

package/schematics/ng-add/index.mjs

@@ -18,7 +18,7 @@ const package_config_1 = require("./package-config");
  * Note that the fallback version range does not use caret, but tilde because that is
  * the default for Angular framework dependencies in CLI projects.
  */
-const fallbackMaterialVersionRange = `~16.0.0-next.3`;
+const fallbackMaterialVersionRange = `~16.0.0-next.5`;
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/material`.