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

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-content-directives.d.ts

@@ -55,6 +55,10 @@ export declare class MatDialogContent {
  * Stays fixed to the bottom when scrolling.
  */
 export declare class MatDialogActions {
+    /**
+     * Horizontal alignment of action buttons.
+     */
+    align?: 'start' | 'center' | 'end';
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never>;
 }

package/mdc-form-field/_form-field-density.scss

@@ -1,9 +1,10 @@
 @use 'sass:map';
 @use 'sass:math';
+@use '@angular/material' as mat;
 @use '@material/density' as mdc-density;
 @use '@material/textfield' as mdc-textfield;
-@use '../../material/core/theming/theming';
-@use 'form-field-sizing';
+
+@use './form-field-sizing';
 
 // Mixin that sets the vertical spacing for the infix container of filled form fields.
 // We need to apply spacing to the infix container because we removed the input padding
@@ -39,7 +40,7 @@
 // specification. In order to support density, we need to adjust the vertical spacing to be
 // based on the density scale.
 @mixin private-form-field-density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   // Height of the form field that is based on the current density scale.
   $height: mdc-density.prop-value(
     $density-config: mdc-textfield.$density-config,

package/mdc-form-field/_form-field-focus-overlay.scss

@@ -1,6 +1,6 @@
+@use '@angular/material' as mat;
 @use '@material/ripple/functions' as mdc-ripple-functions;
 @use '@material/textfield' as mdc-textfield;
-@use '../../material/core/style/layout-common';
 
 // MDC text-field uses `@material/ripple` in order to show a focus and hover effect for
 // text-fields. This is unnecessary because the ripples bring in a lot of unnecessary
@@ -11,7 +11,7 @@
 // uses the exact same logic to compute the colors as in the default MDC text-field ripples.
 @mixin private-form-field-focus-overlay() {
   .mat-mdc-form-field-focus-overlay {
-    @include layout-common.fill;
+    @include mat.private-fill;
     opacity: 0;
   }
 }

package/mdc-form-field/_form-field-high-contrast.scss

@@ -1,4 +1,4 @@
-@use '../../cdk/a11y';
+@use '@angular/cdk';
 
 @mixin private-form-field-high-contrast() {
   $focus-indicator-width: 3px;
@@ -8,14 +8,14 @@
     // The outline of the `fill` appearance is achieved through a background color
     // which won't be visible in high contrast mode. Add an outline to replace it.
     .mat-mdc-text-field-wrapper {
-      @include a11y.high-contrast(active, off) {
+      @include cdk.high-contrast(active, off) {
         outline: solid 1px;
       }
     }
 
     // Use GreyText for the disabled outline color which will account for the user's configuration.
     &.mat-form-field-disabled .mat-mdc-text-field-wrapper {
-      @include a11y.high-contrast(active, off) {
+      @include cdk.high-contrast(active, off) {
         outline-color: GrayText;
       }
     }
@@ -24,7 +24,7 @@
   // If a form field with fill appearance is focused, update the outline to be
   // dashed and thicker to indicate focus.
   .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       outline: $focus-indicator-style $focus-indicator-width;
     }
   }
@@ -32,7 +32,7 @@
   // For form fields with outline appearance, we show a dashed thick border on top
   // of the solid notched-outline border to indicate focus.
   .mat-mdc-form-field.mat-focused .mdc-notched-outline {
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       border: $focus-indicator-style $focus-indicator-width;
     }
   }

package/mdc-form-field/_form-field-native-select.scss

@@ -1,9 +1,10 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/palette';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
+@use '../mdc-helpers/mdc-helpers';
+
 // Width of the Material Design form-field select arrow.
 $mat-form-field-select-arrow-width: 10px;
 // Height of the Material Design form-field select arrow.
@@ -88,11 +89,11 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
       // reset the color of the options to something dark.
       @if (map.get($config, is-dark)) {
         option {
-          color: palette.$dark-primary-text;
+          color: mat.$private-dark-primary-text;
         }
 
         option:disabled {
-          color: palette.$dark-disabled-text;
+          color: mat.$private-dark-disabled-text;
         }
       }
     }

package/mdc-form-field/_form-field-subscript.scss

@@ -1,10 +1,12 @@
+
+@use '@angular/material' as mat;
 @use '@material/textfield' as mdc-textfield;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/typography' as mdc-typography;
 @use '@material/textfield/variables' as mdc-textfield-variables;
-@use 'form-field-sizing';
+
+@use './form-field-sizing';
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 
 @mixin private-form-field-subscript() {
   // Wrapper for the hints and error messages.
@@ -70,7 +72,7 @@
 // We need to define our own typography for the subscript because we don't include MDC's
 // helper text in our MDC based form field
 @mixin private-form-field-subscript-typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: mat.get-typography-config($config-or-theme);
 
   // The subscript wrapper has a minimum height to avoid that the form-field
   // jumps when hints or errors are displayed.

package/mdc-form-field/_form-field-theme.scss

@@ -1,17 +1,17 @@
+@use '@angular/material' as mat;
 @use '@material/textfield' as mdc-textfield;
 @use '@material/floating-label' as mdc-floating-label;
 @use '@material/notched-outline' as mdc-notched-outline;
 @use '@material/line-ripple' as mdc-line-ripple;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/typography/typography' as mdc-typography;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use 'form-field-density';
-@use 'form-field-subscript';
-@use 'form-field-focus-overlay';
-@use 'form-field-native-select';
-@use 'mdc-text-field-theme-variable-refresh';
-@use '../../material/core/theming/theming';
+@use './form-field-density';
+@use './form-field-subscript';
+@use './form-field-focus-overlay';
+@use './form-field-native-select';
+@use './mdc-text-field-theme-variable-refresh';
 
 
 // Mixin that overwrites the default MDC text-field color styles to be based on
@@ -40,7 +40,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) {
     @include mdc-text-field-theme-variable-refresh.private-text-field-refresh-theme-variables() {
       @include mdc-textfield.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
@@ -63,8 +63,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-textfield.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-floating-label.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -100,16 +100,16 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   @include form-field-density.private-form-field-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-form-field') {
-    $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-form-field') {
+    $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-form-field/form-field.d.ts

@@ -8,7 +8,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Platform } from '@angular/cdk/platform';
 import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, QueryList } from '@angular/core';
-import { NgControl } from '@angular/forms';
+import { AbstractControlDirective } from '@angular/forms';
 import { ThemePalette } from '@angular/material-experimental/mdc-core';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatError } from './directives/error';
