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

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,15 +40,15 @@
 }
 
 @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);
+  $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);
@@ -57,11 +57,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-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,3 +1,4 @@
+@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;
@@ -5,9 +6,8 @@
 @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,8 +76,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-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   @include mdc-helpers.mat-using-mdc-typography($config) {
     // Note that we don't go through MDC's typography mixin, because it assigns the styles to
@@ -90,18 +90,18 @@
 }
 
 @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-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,7 @@ 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.
      */
@@ -86,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>`.

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>;
     /**
@@ -65,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-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,13 +1,13 @@
 @use 'sass:map';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
+@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);
@@ -32,22 +32,22 @@
       $background: map.get($config, background);
       $foreground: map.get($config, foreground);
 
-      background-color: theming.get-color-from-palette($background, background);
-      color: theming.get-color-from-palette($foreground, text);
+      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);
@@ -55,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-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.';