@angular/material-experimental 13.1.3 → 13.2.0

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-radio/_radio-theme.scss

@@ -10,12 +10,9 @@
 @mixin _color-palette($color-palette) {
   @include mdc-radio-theme.theme((
     selected-focus-icon-color: $color-palette,
-    selected-focus-state-layer-color: $color-palette,
     selected-hover-icon-color: $color-palette,
-    selected-hover-state-layer-color: $color-palette,
     selected-icon-color: $color-palette,
     selected-pressed-icon-color: $color-palette,
-    selected-pressed-state-layer-color: $color-palette,
   ));
 
   // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently.
@@ -39,12 +36,9 @@
         disabled-selected-icon-color: mdc-theme-color.$on-surface,
         disabled-unselected-icon-color: mdc-theme-color.$on-surface,
         unselected-focus-icon-color: $on-surface,
-        unselected-focus-state-layer-color: $on-surface,
         unselected-hover-icon-color: $on-surface,
-        unselected-hover-state-layer-color: $on-surface,
         unselected-icon-color: $on-surface,
         unselected-pressed-icon-color: $on-surface,
-        unselected-pressed-state-layer-color: $on-surface,
       ));
 
       &.mat-primary {

package/mdc-tabs/_tabs-common.scss

@@ -11,7 +11,7 @@ $mat-tab-animation-duration: 500ms !default;
 // Combines the various structural styles we need for the tab group and tab nav bar.
 @mixin structural-styles {
   @include mdc-helpers.disable-fallback-declarations {
-    @include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-tab.static-styles($query: mdc-helpers.$mat-base-styles-query);
     @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
   }
 
@@ -51,6 +51,13 @@ $mat-tab-animation-duration: 500ms !default;
     pointer-events: none;
   }
 
+  // Required for `fitInkBarToContent` to work. This used to be included with MDC's `without-ripple`
+  // mixin, but that no longer appears to be the case with `static-styles`. Since the latter is
+  // ~10kb smaller, we include this one extra style ourselves.
+  .mdc-tab__content {
+    @include mdc-tab-indicator.surface;
+  }
+
   // We need to handle the hover and focus indication ourselves, because we don't use MDC's ripple.
   &:hover .mdc-tab__ripple::before {
     opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);

package/mdc-tabs/_tabs-theme.scss

@@ -4,7 +4,7 @@
 @use '@material/tab-indicator' as mdc-tab-indicator;
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab' as mdc-tab;
-@use '@material/tab/tab-theme' as mdc-tab-theme;
+@use '@material/tab/mixins' as mdc-tab-mixins;
 @use '@material/tab-bar' as mdc-tab-bar;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
@@ -18,39 +18,9 @@
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-tab, .mat-mdc-tab-link {
-      $surface: mdc-theme-color.$surface;
-      $on-surface: rgba(mdc-theme-color.$on-surface, 0.6);
-
-      // TODO(crisbeto): these styles should actually be set through the `theme` mixin while the
-      // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
-      // they are not, because `theme-styles` outputs the token values directly, rather than
-      // generating CSS variables.
-      @include mdc-tab-theme.primary-navigation-tab-theme-styles(map.merge(
-          mdc-tab-theme.$primary-light-theme,
-          (
-            container-color: $surface,
-            inactive-focus-state-layer-color: $on-surface,
-            inactive-hover-state-layer-color: $on-surface,
-            inactive-pressed-state-layer-color: $on-surface,
-            with-icon-inactive-focus-icon-color: $on-surface,
-            with-icon-inactive-hover-icon-color: $on-surface,
-            with-icon-inactive-icon-color: $on-surface,
-            with-icon-inactive-pressed-icon-color: $on-surface,
-            with-label-text-inactive-focus-label-text-color: $on-surface,
-            with-label-text-inactive-hover-label-text-color: $on-surface,
-            with-label-text-inactive-label-text-color: $on-surface,
-            with-label-text-inactive-pressed-label-text-color: $on-surface,
-
-            // TODO(crisbeto): MDC's styles are set up so that the icon size is set through a
-            // `font-size` at the root of the tab while the text size of the tab is set on
-            // `.mdc-tab__text-label` which overrides the one from the root. The problem is that
-            // the `$light-theme` is looking for a `subhead2` level which doesn't exist in MDC's
-            // code which in turn causes no text label styles to be emitted and for the icon size
-            // to be applied to the entire tab. Since we don't support icons inside the tab
-            // anyway, we can temporarily work around it by preventing MDC from emitting icon
-            // styles. The correct label typography will be applied by our theme instead.
-            with-icon-icon-size: null
-          )));
+      &:not(.mat-mdc-tab-disabled) {
+        @include mdc-tab-mixins.text-label-color(rgba(mdc-theme-color.$on-surface, 0.6));
+      }
 
       // MDC seems to include a background color on tabs which only stands out on dark themes.
       // Disable for now for backwards compatibility. These styles are inside the theme in order
@@ -125,27 +95,10 @@
 
 @mixin _palette-styles($color) {
   .mat-mdc-tab, .mat-mdc-tab-link {
-    // TODO(crisbeto): these styles should actually be set through the `theme` mixin while the
-    // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
-    // they are not, because `theme-styles` outputs the token values directly, rather than
-    // generating CSS variables.
-    @include mdc-tab-theme.primary-navigation-tab-theme-styles((
-      active-focus-state-layer-color: $color,
-      active-hover-state-layer-color: $color,
-      active-pressed-state-layer-color: $color,
-      with-icon-active-focus-icon-color: $color,
-      with-icon-active-hover-icon-color: $color,
-      with-icon-active-icon-color: $color,
-      with-icon-active-pressed-icon-color: $color,
-      with-label-text-active-focus-label-text-color: $color,
-      with-label-text-active-hover-label-text-color: $color,
-      with-label-text-active-label-text-color: $color,
-      with-label-text-active-pressed-label-text-color: $color,
-    ));
-
-    @include mdc-tab-indicator-theme.theme-styles((
-      active-indicator-color: $color
-    ));
+    &:not(.mat-mdc-tab-disabled) {
+      @include mdc-tab-mixins.active-text-label-color($color);
+      @include mdc-tab-indicator-theme.theme-styles((active-indicator-color: $color));
+    }
   }
 
   .mdc-tab__ripple::before,

package/mdc-tabs/module.d.ts

@@ -14,6 +14,6 @@ import * as i12 from "@angular/cdk/observers";
 import * as i13 from "@angular/cdk/a11y";
 export declare class MatTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatTabsModule, [typeof i1.MatTabContent, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatTabGroup, typeof i5.MatTabNav, typeof i5.MatTabLink, typeof i6.MatTabBody, typeof i6.MatTabBodyPortal, typeof i7.MatTabLabelWrapper, typeof i8.MatTabHeader], [typeof i9.CommonModule, typeof i10.MatCommonModule, typeof i11.PortalModule, typeof i10.MatRippleModule, typeof i12.ObserversModule, typeof i13.A11yModule], [typeof i10.MatCommonModule, typeof i1.MatTabContent, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatTabGroup, typeof i5.MatTabNav, typeof i5.MatTabLink]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatTabsModule, [typeof i1.MatTabContent, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatTabGroup, typeof i5.MatTabNav, typeof i5.MatTabNavPanel, typeof i5.MatTabLink, typeof i6.MatTabBody, typeof i6.MatTabBodyPortal, typeof i7.MatTabLabelWrapper, typeof i8.MatTabHeader], [typeof i9.CommonModule, typeof i10.MatCommonModule, typeof i11.PortalModule, typeof i10.MatRippleModule, typeof i12.ObserversModule, typeof i13.A11yModule], [typeof i10.MatCommonModule, typeof i1.MatTabContent, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatTabGroup, typeof i5.MatTabNav, typeof i5.MatTabNavPanel, typeof i5.MatTabLink]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatTabsModule>;
 }

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

@@ -14,5 +14,5 @@ export { MatTab } from './tab';
 export { MatInkBar } from './ink-bar';
 export { MatTabHeader } from './tab-header';
 export { MatTabGroup } from './tab-group';
-export { MatTabNav, MatTabLink } from './tab-nav-bar/tab-nav-bar';
+export { MatTabNav, MatTabNavPanel, MatTabLink } from './tab-nav-bar/tab-nav-bar';
 export { MatTabBodyPositionState, MatTabBodyOriginState, matTabsAnimations, _MatInkBarPositioner, _MAT_INK_BAR_POSITIONER, MatTabChangeEvent, MatTabHeaderPosition, MatTabsConfig, MAT_TABS_CONFIG, MAT_TAB_GROUP, MAT_TAB, ScrollDirection, } from '@angular/material/tabs';

package/mdc-tabs/tab-nav-bar/tab-nav-bar.d.ts

@@ -50,3 +50,14 @@ export declare class MatTabLink extends _MatTabLinkBase implements MatInkBarItem
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLink, [null, null, { optional: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatTabLink, "[mat-tab-link], [matTabLink]", ["matTabLink"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, never, ["*"]>;
 }
+/**
+ * Tab panel component associated with MatTabNav.
+ */
+export declare class MatTabNavPanel {
+    /** Unique id for the tab panel. */
+    id: string;
+    /** Id of the active tab in the nav bar. */
+    _activeTabId?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNavPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNavPanel, "mat-tab-nav-panel", ["matTabNavPanel"], { "id": "id"; }, {}, never, ["*"]>;
+}

package/mdc-tabs/testing/tab-harness-filters.d.ts

@@ -24,3 +24,6 @@ export interface TabLinkHarnessFilters extends BaseHarnessFilters {
 /** A set of criteria that can be used to filter a list of `MatTabNavBarHarness` instances. */
 export interface TabNavBarHarnessFilters extends BaseHarnessFilters {
 }
+/** A set of criteria that can be used to filter a list of `MatTabNavBarHarness` instances. */
+export interface TabNavPanelHarnessFilters extends BaseHarnessFilters {
+}

package/mdc-tabs/testing/tab-nav-bar-harness.d.ts

@@ -8,6 +8,7 @@
 import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
 import { TabNavBarHarnessFilters, TabLinkHarnessFilters } from './tab-harness-filters';
 import { MatTabLinkHarness } from './tab-link-harness';
+import { MatTabNavPanelHarness } from './tab-nav-panel-harness';
 /** Harness for interacting with an MDC-based mat-tab-nav-bar in tests. */
 export declare class MatTabNavBarHarness extends ComponentHarness {
     /** The selector for the host element of a `MatTabNavBar` instance. */
@@ -32,4 +33,6 @@ export declare class MatTabNavBarHarness extends ComponentHarness {
      *     will be clicked.
      */
     clickLink(filter?: TabLinkHarnessFilters): Promise<void>;
+    /** Gets the panel associated with the nav bar. */
+    getPanel(): Promise<MatTabNavPanelHarness>;
 }

package/mdc-tabs/testing/tab-nav-panel-harness.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @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 { ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { TabNavPanelHarnessFilters } from './tab-harness-filters';
+/** Harness for interacting with a standard mat-tab-nav-panel in tests. */
+export declare class MatTabNavPanelHarness extends ContentContainerComponentHarness {
+    /** The selector for the host element of a `MatTabNavPanel` instance. */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a `MatTabNavPanel` that meets
+     * certain criteria.
+     * @param options Options for filtering which tab nav panel instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: TabNavPanelHarnessFilters): HarnessPredicate<MatTabNavPanelHarness>;
+    /** Gets the tab panel text content. */
+    getTextContent(): Promise<string>;
+}