@angular/material 14.0.0-next.1 → 14.0.0-next.12

package/_index.scss

@@ -14,6 +14,25 @@
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
 
+// Private/Internal
+@forward './core/density/private/all-density' as private-* show private-all-component-densities;
+@forward './core/theming/theming' show private-check-duplicate-theme-styles,
+  private-legacy-get-theme, private-is-theme-object;
+  @forward './core/style/layout-common' as private-* show private-fill;
+@forward './core/style/private' show private-theme-elevation, private-animation-noop;
+@forward './core/style/vendor-prefixes' as private-* show private-user-select,
+  private-position-sticky, private-color-adjust;
+@forward './core/theming/palette' as private-* show $private-dark-primary-text,
+  $private-dark-disabled-text;
+@forward './core/style/variables' as private-* show $private-swift-ease-in-duration,
+  $private-swift-ease-in-timing-function, $private-swift-ease-out-timing-function,
+  $private-ease-in-out-curve-function, $private-swift-ease-out-duration, $private-xsmall;
+@forward './core/typography/typography' show private-typography-to-2014-config,
+  private-typography-to-2018-config;
+@forward './table/table-flex-styles' show private-table-flex-styles;
+@forward './core/style/menu-common' as private-menu-common-*;
+@forward './core/style/button-common' as private-button-common-*;
+
 // Structural
 @forward './core/core' show core;
 @forward './core/ripple/ripple' show ripple;
@@ -49,7 +68,7 @@
   checkbox-typography;
 @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography;
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
-  datepicker-typography;
+  datepicker-typography, datepicker-date-range-colors;
 @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
   divider-typography;

package/autocomplete/autocomplete-origin.d.ts

@@ -15,7 +15,7 @@ export declare abstract class _MatAutocompleteOriginBase {
     /** Reference to the element on which the directive is applied. */
     elementRef: ElementRef<HTMLElement>);
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteOriginBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteOriginBase, never, never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteOriginBase, never, never, {}, {}, never, never, false>;
 }
 /**
  * Directive applied to an element to make it usable
@@ -23,5 +23,5 @@ export declare abstract class _MatAutocompleteOriginBase {
  */
 export declare class MatAutocompleteOrigin extends _MatAutocompleteOriginBase {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteOrigin, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteOrigin, "[matAutocompleteOrigin]", ["matAutocompleteOrigin"], {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteOrigin, "[matAutocompleteOrigin]", ["matAutocompleteOrigin"], {}, {}, never, never, false>;
 }

package/autocomplete/autocomplete-trigger.d.ts

@@ -11,7 +11,7 @@ import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef, OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { MatOption, MatOptionSelectionChange } from '@angular/material/core';
+import { _MatOptionBase, MatOptionSelectionChange } from '@angular/material/core';
 import { MatFormField } from '@angular/material/form-field';
 import { Observable } from 'rxjs';
 import { _MatAutocompleteBase, MatAutocompleteDefaultOptions } from './autocomplete';
@@ -70,6 +70,13 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
      * comes back.
      */
     private _canOpenOnNextFocus;
+    /** Value inside the input before we auto-selected an option. */
+    private _valueBeforeAutoSelection;
+    /**
+     * Current option that we have auto-selected as the user is navigating,
+     * but which hasn't been propagated to the model value yet.
+     */
+    private _pendingAutoselectedOption;
     /** Stream of keyboard events that can close the panel. */
     private readonly _closeKeyEventStream;
     /**
@@ -133,7 +140,7 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     /** Stream of changes to the selection state of the autocomplete options. */
     readonly optionSelections: Observable<MatOptionSelectionChange>;
     /** The currently active option, coerced to MatOption type. */
-    get activeOption(): MatOption | null;
+    get activeOption(): _MatOptionBase | null;
     /** Stream of clicks outside of the autocomplete panel. */
     private _getOutsideClickStream;
     writeValue(value: any): void;
@@ -143,6 +150,7 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     _handleKeydown(event: KeyboardEvent): void;
     _handleInput(event: KeyboardEvent): void;
     _handleFocus(): void;
+    _handleClick(): void;
     /**
      * In "auto" mode, the label will animate down as soon as focus is lost.
      * This causes the value to jump when selecting an option with the mouse.
@@ -159,7 +167,8 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _subscribeToClosingActions;
     /** Destroys the autocomplete suggestion panel. */
     private _destroyPanel;
-    private _setTriggerValue;
+    private _assignOptionValue;
+    private _updateNativeInputValue;
     /**
      * This method closes the panel, and if a value is specified, also sets the associated
      * control to that value. It will also mark the control as dirty if this interaction
@@ -190,11 +199,13 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _getWindow;
     /** Scrolls to a particular option in the list. */
     private _scrollToOption;
+    /** Handles keyboard events coming from the overlay panel. */
+    private _handleOverlayEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteTriggerBase, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteTriggerBase, never, never, { "autocomplete": "matAutocomplete"; "position": "matAutocompletePosition"; "connectedTo": "matAutocompleteConnectedTo"; "autocompleteAttribute": "autocomplete"; "autocompleteDisabled": "matAutocompleteDisabled"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteTriggerBase, never, never, { "autocomplete": "matAutocomplete"; "position": "matAutocompletePosition"; "connectedTo": "matAutocompleteConnectedTo"; "autocompleteAttribute": "autocomplete"; "autocompleteDisabled": "matAutocompleteDisabled"; }, {}, never, never, false>;
 }
 export declare class MatAutocompleteTrigger extends _MatAutocompleteTriggerBase {
     protected _aboveClass: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], {}, {}, never, never, false>;
 }

