@angular/material-experimental 13.1.2 → 13.2.0-rc.0

package/mdc-chips/testing/chip-harness.d.ts

@@ -11,6 +11,7 @@ import { ChipAvatarHarnessFilters, ChipHarnessFilters, ChipRemoveHarnessFilters
 import { MatChipRemoveHarness } from './chip-remove-harness';
 /** Harness for interacting with a mat-chip in tests. */
 export declare class MatChipHarness extends ContentContainerComponentHarness {
+    protected _primaryAction: import("@angular/cdk/testing").AsyncFactoryFn<import("@angular/cdk/testing").TestElement>;
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a chip with specific attributes.

package/mdc-chips/testing/chip-row-harness.d.ts

@@ -15,4 +15,8 @@ export declare class MatChipRowHarness extends MatChipHarness {
      * Gets a `HarnessPredicate` that can be used to search for a chip row with specific attributes.
      */
     static with<T extends typeof MatChipHarness>(this: T, options?: ChipRowHarnessFilters): HarnessPredicate<InstanceType<T>>;
+    /** Whether the chip is editable. */
+    isEditable(): Promise<boolean>;
+    /** Whether the chip is currently being edited. */
+    isEditing(): Promise<boolean>;
 }

package/mdc-core/_core-theme.scss

@@ -1,8 +1,46 @@
 @use '../../material/core/theming/theming';
+@use '../../material/core/typography/typography';
 @use './option/option-theme';
 @use './option/optgroup-theme';
 @use './elevation';
 
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+
+  @include option-theme.color($config);
+  @include optgroup-theme.color($config);
+
+  @if $config != null {
+    // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+    // `mat-mdc-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the
+    // element is elevated.
+    @for $zValue from 0 through 24 {
+      $selector: elevation.$prefix + $zValue;
+      // We need the `mat-mdc-elevation-specific`, because some MDC mixins
+      // come with elevation baked in and we don't have a way of removing it.
+      .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
+        @include elevation.private-theme-elevation($zValue, $config);
+      }
+    }
+  }
+}
+
+@mixin typography($config-or-theme) {
+  $config: typography.private-typography-to-2018-config(
+          theming.get-typography-config($config-or-theme));
+
+  @include option-theme.typography($config-or-theme);
+  @include optgroup-theme.typography($config-or-theme);
+}
+
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+
+  @include option-theme.density($density-scale);
+  @include optgroup-theme.density($density-scale);
+}
+
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -12,22 +50,17 @@
   // the imported themes (such as `mat-ripple-theme`) should not report again.
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
     $color: theming.get-color-config($theme);
-
-    @include option-theme.theme($theme);
-    @include optgroup-theme.theme($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-      // `mat-mdc-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the
-      // element is elevated.
-      @for $zValue from 0 through 24 {
-        $selector: elevation.$prefix + $zValue;
-        // We need the `mat-mdc-elevation-specific`, because some MDC mixins
-        // come with elevation baked in and we don't have a way of removing it.
-        .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
-          @include elevation.private-theme-elevation($zValue, $color);
-        }
-      }
+      @include color($color);
+    }
+    @if $density != null {
+      @include density($density);
+    }
+    @if $typography != null {
+      @include typography($typography);
     }
   }
 }

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

@@ -12,8 +12,8 @@ import * as i0 from "@angular/core";
 /**
  * Single option inside of a `<mat-select>` element.
  */
-export declare class MatOption extends _MatOptionBase {
+export declare class MatOption<T = any> extends _MatOptionBase<T> {
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: MatOptionParentComponent, group: MatOptgroup);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatOption, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
 }

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

@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export * from './option/index';
-export { AnimationCurves, AnimationDurations, CanColor, CanDisable, CanDisableRipple, CanUpdateErrorState, DateAdapter, defaultRippleAnimationConfig, ErrorStateMatcher, GranularSanityChecks, HasInitialized, HasTabIndex, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MAT_DATE_LOCALE_FACTORY, MAT_NATIVE_DATE_FORMATS, MAT_OPTGROUP, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule, MatDateFormats, MATERIAL_SANITY_CHECKS, MatLine, MatLineModule, MatNativeDateModule, MatPseudoCheckbox, MatPseudoCheckboxModule, MatPseudoCheckboxState, MatRipple, MatRippleModule, mixinColor, mixinDisabled, mixinDisableRipple, mixinErrorState, mixinInitialized, mixinTabIndex, NativeDateAdapter, NativeDateModule, RippleAnimationConfig, RippleConfig, RippleGlobalOptions, RippleRef, RippleRenderer, RippleState, RippleTarget, SanityChecks, setLines, ShowOnDirtyErrorStateMatcher, ThemePalette, VERSION, _AbstractConstructor, _Constructor, } from '@angular/material/core';
+export { AnimationCurves, AnimationDurations, CanColor, CanDisable, CanDisableRipple, CanUpdateErrorState, DateAdapter, defaultRippleAnimationConfig, ErrorStateMatcher, GranularSanityChecks, HasInitialized, HasTabIndex, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MAT_DATE_LOCALE_FACTORY, MAT_NATIVE_DATE_FORMATS, MAT_OPTGROUP, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule, MatDateFormats, MATERIAL_SANITY_CHECKS, MatNativeDateModule, MatPseudoCheckbox, MatPseudoCheckboxModule, MatPseudoCheckboxState, MatRipple, MatRippleModule, mixinColor, mixinDisabled, mixinDisableRipple, mixinErrorState, mixinInitialized, mixinTabIndex, NativeDateAdapter, NativeDateModule, RippleAnimationConfig, RippleConfig, RippleGlobalOptions, RippleRef, RippleRenderer, RippleState, RippleTarget, SanityChecks, setLines, ShowOnDirtyErrorStateMatcher, ThemePalette, VERSION, _AbstractConstructor, _Constructor, } from '@angular/material/core';

