@angular/material-experimental 13.1.0 → 13.2.0-next.1

package/mdc-list/_interactive-list-theme.scss

@@ -14,21 +14,27 @@
       background: $active-base-color;
     }
 
-    &.mdc-list-item--selected::before {
-      background: $selected-color;
-      opacity: mdc-ripple.states-opacity($selected-color, selected);
+    &:not(:focus):not(.mdc-list-item--disabled):hover::before {
+      opacity: mdc-ripple.states-opacity($active-base-color, hover);
     }
 
-    &:focus::before {
-      opacity: mdc-ripple.states-opacity($active-base-color, focus);
+    &.mdc-list-item--selected {
+      &::before {
+        background: $selected-color;
+        opacity: mdc-ripple.states-opacity($selected-color, selected);
+      }
+
+      &:not(:focus):not(.mdc-list-item--disabled):hover::before {
+        // The hover and selected opacities need to be combined to match with what the MDC
+        // ripple state would render. More details here:
+        // https://github.com/material-components/material-components-web/blob/348665978ce73694ad4518626dd70cdf5b984113/packages/mdc-ripple/_ripple-theme.scss#L450.
+        opacity: mdc-ripple.states-opacity($selected-color, hover) +
+                 mdc-ripple.states-opacity($selected-color, selected);
+      }
     }
-  }
 
-  // MDC still shows focus/selected state if the item is disabled.
-  // Just hover styles should not show up for disabled items.
-  .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled):not(.mdc-list-item--selected) {
-    &:not(:focus):hover::before {
-      opacity: mdc-ripple.states-opacity($active-base-color, hover);
+    &:focus::before {
+      opacity: mdc-ripple.states-opacity($active-base-color, focus);
     }
   }
 }

package/mdc-list/_list-option-theme.scss

@@ -6,9 +6,9 @@
 // Mixin that overrides the selected item and checkbox colors for list options. By
 // default, the MDC list uses the `primary` color for list items. The MDC checkbox
 // inside list options by default uses the `primary` color too.
-@mixin private-list-option-color-override($color) {
+@mixin private-list-option-color-override($color, $mdcColor) {
   & .mdc-list-item__start, & .mdc-list-item__end {
-    @include checkbox-theme.private-checkbox-styles-with-color($color);
+    @include checkbox-theme.private-checkbox-styles-with-color($color, $mdcColor);
   }
 }
 

package/mdc-list/_list-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@material/list/evolution-mixins' as mdc-list;
 @use './interactive-list-theme';
 @use './list-option-theme';
@@ -11,6 +12,9 @@
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
+  $primary: theming.get-color-from-palette(map.get($config, primary));
+  $accent: theming.get-color-from-palette(map.get($config, accent));
+  $warn: theming.get-color-from-palette(map.get($config, warn));
 
   // MDC's state styles are tied in with their ripple. Since we don't use the MDC
   // ripple, we need to add the hover, focus and selected states manually.
@@ -20,13 +24,13 @@
     @include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-list-option {
-      @include list-option-theme.private-list-option-color-override(primary);
+      @include list-option-theme.private-list-option-color-override($primary, primary);
     }
     .mat-mdc-list-option.mat-accent {
-      @include list-option-theme.private-list-option-color-override(secondary);
+      @include list-option-theme.private-list-option-color-override($accent, secondary);
     }
     .mat-mdc-list-option.mat-warn {
-      @include list-option-theme.private-list-option-color-override(error);
+      @include list-option-theme.private-list-option-color-override($warn, error);
     }
   }
 }

package/mdc-list/list-base.d.ts