package/autocomplete/autocomplete.d.ts

@@ -38,6 +38,8 @@ declare const _MatAutocompleteMixinBase: import("@angular/material/core")._Const
 export interface MatAutocompleteDefaultOptions {
     /** Whether the first option should be highlighted when an autocomplete panel is opened. */
     autoActiveFirstOption?: boolean;
+    /** Whether the active option should be selected as the user is navigating. */
+    autoSelectActiveOption?: boolean;
     /** Class or list of classes to be applied to the autocomplete's overlay panel. */
     overlayPanelClass?: string | string[];
 }
@@ -82,6 +84,10 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     get autoActiveFirstOption(): boolean;
     set autoActiveFirstOption(value: BooleanInput);
     private _autoActiveFirstOption;
+    /** Whether the active option should be selected as the user is navigating. */
+    get autoSelectActiveOption(): boolean;
+    set autoSelectActiveOption(value: BooleanInput);
+    private _autoSelectActiveOption;
     /**
      * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
      * match the width of its host.
@@ -129,7 +135,7 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     /** Sets the autocomplete visibility classes on a classlist based on the panel is visible. */
     private _setVisibilityClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "displayWith": "displayWith"; "autoActiveFirstOption": "autoActiveFirstOption"; "panelWidth": "panelWidth"; "classList": "class"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "displayWith": "displayWith"; "autoActiveFirstOption": "autoActiveFirstOption"; "autoSelectActiveOption": "autoSelectActiveOption"; "panelWidth": "panelWidth"; "classList": "class"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never, never, false>;
 }
 export declare class MatAutocomplete extends _MatAutocompleteBase {
     /** Reference to all option groups within the autocomplete. */
@@ -139,6 +145,6 @@ export declare class MatAutocomplete extends _MatAutocompleteBase {
     protected _visibleClass: string;
     protected _hiddenClass: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocomplete, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "disableRipple": "disableRipple"; }, {}, ["optionGroups", "options"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "disableRipple": "disableRipple"; }, {}, ["optionGroups", "options"], ["*"], false>;
 }
 export {};

package/badge/_badge-theme.scss

@@ -5,10 +5,11 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:math';
+@use '@angular/cdk';
+
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
-@use '../../cdk/a11y';
 
 $font-size: 12px;
 $font-weight: 600;
@@ -102,6 +103,14 @@ $_badge-structure-emitted: false !default;
     position: relative;
   }
 
