@angular/material 20.0.0-next.6 → 20.0.0-next.7

package/autocomplete/_autocomplete-theme.scss

@@ -48,7 +48,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(

package/autocomplete/index.d.ts

@@ -1,20 +1,19 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, EventEmitter, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
+import { AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, EventEmitter, InjectionToken, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
-import { M as MatOptionModule } from '../index.d-73f24bb1.js';
-import { M as MatCommonModule } from '../common-module.d-421e3498.js';
-import { T as ThemePalette } from '../palette.d-1d8ebc0d.js';
-import { M as MatOption, a as MatOptgroup, b as MatOptionSelectionChange } from '../option.d-4fb11594.js';
-export { a as MatOptgroup, M as MatOption } from '../option.d-4fb11594.js';
+import { MatOptionModule } from '../index.d-osnm7rw7.js';
+import { MatCommonModule } from '../common-module.d-CUT8AqiB.js';
+import { ThemePalette } from '../palette.d-fF1us9u8.js';
+import { MatOption, MatOptgroup, MatOptionSelectionChange } from '../option.d-ef4idHSb.js';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable } from 'rxjs';
 import * as i5 from '@angular/cdk/scrolling';
-import '../index.d-511f9e6c.js';
-import '../ripple.d-305c30f3.js';
+import '../index.d-_XdEyDn3.js';
+import '../ripple.d-DBFnJ3Aa.js';
 import '@angular/cdk/platform';
-import '../pseudo-checkbox-module.d-42351ab6.js';
+import '../pseudo-checkbox-module.d-czRCRd5m.js';
 import '@angular/cdk/bidi';
 
 /** Event object that is emitted when an autocomplete option is selected. */
@@ -438,5 +437,5 @@ declare class MatAutocompleteModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatAutocompleteModule>;
 }
 
-export { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocomplete, MatAutocompleteModule, MatAutocompleteOrigin, MatAutocompleteSelectedEvent, MatAutocompleteTrigger, getMatAutocompleteMissingPanelError };
+export { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocomplete, MatAutocompleteModule, MatAutocompleteOrigin, MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatOptgroup, MatOption, getMatAutocompleteMissingPanelError };
 export type { MatAutocompleteActivatedEvent, MatAutocompleteDefaultOptions };

package/autocomplete/testing/index.d.ts

@@ -1,6 +1,6 @@
 import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
-import { O as OptionHarnessFilters, M as MatOptionHarness } from '../../option-harness.d-4f143bc0.js';
-import { O as OptgroupHarnessFilters, M as MatOptgroupHarness } from '../../optgroup-harness.d-c52f5a8b.js';
+import { OptionHarnessFilters, MatOptionHarness } from '../../option-harness.d-BpYClwei.js';
+import { OptgroupHarnessFilters, MatOptgroupHarness } from '../../core/testing/index.js';
 
 /** A set of criteria that can be used to filter a list of `MatAutocompleteHarness` instances. */
 interface AutocompleteHarnessFilters extends BaseHarnessFilters {

package/badge/_badge-theme.scss

@@ -74,7 +74,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }

package/badge/index.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
-import { M as MatCommonModule } from '../common-module.d-421e3498.js';
-import { M as MatBadge, _ as _MatBadgeStyleLoader } from '../badge.d-619691fb.js';
-export { M as MatBadge, a as MatBadgePosition, b as MatBadgeSize } from '../badge.d-619691fb.js';
+import { MatCommonModule } from '../common-module.d-CUT8AqiB.js';
+import { MatBadge, _MatBadgeStyleLoader } from '../badge.d-BUeRGv1E.js';
+export { MatBadgePosition, MatBadgeSize } from '../badge.d-BUeRGv1E.js';
 import '@angular/cdk/bidi';
-import '../palette.d-1d8ebc0d.js';
+import '../palette.d-fF1us9u8.js';
 
 declare class MatBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadgeModule, never>;
@@ -12,4 +12,4 @@ declare class MatBadgeModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatBadgeModule>;
 }
 
-export { MatBadgeModule };
+export { MatBadge, MatBadgeModule };

package/badge/testing/index.d.ts

@@ -1,7 +1,7 @@
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { a as MatBadgePosition, b as MatBadgeSize } from '../../badge.d-619691fb.js';
+import { MatBadgePosition, MatBadgeSize } from '../../badge.d-BUeRGv1E.js';
 import '@angular/core';
-import '../../palette.d-1d8ebc0d.js';
+import '../../palette.d-fF1us9u8.js';
 
 interface BadgeHarnessFilters extends BaseHarnessFilters {
     text?: string | RegExp;

package/{badge.d-619691fb.d.ts → badge.d-BUeRGv1E.d.ts}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { OnInit, OnDestroy } from '@angular/core';
-import { T as ThemePalette } from './palette.d-1d8ebc0d.js';
+import { ThemePalette } from './palette.d-fF1us9u8.js';
 
 /** Allowed position options for matBadgePosition */
 type MatBadgePosition = 'above after' | 'above before' | 'below before' | 'below after' | 'before' | 'after' | 'above' | 'below';
@@ -95,5 +95,5 @@ declare class MatBadge implements OnInit, OnDestroy {
     static ngAcceptInputType_hidden: unknown;
 }
 
-export { MatBadge as M, _MatBadgeStyleLoader as _ };
-export type { MatBadgePosition as a, MatBadgeSize as b };
+export { MatBadge, _MatBadgeStyleLoader };
+export type { MatBadgePosition, MatBadgeSize };

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

@@ -48,7 +48,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }

