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

package/button/_m3-fab.scss

@@ -0,0 +1,187 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
+@use '../core/style/elevation';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, fab);
+
+/// Generates custom tokens for the mat-fab.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-fab
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-color: map.get($systems, md-sys-color, primary-container),
+    container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    container-shape: map.get($systems, md-sys-shape, corner-large),
+    disabled-state-container-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    disabled-state-foreground-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    extended-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    extended-container-height: if($exclude-hardcoded, null, 56px),
+    extended-container-shape: map.get($systems, md-sys-shape, corner-large),
+    extended-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    extended-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+    extended-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+    extended-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+    extended-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+    extended-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+    extended-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    foreground-color: map.get($systems, md-sys-color, on-primary-container),
+    hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-primary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+    small-container-color: map.get($systems, md-sys-color, primary-container),
+    small-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    small-container-shape: map.get($systems, md-sys-shape, corner-medium),
+    small-disabled-state-container-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    small-disabled-state-foreground-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    small-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    small-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    small-foreground-color: map.get($systems, md-sys-color, on-primary-container),
+    small-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+    small-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    small-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    small-pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    small-ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-primary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+    small-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+  );
+
+  $elevation-tokens: (
+    extended-container-elevation-shadow,
+    extended-focus-container-elevation-shadow,
+    extended-hover-container-elevation-shadow,
+    extended-pressed-container-elevation-shadow,
+    small-container-elevation-shadow,
+    small-focus-container-elevation-shadow,
+    small-hover-container-elevation-shadow,
+    small-pressed-container-elevation-shadow,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
+    }
+  }
+
+  $variant-tokens: (
+    // Color variants
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      container-color: map.get($systems, md-sys-color, secondary-container),
+      container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      container-shape: map.get($systems, md-sys-shape, corner-large),
+      extended-container-height: if($exclude-hardcoded, null, 56px),
+      extended-container-shape: map.get($systems, md-sys-shape, corner-large),
+      extended-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+      extended-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+      extended-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+      extended-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+      focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
+      hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      small-container-color: map.get($systems, md-sys-color, secondary-container),
+      small-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      small-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      small-foreground-color: map.get($systems, md-sys-color, on-secondary-container),
+      small-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+      small-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      small-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-pressed-state-layer-opacity:
+          map.get($systems, md-sys-state, pressed-state-layer-opacity),
+      small-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      small-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+    ),
+    tertiary: (
+      container-color: map.get($systems, md-sys-color, tertiary-container),
+      container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      container-shape: map.get($systems, md-sys-shape, corner-large),
+      extended-container-height: if($exclude-hardcoded, null, 56px),
+      extended-container-shape: map.get($systems, md-sys-shape, corner-large),
+      extended-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+      extended-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+      extended-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+      extended-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+      focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
+      hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      small-container-color: map.get($systems, md-sys-color, tertiary-container),
+      small-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      small-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      small-foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
+      small-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+      small-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      small-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      small-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+    )
+  );
+
+  $elevation-tokens: (
+    container-elevation-shadow,
+    focus-container-elevation-shadow,
+    hover-container-elevation-shadow,
+    pressed-container-elevation-shadow,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
+    }
+  }
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    touch-target-display: list.nth((block, block, none, none), $index),
+  );
+}

package/{core/tokens/m3/mat/_icon-button.scss → button/_m3-icon-button.scss}

@@ -1,6 +1,9 @@
 @use 'sass:map';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@use 'sass:list';
+@use '../core/tokens/m3-utils';
+@use '../core/style/sass-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, icon-button);
@@ -11,23 +14,30 @@ $prefix: (mat, icon-button);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-icon-button
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: ((
+  $tokens: (
     state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     ripple-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface-variant),
+        map.get($systems, md-sys-color, on-surface-variant),
       $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
     ),
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
     pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  ), (
+    disabled-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    icon-size: if($exclude-hardcoded, null, 24px),
+    icon-color: map.get($systems, md-sys-color, on-surface-variant),
+  );
+
+  $variant-tokens: (
     primary: (
       state-layer-color: map.get($systems, md-sys-color, primary),
       ripple-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, primary),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
       ),