+  // The badge should make sure its host is overflow visible so that the badge content
+  // can be rendered outside of the element. Some components such as <mat-icon> explicitly
+  // style `overflow: hidden` so this requires extra specificity so that it does not
+  // depend on style load order.
+  .mat-badge.mat-badge {
+    overflow: visible;
+  }
+
   .mat-badge-hidden {
     .mat-badge-content {
       display: none;
@@ -158,7 +167,7 @@ $_badge-structure-emitted: false !default;
     color: theming.get-color-from-palette($primary, default-contrast);
     background: theming.get-color-from-palette($primary);
 
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       outline: solid 1px;
       border-radius: 0;
     }

package/badge/badge.d.ts

@@ -81,6 +81,6 @@ export declare class MatBadge extends _MatBadgeBase implements OnInit, OnDestroy
     /** Clears any existing badges that might be left over from server-side rendering. */
     private _clearExistingBadges;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadge, [null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatBadge, "[matBadge]", never, { "disabled": "matBadgeDisabled"; "color": "matBadgeColor"; "overlap": "matBadgeOverlap"; "position": "matBadgePosition"; "content": "matBadge"; "description": "matBadgeDescription"; "size": "matBadgeSize"; "hidden": "matBadgeHidden"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatBadge, "[matBadge]", never, { "disabled": "matBadgeDisabled"; "color": "matBadgeColor"; "overlap": "matBadgeOverlap"; "position": "matBadgePosition"; "content": "matBadge"; "description": "matBadgeDescription"; "size": "matBadgeSize"; "hidden": "matBadgeHidden"; }, {}, never, never, false>;
 }
 export {};

package/bottom-sheet/bottom-sheet-container.d.ts

@@ -83,5 +83,5 @@ export declare class MatBottomSheetContainer extends BasePortalOutlet implements
     /** Saves a reference to the element that was focused before the bottom sheet was opened. */
     private _savePreviouslyFocusedElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, false>;
 }

package/button/button.d.ts

@@ -36,7 +36,7 @@ export declare class MatButton extends _MatButtonBase implements AfterViewInit,
     /** Gets whether the button has one of the given attributes. */
     _hasHostAttributes(...attributes: string[]): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButton, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, ["*"], false>;
 }
 /**
  * Material design anchor button.
@@ -53,6 +53,6 @@ export declare class MatAnchor extends MatButton implements AfterViewInit, OnDes
     ngOnDestroy(): void;
     _haltDisabledEvents: (event: Event) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAnchor, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAnchor, "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAnchor, "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false>;
 }
 export {};

package/button-toggle/_button-toggle-theme.scss

@@ -11,15 +11,27 @@
   $foreground: map.get($config, foreground);
   $background: map.get($config, background);
   $divider-color: theming.get-color-from-palette($foreground, divider);
+  $theme-divider-color: map.get($foreground, divider);
+
+  // By default the theme usually has an rgba color for the dividers, which can
+  // stack up with the background of a button toggle. This can cause the border
+  // of a selected toggle to look different from an deselected one. We use a solid
+  // color to ensure that the border always stays the same.
+  $divider-color: if(type-of($theme-divider-color) == color,
+    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),
+    $theme-divider-color
+  );
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {
-    @include private.private-theme-elevation(2, $config);
+    @include private.private-theme-overridable-elevation(2, $config);
   }
 
   .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
   .mat-button-toggle-group-appearance-standard {
-    box-shadow: none;
+    &:not([class*='mat-elevation-z']) {
+      box-shadow: none;
+    }
   }
 
   .mat-button-toggle {

package/button-toggle/button-toggle.d.ts

@@ -143,7 +143,7 @@ export declare class MatButtonToggleGroup implements ControlValueAccessor, OnIni
     /** Syncs up the group's value with the model and emits the change event. */
     private _updateModelValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggleGroup, [null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": "appearance"; "name": "name"; "vertical": "vertical"; "value": "value"; "multiple": "multiple"; "disabled": "disabled"; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": "appearance"; "name": "name"; "vertical": "vertical"; "value": "value"; "multiple": "multiple"; "disabled": "disabled"; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, false>;
 }
 /** @docs-private */
 declare const _MatButtonToggleBase: import("@angular/material/core")._Constructor<CanDisableRipple> & import("@angular/material/core")._AbstractConstructor<CanDisableRipple> & {
@@ -207,6 +207,6 @@ export declare class MatButtonToggle extends _MatButtonToggleBase implements OnI
      */
     _markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggle, [{ optional: true; }, null, null, null, { attribute: "tabindex"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "disableRipple": "disableRipple"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "id": "id"; "name": "name"; "value": "value"; "tabIndex": "tabIndex"; "appearance": "appearance"; "checked": "checked"; "disabled": "disabled"; }, { "change": "change"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "disableRipple": "disableRipple"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "id": "id"; "name": "name"; "value": "value"; "tabIndex": "tabIndex"; "appearance": "appearance"; "checked": "checked"; "disabled": "disabled"; }, { "change": "change"; }, never, ["*"], false>;
 }
 export {};

package/card/card.d.ts

@@ -5,7 +5,7 @@ import * as i0 from "@angular/core";
  */
 export declare class MatCardContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardContent, "mat-card-content, [mat-card-content], [matCardContent]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardContent, "mat-card-content, [mat-card-content], [matCardContent]", never, {}, {}, never, never, false>;
 }
 /**
  * Title of a card, needed as it's used as a selector in the API.
@@ -13,7 +13,7 @@ export declare class MatCardContent {
  */
 export declare class MatCardTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardTitle, "mat-card-title, [mat-card-title], [matCardTitle]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardTitle, "mat-card-title, [mat-card-title], [matCardTitle]", never, {}, {}, never, never, false>;
 }
 /**
  * Sub-title of a card, needed as it's used as a selector in the API.
@@ -21,7 +21,7 @@ export declare class MatCardTitle {
  */
 export declare class MatCardSubtitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardSubtitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardSubtitle, "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardSubtitle, "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]", never, {}, {}, never, never, false>;
 }
 /**
  * Action section of a card, needed as it's used as a selector in the API.
@@ -31,7 +31,7 @@ export declare class MatCardActions {
     /** Position of the actions inside the card. */
     align: 'start' | 'end';
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardActions, "mat-card-actions", ["matCardActions"], { "align": "align"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardActions, "mat-card-actions", ["matCardActions"], { "align": "align"; }, {}, never, never, false>;
 }
 /**
  * Footer of a card, needed as it's used as a selector in the API.
@@ -39,7 +39,7 @@ export declare class MatCardActions {
  */
 export declare class MatCardFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardFooter, "mat-card-footer", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardFooter, "mat-card-footer", never, {}, {}, never, never, false>;
 }
 /**
  * Image used in a card, needed to add the mat- CSS styling.
@@ -47,7 +47,7 @@ export declare class MatCardFooter {
  */
 export declare class MatCardImage {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardImage, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardImage, "[mat-card-image], [matCardImage]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardImage, "[mat-card-image], [matCardImage]", never, {}, {}, never, never, false>;
 }
 /**
  * Image used in a card, needed to add the mat- CSS styling.
@@ -55,7 +55,7 @@ export declare class MatCardImage {
  */
 export declare class MatCardSmImage {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardSmImage, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardSmImage, "[mat-card-sm-image], [matCardImageSmall]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardSmImage, "[mat-card-sm-image], [matCardImageSmall]", never, {}, {}, never, never, false>;
 }
 /**
  * Image used in a card, needed to add the mat- CSS styling.
@@ -63,7 +63,7 @@ export declare class MatCardSmImage {
  */
 export declare class MatCardMdImage {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardMdImage, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardMdImage, "[mat-card-md-image], [matCardImageMedium]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardMdImage, "[mat-card-md-image], [matCardImageMedium]", never, {}, {}, never, never, false>;
 }
 /**
  * Image used in a card, needed to add the mat- CSS styling.
@@ -71,7 +71,7 @@ export declare class MatCardMdImage {
  */
 export declare class MatCardLgImage {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardLgImage, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardLgImage, "[mat-card-lg-image], [matCardImageLarge]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardLgImage, "[mat-card-lg-image], [matCardImageLarge]", never, {}, {}, never, never, false>;
 }
 /**
  * Large image used in a card, needed to add the mat- CSS styling.
@@ -79,7 +79,7 @@ export declare class MatCardLgImage {
  */
 export declare class MatCardXlImage {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardXlImage, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardXlImage, "[mat-card-xl-image], [matCardImageXLarge]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardXlImage, "[mat-card-xl-image], [matCardImageXLarge]", never, {}, {}, never, never, false>;
 }
 /**
  * Avatar image used in a card, needed to add the mat- CSS styling.
@@ -87,7 +87,7 @@ export declare class MatCardXlImage {
  */
 export declare class MatCardAvatar {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardAvatar, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardAvatar, "[mat-card-avatar], [matCardAvatar]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardAvatar, "[mat-card-avatar], [matCardAvatar]", never, {}, {}, never, never, false>;
 }
 /**
  * A basic content container component that adds the styles of a Material design card.
@@ -104,7 +104,7 @@ export declare class MatCard {
     _animationMode?: string | undefined;
     constructor(_animationMode?: string | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCard, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCard, "mat-card", ["matCard"], {}, {}, never, ["*", "mat-card-footer"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCard, "mat-card", ["matCard"], {}, {}, never, ["*", "mat-card-footer"], false>;
 }
 /**
  * Component intended to be used within the `<mat-card>` component. It adds styles for a
@@ -113,7 +113,7 @@ export declare class MatCard {
  */
 export declare class MatCardHeader {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCardHeader, "mat-card-header", never, {}, {}, never, ["[mat-card-avatar], [matCardAvatar]", "mat-card-title, mat-card-subtitle,\n      [mat-card-title], [mat-card-subtitle],\n      [matCardTitle], [matCardSubtitle]", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCardHeader, "mat-card-header", never, {}, {}, never, ["[mat-card-avatar], [matCardAvatar]", "mat-card-title, mat-card-subtitle,\n      [mat-card-title], [mat-card-subtitle],\n      [matCardTitle], [matCardSubtitle]", "*"], false>;
 }
 /**
  * Component intended to be used within the `<mat-card>` component. It adds styles for a preset
@@ -122,5 +122,5 @@ export declare class MatCardHeader {
  */
 export declare class MatCardTitleGroup {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardTitleGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCardTitleGroup, "mat-card-title-group", never, {}, {}, never, ["mat-card-title, mat-card-subtitle,\n      [mat-card-title], [mat-card-subtitle],\n      [matCardTitle], [matCardSubtitle]", "img", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCardTitleGroup, "mat-card-title-group", never, {}, {}, never, ["mat-card-title, mat-card-subtitle,\n      [mat-card-title], [mat-card-subtitle],\n      [matCardTitle], [matCardSubtitle]", "img", "*"], false>;
 }

package/checkbox/_checkbox-theme.scss

@@ -71,7 +71,7 @@
     }
 
     .mat-checkbox-label {
-      color: theming.get-color-from-palette($foreground, secondary-text);
+      color: theming.get-color-from-palette($foreground, disabled);
     }
   }
 

