@angular/material-experimental 14.0.0-next.7 → 14.0.0-rc.0

package/mdc-core/testing/index.d.ts

@@ -1,8 +1,64 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * 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 './public-api';
+import { BaseHarnessFilters } from '@angular/cdk/testing';
+import { ComponentHarness } from '@angular/cdk/testing';
+import { ComponentHarnessConstructor } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+
+/** Harness for interacting with an MDC-based `mat-optgroup` in tests. */
+export declare class MatOptgroupHarness extends ComponentHarness {
+    /** Selector used to locate option group instances. */
+    static hostSelector: string;
+    private _label;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a option group with specific
+     * attributes.
+     * @param options Options for filtering which option instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatOptgroupHarness>(this: ComponentHarnessConstructor<T>, options?: OptgroupHarnessFilters): HarnessPredicate<T>;
+    /** Gets the option group's label text. */
+    getLabelText(): Promise<string>;
+    /** Gets whether the option group is disabled. */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Gets the options that are inside the group.
+     * @param filter Optionally filters which options are included.
+     */
+    getOptions(filter?: OptionHarnessFilters): Promise<MatOptionHarness[]>;
+}
+
+/** Harness for interacting with an MDC-based `mat-option` in tests. */
+export declare class MatOptionHarness extends ComponentHarness {
+    /** Selector used to locate option instances. */
+    static hostSelector: string;
+    /** Element containing the option's text. */
+    private _text;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for an option with specific attributes.
+     * @param options Options for filtering which option instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatOptionHarness>(this: ComponentHarnessConstructor<T>, options?: OptionHarnessFilters): HarnessPredicate<T>;
+    /** Clicks the option. */
+    click(): Promise<void>;
+    /** Gets the option's label text. */
+    getText(): Promise<string>;
+    /** Gets whether the option is disabled. */
+    isDisabled(): Promise<boolean>;
+    /** Gets whether the option is selected. */
+    isSelected(): Promise<boolean>;
+    /** Gets whether the option is active. */
+    isActive(): Promise<boolean>;
+    /** Gets whether the option is in multiple selection mode. */
+    isMultiple(): Promise<boolean>;
+}
+
+export declare interface OptgroupHarnessFilters extends BaseHarnessFilters {
+    labelText?: string | RegExp;
+}
+
+export declare interface OptionHarnessFilters extends BaseHarnessFilters {
+    text?: string | RegExp;
+    isSelected?: boolean;
+}
+
+export { }

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

@@ -1,8 +1,217 @@
+import { AutoFocusTarget } from '@angular/material/dialog';
+import { DialogPosition } from '@angular/material/dialog';
+import { DialogRole } from '@angular/material/dialog';
+import { ElementRef } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import * as i3 from '@angular/cdk/dialog';
+import * as i4 from '@angular/cdk/overlay';
+import * as i5 from '@angular/cdk/portal';
+import * as i6 from '@angular/material-experimental/mdc-core';
+import { InjectionToken } from '@angular/core';
+import { Injector } from '@angular/core';
+import { InteractivityChecker } from '@angular/cdk/a11y';
+import { Location as Location_2 } from '@angular/common';
+import { MAT_DIALOG_SCROLL_STRATEGY_FACTORY } from '@angular/material/dialog';
+import { matDialogAnimations } from '@angular/material/dialog';
+import { _MatDialogBase } from '@angular/material/dialog';
+import { MatDialogConfig } from '@angular/material/dialog';
+import { _MatDialogContainerBase } from '@angular/material/dialog';
+import { MatDialogRef as MatDialogRef_2 } from '@angular/material/dialog';
+import { MatDialogState } from '@angular/material/dialog';
+import { NgZone } from '@angular/core';
+import { OnChanges } from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { ScrollStrategy } from '@angular/cdk/overlay';
+import { SimpleChanges } from '@angular/core';
+
+export { AutoFocusTarget }
+
+export { DialogPosition }
+
+export { DialogRole }
+
+declare namespace i1 {
+    export {
+        MatDialogContainer
+    }
+}
+
+declare namespace i2 {
+    export {
+        MatDialogClose,
+        MatDialogTitle,
+        MatDialogContent,
+        MatDialogActions
+    }
+}
+
+/** Injection token that can be used to access the data that was passed in to a dialog. */
+export declare const MAT_DIALOG_DATA: InjectionToken<any>;
+
+/** Injection token that can be used to specify default dialog options. */
+export declare const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;
+
+/** Injection token that determines the scroll handling while the dialog is open. */
+export declare const MAT_DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+
+export { MAT_DIALOG_SCROLL_STRATEGY_FACTORY }
+
+/** @docs-private */
+export declare const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY;
+};
+
+/** @docs-private */
+export declare function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
+
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * 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
+ * Service to open Material Design modal dialogs.
  */
