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

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);
@@ -35,6 +35,6 @@ export declare class MatChipAction extends _MatChipActionMixinBase implements Af
     _getFoundation(): MDCChipActionFoundation;
     _updateTabindex(value: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAction, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "disabled": "disabled"; "tabIndex": "tabIndex"; "isInteractive": "isInteractive"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "disabled": "disabled"; "tabIndex": "tabIndex"; "isInteractive": "isInteractive"; }, {}, never, never, false>;
 }
 export {};

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

@@ -21,5 +21,5 @@ export declare class MatChipEditInput {
     getValue(): string;
     private _moveCursorToEndOfInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipEditInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipEditInput, "span[matChipEditInput]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipEditInput, "span[matChipEditInput]", never, {}, {}, never, never, false>;
 }

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
@@ -189,6 +206,6 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      */
     private _updateFocusForDestroyedChips;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGrid, [null, null, null, null, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGrid, "mat-chip-grid", never, { "tabIndex": "tabIndex"; "disabled": "disabled"; "placeholder": "placeholder"; "required": "required"; "value": "value"; "errorStateMatcher": "errorStateMatcher"; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGrid, "mat-chip-grid", never, { "tabIndex": "tabIndex"; "disabled": "disabled"; "placeholder": "placeholder"; "required": "required"; "value": "value"; "errorStateMatcher": "errorStateMatcher"; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"], false>;
 }
 export {};

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

@@ -21,7 +21,7 @@ export declare const MAT_CHIP_AVATAR: InjectionToken<MatChipAvatar>;
  */
 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>;
 }
 /**
  * Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
@@ -41,7 +41,7 @@ export declare class MatChipTrailingIcon extends MatChipAction {
     isInteractive: boolean;
     protected _createFoundation(adapter: MDCChipActionAdapter): MDCChipTrailingActionFoundation;
     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>;
 }
 /**
  * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
@@ -69,5 +69,5 @@ export declare class MatChipRemove extends MatChipAction {
     _handleClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): 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>;
 }

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,8 +87,9 @@ 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; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": "matChipInputFor"; "addOnBlur": "matChipInputAddOnBlur"; "separatorKeyCodes": "matChipInputSeparatorKeyCodes"; "placeholder": "placeholder"; "id": "id"; "disabled": "disabled"; }, { "chipEnd": "matChipInputTokenEnd"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": "matChipInputFor"; "addOnBlur": "matChipInputAddOnBlur"; "separatorKeyCodes": "matChipInputSeparatorKeyCodes"; "placeholder": "placeholder"; "id": "id"; "disabled": "disabled"; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, false>;
 }

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);
@@ -149,5 +148,5 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
      */
     private _updateFocusForDestroyedChips;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipListbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipListbox, "mat-chip-listbox", never, { "tabIndex": "tabIndex"; "multiple": "multiple"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "compareWith": "compareWith"; "required": "required"; "value": "value"; }, { "change": "change"; }, ["_chips"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipListbox, "mat-chip-listbox", never, { "tabIndex": "tabIndex"; "multiple": "multiple"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "compareWith": "compareWith"; "required": "required"; "value": "value"; }, { "change": "change"; }, ["_chips"], ["*"], false>;
 }

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

@@ -77,5 +77,5 @@ export declare class MatChipOption extends MatChip implements OnInit, AfterViewI
     _hasLeadingGraphic(): import("@angular/material-experimental/mdc-chips").MatChipAvatar;
     private _setSelectedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipOption, "mat-basic-chip-option, mat-chip-option", never, { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "selectable": "selectable"; "selected": "selected"; }, { "selectionChange": "selectionChange"; }, never, ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipOption, "mat-basic-chip-option, mat-chip-option", never, { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "selectable": "selectable"; "selected": "selected"; }, { "selectionChange": "selectionChange"; }, never, ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false>;
 }

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

@@ -58,5 +58,5 @@ export declare class MatChipRow extends MatChip implements AfterViewInit {
      */
     private _getEditInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, mat-basic-chip-row", never, { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "editable": "editable"; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "*", "[matChipEditInput]", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, mat-basic-chip-row", never, { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "editable": "editable"; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "*", "[matChipEditInput]", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false>;
 }

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. */
@@ -108,6 +108,6 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
     private _handleChipInteraction;
     private _handleChipNavigation;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipSet, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipSet, "mat-chip-set", never, { "disabled": "disabled"; "role": "role"; }, {}, ["_chips"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipSet, "mat-chip-set", never, { "disabled": "disabled"; "role": "role"; }, {}, ["_chips"], ["*"], false>;
 }
 export {};

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/chip.d.ts

@@ -134,6 +134,6 @@ export declare class MatChip extends _MatChipMixinBase implements AfterViewInit,
     private _handleTransitionend;
     private _handleAnimationend;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, mat-chip", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "id": "id"; "ariaLabel": "aria-label"; "disabled": "disabled"; "value": "value"; "removable": "removable"; "highlighted": "highlighted"; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, mat-chip", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "id": "id"; "ariaLabel": "aria-label"; "disabled": "disabled"; "value": "value"; "removable": "removable"; "highlighted": "highlighted"; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false>;
 }
 export {};

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.';

package/mdc-core/_core-theme.scss