package/checkbox/checkbox-required-validator.d.ts

@@ -16,5 +16,5 @@ export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
  */
 export declare class MatCheckboxRequiredValidator extends CheckboxRequiredValidator {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxRequiredValidator, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCheckboxRequiredValidator, "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCheckboxRequiredValidator, "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]", never, {}, {}, never, never, false>;
 }

package/checkbox/checkbox.d.ts

@@ -109,7 +109,7 @@ export declare class MatCheckbox extends _MatCheckboxBase implements ControlValu
      * Whether the checkbox is checked.
      */
     get checked(): boolean;
-    set checked(value: boolean);
+    set checked(value: BooleanInput);
     private _checked;
     /**
      * Whether the checkbox is disabled. This fully overrides the implementation provided by
@@ -161,6 +161,6 @@ export declare class MatCheckbox extends _MatCheckboxBase implements ControlValu
      */
     private _syncIndeterminate;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, [null, null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "id": "id"; "required": "required"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "id": "id"; "required": "required"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], false>;
 }
 export {};

package/checkbox/testing/checkbox-harness-filters.d.ts

@@ -12,4 +12,6 @@ export interface CheckboxHarnessFilters extends BaseHarnessFilters {
     label?: string | RegExp;
     /** Only find instances whose name attribute is the given value. */
     name?: string;
+    /** Only find instances with the given checked value. */
+    checked?: boolean;
 }

