@angular/material-experimental 13.2.0-next.0 → 14.0.0-next.0

package/mdc-chips/chip-set.d.ts

@@ -5,11 +5,11 @@
  * 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 { Directionality } from '@angular/cdk/bidi';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } from '@angular/core';
 import { HasTabIndex } from '@angular/material-experimental/mdc-core';
-import { deprecated } from '@material/chips';
+import { MDCChipSetFoundation, MDCChipSetAdapter } from '@material/chips';
 import { Observable, Subject } from 'rxjs';
 import { MatChip, MatChipEvent } from './chip';
 import * as i0 from "@angular/core";
@@ -28,15 +28,10 @@ declare const _MatChipSetMixinBase: import("@angular/material-experimental/mdc-c
  * Extended by MatChipListbox and MatChipGrid for different interaction patterns.
  */
 export declare class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit, AfterViewInit, HasTabIndex, OnDestroy {
-    protected _elementRef: ElementRef;
+    private _liveAnnouncer;
+    private _document;
+    protected _elementRef: ElementRef<HTMLElement>;
     protected _changeDetectorRef: ChangeDetectorRef;
-    protected _dir: Directionality;
-    /** Subscription to remove changes in chips. */
-    private _chipRemoveSubscription;
-    /** Subscription to destroyed events in chips. */
-    private _chipDestroyedSubscription;
-    /** Subscription to chip interactions. */
-    private _chipInteractionSubscription;
     /**
      * When a chip is destroyed, we store the index of the destroyed chip until the chips
      * query list notifies about the update. This is necessary because we cannot determine an
@@ -44,18 +39,18 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
      */
     protected _lastDestroyedChipIndex: number | null;
     /** The MDC foundation containing business logic for MDC chip-set. */
-    protected _chipSetFoundation: deprecated.MDCChipSetFoundation;
+    protected _chipSetFoundation: MDCChipSetFoundation;
     /** Subject that emits when the component has been destroyed. */
     protected _destroyed: Subject<void>;
+    /** Combined stream of all of the child chips' remove events. */
+    get chipDestroyedChanges(): Observable<MatChipEvent>;
     /**
      * Implementation of the MDC chip-set adapter interface.
      * These methods are called by the chip set foundation.
      */
-    protected _chipSetAdapter: deprecated.MDCChipSetAdapter;
+    protected _chipSetAdapter: MDCChipSetAdapter;
     /** The aria-describedby attribute on the chip list for improved a11y. */
     _ariaDescribedby: string;
-    /** Uid of the chip set */
-    _uid: string;
     /**
      * Map from class to whether the class is enabled.
      * Enabled classes are set on the MDC chip-set div.
@@ -75,15 +70,9 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
     private _role;
     /** Whether any of the chips inside of this chip-set has focus. */
     get focused(): boolean;
-    /** Combined stream of all of the child chips' remove events. */
-    get chipRemoveChanges(): Observable<MatChipEvent>;
-    /** Combined stream of all of the child chips' remove events. */
-    get chipDestroyedChanges(): Observable<MatChipEvent>;
-    /** Combined stream of all of the child chips' interaction events. */
-    get chipInteractionChanges(): Observable<string>;
     /** The chips that are part of this chip set. */
     _chips: QueryList<MatChip>;
-    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality);
+    constructor(_liveAnnouncer: LiveAnnouncer, _document: any, _elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
@@ -91,22 +80,6 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
     protected _hasFocusedChip(): boolean;
     /** Syncs the chip-set's state with the individual chips. */
     protected _syncChipsState(): void;
-    /** Sets whether the given CSS class should be applied to the MDC chip. */
-    protected _setMdcClass(cssClass: string, active: boolean): void;
-    /** Adapter method that returns true if the chip set has the given MDC class. */
-    protected _hasMdcClass(className: string): any;
-    /** Updates subscriptions to chip events. */
-    private _resetChips;
-    /** Subscribes to events on the child chips. */
-    protected _subscribeToChipEvents(): void;
-    /** Subscribes to chip removal events. */
-    private _listenToChipsRemove;
-    /** Subscribes to chip destroyed events. */
-    private _listenToChipsDestroyed;
-    /** Subscribes to chip interaction events. */
-    private _listenToChipsInteraction;
-    /** Unsubscribes from all chip events. */
-    protected _dropSubscriptions(): void;
     /** Dummy method for subclasses to override. Base chip set cannot be focused. */
     focus(): void;
     /**
@@ -119,12 +92,22 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
     /** Checks whether an event comes from inside a chip element. */
     protected _originatesFromChip(event: Event): boolean;
     /**
-     * Checks whether an event comes from inside a chip element in the editing
-     * state.
+     * Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the
+     * user to tab out of it. This prevents the grid from capturing focus and redirecting
+     * it back to the first chip, creating a focus trap, if it user tries to tab away.
+     */
+    protected _allowFocusEscape(): void;
+    /**
+     * Gets a stream of events from all the chips within the set.
+     * The stream will automatically incorporate any newly-added chips.
      */
-    protected _originatesFromEditingChip(event: Event): boolean;
-    private _checkForClassInHierarchy;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipSet, [null, null, { optional: true; }]>;
+    protected _getChipStream<T, C extends MatChip = MatChip>(mappingFunction: (chip: C) => Observable<T>): Observable<T>;
+    protected _checkForClassInHierarchy(event: Event, className: string): boolean;
+    private _chipFoundation;
+    private _handleChipAnimation;
+    private _handleChipInteraction;
+    private _handleChipNavigation;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipSet, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipSet, "mat-chip-set", never, { "disabled": "disabled"; "role": "role"; }, {}, ["_chips"], ["*"]>;
 }
 export {};

package/mdc-chips/chip.d.ts

@@ -7,25 +7,19 @@
  */
 import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { CanColor, CanDisable, CanDisableRipple, HasTabIndex, MatRipple, RippleGlobalOptions } from '@angular/material-experimental/mdc-core';
-import { deprecated } from '@material/chips';
+import { MDCChipFoundation, MDCChipAdapter, MDCChipActionType, MDCChipActionFoundation, ActionInteractionEvent } from '@material/chips';
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Subject } from 'rxjs';
 import { MatChipAvatar, MatChipTrailingIcon, MatChipRemove } from './chip-icons';
