@angular/material 20.0.0-next.0 → 20.0.0-next.2

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -12,7 +12,7 @@
     @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-bottom-sheet.$prefix,
         tokens-mat-bottom-sheet.get-unthemable-tokens()
       );
@@ -25,7 +25,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-bottom-sheet.$prefix,
         tokens-mat-bottom-sheet.get-color-tokens($theme)
       );
@@ -38,7 +38,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-bottom-sheet.$prefix,
         tokens-mat-bottom-sheet.get-typography-tokens($theme)
       );

package/bottom-sheet/index.d.ts

@@ -1,85 +1,56 @@
-import { CdkDialogContainer } from '@angular/cdk/dialog';
-import { ComponentRef } from '@angular/core';
-import { ComponentType } from '@angular/cdk/portal';
-import { DialogRef } from '@angular/cdk/dialog';
-import { Direction } from '@angular/cdk/bidi';
-import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
+import { OnDestroy, EventEmitter, InjectionToken, ViewContainerRef, ComponentRef, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/cdk/dialog';
-import * as i2 from '@angular/material/core';
+import { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
+import { M as MatCommonModule } from '../common-module.d-0e6515ae.js';
 import * as i3 from '@angular/cdk/portal';
-import { InjectionToken } from '@angular/core';
-import { Observable } from 'rxjs';
-import { OnDestroy } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { Direction } from '@angular/cdk/bidi';
 import { ScrollStrategy } from '@angular/cdk/overlay';
-import { TemplateRef } from '@angular/core';
-import { ViewContainerRef } from '@angular/core';
-
-/** Options for where to set focus to automatically on dialog open */
-export declare type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
-
-declare namespace i4 {
-    export {
-        MatBottomSheetContainer
-    }
-}
-
-/** Injection token that can be used to access the data that was passed in to a bottom sheet. */
-export declare const MAT_BOTTOM_SHEET_DATA: InjectionToken<any>;
-
-/** Injection token that can be used to specify default bottom sheet options. */
-export declare const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS: InjectionToken<MatBottomSheetConfig<any>>;
+import { Observable } from 'rxjs';
 
 /**
- * Service to trigger Material Design bottom sheets.
+ * Internal component that wraps user-provided bottom sheet content.
+ * @docs-private
  */
-export declare class MatBottomSheet implements OnDestroy {
-    private _overlay;
-    private _parentBottomSheet;
-    private _defaultOptions;
-    private _bottomSheetRefAtThisLevel;
-    private _dialog;
-    /** Reference to the currently opened bottom sheet. */
-    get _openedBottomSheetRef(): MatBottomSheetRef<any> | null;
-    set _openedBottomSheetRef(value: MatBottomSheetRef<any> | null);
+declare class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
+    private _breakpointSubscription;
+    protected _animationsDisabled: boolean;
+    /** The state of the bottom sheet animations. */
+    _animationState: 'void' | 'visible' | 'hidden';
+    /** Emits whenever the state of the animation changes. */
+    _animationStateChanged: EventEmitter<{
+        toState: "visible" | "hidden";
+        phase: "start" | "done";
+    }>;
+    /** Whether the component has been destroyed. */
+    private _destroyed;
     constructor(...args: unknown[]);
-    /**
-     * Opens a bottom sheet containing the given component.
-     * @param component Type of the component to load into the bottom sheet.
-     * @param config Extra configuration options.
-     * @returns Reference to the newly-opened bottom sheet.
-     */
-    open<T, D = any, R = any>(component: ComponentType<T>, config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T, R>;
-    /**
-     * Opens a bottom sheet containing the given template.
-     * @param template TemplateRef to instantiate as the bottom sheet content.
-     * @param config Extra configuration options.
-     * @returns Reference to the newly-opened bottom sheet.
-     */
-    open<T, D = any, R = any>(template: TemplateRef<T>, config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T, R>;
-    /**
-     * Dismisses the currently-visible bottom sheet.
-     * @param result Data to pass to the bottom sheet instance.
-     */
-    dismiss<R = any>(result?: R): void;
+    /** Begin animation of bottom sheet entrance into view. */
+    enter(): void;
+    /** Begin animation of the bottom sheet exiting from view. */
+    exit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheet, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MatBottomSheet>;
+    private _simulateAnimation;
+    protected _handleAnimationEvent(isStart: boolean, animationName: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
 }
 
-/**
- * Animations used by the Material bottom sheet.
- * @deprecated No longer used. Will be removed.
- * @breaking-change 21.0.0
- */
-export declare const matBottomSheetAnimations: {
-    readonly bottomSheetState: any;
-};
+declare class MatBottomSheetModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBottomSheetModule, never, [typeof i1.DialogModule, typeof MatCommonModule, typeof i3.PortalModule, typeof MatBottomSheetContainer], [typeof MatBottomSheetContainer, typeof MatCommonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatBottomSheetModule>;
+}
 
+/** Options for where to set focus to automatically on dialog open */
+type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
+/** Injection token that can be used to access the data that was passed in to a bottom sheet. */
+declare const MAT_BOTTOM_SHEET_DATA: InjectionToken<any>;
 /**
  * Configuration used when opening a bottom sheet.
  */
-export declare class MatBottomSheetConfig<D = any> {
+declare class MatBottomSheetConfig<D = any> {
     /** The view container to place the overlay for the bottom sheet into. */
     viewContainerRef?: ViewContainerRef;
     /** Extra CSS classes to be added to the bottom sheet container. */
@@ -129,44 +100,10 @@ export declare class MatBottomSheetConfig<D = any> {
     maxHeight?: number | string;
 }
 
-/**
- * Internal component that wraps user-provided bottom sheet content.
- * @docs-private
- */
-export declare class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
-    private _breakpointSubscription;
-    protected _animationsDisabled: boolean;
-    /** The state of the bottom sheet animations. */
-    _animationState: 'void' | 'visible' | 'hidden';
-    /** Emits whenever the state of the animation changes. */
-    _animationStateChanged: EventEmitter<{
-        toState: "visible" | "hidden";
-        phase: "start" | "done";
-    }>;
-    /** Whether the component has been destroyed. */
-    private _destroyed;
-    constructor(...args: unknown[]);
-    /** Begin animation of bottom sheet entrance into view. */
-    enter(): void;
-    /** Begin animation of the bottom sheet exiting from view. */
-    exit(): void;
-    ngOnDestroy(): void;
-    private _simulateAnimation;
-    protected _handleAnimationEvent(isStart: boolean, animationName: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
-}
-
-export declare class MatBottomSheetModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBottomSheetModule, never, [typeof i1.DialogModule, typeof i2.MatCommonModule, typeof i3.PortalModule, typeof i4.MatBottomSheetContainer], [typeof i4.MatBottomSheetContainer, typeof i2.MatCommonModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MatBottomSheetModule>;
-}
-
 /**
  * Reference to a bottom sheet dispatched from the bottom sheet service.
  */
-export declare class MatBottomSheetRef<T = any, R = any> {
+declare class MatBottomSheetRef<T = any, R = any> {
     private _ref;
     /** Instance of the component making up the content of the bottom sheet. */
     get instance(): T;
@@ -208,4 +145,52 @@ export declare class MatBottomSheetRef<T = any, R = any> {
     keydownEvents(): Observable<KeyboardEvent>;
 }
 
-export { }
+/** Injection token that can be used to specify default bottom sheet options. */
+declare const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS: InjectionToken<MatBottomSheetConfig<any>>;
+/**
+ * Service to trigger Material Design bottom sheets.
+ */
+declare class MatBottomSheet implements OnDestroy {
+    private _overlay;
+    private _parentBottomSheet;
+    private _defaultOptions;
+    private _bottomSheetRefAtThisLevel;
+    private _dialog;
+    /** Reference to the currently opened bottom sheet. */
+    get _openedBottomSheetRef(): MatBottomSheetRef<any> | null;
+    set _openedBottomSheetRef(value: MatBottomSheetRef<any> | null);
+    constructor(...args: unknown[]);
+    /**
+     * Opens a bottom sheet containing the given component.
+     * @param component Type of the component to load into the bottom sheet.
+     * @param config Extra configuration options.
+     * @returns Reference to the newly-opened bottom sheet.
+     */
+    open<T, D = any, R = any>(component: ComponentType<T>, config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T, R>;
+    /**
+     * Opens a bottom sheet containing the given template.
+     * @param template TemplateRef to instantiate as the bottom sheet content.
+     * @param config Extra configuration options.
+     * @returns Reference to the newly-opened bottom sheet.
+     */
+    open<T, D = any, R = any>(template: TemplateRef<T>, config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T, R>;
+    /**
+     * Dismisses the currently-visible bottom sheet.
+     * @param result Data to pass to the bottom sheet instance.
+     */
+    dismiss<R = any>(result?: R): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheet, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MatBottomSheet>;
+}
+
+/**
+ * Animations used by the Material bottom sheet.
+ * @deprecated No longer used. Will be removed.
+ * @breaking-change 21.0.0
+ */
+declare const matBottomSheetAnimations: {
+    readonly bottomSheetState: any;
+};
+
+export { type AutoFocusTarget, MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet, MatBottomSheetConfig, MatBottomSheetContainer, MatBottomSheetModule, MatBottomSheetRef, matBottomSheetAnimations };

package/bottom-sheet/testing/index.d.ts

@@ -1,12 +1,10 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ContentContainerComponentHarness } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
+import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
 
-export declare interface BottomSheetHarnessFilters extends BaseHarnessFilters {
+interface BottomSheetHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Harness for interacting with a standard MatBottomSheet in tests. */
-export declare class MatBottomSheetHarness extends ContentContainerComponentHarness<string> {
+declare class MatBottomSheetHarness extends ContentContainerComponentHarness<string> {
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a bottom sheet with
@@ -24,4 +22,4 @@ export declare class MatBottomSheetHarness extends ContentContainerComponentHarn
     dismiss(): Promise<void>;
 }
 
-export { }
+export { type BottomSheetHarnessFilters, MatBottomSheetHarness };

package/button/_button-theme.scss

@@ -11,6 +11,7 @@
 @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
+@use '../core/tokens/m2/mat/tonal-button' as tokens-mat-tonal-button;
 @use '../core/style/sass-utils';
 
 @mixin _text-button-variant($theme, $palette) {
@@ -26,8 +27,8 @@
     tokens-mat-text-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-text-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, $mat-tokens);
 }
 
 @mixin _filled-button-variant($theme, $palette) {
@@ -43,8 +44,8 @@
     tokens-mat-filled-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-filled-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-filled-button.$prefix, $mat-tokens);
 }
 
 @mixin _protected-button-variant($theme, $palette) {
@@ -60,8 +61,8 @@
     tokens-mat-protected-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-protected-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-protected-button.$prefix, $mat-tokens);
 }
 
 @mixin _outlined-button-variant($theme, $palette) {
@@ -77,10 +78,19 @@
     tokens-mat-outlined-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
+@mixin _tonal-button-variant($theme, $palette) {
+  @include token-utils.create-token-values-mixed(tokens-mat-tonal-button.$prefix, if(
+    $palette,
+    tokens-mat-tonal-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-tonal-button.get-color-tokens($theme)
+  ));
+}
+
+
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
@@ -125,6 +135,11 @@
     tokens-mat-outlined-button.$prefix,
     $options...
   );
+  $mat-tonal-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-tonal-button.$prefix,
+    $options...
+  );
 
   @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
   @include token-utils.create-token-values(
@@ -152,6 +167,10 @@
     tokens-mat-outlined-button.$prefix,
     $mat-outlined-button-tokens
   );
+  @include token-utils.create-token-values(
+    tokens-mat-tonal-button.$prefix,
+    $mat-tonal-button-tokens
+  );
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -162,39 +181,43 @@
     @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-text-button.$prefix,
         tokens-mdc-text-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-unthemable-tokens()
       );
 
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-filled-button.$prefix,
         tokens-mat-filled-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-protected-button.$prefix,
         tokens-mat-protected-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-outlined-button.$prefix,
         tokens-mat-outlined-button.get-unthemable-tokens()
       );
+      @include token-utils.create-token-values-mixed(
+        tokens-mat-tonal-button.$prefix,
+        tokens-mat-tonal-button.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -211,6 +234,7 @@
     @include sass-utils.current-selector-or-root() {
       @include _text-button-variant($theme, null);
       @include _filled-button-variant($theme, null);
+      @include _tonal-button-variant($theme, null);
       @include _protected-button-variant($theme, null);
       @include _outlined-button-variant($theme, null);
     }
@@ -270,6 +294,20 @@
         @include _outlined-button-variant($theme, warn);
       }
     }
+
+    .mat-tonal-button {
+      &.mat-primary {
+        @include _tonal-button-variant($theme, primary);
+      }
+
+      &.mat-accent {
+        @include _tonal-button-variant($theme, accent);
+      }
+
+      &.mat-warn {
+        @include _tonal-button-variant($theme, warn);
+      }
+    }
   }
 }
 
@@ -280,39 +318,43 @@
     @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-text-button.$prefix,
         tokens-mdc-text-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-typography-tokens($theme)
       );
 
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-filled-button.$prefix,
         tokens-mat-filled-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-protected-button.$prefix,
         tokens-mat-protected-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-outlined-button.$prefix,
         tokens-mat-outlined-button.get-typography-tokens($theme)
       );
+      @include token-utils.create-token-values-mixed(
+        tokens-mat-tonal-button.$prefix,
+        tokens-mat-tonal-button.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -324,39 +366,43 @@
     @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-text-button.$prefix,
         tokens-mdc-text-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-density-tokens($theme)
       );
 
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-filled-button.$prefix,
         tokens-mat-filled-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-protected-button.$prefix,
         tokens-mat-protected-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-outlined-button.$prefix,
         tokens-mat-outlined-button.get-density-tokens($theme)
       );