package/chips/chip-input.d.ts

@@ -21,11 +21,8 @@ export interface MatChipInputEvent {
     input: HTMLInputElement;
     /** The value of the input. */
     value: string;
-    /**
-     * Reference to the chip input that emitted the event.
-     * @breaking-change 13.0.0 This property will be made required.
-     */
-    chipInput?: MatChipInput;
+    /** Reference to the chip input that emitted the event. */
+    chipInput: MatChipInput;
 }
 /**
  * Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.
@@ -90,5 +87,5 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges, OnDe
     /** Checks whether a keycode is one of the configured separators. */
     private _isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipList": "matChipInputFor"; "addOnBlur": "matChipInputAddOnBlur"; "separatorKeyCodes": "matChipInputSeparatorKeyCodes"; "placeholder": "placeholder"; "id": "id"; "disabled": "disabled"; }, { "chipEnd": "matChipInputTokenEnd"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipList": "matChipInputFor"; "addOnBlur": "matChipInputAddOnBlur"; "separatorKeyCodes": "matChipInputSeparatorKeyCodes"; "placeholder": "placeholder"; "id": "id"; "disabled": "disabled"; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, false>;
 }

package/chips/chip-list.d.ts

@@ -13,17 +13,27 @@ import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter,
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldControl } from '@angular/material/form-field';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { MatChip, MatChipEvent, MatChipSelectionChange } from './chip';
 import { MatChipTextControl } from './chip-text-control';
 import * as i0 from "@angular/core";
 /** @docs-private */
 declare const _MatChipListBase: import("@angular/material/core")._Constructor<CanUpdateErrorState> & import("@angular/material/core")._AbstractConstructor<CanUpdateErrorState> & {
     new (_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl): {
+        /**
+         * Emits whenever the component state changes and should cause the parent
+         * form-field to update. Implemented as part of `MatFormFieldControl`.
+         * @docs-private
+         */
+        readonly stateChanges: Subject<void>;
         _defaultErrorStateMatcher: ErrorStateMatcher;
         _parentForm: NgForm;
         _parentFormGroup: FormGroupDirective;
-        /** @docs-private */
+        /**
+         * Form control bound to the component.
+         * Implemented as part of `MatFormFieldControl`.
+         * @docs-private
+         */
         ngControl: NgControl;
     };
 };
