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

package/tree/index.d.ts

@@ -1,59 +1,66 @@
-import { AfterContentInit } from '@angular/core';
-import { CdkNestedTreeNode } from '@angular/cdk/tree';
-import { CdkTree } from '@angular/cdk/tree';
-import { CdkTreeNode } from '@angular/cdk/tree';
-import { CdkTreeNodeDef } from '@angular/cdk/tree';
-import { CdkTreeNodeOutlet } from '@angular/cdk/tree';
-import { CdkTreeNodePadding } from '@angular/cdk/tree';
-import { CdkTreeNodeToggle } from '@angular/cdk/tree';
-import { CollectionViewer } from '@angular/cdk/collections';
-import { DataSource } from '@angular/cdk/collections';
-import { FlatTreeControl } from '@angular/cdk/tree';
-import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/tree';
-import * as i2 from '@angular/material/core';
+import { CdkTreeNode, CdkTreeNodeDef, CdkNestedTreeNode, CdkTreeNodePadding, CdkTreeNodeOutlet, CdkTree, CdkTreeNodeToggle, TreeControl, FlatTreeControl } from '@angular/cdk/tree';
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, AfterContentInit, ViewContainerRef } from '@angular/core';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import { DataSource, CollectionViewer } from '@angular/cdk/collections';
 import { Observable } from 'rxjs';
-import { OnDestroy } from '@angular/core';
-import { OnInit } from '@angular/core';
-import { TreeControl } from '@angular/cdk/tree';
-import { ViewContainerRef } from '@angular/core';
-
-declare namespace i3 {
-    export {
-        MatTreeNode,
-        MatTreeNodeDef,
-        MatNestedTreeNode
-    }
-}
-
-declare namespace i4 {
-    export {
-        MatTreeNodePadding
-    }
-}
-
-declare namespace i5 {
-    export {
-        MatTreeNodeToggle
-    }
-}
+import '@angular/cdk/bidi';
 