+import { MatChipAction } from './chip-action';
 import * as i0 from "@angular/core";
 /** Represents an event fired on an individual `mat-chip`. */
 export interface MatChipEvent {
     /** The chip the event was fired on. */
     chip: MatChip;
 }
-/**
- * Directive to add MDC CSS to non-basic chips.
- * @docs-private
- */
-export declare class MatChipCssInternalOnly {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipCssInternalOnly, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipCssInternalOnly, "mat-chip, mat-chip-option, mat-chip-row, [mat-chip], [mat-chip-option],    [mat-chip-row]", never, {}, {}, never>;
-}
 /**
  * Boilerplate for applying mixins to MatChip.
  * @docs-private
@@ -41,35 +35,42 @@ declare const _MatChipMixinBase: import("@angular/material-experimental/mdc-core
  *
  * Extended by MatChipOption and MatChipRow for different interaction patterns.
  */
-export declare class MatChip extends _MatChipMixinBase implements AfterContentInit, AfterViewInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy {
+export declare class MatChip extends _MatChipMixinBase implements AfterViewInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy {
     _changeDetectorRef: ChangeDetectorRef;
     protected _ngZone: NgZone;
+    private _focusMonitor;
     private _dir;
     private _globalRippleOptions?;
+    protected _document: Document;
     /** Whether the ripple is centered on the chip. */
     readonly _isRippleCentered = false;
     /** Emits when the chip is focused. */
     readonly _onFocus: Subject<MatChipEvent>;
     /** Emits when the chip is blurred. */
     readonly _onBlur: Subject<MatChipEvent>;
-    readonly REMOVE_ICON_HANDLED_KEYS: ReadonlySet<number>;
     /** Whether this chip is a basic (unstyled) chip. */
     readonly _isBasicChip: boolean;
+    /** Role for the root of the chip. */
+    role: string | null;
     /** Whether the chip has focus. */
     protected _hasFocusInternal: boolean;
+    /** Whether moving focus into the chip is pending. */
+    private _pendingFocus;
     /** Whether animations for the chip are enabled. */
     _animationsDisabled: boolean;
-    _handleTransitionEnd(event: TransitionEvent): void;
     _hasFocus(): boolean;
-    /** Default unique id for the chip. */
-    private _uniqueId;
     /** A unique id for the chip. If none is supplied, it will be auto-generated. */
     id: string;
+    /** ARIA label for the content of the chip. */
+    ariaLabel: string | null;
     get disabled(): boolean;
     set disabled(value: BooleanInput);
     protected _disabled: boolean;
     private _textElement;
-    /** The value of the chip. Defaults to the content inside the mdc-chip__text element. */
+    /**
+     * The value of the chip. Defaults to the content inside
+     * the `mat-mdc-chip-action-label` element.
+     */
     get value(): any;
     set value(value: any);
     protected _value: any;
@@ -85,14 +86,12 @@ export declare class MatChip extends _MatChipMixinBase implements AfterContentIn
     get highlighted(): boolean;
     set highlighted(value: BooleanInput);
     protected _highlighted: boolean;
-    /** Emitted when the user interacts with the chip. */
-    readonly interaction: EventEmitter<string>;
-    /** Emitted when the chip is destroyed. */
-    readonly destroyed: EventEmitter<MatChipEvent>;
     /** Emitted when a chip is to be removed. */
     readonly removed: EventEmitter<MatChipEvent>;
+    /** Emitted when the chip is destroyed. */
+    readonly destroyed: EventEmitter<MatChipEvent>;
     /** The MDC foundation containing business logic for MDC chip. */
-    _chipFoundation: deprecated.MDCChipFoundation;
+    _chipFoundation: MDCChipFoundation;
     /** The unstyled chip selector for this component. */
     protected basicChipAttrName: string;
     /** The chip's leading icon. */
@@ -103,17 +102,16 @@ export declare class MatChip extends _MatChipMixinBase implements AfterContentIn
     removeIcon: MatChipRemove;
     /** Reference to the MatRipple instance of the chip. */
     ripple: MatRipple;
+    /** Action receiving the primary set of user interactions. */
+    primaryAction: MatChipAction;
     /**
      * Implementation of the MDC chip adapter interface.
      * These methods are called by the chip foundation.
      */
-    protected _chipAdapter: deprecated.MDCChipAdapter;
-    constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, _ngZone: NgZone, _dir: Directionality, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined);
-    ngAfterContentInit(): void;
+    protected _chipAdapter: MDCChipAdapter;
+    constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, _dir: Directionality, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    /** Sets up the remove icon chip foundation, and subscribes to remove icon events. */
-    private _initRemoveIcon;
     /**
      * Allows for programmatic removal of the chip.
      *
@@ -122,17 +120,20 @@ export declare class MatChip extends _MatChipMixinBase implements AfterContentIn
     remove(): void;
     /** Sets whether the given CSS class should be applied to the MDC chip. */
     private _setMdcClass;
-    /** Forwards interaction events to the MDC chip foundation. */
-    _handleInteraction(event: MouseEvent | KeyboardEvent | FocusEvent): void;
     /** Whether or not the ripple should be disabled. */
     _isRippleDisabled(): boolean;
-    _notifyInteraction(): void;
-    _notifyNavigation(): void;
-    /** Overridden by MatChipRow. */
-    protected _onEditStart(): void;
-    /** Overridden by MatChipRow. */
-    protected _onEditFinish(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, mat-chip", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "id": "id"; "disabled": "disabled"; "value": "value"; "removable": "removable"; "highlighted": "highlighted"; }, { "interaction": "interaction"; "destroyed": "destroyed"; "removed": "removed"; }, ["leadingIcon", "trailingIcon", "removeIcon"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"]>;
+    _getAction(type: MDCChipActionType): MDCChipActionFoundation | undefined;
+    _getFoundation(): MDCChipFoundation;
+    _hasTrailingIcon(): boolean;
+    /** Allows for programmatic focusing of the chip. */
+    focus(): void;
+    /** Overridden by MatChipOption. */
+    protected _onChipInteraction(event: ActionInteractionEvent): void;
+    private _handleActionInteraction;
+    private _handleActionNavigation;
+    private _handleTransitionend;
+    private _handleAnimationend;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, mat-chip", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "id": "id"; "ariaLabel": "aria-label"; "disabled": "disabled"; "value": "value"; "removable": "removable"; "highlighted": "highlighted"; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"]>;
 }
 export {};