@@ -71,8 +81,6 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     protected _chipInput: MatChipTextControl;
     /** Uid of the chip list */
     _uid: string;
-    /** The aria-describedby attribute on the chip list for improved a11y. */
-    _ariaDescribedby: string;
     /** Tab index for the chip list. */
     _tabIndex: number;
     /**
@@ -91,6 +99,13 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     get selected(): MatChip[] | MatChip;
     /** The ARIA role applied to the chip list. */
     get role(): string | null;
+    set role(role: string | null);
+    private _explicitRole?;
+    /**
+     * Implemented as part of MatFormFieldControl.
+     * @docs-private
+     */
+    userAriaDescribedBy: string;
     /** An object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
     /** Whether the user should be allowed to select multiple chips. */
@@ -176,7 +191,7 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
      * @docs-private
      */
     readonly valueChange: EventEmitter<any>;
-    /** The chip components contained within this chip list. */
+    /** The chips contained within this chip list. */
     chips: QueryList<MatChip>;
     constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl);
     ngAfterContentInit(): void;
@@ -269,6 +284,6 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     /** Syncs the list's state with the individual chips. */
     private _syncChipsState;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipList, [null, null, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipList, "mat-chip-list", ["matChipList"], { "errorStateMatcher": "errorStateMatcher"; "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "required": "required"; "placeholder": "placeholder"; "disabled": "disabled"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "tabIndex": "tabIndex"; }, { "change": "change"; "valueChange": "valueChange"; }, ["chips"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipList, "mat-chip-list", ["matChipList"], { "role": "role"; "userAriaDescribedBy": "aria-describedby"; "errorStateMatcher": "errorStateMatcher"; "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "required": "required"; "placeholder": "placeholder"; "disabled": "disabled"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "tabIndex": "tabIndex"; }, { "change": "change"; "valueChange": "valueChange"; }, ["chips"], ["*"], false>;
 }
 export {};

