@angular/material 19.0.0-next.1 → 19.0.0-next.10

package/form-field/_form-field-theme.scss

@@ -14,18 +14,20 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-          tokens-mdc-filled-text-field.$prefix,
-          tokens-mdc-filled-text-field.get-unthemable-tokens());
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-          tokens-mdc-outlined-text-field.$prefix,
-          tokens-mdc-outlined-text-field.get-unthemable-tokens());
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-          tokens-mat-form-field.$prefix,
-          tokens-mat-form-field.get-unthemable-tokens());
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -38,33 +40,50 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-color-tokens($theme)
+      );
     }
 
     .mat-mdc-form-field.mat-accent {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent)
+      );
     }
 
     .mat-mdc-form-field.mat-warn {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn)
+      );
     }
   }
 }
@@ -74,15 +93,20 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -92,30 +116,46 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-density-tokens($theme)
+      );
     }
   }
 }
 
-/// Outputs the CSS variable values for the given tokens.
-/// @param {Map} $tokens The token values to emit.
-@mixin overrides($tokens: ()) {
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
   $filled-text-field-tokens: tokens-mdc-filled-text-field.get-token-slots();
   $outlined-text-field-tokens: tokens-mdc-outlined-text-field.get-token-slots();
   $form-field-tokens: tokens-mat-form-field.get-token-slots();
 
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mdc-filled-text-field.$prefix, tokens: $filled-text-field-tokens),
-    (prefix: tokens-mdc-outlined-text-field.$prefix, tokens: $outlined-text-field-tokens),
-    (prefix: tokens-mat-form-field.$prefix, tokens: $form-field-tokens),
+  @return (
+    (
+      namespace: tokens-mdc-filled-text-field.$prefix,
+      tokens: $filled-text-field-tokens,
+      prefix: 'filled-',
+    ),
+    (
+      namespace: tokens-mdc-outlined-text-field.$prefix,
+      tokens: $outlined-text-field-tokens,
+      prefix: 'outlined-',
+    ),
+    (
+      namespace: tokens-mat-form-field.$prefix,
+      tokens: $form-field-tokens,
+    )
   );
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-form-field.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
@@ -125,8 +165,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -143,16 +182,30 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  $mdc-filled-text-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mdc-filled-text-field.$prefix, $options...);
-  $mdc-outlined-text-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mdc-outlined-text-field.$prefix, $options...);
-  $mat-form-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mat-form-field.$prefix, $options...);
-  @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-    $mdc-filled-text-field-tokens);
-  @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-    $mdc-outlined-text-field-tokens);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mdc-filled-text-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-filled-text-field.$prefix,
+    $options...
+  );
+  $mdc-outlined-text-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-outlined-text-field.$prefix,
+    $options...
+  );
+  $mat-form-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-form-field.$prefix,
+    $options...
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-filled-text-field.$prefix,
+    $mdc-filled-text-field-tokens
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-outlined-text-field.$prefix,
+    $mdc-outlined-text-field-tokens
+  );
   @include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens);
 }

package/form-field/_mdc-text-field-structure.scss