package/mdc-helpers/_focus-indicators.scss

@@ -42,7 +42,7 @@
   .mat-mdc-unelevated-button .mat-mdc-focus-indicator::before,
   .mat-mdc-raised-button .mat-mdc-focus-indicator::before,
   .mdc-fab .mat-mdc-focus-indicator::before,
-  .mat-mdc-focus-indicator.mdc-chip::before {
+  .mat-mdc-chip-action-label .mat-mdc-focus-indicator::before {
     margin: -($border-width + 2px);
   }
 
@@ -50,11 +50,16 @@
     margin: -($border-width + 3px);
   }
 
-  .mat-mdc-focus-indicator.mat-mdc-chip-remove::before,
-  .mat-mdc-focus-indicator.mat-mdc-chip-row-focusable-text-content::before {
+  .mat-mdc-focus-indicator.mat-mdc-chip-remove::before {
     margin: -$border-width;
   }
 
+  // MDC sets a padding a on the button which stretches out the focus indicator.
+  .mat-mdc-focus-indicator.mat-mdc-chip-remove::before {
+    left: 8px;
+    right: 8px;
+  }
+
   .mat-mdc-focus-indicator.mat-mdc-tab::before,
   .mat-mdc-focus-indicator.mat-mdc-tab-link::before {
     margin: 5px;
@@ -78,6 +83,9 @@
   .mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
   .mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
 
+  // In the chips the individual actions have focus so we target a different element.
+  .mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before,
+
   // For buttons and list items, render the focus indicator when the parent
   // button or list item is focused.
   .mat-mdc-button-base:focus .mat-mdc-focus-indicator::before,

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-base.d.ts

@@ -7,24 +7,44 @@
  */
 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;
@@ -34,6 +54,8 @@ export declare abstract class MatListItemBase implements AfterContentInit, OnDes
     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,12 +75,35 @@ 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 _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 _monitorLines;
+    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;

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. */
@@ -63,6 +61,11 @@ export declare class MatListOption extends MatListItemBase implements ListOption
     get selected(): 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;
@@ -91,5 +94,5 @@ export declare class MatListOption extends MatListItemBase implements ListOption
      */
     _markForCheck(): void;
     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/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,51 @@ 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>;
+    /** Whether the list item is disabled. */
+    isDisabled(): Promise<boolean>;
+    /**
+     * 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-list/testing/selection-list-harness.d.ts

@@ -53,8 +53,6 @@ export declare class MatListOptionHarness extends MatListItemHarnessBase {
     getCheckboxPosition(): Promise<MatListOptionCheckboxPosition>;
     /** Whether the list option is selected. */
     isSelected(): Promise<boolean>;
-    /** Whether the list option is disabled. */
-    isDisabled(): Promise<boolean>;
     /** Focuses the list option. */
     focus(): Promise<void>;
     /** Blurs the list option. */

package/mdc-snack-bar/module.d.ts

@@ -9,6 +9,6 @@ import * as i7 from "@angular/material-experimental/mdc-button";
 import * as i8 from "@angular/material-experimental/mdc-core";
 export declare class MatSnackBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSnackBarModule, [typeof i1.MatSimpleSnackBar, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction], [typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.CommonModule, typeof i7.MatButtonModule, typeof i8.MatCommonModule], [typeof i8.MatCommonModule, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSnackBarModule, [typeof i1.SimpleSnackBar, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction], [typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.CommonModule, typeof i7.MatButtonModule, typeof i8.MatCommonModule], [typeof i8.MatCommonModule, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSnackBarModule>;
 }

package/mdc-snack-bar/public-api.d.ts

@@ -10,4 +10,4 @@ export * from './snack-bar-container';
 export * from './snack-bar-content';
 export * from './snack-bar';
 export * from './module';
-export { MatSnackBarConfig, MatSnackBarDismiss, MatSnackBarRef, SimpleSnackBar, MAT_SNACK_BAR_DATA, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, TextOnlySnackBar, matSnackBarAnimations, } from '@angular/material/snack-bar';
+export { MatSnackBarConfig, MatSnackBarDismiss, MatSnackBarRef, MAT_SNACK_BAR_DATA, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, TextOnlySnackBar, matSnackBarAnimations, } from '@angular/material/snack-bar';

package/mdc-snack-bar/simple-snack-bar.d.ts

@@ -1,6 +1,6 @@
-import { TextOnlySnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
+import { TextOnlySnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import * as i0 from "@angular/core";
-export declare class MatSimpleSnackBar implements TextOnlySnackBar {
+export declare class SimpleSnackBar implements TextOnlySnackBar {
     snackBarRef: MatSnackBarRef<SimpleSnackBar>;
     data: {
         message: string;
@@ -14,6 +14,6 @@ export declare class MatSimpleSnackBar implements TextOnlySnackBar {
     action(): void;
     /** If the action button should be shown. */
     get hasAction(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSimpleSnackBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSimpleSnackBar, "mat-simple-snack-bar", ["matSnackBar"], {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleSnackBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleSnackBar, "simple-snack-bar", ["matSnackBar"], {}, {}, never, never>;
 }