+      icon-color: map.get($systems, md-sys-color, primary)
     ),
     secondary: (
       state-layer-color: map.get($systems, md-sys-color, secondary),
@@ -35,6 +45,7 @@ $prefix: (mat, icon-button);
         map.get($systems, md-sys-color, secondary),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
       ),
+      icon-color: map.get($systems, md-sys-color, secondary)
     ),
     tertiary: (
       state-layer-color: map.get($systems, md-sys-color, tertiary),
@@ -42,6 +53,7 @@ $prefix: (mat, icon-button);
         map.get($systems, md-sys-color, tertiary),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
       ),
+      icon-color: map.get($systems, md-sys-color, tertiary)
     ),
     error: (
       state-layer-color: map.get($systems, md-sys-color, error),
@@ -49,8 +61,21 @@ $prefix: (mat, icon-button);
         map.get($systems, md-sys-color, error),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
       ),
+      icon-color: map.get($systems, md-sys-color, error)
     )
-  ));
+  );
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
+  $index: ($scale * -1) + 1;
 
-  @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
+  @return (
+    touch-target-display: list.nth((block, block, none, none, none, none), $index),
+    // The size caps out at 24px, because anything lower will be smaller than the icon.
+    state-layer-size: list.nth((40px, 36px, 32px, 28px, 24px, 24px), $index),
+  );
 }

package/button/index.d.ts

@@ -1,82 +1,36 @@
-import { AfterViewInit } from '@angular/core';
-import { ElementRef } from '@angular/core';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i1 from '@angular/material/core';
-import { InjectionToken } from '@angular/core';
-import { MatRippleLoader } from '@angular/material/core';
-import { NgZone } from '@angular/core';
-import { OnDestroy } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
-
-declare namespace i2 {
-    export {
-        MatButton,
-        MatAnchor
-    }
-}
-
-declare namespace i3 {
-    export {
-        MAT_FAB_DEFAULT_OPTIONS_FACTORY,
-        MatFabDefaultOptions,
-        MAT_FAB_DEFAULT_OPTIONS,
-        MatFabButton,
-        MatMiniFabButton,
-        MatFabAnchor,
-        MatMiniFabAnchor
-    }
-}
-
-declare namespace i4 {
-    export {
-        MatIconButton,
-        MatIconAnchor
-    }
-}
-
-/** Injection token that can be used to provide the default options the button component. */
-export declare const MAT_BUTTON_CONFIG: InjectionToken<MatButtonConfig>;
-
-/** Injection token to be used to override the default options for FAB. */
-export declare const MAT_FAB_DEFAULT_OPTIONS: InjectionToken<MatFabDefaultOptions>;
-
-/** @docs-private */
-export declare function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions;
-
-/**
- * Material Design button component for anchor elements. Anchor elements are used to provide
- * links for the user to navigate across different routes or pages.
- * See https://material.io/components/buttons
- *
- * The `MatAnchor` class applies to native anchor elements and captures the appearances for
- * "text button", "outlined button", and "contained button" per the Material Design
- * specification. `MatAnchor` additionally captures an additional "flat" appearance, which matches
- * "contained" but without elevation.
- */
-export declare const MatAnchor: typeof MatButton;
-
-export declare type MatAnchor = MatButton;
+import { InjectionToken, AfterViewInit, OnDestroy, ElementRef, NgZone } from '@angular/core';
+import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
+import { M as MatRippleLoader } from '../ripple-loader.d-9me-KFSi.js';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import { M as MatRippleModule } from '../index.d-C5neTPvr.js';
+import '@angular/cdk/bidi';
+import '../ripple.d-BT30YVLB.js';
+import '@angular/cdk/platform';
 
 /**
- * Material Design button component. Users interact with a button to perform an action.
- * See https://material.io/components/buttons
- *
- * The `MatButton` class applies to native button elements and captures the appearances for
- * "text button", "outlined button", and "contained button" per the Material Design
- * specification. `MatButton` additionally captures an additional "flat" appearance, which matches
- * "contained" but without elevation.
+ * Possible appearances for a `MatButton`.
+ * See https://m3.material.io/components/buttons/overview
  */
