@angular/material 20.0.0-next.1 → 20.0.0-next.3

package/button-toggle/_button-toggle-theme.scss

@@ -15,11 +15,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-legacy-button-toggle.$prefix,
         tokens-mat-legacy-button-toggle.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-standard-button-toggle.$prefix,
         tokens-mat-standard-button-toggle.get-unthemable-tokens()
       );
@@ -37,11 +37,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-legacy-button-toggle.$prefix,
         tokens-mat-legacy-button-toggle.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-standard-button-toggle.$prefix,
         tokens-mat-standard-button-toggle.get-color-tokens($theme)
       );
@@ -56,11 +56,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-legacy-button-toggle.$prefix,
         tokens-mat-legacy-button-toggle.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-standard-button-toggle.$prefix,
         tokens-mat-standard-button-toggle.get-typography-tokens($theme)
       );
@@ -75,11 +75,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-legacy-button-toggle.$prefix,
         tokens-mat-legacy-button-toggle.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-standard-button-toggle.$prefix,
         tokens-mat-standard-button-toggle.get-density-tokens($theme)
       );

package/button-toggle/index.d.ts

@@ -1,11 +1,11 @@
-import { M as MatButtonToggleGroup, a as MatButtonToggle } from '../button-toggle.d-edc8acff.js';
-export { d as MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, f as MAT_BUTTON_TOGGLE_GROUP, e as MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, g as MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, a as MatButtonToggle, b as MatButtonToggleAppearance, h as MatButtonToggleChange, c as MatButtonToggleDefaultOptions, M as MatButtonToggleGroup, T as ToggleType } from '../button-toggle.d-edc8acff.js';
+import { M as MatButtonToggleGroup, a as MatButtonToggle } from '../button-toggle.d-e3ddc80f.js';
+export { d as MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, f as MAT_BUTTON_TOGGLE_GROUP, e as MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, g as MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, a as MatButtonToggle, b as MatButtonToggleAppearance, h as MatButtonToggleChange, c as MatButtonToggleDefaultOptions, M as MatButtonToggleGroup, T as ToggleType } from '../button-toggle.d-e3ddc80f.js';
 import * as i0 from '@angular/core';
 import { M as MatCommonModule } from '../common-module.d-0e6515ae.js';
-import { M as MatRippleModule } from '../index.d-0536b706.js';
+import { M as MatRippleModule } from '../index.d-cc6e48d4.js';
 import '@angular/cdk/bidi';
 import '@angular/forms';
-import '../ripple.d-2fb57d04.js';
+import '../ripple.d-f2cd74cf.js';
 import '@angular/cdk/platform';
 
 declare class MatButtonToggleModule {

package/button-toggle/testing/index.d.ts

@@ -1,5 +1,5 @@
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { b as MatButtonToggleAppearance } from '../../button-toggle.d-edc8acff.js';
+import { b as MatButtonToggleAppearance } from '../../button-toggle.d-e3ddc80f.js';
 import '@angular/cdk/bidi';
 import '@angular/core';
 import '@angular/forms';

package/{button-toggle.d-edc8acff.d.ts → button-toggle.d-e3ddc80f.d.ts}

@@ -182,7 +182,7 @@ declare class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     private _elementRef;
     private _focusMonitor;
     private _idGenerator;
-    private _animationMode;
+    private _animationDisabled;
     private _checked;
     /**
      * Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will

package/card/_card-theme.scss

@@ -14,15 +14,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-elevated-card.$prefix,
         tokens-mdc-elevated-card.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-unthemable-tokens()
       );
@@ -35,15 +35,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-elevated-card.$prefix,
         tokens-mdc-elevated-card.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-color-tokens($theme)
       );
@@ -56,15 +56,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-elevated-card.$prefix,
         tokens-mdc-elevated-card.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-typography-tokens($theme)
       );
@@ -77,15 +77,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-elevated-card.$prefix,
         tokens-mdc-elevated-card.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-density-tokens($theme)
       );

package/checkbox/_checkbox-theme.scss

@@ -15,11 +15,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-checkbox.$prefix,
         tokens-mdc-checkbox.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-unthemable-tokens()
       );
@@ -37,11 +37,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-checkbox.$prefix,
         tokens-mdc-checkbox.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-color-tokens($theme)
       );
@@ -49,14 +49,14 @@
 
     .mat-mdc-checkbox {
       &.mat-primary {
-        @include token-utils.create-token-values(
+        @include token-utils.create-token-values-mixed(
           tokens-mdc-checkbox.$prefix,
           tokens-mdc-checkbox.get-color-tokens($theme, primary)
         );
       }
 
       &.mat-warn {
-        @include token-utils.create-token-values(
+        @include token-utils.create-token-values-mixed(
           tokens-mdc-checkbox.$prefix,
           tokens-mdc-checkbox.get-color-tokens($theme, warn)
         );
@@ -72,11 +72,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-checkbox.$prefix,
         tokens-mdc-checkbox.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-typography-tokens($theme)
       );
@@ -93,11 +93,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-checkbox.$prefix,
         tokens-mdc-checkbox.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-density-tokens($theme)
       );

package/checkbox/index.d.ts

@@ -31,7 +31,7 @@ declare class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAcces
     _elementRef: ElementRef<HTMLElement>;
     private _changeDetectorRef;
     private _ngZone;
-    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
+    private _animationsDisabled;
     private _options;
     /** Focuses the checkbox. */
     focus(): void;

package/chips/_chips-theme.scss

@@ -15,11 +15,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-chip.$prefix,
         tokens-mdc-chip.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-chip.$prefix,
         tokens-mat-chip.get-unthemable-tokens()
       );