+      @include token-utils.create-token-values-mixed(
+        tokens-mat-tonal-button.$prefix,
+        tokens-mat-tonal-button.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -371,6 +417,7 @@
   $mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots();
   $mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots();
   $mat-text-button-tokens: tokens-mat-text-button.get-token-slots();
+  $mat-tonal-button-tokens: tokens-mat-tonal-button.get-token-slots();
 
   @return (
     (
@@ -413,6 +460,11 @@
       tokens: $mat-text-button-tokens,
       prefix: 'text-',
     ),
+    (
+      namespace: tokens-mat-tonal-button.$prefix,
+      tokens: $mat-tonal-button-tokens,
+      prefix: 'tonal-',
+    ),
   );
 }
 

package/button/_fab-theme.scss

@@ -18,15 +18,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-fab.$prefix,
         tokens-mdc-fab.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-fab-small.$prefix,
         tokens-mdc-fab-small.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-extended-fab.$prefix,
         tokens-mdc-extended-fab.get-unthemable-tokens()
       );
@@ -47,8 +47,8 @@
     tokens-mat-fab.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-fab.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-fab.$prefix, $mat-tokens);
 }
 
 @mixin _fab-small-variant($theme, $palette) {
@@ -64,8 +64,8 @@
     tokens-mat-fab-small.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-fab-small.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-fab-small.$prefix, $mat-tokens);
 }
 
 /// Outputs color theme styles for the mat-fab.
@@ -80,7 +80,7 @@
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
       @include _fab-small-variant($theme, null);
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-extended-fab.$prefix,
         tokens-mdc-extended-fab.get-color-tokens($theme)
       );
@@ -123,15 +123,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-extended-fab.$prefix,
         tokens-mdc-extended-fab.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-fab.$prefix,
         tokens-mat-fab.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-fab-small.$prefix,
         tokens-mat-fab-small.get-typography-tokens($theme)
       );
@@ -146,11 +146,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-fab.$prefix,
         tokens-mat-fab.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-fab-small.$prefix,
         tokens-mat-fab-small.get-density-tokens($theme)
       );