@angular/material-experimental 14.0.0-next.1 → 14.0.0-next.12

package/mdc-radio/_radio-theme.scss

@@ -1,11 +1,10 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/radio/radio' as mdc-radio;
 @use '@material/form-field' as mdc-form-field;
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin _color-palette($color-palette) {
   @include mdc-radio-theme.theme((
@@ -15,15 +14,14 @@
     selected-pressed-icon-color: $color-palette,
   ));
 
-  // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently.
-  @include mdc-radio-theme.focus-indicator-color($color-palette);
+  --mat-mdc-radio-checked-ripple-color: #{$color-palette};
 }
 
 @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) {
     $on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
@@ -41,6 +39,8 @@
         unselected-pressed-icon-color: $on-surface,
       ));
 
+      --mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)};
+
       &.mat-primary {
         @include _color-palette($primary);
       }
@@ -57,8 +57,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-radio.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -66,7 +66,7 @@
 }
 
 @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-radio-button .mdc-radio {
     @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
@@ -79,11 +79,11 @@
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-radio') {
-    $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-radio') {
+    $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-radio/radio.d.ts

@@ -31,7 +31,7 @@ export declare class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
     /** Child radio buttons. */
     _radios: QueryList<MatRadioButton>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRadioGroup, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRadioGroup, "mat-radio-group", ["matRadioGroup"], {}, {}, ["_radios"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRadioGroup, "mat-radio-group", ["matRadioGroup"], {}, {}, ["_radios"], never, false>;
 }
 export declare class MatRadioButton extends _MatRadioButtonBase implements AfterViewInit, OnDestroy {
     private _radioAdapter;
@@ -49,5 +49,5 @@ export declare class MatRadioButton extends _MatRadioButtonBase implements After
      */
     protected _setDisabled(value: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRadioButton, [{ optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatRadioButton, "mat-radio-button", ["matRadioButton"], { "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatRadioButton, "mat-radio-button", ["matRadioButton"], { "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false>;
 }

package/mdc-select/_select-theme.scss

@@ -1,10 +1,10 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/typography' as mdc-typography;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 // Gets the color to use for some text that is highlighted while a select has focus.
 @function _get-mdc-focused-text-color($palette) {
@@ -12,7 +12,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) {
     $disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
@@ -62,8 +62,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);
 
@@ -71,7 +71,7 @@
       @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
     }
 
-    .mat-mdc-select-value {
+    .mat-mdc-select {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }
@@ -80,11 +80,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-select') {
-    $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-select') {
+    $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-select/select.d.ts

@@ -27,7 +27,7 @@ export declare class MatSelectChange {
  */
 export declare class MatSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectTrigger, "mat-select-trigger", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectTrigger, "mat-select-trigger", never, {}, {}, never, never, false>;
 }
 export declare class MatSelect extends _MatSelectBase<MatSelectChange> implements OnInit, AfterViewInit {
     options: QueryList<MatOption>;
@@ -50,5 +50,5 @@ export declare class MatSelect extends _MatSelectBase<MatSelectChange> implement
     /** Gets how wide the overlay panel should be. */
     private _getOverlayWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], false>;
 }

package/mdc-slide-toggle/_slide-toggle-theme.scss

@@ -1,12 +1,11 @@
 @use 'sass:map';
 @use 'sass:color';
+@use '@angular/material' as mat;
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/theme/color-palette' as mdc-color-palette;
 @use '@material/form-field' as mdc-form-field;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
-@use '../../material/core/theming/palette';
 
 // Generates all color mapping for the properties that only change based on the theme.
 @function _get-theme-base-map($is-dark) {
@@ -70,10 +69,10 @@
 }
 
 @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));
   $is-dark: map.get($config, is-dark);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -99,27 +98,27 @@
 }
 
 @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-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-slide-toggle {
     @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
   }
 }
 
 @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);
 
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
-    $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-slide-toggle') {
+    $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-slide-toggle/slide-toggle.d.ts

