@angular/material-experimental 13.2.0-next.1 → 13.2.2

package/mdc-button/_icon-button-theme.scss

@@ -1,5 +1,7 @@
+@use 'sass:map';
 @use '@material/icon-button/mixins' as mdc-icon-button;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 @use '../../material/core/typography/typography';
@@ -8,41 +10,32 @@
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
+    $is-dark: map.get($config, is-dark);
+    $on-surface: mdc-theme-color.prop-value(on-surface);
+    $disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
+
     .mat-mdc-icon-button {
-      @include mdc-ripple-theme.states(
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
+      @include button-theme-private.ripple-theme-styles($config, false);
 
       &.mat-primary {
-        @include mdc-ripple-theme.states-base-color(primary,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include mdc-icon-button.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include button-theme-private.ripple-ink-color(primary);
+        @include mdc-icon-button-theme.theme((icon-color: mdc-theme-color.prop-value(primary)));
       }
 
       &.mat-accent {
-        @include mdc-ripple-theme.states-base-color(secondary,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include mdc-icon-button.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include button-theme-private.ripple-ink-color(secondary);
+        @include mdc-icon-button-theme.theme((icon-color: mdc-theme-color.prop-value(secondary)));
       }
 
       &.mat-warn {
-        @include mdc-ripple-theme.states-base-color(error,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include mdc-icon-button.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include button-theme-private.ripple-ink-color(error);
+        @include mdc-icon-button-theme.theme((icon-color: (mdc-theme-color.prop-value(error))));
       }
 
       @include button-theme-private.apply-disabled-style() {
-        @include button-theme-private.apply-disabled-color();
+        @include mdc-icon-button-theme.theme((
+          icon-color: $disabled-color,
+          disabled-icon-color: $disabled-color,
+        ));
       }
     }
-
-    @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
   }
 }
 

package/mdc-button/button-base.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { Platform } from '@angular/cdk/platform';
-import { ElementRef, NgZone } from '@angular/core';
+import { ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { CanColor, CanDisable, CanDisableRipple, MatRipple } from '@angular/material-experimental/mdc-core';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from "@angular/core";
@@ -30,10 +30,10 @@ export declare class MatButtonBase extends _MatButtonMixin implements CanDisable
     _platform: Platform;
     _ngZone: NgZone;
     _animationMode?: string | undefined;
-    /** Whether the ripple is centered on the button. */
-    _isRippleCentered: boolean;
     /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
     _isFab: boolean;
+    /** Whether this button is an icon button. Used to apply the correct class on the ripple. */
+    _isIconButton: boolean;
     /** Reference to the MatRipple instance of the button. */
     ripple: MatRipple;
     constructor(elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
@@ -59,10 +59,12 @@ export declare const MAT_ANCHOR_HOST: {
 /**
  * Anchor button base.
  */
-export declare class MatAnchorBase extends MatButtonBase {
+export declare class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
     tabIndex: number;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
-    _haltDisabledEvents(event: Event): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    _haltDisabledEvents: (event: Event) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAnchorBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatAnchorBase, never, never, {}, {}, never>;
 }

package/mdc-button/icon-button.d.ts

@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
  * See https://material.io/develop/web/components/buttons/icon-buttons/
  */
 export declare class MatIconButton extends MatButtonBase {
-    _isRippleCentered: boolean;
+    _isIconButton: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconButton, [null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"]>;
@@ -26,7 +26,7 @@ export declare class MatIconButton extends MatButtonBase {
  * See https://material.io/develop/web/components/buttons/icon-buttons/
  */
 export declare class MatIconAnchor extends MatAnchorBase {
-    _isRippleCentered: boolean;
+    _isIconButton: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconAnchor, [null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatIconAnchor, "a[mat-icon-button]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"]>;

package/mdc-checkbox/_checkbox-private.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
+
+// Configuration used to define the theme-related CSS variables.
+$private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, (
+  // Exclude all of the ripple-related styles.
+  selected-focus-state-layer-color: null,
+  selected-focus-state-layer-opacity: null,
+  selected-hover-state-layer-color: null,
+  selected-hover-state-layer-opacity: null,
+  selected-pressed-state-layer-color: null,
+  selected-pressed-state-layer-opacity: null,
+  unselected-focus-state-layer-color: null,
+  unselected-focus-state-layer-opacity: null,
+  unselected-hover-state-layer-color: null,
+  unselected-hover-state-layer-opacity: null,
+  unselected-pressed-state-layer-color: null,
+  unselected-pressed-state-layer-opacity: null,
+));
+
+// Mixin that includes the checkbox theme styles with a given palette.
+// By default, the MDC checkbox always uses the `secondary` palette.
+@mixin private-checkbox-styles-with-color($color, $mdc-color) {
+  $on-surface: mdc-theme-color.prop-value(on-surface);
+  $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
+  $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
+
+  @include mdc-checkbox-theme.theme((
+    selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
+
+    selected-focus-icon-color: $color,
+    selected-hover-icon-color: $color,
+    selected-icon-color: $color,
+    selected-pressed-icon-color: $color,
+    unselected-focus-icon-color: $color,
+    unselected-hover-icon-color: $color,
+
+    disabled-selected-icon-color: $disabled-color,
+    disabled-unselected-icon-color: $disabled-color,
+
+    unselected-icon-color: $border-color,
+    unselected-pressed-icon-color: $border-color,
+  ));
+}

package/mdc-checkbox/_checkbox-theme.scss

@@ -9,48 +9,16 @@
 @use '../../material/core/typography/typography';
 @use '../../material/core/theming/theming';
 @use '../../material/core/ripple/ripple-theme';
-
-
-// Mixin that includes the checkbox theme styles with a given palette.
-// By default, the MDC checkbox always uses the `secondary` palette.
-@mixin private-checkbox-styles-with-color($color, $mdcColor) {
-  $on-surface: mdc-theme-color.prop-value(on-surface);
-  $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
-  $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
-
-  @include mdc-checkbox-theme.theme((
-    selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdcColor}),
-
-    selected-focus-icon-color: $color,
-    selected-hover-icon-color: $color,
-    selected-hover-state-layer-color: $color,
-    selected-icon-color: $color,
-    selected-pressed-icon-color: $color,
-    unselected-focus-icon-color: $color,
-    unselected-hover-icon-color: $color,
-
-    selected-focus-state-layer-color: $on-surface,
-    selected-pressed-state-layer-color: $on-surface,
-    unselected-focus-state-layer-color: $on-surface,
-    unselected-hover-state-layer-color: $on-surface,
-    unselected-pressed-state-layer-color: $on-surface,
-
-    disabled-selected-icon-color: $disabled-color,
-    disabled-unselected-icon-color: $disabled-color,
-
-    unselected-icon-color: $border-color,
-    unselected-pressed-icon-color: $border-color,
-  ));
-}
+@use './checkbox-private';
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
 // checkbox is selected.
-@mixin _selected-ripple-colors($theme, $mdcColor) {
+@mixin _selected-ripple-colors($theme, $mdc-color) {
   .mdc-checkbox--selected ~ {
     .mat-mdc-checkbox-ripple {
       @include ripple-theme.color((
           foreground: (
-              base: mdc-theme-color.prop-value($mdcColor)
+              base: mdc-theme-color.prop-value($mdc-color)
           ),
       ));
     }
@@ -84,17 +52,17 @@
       // class for accent and warn style, and applying the appropriate overrides below. Since we
       // don't use MDC's ripple, we also need to set the color for our replacement ripple.
       &.mat-primary {
-        @include private-checkbox-styles-with-color($primary, primary);
+        @include checkbox-private.private-checkbox-styles-with-color($primary, primary);
         @include _selected-ripple-colors($primary, primary);
       }
 
       &.mat-accent {
-        @include private-checkbox-styles-with-color($accent, secondary);
+        @include checkbox-private.private-checkbox-styles-with-color($accent, secondary);
         @include _selected-ripple-colors($accent, secondary);
       }
 
       &.mat-warn {
-        @include private-checkbox-styles-with-color($warn, error);
+        @include checkbox-private.private-checkbox-styles-with-color($warn, error);
         @include _selected-ripple-colors($warn, error);
       }
     }
@@ -112,16 +80,19 @@
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  .mat-mdc-checkbox .mdc-checkbox {
-    @include mdc-checkbox-theme.density(
-      $density-scale,
-      $query: mdc-helpers.$mat-base-styles-query
-    );
-  }
 
-  @if ($density-scale == -2 or $density-scale == 'minimum') {
-    .mat-mdc-checkbox-touch-target {
-      display: none;
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-checkbox .mdc-checkbox {
+      @include mdc-checkbox-theme.density(
+        $density-scale,
+        $query: mdc-helpers.$mat-base-styles-query
+      );
+    }
+
+    @if ($density-scale == -2 or $density-scale == 'minimum') {
+      .mat-mdc-checkbox-touch-target {
+        display: none;
+      }
     }
   }
 }

package/mdc-checkbox/checkbox.d.ts

@@ -87,10 +87,6 @@ export declare class MatCheckbox extends _MatCheckboxBase implements AfterViewIn
     get inputId(): string;
     /** The `MDCCheckboxFoundation` instance for this checkbox. */
     _checkboxFoundation: MDCCheckboxFoundation;
-    /** The set of classes that should be applied to the native input. */
-    _classes: {
-        [key: string]: boolean;
-    };
     /** ControlValueAccessor onChange */
     private _cvaOnChange;
     /** ControlValueAccessor onTouch */
@@ -144,8 +140,6 @@ export declare class MatCheckbox extends _MatCheckboxBase implements AfterViewIn
     _onClick(): void;
     /** Gets the value for the `aria-checked` attribute of the native input. */
     _getAriaChecked(): 'true' | 'false' | 'mixed';
-    /** Sets whether the given CSS class should be applied to the native input. */
-    private _setClass;
     /**
      * Syncs the indeterminate value with the checkbox DOM node.
      *

package/mdc-checkbox/module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./checkbox";
 import * as i2 from "@angular/material-experimental/mdc-core";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/material/checkbox";
+import * as i3 from "@angular/material/checkbox";
 export declare class MatCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, [typeof i1.MatCheckbox], [typeof i2.MatCommonModule, typeof i2.MatRippleModule, typeof i3.CommonModule, typeof i4._MatCheckboxRequiredValidatorModule], [typeof i1.MatCheckbox, typeof i2.MatCommonModule, typeof i4._MatCheckboxRequiredValidatorModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, [typeof i1.MatCheckbox], [typeof i2.MatCommonModule, typeof i2.MatRippleModule, typeof i3._MatCheckboxRequiredValidatorModule], [typeof i1.MatCheckbox, typeof i2.MatCommonModule, typeof i3._MatCheckboxRequiredValidatorModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
 }

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

@@ -188,8 +188,6 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
      * If the amount of chips changed, we need to focus the next closest chip.
      */
     private _updateFocusForDestroyedChips;
-    /** Focus input element. */
-    private _focusInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGrid, [null, null, null, null, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGrid, "mat-chip-grid", never, { "tabIndex": "tabIndex"; "disabled": "disabled"; "placeholder": "placeholder"; "required": "required"; "value": "value"; "errorStateMatcher": "errorStateMatcher"; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"]>;
 }

package/mdc-core/option/_option-theme.scss

@@ -55,9 +55,9 @@
       theming.get-typography-config($config-or-theme));
 
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
-    // level. Class is repeated for increased specificity.
-    .mat-mdc-option .mdc-list-item__primary-text {
+    // MDC uses the `subtitle1` level for list items, but
+    // the spec shows `body1` as the correct level.
+    .mat-mdc-option {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }

package/mdc-core/option/option.d.ts

@@ -12,8 +12,8 @@ import * as i0 from "@angular/core";
 /**
  * Single option inside of a `<mat-select>` element.
  */
-export declare class MatOption extends _MatOptionBase {
+export declare class MatOption<T = any> extends _MatOptionBase<T> {
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: MatOptionParentComponent, group: MatOptgroup);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatOption, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["*"]>;
 }

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

@@ -23,12 +23,23 @@
     padding: 0 mdc-textfield-variables.$padding-horizontal;
   }
 
+  .mat-mdc-form-field-subscript-dynamic-size {
+    .mat-mdc-form-field-hint-wrapper,
+    .mat-mdc-form-field-error-wrapper {
+      position: static;
+    }
+  }
+
   .mat-mdc-form-field-bottom-align::before {
     content: '';
     display: inline-block;
     height: 16px;
   }
 
+  .mat-mdc-form-field-bottom-align.mat-mdc-form-field-subscript-dynamic-size::before {
+    content: unset;
+  }
+
   .mat-mdc-form-field-hint-end {
     order: 1;
   }

package/mdc-form-field/form-field.d.ts

@@ -25,6 +25,8 @@ import * as i0 from "@angular/core";
 export declare type FloatLabelType = 'always' | 'auto';
 /** Possible appearance styles for the form field. */
 export declare type MatFormFieldAppearance = 'fill' | 'outline';
+/** Behaviors for how the subscript height is set. */
+export declare type SubscriptSizing = 'fixed' | 'dynamic';
 /**
  * Represents the default options for the form field that can be configured
  * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
@@ -33,6 +35,7 @@ export interface MatFormFieldDefaultOptions {
     appearance?: MatFormFieldAppearance;
     hideRequiredMarker?: boolean;
     floatLabel?: FloatLabelType;
+    subscriptSizing?: SubscriptSizing;
 }
 /**
  * Injection token that can be used to configure the
@@ -76,6 +79,14 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     get appearance(): MatFormFieldAppearance;
     set appearance(value: MatFormFieldAppearance);
     private _appearance;
+    /**
+     * Whether the form field should reserve space for one line of hint/error text (default)
+     * or to have the spacing grow from 0px as needed based on the size of the hint/error content.
+     * Note that when using dynamic sizing, layout shifts will occur when hint/error text changes.
+     */
+    get subscriptSizing(): SubscriptSizing;
+    set subscriptSizing(value: SubscriptSizing);
+    private _subscriptSizing;
     /** Text for the form field hint. */
     get hintLabel(): string;
     set hintLabel(value: string);
@@ -185,5 +196,5 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     /** Checks whether the form field is attached to the DOM. */
     private _isAttachedToDom;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormField, [null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": "hideRequiredMarker"; "color": "color"; "floatLabel": "floatLabel"; "appearance": "appearance"; "hintLabel": "hintLabel"; }, {}, ["_labelChildNonStatic", "_labelChildStatic", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": "hideRequiredMarker"; "color": "color"; "floatLabel": "floatLabel"; "appearance": "appearance"; "subscriptSizing": "subscriptSizing"; "hintLabel": "hintLabel"; }, {}, ["_labelChildNonStatic", "_labelChildStatic", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']"]>;
 }

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

@@ -16,11 +16,10 @@
   $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);
-
   @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 {
@@ -38,13 +37,15 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.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) {

package/mdc-list/testing/list-item-harness-base.d.ts

@@ -60,6 +60,8 @@ export declare abstract class MatListItemHarnessBase extends ContentContainerCom
     getFullText(): Promise<string>;
     /** Gets the title of the list item. */
     getTitle(): Promise<string>;
+    /** Whether the list item is disabled. */
+    isDisabled(): Promise<boolean>;
     /**
      * Gets the secondary line text of the list item. Null if the list item
      * does not have a secondary line.

package/mdc-list/testing/selection-list-harness.d.ts

@@ -53,8 +53,6 @@ export declare class MatListOptionHarness extends MatListItemHarnessBase {
     getCheckboxPosition(): Promise<MatListOptionCheckboxPosition>;
     /** Whether the list option is selected. */
     isSelected(): Promise<boolean>;
-    /** Whether the list option is disabled. */
-    isDisabled(): Promise<boolean>;
     /** Focuses the list option. */
     focus(): Promise<void>;
     /** Blurs the list option. */

package/mdc-radio/_radio-theme.scss

@@ -10,12 +10,9 @@
 @mixin _color-palette($color-palette) {
   @include mdc-radio-theme.theme((
     selected-focus-icon-color: $color-palette,
-    selected-focus-state-layer-color: $color-palette,
     selected-hover-icon-color: $color-palette,
-    selected-hover-state-layer-color: $color-palette,
     selected-icon-color: $color-palette,
     selected-pressed-icon-color: $color-palette,
-    selected-pressed-state-layer-color: $color-palette,
   ));
 
   // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently.
@@ -39,12 +36,9 @@
         disabled-selected-icon-color: mdc-theme-color.$on-surface,
         disabled-unselected-icon-color: mdc-theme-color.$on-surface,
         unselected-focus-icon-color: $on-surface,
-        unselected-focus-state-layer-color: $on-surface,
         unselected-hover-icon-color: $on-surface,
-        unselected-hover-state-layer-color: $on-surface,
         unselected-icon-color: $on-surface,
         unselected-pressed-icon-color: $on-surface,
-        unselected-pressed-state-layer-color: $on-surface,
       ));
 
       &.mat-primary {

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

@@ -9,6 +9,6 @@ import * as i7 from "@angular/material-experimental/mdc-button";
 import * as i8 from "@angular/material-experimental/mdc-core";
 export declare class MatSnackBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSnackBarModule, [typeof i1.MatSimpleSnackBar, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction], [typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.CommonModule, typeof i7.MatButtonModule, typeof i8.MatCommonModule], [typeof i8.MatCommonModule, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSnackBarModule, [typeof i1.SimpleSnackBar, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction], [typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.CommonModule, typeof i7.MatButtonModule, typeof i8.MatCommonModule], [typeof i8.MatCommonModule, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSnackBarModule>;
 }

package/mdc-snack-bar/public-api.d.ts

@@ -10,4 +10,4 @@ export * from './snack-bar-container';
 export * from './snack-bar-content';
 export * from './snack-bar';
 export * from './module';
-export { MatSnackBarConfig, MatSnackBarDismiss, MatSnackBarRef, SimpleSnackBar, MAT_SNACK_BAR_DATA, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, TextOnlySnackBar, matSnackBarAnimations, } from '@angular/material/snack-bar';
+export { MatSnackBarConfig, MatSnackBarDismiss, MatSnackBarRef, MAT_SNACK_BAR_DATA, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, TextOnlySnackBar, matSnackBarAnimations, } from '@angular/material/snack-bar';

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

@@ -1,6 +1,6 @@
-import { TextOnlySnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
+import { TextOnlySnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import * as i0 from "@angular/core";
-export declare class MatSimpleSnackBar implements TextOnlySnackBar {
+export declare class SimpleSnackBar implements TextOnlySnackBar {
     snackBarRef: MatSnackBarRef<SimpleSnackBar>;
     data: {
         message: string;
@@ -14,6 +14,6 @@ export declare class MatSimpleSnackBar implements TextOnlySnackBar {
     action(): void;
     /** If the action button should be shown. */
     get hasAction(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSimpleSnackBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSimpleSnackBar, "mat-simple-snack-bar", ["matSnackBar"], {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleSnackBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleSnackBar, "simple-snack-bar", ["matSnackBar"], {}, {}, never, never>;
 }

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

@@ -1,14 +1,26 @@
-import { MatSnackBar as BaseMatSnackBar } from '@angular/material/snack-bar';
-import { MatSimpleSnackBar } from './simple-snack-bar';
+/**
+ * @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 { LiveAnnouncer } from '@angular/cdk/a11y';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { Overlay } from '@angular/cdk/overlay';
+import { Injector } from '@angular/core';
+import { MatSnackBarConfig, _MatSnackBarBase } from '@angular/material/snack-bar';
+import { SimpleSnackBar } from './simple-snack-bar';
 import { MatSnackBarContainer } from './snack-bar-container';
 import * as i0 from "@angular/core";
 /**
  * Service to dispatch Material Design snack bar messages.
  */
-export declare class MatSnackBar extends BaseMatSnackBar {
-    protected simpleSnackBarComponent: typeof MatSimpleSnackBar;
+export declare class MatSnackBar extends _MatSnackBarBase {
+    protected simpleSnackBarComponent: typeof SimpleSnackBar;
     protected snackBarContainerComponent: typeof MatSnackBarContainer;
     protected handsetCssClass: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBar, never>;
+    constructor(overlay: Overlay, live: LiveAnnouncer, injector: Injector, breakpointObserver: BreakpointObserver, parentSnackBar: MatSnackBar, defaultConfig: MatSnackBarConfig);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBar, [null, null, null, null, { optional: true; skipSelf: true; }, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatSnackBar>;
 }