@@ -37,11 +37,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-chip.$prefix,
         tokens-mdc-chip.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-chip.$prefix,
         tokens-mat-chip.get-color-tokens($theme)
       );
@@ -49,33 +49,33 @@
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mdc-chip.$prefix,
             tokens-mdc-chip.get-color-tokens($theme, primary)
           );
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mat-chip.$prefix,
             tokens-mat-chip.get-color-tokens($theme, primary)
           );
         }
 
         &.mat-accent {
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mdc-chip.$prefix,
             tokens-mdc-chip.get-color-tokens($theme, accent)
           );
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mat-chip.$prefix,
             tokens-mat-chip.get-color-tokens($theme, accent)
           );
         }
 
         &.mat-warn {
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mdc-chip.$prefix,
             tokens-mdc-chip.get-color-tokens($theme, warn)
           );
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mat-chip.$prefix,
             tokens-mat-chip.get-color-tokens($theme, warn)
           );
@@ -92,11 +92,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-chip.$prefix,
         tokens-mdc-chip.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-chip.$prefix,
         tokens-mat-chip.get-typography-tokens($theme)
       );
@@ -111,11 +111,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     .mat-mdc-chip.mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-chip.$prefix,
         tokens-mdc-chip.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-chip.$prefix,
         tokens-mat-chip.get-density-tokens($theme)
       );

package/chips/index.d.ts

@@ -6,9 +6,9 @@ import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { E as ErrorStateMatcher } from '../error-options.d-448d9046.js';
 import { M as MatFormFieldControl } from '../form-field-control.d-eb86711c.js';
 import { M as MatCommonModule } from '../common-module.d-0e6515ae.js';
-import { M as MatRippleModule } from '../index.d-0536b706.js';
+import { M as MatRippleModule } from '../index.d-cc6e48d4.js';
 import '@angular/cdk/bidi';
-import '../ripple.d-2fb57d04.js';
+import '../ripple.d-f2cd74cf.js';
 import '@angular/cdk/platform';
 
 /**
@@ -837,6 +837,10 @@ declare class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    /** Whether the input is readonly. */
+    readonly: boolean;
+    /** Whether the input should remain interactive when it is disabled. */
+    disabledInteractive: boolean;
     /** Whether the input is empty. */
     get empty(): boolean;
     /** The native input element to which this directive is attached. */
@@ -859,10 +863,14 @@ declare class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     setDescribedByIds(ids: string[]): void;
     /** Checks whether a keycode is one of the configured separators. */
     private _isSeparatorKey;
+    /** Gets the value to set on the `readonly` attribute. */
+    protected _getReadonlyAttribute(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabledInteractive": { "alias": "matChipInputDisabledInteractive"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, true, never>;
     static ngAcceptInputType_addOnBlur: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_disabledInteractive: unknown;
 }
 
 declare class MatChipsModule {
@@ -877,6 +885,8 @@ interface MatChipsDefaultOptions {
     separatorKeyCodes: readonly number[] | ReadonlySet<number>;
     /** Whether icon indicators should be hidden for single-selection. */
     hideSingleSelectionIndicator?: boolean;
+    /** Whether the chip input should be interactive while disabled by default. */
+    inputDisabledInteractive?: boolean;
 }
 /** Injection token to be used to override the default options for the chips module. */
 declare const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken<MatChipsDefaultOptions>;

package/core/_core-theme.scss

@@ -24,7 +24,7 @@
     @include optgroup-theme.base($theme);
     @include pseudo-checkbox-theme.base($theme);
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-app.$prefix,
         tokens-mat-app.get-unthemable-tokens()
       );