-export * from './public-api';
+export declare class MatDialog extends _MatDialogBase<MatDialogContainer> {
+    constructor(overlay: Overlay, injector: Injector, 
+    /**
+     * @deprecated `_location` parameter to be removed.
+     * @breaking-change 10.0.0
+     */
+    location: Location_2, defaultOptions: MatDialogConfig, scrollStrategy: any, parentDialog: MatDialog, 
+    /**
+     * @deprecated No longer used. To be removed.
+     * @breaking-change 15.0.0
+     */
+    overlayContainer: OverlayContainer, 
+    /**
+     * @deprecated No longer used. To be removed.
+     * @breaking-change 14.0.0
+     */
+    animationMode?: 'NoopAnimations' | 'BrowserAnimations');
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialog, [null, null, { optional: true; }, { optional: true; }, null, { optional: true; skipSelf: true; }, null, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MatDialog>;
+}
+
+/**
+ * Container for the bottom action buttons in a dialog.
+ * 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, { "align": "align"; }, {}, never, never, false>;
+}
+
+export { matDialogAnimations }
+
+/**
+ * Button that will close the current dialog.
+ */
+export declare class MatDialogClose implements OnInit, OnChanges {
+    dialogRef: MatDialogRef<any>;
+    private _elementRef;
+    private _dialog;
+    /** Screenreader label for the button. */
+    ariaLabel: string;
+    /** Default to "button" to prevents accidental form submits. */
+    type: 'submit' | 'button' | 'reset';
+    /** Dialog close input. */
+    dialogResult: any;
+    _matDialogClose: any;
+    constructor(dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    _onButtonClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogClose, [{ optional: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogClose, "[mat-dialog-close], [matDialogClose]", ["matDialogClose"], { "ariaLabel": "aria-label"; "type": "type"; "dialogResult": "mat-dialog-close"; "_matDialogClose": "matDialogClose"; }, {}, never, never, false>;
+}
+
+export { MatDialogConfig }
+
+/**
+ * Internal component that wraps user-provided dialog content in a MDC dialog.
+ * @docs-private
+ */
+export declare class MatDialogContainer extends _MatDialogContainerBase implements OnDestroy {
+    private _animationMode?;
+    /** Whether animations are enabled. */
+    _animationsEnabled: boolean;
+    /** Host element of the dialog container component. */
+    private _hostElement;
+    /** Duration of the dialog open animation. */
+    private _openAnimationDuration;
+    /** Duration of the dialog close animation. */
+    private _closeAnimationDuration;
+    /** Current timer for dialog animations. */
+    private _animationTimer;
+    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, dialogConfig: MatDialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _animationMode?: string | undefined, focusMonitor?: FocusMonitor);
+    protected _contentAttached(): void;
+    ngOnDestroy(): void;
+    /** Starts the dialog open animation if enabled. */
+    private _startOpenAnimation;
+    /**
+     * Starts the exit animation of the dialog if enabled. This method is
+     * called by the dialog ref.
+     */
+    _startExitAnimation(): void;
+    /**
+     * Completes the dialog open by clearing potential animation classes, trapping
+     * focus and emitting an opened event.
+     */
+    private _finishDialogOpen;
+    /**
+     * Completes the dialog close by clearing potential animation classes, restoring
+     * focus and emitting a closed event.
+     */
+    private _finishDialogClose;
+    /** Clears all dialog animation classes. */
+    private _clearAnimationClasses;
+    private _waitForAnimationToComplete;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, [null, null, { optional: true; }, null, null, null, null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, false>;
+}
+
+/**
+ * Scrollable content container of a dialog.
+ */
+export declare class MatDialogContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, false>;
+}
+
+export declare class MatDialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, [typeof i1.MatDialogContainer, typeof i2.MatDialogClose, typeof i2.MatDialogTitle, typeof i2.MatDialogActions, typeof i2.MatDialogContent], [typeof i3.DialogModule, typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.MatCommonModule], [typeof i1.MatDialogContainer, typeof i2.MatDialogClose, typeof i2.MatDialogTitle, typeof i2.MatDialogContent, typeof i2.MatDialogActions, typeof i6.MatCommonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatDialogModule>;
+}
+
+/**
+ * Reference to a dialog opened via the MatDialog service.
+ */
+export declare class MatDialogRef<T, R = any> extends MatDialogRef_2<T, R> {
+}
+
+export { MatDialogState }
+
+/**
+ * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
+ */
+export declare class MatDialogTitle implements OnInit {
+    private _dialogRef;
+    private _elementRef;
+    private _dialog;
+    id: string;
+    constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, [{ optional: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogTitle, "[mat-dialog-title], [matDialogTitle]", ["matDialogTitle"], { "id": "id"; }, {}, never, never, false>;
+}
+
+export { }

package/mdc-dialog/testing/index.d.ts

@@ -1,8 +1,47 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * 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 './public-api';
+import { AsyncFactoryFn } from '@angular/cdk/testing';
+import { ComponentHarnessConstructor } from '@angular/cdk/testing';
+import { ComponentType } from '@angular/cdk/overlay';
+import { DialogHarnessFilters } from '@angular/material/dialog/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+import { MatDialog } from '@angular/material-experimental/mdc-dialog';
+import { MatDialogConfig } from '@angular/material-experimental/mdc-dialog';
+import { MatDialogContainer } from '@angular/material-experimental/mdc-dialog';
+import { _MatDialogHarnessBase } from '@angular/material/dialog/testing';
+import { _MatTestDialogOpenerBase } from '@angular/material/dialog/testing';
+import { TestElement } from '@angular/cdk/testing';
+
+export { DialogHarnessFilters }
+
+/** Harness for interacting with a standard `MatDialog` in tests. */
+export declare class MatDialogHarness extends _MatDialogHarnessBase {
+    /** The selector for the host element of a `MatDialog` instance. */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a dialog with specific attributes.
+     * @param options Options for filtering which dialog instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatDialogHarness>(this: ComponentHarnessConstructor<T>, options?: DialogHarnessFilters): HarnessPredicate<T>;
+    protected _title: AsyncFactoryFn<TestElement | null>;
+    protected _content: AsyncFactoryFn<TestElement | null>;
+    protected _actions: AsyncFactoryFn<TestElement | null>;
+}
+
+/** Selectors for different sections of the mat-dialog that can contain user content. */
+export declare const enum MatDialogSection {
+    TITLE = ".mat-mdc-dialog-title",
+    CONTENT = ".mat-mdc-dialog-content",
+    ACTIONS = ".mat-mdc-dialog-actions"
+}
+
+/** Test component that immediately opens a dialog when bootstrapped. */
+export declare class MatTestDialogOpener<T = unknown, R = unknown> extends _MatTestDialogOpenerBase<MatDialogContainer, T, R> {
+    constructor(dialog: MatDialog);
+    /** Static method that prepares this class to open the provided component. */
+    static withComponent<T = unknown, R = unknown>(component: ComponentType<T>, config?: MatDialogConfig): ComponentType<MatTestDialogOpener<T, R>>;
+}
+
+export declare class MatTestDialogOpenerModule {
+}
+
+export { }

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);