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

package/grid-list/index.d.ts

@@ -1,7 +1,5 @@
 import { AfterContentChecked } from '@angular/core';
 import { AfterContentInit } 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';
 import { MatLine } from '@angular/material/core';
@@ -54,7 +52,7 @@ export declare class MatGridList implements MatGridListBase, OnInit, AfterConten
     private _tileStyler;
     /** Query list of tiles that are being rendered. */
     _tiles: QueryList<MatGridTile>;
-    constructor(_element: ElementRef<HTMLElement>, _dir: Directionality);
+    constructor(...args: unknown[]);
     /** Amount of columns in the grid list. */
     get cols(): number;
     set cols(value: NumberInput);
@@ -80,7 +78,7 @@ export declare class MatGridList implements MatGridListBase, OnInit, AfterConten
     private _layoutTiles;
     /** Sets style on the main grid-list element, given the style name and value. */
     _setListStyle(style: [string, string | null] | null): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatGridList, [null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatGridList, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatGridList, "mat-grid-list", ["matGridList"], { "cols": { "alias": "cols"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; }, {}, ["_tiles"], ["*"], true, never>;
 }
 
@@ -102,10 +100,10 @@ export declare class MatGridListModule {
 
 export declare class MatGridTile {
     private _element;
-    _gridList?: MatGridListBase | undefined;
+    _gridList?: MatGridListBase | null | undefined;
     _rowspan: number;
     _colspan: number;
-    constructor(_element: ElementRef<HTMLElement>, _gridList?: MatGridListBase | undefined);
+    constructor(...args: unknown[]);
     /** Amount of rows that the grid tile takes up. */
     get rowspan(): number;
     set rowspan(value: NumberInput);
@@ -117,7 +115,7 @@ export declare class MatGridTile {
      * "Changed after checked" errors that would occur with HostBinding.
      */
     _setStyle(property: string, value: any): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatGridTile, [null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatGridTile, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatGridTile, "mat-grid-tile", ["matGridTile"], { "rowspan": { "alias": "rowspan"; "required": false; }; "colspan": { "alias": "colspan"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
@@ -142,7 +140,7 @@ export declare class MatGridTileHeaderCssMatStyler {
 export declare class MatGridTileText implements AfterContentInit {
     private _element;
     _lines: QueryList<MatLine>;
-    constructor(_element: ElementRef<HTMLElement>);
+    constructor(...args: unknown[]);
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatGridTileText, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatGridTileText, "mat-grid-tile-header, mat-grid-tile-footer", never, {}, {}, ["_lines"], ["[mat-grid-avatar], [matGridAvatar]", "[mat-line], [matLine]", "*"], true, never>;

package/icon/_icon-theme.scss

@@ -17,8 +17,8 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs color theme styles for the mat-icon.
@@ -29,11 +29,12 @@
 @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-mat-icon.$prefix,
-        tokens-mat-icon.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-icon.$prefix,
+        tokens-mat-icon.get-color-tokens($theme)
+      );
     }
 
     .mat-icon {
@@ -57,8 +58,8 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs density theme styles for the mat-icon.
@@ -66,17 +67,24 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-icon.$prefix,
+      tokens: tokens-mat-icon.get-token-slots(),
+    ),
+  );
 }
 
 /// 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,
-    (prefix: tokens-mat-icon.$prefix, tokens: tokens-mat-icon.get-token-slots()),
-  );
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
@@ -88,8 +96,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {
     @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);
@@ -106,7 +113,8 @@
 
 @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');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   $mat-icon-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-icon.$prefix, $mat-icon-tokens);
 }

package/icon/index.d.ts

@@ -118,7 +118,7 @@ export declare function MAT_ICON_LOCATION_FACTORY(): MatIconLocation;
  * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
  *   font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a
  *   CSS class which causes the glyph to be displayed via a :before selector, as in
- *   https://fortawesome.github.io/Font-Awesome/examples/
+ *   https://fontawesome-v4.github.io/examples/
  *   Example:
  *     `<mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>`
  */
@@ -165,7 +165,7 @@ export declare class MatIcon implements OnInit, AfterViewChecked, OnDestroy {
     private _elementsWithExternalReferences?;
     /** Subscription to the current in-progress SVG icon request. */
     private _currentIconFetch;
-    constructor(_elementRef: ElementRef<HTMLElement>, _iconRegistry: MatIconRegistry, ariaHidden: string, _location: MatIconLocation, _errorHandler: ErrorHandler, defaults?: MatIconDefaultOptions);
+    constructor(...args: unknown[]);
     /**
      * Splits an svgIcon binding value into its icon set and icon name components.
      * Returns a 2-element array of [(icon set), (icon name)].
@@ -206,7 +206,7 @@ export declare class MatIcon implements OnInit, AfterViewChecked, OnDestroy {
     private _cacheChildrenWithExternalReferences;
     /** Sets a new SVG icon with a particular name. */
     private _updateSvgIcon;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatIcon, [null, null, { attribute: "aria-hidden"; }, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatIcon, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatIcon, "mat-icon", ["matIcon"], { "color": { "alias": "color"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "fontSet": { "alias": "fontSet"; "required": false; }; "fontIcon": { "alias": "fontIcon"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_inline: unknown;
 }

package/input/_input-theme.scss

@@ -7,44 +7,50 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 @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 {}
 }
 
 @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: ()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: '',
+      tokens: (),
+    ),
   );
 }
 
+@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-input') {
     @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);
@@ -61,5 +67,6 @@
 
 @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'
+  );
 }

