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

package/mdc-button/_button-theme.scss

@@ -1,146 +1,184 @@
+@use 'sass:map';
 @use '@material/button/button' as mdc-button;
 @use '@material/button/button-theme' as mdc-button-theme;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/button/button-text-theme' as mdc-button-text-theme;
+@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
+@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
+@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '../../material/core/ripple/ripple-theme';
 @use '../../material/core/typography/typography';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 @use './button-theme-private';
 
+@mixin _button-variant($color) {
+  @include mdc-button-text-theme.theme((
+    label-text-color: $color,
+  ));
+}
+
+@mixin _unelevated-button-variant($foreground, $background) {
+  @include mdc-button-filled-theme.theme((
+    container-color: $background,
+    label-text-color: $foreground,
+  ));
+}
+
+@mixin _raised-button-variant($foreground, $background) {
+  @include mdc-button-protected-theme.theme((
+    container-color: $background,
+    label-text-color: $foreground,
+  ));
+}
+
+@mixin _outlined-button-variant($color) {
+  @include mdc-button-outlined-theme.theme((
+    label-text-color: $color,
+  ));
+}
+
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    // Add state interactions for hover, focus, press, active. Colors are changed based on
-    // the mixin mdc-states-base-color
-    .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
-      @include mdc-ripple-theme.states(
-        $query: mdc-helpers.$mat-theme-styles-query,
-        $ripple-target: button-theme-private.$button-state-target);
-    }
-
-    .mat-mdc-button, .mat-mdc-outlined-button {
+    $is-dark: map.get($config, is-dark);
+    $on-surface: mdc-theme-color.prop-value(on-surface);
+    $surface: mdc-theme-color.prop-value(surface);
+    $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
+    $disabled-container-color: rgba($on-surface, 0.12);
+    $primary: mdc-theme-color.prop-value(primary);
+    $on-primary: mdc-theme-color.prop-value(on-primary);
+    $secondary: mdc-theme-color.prop-value(secondary);
+    $on-secondary: mdc-theme-color.prop-value(on-secondary);
+    $error: mdc-theme-color.prop-value(error);
+    $on-error: mdc-theme-color.prop-value(on-error);
+
+    .mat-mdc-button {
       &.mat-unthemed {
-        @include mdc-button-theme.ink-color(mdc-theme-color.$on-surface,
-          $query: mdc-helpers.$mat-theme-styles-query);
+        @include _button-variant($on-surface);
       }
 
       &.mat-primary {
-        @include mdc-button-theme.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-ripple-theme.states-base-color(primary,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include button-theme-private.ripple-ink-color(primary);
+        @include _button-variant($primary);
       }
 
       &.mat-accent {
-        @include mdc-button-theme.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-ripple-theme.states-base-color(secondary,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include button-theme-private.ripple-ink-color(secondary);
+        @include _button-variant($secondary);
       }
 
       &.mat-warn {
-        @include mdc-button-theme.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-ripple-theme.states-base-color(error,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include button-theme-private.ripple-ink-color(error);
+        @include _button-variant($error);
+      }
+
+      @include button-theme-private.apply-disabled-style() {
+        @include mdc-button-text-theme.theme((
+          // We need to pass both the disabled and enabled values, because the enabled
+          // ones apply to anchors while the disabled ones are for buttons.
+          disabled-label-text-color: $disabled-ink-color,
+          label-text-color: $disabled-ink-color
+        ));
       }
     }
 
-    .mat-mdc-raised-button,
     .mat-mdc-unelevated-button {
       &.mat-unthemed {
-        @include mdc-button-theme.container-fill-color(mdc-theme-color.$surface,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-theme.ink-color(mdc-theme-color.$on-surface,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
+        @include _unelevated-button-variant($on-surface, $surface);
       }
 
       &.mat-primary {
-        @include mdc-button-theme.container-fill-color(primary,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-theme.ink-color(on-primary,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-ripple-theme.states-base-color(on-primary,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include button-theme-private.ripple-ink-color(on-primary);
+        @include _unelevated-button-variant($on-primary, $primary);
       }
 
       &.mat-accent {
-        @include mdc-button-theme.container-fill-color(secondary,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-theme.ink-color(on-secondary,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-ripple-theme.states-base-color(on-secondary,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include button-theme-private.ripple-ink-color(on-secondary);
+        @include _unelevated-button-variant($on-secondary, $secondary);
       }
 
       &.mat-warn {
-        @include mdc-button-theme.container-fill-color(error,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-ripple-theme.states-base-color(on-error,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$button-state-target);
-        @include button-theme-private.ripple-ink-color(on-error);
+        @include _unelevated-button-variant($on-error, $error);
       }
 
       @include button-theme-private.apply-disabled-style() {
-        @include button-theme-private.apply-disabled-background();
+        @include mdc-button-filled-theme.theme((
+          // We need to pass both the disabled and enabled values, because the enabled
+          // ones apply to anchors while the disabled ones are for buttons.
+          disabled-container-color: $disabled-container-color,
+          disabled-label-text-color: $disabled-ink-color,
+          container-color: $disabled-container-color,
+          label-text-color: $disabled-ink-color,
+        ));
       }
     }
 
-    .mat-mdc-outlined-button {
+    .mat-mdc-raised-button {
       &.mat-unthemed {
-        @include mdc-button-theme.outline-color(mdc-theme-color.$on-surface,
-          $query: mdc-helpers.$mat-theme-styles-query);
+        @include _raised-button-variant($on-surface, $surface);
       }
 
       &.mat-primary {
-        @include mdc-button-theme.outline-color(primary,
-          $query: mdc-helpers.$mat-theme-styles-query);
+        @include _raised-button-variant($on-primary, $primary);
       }
 
       &.mat-accent {
-        @include mdc-button-theme.outline-color(secondary,
-          $query: mdc-helpers.$mat-theme-styles-query);
+        @include _raised-button-variant($on-secondary, $secondary);
       }
 
       &.mat-warn {
-        @include mdc-button-theme.outline-color(error,
-          $query: mdc-helpers.$mat-theme-styles-query);
+        @include _raised-button-variant($on-error, $error);
       }
 
       @include button-theme-private.apply-disabled-style() {
-        @include mdc-theme.prop(border-color,
-            mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
+        @include mdc-button-protected-theme.theme((
+          // We need to pass both the disabled and enabled values, because the enabled
+          // ones apply to anchors while the disabled ones are for buttons.
+          disabled-container-color: $disabled-container-color,
+          disabled-label-text-color: $disabled-ink-color,
+          container-color: $disabled-container-color,
+          label-text-color: $disabled-ink-color,
+          container-elevation: 0,
+        ));
       }
     }
 
-    .mat-mdc-raised-button {
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
+    .mat-mdc-outlined-button {
+      @include mdc-button-outlined-theme.theme((
+        outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12)
+      ));
+
+      &.mat-unthemed {
+        @include _outlined-button-variant($on-surface);
+      }
+
+      &.mat-primary {
+        @include _outlined-button-variant($primary);
+      }
+
+      &.mat-accent {
+        @include _outlined-button-variant($secondary);
+      }
+
+      &.mat-warn {
+        @include _outlined-button-variant($error);
       }
-    }
 
-    .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
       @include button-theme-private.apply-disabled-style() {
-        @include button-theme-private.apply-disabled-color();
+        @include mdc-button-outlined-theme.theme((
+          // We need to pass both the disabled and enabled values, because the enabled
+          // ones apply to anchors while the disabled ones are for buttons.
+          label-text-color: $disabled-ink-color,
+          disabled-label-text-color: $disabled-ink-color,
+          outline-color: rgba($on-surface, 0.12),
+          disabled-outline-color: rgba($on-surface, 0.12),
+        ));
       }
     }
 
-    @include mdc-button.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+    // Ripple colors
+    .mat-mdc-button, .mat-mdc-outlined-button {
+      @include button-theme-private.ripple-theme-styles($config, false);
+    }
+
+    .mat-mdc-raised-button, .mat-mdc-unelevated-button {
+      @include button-theme-private.ripple-theme-styles($config, true);
+    }
   }
 }
 

package/mdc-button/_fab-theme.scss

@@ -1,68 +1,62 @@
+@use 'sass:map';
 @use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/elevation/elevation-theme' as mdc-elevation-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';
 @use './button-theme-private';
 
+@mixin _fab-variant($foreground, $background) {
+  @include mdc-fab-theme.theme((
+    container-color: $background,
+    icon-color: $foreground,
+  ));
+
+  --mat-mdc-fab-color: #{$foreground};
+}
+
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
+    $on-surface: mdc-theme-color.prop-value(on-surface);
+    $is-dark: map.get($config, is-dark);
+
     .mat-mdc-fab, .mat-mdc-mini-fab {
-      @include mdc-ripple-theme.states(
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$fab-state-target);
+      @include button-theme-private.ripple-theme-styles($config, true);
 
       &.mat-unthemed {
-        @include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$fab-state-target);
-        @include mdc-fab-theme.container-color(mdc-theme-color.$on-surface,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-theme.ink-color(mdc-theme-color.$on-surface,
-          $query: mdc-helpers.$mat-theme-styles-query);
+        @include _fab-variant($on-surface, mdc-theme-color.prop-value(surface));
       }
 
       &.mat-primary {
-        @include mdc-ripple-theme.states-base-color(on-primary,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$fab-state-target);
-        @include mdc-fab-theme.container-color(primary,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-theme.ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include button-theme-private.ripple-ink-color(on-primary);
+        @include _fab-variant(
+          mdc-theme-color.prop-value(on-primary),
+          mdc-theme-color.prop-value(primary)
+        );
       }
 
       &.mat-accent {
-        @include mdc-ripple-theme.states-base-color(on-secondary,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$fab-state-target);
-        @include mdc-fab-theme.container-color(secondary,
-          $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-theme.ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include button-theme-private.ripple-ink-color(on-secondary);
+        @include _fab-variant(
+          mdc-theme-color.prop-value(on-secondary),
+          mdc-theme-color.prop-value(secondary)
+        );
       }
 
       &.mat-warn {
-        @include mdc-ripple-theme.states-base-color(on-error,
-          $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: button-theme-private.$fab-state-target);
-        @include mdc-fab-theme.container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include button-theme-private.ripple-ink-color(on-error);
+        @include _fab-variant(
+          mdc-theme-color.prop-value(on-error),
+          mdc-theme-color.prop-value(error)
+        );
       }
 
       @include button-theme-private.apply-disabled-style() {
-        @include button-theme-private.apply-disabled-color();
-        @include button-theme-private.apply-disabled-background();
-        @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
+        @include _fab-variant(
+          rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38)),
+          rgba($on-surface, 0.12)
+        );
       }
     }
-
-    @include mdc-fab.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
   }
 }
 

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

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

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

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