@@ -103,5 +103,5 @@ export declare class MatSlideToggle implements ControlValueAccessor, AfterViewIn
     toggle(): void;
     _getAriaLabelledBy(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggle, [null, null, null, { attribute: "tabindex"; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "color": "color"; "name": "name"; "id": "id"; "tabIndex": "tabIndex"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "required": "required"; "checked": "checked"; "disableRipple": "disableRipple"; "disabled": "disabled"; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "color": "color"; "name": "name"; "id": "id"; "tabIndex": "tabIndex"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "required": "required"; "checked": "checked"; "disableRipple": "disableRipple"; "disabled": "disabled"; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], false>;
 }

package/mdc-slider/_slider-theme.scss

@@ -1,15 +1,14 @@
 @use 'sass:map';
 
+@use '@angular/material' as mat;
 @use '@material/slider/slider' as mdc-slider;
 @use '@material/slider/slider-theme';
 @use '@material/theme/variables' as theme-variables;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/ripple/ripple-theme';
-@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-slider.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
@@ -47,8 +46,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-slider.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -57,11 +56,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-slider') {
-    $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-slider') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);
@@ -112,7 +111,7 @@
     $query: mdc-helpers.$mat-theme-styles-query
   );
   $ripple-color: map.get(theme-variables.$property-values, $color);