package/chips/chip.d.ts

@@ -64,7 +64,7 @@ declare const _MatChipMixinBase: import("@angular/material/core")._Constructor<H
  */
 export declare class MatChipAvatar {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAvatar, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAvatar, "mat-chip-avatar, [matChipAvatar]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAvatar, "mat-chip-avatar, [matChipAvatar]", never, {}, {}, never, never, false>;
 }
 /**
  * Dummy directive to add CSS class to chip trailing icon.
@@ -72,11 +72,9 @@ export declare class MatChipAvatar {
  */
 export declare class MatChipTrailingIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipTrailingIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipTrailingIcon, "mat-chip-trailing-icon, [matChipTrailingIcon]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipTrailingIcon, "mat-chip-trailing-icon, [matChipTrailingIcon]", never, {}, {}, never, never, false>;
 }
-/**
- * Material design styled Chip component. Used inside the MatChipList component.
- */
+/** Material Design styled chip directive. Used inside the MatChipList component. */
 export declare class MatChip extends _MatChipMixinBase implements FocusableOption, OnDestroy, CanColor, CanDisableRipple, RippleTarget, HasTabIndex, CanDisable {
     private _ngZone;
     private _changeDetectorRef;
@@ -116,6 +114,8 @@ export declare class MatChip extends _MatChipMixinBase implements FocusableOptio
     trailingIcon: MatChipTrailingIcon;
     /** The chip's remove toggler. */
     removeIcon: MatChipRemove;
+    /** ARIA role that should be applied to the chip. */
+    role: string;
     /** Whether the chip is selected. */
     get selected(): boolean;
     set selected(value: BooleanInput);
@@ -182,7 +182,7 @@ export declare class MatChip extends _MatChipMixinBase implements FocusableOptio
     _blur(): void;
     private _dispatchSelectionChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, { optional: true; }, null, null, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "selected": "selected"; "value": "value"; "selectable": "selectable"; "disabled": "disabled"; "removable": "removable"; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "selected": "selected"; "value": "value"; "selectable": "selectable"; "disabled": "disabled"; "removable": "removable"; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon"], never, false>;
 }
 /**
  * Applies proper (click) support and adds styling for use with the Material Design "cancel" icon
@@ -203,6 +203,6 @@ export declare class MatChipRemove {
     /** Calls the parent chip's public `remove()` method if applicable. */
     _handleClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRemove, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipRemove, "[matChipRemove]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipRemove, "[matChipRemove]", never, {}, {}, never, never, false>;
 }
 export {};

package/core/_core.scss

@@ -1,6 +1,4 @@
-@use '../../cdk/overlay';
-@use '../../cdk/a11y';
-@use '../../cdk/text-field';
+@use '@angular/cdk';
 
 // Core styles that can be used to apply material design treatments to any element.
 @use './ripple/ripple';
@@ -11,10 +9,10 @@
 @mixin core($typography-config: null) {
   @include all-typography.all-component-typographies($typography-config);
   @include ripple.ripple();
-  @include a11y.a11y-visually-hidden();
-  @include overlay.overlay();
-  @include text-field.text-field-autosize();
-  @include text-field.text-field-autofill();
+  @include cdk.a11y-visually-hidden();
+  @include cdk.overlay();
+  @include cdk.text-field-autosize();
+  @include cdk.text-field-autofill();
 
   @include focus-indicators.private-strong-focus-indicators-positioning();
   @include _mdc-core();