@angular/material 17.0.1 → 17.1.0-next.0

package/button/_icon-button-theme.scss

@@ -4,6 +4,7 @@
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 @use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 
+@use '../core/style/sass-utils';
 @use './button-base';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
@@ -11,7 +12,10 @@
 
 
 @mixin base($theme) {
-  // TODO(mmalerba): Move icon button base tokens here
+  // Add default values for tokens not related to color, typography, or density.
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-icon-button-theme.theme(tokens-mdc-icon-button.get-unthemable-tokens());
+  }
 }
 
 @mixin _icon-button-variant($theme, $palette) {

package/card/testing/index.d.ts

@@ -34,7 +34,7 @@ export declare class MatCardHarness extends ContentContainerComponentHarness<Mat
 }
 
 /** Selectors for different sections of the mat-card that can container user content. */
-export declare const enum MatCardSection {
+export declare enum MatCardSection {
     HEADER = ".mat-mdc-card-header",
     CONTENT = ".mat-mdc-card-content",
     ACTIONS = ".mat-mdc-card-actions",

package/checkbox/index.d.ts

@@ -227,7 +227,7 @@ export declare class _MatCheckboxRequiredValidatorModule {
  * Represents the different states that require custom transitions between them.
  * @docs-private
  */
-export declare const enum TransitionCheckState {
+export declare enum TransitionCheckState {
     /** The initial state of the component before any user interaction. */
     Init = 0,
     /** The state representing the component when it's becoming checked. */

package/chips/index.d.ts

@@ -1,10 +1,6 @@
 import { _AbstractConstructor } from '@angular/material/core';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanColor } from '@angular/material/core';
-import { CanDisable } from '@angular/material/core';
-import { CanDisableRipple } from '@angular/material/core';
 import { CanUpdateErrorState } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { _Constructor } from '@angular/material/core';
@@ -17,7 +13,6 @@ import { EventEmitter } from '@angular/core';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { FormGroupDirective } from '@angular/forms';
-import { HasTabIndex } from '@angular/material/core';
 import * as i0 from '@angular/core';
 import * as i11 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
@@ -146,8 +141,9 @@ export declare const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken<MatChipsDefaultOp
  *
  * Extended by MatChipOption and MatChipRow for different interaction patterns.
  */
-export declare class MatChip extends _MatChipMixinBase implements OnInit, AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, DoCheck, HasTabIndex, OnDestroy {
+export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy {
     _changeDetectorRef: ChangeDetectorRef;
+    _elementRef: ElementRef<HTMLElement>;
     protected _ngZone: NgZone;
     private _focusMonitor;
     private _globalRippleOptions?;
@@ -191,18 +187,22 @@ export declare class MatChip extends _MatChipMixinBase implements OnInit, AfterV
     get value(): any;
     set value(value: any);
     protected _value: any;
+    /** Theme color palette of the chip. */
+    color?: string | null;
     /**
      * Determines whether or not the chip displays the remove styling and emits (removed) events.
      */
-    get removable(): boolean;
-    set removable(value: BooleanInput);
-    protected _removable: boolean;
+    removable: boolean;
     /**
      * Colors the chip for emphasis as if it were selected.
      */
-    get highlighted(): boolean;
-    set highlighted(value: BooleanInput);
-    protected _highlighted: boolean;
+    highlighted: boolean;
+    /** Whether the ripple effect is disabled or not. */
+    disableRipple: boolean;
+    /** Whether the chip is disabled. */
+    disabled: boolean;
+    /** Tab index of the chip. */
+    tabIndex: number;
     /** Emitted when a chip is to be removed. */
     readonly removed: EventEmitter<MatChipEvent>;
     /** Emitted when the chip is destroyed. */
@@ -229,7 +229,7 @@ export declare class MatChip extends _MatChipMixinBase implements OnInit, AfterV
      * Used to improve initial load time of large applications.
      */
     _rippleLoader: MatRippleLoader;
-    constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
+    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
@@ -255,17 +255,24 @@ export declare class MatChip extends _MatChipMixinBase implements OnInit, AfterV
     _getActions(): MatChipAction[];
     /** Handles interactions with the primary action of the chip. */
     _handlePrimaryActionInteraction(): void;
+    /** Gets the tabindex of the chip. */
+    _getTabIndex(): number | null;
     /** Starts the focus monitoring process on the chip. */
     private _monitorFocus;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ngAcceptInputType_removable: unknown;
+    static ngAcceptInputType_highlighted: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }
 
 /**
  * Section within a chip.
  * @docs-private
  */
-declare class MatChipAction extends _MatChipActionMixinBase implements HasTabIndex {
+declare class MatChipAction {
     _elementRef: ElementRef<HTMLElement>;
     protected _parentChip: {
         _handlePrimaryActionInteraction(): void;
@@ -279,8 +286,10 @@ declare class MatChipAction extends _MatChipActionMixinBase implements HasTabInd
     _isPrimary: boolean;
     /** Whether the action is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     private _disabled;
+    /** Tab index of the action. */
+    tabIndex: number;
     /**
      * Private API to allow focusing this chip when it is disabled.
      */
@@ -303,15 +312,11 @@ declare class MatChipAction extends _MatChipActionMixinBase implements HasTabInd
     _handleClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAction, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "isInteractive": { "alias": "isInteractive"; "required": false; }; "_allowFocusWhenDisabled": { "alias": "_allowFocusWhenDisabled"; "required": false; }; }, {}, never, never, false, never>;
-}
-
-declare abstract class _MatChipActionBase {
-    abstract disabled: boolean;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "isInteractive": { "alias": "isInteractive"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "_allowFocusWhenDisabled": { "alias": "_allowFocusWhenDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }
 
-declare const _MatChipActionMixinBase: _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & typeof _MatChipActionBase;
-
 /** Avatar image within a chip. */
 export declare class MatChipAvatar {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAvatar, never>;
@@ -379,7 +384,7 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      * @docs-private
      */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     /**
      * Implemented as part of MatFormFieldControl.
      * @docs-private
@@ -404,7 +409,7 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      * @docs-private
      */
     get required(): boolean;
-    set required(value: BooleanInput);
+    set required(value: boolean);
     protected _required: boolean | undefined;
     /**
      * Implemented as part of MatFormFieldControl.
@@ -489,11 +494,18 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
     /** Mark the field as touched */
     private _markAsTouched;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGrid, [null, null, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGrid, "mat-chip-grid", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGrid, "mat-chip-grid", never, { "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_required: unknown;
 }
 
 /**
  * Boilerplate for applying mixins to MatChipGrid.
+ * Important! this class needs to be marked as a component or a directive, because
+ * leaving it without metadata cuases the framework to execute the host bindings multiple
+ * times which breaks the keyboard navigation. We can't use `@Directive()` here, because
+ * `MatChipSet` is a component. We should able to remove this class altogether once
+ * the error state is moved away from using mixins.
  * @docs-private
  */
 declare class MatChipGridBase extends MatChipSet {
@@ -519,6 +531,8 @@ declare class MatChipGridBase extends MatChipSet {
      * @docs-private
      */
     ngControl: NgControl);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGridBase, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGridBase, "ng-component", never, {}, {}, never, never, false, never>;
 }
 
 /** Change event object that is emitted when the chip grid value has changed. */
@@ -546,15 +560,14 @@ export declare class MatChipInput implements MatChipTextControl, AfterContentIni
     private _focusLastChipOnBackspace;
     /** Whether the control is focused. */
     focused: boolean;
-    _chipGrid: MatChipGrid;
     /** Register input for chip list */
+    get chipGrid(): MatChipGrid;
     set chipGrid(value: MatChipGrid);
+    private _chipGrid;
     /**
      * Whether or not the chipEnd event will be emitted when the input is blurred.
      */
-    get addOnBlur(): boolean;
-    set addOnBlur(value: BooleanInput);
-    _addOnBlur: boolean;
+    addOnBlur: boolean;
     /**
      * The list of key codes that will trigger a chipEnd event.
      *
@@ -569,7 +582,7 @@ export declare class MatChipInput implements MatChipTextControl, AfterContentIni
     id: string;
     /** Whether the input is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     private _disabled;
     /** Whether the input is empty. */
     get empty(): boolean;
@@ -600,6 +613,8 @@ export declare class MatChipInput implements MatChipTextControl, AfterContentIni
     private _isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, [null, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, false, never>;
+    static ngAcceptInputType_addOnBlur: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
 
 /** Represents an input event on a `matChipInput`. */
@@ -638,7 +653,7 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
     private _defaultOptions;
     /** Whether the user should be allowed to select multiple chips. */
     get multiple(): boolean;
-    set multiple(value: BooleanInput);
+    set multiple(value: boolean);
     private _multiple;
     /** The array of selected chips inside the chip listbox. */
     get selected(): MatChipOption[] | MatChipOption;
@@ -651,7 +666,7 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
      * the chips inside the chip listbox are always ignored.
      */
     get selectable(): boolean;
-    set selectable(value: BooleanInput);
+    set selectable(value: boolean);
     protected _selectable: boolean;
     /**
      * A function to compare the option values with the selected values. The first argument
@@ -660,12 +675,10 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
      */
     compareWith: (o1: any, o2: any) => boolean;
     /** Whether this chip listbox is required. */
-    get required(): boolean;
-    set required(value: BooleanInput);
-    protected _required: boolean;
+    required: boolean;
     /** Whether checkmark indicator for single-selection options is hidden. */
     get hideSingleSelectionIndicator(): boolean;
-    set hideSingleSelectionIndicator(value: BooleanInput);
+    set hideSingleSelectionIndicator(value: boolean);
     private _hideSingleSelectionIndicator;
     /** Combined stream of all of the child chips' selection change events. */
     get chipSelectionChanges(): Observable<MatChipSelectionChange>;
@@ -733,7 +746,11 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
      */
     protected _skipPredicate(action: MatChipAction): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipListbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipListbox, "mat-chip-listbox", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "ariaOrientation": { "alias": "aria-orientation"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["_chips"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipListbox, "mat-chip-listbox", never, { "multiple": { "alias": "multiple"; "required": false; }; "ariaOrientation": { "alias": "aria-orientation"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["_chips"], ["*"], false, never>;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_selectable: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
 }
 
 /** Change event object that is emitted when the chip listbox value has changed. */
@@ -749,16 +766,6 @@ export declare class MatChipListboxChange {
     value: any);
 }
 
-/**
- * Boilerplate for applying mixins to MatChip.
- * @docs-private
- */
-declare const _MatChipMixinBase: _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & _Constructor<CanColor> & _AbstractConstructor<CanColor> & _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & {
-    new (_elementRef: ElementRef<HTMLElement>): {
-        _elementRef: ElementRef<HTMLElement>;
-    };
-};
-
 /**
  * An extension of the MatChip component that supports chip selection. Used with MatChipListbox.
  *
@@ -782,11 +789,11 @@ export declare class MatChipOption extends MatChip implements OnInit {
      * non-selectable if its parent chip list is not selectable.
      */
     get selectable(): boolean;
-    set selectable(value: BooleanInput);
+    set selectable(value: boolean);
     protected _selectable: boolean;
     /** Whether the chip is selected. */
     get selected(): boolean;
-    set selected(value: BooleanInput);
+    set selected(value: boolean);
     private _selected;
     /**
      * The ARIA selected applied to the chip. Conforms to WAI ARIA best practices for listbox
@@ -819,7 +826,9 @@ export declare class MatChipOption extends MatChip implements OnInit {
     _hasLeadingGraphic(): boolean;
     _setSelectedState(isSelected: boolean, isUserInput: boolean, emitEvent: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipOption, "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipOption, "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", never, { "selectable": { "alias": "selectable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ngAcceptInputType_selectable: unknown;
+    static ngAcceptInputType_selected: unknown;
 }
 
 /**
@@ -880,7 +889,7 @@ export declare class MatChipRow extends MatChip implements AfterViewInit {
      */
     private _getEditInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
 }
 
 /** Default options, for the chips module, that can be overridden. */
@@ -913,7 +922,7 @@ export declare class MatChipSelectionChange {
  *
  * Extended by MatChipListbox and MatChipGrid for different interaction patterns.
  */
-export declare class MatChipSet extends _MatChipSetMixinBase implements AfterViewInit, HasTabIndex, OnDestroy {
+export declare class MatChipSet implements AfterViewInit, OnDestroy {
     protected _elementRef: ElementRef<HTMLElement>;
     protected _changeDetectorRef: ChangeDetectorRef;
     private _dir;
@@ -927,16 +936,20 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterVie
     protected _defaultRole: string;
     /** Combined stream of all of the child chips' focus events. */
     get chipFocusChanges(): Observable<MatChipEvent>;
-    /** Combined stream of all of the child chips' remove events. */
+    /** Combined stream of all of the child chips' destroy events. */
     get chipDestroyedChanges(): Observable<MatChipEvent>;
+    /** Combined stream of all of the child chips' remove events. */
+    get chipRemovedChanges(): Observable<MatChipEvent>;
     /** Whether the chip set is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     protected _disabled: boolean;
     /** Whether the chip list contains chips or not. */
     get empty(): boolean;
     /** The ARIA role applied to the chip set. */
     get role(): string | null;
+    /** Tabindex of the chip set. */
+    tabIndex: number;
     set role(value: string | null);
     private _explicitRole;
     /** Whether any of the chips inside of this chip-set has focus. */
@@ -993,20 +1006,11 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterVie
      */
     private _redirectDestroyedChipFocus;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipSet, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipSet, "mat-chip-set", never, { "disabled": { "alias": "disabled"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, ["_chips"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipSet, "mat-chip-set", never, { "disabled": { "alias": "disabled"; "required": false; }; "role": { "alias": "role"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["_chips"], ["*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }
 
-/**
- * Boilerplate for applying mixins to MatChipSet.
- * @docs-private
- */
-declare abstract class MatChipSetBase {
-    abstract disabled: boolean;
-    constructor(_elementRef: ElementRef);
-}
-
-declare const _MatChipSetMixinBase: _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & typeof MatChipSetBase;
-
 export declare class MatChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipsModule, never>;
     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 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]>;

package/core/index.d.ts

@@ -1059,7 +1059,7 @@ export declare class RippleRenderer implements EventListenerObject {
 
 
 /** Possible states for a ripple element. */
-export declare const enum RippleState {
+export declare enum RippleState {
     FADING_IN = 0,
     VISIBLE = 1,
     FADING_OUT = 2,

package/core/tokens/m2/_index.scss

@@ -3,6 +3,7 @@
 @use '../../style/sass-utils';
 @use './mat/card' as tokens-mat-card;
 @use './mat/form-field' as tokens-mat-form-field;
+@use './mat/grid-list' as tokens-mat-grid-list;
 @use './mat/radio' as tokens-mat-radio;
 @use './mat/ripple' as tokens-mat-ripple;
 @use './mat/slide-toggle' as tokens-mat-slide-toggle;
@@ -78,6 +79,7 @@
   @return sass-utils.deep-merge-all(
       _get-tokens-for-module($theme, tokens-mat-card),
       _get-tokens-for-module($theme, tokens-mat-form-field),
+      _get-tokens-for-module($theme, tokens-mat-grid-list),
       _get-tokens-for-module($theme, tokens-mat-radio),
       _get-tokens-for-module($theme, tokens-mat-ripple),
       _get-tokens-for-module($theme, tokens-mat-slide-toggle),

package/datepicker/index.d.ts

@@ -5,8 +5,6 @@ import { AfterViewChecked } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { AnimationTriggerMetadata } from '@angular/animations';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanColor } from '@angular/material/core';
 import { CanUpdateErrorState } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
@@ -702,12 +700,10 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
      * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
      * than a dropdown and elements have more padding to allow for bigger touch targets.
      */
-    get touchUi(): boolean;
-    set touchUi(value: BooleanInput);
-    private _touchUi;
+    touchUi: boolean;
     /** Whether the datepicker pop-up should be disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     private _disabled;
     /** Preferred position of the datepicker in the X axis. */
     xPosition: DatepickerDropdownPositionX;
@@ -718,9 +714,7 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
      * Note that automatic focus restoration is an accessibility feature and it is recommended that
      * you provide your own equivalent, if you decide to turn it off.
      */
-    get restoreFocus(): boolean;
-    set restoreFocus(value: BooleanInput);
-    private _restoreFocus;
+    restoreFocus: boolean;
     /**
      * Emits selected year in multiyear view.
      * This doesn't imply a change on the selected date.
@@ -750,7 +744,7 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     private _panelClass;
     /** Whether the calendar is open. */
     get opened(): boolean;
-    set opened(value: BooleanInput);
+    set opened(value: boolean);
     private _opened;
     /** The id for the datepicker calendar. */
     id: string;
@@ -822,6 +816,10 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     private _getCloseStream;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerBase<any, any, any>, [null, null, null, null, { optional: true; }, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerBase<any, any, any>, never, never, { "calendarHeaderComponent": { "alias": "calendarHeaderComponent"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "color": { "alias": "color"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
+    static ngAcceptInputType_touchUi: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_restoreFocus: unknown;
+    static ngAcceptInputType_opened: unknown;
 }
 
 /** Button that will close the datepicker and discard the current selection. */
@@ -839,7 +837,8 @@ export declare class MatDatepickerCancel {
  * future. (e.g. confirmation buttons).
  * @docs-private
  */
-export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> extends _MatDatepickerContentBase implements OnInit, AfterViewInit, OnDestroy, CanColor {
+export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> implements OnInit, AfterViewInit, OnDestroy {
+    protected _elementRef: ElementRef;
     private _changeDetectorRef;
     private _globalModel;
     private _dateAdapter;
@@ -848,6 +847,8 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     private _model;
     /** Reference to the internal calendar component. */
     _calendar: MatCalendar<D>;
+    /** Palette color of the internal calendar. */
+    color: ThemePalette;
     /** Reference to the datepicker that created the overlay. */
     datepicker: MatDatepickerBase<any, S, D>;
     /** Start of the comparison range. */
@@ -874,7 +875,7 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     _actionsPortal: TemplatePortal | null;
     /** Id of the label for the `role="dialog"` element. */
     _dialogLabelId: string | null;
-    constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _globalModel: MatDateSelectionModel<S, D>, _dateAdapter: DateAdapter<D>, _rangeSelectionStrategy: MatDateRangeSelectionStrategy<D>, intl: MatDatepickerIntl);
+    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _globalModel: MatDateSelectionModel<S, D>, _dateAdapter: DateAdapter<D>, _rangeSelectionStrategy: MatDateRangeSelectionStrategy<D>, intl: MatDatepickerIntl);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -897,13 +898,6 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDatepickerContent<any, any>, "mat-datepicker-content", ["matDatepickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
 }
 
-/** @docs-private */
-declare const _MatDatepickerContentBase: _Constructor<CanColor> & _AbstractConstructor<CanColor> & {
-    new (_elementRef: ElementRef): {
-        _elementRef: ElementRef;
-    };
-};
-
 /** Form control that can be associated with a datepicker. */
 export declare interface MatDatepickerControl<D> {
     getStartValue(): D | null;
@@ -979,7 +973,7 @@ declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelectio
     protected _model: MatDateSelectionModel<S, D> | undefined;
     /** Whether the datepicker-input is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     private _disabled;
     /** Emits when a `change` event is fired on this `<input>`. */
     readonly dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>;
@@ -1062,6 +1056,7 @@ declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelectio
     _matchesFilter(value: D | null): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerInputBase<any, any>, [null, { optional: true; }, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerInputBase<any, any>, never, never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }
 
 /**
@@ -1174,7 +1169,7 @@ export declare class MatDatepickerToggle<D> implements AfterContentInit, OnChang
     ariaLabel: string;
     /** Whether the toggle button is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     private _disabled;
     /** Whether ripples on the toggle should be disabled. */
     disableRipple: boolean;
@@ -1190,6 +1185,7 @@ export declare class MatDatepickerToggle<D> implements AfterContentInit, OnChang
     private _watchStateChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerToggle<any>, [null, null, { attribute: "tabindex"; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDatepickerToggle<any>, "mat-datepicker-toggle", ["matDatepickerToggle"], { "datepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, ["_customIcon"], ["[matDatepickerToggleIcon]"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }
 
 /** Can be used to override the icon of a `matDatepickerToggle`. */
@@ -1226,7 +1222,7 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     private _rangePicker;
     /** Whether the input is required. */
     get required(): boolean;
-    set required(value: BooleanInput);
+    set required(value: boolean);
     private _required;
     /** Function that can be used to filter out dates within the date range picker. */
     get dateFilter(): DateFilterFn<D>;
@@ -1242,7 +1238,7 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     private _max;
     /** Whether the input is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     _groupDisabled: boolean;
     /** Whether the input is in an error state. */
     get errorState(): boolean;
@@ -1314,6 +1310,8 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     private _isTargetRequired;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDateRangeInput<any>, [null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDateRangeInput<any>, "mat-date-range-input", ["matDateRangeInput"], { "rangePicker": { "alias": "rangePicker"; "required": false; }; "required": { "alias": "required"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; }, {}, ["_startInput", "_endInput"], ["input[matStartDate]", "input[matEndDate]"], false, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
 
 declare const _MatDateRangeInputBase: _Constructor<CanUpdateErrorState> & _AbstractConstructor<CanUpdateErrorState> & typeof MatDateRangeInputPartBase;

package/datepicker/testing/index.d.ts

@@ -28,7 +28,7 @@ export declare interface CalendarHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Possible views of a `MatCalendarHarness`. */
-export declare const enum CalendarView {
+export declare enum CalendarView {
     MONTH = 0,
     YEAR = 1,
     MULTI_YEAR = 2

package/dialog/index.d.ts

@@ -473,7 +473,7 @@ export declare class MatDialogRef<T, R = any> {
     private _finishDialogClose;
 }
 
-export declare const enum MatDialogState {
+export declare enum MatDialogState {
     OPEN = 0,
     CLOSING = 1,
     CLOSED = 2

package/dialog/testing/index.d.ts

@@ -55,7 +55,7 @@ export declare class MatDialogHarness extends ContentContainerComponentHarness<M
 }
 
 /** Selectors for different sections of the mat-dialog that can contain user content. */
-export declare const enum MatDialogSection {
+export declare enum MatDialogSection {
     TITLE = ".mat-mdc-dialog-title",
     CONTENT = ".mat-mdc-dialog-content",
     ACTIONS = ".mat-mdc-dialog-actions"