@angular/material-experimental 14.0.0-next.0 → 14.0.0-next.11

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

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

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

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

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

@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+export * from './chip-avatar-harness';
 export * from './chip-harness';
 export * from './chip-harness-filters';
 export * from './chip-input-harness';

package/mdc-color/_all-color.scss

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

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

@@ -34,7 +34,12 @@ export declare class MatDialog extends _MatDialogBase<MatDialogContainer> {
      * @deprecated `_location` parameter to be removed.
      * @breaking-change 10.0.0
      */
-    location: Location, defaultOptions: MatDialogConfig, scrollStrategy: any, parentDialog: MatDialog, overlayContainer: OverlayContainer, animationMode?: 'NoopAnimations' | 'BrowserAnimations');
+    location: Location, defaultOptions: MatDialogConfig, scrollStrategy: any, parentDialog: MatDialog, 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>;
 }

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

@@ -0,0 +1,18 @@
+/**
+ * @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
+ */
+import { ComponentType } from '@angular/cdk/overlay';
+import { _MatTestDialogOpenerBase } from '@angular/material/dialog/testing';
+import { MatDialog, MatDialogContainer, MatDialogConfig } from '@angular/material-experimental/mdc-dialog';
+/** 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 {
+}

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

@@ -7,3 +7,4 @@
  */
 export { DialogHarnessFilters } from '@angular/material/dialog/testing';
 export { MatDialogHarness, MatDialogSection } from './dialog-harness';
+export * from './dialog-opener';

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,
@@ -77,7 +78,7 @@
   // on whether a textarea is used. This is not possible in our implementation of the
   // form-field because we do not know what type of form-field control is set up. Hence
   // we always use a fixed position for the label. This does not have any implications.
-  .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label {
+  .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label {
     top: math.div($height, 2);
   }
 
@@ -107,7 +108,7 @@
     // Update the spacing for filled form fields to account for the hidden floating label.
     @include _infix-vertical-spacing-filled(
           $no-label-padding, $no-label-padding);
-    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mdc-floating-label {
+    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
         display: none;
     }
   }

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,21 +1,30 @@
-@use '../../cdk/a11y';
+@use '@angular/cdk';
 
 @mixin private-form-field-high-contrast() {
   $focus-indicator-width: 3px;
   $focus-indicator-style: dashed;
 
-  // 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-form-field-appearance-fill .mat-mdc-text-field-wrapper {
-    @include a11y.high-contrast(active, off) {
-      outline: solid 1px;
+  .mat-form-field-appearance-fill {
+    // 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 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 cdk.high-contrast(active, off) {
+        outline-color: GrayText;
+      }
     }
   }
 
   // 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;
     }
   }
@@ -23,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);
@@ -76,7 +76,7 @@
     // shows `body1` for text fields though, so we manually override the typography.
     // Note: Form controls inherit the typography from the parent form field.
     .mat-mdc-form-field,
-    .mat-mdc-form-field .mdc-floating-label {
+    .mat-mdc-floating-label {
       @include mdc-typography.typography(body1, $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/_mdc-text-field-structure-overrides.scss

@@ -20,7 +20,7 @@
   // In order to ensure proper alignment of the floating label, we reset its line-height.
   // The line-height is not important as the element is absolutely positioned and only has one line
   // of text.
-  .mat-mdc-form-field .mdc-floating-label.mdc-floating-label {
+  .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
     line-height: normal;
   }
 
@@ -95,7 +95,7 @@
   // the notched outline container, and already applies a specific horizontal spacing which
   // we do not want to overwrite. *Note*: We need to have increased specificity for this
   // override because the `right` property will be set with higher specificity in RTL mode.
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mdc-floating-label {
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label {
     left: auto;
     right: auto;
   }

package/mdc-form-field/directives/floating-label.d.ts

@@ -24,13 +24,11 @@ export declare class MatFormFieldFloatingLabel {
     private _elementRef;
     /** Whether the label is floating. */
     floating: boolean;
-    /** Whether the label is required. */
-    required: boolean;
     constructor(_elementRef: ElementRef);
     /** Gets the width of the label. Used for the outline notch. */
     getWidth(): number;
     /** Gets the HTML element for the floating label. */
     get element(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldFloatingLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldFloatingLabel, "label[matFormFieldFloatingLabel]", never, { "floating": "floating"; "required": "required"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldFloatingLabel, "label[matFormFieldFloatingLabel]", never, { "floating": "floating"; }, {}, never>;
 }