@angular/material-experimental 14.0.0-next.1 → 14.0.0-next.10

package/mdc-button/_button-base.scss

@@ -1,7 +1,8 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/touch-target' as mdc-touch-target;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/style/layout-common';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background
@@ -13,7 +14,7 @@
   .mat-mdc-button-ripple,
   .mat-mdc-button-persistent-ripple,
   .mat-mdc-button-persistent-ripple::before {
-    @include layout-common.fill;
+    @include mat.private-fill;
 
     // Disable pointer events for the ripple container and state overlay because the container
     // will overlay the user content and we don't want to disable mouse events on the user content.
@@ -46,7 +47,7 @@
 
   // The focus indicator should match the bounds of the entire button.
   .mat-mdc-focus-indicator {
-    @include layout-common.fill();
+    @include mat.private-fill();
   }
 }
 

package/mdc-button/_button-theme-private.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
-@use '../../material/core/ripple/ripple-theme';
 
 @mixin _ripple-color($color) {
   --mat-mdc-button-persistent-ripple-color: #{$color};

package/mdc-button/_button-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/button/button' as mdc-button;
 @use '@material/button/button-theme' as mdc-button-theme;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
@@ -6,9 +7,8 @@
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
-@use '../../material/core/typography/typography';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 @use './button-theme-private';
 
 @mixin _button-variant($color) {
@@ -38,7 +38,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $is-dark: map.get($config, is-dark);
     $on-surface: mdc-theme-color.prop-value(on-surface);
@@ -183,30 +183,33 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-button,
   .mat-mdc-raised-button,
   .mat-mdc-unelevated-button,
   .mat-mdc-outlined-button {
-    @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
-    @include button-theme-private.touch-target-density($density-scale);
+    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
+    &.mat-mdc-button-base {
+      @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+      @include button-theme-private.touch-target-density($density-scale);
+    }
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-button') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-button') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-button/_fab-theme.scss

@@ -1,10 +1,10 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
 @use './button-theme-private';
 
 @mixin _fab-variant($foreground, $background) {
@@ -17,7 +17,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $on-surface: mdc-theme-color.prop-value(on-surface);
     $is-dark: map.get($config, is-dark);
@@ -61,8 +61,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -71,11 +71,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-fab') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-fab') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-button/_icon-button-theme.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/icon-button/mixins' as mdc-icon-button;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
 @use './button-theme-private';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $is-dark: map.get($config, is-dark);
     $on-surface: mdc-theme-color.prop-value(on-surface);
@@ -40,27 +40,28 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  .mat-mdc-icon-button {
+  $density-scale: mat.get-density-config($config-or-theme);
+    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
+  .mat-mdc-icon-button.mat-mdc-button-base {
     @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
     @include button-theme-private.touch-target-density($density-scale);
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-card/_card-theme.scss

@@ -1,14 +1,14 @@
+@use '@angular/material' as mat;
 @use '@material/card' as mdc-card;
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use 'sass:color';
 @use 'sass:map';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   $foreground: map.get($config, foreground);
   $is-dark-theme: map.get($config, is-dark);
 
@@ -26,7 +26,7 @@
     // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
     // color to secondary text here.
     .mat-mdc-card-subtitle {
-      color: theming.get-color-from-palette($foreground, secondary-text);
+      color: mat.get-color-from-palette($foreground, secondary-text);
     }
   }
 
@@ -35,8 +35,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-card.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
 
@@ -55,11 +55,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-card') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-card') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-checkbox/_checkbox-theme.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 @use '@material/checkbox/checkbox' as mdc-checkbox;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
@@ -5,10 +6,8 @@
 @use '@material/theme/theme';
 @use 'sass:map';
 @use 'sass:color';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
-@use '../../material/core/ripple/ripple-theme';
 @use './checkbox-private';
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
@@ -16,7 +15,7 @@
 @mixin _selected-ripple-colors($theme, $mdc-color) {
   .mdc-checkbox--selected ~ {
     .mat-mdc-checkbox-ripple {
-      @include ripple-theme.color((
+      @include mat.ripple-color((
           foreground: (
               base: mdc-theme-color.prop-value($mdc-color)
           ),
@@ -30,15 +29,15 @@
 }
 
 @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));
+  $config: mat.get-color-config($config-or-theme);
+  $primary: mat.get-color-from-palette(map.get($config, primary));
+  $accent: mat.get-color-from-palette(map.get($config, accent));
+  $warn: mat.get-color-from-palette(map.get($config, warn));
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-checkbox {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include ripple-theme.color((
+      @include mat.ripple-color((
         foreground: (
           base: mdc-theme-color.prop-value(on-surface)
         ),
@@ -70,8 +69,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -79,7 +78,7 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
 
   @include mdc-helpers.disable-fallback-declarations {
     .mat-mdc-checkbox .mdc-checkbox {
@@ -98,11 +97,11 @@
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-chips/_chips-theme.scss

@@ -1,13 +1,13 @@
-@use '@material/chips/chip' as mdc-chip;
+@use '@angular/material' as mat;
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '@material/chips/chip-set' as mdc-chip-set;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/color-palette' as mdc-color-palette;
+@use '@material/typography' as mdc-typography;
 @use 'sass:color';
 @use 'sass:map';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 // Customizes the appearance of a chip. Note that ideally we would be doing this using the
 // `theme-styles` mixin, however it has the following problems:
@@ -32,8 +32,8 @@
 }
 
 @mixin _colored-chip($palette) {
-  $background: theming.get-color-from-palette($palette);
-  $foreground: theming.get-color-from-palette($palette, default-contrast);
+  $background: mat.get-color-from-palette($palette);
+  $foreground: mat.get-color-from-palette($palette, default-contrast);
 
   &.mat-mdc-chip-selected,
   &.mat-mdc-chip-highlighted {
@@ -42,7 +42,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   $primary: map.get($config, primary);
   $accent: map.get($config, accent);
   $warn: map.get($config, warn);
@@ -76,27 +76,32 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query);
+    // Note that we don't go through MDC's typography mixin, because it assigns the styles to
+    // an inner element which makes it difficult for clients to customize. Instead we apply the
+    // same styles ourselves to the root.
+    .mat-mdc-standard-chip {
+      @include mdc-typography.typography(body2, $query: mdc-helpers.$mat-typography-styles-query);
+    }
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-chip {
     @include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-chips') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-chips') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

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

@@ -24,7 +24,7 @@ export declare class MatChipAction extends _MatChipActionMixinBase implements Af
     private _adapter;
     /** Whether the action is interactive. */
     isInteractive: boolean;
-    _handleClick(_event: MouseEvent): void;
+    _handleClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
     protected _createFoundation(adapter: MDCChipActionAdapter): MDCChipActionFoundation;
     constructor(_elementRef: ElementRef, _document: any, _changeDetectorRef: ChangeDetectorRef);

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

@@ -12,7 +12,7 @@ import { CanUpdateErrorState, ErrorStateMatcher } from '@angular/material-experi
 import { MatFormFieldControl } from '@angular/material-experimental/mdc-form-field';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { MatChipTextControl } from './chip-text-control';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { MatChipEvent } from './chip';
 import { MatChipRow } from './chip-row';
 import { MatChipSet } from './chip-set';
@@ -37,10 +37,24 @@ declare class MatChipGridBase extends MatChipSet {
     _defaultErrorStateMatcher: ErrorStateMatcher;
     _parentForm: NgForm;
     _parentFormGroup: FormGroupDirective;
-    /** @docs-private */
+    /**
+     * Form control bound to the component.
+     * Implemented as part of `MatFormFieldControl`.
+     * @docs-private
+     */
     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>;
     constructor(liveAnnouncer: LiveAnnouncer, document: any, elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, 
-    /** @docs-private */
+    /**
+     * Form control bound to the component.
+     * Implemented as part of `MatFormFieldControl`.
+     * @docs-private
+     */
     ngControl: NgControl);
 }
 declare const _MatChipGridMixinBase: import("@angular/material-experimental/mdc-core")._Constructor<CanUpdateErrorState> & import("@angular/material-experimental/mdc-core")._AbstractConstructor<CanUpdateErrorState> & typeof MatChipGridBase;
@@ -56,6 +70,11 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
     readonly controlType: string;
     /** The chip input to add more chips */
     protected _chipInput: MatChipTextControl;
+    protected _defaultRole: string;
+    /**
+     * List of element ids to propagate to the chipInput's aria-describedby attribute.
+     */
+    private _ariaDescribedbyIds;
     /**
      * Function when touched. Set as part of ControlValueAccessor implementation.
      * @docs-private
@@ -82,8 +101,6 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      * @docs-private
      */
     get empty(): boolean;
-    /** The ARIA role applied to the chip grid. */
-    get role(): string | null;
     /**
      * Implemented as part of MatFormFieldControl.
      * @docs-private

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

@@ -22,11 +22,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>`.
@@ -37,6 +34,8 @@ export declare class MatChipInput implements MatChipTextControl, AfterContentIni
     private _defaultOptions;
     /** Used to prevent focus moving to chips while user is holding backspace */
     private _focusLastChipOnBackspace;
+    /** Value for ariaDescribedby property */
+    _ariaDescribedby?: string;
     /** Whether the control is focused. */
     focused: boolean;
     _chipGrid: MatChipGrid;
@@ -88,6 +87,7 @@ export declare class MatChipInput implements MatChipTextControl, AfterContentIni
     focus(): void;
     /** Clears the input */
     clear(): void;
+    setDescribedByIds(ids: string[]): void;
     /** Checks whether a keycode is one of the configured separators. */
     private _isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, [null, null, { optional: true; }]>;

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

@@ -46,8 +46,7 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
      * @docs-private
      */
     _onChange: (value: any) => void;
-    /** The ARIA role applied to the chip listbox. */
-    get role(): string | null;
+    protected _defaultRole: string;
     /** Whether the user should be allowed to select multiple chips. */
     get multiple(): boolean;
     set multiple(value: BooleanInput);

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

@@ -42,6 +42,8 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
     protected _chipSetFoundation: MDCChipSetFoundation;
     /** Subject that emits when the component has been destroyed. */
     protected _destroyed: Subject<void>;
+    /** Role to use if it hasn't been overwritten by the user. */
+    protected _defaultRole: string;
     /** Combined stream of all of the child chips' remove events. */
     get chipDestroyedChanges(): Observable<MatChipEvent>;
     /**
@@ -49,8 +51,6 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
      * These methods are called by the chip set foundation.
      */
     protected _chipSetAdapter: MDCChipSetAdapter;
-    /** The aria-describedby attribute on the chip list for improved a11y. */
-    _ariaDescribedby: string;
     /**
      * Map from class to whether the class is enabled.
      * Enabled classes are set on the MDC chip-set div.
@@ -67,7 +67,7 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
     /** The ARIA role applied to the chip set. */
     get role(): string | null;
     set role(value: string | null);
-    private _role;
+    private _explicitRole;
     /** Whether any of the chips inside of this chip-set has focus. */
     get focused(): boolean;
     /** The chips that are part of this chip set. */

package/mdc-chips/chip-text-control.d.ts

@@ -17,4 +17,6 @@ export interface MatChipTextControl {
     empty: boolean;
     /** Focuses the text control. */
     focus(): void;
+    /** Sets the list of ids the input is described by. */
+    setDescribedByIds(ids: string[]): void;
 }

package/mdc-chips/testing/public-api.d.ts

@@ -5,6 +5,7 @@
  * 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
  */
+export * from './chip-avatar-harness';
 export * from './chip-harness';
 export * from './chip-harness-filters';
 export * from './chip-input-harness';

package/mdc-color/_all-color.scss

@@ -1,11 +1,12 @@
+@use '@angular/material' as mat;
+
 @use '../mdc-theming/all-theme';
-@use '../../material/core/theming/theming';
 
 @mixin all-mdc-component-colors($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the color system, extract the color config from the theme object.
-  $config: if(theming.private-is-theme-object($config-or-theme),
-      theming.get-color-config($config-or-theme), $config-or-theme);
+  $config: if(mat.private-is-theme-object($config-or-theme),
+      mat.get-color-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
     @error 'No color configuration specified.';