-declare namespace i6 {
-    export {
-        MatTree
-    }
+/**
+ * Wrapper for the CdkTree node with Material design styles.
+ */
+declare class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit, OnDestroy {
+    /**
+     * The tabindex of the tree node.
+     *
+     * @deprecated By default MatTreeNode manages focus using TreeKeyManager instead of tabIndex.
+     *   Recommend to avoid setting tabIndex directly to prevent TreeKeyManager form getting into
+     *   an unexpected state. Tabindex to be removed in a future version.
+     * @breaking-change 21.0.0 Remove this attribute.
+     */
+    get tabIndexInputBinding(): number;
+    set tabIndexInputBinding(value: number);
+    private _tabIndexInputBinding;
+    /**
+     * The default tabindex of the tree node.
+     *
+     * @deprecated By default MatTreeNode manages focus using TreeKeyManager instead of tabIndex.
+     *   Recommend to avoid setting tabIndex directly to prevent TreeKeyManager form getting into
+     *   an unexpected state. Tabindex to be removed in a future version.
+     * @breaking-change 21.0.0 Remove this attribute.
+     */
+    defaultTabIndex: number;
+    protected _getTabindexAttribute(): number | null;
+    /**
+     * Whether the component is disabled.
+     *
+     * @deprecated This is an alias for `isDisabled`.
+     * @breaking-change 21.0.0 Remove this input
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    constructor(...args: unknown[]);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNode<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNode<any, any>, "mat-tree-node", ["matTreeNode"], { "tabIndexInputBinding": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_tabIndexInputBinding: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
-
-declare namespace i7 {
-    export {
-        MatTreeNodeOutlet
-    }
+/**
+ * Wrapper for the CdkTree node definition with Material design styles.
+ * Captures the node's template and a when predicate that describes when this node should be used.
+ */
+declare class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
+    data: T;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNodeDef<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNodeDef<any>, "[matTreeNodeDef]", never, { "when": { "alias": "matTreeNodeDefWhen"; "required": false; }; "data": { "alias": "matTreeNode"; "required": false; }; }, {}, never, never, true, never>;
 }
-
 /**
  * Wrapper for the CdkTree nested node with Material design styles.
  */
-export declare class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implements AfterContentInit, OnDestroy, OnInit {
+declare class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implements AfterContentInit, OnDestroy, OnInit {
     node: T;
     /**
      * Whether the node is disabled.
@@ -76,37 +83,53 @@ export declare class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K>
     static ngAcceptInputType_tabIndex: unknown;
 }
 
+/**
+ * Wrapper for the CdkTree padding with Material design styles.
+ */
+declare class MatTreeNodePadding<T, K = T> extends CdkTreeNodePadding<T, K> {
+    /** The level of depth of the tree node. The padding will be `level * indent` pixels. */
+    get level(): number;
+    set level(value: number);
+    /** The indent for each level. Default number 40px from material design menu sub-menu spec. */
+    get indent(): number | string;
+    set indent(indent: number | string);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNodePadding<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNodePadding<any, any>, "[matTreeNodePadding]", never, { "level": { "alias": "matTreeNodePadding"; "required": false; }; "indent": { "alias": "matTreeNodePaddingIndent"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_level: unknown;
+}
+
+/**
+ * Outlet for nested CdkNode. Put `[matTreeNodeOutlet]` on a tag to place children dataNodes
+ * inside the outlet.
+ */
+declare class MatTreeNodeOutlet implements CdkTreeNodeOutlet {
+    viewContainer: ViewContainerRef;
+    _node: {} | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNodeOutlet, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNodeOutlet, "[matTreeNodeOutlet]", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Wrapper for the CdkTable with Material design styles.
  */
-export declare class MatTree<T, K = T> extends CdkTree<T, K> {
+declare class MatTree<T, K = T> extends CdkTree<T, K> {
     _nodeOutlet: MatTreeNodeOutlet;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTree<any, any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatTree<any, any>, "mat-tree", ["matTree"], {}, {}, never, never, true, never>;
 }
 
 /**
- * Data source for flat tree.
- * The data source need to handle expansion/collapsion of the tree node and change the data feed
- * to `MatTree`.
- * The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted
- * to type `F` for `MatTree` to consume.
- *
- * @deprecated Use one of levelAccessor or childrenAccessor instead. To be removed in a future
- * version.
- * @breaking-change 21.0.0
+ * Wrapper for the CdkTree's toggle with Material design styles.
  */
-export declare class MatTreeFlatDataSource<T, F, K = F> extends DataSource<F> {
-    private _treeControl;
-    private _treeFlattener;
-    private readonly _flattenedData;
-    private readonly _expandedData;
-    get data(): T[];
-    set data(value: T[]);
-    private readonly _data;
-    constructor(_treeControl: FlatTreeControl<F, K>, _treeFlattener: MatTreeFlattener<T, F, K>, initialData?: T[]);
-    connect(collectionViewer: CollectionViewer): Observable<F[]>;
-    disconnect(): void;
+declare class MatTreeNodeToggle<T, K = T> extends CdkTreeNodeToggle<T, K> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNodeToggle<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNodeToggle<any, any>, "[matTreeNodeToggle]", never, { "recursive": { "alias": "matTreeNodeToggleRecursive"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class MatTreeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatTreeModule, never, [typeof i1.CdkTreeModule, typeof MatCommonModule, typeof MatNestedTreeNode, typeof MatTreeNodeDef, typeof MatTreeNodePadding, typeof MatTreeNodeToggle, typeof MatTree, typeof MatTreeNode, typeof MatTreeNodeOutlet], [typeof MatCommonModule, typeof MatNestedTreeNode, typeof MatTreeNodeDef, typeof MatTreeNodePadding, typeof MatTreeNodeToggle, typeof MatTree, typeof MatTreeNode, typeof MatTreeNodeOutlet]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatTreeModule>;
 }
 
 /**
@@ -147,7 +170,7 @@ export declare class MatTreeFlatDataSource<T, F, K = F> extends DataSource<F> {
  * instead. To be removed in a future version.
  * @breaking-change 21.0.0
  */
-export declare class MatTreeFlattener<T, F, K = F> {
+declare class MatTreeFlattener<T, F, K = F> {
     transformFunction: (node: T, level: number) => F;
     getLevel: (node: F) => number;
     isExpandable: (node: F) => boolean;
@@ -167,11 +190,28 @@ export declare class MatTreeFlattener<T, F, K = F> {
      */
     expandFlattenedNodes(nodes: F[], treeControl: TreeControl<F, K>): F[];
 }
-
-export declare class MatTreeModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatTreeModule, never, [typeof i1.CdkTreeModule, typeof i2.MatCommonModule, typeof i3.MatNestedTreeNode, typeof i3.MatTreeNodeDef, typeof i4.MatTreeNodePadding, typeof i5.MatTreeNodeToggle, typeof i6.MatTree, typeof i3.MatTreeNode, typeof i7.MatTreeNodeOutlet], [typeof i2.MatCommonModule, typeof i3.MatNestedTreeNode, typeof i3.MatTreeNodeDef, typeof i4.MatTreeNodePadding, typeof i5.MatTreeNodeToggle, typeof i6.MatTree, typeof i3.MatTreeNode, typeof i7.MatTreeNodeOutlet]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MatTreeModule>;
+/**
+ * Data source for flat tree.
+ * The data source need to handle expansion/collapsion of the tree node and change the data feed
+ * to `MatTree`.
+ * The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted
+ * to type `F` for `MatTree` to consume.
+ *
+ * @deprecated Use one of levelAccessor or childrenAccessor instead. To be removed in a future
+ * version.
+ * @breaking-change 21.0.0
+ */
+declare class MatTreeFlatDataSource<T, F, K = F> extends DataSource<F> {
+    private _treeControl;
+    private _treeFlattener;
+    private readonly _flattenedData;
+    private readonly _expandedData;
+    get data(): T[];
+    set data(value: T[]);
+    private readonly _data;
+    constructor(_treeControl: FlatTreeControl<F, K>, _treeFlattener: MatTreeFlattener<T, F, K>, initialData?: T[]);
+    connect(collectionViewer: CollectionViewer): Observable<F[]>;
+    disconnect(): void;
 }
 
 /**
@@ -180,7 +220,7 @@ export declare class MatTreeModule {
  * The data source for nested tree doesn't have to consider node flattener, or the way to expand
  * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
  */
-export declare class MatTreeNestedDataSource<T> extends DataSource<T> {
+declare class MatTreeNestedDataSource<T> extends DataSource<T> {
     /**
      * Data for the nested tree
      */
@@ -191,90 +231,4 @@ export declare class MatTreeNestedDataSource<T> extends DataSource<T> {
     disconnect(): void;
 }
 
-/**
- * Wrapper for the CdkTree node with Material design styles.
- */
-export declare class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit, OnDestroy {
-    /**
-     * The tabindex of the tree node.
-     *
-     * @deprecated By default MatTreeNode manages focus using TreeKeyManager instead of tabIndex.
-     *   Recommend to avoid setting tabIndex directly to prevent TreeKeyManager form getting into
-     *   an unexpected state. Tabindex to be removed in a future version.
-     * @breaking-change 21.0.0 Remove this attribute.
-     */
-    get tabIndexInputBinding(): number;
-    set tabIndexInputBinding(value: number);
-    private _tabIndexInputBinding;
-    /**
-     * The default tabindex of the tree node.
-     *
-     * @deprecated By default MatTreeNode manages focus using TreeKeyManager instead of tabIndex.
-     *   Recommend to avoid setting tabIndex directly to prevent TreeKeyManager form getting into
-     *   an unexpected state. Tabindex to be removed in a future version.
-     * @breaking-change 21.0.0 Remove this attribute.
-     */
-    defaultTabIndex: number;
-    protected _getTabindexAttribute(): number | null;
-    /**
-     * Whether the component is disabled.
-     *
-     * @deprecated This is an alias for `isDisabled`.
-     * @breaking-change 21.0.0 Remove this input
-     */
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    constructor(...args: unknown[]);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNode<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNode<any, any>, "mat-tree-node", ["matTreeNode"], { "tabIndexInputBinding": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, true, never>;
-    static ngAcceptInputType_tabIndexInputBinding: unknown;
-    static ngAcceptInputType_disabled: unknown;
-}
-
-/**
- * Wrapper for the CdkTree node definition with Material design styles.
- * Captures the node's template and a when predicate that describes when this node should be used.
- */
-export declare class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
-    data: T;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNodeDef<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNodeDef<any>, "[matTreeNodeDef]", never, { "when": { "alias": "matTreeNodeDefWhen"; "required": false; }; "data": { "alias": "matTreeNode"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-/**
- * Outlet for nested CdkNode. Put `[matTreeNodeOutlet]` on a tag to place children dataNodes
- * inside the outlet.
- */
-export declare class MatTreeNodeOutlet implements CdkTreeNodeOutlet {
-    viewContainer: ViewContainerRef;
-    _node: {} | null;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNodeOutlet, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNodeOutlet, "[matTreeNodeOutlet]", never, {}, {}, never, never, true, never>;
-}
-
-/**
- * Wrapper for the CdkTree padding with Material design styles.
- */
-export declare class MatTreeNodePadding<T, K = T> extends CdkTreeNodePadding<T, K> {
-    /** The level of depth of the tree node. The padding will be `level * indent` pixels. */
-    get level(): number;
-    set level(value: number);
-    /** The indent for each level. Default number 40px from material design menu sub-menu spec. */
-    get indent(): number | string;
-    set indent(indent: number | string);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNodePadding<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNodePadding<any, any>, "[matTreeNodePadding]", never, { "level": { "alias": "matTreeNodePadding"; "required": false; }; "indent": { "alias": "matTreeNodePaddingIndent"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_level: unknown;
-}
-
-/**
- * Wrapper for the CdkTree's toggle with Material design styles.
- */
-export declare class MatTreeNodeToggle<T, K = T> extends CdkTreeNodeToggle<T, K> {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNodeToggle<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNodeToggle<any, any>, "[matTreeNodeToggle]", never, { "recursive": { "alias": "matTreeNodeToggleRecursive"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-export { }
+export { MatNestedTreeNode, MatTree, MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule, MatTreeNestedDataSource, MatTreeNode, MatTreeNodeDef, MatTreeNodeOutlet, MatTreeNodePadding, MatTreeNodeToggle };

package/tree/testing/index.d.ts

@@ -1,12 +1,56 @@
-import { AsyncFactoryFn } from '@angular/cdk/testing';
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
-import { ContentContainerComponentHarness } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { TestElement } from '@angular/cdk/testing';
+import * as _angular_cdk_testing from '@angular/cdk/testing';
+import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate, ComponentHarness } from '@angular/cdk/testing';
 
+/** A set of criteria that can be used to filter a list of tree harness instances */
+interface TreeHarnessFilters extends BaseHarnessFilters {
+}
+/** A set of criteria that can be used to filter a list of node harness instances. */
+interface TreeNodeHarnessFilters extends BaseHarnessFilters {
+    /** Only find instances whose text matches the given value. */
+    text?: string | RegExp;
+    /** Only find instances whose disabled state matches the given value. */
+    disabled?: boolean;
+    /** Only find instances whose expansion state matches the given value. */
+    expanded?: boolean;
+    /** Only find instances whose level matches the given value. */
+    level?: number;
+}
+
+/** Harness for interacting with a standard Angular Material tree node. */
+declare class MatTreeNodeHarness extends ContentContainerComponentHarness<string> {
+    /** The selector of the host element of a `MatTreeNode` instance. */
+    static hostSelector: string;
+    _toggle: _angular_cdk_testing.AsyncFactoryFn<_angular_cdk_testing.TestElement | null>;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a tree node with specific attributes.
+     * @param options Options for narrowing the search
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: TreeNodeHarnessFilters): HarnessPredicate<MatTreeNodeHarness>;
+    /** Whether the tree node is expanded. */
+    isExpanded(): Promise<boolean>;
+    /** Whether the tree node is expandable. */
+    isExpandable(): Promise<boolean>;
+    /** Whether the tree node is disabled. */
+    isDisabled(): Promise<boolean>;
+    /** Gets the level of the tree node. Note that this gets the aria-level and is 1 indexed. */
+    getLevel(): Promise<number>;
+    /** Gets the tree node's text. */
+    getText(): Promise<string>;
+    /** Toggles node between expanded/collapsed. Only works when node is not disabled. */
+    toggle(): Promise<void>;
+    /** Expands the node if it is collapsed. Only works when node is not disabled. */
+    expand(): Promise<void>;
+    /** Collapses the node if it is expanded. Only works when node is not disabled. */
+    collapse(): Promise<void>;
+}
+
+type TextTree = {
+    text?: string;
+    children?: TextTree[];
+};
 /** Harness for interacting with a standard mat-tree in tests. */
-export declare class MatTreeHarness extends ComponentHarness {
+declare class MatTreeHarness extends ComponentHarness {
     /** The selector for the host element of a `MatTableHarness` instance. */
     static hostSelector: string;
     /**
@@ -71,54 +115,5 @@ export declare class MatTreeHarness extends ComponentHarness {
     private _addChildToNode;
 }
 
-/** Harness for interacting with a standard Angular Material tree node. */
-export declare class MatTreeNodeHarness extends ContentContainerComponentHarness<string> {
-    /** The selector of the host element of a `MatTreeNode` instance. */
-    static hostSelector: string;
-    _toggle: AsyncFactoryFn<TestElement | null>;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a tree node with specific attributes.
-     * @param options Options for narrowing the search
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: TreeNodeHarnessFilters): HarnessPredicate<MatTreeNodeHarness>;
-    /** Whether the tree node is expanded. */
-    isExpanded(): Promise<boolean>;
-    /** Whether the tree node is expandable. */
-    isExpandable(): Promise<boolean>;
-    /** Whether the tree node is disabled. */
-    isDisabled(): Promise<boolean>;
-    /** Gets the level of the tree node. Note that this gets the aria-level and is 1 indexed. */
-    getLevel(): Promise<number>;
-    /** Gets the tree node's text. */
-    getText(): Promise<string>;
-    /** Toggles node between expanded/collapsed. Only works when node is not disabled. */
-    toggle(): Promise<void>;
-    /** Expands the node if it is collapsed. Only works when node is not disabled. */
-    expand(): Promise<void>;
-    /** Collapses the node if it is expanded. Only works when node is not disabled. */
-    collapse(): Promise<void>;
-}
-
-export declare type TextTree = {
-    text?: string;
-    children?: TextTree[];
-};
-
-/** A set of criteria that can be used to filter a list of tree harness instances */
-export declare interface TreeHarnessFilters extends BaseHarnessFilters {
-}
-
-/** A set of criteria that can be used to filter a list of node harness instances. */
-export declare interface TreeNodeHarnessFilters extends BaseHarnessFilters {
-    /** Only find instances whose text matches the given value. */
-    text?: string | RegExp;
-    /** Only find instances whose disabled state matches the given value. */
-    disabled?: boolean;
-    /** Only find instances whose expansion state matches the given value. */
-    expanded?: boolean;
-    /** Only find instances whose level matches the given value. */
-    level?: number;
-}
-
-export { }
+export { MatTreeHarness, MatTreeNodeHarness };
+export type { TextTree, TreeHarnessFilters, TreeNodeHarnessFilters };

package/button/_button-base.scss

@@ -1,181 +0,0 @@
-@use '../core/tokens/token-utils';
-@use '../core/style/layout-common';
-
-// Adds styles necessary to provide stateful interactions with the button. This includes providing
-// content for the state container's ::before and ::after so that they can be given a background
-// color and opacity for states like hover, active, and focus. Additionally, adds styles to the
-// ripple and state container so that they fill the button, match the border radius, and avoid
-// pointer events.
-@mixin mat-private-button-interactive() {
-  -webkit-tap-highlight-color: transparent;
-
-  // The ripple container should match the bounds of the entire button.
-  .mat-mdc-button-ripple,
-  .mat-mdc-button-persistent-ripple,
-  .mat-mdc-button-persistent-ripple::before {
-    @include layout-common.fill;
-
-    // Disable pointer events for the ripple container and state overlay because the container
-    // will overlay the user content and we don't want to disable mouse events on the user content.
-    // Pointer events can be safely disabled because the ripple trigger element is the host element.
-    pointer-events: none;
-
-    // Inherit the border radius from the parent so that state overlay and ripples don't exceed the
-    // parent button boundaries. Note that an inherited border radius does not work properly if
-    // the actual button element does have a border because it causes the inner content to be
-    // smaller. We have special logic for stroked buttons to handle this scenario.
-    border-radius: inherit;
-  }
-
-  // This style used to be applied by the MatRipple
-  // directive, which is no longer attached to this element.
-  .mat-mdc-button-ripple {
-    overflow: hidden;
-  }
-
-  // We use ::before so that we can reuse some of MDC's theming.
-  .mat-mdc-button-persistent-ripple::before {
-    content: '';
-    opacity: 0;
-  }
-
-  // The content should appear over the state and ripple layers, otherwise they may adversely affect
-  // the accessibility of the text content.
-  .mdc-button__label,
-  .mat-icon {
-    z-index: 1;
-    position: relative;
-  }
-
-  // The focus indicator should match the bounds of the entire button.
-  .mat-focus-indicator {
-    @include layout-common.fill();
-  }
-
-  &:focus > .mat-focus-indicator::before {
-    content: '';
-  }
-}
-
-@mixin mat-private-button-ripple($prefix, $slots) {
-  @include token-utils.use-tokens($prefix, $slots) {
-    .mat-ripple-element {
-      @include token-utils.create-token-slot(background-color, ripple-color);
-    }
-
-    .mat-mdc-button-persistent-ripple::before {
-      @include token-utils.create-token-slot(background-color, state-layer-color);
-    }
-
-    &.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {
-      @include token-utils.create-token-slot(background-color, disabled-state-layer-color);
-    }
-
-    &:hover > .mat-mdc-button-persistent-ripple::before {
-      @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
-    }
-
-    &.cdk-program-focused,
-    &.cdk-keyboard-focused,
-    &.mat-mdc-button-disabled-interactive:focus {
-      > .mat-mdc-button-persistent-ripple::before {
-        @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
-      }
-    }
-
-    &:active > .mat-mdc-button-persistent-ripple::before {
-      @include token-utils.create-token-slot(opacity, pressed-state-layer-opacity);
-    }
-  }
-}
-
-// MDC's disabled buttons define a default cursor with pointer-events none. However, they select
-// :disabled for this, which does not affect anchor tags.
-// TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,
-// and note that having pointer-events may have unintended side-effects, e.g. allowing the user
-// to click the target underneath the button.
-@mixin mat-private-button-disabled() {
-  // `[disabled]` shouldn't be necessary, but we keep it to maintain
-  // compatibility with apps setting it through host bindings.
-  &[disabled],
-  &.mat-mdc-button-disabled {
-    cursor: default;
-    pointer-events: none;
-    @content;
-  }
-
-  &.mat-mdc-button-disabled-interactive {
-    pointer-events: auto;
-  }
-}
-
-// Adds an elevation shadow to a button.
-@mixin mat-private-button-elevation($token-name) {
-  // MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
-  box-shadow: token-utils.get-token-variable($token-name + '-shadow');
-}
-
-@mixin mat-private-button-touch-target($is-square, $prefix, $slots) {
-  .mat-mdc-button-touch-target {
-    position: absolute;
-    top: 50%;
-    height: 48px;
-
-    @if $is-square {
-      left: 50%;
-      width: 48px;
-      transform: translate(-50%, -50%);
-    } @else {
-      left: 0;
-      right: 0;
-      transform: translateY(-50%);
-    }
-
-    @include token-utils.use-tokens($prefix, $slots) {
-      @include token-utils.create-token-slot(display, touch-target-display);
-    }
-  }
-}
-
-@mixin mat-private-button-horizontal-layout($prefix, $slots, $has-with-icon-padding) {
-  @include token-utils.use-tokens($prefix, $slots) {
-    $icon-spacing: token-utils.get-token-variable(icon-spacing, true);
-    $icon-offset: token-utils.get-token-variable(icon-offset, true);
-
-    @if ($has-with-icon-padding) {
-      $with-icon-horizontal-padding:
-        token-utils.get-token-variable(with-icon-horizontal-padding, true);
-
-      // stylelint-disable-next-line selector-class-pattern
-      &:has(.material-icons, mat-icon, [matButtonIcon]) {
-        padding: 0 $with-icon-horizontal-padding;
-      }
-    }
-
-    // MDC expects button icons to contain this HTML content:
-    // ```html
-    //   <span class="mdc-button__icon material-icons">favorite</span>
-    // ```
-    // However, Angular Material expects a `mat-icon` instead. The following
-    // styles will lay out the icons appropriately.
-    & > .mat-icon {
-      margin-right: $icon-spacing;
-      margin-left: $icon-offset;
-
-      [dir='rtl'] & {
-        margin-right: $icon-offset;
-        margin-left: $icon-spacing;
-      }
-    }
-
-    .mdc-button__label + .mat-icon {
-      margin-right: $icon-offset;
-      margin-left: $icon-spacing;
-
-      [dir='rtl'] & {
-        margin-right: $icon-spacing;
-        margin-left: $icon-offset;
-      }
-    }
-  }
-}