-export declare class MatButton extends MatButtonBase {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button],    a[mat-stroked-button]  ", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
+type MatButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';
+/** Object that can be used to configure the default options for the button component. */
+interface MatButtonConfig {
+    /** Whether disabled buttons should be interactive. */
+    disabledInteractive?: boolean;
+    /** Default palette color to apply to buttons. */
+    color?: ThemePalette;
+    /** Default appearance for plain buttons (not icon buttons or FABs). */
+    defaultAppearance?: MatButtonAppearance;
 }
-
-/** Base class for all buttons.  */
+/** Injection token that can be used to provide the default options the button component. */
+declare const MAT_BUTTON_CONFIG: InjectionToken<MatButtonConfig>;
+/** Base class for all buttons. */
 declare class MatButtonBase implements AfterViewInit, OnDestroy {
-    _elementRef: ElementRef<any>;
-    _ngZone: NgZone;
-    _animationMode: "NoopAnimations" | "BrowserAnimations" | null;
+    _elementRef: ElementRef<HTMLElement>;
+    protected _ngZone: NgZone;
+    protected _animationsDisabled: boolean;
+    protected readonly _config: MatButtonConfig | null;
     private readonly _focusMonitor;
     private _cleanupClick;
     private _renderer;
@@ -110,7 +64,9 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
     /**
      * Natively disabled buttons prevent focus and any pointer events from reaching the button.
      * In some scenarios this might not be desirable, because it can prevent users from finding out
-     * why the button is disabled (e.g. via tooltip).
+     * why the button is disabled (e.g. via tooltip). This is also useful for buttons that may
+     * become disabled when activated, which would cause focus to be transferred to the document
+     * body instead of remaining on the button.
      *
      * Enabling this input will change the button so that it is styled to be disabled and will be
      * marked as `aria-disabled`, but it will allow the button to receive events and focus.
@@ -146,100 +102,116 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
     static ngAcceptInputType__tabindex: unknown;
 }
 
-/** Object that can be used to configure the default options for the button component. */
-export declare interface MatButtonConfig {
-    /** Whether disabled buttons should be interactive. */
-    disabledInteractive?: boolean;
-    /** Default palette color to apply to buttons. */
-    color?: ThemePalette;
+/**
+ * Material Design button component. Users interact with a button to perform an action.
+ * See https://m3.material.io/components/buttons/overview
+ */
+declare class MatButton extends MatButtonBase {
+    /** Appearance of the button. */
+    get appearance(): MatButtonAppearance | null;
+    set appearance(value: MatButtonAppearance | '');
+    private _appearance;
+    constructor(...args: unknown[]);
+    /** Programmatically sets the appearance of the button. */
+    setAppearance(appearance: MatButtonAppearance): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", ["matButton", "matAnchor"], { "appearance": { "alias": "matButton"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
 }
+/**
+ * Material Design button component for anchor elements. Anchor elements are used to provide
+ * links for the user to navigate across different routes or pages.
+ * See https://m3.material.io/components/buttons/overview
+ */
+declare const MatAnchor: typeof MatButton;
+type MatAnchor = MatButton;
 
-export declare class MatButtonModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonModule, never, [typeof i1.MatCommonModule, typeof i1.MatRippleModule, typeof i2.MatButton, typeof i3.MatMiniFabButton, typeof i4.MatIconButton, typeof i3.MatFabButton], [typeof i1.MatCommonModule, typeof i2.MatButton, typeof i3.MatMiniFabButton, typeof i4.MatIconButton, typeof i3.MatFabButton]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MatButtonModule>;
+/** Default FAB options that can be overridden. */
+interface MatFabDefaultOptions {
+    /**
+     * Default theme color of the button. This API is supported in M2 themes
+     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
+     */
+    color?: ThemePalette;
 }
-
+/** Injection token to be used to override the default options for FAB. */
+declare const MAT_FAB_DEFAULT_OPTIONS: InjectionToken<MatFabDefaultOptions>;
 /**
- * Material Design floating action button (FAB) component for anchor elements. Anchor elements
- * are used to provide links for the user to navigate across different routes or pages.
- * See https://material.io/components/buttons-floating-action-button/
- *
- * The `MatFabAnchor` class has two appearances: normal and extended.
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
-export declare const MatFabAnchor: typeof MatFabButton;
-
-export declare type MatFabAnchor = MatFabButton;
-
+declare function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions;
 /**
  * Material Design floating action button (FAB) component. These buttons represent the primary
  * or most common action for users to interact with.
- * See https://material.io/components/buttons-floating-action-button/
+ * See https://m3.material.io/components/floating-action-button/overview
  *
  * The `MatFabButton` class has two appearances: normal and extended.
  */
-export declare class MatFabButton extends MatButtonBase {
+declare class MatFabButton extends MatButtonBase {
     private _options;
     _isFab: boolean;
     extended: boolean;
     constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFabButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab], a[mat-fab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
     static ngAcceptInputType_extended: unknown;
 }
-
-/** Default FAB options that can be overridden. */
-export declare interface MatFabDefaultOptions {
-    /**
-     * Default theme color of the button. This API is supported in M2 themes
-     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
-     *
-     * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
-     */
-    color?: ThemePalette;
+/**
+ * Material Design mini floating action button (FAB) component. These buttons represent the primary
+ * or most common action for users to interact with.
+ * See https://m3.material.io/components/floating-action-button/overview
+ */
+declare class MatMiniFabButton extends MatButtonBase {
+    private _options;
+    _isFab: boolean;
+    constructor(...args: unknown[]);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
 }
-
 /**
- * Material Design icon button component for anchor elements. This button displays a single
- * interaction icon that allows users to navigate across different routes or pages.
- * See https://material.io/develop/web/components/buttons/icon-buttons/
+ * Material Design floating action button (FAB) component for anchor elements. Anchor elements
+ * are used to provide links for the user to navigate across different routes or pages.
+ * See https://m3.material.io/components/floating-action-button/overview
+ *
+ * The `MatFabAnchor` class has two appearances: normal and extended.
  */
-export declare const MatIconAnchor: typeof MatIconButton;
-
-export declare type MatIconAnchor = MatIconButton;
+declare const MatFabAnchor: typeof MatFabButton;
+type MatFabAnchor = MatFabButton;
+/**
+ * Material Design mini floating action button (FAB) component for anchor elements. Anchor elements
+ * are used to provide links for the user to navigate across different routes or pages.
+ * See https://m3.material.io/components/floating-action-button/overview
+ */
+declare const MatMiniFabAnchor: typeof MatMiniFabButton;
+type MatMiniFabAnchor = MatMiniFabButton;
 
 /**
  * Material Design icon button component. This type of button displays a single interactive icon for
  * users to perform an action.
  * See https://material.io/develop/web/components/buttons/icon-buttons/
  */
-export declare class MatIconButton extends MatButtonBase {
+declare class MatIconButton extends MatButtonBase {
     constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button], a[mat-icon-button]", ["matButton", "matAnchor"], {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", ["matButton", "matAnchor"], {}, {}, never, ["*"], true, never>;
 }
-
 /**
- * Material Design mini floating action button (FAB) component for anchor elements. Anchor elements
- * are used to provide links for the user to navigate across different routes or pages.
- * See https://material.io/components/buttons-floating-action-button/
+ * Material Design icon button component for anchor elements. This button displays a single
+ * interaction icon that allows users to navigate across different routes or pages.
+ * See https://material.io/develop/web/components/buttons/icon-buttons/
  */
-export declare const MatMiniFabAnchor: typeof MatMiniFabButton;
+declare const MatIconAnchor: typeof MatIconButton;
+type MatIconAnchor = MatIconButton;
 
-export declare type MatMiniFabAnchor = MatMiniFabButton;
-
-/**
- * Material Design mini floating action button (FAB) component. These buttons represent the primary
- * or most common action for users to interact with.
- * See https://material.io/components/buttons-floating-action-button/
- */
-export declare class MatMiniFabButton extends MatButtonBase {
-    private _options;
-    _isFab: boolean;
-    constructor(...args: unknown[]);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab], a[mat-mini-fab]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], true, never>;
+declare class MatButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatButton, typeof MatMiniFabButton, typeof MatIconButton, typeof MatFabButton], [typeof MatCommonModule, typeof MatButton, typeof MatMiniFabButton, typeof MatIconButton, typeof MatFabButton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatButtonModule>;
 }
 
-export { }
+export { MAT_BUTTON_CONFIG, MAT_FAB_DEFAULT_OPTIONS, MAT_FAB_DEFAULT_OPTIONS_FACTORY, MatAnchor, MatButton, MatButtonModule, MatFabAnchor, MatFabButton, MatIconAnchor, MatIconButton, MatMiniFabAnchor, MatMiniFabButton };
+export type { MatButtonAppearance, MatButtonConfig, MatFabDefaultOptions };

package/button/testing/index.d.ts

@@ -1,23 +1,23 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { ContentContainerComponentHarness } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
+import { BaseHarnessFilters, ContentContainerComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
 
+/** Possible button variants. */
+type ButtonVariant = 'basic' | 'icon' | 'fab' | 'mini-fab';
+/** Possible button appearances. */
+type ButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';
 /** A set of criteria that can be used to filter a list of button harness instances. */
-export declare interface ButtonHarnessFilters extends BaseHarnessFilters {
+interface ButtonHarnessFilters extends BaseHarnessFilters {
     /** Only find instances whose text matches the given value. */
     text?: string | RegExp;
     /** Only find instances with a variant. */
     variant?: ButtonVariant;
+    /** Only find instances with a specific appearance. */
+    appearance?: ButtonAppearance;
     /** Only find instances which match the given disabled state. */
     disabled?: boolean;
 }
 
-/** Possible button appearances. */
-export declare type ButtonVariant = 'basic' | 'raised' | 'flat' | 'icon' | 'stroked' | 'fab' | 'mini-fab';
-
 /** Harness for interacting with a mat-button in tests. */
-export declare class MatButtonHarness extends ContentContainerComponentHarness {
+declare class MatButtonHarness extends ContentContainerComponentHarness {
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes.
@@ -25,6 +25,7 @@ export declare class MatButtonHarness extends ContentContainerComponentHarness {
      *   - `selector` finds a button whose host element matches the given selector.
      *   - `text` finds a button with specific text content.
      *   - `variant` finds buttons matching a specific variant.
+     *   - `appearance` finds buttons matching a specific appearance.
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatButtonHarness>(this: ComponentHarnessConstructor<T>, options?: ButtonHarnessFilters): HarnessPredicate<T>;
@@ -50,6 +51,9 @@ export declare class MatButtonHarness extends ContentContainerComponentHarness {
     isFocused(): Promise<boolean>;
     /** Gets the variant of the button. */
     getVariant(): Promise<ButtonVariant>;
+    /** Gets the appearance of the button. */
+    getAppearance(): Promise<ButtonAppearance | null>;
 }
 
-export { }
+export { MatButtonHarness };
+export type { ButtonAppearance, ButtonHarnessFilters, ButtonVariant };