@@ -6,10 +6,14 @@
 
 // Includes the structural styles for the form field inherited from MDC.
 @mixin private-text-field-structure {
-  $filled-slots: (tokens-mdc-filled-text-field.$prefix,
-    tokens-mdc-filled-text-field.get-token-slots());
-  $outlined-slots: (tokens-mdc-outlined-text-field.$prefix,
-    tokens-mdc-outlined-text-field.get-token-slots());
+  $filled-slots: (
+    tokens-mdc-filled-text-field.$prefix,
+    tokens-mdc-filled-text-field.get-token-slots()
+  );
+  $outlined-slots: (
+    tokens-mdc-outlined-text-field.$prefix,
+    tokens-mdc-outlined-text-field.get-token-slots()
+  );
 
   .mdc-text-field {
     display: inline-flex;
@@ -101,7 +105,7 @@
       @include _input-tokens('.mdc-text-field--outlined');
     }
 
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       .mdc-text-field--disabled & {
         background-color: Window;
       }
@@ -130,19 +134,15 @@
   .mdc-text-field--outlined {
     height: 56px;
     overflow: visible;
-    padding-left: 16px;
-    padding-right: 16px;
 
-    @include _supports-max {
-      @include token-utils.use-tokens($outlined-slots...) {
-        $shape-var: token-utils.get-token-variable(container-shape);
-        padding-right: max(16px, #{$shape-var});
-        padding-left: max(16px, calc(#{$shape-var} + 4px));
+    @include token-utils.use-tokens($outlined-slots...) {
+      $shape-var: token-utils.get-token-variable(container-shape);
+      padding-right: max(16px, #{$shape-var});
+      padding-left: max(16px, calc(#{$shape-var} + 4px));
 
-        [dir='rtl'] & {
-          padding-right: max(16px, calc(#{$shape-var} + 4px));
-          padding-left: max(16px, #{$shape-var});
-        }
+      [dir='rtl'] & {
+        padding-right: max(16px, calc(#{$shape-var} + 4px));
+        padding-left: max(16px, #{$shape-var});
       }
     }
   }
@@ -201,7 +201,7 @@
     .mdc-text-field--disabled & {
       cursor: default;
 
-      @include cdk.high-contrast(active, off) {
+      @include cdk.high-contrast {
         z-index: 1;
       }
     }
@@ -342,17 +342,14 @@
     border-right: none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    width: 12px;
 
     @include token-utils.use-tokens($outlined-slots...) {
       @include token-utils.create-token-slot(border-top-left-radius, container-shape);
       @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
 
-      @include _supports-max {
-        .mdc-text-field--outlined .mdc-notched-outline & {
-          $shape-var: token-utils.get-token-variable(container-shape);
-          width: max(12px, #{$shape-var});
-        }
+      .mdc-text-field--outlined .mdc-notched-outline & {
+        $shape-var: token-utils.get-token-variable(container-shape);
+        width: max(12px, #{$shape-var});
       }
     }
 
@@ -397,14 +394,14 @@
   .mdc-notched-outline__notch {
     flex: 0 0 auto;
     width: auto;
-    max-width: calc(100% - 24px);
 
     @include token-utils.use-tokens($outlined-slots...) {
-      @include _supports-max {
-        .mdc-text-field--outlined .mdc-notched-outline & {
-          $shape-var: token-utils.get-token-variable(container-shape);
-          max-width: calc(100% - max(12px, #{$shape-var}) * 2);
-        }
+      .mdc-text-field--outlined .mdc-notched-outline & {
+        $shape-var: token-utils.get-token-variable(container-shape);
+        max-width: min(
+          var(--mat-form-field-notch-max-width, 100%),
+          calc(100% - max(12px, #{$shape-var}) * 2)
+        );
       }
     }
 
@@ -420,6 +417,7 @@
       padding-left: 0;
       padding-right: 8px;
       border-top: none;
+      --mat-form-field-notch-max-width: 100%;
     }
 
     [dir='rtl'] .mdc-notched-outline--notched & {
@@ -433,7 +431,8 @@
   }
 
   .mdc-line-ripple {
-    &::before, &::after {
+    &::before,
+    &::after {
       position: absolute;
       bottom: 0;
       left: 0;
@@ -459,8 +458,10 @@
         }
 
         .mdc-text-field--filled.mdc-text-field--disabled & {
-          @include token-utils.create-token-slot(border-bottom-color,
-            disabled-active-indicator-color);
+          @include token-utils.create-token-slot(
+            border-bottom-color,
+            disabled-active-indicator-color
+          );
         }
 
         #{$enabled-field}.mdc-text-field--invalid & {
@@ -468,8 +469,10 @@
         }
 
         #{$enabled-field}.mdc-text-field--invalid:not(.mdc-text-field--focused):hover & {
-          @include token-utils.create-token-slot(border-bottom-color,
-            error-hover-active-indicator-color);
+          @include token-utils.create-token-slot(
+            border-bottom-color,
+            error-hover-active-indicator-color
+          );
         }
       }
     }
@@ -481,8 +484,10 @@
 
       @include token-utils.use-tokens($filled-slots...) {
         .mdc-text-field--filled & {
-          @include token-utils.create-token-slot(border-bottom-width,
-            focus-active-indicator-height);
+          @include token-utils.create-token-slot(
+            border-bottom-width,
+            focus-active-indicator-height
+          );
         }
 
         .mdc-text-field--filled:not(.mdc-text-field--disabled) & {
@@ -490,8 +495,10 @@
         }
 
         .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) & {
-          @include token-utils.create-token-slot(border-bottom-color,
-            error-focus-active-indicator-color);
+          @include token-utils.create-token-slot(
+            border-bottom-color,
+            error-focus-active-indicator-color
+          );
         }
       }
     }
@@ -571,21 +578,14 @@
   }
 }
 
-// Wraps the content in a `@supports` query targeting the `max` CSS function.
-@mixin _supports-max {
-  // stylelint-disable material/no-prefixes
-  @supports (top: max(0%)) {
-    @content;
-  }
-  // stylelint-enable
-}
-
 // Includes the animation styles for the form field inherited from MDC.
 @mixin private-text-field-animations {
   $timing-curve: cubic-bezier(0.4, 0, 0.2, 1);
 
   .mdc-floating-label {
-    transition: transform 150ms $timing-curve, color 150ms $timing-curve;
+    transition:
+      transform 150ms $timing-curve,
+      color 150ms $timing-curve;
   }
 
   .mdc-text-field__input {
@@ -611,6 +611,8 @@
   }
 
   .mdc-line-ripple::after {
-    transition: transform 180ms $timing-curve, opacity 180ms $timing-curve;
+    transition:
+      transform 180ms $timing-curve,
+      opacity 180ms $timing-curve;
   }
 }

package/form-field/index.d.ts

@@ -4,8 +4,6 @@ import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { ChangeDetectorRef } from '@angular/core';
-import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
@@ -13,10 +11,8 @@ import * as i2 from '@angular/common';
 import * as i3 from '@angular/cdk/observers';
 import { InjectionToken } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OnDestroy } from '@angular/core';
-import { Platform } from '@angular/cdk/platform';
 import { QueryList } from '@angular/core';
 import { Signal } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
@@ -121,22 +117,24 @@ export declare const MAT_SUFFIX: InjectionToken<MatSuffix>;
 /** Single error message to be shown underneath the form-field. */
 export declare class MatError {
     id: string;
-    constructor(ariaLive: string, elementRef: ElementRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatError, [{ attribute: "aria-live"; }, null]>;
+    constructor(...args: unknown[]);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatError, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatError, "mat-error, [matError]", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /** Container for form controls that applies Material Design styling and behavior. */
 export declare class MatFormField implements FloatingLabelParent, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
-    _elementRef: ElementRef;
+    _elementRef: ElementRef<any>;
     private _changeDetectorRef;
     private _dir;
     private _platform;
-    private _defaults?;
-    _animationMode?: string | undefined;
+    private _defaults;
+    _animationMode: "NoopAnimations" | "BrowserAnimations" | null;
     _textField: ElementRef<HTMLElement>;
     _iconPrefixContainer: ElementRef<HTMLElement>;
     _textPrefixContainer: ElementRef<HTMLElement>;
+    _iconSuffixContainer: ElementRef<HTMLElement>;
+    _textSuffixContainer: ElementRef<HTMLElement>;
     _floatingLabel: MatFormFieldFloatingLabel | undefined;
     _notchedOutline: MatFormFieldNotchedOutline | undefined;
     _lineRipple: MatFormFieldLineRipple | undefined;
@@ -197,17 +195,7 @@ export declare class MatFormField implements FloatingLabelParent, AfterContentIn
     private _stateChanges;
     private _valueChanges;
     private _injector;
-    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, 
-    /**
-     * @deprecated not needed, to be removed.
-     * @breaking-change 19.0.0 remove this param
-     */
-    _unusedNgZone: NgZone, _dir: Directionality, _platform: Platform, _defaults?: MatFormFieldDefaultOptions | undefined, _animationMode?: string | undefined, 
-    /**
-     * @deprecated not needed, to be removed.
-     * @breaking-change 17.0.0 remove this param
-     */
-    _unusedDocument?: any);
+    constructor(...args: unknown[]);
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
@@ -295,7 +283,7 @@ export declare class MatFormField implements FloatingLabelParent, AfterContentIn
     private _updateOutlineLabelOffset;
     /** Checks whether the form field is attached to the DOM. */
     private _isAttachedToDom;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatFormField, [null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatFormField, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": { "alias": "hideRequiredMarker"; "required": false; }; "color": { "alias": "color"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; }, {}, ["_labelChild", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error, [matError]", "mat-hint:not([align='end'])", "mat-hint[align='end']"], true, never>;
 }
 
@@ -364,7 +352,7 @@ export declare abstract class MatFormFieldControl<T> {
     /** Handles a click on the control's container. */
     abstract onContainerClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldControl<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldControl<any>, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldControl<any>, never, never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -435,7 +423,7 @@ declare class MatFormFieldFloatingLabel implements OnDestroy {
     private _parent;
     /** The current resize event subscription. */
     private _resizeSubscription;
-    constructor(_elementRef: ElementRef<HTMLElement>);
+    constructor(...args: unknown[]);
     ngOnDestroy(): void;
     /** Gets the width of the label. Used for the outline notch. */
     getWidth(): number;
@@ -459,7 +447,7 @@ declare class MatFormFieldFloatingLabel implements OnDestroy {
  */
 declare class MatFormFieldLineRipple implements OnDestroy {
     private _elementRef;
-    constructor(_elementRef: ElementRef<HTMLElement>, ngZone: NgZone);
+    constructor(...args: unknown[]);
     activate(): void;
     deactivate(): void;
     private _handleTransitionEnd;
@@ -486,7 +474,7 @@ declare class MatFormFieldNotchedOutline implements AfterViewInit {
     /** Whether the notch should be opened. */
     open: boolean;
     _notch: ElementRef;
-    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone);
+    constructor(...args: unknown[]);
     ngAfterViewInit(): void;
     _setNotchWidth(labelWidth: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldNotchedOutline, never>;

package/grid-list/_grid-list-theme.scss

@@ -10,26 +10,27 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 // Include this empty mixin for consistency with the other components.
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  } @else {
   }
-  @else {}
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-grid-list.$prefix,
-        tokens-mat-grid-list.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-grid-list.$prefix,
+        tokens-mat-grid-list.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -37,23 +38,29 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-grid-list.$prefix, tokens: tokens-mat-grid-list.get-token-slots()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-grid-list.$prefix,
+      tokens: tokens-mat-grid-list.get-token-slots(),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -70,9 +77,12 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mat-grid-list.$prefix, map.get($tokens, tokens-mat-grid-list.$prefix));
+      tokens-mat-grid-list.$prefix,
+      map.get($tokens, tokens-mat-grid-list.$prefix)
+    );
   }
 }