@@ -32,9 +32,18 @@ export declare type SubscriptSizing = 'fixed' | 'dynamic';
  * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
  */
 export interface MatFormFieldDefaultOptions {
+    /** Default form field appearance style. */
     appearance?: MatFormFieldAppearance;
+    /** Default color of the form field. */
+    color?: ThemePalette;
+    /** Whether the required marker should be hidden by default. */
     hideRequiredMarker?: boolean;
+    /**
+     * Whether the label for form fields should by default float `always`,
+     * `never`, or `auto` (only when necessary).
+     */
     floatLabel?: FloatLabelType;
+    /** Whether the form field should reserve space for one line by default. */
     subscriptSizing?: SubscriptSizing;
 }
 /**
@@ -43,7 +52,7 @@ export interface MatFormFieldDefaultOptions {
  */
 export declare const MAT_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken<MatFormFieldDefaultOptions>;
 /** Container for form controls that applies Material Design styling and behavior. */
-export declare class MatFormField implements AfterViewInit, OnDestroy, AfterContentChecked, AfterContentInit {
+export declare class MatFormField implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
     private _elementRef;
     private _changeDetectorRef;
     private _ngZone;
@@ -69,13 +78,13 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     get hideRequiredMarker(): boolean;
     set hideRequiredMarker(value: BooleanInput);
     private _hideRequiredMarker;
-    /** The color palette for the form-field. */
+    /** The color palette for the form field. */
     color: ThemePalette;
     /** Whether the label should always float or float as the user types. */
     get floatLabel(): FloatLabelType;
     set floatLabel(value: FloatLabelType);
     private _floatLabel;
-    /** The form-field appearance style. */
+    /** The form field appearance style. */
     get appearance(): MatFormFieldAppearance;
     set appearance(value: MatFormFieldAppearance);
     private _appearance;
@@ -120,20 +129,20 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
      */
     getLabelId(): string | null;
     /**
-     * Gets an ElementRef for the element that a overlay attached to the form-field
+     * Gets an ElementRef for the element that a overlay attached to the form field
      * should be positioned relative to.
      */
     getConnectedOverlayOrigin(): ElementRef;
     /** Animates the placeholder up and locks it in position. */
     _animateAndLockLabel(): void;
-    /** Initializes the registered form-field control. */
+    /** Initializes the registered form field control. */
     private _initializeControl;
     private _checkPrefixAndSuffixTypes;
     /** Initializes the prefix and suffix containers. */
     private _initializePrefixAndSuffix;
     /**
      * Initializes the subscript by validating hints and synchronizing "aria-describedby" ids
-     * with the custom form-field control. Also subscribes to hint and error changes in order
+     * with the custom form field control. Also subscribes to hint and error changes in order
      * to be able to validate and synchronize ids on change.
      */
     private _initializeSubscript;
@@ -143,7 +152,7 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     /**
      * The floating label in the docked state needs to account for prefixes. The horizontal offset
      * is calculated whenever the appearance changes to `outline`, the prefixes change, or when the
-     * form-field is added to the DOM. This method sets up all subscriptions which are needed to
+     * form field is added to the DOM. This method sets up all subscriptions which are needed to
      * trigger the label offset update. In general, we want to avoid performing measurements often,
      * so we rely on the `NgZone` as indicator when the offset should be recalculated, instead of
      * checking every change detection cycle.
@@ -155,7 +164,7 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     /**
      * Whether the label should display in the infix. Labels in the outline appearance are
      * displayed as part of the notched-outline and are horizontally offset to account for
-     * form-field prefix content. This won't work in server side rendering since we cannot
+     * form field prefix content. This won't work in server side rendering since we cannot
      * measure the width of the prefix container. To make the docked label appear as if the
      * right offset has been calculated, we forcibly render the label inside the infix. Since
      * the label is part of the infix, the label cannot overflow the prefix content.
@@ -163,8 +172,11 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     _forceDisplayInfixLabel(): boolean | 0;
     _hasFloatingLabel(): boolean;
     _shouldLabelFloat(): boolean;
-    /** Determines whether a class from the NgControl should be forwarded to the host element. */
-    _shouldForward(prop: keyof NgControl): boolean;
+    /**
+     * Determines whether a class from the AbstractControlDirective
+     * should be forwarded to the host element.
+     */
+    _shouldForward(prop: keyof AbstractControlDirective): boolean;
     /** Determines whether to display hints or errors. */
     _getDisplayedMessages(): 'error' | 'hint';
     /** Refreshes the width of the outline-notch, if present. */

package/mdc-form-field/testing/public-api.d.ts

@@ -5,6 +5,6 @@
  * 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 '@angular/material/form-field/testing/control';
+export { MatFormFieldControlHarness } from '@angular/material/form-field/testing/control';
 export { FormFieldHarnessFilters } from '@angular/material/form-field/testing';
 export * from './form-field-harness';

package/mdc-helpers/_focus-indicators-theme.scss

@@ -1,6 +1,6 @@
+@use '@angular/material' as mat;
 @use 'sass:map';
 @use 'sass:meta';
-@use '../../material/core/theming/theming';
 
 @mixin _border-color($color) {
   .mat-mdc-focus-indicator::before {
@@ -14,8 +14,8 @@
     @include _border-color($config-or-theme-or-color);
   }
   @else {
-    $config: theming.get-color-config($config-or-theme-or-color);
-    $border-color: theming.get-color-from-palette(map.get($config, primary));
+    $config: mat.get-color-config($config-or-theme-or-color);
+    $border-color: mat.get-color-from-palette(map.get($config, primary));
     @include _border-color($border-color);
   }
 }
@@ -26,9 +26,9 @@
     @include _border-color($theme-or-color-config-or-color);
   }
   @else {
-    $theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
-    @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
-      $color: theming.get-color-config($theme);
+    $theme: mat.private-legacy-get-theme($theme-or-color-config-or-color);
+    @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
+      $color: mat.get-color-config($theme);
       @if $color != null {
         @include color($color);
       }

package/mdc-helpers/_focus-indicators.scss

@@ -1,5 +1,5 @@
+@use '@angular/material' as mat;
 @use 'sass:map';
-@use '../../material/core/style/layout-common';
 
 /// Mixin that turns on strong focus indicators.
 ///
@@ -23,7 +23,7 @@
 
   // Base styles for focus indicators.
   .mat-mdc-focus-indicator::before {
-    @include layout-common.fill();
+    @include mat.private-fill();
     box-sizing: border-box;
     pointer-events: none;
     border: $border-width $border-style transparent;

package/mdc-helpers/_mdc-helpers.scss

@@ -1,14 +1,12 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
 //  "theming", "typography", "core".
 
+@use '@angular/material' as mat;
 @use '@material/feature-targeting' as mdc-feature-targeting;
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/css' as mdc-theme-css;
 @use 'sass:map';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
-@use '../../material/core/typography/typography-utils';
 
 // A set of standard queries to use with MDC's queryable mixins.
 $mat-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
@@ -48,11 +46,11 @@ $mat-typography-mdc-level-mappings: (
           )),
       if($mat-level,
           (
-            font-size: typography-utils.font-size($mat-config, $mat-level),
-            line-height: typography-utils.line-height($mat-config, $mat-level),
-            font-weight: typography-utils.font-weight($mat-config, $mat-level),
-            letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level),
-            font-family: typography-utils.font-family($mat-config, $mat-level),
+            font-size: mat.font-size($mat-config, $mat-level),
+            line-height: mat.line-height($mat-config, $mat-level),
+            font-weight: mat.font-weight($mat-config, $mat-level),
+            letter-spacing: mat.letter-spacing($mat-config, $mat-level),
+            font-family: mat.font-family($mat-config, $mat-level),
             // Angular Material doesn't use text-transform, so disable it.
             text-transform: none,
           ),
@@ -86,7 +84,7 @@ $mat-typography-mdc-level-mappings: (
 @function mat-typography-config-level-from-mdc($mdc-level) {
   $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
 
-  @return typography.define-typography-level(
+  @return mat.define-typography-level(
       map.get($mdc-level-config, font-size),
       map.get($mdc-level-config, line-height),
       map.get($mdc-level-config, font-weight),
@@ -97,9 +95,9 @@ $mat-typography-mdc-level-mappings: (
 // Configures MDC's global variables to reflect the given theme, applies the given styles,
 // then resets the global variables to prevent unintended side effects.
 @mixin mat-using-mdc-theme($config) {
-  $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));
+  $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));
   $background-palette: map.get($config, background);
 
   // Save the original values.
@@ -121,8 +119,8 @@ $mat-typography-mdc-level-mappings: (
   mdc-theme-color.$secondary: $accent;
   mdc-theme-color.$on-secondary:
       if(mdc-theme-color.contrast-tone(mdc-theme-color.$secondary) == 'dark', #000, #fff);
-  mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
-  mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
+  mdc-theme-color.$background: mat.get-color-from-palette($background-palette, background);
+  mdc-theme-color.$surface: mat.get-color-from-palette($background-palette, card);
   mdc-theme-color.$on-surface:
       if(mdc-theme-color.contrast-tone(mdc-theme-color.$surface) == 'dark', #000, #fff);
   mdc-theme-color.$error: $warn;

package/mdc-input/_input-theme.scss

@@ -1,26 +1,26 @@
+@use '@angular/material' as mat;
+
 @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) {}
 }
 
 @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) {}
 }
 
 @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-input') {
-    $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-input') {
+    $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-list/_interactive-list-theme.scss

@@ -1,13 +1,13 @@
+@use '@angular/material' as mat;
 @use '@material/ripple' as mdc-ripple;
 @use 'sass:map';
-@use '../../material/core/theming/theming';
 
 // Mixin that provides colors for the various states of an interactive list-item. MDC
 // has integrated styles for these states but relies on their complex ripples for it.
 @mixin private-interactive-list-item-state-colors($config) {
   $is-dark-theme: map.get($config, is-dark);
   $active-base-color: if($is-dark-theme, white, black);
-  $selected-color: theming.get-color-from-palette(map.get($config, primary));
+  $selected-color: mat.get-color-from-palette(map.get($config, primary));
 
   .mat-mdc-list-item-interactive {
     &::before {

package/mdc-list/_list-theme.scss

@@ -1,21 +1,19 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/list/evolution-mixins' as mdc-list;
+
 @use './interactive-list-theme';
 @use './list-option-theme';
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/typography/typography-utils';
-@use '../../material/core/theming/theming';
-
 
 // TODO: implement mat-list[dense] once density system is in master
 
 
 @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) {
     // MDC's state styles are tied in with their ripple. Since we don't use the MDC
@@ -36,7 +34,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-list-item {
@@ -50,8 +48,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-list.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include list-option-theme.private-list-option-typography-styles();
@@ -62,16 +60,16 @@
   // and the Google-specific spec states that it should be body-1.
   // For consistency, we use body-1 for both public and Google internal.
   .mat-mdc-list-item .mdc-list-item__primary-text {
-    @include typography-utils.typography-level($config, body-1);
+    @include mat.typography-level($config, body-1);
   }
 }
 
 @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-list') {
-    $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-list') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);