@@ -1,12 +1,13 @@
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
+@use 'sass:map';
+@use '@angular/material' as mat;
+
 @use './option/option-theme';
 @use './option/optgroup-theme';
 @use './elevation';
 
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   @include option-theme.color($config);
   @include optgroup-theme.color($config);
@@ -23,19 +24,30 @@
         @include elevation.private-theme-elevation($zValue, $config);
       }
     }
+
+    // Wrapper element that provides the theme background when the user's content isn't
+    // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
+    // selector in case the mixin is included at the top level.
+    .mat-mdc-app-background#{if(&, ', &.mat-mdc-app-background', '')} {
+      $background: map.get($config, background);
+      $foreground: map.get($config, foreground);
+
+      background-color: mat.get-color-from-palette($background, background);
+      color: mat.get-color-from-palette($foreground, text);
+    }
   }
 }
 
 @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 option-theme.typography($config-or-theme);
   @include optgroup-theme.typography($config-or-theme);
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
 
   @include option-theme.density($density-scale);
   @include optgroup-theme.density($density-scale);
@@ -43,15 +55,15 @@
 
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
 
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
   // there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
+    $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-core/option/_optgroup-theme.scss

@@ -1,10 +1,10 @@
 @use '@material/theme/theme' as mdc-theme;
+@use '@angular/material' as mat;
+
 @use '../../mdc-helpers/mdc-helpers';
-@use '../../../material/core/theming/theming';
-@use '../../../material/core/typography/typography';
 
 @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) {
     .mat-mdc-optgroup-label {
@@ -16,20 +16,20 @@
 }
 
 @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));
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($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-optgroup') {
-    $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-optgroup') {
+    $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-core/option/_option-theme.scss

@@ -3,12 +3,12 @@
 @use '@material/list/evolution-mixins' as mdc-list-mixins;
 @use '@material/typography' as mdc-typography;
 @use '@material/ripple' as mdc-ripple;
+@use '@angular/material' as mat;
+
 @use '../../mdc-helpers/mdc-helpers';
-@use '../../../material/core/theming/theming';
-@use '../../../material/core/typography/typography';
 
 @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) {
     .mat-mdc-option {
@@ -51,8 +51,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) {
     // MDC uses the `subtitle1` level for list items, but
@@ -64,15 +64,15 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($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-option') {
-    $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-option') {
+    $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-core/option/optgroup.d.ts

@@ -5,5 +5,5 @@ import * as i0 from "@angular/core";
  */
 export declare class MatOptgroup extends _MatOptgroupBase {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOptgroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "disabled": "disabled"; }, {}, never, ["*", "mat-option, ng-container"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "disabled": "disabled"; }, {}, never, ["*", "mat-option, ng-container"], false>;
 }

package/mdc-core/option/option.d.ts

@@ -15,5 +15,5 @@ import * as i0 from "@angular/core";
 export declare class MatOption<T = any> extends _MatOptionBase<T> {
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: MatOptionParentComponent, group: MatOptgroup);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["*"], false>;
 }

package/mdc-density/_all-density.scss

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

package/mdc-dialog/_dialog-theme.scss

@@ -1,33 +1,69 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/dialog' as mdc-dialog;
+@use '@material/dialog/dialog-theme' as mdc-dialog-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/typography' as mdc-typography;
+
 @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);
+
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    @include mdc-dialog.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    .mat-mdc-dialog-container {
+      $surface: mdc-theme-color.$surface;
+      $on-surface: mdc-theme-color.$on-surface;
+      $text-emphasis-high: mdc-theme-color.text-emphasis(high);
+      $text-emphasis-medium: mdc-theme-color.text-emphasis(medium);
+
+      @include mdc-dialog-theme.theme((
+        container-color: $surface,
+        container-elevation: 24,
+        container-shadow-color: $on-surface,
+        with-divider-divider-color: rgba($on-surface, mdc-dialog.$scroll-divider-opacity),
+        subhead-color: rgba($on-surface, $text-emphasis-high),
+        supporting-text-color: rgba($on-surface, $text-emphasis-medium),
+      ));
+    }
   }
 }
 
 @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-dialog.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    .mat-mdc-dialog-container {
+      $styles: mdc-typography.$styles;
+      $headline6: map.get($styles, headline6);
+
+      @include mdc-dialog-theme.theme((
+        subhead-font: map.get($headline6, font-family),
+        subhead-line-height: map.get($styles, headline6, line-height),
+        subhead-size: map.get($styles, headline6, font-size),
+        subhead-weight: map.get($styles, headline6, font-weight),
+        subhead-tracking: map.get($styles, headline6, letter-spacing),
+
+        supporting-text-font: map.get($styles, body1, font-family),
+        supporting-text-line-height: map.get($styles, body1, line-height),
+        supporting-text-size: map.get($styles, body1, font-size),
+        supporting-text-weight: map.get($styles, body1, font-weight),
+        supporting-text-tracking: map.get($styles, body1, letter-spacing),
+      ));
+    }
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($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-dialog') {
-    $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-dialog') {
+    $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-dialog/dialog-container.d.ts

@@ -49,5 +49,5 @@ export declare class MatDialogContainer extends _MatDialogContainerBase implemen
     private _clearAnimationClasses;
     private _waitForAnimationToComplete;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, [null, null, null, { optional: true; }, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, false>;
 }