package/input/index.d.ts

@@ -1,10 +1,8 @@
 import { AfterViewInit } from '@angular/core';
-import { AutofillMonitor } from '@angular/cdk/text-field';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { DoCheck } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
 import * as i2 from '@angular/material/form-field';
@@ -18,12 +16,11 @@ import { MatLabel } from '@angular/material/form-field';
 import { MatPrefix } from '@angular/material/form-field';
 import { MatSuffix } from '@angular/material/form-field';
 import { NgControl } from '@angular/forms';
-import { NgForm } from '@angular/forms';
-import { NgZone } from '@angular/core';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { Subject } from 'rxjs';
+import { WritableSignal } from '@angular/core';
 
 
 /** @docs-private */
@@ -31,10 +28,15 @@ export declare function getMatInputUnsupportedTypeError(type: string): Error;
 
 declare namespace i3 {
     export {
+        MatInputConfig,
+        MAT_INPUT_CONFIG,
         MatInput
     }
 }
 
+/** Injection token that can be used to provide the default options for the input. */
+export declare const MAT_INPUT_CONFIG: InjectionToken<MatInputConfig>;
+
 /**
  * This token is used to inject the object whose value should be set into `MatInput`. If none is
  * provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide
@@ -42,7 +44,7 @@ declare namespace i3 {
  * value to them.
  */
 export declare const MAT_INPUT_VALUE_ACCESSOR: InjectionToken<{
-    value: any;
+    value: any | WritableSignal<any>;
 }>;
 
 export { MatError }
@@ -57,13 +59,15 @@ export declare class MatInput implements MatFormFieldControl<any>, OnChanges, On
     ngControl: NgControl;
     private _autofillMonitor;
     private _ngZone;
-    protected _formField?: MatFormField | undefined;
+    protected _formField?: MatFormField | null | undefined;
     protected _uid: string;
     protected _previousNativeValue: any;
     private _inputValueAccessor;
+    private _signalBasedValueAccessor?;
     private _previousPlaceholder;
     private _errorStateTracker;
     private _webkitBlinkWheelListenerAttached;
+    private _config;
     /** Whether the component is being rendered on the server. */
     readonly _isServer: boolean;
     /** Whether the component is a native html select. */