package/mdc-chips/emit-event.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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
+ */
+/**
+ * Emits a custom event from an element.
+ * @param element Element from which to emit the event.
+ * @param _document Document that the element is placed in.
+ * @param eventName Name of the event.
+ * @param data Data attached to the event.
+ * @param shouldBubble Whether the event should bubble.
+ */
+export declare function emitCustomEvent<T>(element: HTMLElement, _document: Document, eventName: string, data: T, shouldBubble: boolean): void;

package/mdc-chips/module.d.ts

@@ -1,17 +1,18 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./chip";
-import * as i2 from "./chip-icons";
-import * as i3 from "./chip-edit-input";
-import * as i4 from "./chip-grid";
-import * as i5 from "./chip-input";
-import * as i6 from "./chip-listbox";
-import * as i7 from "./chip-option";
-import * as i8 from "./chip-row";
-import * as i9 from "./chip-set";
-import * as i10 from "@angular/material-experimental/mdc-core";
-import * as i11 from "@angular/common";
+import * as i1 from "./chip-action";
+import * as i2 from "./chip";
+import * as i3 from "./chip-icons";
+import * as i4 from "./chip-edit-input";
+import * as i5 from "./chip-grid";
+import * as i6 from "./chip-input";
+import * as i7 from "./chip-listbox";
+import * as i8 from "./chip-option";
+import * as i9 from "./chip-row";
+import * as i10 from "./chip-set";
+import * as i11 from "@angular/material-experimental/mdc-core";
+import * as i12 from "@angular/common";
 export declare class MatChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, [typeof i1.MatChip, typeof i2.MatChipAvatar, typeof i1.MatChipCssInternalOnly, typeof i3.MatChipEditInput, typeof i4.MatChipGrid, typeof i5.MatChipInput, typeof i6.MatChipListbox, typeof i7.MatChipOption, typeof i2.MatChipRemove, typeof i8.MatChipRow, typeof i9.MatChipSet, typeof i2.MatChipTrailingIcon], [typeof i10.MatCommonModule, typeof i11.CommonModule, typeof i10.MatRippleModule], [typeof i10.MatCommonModule, typeof i1.MatChip, typeof i2.MatChipAvatar, typeof i1.MatChipCssInternalOnly, typeof i3.MatChipEditInput, typeof i4.MatChipGrid, typeof i5.MatChipInput, typeof i6.MatChipListbox, typeof i7.MatChipOption, typeof i2.MatChipRemove, typeof i8.MatChipRow, typeof i9.MatChipSet, typeof i2.MatChipTrailingIcon]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, [typeof i1.MatChipAction, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon], [typeof i11.MatCommonModule, typeof i12.CommonModule, typeof i11.MatRippleModule], [typeof i11.MatCommonModule, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatChipsModule>;
 }

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/option/_option-theme.scss

