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

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,15 +1,12 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
-//  "theming", "typography", "core". Currently splitting it is difficult because of our brittle
-//  gulp-based release build process. We can update this when we switch to bazel.
+//  "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));
@@ -49,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,
           ),
@@ -87,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),
@@ -98,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.
@@ -122,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-option-theme.scss

@@ -1,14 +1,14 @@
 @use '@material/checkbox' as mdc-checkbox;
-@use '../mdc-checkbox/checkbox-theme';
+@use '../mdc-checkbox/checkbox-private';
 @use '../mdc-helpers/mdc-helpers';
 @use './list-option-trailing-avatar-compat';
 
 // Mixin that overrides the selected item and checkbox colors for list options. By
 // default, the MDC list uses the `primary` color for list items. The MDC checkbox
 // inside list options by default uses the `primary` color too.
-@mixin private-list-option-color-override($color, $mdcColor) {
+@mixin private-list-option-color-override($color, $mdc-color) {
   & .mdc-list-item__start, & .mdc-list-item__end {
-    @include checkbox-theme.private-checkbox-styles-with-color($color, $mdcColor);
+    @include checkbox-private.private-checkbox-styles-with-color($color, $mdc-color);
   }
 }
 

package/mdc-list/_list-option-trailing-avatar-compat.scss

@@ -3,6 +3,7 @@
 @use '@material/density/functions' as density-functions;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/list/evolution-variables' as mdc-list-variables;
+@use '../mdc-helpers/mdc-helpers';
 
 // For compatibility with the non-MDC selection list, we support avatars that are
 // shown at the end of the list option. This is not supported by the MDC list as the
@@ -15,19 +16,21 @@
 @mixin core-styles($query) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
-  .mat-mdc-list-option-with-trailing-avatar {
-    @include mdc-list.item-end-spacing(16px, $query: $query);
-    @include mdc-list.item-end-size(40px, $query: $query);
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-option-with-trailing-avatar {
+      @include mdc-list.item-end-spacing(16px, $query: $query);
+      @include mdc-list.item-end-size(40px, $query: $query);
 
-    &.mdc-list-item--with-two-lines {
-      .mdc-list-item__primary-text {
-        @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
+      &.mdc-list-item--with-two-lines {
+        .mdc-list-item__primary-text {
+          @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
+        }
       }
-    }
 
-    .mdc-list-item__end {
-      @include feature-targeting.targets($feat-structure) {
-        border-radius: 50%;
+      .mdc-list-item__end {
+        @include feature-targeting.targets($feat-structure) {
+          border-radius: 50%;
+        }
       }
     }
   }
@@ -46,8 +49,10 @@
     $property-name: height,
   );
 
-  .mat-mdc-list-option-with-trailing-avatar {
-    @include mdc-list.one-line-item-height($one-line-tall-height);
-    @include mdc-list.two-line-item-height($two-line-tall-height);
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-option-with-trailing-avatar {
+      @include mdc-list.one-line-item-height($one-line-tall-height);
+      @include mdc-list.two-line-item-height($two-line-tall-height);
+    }
   }
 }

package/mdc-list/_list-theme.scss

@@ -1,26 +1,24 @@
 @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/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));
-
-  // MDC's state styles are tied in with their ripple. Since we don't use the MDC
-  // ripple, we need to add the hover, focus and selected states manually.
-  @include interactive-list-theme.private-interactive-list-item-state-colors($config);
+  $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
+    // ripple, we need to add the hover, focus and selected states manually.
+    @include interactive-list-theme.private-interactive-list-item-state-colors($config);
     @include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-list-option {
@@ -36,32 +34,42 @@
 }
 
 @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-list-item {
-    @include mdc-list.one-line-item-density($density-scale);
-    @include mdc-list.two-line-item-density($density-scale);
-    @include mdc-list.three-line-item-density($density-scale);
-  }
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-item {
+      @include mdc-list.one-line-item-density($density-scale);
+      @include mdc-list.two-line-item-density($density-scale);
+      @include mdc-list.three-line-item-density($density-scale);
+    }
 
-  @include list-option-theme.private-list-option-density-styles($density-scale);
+    @include list-option-theme.private-list-option-density-styles($density-scale);
+  }
 }
 
 @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();
   }
+
+  // According to the public spec this should be subtitle-1.
+  // However, body-1 and subtitle-1 are nearly identical in the public spec,
+  // 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 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);

package/mdc-list/list.d.ts

