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

package/button/_button-base.scss

@@ -68,12 +68,17 @@
       @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 {
+    &.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);
       }
@@ -91,11 +96,18 @@
 // 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] {
+  // `[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;
+  }
 }
 
 // Hides the touch target on lower densities.

package/button/_button-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/button/button' as mdc-button;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
@@ -19,7 +18,7 @@
 @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
-
+@use '../core/style/sass-utils';
 
 @mixin _text-button-variant($theme, $palette) {
   $mdc-tokens: if($palette,
@@ -165,15 +164,16 @@
 }
 
 @mixin typography($theme) {
-  @include mdc-helpers.using-mdc-typography($theme) {
-    @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-  }
-
-  .mat-mdc-button,
-  .mat-mdc-raised-button,
-  .mat-mdc-outlined-button,
-  .mat-mdc-unelevated-button {
-    line-height: inherit;
+  @include sass-utils.current-selector-or-root() {
+    $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
+    $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
+    $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
+    $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
+
+    @include mdc-button-text-theme.theme($text-typography-tokens);
+    @include mdc-button-filled-theme.theme($filled-typography-tokens);
+    @include mdc-button-outlined-theme.theme($outlined-typography-tokens);
+    @include mdc-button-protected-theme.theme($protected-typography-tokens);
   }
 }
 

package/button/_fab-theme.scss

@@ -1,8 +1,6 @@
 @use 'sass:map';
-@use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -73,13 +71,8 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    @include mdc-helpers.using-mdc-typography($theme) {
-      @include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-    }
-
-    $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
     @include sass-utils.current-selector-or-root() {
-      @include mdc-extended-fab-theme.theme($typography-tokens);
+      @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-typography-tokens($theme));
     }
   }
 }

package/button/index.d.ts

@@ -38,6 +38,9 @@ declare namespace i4 {
     }
 }
 
+/** 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>;
 
@@ -69,6 +72,7 @@ declare class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     _haltDisabledEvents: (event: Event) => void;
+    protected _getAriaDisabled(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAnchorBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatAnchorBase, never, never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, never, false, never>;
     static ngAcceptInputType_tabIndex: unknown;
@@ -116,19 +120,44 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
     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).
+     *
+     * 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;
     constructor(_elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
-    focus(_origin?: FocusOrigin, options?: FocusOptions): void;
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
+    protected _getAriaDisabled(): boolean | null;
+    protected _getDisabledAttribute(): true | null;
     private _updateRippleDisabled;
     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; }; }, {}, never, never, false, 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; }; }, {}, never, never, false, never>;
     static ngAcceptInputType_disableRipple: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_ariaDisabled: unknown;
+    static ngAcceptInputType_disabledInteractive: 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;
 }
 
 export declare class MatButtonModule {

package/checkbox/_checkbox-theme.scss

@@ -1,12 +1,13 @@
 @use 'sass:map';
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
-@use '@material/form-field' as mdc-form-field;
+@use '@material/form-field/form-field-theme' as mdc-form-field-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
+@use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
@@ -29,6 +30,8 @@
     }
 
     .mat-mdc-checkbox {
+      @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
+
       &.mat-primary {
         @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
       }
@@ -37,11 +40,6 @@
         @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
       }
 
-      @include mdc-helpers.using-mdc-theme($theme) {
-        // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
-        @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-      }
-
       &.mat-mdc-checkbox-disabled label {
         // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
         color: inspection.get-theme-color($theme, foreground, disabled-text);
@@ -60,10 +58,7 @@
     }
 
     .mat-mdc-checkbox {
-      @include mdc-helpers.using-mdc-typography($theme) {
-        // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
-        @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-      }
+      @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
     }
   }
 }

package/checkbox/index.d.ts

@@ -1,3 +1,4 @@
+import { AbstractControl } from '@angular/forms';
 import { AfterViewInit } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { CheckboxRequiredValidator } from '@angular/forms';
@@ -6,12 +7,16 @@ import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i2 from '@angular/material/core';
+import * as i3 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { MatRipple } from '@angular/material/core';
 import { NgZone } from '@angular/core';
+import { OnChanges } from '@angular/core';
 import { Provider } from '@angular/core';
+import { SimpleChanges } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
+import { ValidationErrors } from '@angular/forms';
+import { Validator } from '@angular/forms';
 
 declare namespace i1 {
     export {
@@ -20,7 +25,7 @@ declare namespace i1 {
     }
 }
 
-declare namespace i3 {
+declare namespace i2 {
     export {
         TransitionCheckState,
         MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR,
@@ -29,6 +34,10 @@ declare namespace i3 {
     }
 }
 
+/**
+ * @deprecated Will stop being exported.
+ * @breaking-change 19.0.0
+ */
 export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
 
 /** Injection token to be used to override the default options for `mat-checkbox`. */