@@ -41,7 +41,7 @@
     @include optgroup-theme.color($theme);
     @include pseudo-checkbox-theme.color($theme);
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-app.$prefix,
         tokens-mat-app.get-color-tokens($theme)
       );

package/core/index.d.ts

@@ -7,15 +7,15 @@ import { Subject } from 'rxjs';
 import { E as ErrorStateMatcher$1 } from '../error-options.d-448d9046.js';
 export { E as ErrorStateMatcher, S as ShowOnDirtyErrorStateMatcher } from '../error-options.d-448d9046.js';
 export { M as MatLine, a as MatLineModule, s as setLines } from '../line.d-570a2537.js';
-export { M as MatOptionModule } from '../index.d-37e31cd3.js';
-export { M as MatRippleLoader } from '../ripple-loader.d-8aac2988.js';
-export { M as MatRippleModule } from '../index.d-0536b706.js';
-export { b as MatPseudoCheckbox, M as MatPseudoCheckboxModule, a as MatPseudoCheckboxState } from '../pseudo-checkbox-module.d-3abc0461.js';
+export { M as MatOptionModule } from '../index.d-d77f0821.js';
+export { M as MatRippleLoader } from '../ripple-loader.d-e5ac6c14.js';
+export { M as MatRippleModule } from '../index.d-cc6e48d4.js';
+export { b as MatPseudoCheckbox, M as MatPseudoCheckboxModule, a as MatPseudoCheckboxState } from '../pseudo-checkbox-module.d-d21de92b.js';
 import { D as DateAdapter } from '../date-adapter.d-c6835d41.js';
 export { D as DateAdapter, M as MAT_DATE_LOCALE, a as MAT_DATE_LOCALE_FACTORY } from '../date-adapter.d-c6835d41.js';
 export { d as MAT_OPTGROUP, a as MatOptgroup, M as MatOption, b as MatOptionSelectionChange, _ as _countGroupLabelsBeforeOption, c as _getOptionScrollPosition } from '../option.d-6f493d78.js';
 export { a as MAT_OPTION_PARENT_COMPONENT, M as MatOptionParentComponent } from '../option-parent.d-559ad5c5.js';
-export { c as MAT_RIPPLE_GLOBAL_OPTIONS, M as MatRipple, g as RippleAnimationConfig, f as RippleConfig, b as RippleGlobalOptions, h as RippleRef, R as RippleRenderer, e as RippleState, a as RippleTarget, d as defaultRippleAnimationConfig } from '../ripple.d-2fb57d04.js';
+export { c as MAT_RIPPLE_GLOBAL_OPTIONS, M as MatRipple, g as RippleAnimationConfig, f as RippleConfig, b as RippleGlobalOptions, h as RippleRef, R as RippleRenderer, e as RippleState, a as RippleTarget, d as defaultRippleAnimationConfig } from '../ripple.d-f2cd74cf.js';
 import '@angular/cdk/bidi';
 import '@angular/cdk/a11y';
 import '@angular/cdk/platform';
@@ -44,6 +44,11 @@ declare class AnimationDurations {
     static ENTERING: string;
     static EXITING: string;
 }
+/**
+ * Returns whether animations have been disabled by DI. Must be called in a DI context.
+ * @docs-private
+ */
+declare function _animationsDisabled(): boolean;
 
 interface ErrorStateMatcher extends ErrorStateMatcher$1 {
 }
@@ -191,4 +196,4 @@ declare class _MatInternalFormField {
     static ɵcmp: i0.ɵɵComponentDeclaration<_MatInternalFormField, "div[mat-internal-form-field]", never, { "labelPosition": { "alias": "labelPosition"; "required": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { AnimationCurves, AnimationDurations, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, type MatDateFormats, MatNativeDateModule, NativeDateAdapter, NativeDateModule, VERSION, _ErrorStateTracker, _MatInternalFormField, _StructuralStylesLoader, provideNativeDateAdapter };
+export { AnimationCurves, AnimationDurations, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, type MatDateFormats, MatNativeDateModule, NativeDateAdapter, NativeDateModule, VERSION, _ErrorStateTracker, _MatInternalFormField, _StructuralStylesLoader, _animationsDisabled, provideNativeDateAdapter };

package/core/option/_optgroup-theme.scss

@@ -19,7 +19,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-optgroup.$prefix,
         tokens-mat-optgroup.get-color-tokens($theme)
       );
@@ -32,7 +32,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-optgroup.$prefix,
         tokens-mat-optgroup.get-typography-tokens($theme)
       );

package/core/option/_option-theme.scss

@@ -26,21 +26,21 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme)
       );
     }
 
     .mat-accent {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme, accent)
       );
     }
 
     .mat-warn {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme, warn)
       );