@@ -21,7 +21,11 @@ export declare class MatListItem extends MatListItemBase {
     _meta: QueryList<MatListItemMeta>;
     _unscopedContent: ElementRef<HTMLSpanElement>;
     _itemText: ElementRef<HTMLElement>;
+    /** Indicates whether an item in a `<mat-nav-list>` is the currently active page. */
+    get activated(): boolean;
+    set activated(activated: boolean);
+    _activated: boolean;
     constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase, platform: Platform, globalRippleOptions?: RippleGlobalOptions, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatListItem, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatListItem, "mat-list-item, a[mat-list-item], button[mat-list-item]", ["matListItem"], {}, {}, ["_lines", "_titles", "_meta"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "[matListItemMeta]", "mat-divider"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatListItem, "mat-list-item, a[mat-list-item], button[mat-list-item]", ["matListItem"], { "activated": "activated"; }, {}, ["_lines", "_titles", "_meta"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "[matListItemMeta]", "mat-divider"]>;
 }

package/mdc-menu/_menu-theme.scss

@@ -1,15 +1,15 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/typography' as mdc-typography;
 @use '@material/ripple' as mdc-ripple;
+
 @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-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
     @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
@@ -45,8 +45,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-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
 
@@ -68,11 +68,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-menu') {
-    $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-menu') {
+    $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-menu/menu.d.ts

@@ -16,7 +16,7 @@ export declare const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER: Provider;
 export declare class MatMenu extends _MatMenuBase {
     protected _elevationPrefix: string;
     protected _baseElevation: number;
-    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _defaultOptions: MatMenuDefaultOptions);
+    constructor(elementRef: ElementRef<HTMLElement>, ngZone: NgZone, defaultOptions: MatMenuDefaultOptions);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenu, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatMenu, "mat-menu", ["matMenu"], {}, {}, never, ["*"]>;
 }

package/mdc-paginator/_paginator-theme.scss

@@ -1,22 +1,21 @@
+@use '@angular/material' as mat;
+@use '@material/density' as mdc-density;
 @use '@material/typography' as mdc-typography;
 @use 'sass:map';
-@use '../../material/core/theming/theming';
-@use '../../material/core/density/private/compatibility';
-@use '../../material/core/typography/typography';
+
 @use '../mdc-helpers/mdc-helpers';
 @use './paginator-variables';
-@use '../../material/core/typography/typography-utils';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   $background: map.get($config, background);
   $foreground: map.get($config, foreground);
-  $icon-color: rgba(theming.get-color-from-palette($foreground, base), 0.54);
-  $disabled-color: rgba(theming.get-color-from-palette($foreground, base), 0.12);
+  $icon-color: rgba(mat.get-color-from-palette($foreground, base), 0.54);
+  $disabled-color: rgba(mat.get-color-from-palette($foreground, base), 0.12);
 
   .mat-mdc-paginator {
-    background: theming.get-color-from-palette($background, card);
-    color: rgba(theming.get-color-from-palette($foreground, base), 0.87);
+    background: mat.get-color-from-palette($background, card);
+    color: rgba(mat.get-color-from-palette($foreground, base), 0.87);
   }
 
   .mat-mdc-paginator-icon {
@@ -49,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) {
     .mat-mdc-paginator {
@@ -58,29 +57,27 @@
     }
 
     .mat-mdc-paginator .mat-mdc-select-value {
-      font-size: typography-utils.font-size($config, caption);
+      font-size: mat.font-size($config, caption);
     }
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  $height: compatibility.private-density-prop-value(
+  $density-scale: mat.get-density-config($config-or-theme);
+  $height: mdc-density.prop-value(
       paginator-variables.$density-config, $density-scale, height);
 
-  @include compatibility.private-density-legacy-compatibility() {
-    .mat-mdc-paginator-container {
-      min-height: $height;
-    }
+  .mat-mdc-paginator-container {
+    min-height: $height;
   }
 }
 
 @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-paginator') {
-    $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-paginator') {
+    $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-paginator/public-api.d.ts

@@ -7,4 +7,4 @@
  */
 export * from './module';
 export * from './paginator';
-export { MatPaginatorIntl, MAT_PAGINATOR_INTL_PROVIDER_FACTORY, MAT_PAGINATOR_INTL_PROVIDER, PageEvent, } from '@angular/material/paginator';
+export { MatPaginatorIntl, MAT_PAGINATOR_INTL_PROVIDER_FACTORY, MAT_PAGINATOR_INTL_PROVIDER, PageEvent, MatPaginatorSelectConfig, } from '@angular/material/paginator';