@@ -145,11 +149,13 @@ export declare class MatInput implements MatFormFieldControl<any>, OnChanges, On
     get readonly(): boolean;
     set readonly(value: BooleanInput);
     private _readonly;
+    /** Whether the input should remain interactive when it is disabled. */
+    disabledInteractive: boolean;
     /** Whether the input is in an error state. */
     get errorState(): boolean;
     set errorState(value: boolean);
     protected _neverEmptyInputTypes: string[];
-    constructor(_elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>, _platform: Platform, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any, _autofillMonitor: AutofillMonitor, _ngZone: NgZone, _formField?: MatFormField | undefined);
+    constructor(...args: unknown[]);
     ngAfterViewInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
@@ -206,8 +212,17 @@ export declare class MatInput implements MatFormFieldControl<any>, OnChanges, On
      * @docs-private
      */
     private _ensureWheelDefaultBehavior;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatInput, [null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatInput, "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", ["matInput"], { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "value": { "alias": "value"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, true, never>;
+    /** Gets the value to set on the `readonly` attribute. */
+    protected _getReadonlyAttribute(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatInput, "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", ["matInput"], { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "value": { "alias": "value"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_disabledInteractive: unknown;
+}
+
+/** Object that can be used to configure the default options for the input. */
+export declare interface MatInputConfig {
+    /** Whether disabled inputs should be interactive. */
+    disabledInteractive?: boolean;
 }
 
 export declare class MatInputModule {

package/list/_list-inherited-structure.scss

@@ -1,4 +1,3 @@
-@use '@angular/cdk';
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/m2/mdc/list' as tokens-mdc-list;
 @use '../core/tokens/token-utils';
@@ -94,6 +93,7 @@
       }
     }
 
+    // Not used in Material, but some internal tests seem to depend on it.
     &.mdc-list-item--selected::before,
     &.mdc-list-item--selected:focus::before,
     &:not(.mdc-list-item--selected):focus::before {
@@ -103,20 +103,8 @@
       height: 100%;
       top: 0;
       left: 0;
-      border: 1px solid transparent;
-      border-radius: inherit;
       content: '';
       pointer-events: none;
-
-      @include cdk.high-contrast(active, off) {
-        border-color: CanvasText;
-      }
-    }
-
-    &.mdc-list-item--selected:focus::before,
-    &.mdc-list-item--selected::before {
-      border-width: 3px;
-      border-style: double;
     }
   }
 

package/list/_list-item-hcm-indicator.scss

@@ -5,7 +5,7 @@
 // its background color. Since that doesn't work in HCM, this mixin provides an alternative by
 // rendering a circle.
 @mixin private-high-contrast-list-item-indicator() {
-  @include cdk.high-contrast(active, off) {
+  @include cdk.high-contrast {
     &::after {
       $size: 10px;
       content: '';

package/list/_list-theme.scss

@@ -15,13 +15,16 @@
   // Add default values for tokens not related to color, typography, or density.
   @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-list.$prefix, tokens-mdc-list.get-unthemable-tokens());
+        tokens-mdc-list.$prefix,
+        tokens-mdc-list.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mat-list.$prefix, tokens-mat-list.get-unthemable-tokens());
+        tokens-mat-list.$prefix,
+        tokens-mat-list.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -29,26 +32,33 @@
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-        tokens-mdc-list.$prefix, tokens-mdc-list.get-color-tokens($theme));
+        tokens-mdc-list.$prefix,
+        tokens-mdc-list.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-list.$prefix, tokens-mat-list.get-color-tokens($theme));
+        tokens-mat-list.$prefix,
+        tokens-mat-list.get-color-tokens($theme)
+      );
     }
 
     .mdc-list-item__start,
     .mdc-list-item__end {
       @include token-utils.create-token-values(
-        tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, primary));
+        tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-color-tokens($theme, primary)
+      );
     }
 
     .mat-accent {
       .mdc-list-item__start,
       .mdc-list-item__end {
         @include token-utils.create-token-values(
-          tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, accent));
+          tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme, accent)
+        );
       }
     }
 