@@ -7,33 +7,55 @@
  */
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
-import { AfterContentInit, ElementRef, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { AfterViewInit, ElementRef, NgZone, OnDestroy, QueryList } from '@angular/core';
 import { RippleConfig, RippleGlobalOptions, RippleTarget } from '@angular/material-experimental/mdc-core';
+import { MatListItemLine, MatListItemTitle } from './list-item-sections';
 import * as i0 from "@angular/core";
-export declare abstract class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarget {
+export declare abstract class MatListItemBase implements AfterViewInit, OnDestroy, RippleTarget {
     _elementRef: ElementRef<HTMLElement>;
     protected _ngZone: NgZone;
     private _listBase;
     private _platform;
     /** Query list matching list-item line elements. */
-    abstract lines: QueryList<ElementRef<Element>>;
-    /** Element reference referring to the primary list item text. */
-    abstract _itemText: ElementRef<HTMLElement>;
+    abstract _lines: QueryList<MatListItemLine> | undefined;
+    /** Query list matching list-item title elements. */
+    abstract _titles: QueryList<MatListItemTitle> | undefined;
+    /**
+     * Element reference to the unscoped content in a list item.
+     *
+     * Unscoped content is user-projected text content in a list item that is
+     * not part of an explicit line or title.
+     */
+    abstract _unscopedContent: ElementRef<HTMLSpanElement> | undefined;
     /** Host element for the list item. */
     _hostElement: HTMLElement;
     /** Whether animations are disabled. */
     _noopAnimations: boolean;
     _avatars: QueryList<never>;
     _icons: QueryList<never>;
+    /**
+     * The number of lines this list item should reserve space for. If not specified,
+     * lines are inferred based on the projected content.
+     *
+     * Explicitly specifying the number of lines is useful if you want to acquire additional
+     * space and enable the wrapping of text. The unscoped text content of a list item will
+     * always be able to take up the remaining space of the item, unless it represents the title.
+     *
+     * A maximum of three lines is supported as per the Material Design specification.
+     */
+    set lines(lines: number | string | null);
+    _explicitLines: number | null;
     get disableRipple(): boolean;
     set disableRipple(value: boolean);
     private _disableRipple;
     /** Whether the list-item is disabled. */
     get disabled(): boolean;
-    set disabled(value: boolean);
+    set disabled(value: BooleanInput);
     private _disabled;
     private _subscriptions;
     private _rippleRenderer;
+    /** Whether the list item has unscoped text content. */
+    _hasUnscopedTextContent: boolean;
     /**
      * Implemented as part of `RippleTarget`.
      * @docs-private
@@ -44,8 +66,8 @@ export declare abstract class MatListItemBase implements AfterContentInit, OnDes
      * @docs-private
      */
     get rippleDisabled(): boolean;
-    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _listBase: MatListBase, _platform: Platform, globalRippleOptions?: RippleGlobalOptions, animationMode?: string);
-    ngAfterContentInit(): void;
+    protected constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _listBase: MatListBase, _platform: Platform, globalRippleOptions?: RippleGlobalOptions, animationMode?: string);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Gets the label for the list item. This is used for the typeahead. */
     _getItemLabel(): string;
@@ -53,27 +75,46 @@ export declare abstract class MatListItemBase implements AfterContentInit, OnDes
     _hasIconOrAvatar(): boolean;
     private _initInteractiveListItem;
     /**
-     * Subscribes to changes in `MatLine` content children and annotates them
-     * appropriately when they change.
+     * Subscribes to changes in the projected title and lines. Triggers a
+     * item lines update whenever a change occurs.
      */
-    private _monitorLines;
-    static ngAcceptInputType_disabled: BooleanInput;
-    static ngAcceptInputType_disableRipple: BooleanInput;
+    private _monitorProjectedLinesAndTitle;
+    /**
+     * Updates the lines of the list item. Based on the projected user content and optional
+     * explicit lines setting, the visual appearance of the list item is determined.
+     *
+     * This method should be invoked whenever the projected user content changes, or
+     * when the explicit lines have been updated.
+     *
+     * @param recheckUnscopedContent Whether the projected unscoped content should be re-checked.
+     *   The unscoped content is not re-checked for every update as it is a rather expensive check
+     *   for content that is expected to not change very often.
+     */
+    _updateItemLines(recheckUnscopedContent: boolean): void;
+    /**
+     * Infers the number of lines based on the projected user content. This is useful
+     * if no explicit number of lines has been specified on the list item.
+     *
+     * The number of lines is inferred based on whether there is a title, the number of
+     * additional lines (secondary/tertiary). An additional line is acquired if there is
+     * unscoped text content.
+     */
+    private _inferLinesFromContent;
+    /** Checks whether the list item has unscoped text content. */
+    private _checkDomForUnscopedTextContent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatListItemBase, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatListItemBase, never, never, { "disableRipple": "disableRipple"; "disabled": "disabled"; }, {}, ["_avatars", "_icons"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatListItemBase, never, never, { "lines": "lines"; "disableRipple": "disableRipple"; "disabled": "disabled"; }, {}, ["_avatars", "_icons"]>;
 }
 export declare abstract class MatListBase {
     _isNonInteractive: boolean;
     /** Whether ripples for all list items is disabled. */
     get disableRipple(): boolean;
-    set disableRipple(value: boolean);
+    set disableRipple(value: BooleanInput);
     private _disableRipple;
     /** Whether all list items are disabled. */
     get disabled(): boolean;
-    set disabled(value: boolean);
+    set disabled(value: BooleanInput);
     private _disabled;
-    static ngAcceptInputType_disabled: BooleanInput;
-    static ngAcceptInputType_disableRipple: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatListBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatListBase, never, never, { "disableRipple": "disableRipple"; "disabled": "disabled"; }, {}, never>;
 }

package/mdc-list/list-item-sections.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { ElementRef } from '@angular/core';
+import { ListOption } from './list-option-types';
+import * as i0 from "@angular/core";
+/**
+ * Directive capturing the title of a list item. A list item usually consists of a
+ * title and optional secondary or tertiary lines.
+ *
+ * Text content for the title never wraps. There can only be a single title per list item.
+ */
+export declare class MatListItemTitle {
+    _elementRef: ElementRef<HTMLElement>;
+    constructor(_elementRef: ElementRef<HTMLElement>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatListItemTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatListItemTitle, "[matListItemTitle]", never, {}, {}, never>;
+}
+/**
+ * Directive capturing a line in a list item. A list item usually consists of a
+ * title and optional secondary or tertiary lines.
+ *
+ * Text content inside a line never wraps. There can be at maximum two lines per list item.
+ */
+export declare class MatListItemLine {
+    _elementRef: ElementRef<HTMLElement>;
+    constructor(_elementRef: ElementRef<HTMLElement>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatListItemLine, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatListItemLine, "[matListItemLine]", never, {}, {}, never>;
+}
+/**
+ * Directive matching an optional meta section for list items.
+ *
+ * List items can reserve space at the end of an item to display a control,
+ * button or additional text content.
+ */
+export declare class MatListItemMeta {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatListItemMeta, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatListItemMeta, "[matListItemMeta]", never, {}, {}, never>;
+}
+/**
+ * @docs-private
+ *
+ * MDC uses the very intuitively named classes `.mdc-list-item__start` and `.mat-list-item__end`
+ * to position content such as icons or checkboxes that comes either before or after the text
+ * content respectively. This directive detects the placement of the checkbox and applies the
+ * correct MDC class to position the icon/avatar on the opposite side.
+ */
+export declare class _MatListItemGraphicBase {
+    _listOption: ListOption;
+    constructor(_listOption: ListOption);
+    _isAlignedAtStart(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MatListItemGraphicBase, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatListItemGraphicBase, never, never, {}, {}, never>;
+}
+/**
+ * Directive matching an optional avatar within a list item.
+ *
+ * List items can reserve space at the beginning of an item to display an avatar.
+ */
+export declare class MatListItemAvatar extends _MatListItemGraphicBase {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatListItemAvatar, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatListItemAvatar, "[matListItemAvatar]", never, {}, {}, never>;
+}
+/**
+ * Directive matching an optional icon within a list item.
+ *
+ * List items can reserve space at the beginning of an item to display an icon.
+ */
+export declare class MatListItemIcon extends _MatListItemGraphicBase {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatListItemIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatListItemIcon, "[matListItemIcon]", never, {}, {}, never>;
+}

package/mdc-list/list-option.d.ts

@@ -12,6 +12,7 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, On
 import { RippleGlobalOptions, ThemePalette } from '@angular/material-experimental/mdc-core';
 import { MatListBase, MatListItemBase } from './list-base';
 import { ListOption, MatListOptionCheckboxPosition } from './list-option-types';
+import { MatListItemLine, MatListItemTitle } from './list-item-sections';
 import * as i0 from "@angular/core";
 /**
  * Injection token that can be used to reference instances of an `SelectionList`. It serves
@@ -36,19 +37,16 @@ export interface SelectionList extends MatListBase {
 export declare class MatListOption extends MatListItemBase implements ListOption, OnInit, OnDestroy {
     _selectionList: SelectionList;
     private _changeDetectorRef;
-    /**
-     * This is set to true after the first OnChanges cycle so we don't
-     * clear the value of `selected` in the first cycle.
-     */
-    private _inputsInitialized;
+    _lines: QueryList<MatListItemLine>;
+    _titles: QueryList<MatListItemTitle>;
+    _unscopedContent: ElementRef<HTMLSpanElement>;
+    _itemText: ElementRef<HTMLElement>;
     /**
      * Emits when the selected state of the option has changed.
      * Use to facilitate two-data binding to the `selected` property.
      * @docs-private
      */
     readonly selectedChange: EventEmitter<boolean>;
-    _itemText: ElementRef<HTMLElement>;
-    lines: QueryList<ElementRef<Element>>;
     /** Whether the label should appear before or after the checkbox. Defaults to 'after' */
     checkboxPosition: MatListOptionCheckboxPosition;
     /** Theme color of the list option. This sets the color of the checkbox. */
@@ -61,8 +59,13 @@ export declare class MatListOption extends MatListItemBase implements ListOption
     private _value;
     /** Whether the option is selected. */
     get selected(): boolean;
-    set selected(value: boolean);
+    set selected(value: BooleanInput);
     private _selected;
+    /**
+     * This is set to true after the first OnChanges cycle so we don't
+     * clear the value of `selected` in the first cycle.
+     */
+    private _inputsInitialized;
     constructor(element: ElementRef, ngZone: NgZone, platform: Platform, _selectionList: SelectionList, _changeDetectorRef: ChangeDetectorRef, globalRippleOptions?: RippleGlobalOptions, animationMode?: string);
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -90,7 +93,6 @@ export declare class MatListOption extends MatListItemBase implements ListOption
      * list changed.
      */
     _markForCheck(): void;
-    static ngAcceptInputType_selected: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatListOption, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatListOption, "mat-list-option", ["matListOption"], { "checkboxPosition": "checkboxPosition"; "color": "color"; "value": "value"; "selected": "selected"; }, { "selectedChange": "selectedChange"; }, ["lines"], ["[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]", "*", "mat-divider"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatListOption, "mat-list-option", ["matListOption"], { "checkboxPosition": "checkboxPosition"; "color": "color"; "value": "value"; "selected": "selected"; }, { "selectedChange": "selectedChange"; }, ["_lines", "_titles"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "mat-divider"]>;
 }

package/mdc-list/list.d.ts

@@ -9,15 +9,19 @@ import { Platform } from '@angular/cdk/platform';
 import { ElementRef, NgZone, QueryList } from '@angular/core';
 import { RippleGlobalOptions } from '@angular/material-experimental/mdc-core';
 import { MatListBase, MatListItemBase } from './list-base';
+import { MatListItemLine, MatListItemMeta, MatListItemTitle } from './list-item-sections';
 import * as i0 from "@angular/core";
 export declare class MatList extends MatListBase {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatList, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatList, "mat-list", ["matList"], {}, {}, never, ["*"]>;
 }
 export declare class MatListItem extends MatListItemBase {
-    lines: QueryList<ElementRef<Element>>;
+    _lines: QueryList<MatListItemLine>;
+    _titles: QueryList<MatListItemTitle>;
+    _meta: QueryList<MatListItemMeta>;
+    _unscopedContent: ElementRef<HTMLSpanElement>;
     _itemText: ElementRef<HTMLElement>;
     constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase, platform: Platform, globalRippleOptions?: RippleGlobalOptions, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatListItem, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatListItem, "mat-list-item, a[mat-list-item], button[mat-list-item]", ["matListItem"], {}, {}, ["lines"], ["[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]", "[mat-line],[matLine]", "*", "mat-divider"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatListItem, "mat-list-item, a[mat-list-item], button[mat-list-item]", ["matListItem"], {}, {}, ["_lines", "_titles", "_meta"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "[matListItemMeta]", "mat-divider"]>;
 }

package/mdc-list/module.d.ts

@@ -4,12 +4,14 @@ import * as i2 from "./action-list";
 import * as i3 from "./nav-list";
 import * as i4 from "./selection-list";
 import * as i5 from "./list-option";
-import * as i6 from "./list-styling";
-import * as i7 from "@angular/common";
-import * as i8 from "@angular/material-experimental/mdc-core";
-import * as i9 from "@angular/material/divider";
+import * as i6 from "./subheader";
+import * as i7 from "./list-item-sections";
+import * as i8 from "@angular/cdk/observers";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/material-experimental/mdc-core";
+import * as i11 from "@angular/material/divider";
 export declare class MatListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatListModule, [typeof i1.MatList, typeof i2.MatActionList, typeof i3.MatNavList, typeof i4.MatSelectionList, typeof i1.MatListItem, typeof i5.MatListOption, typeof i6.MatListAvatarCssMatStyler, typeof i6.MatListIconCssMatStyler, typeof i6.MatListSubheaderCssMatStyler, typeof i6.MatListGraphicAlignmentStyler], [typeof i7.CommonModule, typeof i8.MatCommonModule, typeof i8.MatLineModule, typeof i8.MatRippleModule, typeof i8.MatPseudoCheckboxModule], [typeof i1.MatList, typeof i2.MatActionList, typeof i3.MatNavList, typeof i4.MatSelectionList, typeof i1.MatListItem, typeof i5.MatListOption, typeof i6.MatListAvatarCssMatStyler, typeof i6.MatListIconCssMatStyler, typeof i6.MatListSubheaderCssMatStyler, typeof i6.MatListGraphicAlignmentStyler, typeof i9.MatDividerModule, typeof i8.MatLineModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatListModule, [typeof i1.MatList, typeof i2.MatActionList, typeof i3.MatNavList, typeof i4.MatSelectionList, typeof i1.MatListItem, typeof i5.MatListOption, typeof i6.MatListSubheaderCssMatStyler, typeof i7.MatListItemAvatar, typeof i7.MatListItemIcon, typeof i7.MatListItemLine, typeof i7.MatListItemTitle, typeof i7.MatListItemMeta], [typeof i8.ObserversModule, typeof i9.CommonModule, typeof i10.MatCommonModule, typeof i10.MatRippleModule, typeof i10.MatPseudoCheckboxModule], [typeof i1.MatList, typeof i2.MatActionList, typeof i3.MatNavList, typeof i4.MatSelectionList, typeof i1.MatListItem, typeof i5.MatListOption, typeof i7.MatListItemAvatar, typeof i7.MatListItemIcon, typeof i6.MatListSubheaderCssMatStyler, typeof i11.MatDividerModule, typeof i7.MatListItemLine, typeof i7.MatListItemTitle, typeof i7.MatListItemMeta]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatListModule>;
 }

package/mdc-list/public-api.d.ts

@@ -11,7 +11,8 @@ export * from './module';
 export * from './nav-list';
 export * from './selection-list';
 export * from './list-option';
-export * from './list-styling';
+export * from './subheader';
+export * from './list-item-sections';
 export { MatListOptionCheckboxPosition } from './list-option-types';
 export { MatListOption } from './list-option';
 export { MAT_LIST, MAT_NAV_LIST, MAT_SELECTION_LIST_VALUE_ACCESSOR } from '@angular/material/list';

package/mdc-list/selection-list.d.ts

@@ -53,7 +53,7 @@ export declare class MatSelectionList extends MatInteractiveListBase<MatListOpti
     compareWith: (o1: any, o2: any) => boolean;
     /** Whether selection is limited to one or multiple items (default multiple). */
     get multiple(): boolean;
-    set multiple(value: boolean);
+    set multiple(value: BooleanInput);
     /** The currently selected options. */
     selectedOptions: SelectionModel<MatListOption>;
     /** View to model callback that should be called whenever the selected options change. */
@@ -113,7 +113,6 @@ export declare class MatSelectionList extends MatInteractiveListBase<MatListOpti
     private _setAllOptionsSelected;
     /** The option components contained within this selection-list. */
     get options(): QueryList<MatListOption>;
-    static ngAcceptInputType_multiple: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectionList, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatSelectionList, "mat-selection-list", ["matSelectionList"], { "color": "color"; "compareWith": "compareWith"; "multiple": "multiple"; }, { "selectionChange": "selectionChange"; }, ["_items"], ["*"]>;
 }

package/mdc-list/subheader.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+/**
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
+ * @docs-private
+ */
+export declare class MatListSubheaderCssMatStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatListSubheaderCssMatStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatListSubheaderCssMatStyler, "[mat-subheader], [matSubheader]", never, {}, {}, never>;
+}

package/mdc-list/testing/list-harness-filters.d.ts

@@ -15,6 +15,14 @@ export interface NavListHarnessFilters extends BaseHarnessFilters {
 export interface SelectionListHarnessFilters extends BaseHarnessFilters {
 }
 export interface BaseListItemHarnessFilters extends BaseHarnessFilters {
+    title?: string | RegExp;
+    secondaryText?: string | RegExp | null;
+    tertiaryText?: string | RegExp | null;
+    fullText?: string | RegExp;
+    /**
+     * @deprecated Use the `fullText` filter instead.
+     * @breaking-change 16.0.0
+     */
     text?: string | RegExp;
 }
 export interface ListItemHarnessFilters extends BaseListItemHarnessFilters {

package/mdc-list/testing/list-item-harness-base.d.ts

@@ -27,18 +27,49 @@ export declare class MatSubheaderHarness extends ComponentHarness {
 export declare const enum MatListItemSection {
     CONTENT = ".mdc-list-item__content"
 }
+/** Enum describing the possible variants of a list item. */
+export declare const enum MatListItemType {
+    ONE_LINE_ITEM = 0,
+    TWO_LINE_ITEM = 1,
+    THREE_LINE_ITEM = 2
+}
 /**
  * Shared behavior among the harnesses for the various `MatListItem` flavors.
  * @docs-private
  */
 export declare abstract class MatListItemHarnessBase extends ContentContainerComponentHarness<MatListItemSection> {
     private _lines;
+    private _primaryText;
     private _avatar;
     private _icon;
-    /** Gets the full text content of the list item. */
+    private _unscopedTextContent;
+    /** Gets the type of the list item, currently describing how many lines there are. */
+    getType(): Promise<MatListItemType>;
+    /**
+     * Gets the full text content of the list item, excluding text
+     * from icons and avatars.
+     *
+     * @deprecated Use the `getFullText` method instead.
+     * @breaking-change 16.0.0
+     */
     getText(): Promise<string>;
-    /** Gets the lines of text (`mat-line` elements) in this nav list item. */
-    getLinesText(): Promise<string[]>;
+    /**
+     * Gets the full text content of the list item, excluding text
+     * from icons and avatars.
+     */
+    getFullText(): Promise<string>;
+    /** Gets the title of the list item. */
+    getTitle(): Promise<string>;
+    /**
+     * Gets the secondary line text of the list item. Null if the list item
+     * does not have a secondary line.
+     */
+    getSecondaryText(): Promise<string | null>;
+    /**
+     * Gets the tertiary line text of the list item. Null if the list item
+     * does not have a tertiary line.
+     */
+    getTertiaryText(): Promise<string | null>;
     /** Whether this list item has an avatar. */
     hasAvatar(): Promise<boolean>;
     /** Whether this list item has an icon. */

package/mdc-list/testing/public-api.d.ts

@@ -10,4 +10,4 @@ export * from './list-harness';
 export * from './list-harness-filters';
 export * from './nav-list-harness';
 export * from './selection-list-harness';
-export { MatListItemSection } from './list-item-harness-base';
+export { MatListItemSection, MatSubheaderHarness, MatListItemType } from './list-item-harness-base';

package/mdc-progress-spinner/progress-spinner.d.ts

@@ -41,15 +41,15 @@ export declare class MatProgressSpinner extends _MatProgressSpinnerBase implemen
     private _value;
     /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
     get value(): number;
-    set value(v: number);
+    set value(v: NumberInput);
     private _diameter;
     /** The diameter of the progress spinner (will set width and height of svg). */
     get diameter(): number;
-    set diameter(size: number);
+    set diameter(size: NumberInput);
     private _strokeWidth;
     /** Stroke width of the progress spinner. */
     get strokeWidth(): number;
-    set strokeWidth(value: number);
+    set strokeWidth(value: NumberInput);
     /** The radius of the spinner, adjusted for stroke width. */
     _circleRadius(): number;
     /** The view box of the spinner's svg element. */
@@ -64,9 +64,6 @@ export declare class MatProgressSpinner extends _MatProgressSpinnerBase implemen
     ngOnDestroy(): void;
     /** Syncs the state of the progress spinner with the MDC foundation. */
     private _syncFoundation;
-    static ngAcceptInputType_diameter: NumberInput;
-    static ngAcceptInputType_strokeWidth: NumberInput;
-    static ngAcceptInputType_value: NumberInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatProgressSpinner, [null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatProgressSpinner, "mat-progress-spinner, mat-spinner", ["matProgressSpinner"], { "color": "color"; "mode": "mode"; "value": "value"; "diameter": "diameter"; "strokeWidth": "strokeWidth"; }, {}, never, never>;
 }

package/mdc-select/_select-theme.scss

@@ -1,7 +1,6 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
-@use '@material/select' as mdc-select;
 @use '@material/typography' as mdc-typography;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
@@ -15,38 +14,25 @@
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
 
-  // Save original values of MDC global variables. We need to save these so we can restore the
-  // variables to their original values and prevent unintended side effects from using this mixin.
-  $orig-ink-color: mdc-select.$ink-color;
-  $orig-label-color: mdc-select.$label-color;
-  $orig-disabled-label-color: mdc-select.$disabled-label-color;
-  $orig-dropdown-icon-color: mdc-select.$dropdown-icon-color;
-  $orig-disabled-dropdown-icon-color: mdc-select.$disabled-dropdown-icon-color;
-
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    mdc-select.$ink-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    mdc-select.$label-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
-    mdc-select.$disabled-label-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
-    mdc-select.$dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
-    mdc-select.$disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
-
+    $disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
     @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
     @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-select-value {
-      color: mdc-select.$ink-color;
+      color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     }
 
     .mat-mdc-select-placeholder {
-      color: mdc-select.$label-color;
+      color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
     }
 
     .mat-mdc-select-disabled .mat-mdc-select-value {
-      color: mdc-select.$disabled-label-color;
+      color: $disabled-color;
     }
 
     .mat-mdc-select-arrow {
-      color: mdc-select.$dropdown-icon-color;
+      color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
     }
 
     .mat-mdc-form-field {
@@ -69,17 +55,10 @@
       }
 
       .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
-        color: mdc-select.$disabled-dropdown-icon-color;
+        color: $disabled-color;
       }
     }
   }
-
-  // Restore original values of MDC global variables.
-  mdc-select.$ink-color: $orig-ink-color;
-  mdc-select.$label-color: $orig-label-color;
-  mdc-select.$disabled-label-color: $orig-disabled-label-color;
-  mdc-select.$dropdown-icon-color: $orig-dropdown-icon-color;
-  mdc-select.$disabled-dropdown-icon-color: $orig-disabled-dropdown-icon-color;
 }
 
 @mixin typography($config-or-theme) {