@@ -37,9 +46,13 @@ export declare const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDef
 /** @docs-private */
 export declare function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOptions;
 
+/**
+ * @deprecated No longer used, `MatCheckbox` implements required validation directly.
+ * @breaking-change 19.0.0
+ */
 export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
 
-export declare class MatCheckbox implements AfterViewInit, ControlValueAccessor, FocusableOption {
+export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAccessor, Validator, FocusableOption {
     _elementRef: ElementRef<HTMLElement>;
     private _changeDetectorRef;
     private _ngZone;
@@ -112,7 +125,9 @@ export declare class MatCheckbox implements AfterViewInit, ControlValueAccessor,
     private _currentAnimationClass;
     private _currentCheckState;
     private _controlValueAccessorChangeFn;
+    private _validatorChangeFn;
     constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     /** Whether the checkbox is checked. */
     get checked(): boolean;
@@ -138,6 +153,8 @@ export declare class MatCheckbox implements AfterViewInit, ControlValueAccessor,
     registerOnChange(fn: (value: any) => void): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
+    validate(control: AbstractControl<boolean>): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
     private _transitionCheckState;
     private _emitChangeEvent;
     /** Toggles the `checked` state of the checkbox. */
@@ -202,7 +219,7 @@ export declare interface MatCheckboxDefaultOptions {
 
 export declare class MatCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, never, [typeof i2.MatCommonModule, typeof i2.MatRippleModule, typeof _MatCheckboxRequiredValidatorModule, typeof i3.MatCheckbox], [typeof i3.MatCheckbox, typeof i2.MatCommonModule, typeof _MatCheckboxRequiredValidatorModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, never, [typeof i2.MatCheckbox, typeof i3.MatCommonModule], [typeof i2.MatCheckbox, typeof i3.MatCommonModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
 }
 
@@ -210,13 +227,19 @@ export declare class MatCheckboxModule {
  * Validator for Material checkbox's required attribute in template-driven checkbox.
  * Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
  * work with `mat-checkbox`.
+ *
+ * @deprecated No longer used, `MatCheckbox` implements required validation directly.
+ * @breaking-change 19.0.0
  */
 export declare class MatCheckboxRequiredValidator extends CheckboxRequiredValidator {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxRequiredValidator, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatCheckboxRequiredValidator, "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]", never, {}, {}, never, never, true, never>;
 }
 
-/** This module is used by both original and MDC-based checkbox implementations. */
+/**
+ * @deprecated No longer used, `MatCheckbox` implements required validation directly.
+ * @breaking-change 19.0.0
+ */
 export declare class _MatCheckboxRequiredValidatorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatCheckboxRequiredValidatorModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<_MatCheckboxRequiredValidatorModule, never, [typeof i1.MatCheckboxRequiredValidator], [typeof i1.MatCheckboxRequiredValidator]>;

package/core/index.d.ts

@@ -519,6 +519,18 @@ export declare const MATERIAL_SANITY_CHECKS: InjectionToken<SanityChecks>;
 /** @docs-private */
 declare function MATERIAL_SANITY_CHECKS_FACTORY(): SanityChecks;
 
+/**
+ * Internal shared component used as a container in form field controls.
+ * Not to be confused with `mat-form-field` which MDC calls a "text field".
+ * @docs-private
+ */
+export declare class _MatInternalFormField {
+    /** Position of the label relative to the content. */
+    labelPosition: 'before' | 'after';
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MatInternalFormField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<_MatInternalFormField, "div[mat-internal-form-field]", never, { "labelPosition": { "alias": "labelPosition"; "required": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * Shared directive to count lines inside a text area, such as a list item.
  * Line elements can be extracted with a @ContentChildren(MatLine) query, then
@@ -803,6 +815,8 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
  *
  * This service allows us to avoid eagerly creating & attaching MatRipples.
  * It works by creating & attaching a ripple only when a component is first interacted with.
+ *
+ * @docs-private
  */
 export declare class MatRippleLoader implements OnDestroy {
     private _document;
@@ -810,6 +824,7 @@ export declare class MatRippleLoader implements OnDestroy {
     private _globalRippleOptions;
     private _platform;
     private _ngZone;
+    private _hosts;
     constructor();
     ngOnDestroy(): void;
     /**
@@ -830,8 +845,9 @@ export declare class MatRippleLoader implements OnDestroy {
     /** Handles creating and attaching component internals when a component it is initially interacted with. */
     private _onInteraction;
     /** Creates a MatRipple and appends it to the given element. */
-    createRipple(host: HTMLElement): MatRipple | undefined;
-    attachRipple(host: Element, ripple: MatRipple): void;
+    private _createRipple;
+    attachRipple(host: HTMLElement, ripple: MatRipple): void;
+    destroyRipple(host: HTMLElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleLoader, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatRippleLoader>;
 }

package/core/internal-form-field/_internal-form-field-theme.scss

@@ -0,0 +1,37 @@
+@use '@material/form-field/form-field-theme' as mdc-form-field-theme;
+@use '../tokens/m2/mdc/form-field' as tokens-mdc-form-field;
+@use '../style/sass-utils';
+@use '../theming/theming';
+@use '../theming/inspection';
+@use '../typography/typography';
+
+@mixin base($theme) {}
+
+@mixin color($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
+  }
+}
+
+@mixin typography($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
+  }
+}
+
+@mixin density($theme) {}
+
+@mixin theme($theme) {
+  @include theming.private-check-duplicate-theme-styles($theme, 'mat-internal-form-field') {
+    @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
+  }
+}

package/core/tokens/m2/mat/_fab.scss

@@ -30,6 +30,9 @@ $prefix: (mat, fab);
     // Color of the element that shows the hover, focus and pressed states.
     state-layer-color: $on-surface,
 
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: $on-surface,
+
     // Color of the ripple element.
     ripple-color: rgba($on-surface, 0.1),
 

package/core/tokens/m2/mat/_filled-button.scss

@@ -27,6 +27,9 @@ $prefix: (mat, filled-button);
     // Color of the element that shows the hover, focus and pressed states.
     state-layer-color: $on-surface,
 
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: $on-surface,
+
     // Color of the ripple element.
     ripple-color: rgba($on-surface, 0.1),
 

package/core/tokens/m2/mat/_icon-button.scss

@@ -27,6 +27,9 @@ $prefix: (mat, icon-button);
     // Color of the element that shows the hover, focus and pressed states.
     state-layer-color: $on-surface,
 
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: $on-surface,
+
     // Color of the ripple element.
     ripple-color: rgba($on-surface, 0.1),
 

package/core/tokens/m2/mat/_outlined-button.scss

@@ -27,6 +27,9 @@ $prefix: (mat, outlined-button);
     // Color of the element that shows the hover, focus and pressed states.
     state-layer-color: $on-surface,
 
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: $on-surface,
+
     // Color of the ripple element.
     ripple-color: rgba($on-surface, 0.1),
 

package/core/tokens/m2/mat/_protected-button.scss

@@ -27,6 +27,9 @@ $prefix: (mat, protected-button);
     // Color of the element that shows the hover, focus and pressed states.
     state-layer-color: $on-surface,
 
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: $on-surface,
+
     // Color of the ripple element.
     ripple-color: rgba($on-surface, 0.1),
 

package/core/tokens/m2/mat/_tab-header.scss

@@ -8,7 +8,12 @@ $prefix: (mat, tab-header);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    // For some period of time, the MDC tabs removed the divider. This has been added back in
+    // and will be present in M3.
+    divider-color: transparent,
+    divider-height: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

package/core/tokens/m2/mat/_text-button.scss

@@ -27,6 +27,9 @@ $prefix: (mat, text-button);
     // Color of the element that shows the hover, focus and pressed states.
     state-layer-color: $on-surface,
 
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: $on-surface,
+
     // Color of the ripple element.
     ripple-color: rgba($on-surface, 0.1),
 

package/core/tokens/m2/mdc/_filled-button.scss

@@ -35,11 +35,6 @@ $prefix: (mdc, filled-button);
     container-shadow-color: null,
     focus-label-text-color: null,
     hover-label-text-color: null,
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
     pressed-label-text-color: null,
     with-icon-disabled-icon-color: null,
     with-icon-focus-icon-color: null,
@@ -81,7 +76,13 @@ $prefix: (mdc, filled-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_form-field.scss

@@ -0,0 +1,46 @@
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, form-field);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return (
+    label-text-color: inspection.get-theme-color($theme, foreground, text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_outlined-button.scss

@@ -49,12 +49,6 @@ $prefix: (mdc, outlined-button);
     with-icon-focus-icon-color: null,
     with-icon-pressed-icon-color: null,
     with-icon-disabled-icon-color: null,
-
-    label-text-size: null,
-    label-text-font: null,
-    label-text-weight: null,
-    label-text-tracking: null,
-    label-text-transform: null
   );
 }
 
@@ -87,7 +81,13 @@ $prefix: (mdc, outlined-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_protected-button.scss

@@ -33,11 +33,6 @@ $prefix: (mdc, protected-button);
     disabled-container-elevation: null,
     focus-container-elevation: null,
     pressed-container-elevation: null,
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
     with-icon-icon-size: null,
     focus-label-text-color: null,
     hover-label-text-color: null,
@@ -80,7 +75,13 @@ $prefix: (mdc, protected-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_text-button.scss

@@ -21,13 +21,6 @@ $prefix: (mdc, text-button);
     // prevent the buttons from collapsing if a density mixin isn't included.
     container-height: 36px,
 
-    // TODO: handle these through the typography styles eventually.
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
-
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -74,7 +67,13 @@ $prefix: (mdc, text-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.