@@ -56,21 +66,29 @@
       .mdc-list-item__start,
       .mdc-list-item__end {
         @include token-utils.create-token-values(
-          tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, warn));
+          tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme, warn)
+        );
       }
     }
 
     .mat-mdc-list-option {
       @include token-utils.create-token-values(
-        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, primary));
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme, primary)
+      );
     }
     .mat-mdc-list-option.mat-accent {
       @include token-utils.create-token-values(
-        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, accent));
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme, accent)
+      );
     }
     .mat-mdc-list-option.mat-warn {
       @include token-utils.create-token-values(
-        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, warn));
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme, warn)
+      );
     }
 
     // There is no token for activated color on nav list.
@@ -101,21 +119,26 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     $density-scale: inspection.get-theme-density($theme);
 
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-        tokens-mdc-list.$prefix, tokens-mdc-list.get-density-tokens($theme));
+        tokens-mdc-list.$prefix,
+        tokens-mdc-list.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-list.$prefix, tokens-mat-list.get-density-tokens($theme));
+        tokens-mat-list.$prefix,
+        tokens-mat-list.get-density-tokens($theme)
+      );
     }
 
     .mdc-list-item__start,
     .mdc-list-item__end {
       @include token-utils.create-token-values(
-        tokens-mdc-radio.$prefix, tokens-mdc-radio.get-density-tokens($theme));
+        tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-density-tokens($theme)
+      );
     }
 
     // TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based
@@ -126,25 +149,31 @@
       &.mdc-list-item--with-leading-checkbox,
       &.mdc-list-item--with-leading-icon {
         &.mdc-list-item--with-one-line {
-          height: map.get((
-            0: 56px,
-            -1: 52px,
-            -2: 48px,
-            -3: 44px,
-            -4: 40px,
-            -5: 40px,
-          ), $density-scale);
+          height: map.get(
+            (
+              0: 56px,
+              -1: 52px,
+              -2: 48px,
+              -3: 44px,
+              -4: 40px,
+              -5: 40px,
+            ),
+            $density-scale
+          );
         }
 
         &.mdc-list-item--with-two-lines {
-          height: map.get((
-            0: 72px,
-            -1: 68px,
-            -2: 64px,
-            -3: 60px,
-            -4: 56px,
-            -5: 56px,
-          ), $density-scale);
+          height: map.get(
+            (
+              0: 72px,
+              -1: 68px,
+              -2: 64px,
+              -3: 60px,
+              -4: 56px,
+              -5: 56px,
+            ),
+            $density-scale
+          );
         }
       }
     }
@@ -154,13 +183,16 @@
 @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-list.$prefix, tokens-mdc-list.get-typography-tokens($theme));
+        tokens-mdc-list.$prefix,
+        tokens-mdc-list.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-list.$prefix, tokens-mat-list.get-typography-tokens($theme));
+        tokens-mat-list.$prefix,
+        tokens-mat-list.get-typography-tokens($theme)
+      );
     }
 
     // MDC does not have tokens for the subheader.
@@ -172,20 +204,29 @@
   }
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-list.$prefix, tokens: tokens-mat-list.get-token-slots()),
-    (prefix: tokens-mdc-list.$prefix, tokens: tokens-mdc-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-list.$prefix,
+      tokens: tokens-mat-list.get-token-slots(),
+    ),
+    (
+      namespace: tokens-mdc-list.$prefix,
+      tokens: tokens-mdc-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-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);
@@ -202,7 +243,8 @@
 
 @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'
+  );
   $mdc-list-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-list.$prefix);
   $mat-list-tokens: token-utils.get-tokens-for($tokens, tokens-mat-list.$prefix);
   @include token-utils.create-token-values(tokens-mdc-list.$prefix, $mdc-list-tokens);