package/bottom-sheet/index.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, EventEmitter, InjectionToken, ViewContainerRef, ComponentRef, TemplateRef } from '@angular/core';
+import { OnDestroy, EventEmitter, ViewContainerRef, InjectionToken, ComponentRef, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/cdk/dialog';
 import { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
-import { M as MatCommonModule } from '../common-module.d-421e3498.js';
+import { MatCommonModule } from '../common-module.d-CUT8AqiB.js';
 import * as i3 from '@angular/cdk/portal';
 import { ComponentType } from '@angular/cdk/portal';
 import { Direction } from '@angular/cdk/bidi';
@@ -32,6 +32,7 @@ declare class MatBottomSheetContainer extends CdkDialogContainer implements OnDe
     exit(): void;
     ngOnDestroy(): void;
     private _simulateAnimation;
+    protected _trapFocus(): void;
     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>;

package/button/_button-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-button';
+@use './m3-button';
 
 @mixin _button-variant($theme, $palette) {
   $mat-tokens: if(
@@ -91,7 +92,8 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-button.$prefix, m3-button.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -127,6 +129,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/button/_fab-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use './m2-fab';
+@use './m3-fab';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
@@ -80,7 +81,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(m3-fab.$prefix, m3-fab.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -116,6 +117,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/button/_icon-button-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use './m2-icon-button';
+@use './m3-icon-button';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
@@ -74,7 +75,8 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-icon-button.$prefix, m3-icon-button.get-density-tokens($theme));
   } @else {
     $icon-size: 24px;
     $density-scale: inspection.get-theme-density($theme);
@@ -137,6 +139,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/button/_m3-button.scss

@@ -1,7 +1,10 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/style/sass-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, button);
@@ -14,7 +17,6 @@ $prefix: (mat, button);
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     filled-container-color: map.get($systems, md-sys-color, primary),
-    filled-container-height: if($exclude-hardcoded, null, 40px),
     filled-container-shape: map.get($systems, md-sys-shape, corner-full),
     filled-disabled-container-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
@@ -37,7 +39,6 @@ $prefix: (mat, button);
         map.get($systems, md-sys-color, on-primary),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)    ),
     filled-state-layer-color: map.get($systems, md-sys-color, on-primary),
-    outlined-container-height: if($exclude-hardcoded, null, 40px),
     outlined-container-shape: map.get($systems, md-sys-shape, corner-full),
     outlined-disabled-label-text-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
@@ -64,7 +65,6 @@ $prefix: (mat, button);
     outlined-state-layer-color: map.get($systems, md-sys-color, primary),
     protected-container-color: map.get($systems, md-sys-color, surface),
     protected-container-elevation-shadow: map.get($systems, md-sys-elevation, level1),
-    protected-container-height: if($exclude-hardcoded, null, 40px),
     protected-container-shape: map.get($systems, md-sys-shape, corner-full),
     protected-disabled-container-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
@@ -91,7 +91,6 @@ $prefix: (mat, button);
         map.get($systems, md-sys-color, primary),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
     protected-state-layer-color: map.get($systems, md-sys-color, primary),
-    text-container-height: if($exclude-hardcoded, null, 40px),
     text-container-shape: map.get($systems, md-sys-shape, corner-full),
     text-disabled-label-text-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
@@ -113,7 +112,6 @@ $prefix: (mat, button);
     text-state-layer-color: map.get($systems, md-sys-color, primary),
     text-with-icon-horizontal-padding: m3-utils.hardcode(16px, $exclude-hardcoded),
     tonal-container-color: map.get($systems, md-sys-color, secondary-container),
-    tonal-container-height: if($exclude-hardcoded, null, 40px),
     tonal-container-shape: map.get($systems, md-sys-shape, corner-full),
     tonal-disabled-container-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
@@ -241,3 +239,22 @@ $prefix: (mat, button);
 
   @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 (
+    filled-touch-target-display: list.nth((block, block, none, none), $index),
+    filled-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    outlined-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    outlined-touch-target-display: list.nth((block, block, none, none), $index),
+    protected-touch-target-display: list.nth((block, block, none, none), $index),
+    protected-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    text-touch-target-display: list.nth((block, block, none, none), $index),
+    text-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    tonal-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    tonal-touch-target-display: list.nth((block, block, none, none), $index),
+  );
+}

package/button/_m3-fab.scss

@@ -1,7 +1,10 @@
 @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);
@@ -172,3 +175,13 @@ $prefix: (mat, fab);
 
   @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/button/_m3-icon-button.scss

@@ -1,6 +1,9 @@
 @use 'sass:map';
+@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);
@@ -24,7 +27,6 @@ $prefix: (mat, icon-button);
     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),