@@ -55,9 +55,9 @@
       theming.get-typography-config($config-or-theme));
 
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
-    // level. Class is repeated for increased specificity.
-    .mat-mdc-option .mdc-list-item__primary-text {
+    // MDC uses the `subtitle1` level for list items, but
+    // the spec shows `body1` as the correct level.
+    .mat-mdc-option {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }

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-form-field/_form-field-subscript.scss

@@ -23,12 +23,23 @@
     padding: 0 mdc-textfield-variables.$padding-horizontal;
   }
 
+  .mat-mdc-form-field-subscript-dynamic-size {
+    .mat-mdc-form-field-hint-wrapper,
+    .mat-mdc-form-field-error-wrapper {
+      position: static;
+    }
+  }
+
   .mat-mdc-form-field-bottom-align::before {
     content: '';
     display: inline-block;
     height: 16px;
   }
 
+  .mat-mdc-form-field-bottom-align.mat-mdc-form-field-subscript-dynamic-size::before {
+    content: unset;
+  }
+
   .mat-mdc-form-field-hint-end {
     order: 1;
   }

package/mdc-form-field/form-field.d.ts

@@ -25,6 +25,8 @@ import * as i0 from "@angular/core";
 export declare type FloatLabelType = 'always' | 'auto';
 /** Possible appearance styles for the form field. */
 export declare type MatFormFieldAppearance = 'fill' | 'outline';
+/** Behaviors for how the subscript height is set. */
+export declare type SubscriptSizing = 'fixed' | 'dynamic';
 /**
  * Represents the default options for the form field that can be configured
  * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
@@ -33,6 +35,7 @@ export interface MatFormFieldDefaultOptions {
     appearance?: MatFormFieldAppearance;
     hideRequiredMarker?: boolean;
     floatLabel?: FloatLabelType;
+    subscriptSizing?: SubscriptSizing;
 }
 /**
  * Injection token that can be used to configure the
@@ -76,6 +79,14 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     get appearance(): MatFormFieldAppearance;
     set appearance(value: MatFormFieldAppearance);
     private _appearance;
+    /**
+     * Whether the form field should reserve space for one line of hint/error text (default)
+     * or to have the spacing grow from 0px as needed based on the size of the hint/error content.
+     * Note that when using dynamic sizing, layout shifts will occur when hint/error text changes.
+     */
+    get subscriptSizing(): SubscriptSizing;
+    set subscriptSizing(value: SubscriptSizing);
+    private _subscriptSizing;
     /** Text for the form field hint. */
     get hintLabel(): string;
     set hintLabel(value: string);
@@ -185,5 +196,5 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     /** Checks whether the form field is attached to the DOM. */
     private _isAttachedToDom;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormField, [null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": "hideRequiredMarker"; "color": "color"; "floatLabel": "floatLabel"; "appearance": "appearance"; "hintLabel": "hintLabel"; }, {}, ["_labelChildNonStatic", "_labelChildStatic", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": "hideRequiredMarker"; "color": "color"; "floatLabel": "floatLabel"; "appearance": "appearance"; "subscriptSizing": "subscriptSizing"; "hintLabel": "hintLabel"; }, {}, ["_labelChildNonStatic", "_labelChildStatic", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']"]>;
 }

package/mdc-helpers/_focus-indicators.scss

@@ -28,6 +28,10 @@
     pointer-events: none;
     border: $border-width $border-style transparent;
     border-radius: $border-radius;
+
+    .cdk-high-contrast-active & {
+      display: none;
+    }
   }
 
   // By default, all focus indicators are flush with the bounding box of their
@@ -38,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);
   }
 
@@ -46,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;
@@ -74,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-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);
     }
   }
 }