@@ -55,7 +55,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-typography-tokens($theme)
       );

package/core/ripple/_ripple-theme.scss

@@ -18,7 +18,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-color-tokens($theme)
       );
@@ -31,7 +31,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-typography-tokens($theme)
       );
@@ -44,7 +44,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-density-tokens($theme)
       );

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -8,11 +8,11 @@
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(
+    @include token-utils.create-token-values-mixed(
       tokens-mat-full-pseudo-checkbox.$prefix,
       tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
     );
-    @include token-utils.create-token-values(
+    @include token-utils.create-token-values-mixed(
       tokens-mat-minimal-pseudo-checkbox.$prefix,
       tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
     );
@@ -33,11 +33,11 @@
     tokens-mat-minimal-pseudo-checkbox.$prefix,
     $options...
   );
-  @include token-utils.create-token-values(
+  @include token-utils.create-token-values-mixed(
     tokens-mat-full-pseudo-checkbox.$prefix,
     $mat-full-pseudo-checkbox-tokens
   );
-  @include token-utils.create-token-values(
+  @include token-utils.create-token-values-mixed(
     tokens-mat-minimal-pseudo-checkbox.$prefix,
     $mat-minimal-pseudo-checkbox-tokens
   );

package/core/theming/_color-api-backwards-compatibility.scss

@@ -23,7 +23,7 @@
 // from the bundle.
 $_overrides-only: true;
 
-@mixin color-variant-styles($theme, $color-variant) {
+@mixin _color-variant-styles($theme, $color-variant) {
   $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only);
 
   // Some components use the secondary color rather than primary color for `.mat-primary`.
@@ -33,10 +33,21 @@ $_overrides-only: true;
     emit-overrides-only: $_overrides-only
   );
 
-  @include option-theme.color($theme, $secondary-options...);
-  @include progress-spinner-theme.color($theme, $primary-options...);
-  @include pseudo-checkbox-theme.color($theme, $primary-options...);
-  @include stepper-theme.color($theme, $primary-options...);
+  & {
+    @include option-theme.color($theme, $secondary-options...);
+  }
+
+  & {
+    @include progress-spinner-theme.color($theme, $primary-options...);
+  }
+
+  & {
+    @include pseudo-checkbox-theme.color($theme, $primary-options...);
+  }
+
+  & {
+    @include stepper-theme.color($theme, $primary-options...);
+  }
 
   &.mat-icon {
     @include icon-theme.color($theme, $primary-options...);
@@ -105,7 +116,7 @@ $_overrides-only: true;
 
 @mixin color-variants-backwards-compatibility($theme) {
   .mat-primary {
-    @include color-variant-styles($theme, primary);
+    @include _color-variant-styles($theme, primary);
   }
   .mat-badge {
     @include badge-theme.color($theme, $color-variant: primary,
@@ -113,7 +124,7 @@ $_overrides-only: true;
   }
 
   .mat-accent {
-    @include color-variant-styles($theme, tertiary);
+    @include _color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
     @include badge-theme.color($theme, $color-variant: tertiary,
@@ -121,7 +132,7 @@ $_overrides-only: true;
   }
 
   .mat-warn {
-    @include color-variant-styles($theme, error);
+    @include _color-variant-styles($theme, error);
   }
   .mat-badge-warn {
     @include badge-theme.color($theme, $color-variant: error,

package/core/tokens/_density.scss

@@ -38,6 +38,9 @@ $_density-tokens: (
   (mdc, filled-button): (
     container-height: (40px, 36px, 32px, 28px),
   ),
+  (mat, tonal-button): (
+    container-height: (40px, 36px, 32px, 28px),
+  ),
   (mdc, outlined-button): (
     container-height: (40px, 36px, 32px, 28px),
   ),

package/core/tokens/_token-definition.scss

@@ -173,8 +173,7 @@ $_system-fallbacks: null;
     @if(meta.type-of($color) == 'color') {
       $result: map.remove($result, $opacity-key);
       $result: map.set($result, $color-key, rgba($color, $opacity));
-    }
-    @else if($color != null) {
+    } @else if($color != null) {
       $result: map.remove($result, $opacity-key);
       $combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
       $result: map.set($result, $color-key, $combined-color);