-    state-layer-size: if($exclude-hardcoded, null, 40px),
     icon-color: map.get($systems, md-sys-color, on-surface-variant),
   );
 
@@ -65,3 +67,15 @@ $prefix: (mat, icon-button);
 
   @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 (
+    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,10 +1,217 @@
-export { M as MAT_BUTTON_CONFIG, f as MAT_FAB_DEFAULT_OPTIONS, g as MAT_FAB_DEFAULT_OPTIONS_FACTORY, d as MatAnchor, c as MatButton, a as MatButtonAppearance, b as MatButtonConfig, n as MatButtonModule, j as MatFabAnchor, h as MatFabButton, e as MatFabDefaultOptions, m as MatIconAnchor, l as MatIconButton, k as MatMiniFabAnchor, i as MatMiniFabButton } from '../module.d-9a1d1c76.js';
-import '@angular/core';
-import '../common-module.d-421e3498.js';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { InjectionToken, AfterViewInit, OnDestroy, ElementRef, NgZone } from '@angular/core';
+import { ThemePalette } from '../palette.d-fF1us9u8.js';
+import { MatRippleLoader } from '../ripple-loader.d-DL-hT7NH.js';
+import { MatCommonModule } from '../common-module.d-CUT8AqiB.js';
+import { MatRippleModule } from '../index.d-_XdEyDn3.js';
 import '@angular/cdk/bidi';
-import '../index.d-511f9e6c.js';
-import '../ripple.d-305c30f3.js';
+import '../ripple.d-DBFnJ3Aa.js';
 import '@angular/cdk/platform';
-import '@angular/cdk/a11y';
-import '../palette.d-1d8ebc0d.js';
-import '../ripple-loader.d-f51e5eb6.js';
+
+/**
+ * Possible appearances for a `MatButton`.
+ * See https://m3.material.io/components/buttons/overview
+ */
+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;
+}
+/** 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<HTMLElement>;
+    protected _ngZone: NgZone;
+    protected _animationsDisabled: boolean;
+    protected readonly _config: MatButtonConfig | null;
+    private readonly _focusMonitor;
+    private _cleanupClick;
+    private _renderer;
+    /**
+     * Handles the lazy creation of the MatButton ripple.
+     * Used to improve initial load time of large applications.
+     */
+    protected _rippleLoader: MatRippleLoader;
+    /** Whether the button is set on an anchor node. */
+    protected _isAnchor: boolean;
+    /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
+    protected _isFab: boolean;
+    /**
+     * 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?: string | null;
+    /** Whether the ripple effect is disabled or not. */
+    get disableRipple(): boolean;
+    set disableRipple(value: any);
+    private _disableRipple;
+    /** Whether the button is disabled. */
+    get disabled(): boolean;
+    set disabled(value: any);
+    private _disabled;
+    /** `aria-disabled` value of the button. */
+    ariaDisabled: boolean | undefined;
+    /**
+     * 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). 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.
+     *
+     * Note that by enabling this, you need to set the `tabindex` yourself if the button isn't
+     * meant to be tabbable and you have to prevent the button action (e.g. form submissions).
+     */
+    disabledInteractive: boolean;
+    /** Tab index for the button. */
+    tabIndex: number;
+    /**
+     * Backwards-compatibility input that handles pre-existing `[tabindex]` bindings.
+     * @docs-private
+     */
+    set _tabindex(value: number);
+    constructor(...args: unknown[]);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Focuses the button. */
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
+    protected _getAriaDisabled(): boolean | null;
+    protected _getDisabledAttribute(): true | null;
+    private _updateRippleDisabled;
+    protected _getTabIndex(): number;
+    private _setupAsAnchor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "_tabindex": { "alias": "tabindex"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_disableRipple: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_ariaDisabled: unknown;
+    static ngAcceptInputType_disabledInteractive: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType__tabindex: unknown;
+}
+
+/**
+ * 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;
+
+/** 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>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+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://m3.material.io/components/floating-action-button/overview
+ *
+ * The `MatFabButton` class has two appearances: normal and extended.
+ */
+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], 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;
+}
+/**
+ * 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 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.
+ */
+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/
+ */
+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], button[matIconButton], a[matIconButton]", ["matButton", "matAnchor"], {}, {}, never, ["*"], 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/
+ */
+declare const MatIconAnchor: typeof MatIconButton;
+type MatIconAnchor = MatIconButton;
+
+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 { 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-toggle/_button-toggle-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-button-toggle';
+@use './m3-button-toggle';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-button-toggle.
@@ -59,7 +60,8 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-button-toggle.$prefix, m3-button-toggle.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -97,6 +99,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/button-toggle/_m3-button-toggle.scss

@@ -1,6 +1,9 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../core/style/sass-utils';
 @use '../core/tokens/m3-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, button-toggle);
@@ -58,3 +61,13 @@ $prefix: (mat, button-toggle);
 
   @return m3-utils.namespace($prefix, ($tokens, $color-variants), $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), -4);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    height: list.nth((40px, 40px, 40px, 36px, 24px), $index),
+  );
+}