-  @include ripple-theme.color((
+  @include mat.ripple-color((
     foreground: (
       base: $ripple-color
     ),

package/mdc-slider/slider.d.ts

@@ -91,7 +91,7 @@ export declare class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
      */
     _getValueIndicatorContainer(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderVisualThumb, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSliderVisualThumb, "mat-slider-visual-thumb", never, { "discrete": "discrete"; "thumbPosition": "thumbPosition"; "valueIndicatorText": "valueIndicatorText"; "disableRipple": "disableRipple"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSliderVisualThumb, "mat-slider-visual-thumb", never, { "discrete": "discrete"; "thumbPosition": "thumbPosition"; "valueIndicatorText": "valueIndicatorText"; "disableRipple": "disableRipple"; }, {}, never, never, false>;
 }
 /**
  * Directive that adds slider-specific behaviors to an input element inside `<mat-slider>`.
@@ -214,7 +214,7 @@ export declare class MatSliderThumb implements AfterViewInit, ControlValueAccess
      */
     private _initializeAriaValueText;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderThumb, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderThumb, "input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]", ["matSliderThumb"], { "value": "value"; }, { "valueChange": "valueChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; "_blur": "_blur"; "_focus": "_focus"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderThumb, "input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]", ["matSliderThumb"], { "value": "value"; }, { "valueChange": "valueChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; "_blur": "_blur"; "_focus": "_focus"; }, never, never, false>;
 }
 declare const _MatSliderMixinBase: import("@angular/material/core")._Constructor<import("@angular/material/core").CanColor> & import("@angular/material/core")._AbstractConstructor<import("@angular/material/core").CanColor> & import("@angular/material/core")._Constructor<CanDisableRipple> & import("@angular/material/core")._AbstractConstructor<CanDisableRipple> & {
     new (_elementRef: ElementRef<HTMLElement>): {
@@ -296,6 +296,10 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     private _SUPPORTS_POINTER_EVENTS;
     /** Subscription to changes to the directionality (LTR / RTL) context for the application. */
     private _dirChangeSubscription;
+    /** Observer used to monitor size changes in the slider. */
+    private _resizeObserver;
+    /** Timeout used to debounce resize listeners. */
+    private _resizeTimer;
     constructor(_ngZone: NgZone, _cdr: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _platform: Platform, _globalChangeAndInputListener: GlobalChangeAndInputListener<'input' | 'change'>, document: any, _dir: Directionality, _globalRippleOptions?: RippleGlobalOptions | undefined, animationMode?: string);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -361,7 +365,9 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     _getTickMarkClass(tickMark: TickMark): string;
     /** Whether the slider thumb ripples should be disabled. */
     _isRippleDisabled(): boolean;
+    /** Starts observing and updating the slider if the host changes its size. */
+    private _observeHostResize;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "color": "color"; "disableRipple": "disableRipple"; "disabled": "disabled"; "discrete": "discrete"; "showTickMarks": "showTickMarks"; "min": "min"; "max": "max"; "step": "step"; "displayWith": "displayWith"; }, {}, ["_inputs"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "color": "color"; "disableRipple": "disableRipple"; "disabled": "disabled"; "discrete": "discrete"; "showTickMarks": "showTickMarks"; "min": "min"; "max": "max"; "step": "step"; "displayWith": "displayWith"; }, {}, ["_inputs"], ["*"], false>;
 }
 export {};

package/mdc-snack-bar/_snack-bar-theme.scss

@@ -1,13 +1,13 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/snackbar' as mdc-snackbar;
 @use 'sass:color';
 @use 'sass:map';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   $orig-fill-color: mdc-snackbar.$fill-color;
   $orig-label-ink-color: mdc-snackbar.$label-ink-color;
@@ -41,7 +41,7 @@
   .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action.mdc-snackbar__action {
     $is-dark-theme: map.get($config, is-dark);
     $accent: map.get($config, accent);
-    color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text));
+    color: if($is-dark-theme, inherit, mat.get-color-from-palette($accent, text));
 
     .mat-ripple-element {
       background-color: currentColor;
@@ -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) {
     @include mdc-snackbar.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -61,11 +61,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-snack-bar') {
-    $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-snack-bar') {
+    $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-snack-bar/simple-snack-bar.d.ts

@@ -15,5 +15,5 @@ export declare class SimpleSnackBar implements TextOnlySnackBar {
     /** If the action button should be shown. */
     get hasAction(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SimpleSnackBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleSnackBar, "simple-snack-bar", ["matSnackBar"], {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleSnackBar, "simple-snack-bar", ["matSnackBar"], {}, {}, never, never, false>;
 }

package/mdc-snack-bar/snack-bar-container.d.ts

@@ -7,7 +7,7 @@
  */
 import { AriaLivePoliteness } from '@angular/cdk/a11y';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
-import { AfterViewChecked, ComponentRef, ElementRef, EmbeddedViewRef, NgZone, OnDestroy } from '@angular/core';
+import { ComponentRef, ElementRef, EmbeddedViewRef, NgZone, OnDestroy } from '@angular/core';
 import { MatSnackBarConfig, _SnackBarContainer } from '@angular/material/snack-bar';
 import { MDCSnackbarFoundation } from '@material/snackbar';
 import { Platform } from '@angular/cdk/platform';
@@ -17,7 +17,7 @@ import * as i0 from "@angular/core";
  * Internal component that wraps user-provided snack bar content.
  * @docs-private
  */
-export declare class MatSnackBarContainer extends BasePortalOutlet implements _SnackBarContainer, AfterViewChecked, OnDestroy {
+export declare class MatSnackBarContainer extends BasePortalOutlet implements _SnackBarContainer, OnDestroy {
     private _elementRef;
     snackBarConfig: MatSnackBarConfig;
     private _platform;
@@ -55,7 +55,6 @@ export declare class MatSnackBarContainer extends BasePortalOutlet implements _S
      */
     _label: ElementRef;
     constructor(_elementRef: ElementRef<HTMLElement>, snackBarConfig: MatSnackBarConfig, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
-    ngAfterViewChecked(): void;
     /** Makes sure the exit callbacks have been invoked when the element is destroyed. */
     ngOnDestroy(): void;
     enter(): void;
@@ -74,6 +73,8 @@ export declare class MatSnackBarContainer extends BasePortalOutlet implements _S
      * announce it.
      */
     private _screenReaderAnnounce;
+    /** Applies the correct CSS class to the label based on its content. */
+    private _applyLabelClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarContainer, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSnackBarContainer, "mat-snack-bar-container", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSnackBarContainer, "mat-snack-bar-container", never, {}, {}, never, never, false>;
 }

package/mdc-snack-bar/snack-bar-content.d.ts

@@ -2,15 +2,15 @@ import * as i0 from "@angular/core";
 /** Directive that should be applied to the text element to be rendered in the snack bar. */
 export declare class MatSnackBarLabel {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarLabel, "[matSnackBarLabel]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarLabel, "[matSnackBarLabel]", never, {}, {}, never, never, false>;
 }
 /** Directive that should be applied to the element containing the snack bar's action buttons. */
 export declare class MatSnackBarActions {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarActions, "[matSnackBarActions]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarActions, "[matSnackBarActions]", never, {}, {}, never, never, false>;
 }
 /** Directive that should be applied to each of the snack bar's action buttons. */
 export declare class MatSnackBarAction {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarAction, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarAction, "[matSnackBarAction]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarAction, "[matSnackBarAction]", never, {}, {}, never, never, false>;
 }

package/mdc-table/_table-theme.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/data-table/data-table' as mdc-data-table;
 @use '@material/data-table' as mdc-data-table-theme;
+
 @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);
   // Save original values of MDC global variables. We need to save these so we can restore the
   // variables to their original values and prevent unintended side effects from using this mixin.
   $orig-selected-row-fill-color: mdc-data-table-theme.$selected-row-fill-color;
@@ -15,8 +15,6 @@
   $orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color;
   $orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color;
   $orig-row-text-color: mdc-data-table-theme.$row-text-color;
-  $orig-sort-icon-color: mdc-data-table-theme.$sort-icon-color;
-  $orig-sort-icon-active-color: mdc-data-table-theme.$sort-icon-active-color;
   $orig-stroke-color: mdc-data-table-theme.$stroke-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -25,12 +23,9 @@
     mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04);
     mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    mdc-data-table-theme.$sort-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
-    mdc-data-table-theme.$sort-icon-active-color:
-        rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
 
-    @include mdc-data-table.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-data-table.table-styles($query: mdc-helpers.$mat-theme-styles-query);
   }
 
   // Restore original values of MDC global variables.
@@ -39,26 +34,24 @@
   mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color;
   mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color;
   mdc-data-table-theme.$row-text-color: $orig-row-text-color;
-  mdc-data-table-theme.$sort-icon-color: $orig-sort-icon-color;
-  mdc-data-table-theme.$sort-icon-active-color: $orig-sort-icon-active-color;
   mdc-data-table-theme.$stroke-color: $orig-stroke-color;
 
   .mat-mdc-table {
     $background: map.get($config, background);
-    background: theming.get-color-from-palette($background, 'card');
+    background: mat.get-color-from-palette($background, 'card');
   }
 }
 
 @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-data-table.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-data-table.table-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-table {
     @include mdc-data-table-theme.density($density-scale,
       $query: mdc-helpers.$mat-base-styles-query);
@@ -66,11 +59,11 @@
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-table') {
-    $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-table') {
+    $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-table/cell.d.ts

@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
  */
 export declare class MatCellDef extends CdkCellDef {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCellDef, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCellDef, "[matCellDef]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCellDef, "[matCellDef]", never, {}, {}, never, never, false>;
 }
 /**
  * Header cell definition for the mat-table.
@@ -14,7 +14,7 @@ export declare class MatCellDef extends CdkCellDef {
  */
 export declare class MatHeaderCellDef extends CdkHeaderCellDef {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatHeaderCellDef, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatHeaderCellDef, "[matHeaderCellDef]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatHeaderCellDef, "[matHeaderCellDef]", never, {}, {}, never, never, false>;
 }
 /**
  * Footer cell definition for the mat-table.
@@ -22,7 +22,7 @@ export declare class MatHeaderCellDef extends CdkHeaderCellDef {
  */
 export declare class MatFooterCellDef extends CdkFooterCellDef {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFooterCellDef, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFooterCellDef, "[matFooterCellDef]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFooterCellDef, "[matFooterCellDef]", never, {}, {}, never, never, false>;
 }
 /**
  * Column definition for the mat-table.
@@ -40,20 +40,20 @@ export declare class MatColumnDef extends CdkColumnDef {
      */
     protected _updateColumnCssClassName(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatColumnDef, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatColumnDef, "[matColumnDef]", never, { "sticky": "sticky"; "name": "matColumnDef"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatColumnDef, "[matColumnDef]", never, { "sticky": "sticky"; "name": "matColumnDef"; }, {}, never, never, false>;
 }
 /** Header cell template container that adds the right classes and role. */
 export declare class MatHeaderCell extends CdkHeaderCell {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatHeaderCell, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatHeaderCell, "mat-header-cell, th[mat-header-cell]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatHeaderCell, "mat-header-cell, th[mat-header-cell]", never, {}, {}, never, never, false>;
 }
 /** Footer cell template container that adds the right classes and role. */
 export declare class MatFooterCell extends CdkFooterCell {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFooterCell, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFooterCell, "mat-footer-cell, td[mat-footer-cell]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFooterCell, "mat-footer-cell, td[mat-footer-cell]", never, {}, {}, never, never, false>;
 }
 /** Cell template container that adds the right classes and role. */
 export declare class MatCell extends CdkCell {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCell, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCell, "mat-cell, td[mat-cell]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCell, "mat-cell, td[mat-cell]", never, {}, {}, never, never, false>;
 }