@angular/material 11.0.4 → 11.1.2

package/_theming.scss

@@ -493,7 +493,7 @@ $mat-elevation-color: black !default;
 $mat-elevation-opacity: 1 !default;
 
 // Prefix for elevation-related selectors.
-$_mat-elevation-prefix: 'mat-elevation-z';
+$mat-elevation-prefix: 'mat-elevation-z';
 
 // Applies the correct css rules to an element to give it the elevation specified by $zValue.
 // The $zValue must be between 0 and 24.
@@ -510,33 +510,17 @@ $_mat-elevation-prefix: 'mat-elevation-z';
               #{map-get(_get-ambient-map($color, $opacity), $zValue)};
 }
 
-@mixin _mat-theme-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
-  $foreground: map-get($config, foreground);
-  $elevation-color: map-get($foreground, elevation);
-  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);
-
-  @include mat-elevation($zValue, $elevation-color-or-default, $opacity);
-}
-
 // Applies the elevation to an element in a manner that allows
 // consumers to override it via the Material elevation classes.
 @mixin mat-overridable-elevation(
     $zValue,
     $color: $mat-elevation-color,
     $opacity: $mat-elevation-opacity) {
-  &:not([class*='#{$_mat-elevation-prefix}']) {
+  &:not([class*='#{$mat-elevation-prefix}']) {
     @include mat-elevation($zValue, $color, $opacity);
   }
 }
 
-@mixin _mat-theme-overridable-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
-  $foreground: map-get($config, foreground);
-  $elevation-color: map-get($foreground, elevation);
-  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);
-
-  @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);
-}
-
 // Returns a string that can be used as the value for a transition property for elevation.
 // Calling this function directly is useful in situations where a component needs to transition
 // more than one property.
@@ -562,6 +546,46 @@ $_mat-elevation-prefix: 'mat-elevation-z';
   transition: mat-elevation-transition-property-value($duration, $easing);
 }
 
+
+@mixin mat-private-theme-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
+  $foreground: map-get($config, foreground);
+  $elevation-color: map-get($foreground, elevation);
+  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);
+
+  @include mat-elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
+@mixin mat-private-theme-overridable-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
+  $foreground: map-get($config, foreground);
+  $elevation-color: map-get($foreground, elevation);
+  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);
+
+  @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
+// If the mat-animation-noop class is present on the components root element,
+// prevent non css animations from running.
+// NOTE: Currently this mixin should only be used with components that do not
+// have any projected content.
+@mixin mat-private-animation-noop() {
+  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
+  // done to allow a class to be added to be added to base of the scss nesting
+  // context.
+  // For example:
+  // .my-root {
+  //   .my-subclass {
+  //      @include mat-private-animation-noop();
+  //    }
+  // }
+  // results in:
+  // ._mat-animation-noopable.my-root .my-subclass { ... }
+  @at-root ._mat-animation-noopable#{&} {
+    transition: none;
+    animation: none;
+    @content;
+  }
+}
+
 // Color palettes from the Material Design spec.
 // See https://material.io/design/color/
 //
@@ -1311,9 +1335,22 @@ $mat-dark-theme-foreground: (
 );
 
 
+// Whether duplication warnings should be disabled. Warnings enabled by default.
+$mat-theme-ignore-duplication-warnings: false !default;
+
 // Whether density should be generated by default.
 $_mat-theme-generate-default-density: true !default;
 
+// Warning that will be printed if duplicated styles are generated by a theme.
+$_mat-theme-duplicate-warning: 'Read more about how style duplication can be avoided in a ' +
+  'dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md';
+
+// These variable are not intended to be overridden externally. They use `!default` to
+// avoid being reset every time this file is imported.
+$_mat-theme-emitted-color: () !default;
+$_mat-theme-emitted-typography: () !default;
+$_mat-theme-emitted-density: () !default;
+
 // For a given hue in a palette, return the contrast color from the map of contrast palettes.
 // @param $color-map
 // @param $hue
@@ -1395,31 +1432,6 @@ $_mat-theme-generate-default-density: true !default;
   @return $theme;
 }
 
-// Creates a backwards compatible theme. Previously in Angular Material, theme objects
-// contained the color configuration directly. With the recent refactoring of the theming
-// system to allow for density and typography configurations, this is no longer the case.
-// To ensure that constructed themes which will be passed to custom theme mixins do not break,
-// we copy the color configuration and put its properties at the top-level of the theme object.
-// Here is an example of a pattern that should still work until it's officially marked as a
-// breaking change:
-//
-//    @mixin my-custom-component-theme($theme) {
-//      .my-comp {
-//        background-color: mat-color(map-get($theme, primary));
-//      }
-//    }
-//
-// Note that the `$theme.primary` key does usually not exist since the color configuration
-// is stored in `$theme.color` which contains a property for `primary`. This method copies
-// the map from `$theme.color` to `$theme` for backwards compatibility.
-@function _mat-create-backwards-compatibility-theme($theme) {
-  @if not map-get($theme, color) {
-    @return $theme;
-  }
-  $color: map-get($theme, color);
-  @return map-merge($theme, $color);
-}
-
 // Creates a light-themed color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-light-color-config($primary, $accent, $warn: null) {
@@ -1464,7 +1476,7 @@ $_mat-theme-generate-default-density: true !default;
   // If the legacy pattern is used, we generate a container object only with a light-themed
   // configuration for the `color` theming part.
   @if $accent != null {
-    @return _mat-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-light-color-config($primary, $accent, $warn),
     )));
@@ -1480,7 +1492,7 @@ $_mat-theme-generate-default-density: true !default;
     $warn: map-get($color-settings, warn);
     $result: map-merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
   }
-  @return _mat-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
 
 // Creates a container object for a dark theme to be given to individual component theme mixins.
@@ -1501,7 +1513,7 @@ $_mat-theme-generate-default-density: true !default;
   // If the legacy pattern is used, we generate a container object only with a dark-themed
   // configuration for the `color` theming part.
   @if $accent != null {
-    @return _mat-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-dark-color-config($primary, $accent, $warn),
     )));
@@ -1517,13 +1529,13 @@ $_mat-theme-generate-default-density: true !default;
     $warn: map-get($color-settings, warn);
     $result: map-merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
   }
-  @return _mat-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
 
 /// Gets the color configuration from the given theme or configuration.
 @function mat-get-color-config($theme, $default: null) {
   // If a configuration has been passed, return the config directly.
-  @if not _mat-is-theme-object($theme) {
+  @if not mat-private-is-theme-object($theme) {
     @return $theme;
   }
   // If the theme has been constructed through the legacy theming API, we use the theme object
@@ -1531,7 +1543,7 @@ $_mat-theme-generate-default-density: true !default;
   // backwards compatibility, we copied the color configuration from `$theme.color` to `$theme`.
   // Hence developers could customize the colors at top-level and want to respect these changes
   // TODO: Remove when legacy theming API is removed.
-  @if _mat-is-legacy-constructed-theme($theme) {
+  @if mat-private-is-legacy-constructed-theme($theme) {
     @return $theme;
   }
   @if map-has-key($theme, color) {
@@ -1543,7 +1555,7 @@ $_mat-theme-generate-default-density: true !default;
 /// Gets the density configuration from the given theme or configuration.
 @function mat-get-density-config($theme-or-config, $default: 0) {
   // If a configuration has been passed, return the config directly.
-  @if not _mat-is-theme-object($theme-or-config) {
+  @if not mat-private-is-theme-object($theme-or-config) {
     @return $theme-or-config;
   }
   // In case a theme has been passed, extract the configuration if present,
@@ -1558,7 +1570,7 @@ $_mat-theme-generate-default-density: true !default;
 /// For backwards compatibility, typography is not included by default.
 @function mat-get-typography-config($theme-or-config, $default: null) {
   // If a configuration has been passed, return the config directly.
-  @if not _mat-is-theme-object($theme-or-config) {
+  @if not mat-private-is-theme-object($theme-or-config) {
     @return $theme-or-config;
   }
   // In case a theme has been passed, extract the configuration if present,
@@ -1569,53 +1581,10 @@ $_mat-theme-generate-default-density: true !default;
   @return $default;
 }
 
-// Checks whether the given value resolves to a theme object. Theme objects are always
-// of type `map` and can optionally only specify `color`, `density` or `typography`.
-@function _mat-is-theme-object($value) {
-  @return type-of($value) == 'map' and (
-    map-has-key($value, color) or
-    map-has-key($value, density) or
-    map-has-key($value, typography) or
-    length($value) == 0
-  );
-}
-
-// Checks whether a given value corresponds to a legacy constructed theme.
-@function _mat-is-legacy-constructed-theme($value) {
-  @return type-of($value) == 'map' and map-get($value, '_is-legacy-theme');
-}
 
-// Gets the theme from the given value that is either already a theme, or a color configuration.
-// This handles the legacy case where developers pass a color configuration directly to the
-// theme mixin. Before we introduced the new pattern for constructing a theme, developers passed
-// the color configuration directly to the theme mixins. This can be still the case if developers
-// construct a theme manually and pass it to a theme. We support this for backwards compatibility.
-// TODO(devversion): remove this in the future. Constructing themes manually is rare,
-// and the code can be easily updated to the new API.
-@function _mat-legacy-get-theme($theme-or-color-config) {
-  @if _mat-is-theme-object($theme-or-color-config) {
-    @return $theme-or-color-config;
-  }
-  @return _mat-create-backwards-compatibility-theme((
-    _is-legacy-theme: true,
-    color: $theme-or-color-config
-  ));
-}
-
-
-
-// Whether duplication warnings should be disabled. Warnings enabled by default.
-$mat-theme-ignore-duplication-warnings: false !default;
-
-// Warning that will be printed if duplicated styles are generated by a theme.
-$_mat-theme-duplicate-warning: 'Read more about how style duplication can be avoided in a ' +
-  'dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md';
-
-// These variable are not intended to be overridden externally. They use `!default` to
-// avoid being reset every time this file is imported.
-$_mat-theme-emitted-color: () !default;
-$_mat-theme-emitted-typography: () !default;
-$_mat-theme-emitted-density: () !default;
+//
+// Private APIs
+//
 
 // Checks if configurations that have been declared in the given theme have been generated
 // before. If so, warnings will be reported. This should notify developers in case duplicate
@@ -1629,8 +1598,8 @@ $_mat-theme-emitted-density: () !default;
 // id. This is necessary because a given theme can be passed to multiple disjoint theme mixins
 // (e.g. `angular-material-theme` and `angular-material-mdc-theme`) without causing any
 // style duplication.
-@mixin _mat-check-duplicate-theme-styles($theme-or-color-config, $id) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
+@mixin mat-private-check-duplicate-theme-styles($theme-or-color-config, $id) {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
   $color-config: mat-get-color-config($theme);
   $density-config: mat-get-density-config($theme);
   $typography-config: mat-get-typography-config($theme);
@@ -1667,7 +1636,7 @@ $_mat-theme-emitted-density: () !default;
       // Only report a warning if density styles would be duplicated for non-legacy theme
       // definitions. For legacy themes, we have compatibility logic that avoids duplication
       // of default density styles. We don't want to report a warning in those cases.
-      @if _mat-is-legacy-constructed-theme($theme) {
+      @if mat-private-is-legacy-constructed-theme($theme) {
         $duplicate-legacy-density: true;
       }
       @else if not $mat-theme-ignore-duplication-warnings {
@@ -1699,14 +1668,72 @@ $_mat-theme-emitted-density: () !default;
   // styles **once** and at root. This matches the old behavior where density styles were
   // part of the base component styles (that did not use view encapsulation).
   // TODO: Remove this compatibility logic when the legacy theming API is removed.
-  $_mat-density-generate-at-root: _mat-is-legacy-constructed-theme($theme) !global;
-  $_mat-density-generate-styles: not $duplicate-legacy-density !global;
+  $mat-private-density-generate-at-root: mat-private-is-legacy-constructed-theme($theme) !global;
+  $mat-private-density-generate-styles: not $duplicate-legacy-density !global;
 
   @content;
   $mat-theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
 
-  $_mat-density-generate-at-root: false !global;
-  $_mat-density-generate-styles: true !global;
+  $mat-private-density-generate-at-root: false !global;
+  $mat-private-density-generate-styles: true !global;
+}
+
+// Checks whether the given value resolves to a theme object. Theme objects are always
+// of type `map` and can optionally only specify `color`, `density` or `typography`.
+@function mat-private-is-theme-object($value) {
+  @return type-of($value) == 'map' and (
+    map-has-key($value, color) or
+    map-has-key($value, density) or
+    map-has-key($value, typography) or
+    length($value) == 0
+  );
+}
+
+// Checks whether a given value corresponds to a legacy constructed theme.
+@function mat-private-is-legacy-constructed-theme($value) {
+  @return type-of($value) == 'map' and map-get($value, '_is-legacy-theme');
+}
+
+// Creates a backwards compatible theme. Previously in Angular Material, theme objects
+// contained the color configuration directly. With the recent refactoring of the theming
+// system to allow for density and typography configurations, this is no longer the case.
+// To ensure that constructed themes which will be passed to custom theme mixins do not break,
+// we copy the color configuration and put its properties at the top-level of the theme object.
+// Here is an example of a pattern that should still work until it's officially marked as a
+// breaking change:
+//
+//    @mixin my-custom-component-theme($theme) {
+//      .my-comp {
+//        background-color: mat-color(map-get($theme, primary));
+//      }
+//    }
+//
+// Note that the `$theme.primary` key does usually not exist since the color configuration
+// is stored in `$theme.color` which contains a property for `primary`. This method copies
+// the map from `$theme.color` to `$theme` for backwards compatibility.
+@function mat-private-create-backwards-compatibility-theme($theme) {
+  @if not map-get($theme, color) {
+    @return $theme;
+  }
+  $color: map-get($theme, color);
+  @return map-merge($theme, $color);
+}
+
+// Gets the theme from the given value that is either already a theme, or a color configuration.
+// This handles the legacy case where developers pass a color configuration directly to the
+// theme mixin. Before we introduced the new pattern for constructing a theme, developers passed
+// the color configuration directly to the theme mixins. This can be still the case if developers
+// construct a theme manually and pass it to a theme. We support this for backwards compatibility.
+// TODO(devversion): remove this in the future. Constructing themes manually is rare,
+// and the code can be easily updated to the new API.
+@function mat-private-legacy-get-theme($theme-or-color-config) {
+  @if mat-private-is-theme-object($theme-or-color-config) {
+    @return $theme-or-color-config;
+  }
+  @return mat-private-create-backwards-compatibility-theme((
+    _is-legacy-theme: true,
+    color: $theme-or-color-config
+  ));
 }
 
 
@@ -1773,8 +1800,8 @@ $mat-ripple-color-opacity: 0.1;
 }
 
 @mixin mat-ripple-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-ripple') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-ripple') {
     $color: mat-get-color-config($theme);
     @if $color != null {
       @include mat-ripple-color($color);
@@ -1783,7 +1810,6 @@ $mat-ripple-color-opacity: 0.1;
 }
 
 
-
 // This mixin ensures an element spans to fill the nearest ancestor with defined positioning.
 @mixin mat-fill {
   top: 0;
@@ -1903,8 +1929,8 @@ $mat-ripple-color-opacity: 0.1;
     @include _mat-strong-focus-indicators-border-color($theme-or-color);
   }
   @else {
-    $theme: _mat-legacy-get-theme($theme-or-color);
-    @include _mat-check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') {
+    $theme: mat-private-legacy-get-theme($theme-or-color);
+    @include mat-private-check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') {
       $color: mat-get-color-config($theme);
       @if $color != null {
         @include mat-strong-focus-indicators-color($color);
@@ -1916,7 +1942,7 @@ $mat-ripple-color-opacity: 0.1;
 // Mixin that ensures focus indicator host elements are positioned so that the focus indicator
 // pseudo element within is positioned relative to the host. Private mixin included within
 // `mat-core`.
-@mixin _mat-strong-focus-indicators-positioning() {
+@mixin mat-private-strong-focus-indicators-positioning() {
   .mat-focus-indicator {
     position: relative;
   }
@@ -1924,7 +1950,6 @@ $mat-ripple-color-opacity: 0.1;
 
 
 
-
 // Utility for fetching a nested value from a typography config.
 @function _mat-get-type-value($config, $level, $name) {
   @return map-get(map-get($config, $level), $name);
@@ -2058,8 +2083,8 @@ $mat-ripple-color-opacity: 0.1;
 @mixin _mat-option-density($config-or-theme) {}
 
 @mixin mat-option-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-option') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-option') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -2080,7 +2105,6 @@ $mat-ripple-color-opacity: 0.1;
 
 
 
-
 @mixin mat-optgroup-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $foreground: map-get($config, foreground);
@@ -2104,8 +2128,8 @@ $mat-ripple-color-opacity: 0.1;
 @mixin _mat-optgroup-density($config-or-theme) {}
 
 @mixin mat-optgroup-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-optgroup') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -2124,7 +2148,6 @@ $mat-ripple-color-opacity: 0.1;
 
 
 
-
 @mixin mat-pseudo-checkbox-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $is-dark-theme: map-get($config, is-dark);
@@ -2188,8 +2211,8 @@ $mat-ripple-color-opacity: 0.1;
 @mixin _mat-pseudo-checkbox-density($config-or-theme) {}
 
 @mixin mat-pseudo-checkbox-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -2425,14 +2448,13 @@ $mat-ripple-color-opacity: 0.1;
 
 
 
-
 @mixin mat-autocomplete-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $foreground: map-get($config, foreground);
   $background: map-get($config, background);
 
   .mat-autocomplete-panel {
-    @include _mat-theme-overridable-elevation(4, $config);
+    @include mat-private-theme-overridable-elevation(4, $config);
     background: mat-color($background, card);
     color: mat-color($foreground, text);
 
@@ -2456,8 +2478,8 @@ $mat-ripple-color-opacity: 0.1;
 @mixin _mat-autocomplete-density($config-or-theme) {}
 
 @mixin mat-autocomplete-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -2482,7 +2504,6 @@ $mat-ripple-color-opacity: 0.1;
 
 
 
-
 $mat-badge-font-size: 12px;
 $mat-badge-font-weight: 600;
 $mat-badge-default-size: 22px !default;
@@ -2685,8 +2706,8 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 @mixin _mat-badge-density($config-or-theme) {}
 
 @mixin mat-badge-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-badge') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-badge') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -2708,14 +2729,13 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 
 
 
-
 @mixin mat-bottom-sheet-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $background: map-get($config, background);
   $foreground: map-get($config, foreground);
 
   .mat-bottom-sheet-container {
-    @include _mat-theme-elevation(16, $config);
+    @include mat-private-theme-elevation(16, $config);
     background: mat-color($background, dialog);
     color: mat-color($foreground, text);
   }
@@ -2731,8 +2751,8 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 @mixin _mat-bottom-sheet-density($config-or-theme) {}
 
 @mixin mat-bottom-sheet-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -2753,7 +2773,6 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 
 
 
-
 $_mat-button-ripple-opacity: 0.1;
 
 // Applies a focus style to an mat-button element for each of the supported palettes.
@@ -2884,30 +2903,30 @@ $_mat-button-ripple-opacity: 0.1;
   }
 
   .mat-stroked-button, .mat-flat-button {
-    @include _mat-theme-overridable-elevation(0, $config);
+    @include mat-private-theme-overridable-elevation(0, $config);
   }
 
   .mat-raised-button {
-    @include _mat-theme-overridable-elevation(2, $config);
+    @include mat-private-theme-overridable-elevation(2, $config);
 
     &:not(.mat-button-disabled):active {
-      @include _mat-theme-overridable-elevation(8, $config);
+      @include mat-private-theme-overridable-elevation(8, $config);
     }
 
     &.mat-button-disabled {
-      @include _mat-theme-overridable-elevation(0, $config);
+      @include mat-private-theme-overridable-elevation(0, $config);
     }
   }
 
   .mat-fab, .mat-mini-fab {
-    @include _mat-theme-overridable-elevation(6, $config);
+    @include mat-private-theme-overridable-elevation(6, $config);
 
     &:not(.mat-button-disabled):active {
-      @include _mat-theme-overridable-elevation(12, $config);
+      @include mat-private-theme-overridable-elevation(12, $config);
     }
 
     &.mat-button-disabled {
-      @include _mat-theme-overridable-elevation(0, $config);
+      @include mat-private-theme-overridable-elevation(0, $config);
     }
   }
 }
@@ -2927,8 +2946,8 @@ $_mat-button-ripple-opacity: 0.1;
 @mixin _mat-button-density($config-or-theme) {}
 
 @mixin mat-button-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-button') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-button') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -2950,6 +2969,8 @@ $_mat-button-ripple-opacity: 0.1;
 
 
 
+// Note that this file is called `private`, because the APIs in it aren't public yet.
+// Once they're made available, the code should be moved out into an `index.scss`.
 
 // Taken from mat-density with small modifications to not rely on the new Sass module
 // system, and to support arbitrary properties in a density configuration.
@@ -2963,15 +2984,15 @@ $_mat-density-default-scale: 0 !default;
 
 // Whether density should be generated at root. This will be temporarily set to `true`
 // whenever density styles for legacy themes are generated.
-$_mat-density-generate-at-root: false;
+$mat-private-density-generate-at-root: false;
 // Whether density styles should be generated. This will be temporarily set to `false` if
 // duplicate density styles for a legacy theme would be generated. For legacy themes,
 // we always generate the default density **only once** at root.
-$_mat-density-generate-styles: true;
+$mat-private-density-generate-styles: true;
 
 // Mixin that can be used to wrap density styles of given components. The mixin will
-// move the density styles to root if the `$_mat-density-generate-at-root` global variable
-// is set. If `$_mat-density-generate-styles` is set to `false`, generation of density
+// move the density styles to root if the `$mat-private-density-generate-at-root` global variable
+// is set. If `$mat-private-density-generate-styles` is set to `false`, generation of density
 // styles wrapped in this mixin is skipped. This mixin exists to improve backwards compatibility
 // of the new theming API where density styles are included as part of themes. Previously,
 // density styles of components were part of their base styles. With the new API, they are
@@ -2981,18 +3002,18 @@ $_mat-density-generate-styles: true;
 // density styles. This is breaking as it increases specificity of density styles. This mixin
 // provides an API to control generation of density styles so that we can ensure they are only
 // created *once* and at root.
-@mixin _mat-density-legacy-compatibility() {
-  @if $_mat-density-generate-styles and $_mat-density-generate-at-root {
+@mixin mat-private-density-legacy-compatibility() {
+  @if $mat-private-density-generate-styles and $mat-private-density-generate-at-root {
     @at-root {
       @content;
     }
   }
-  @else if $_mat-density-generate-styles {
+  @else if $mat-private-density-generate-styles {
     @content;
   }
 }
 
-@function _mat-density-prop-value($density-config, $density-scale, $property-name) {
+@function mat-private-density-prop-value($density-config, $density-scale, $property-name) {
   @if (type-of($density-scale) == 'string' and
       index($list: $_mat-density-supported-scales, $value: $density-scale) == null) {
     @error 'mat-density: Supported density scales #{$_mat-density-supported-scales}, '  +
@@ -3044,7 +3065,7 @@ $mat-button-toggle-standard-density-config: (
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {
-    @include _mat-theme-elevation(2, $config);
+    @include mat-private-theme-elevation(2, $config);
   }
 
   .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
@@ -3121,12 +3142,12 @@ $mat-button-toggle-standard-density-config: (
   }
 }
 
-@mixin _mat-button-toggle-density($config-or-theme) {
+@mixin mat-button-toggle-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  $standard-height: _mat-density-prop-value(
+  $standard-height: mat-private-density-prop-value(
       $mat-button-toggle-standard-density-config, $density-scale, height);
 
-  @include _mat-density-legacy-compatibility() {
+  @include mat-private-density-legacy-compatibility() {
     .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
       line-height: $standard-height;
     }
@@ -3134,8 +3155,8 @@ $mat-button-toggle-standard-density-config: (
 }
 
 @mixin mat-button-toggle-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -3144,7 +3165,7 @@ $mat-button-toggle-standard-density-config: (
       @include mat-button-toggle-color($color);
     }
     @if $density != null {
-      @include _mat-button-toggle-density($density);
+      @include mat-button-toggle-density($density);
     }
     @if $typography != null {
       @include mat-button-toggle-typography($typography);
@@ -3158,20 +3179,19 @@ $mat-button-toggle-standard-density-config: (
 
 
 
-
 @mixin mat-card-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $background: map-get($config, background);
   $foreground: map-get($config, foreground);
 
   .mat-card {
-    @include _mat-theme-overridable-elevation(1, $config);
+    @include mat-private-theme-overridable-elevation(1, $config);
     background: mat-color($background, card);
     color: mat-color($foreground, text);
 
     // Needs extra specificity to be able to override the elevation selectors.
     &.mat-card-flat {
-      @include _mat-theme-overridable-elevation(0, $config);
+      @include mat-private-theme-overridable-elevation(0, $config);
     }
   }
 
@@ -3206,8 +3226,8 @@ $mat-button-toggle-standard-density-config: (
 @mixin _mat-card-density($config-or-theme) {}
 
 @mixin mat-card-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-card') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-card') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -3228,7 +3248,6 @@ $mat-button-toggle-standard-density-config: (
 
 
 
-
 @mixin mat-checkbox-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $is-dark-theme: map-get($config, is-dark);
@@ -3337,8 +3356,8 @@ $mat-button-toggle-standard-density-config: (
 @mixin _mat-checkbox-density($config-or-theme) {}
 
 @mixin mat-checkbox-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-checkbox') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-checkbox') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -3360,7 +3379,6 @@ $mat-button-toggle-standard-density-config: (
 
 
 
-
 $mat-chip-remove-font-size: 18px;
 
 @mixin _mat-chip-element-color($foreground, $background) {
@@ -3412,7 +3430,7 @@ $mat-chip-remove-font-size: 18px;
 
     &:not(.mat-chip-disabled) {
       &:active {
-        @include _mat-theme-elevation(3, $config);
+        @include mat-private-theme-elevation(3, $config);
       }
 
       .mat-chip-remove:hover {
@@ -3460,8 +3478,8 @@ $mat-chip-remove-font-size: 18px;
 @mixin _mat-chips-density($config-or-theme) {}
 
 @mixin mat-chips-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-chips') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-chips') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -3483,7 +3501,6 @@ $mat-chip-remove-font-size: 18px;
 
 
 
-
 @mixin mat-divider-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $foreground: map-get($config, foreground);
@@ -3502,8 +3519,8 @@ $mat-chip-remove-font-size: 18px;
 @mixin _mat-divider-density($config-or-theme) {}
 
 @mixin mat-divider-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-divider') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-divider') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -3524,7 +3541,6 @@ $mat-chip-remove-font-size: 18px;
 
 
 
-
 @mixin mat-table-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $background: map-get($config, background);
@@ -3574,8 +3590,8 @@ $mat-chip-remove-font-size: 18px;
 @mixin _mat-table-density($config-or-theme) {}
 
 @mixin mat-table-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-table') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-table') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -3598,7 +3614,6 @@ $mat-chip-remove-font-size: 18px;
 
 
 
-
 $mat-datepicker-selected-today-box-shadow-width: 1px;
 $mat-datepicker-selected-fade-amount: 0.6;
 $mat-datepicker-range-fade-amount: 0.2;
@@ -3739,7 +3754,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   @include _mat-datepicker-color(map-get($config, primary));
 
   .mat-datepicker-content {
-    @include _mat-theme-elevation(4, $config);
+    @include mat-private-theme-elevation(4, $config);
     background-color: mat-color($background, card);
     color: mat-color($foreground, text);
 
@@ -3753,7 +3768,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   }
 
   .mat-datepicker-content-touch {
-    @include _mat-theme-elevation(0, $config);
+    @include mat-private-theme-elevation(0, $config);
   }
 
   .mat-datepicker-toggle-active {
@@ -3838,8 +3853,8 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 @mixin _mat-datepicker-density($config-or-theme) {}
 
 @mixin mat-datepicker-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-datepicker') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -3862,14 +3877,13 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 
 
 
-
 @mixin mat-dialog-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $background: map-get($config, background);
   $foreground: map-get($config, foreground);
 
   .mat-dialog-container {
-    @include _mat-theme-elevation(24, $config);
+    @include mat-private-theme-elevation(24, $config);
     background: mat-color($background, dialog);
     color: mat-color($foreground, text);
   }
@@ -3885,8 +3899,8 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 @mixin _mat-dialog-density($config-or-theme) {}
 
 @mixin mat-dialog-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-dialog') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-dialog') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -3908,7 +3922,6 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 
 
 
-
 // Default minimum and maximum height for collapsed panel headers.
 $mat-expansion-panel-header-collapsed-height: 48px !default;
 $mat-expansion-panel-header-collapsed-minimum-height: 36px !default;
@@ -3940,6 +3953,18 @@ $mat-expansion-panel-header-density-config: (
 // and body expansion. These are animated using Angular animations.
 $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 
+@mixin mat-private-expansion-focus {
+  .mat-expansion-panel {
+    & .mat-expansion-panel-header.cdk-keyboard-focused,
+    & .mat-expansion-panel-header.cdk-program-focused,
+    &:not(.mat-expanded) .mat-expansion-panel-header:hover {
+      &:not([aria-disabled='true']) {
+        @content;
+      }
+    }
+  }
+}
+
 
 @mixin mat-expansion-panel-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -3947,7 +3972,7 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
   $foreground: map-get($config, foreground);
 
   .mat-expansion-panel {
-    @include _mat-theme-overridable-elevation(2, $config);
+    @include mat-private-theme-overridable-elevation(2, $config);
     background: mat-color($background, card);
     color: mat-color($foreground, text);
   }
@@ -3956,14 +3981,8 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
     border-top-color: mat-color($foreground, divider);
   }
 
-  .mat-expansion-panel {
-    & .mat-expansion-panel-header.cdk-keyboard-focused,
-    & .mat-expansion-panel-header.cdk-program-focused,
-    &:not(.mat-expanded) .mat-expansion-panel-header:hover {
-      &:not([aria-disabled='true']) {
-        background: mat-color($background, hover);
-      }
-    }
+  @include mat-private-expansion-focus {
+    background: mat-color($background, hover);
   }
 
   // Disable the hover on touch devices since it can appear like it is stuck. We can't use
@@ -4009,14 +4028,14 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 }
 
-@mixin _mat-expansion-panel-density($config-or-theme) {
+@mixin mat-expansion-panel-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  $expanded-height: _mat-density-prop-value(
+  $expanded-height: mat-private-density-prop-value(
         $mat-expansion-panel-header-density-config, $density-scale, expanded-height);
-  $collapsed-height: _mat-density-prop-value(
+  $collapsed-height: mat-private-density-prop-value(
       $mat-expansion-panel-header-density-config, $density-scale, collapsed-height);
 
-  @include _mat-density-legacy-compatibility() {
+  @include mat-private-density-legacy-compatibility() {
     .mat-expansion-panel-header {
       height: $collapsed-height;
 
@@ -4028,8 +4047,8 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @mixin mat-expansion-panel-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-expansion-panel') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-expansion-panel') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4038,7 +4057,7 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
       @include mat-expansion-panel-color($color);
     }
     @if $density != null {
-      @include _mat-expansion-panel-density($density);
+      @include mat-expansion-panel-density($density);
     }
     @if $typography != null {
       @include mat-expansion-panel-typography($typography);
@@ -4049,7 +4068,6 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 
 
 
-
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
 @mixin mat-truncate-line() {
@@ -4117,8 +4135,8 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 @mixin _mat-grid-list-density($config-or-theme) {}
 
 @mixin mat-grid-list-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-grid-list') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-grid-list') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4137,7 +4155,6 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 
 
 
-
 @mixin mat-icon-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $primary: map-get($config, primary);
@@ -4166,8 +4183,8 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 @mixin _mat-icon-density($config-or-theme) {}
 
 @mixin mat-icon-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-icon') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-icon') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4189,11 +4206,10 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 
 
 
-
 // Renders a gradient for showing the dashed line when the input is disabled.
 // Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
 // to match the Material Design spec.
-@mixin mat-control-disabled-underline($color) {
+@mixin mat-private-control-disabled-underline($color) {
   background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);
   background-size: 4px 100%;
   background-repeat: repeat-x;
@@ -4202,7 +4218,7 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 // Figures out the color of the placeholder for a form control.
 // Used primarily to prevent the various form controls from
 // becoming out of sync since these colors aren't in a palette.
-@function _mat-control-placeholder-color($config) {
+@function mat-private-control-placeholder-color($config) {
   $foreground: map-get($config, foreground);
   $is-dark-theme: map-get($config, is-dark);
   @return mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42));
@@ -4278,7 +4294,7 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
     caret-color: mat-color($primary, text);
 
     @include input-placeholder {
-      color: _mat-control-placeholder-color($config);
+      color: mat-private-control-placeholder-color($config);
     }
 
     // On dark themes we set the native `select` color to some shade of white,
@@ -4330,8 +4346,8 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 @mixin _mat-input-density($config-or-theme) {}
 
 @mixin mat-input-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-input') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-input') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4354,7 +4370,6 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 
 
 
-
 @mixin mat-list-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $background: map-get($config, background);
@@ -4447,8 +4462,8 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 @mixin _mat-list-density($config-or-theme) {}
 
 @mixin mat-list-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-list') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-list') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4471,14 +4486,13 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 
 
 
-
 @mixin mat-menu-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $background: map-get($config, background);
   $foreground: map-get($config, foreground);
 
   .mat-menu-panel {
-    @include _mat-theme-overridable-elevation(4, $config);
+    @include mat-private-theme-overridable-elevation(4, $config);
     background: mat-color($background, 'card');
   }
 
@@ -4524,8 +4538,8 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 @mixin _mat-menu-density($config-or-theme) {}
 
 @mixin mat-menu-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-menu') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-menu') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4547,7 +4561,6 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 
 
 
-
 $mat-paginator-height: 56px !default;
 // Minimum height for paginator's in the highest density is determined based on how
 // much the paginator can shrink until the content exceeds (i.e. navigation buttons).
@@ -4609,11 +4622,11 @@ $mat-paginator-density-config: (
   }
 }
 
-@mixin _mat-paginator-density($config-or-theme) {
+@mixin mat-paginator-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  $height: _mat-density-prop-value($mat-paginator-density-config, $density-scale, height);
+  $height: mat-private-density-prop-value($mat-paginator-density-config, $density-scale, height);
 
-  @include _mat-density-legacy-compatibility() {
+  @include mat-private-density-legacy-compatibility() {
     .mat-paginator-container {
       min-height: $height;
     }
@@ -4621,8 +4634,8 @@ $mat-paginator-density-config: (
 }
 
 @mixin mat-paginator-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-paginator') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-paginator') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4631,7 +4644,7 @@ $mat-paginator-density-config: (
       @include mat-paginator-color($color);
     }
     @if $density != null {
-      @include _mat-paginator-density($density);
+      @include mat-paginator-density($density);
     }
     @if $typography != null {
       @include mat-paginator-typography($typography);
@@ -4642,7 +4655,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin mat-progress-bar-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $primary: map-get($config, primary);
@@ -4695,8 +4707,8 @@ $mat-paginator-density-config: (
 @mixin _mat-progress-bar-density($config-or-theme) {}
 
 @mixin mat-progress-bar-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-progress-bar') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-progress-bar') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4717,7 +4729,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin mat-progress-spinner-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $primary: map-get($config, primary);
@@ -4744,8 +4755,8 @@ $mat-paginator-density-config: (
 @mixin _mat-progress-spinner-density($config-or-theme) {}
 
 @mixin mat-progress-spinner-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4766,7 +4777,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin _mat-radio-color($palette) {
   &.mat-radio-checked .mat-radio-outer-circle {
     border-color: mat-color($palette);
@@ -4842,8 +4852,8 @@ $mat-paginator-density-config: (
 @mixin _mat-radio-density($config-or-theme) {}
 
 @mixin mat-radio-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-radio') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-radio') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4867,7 +4877,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin mat-select-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $foreground: map-get($config, foreground);
@@ -4881,7 +4890,7 @@ $mat-paginator-density-config: (
   }
 
   .mat-select-placeholder {
-    color: _mat-control-placeholder-color($config);
+    color: mat-private-control-placeholder-color($config);
   }
 
   .mat-select-disabled .mat-select-value {
@@ -4894,7 +4903,7 @@ $mat-paginator-density-config: (
 
   .mat-select-panel {
     background: mat-color($background, card);
-    @include _mat-theme-overridable-elevation(4, $config);
+    @include mat-private-theme-overridable-elevation(4, $config);
 
     .mat-option.mat-selected:not(.mat-option-multiple) {
       background: mat-color($background, hover, 0.12);
@@ -4943,8 +4952,8 @@ $mat-paginator-density-config: (
 @mixin _mat-select-density($config-or-theme) {}
 
 @mixin mat-select-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-select') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-select') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -4965,7 +4974,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin mat-sidenav-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $primary: map-get($config, primary);
@@ -4995,7 +5003,7 @@ $mat-paginator-density-config: (
     &:not(.mat-drawer-side) {
       // The elevation of z-16 is noted in the design specifications.
       // See https://material.io/design/components/navigation-drawer.html
-      @include _mat-theme-elevation(16, $config);
+      @include mat-private-theme-elevation(16, $config);
     }
   }
 
@@ -5042,8 +5050,8 @@ $mat-paginator-density-config: (
 @mixin _mat-sidenav-density($config-or-theme) {}
 
 @mixin mat-sidenav-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-sidenav') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-sidenav') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -5065,7 +5073,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
   &.mat-checked {
     .mat-slide-toggle-thumb {
@@ -5126,7 +5133,7 @@ $mat-paginator-density-config: (
   }
 
   .mat-slide-toggle-thumb {
-    @include _mat-theme-elevation(1, $config);
+    @include mat-private-theme-elevation(1, $config);
     background-color: mat-color($mat-grey, $thumb-unchecked-hue);
   }
 
@@ -5145,8 +5152,8 @@ $mat-paginator-density-config: (
 @mixin _mat-slide-toggle-density($config-or-theme) {}
 
 @mixin mat-slide-toggle-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -5168,7 +5175,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin _mat-slider-inner-content-theme($palette) {
   .mat-slider-track-fill,
   .mat-slider-thumb,
@@ -5344,8 +5350,8 @@ $mat-paginator-density-config: (
 @mixin _mat-slider-density($config-or-theme) {}
 
 @mixin mat-slider-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-slider') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-slider') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -5366,7 +5372,6 @@ $mat-paginator-density-config: (
 
 
 
-
 $mat-stepper-header-height: 72px !default;
 // Minimum height for highest density stepper's is determined based on how much
 // stepper headers can shrink until the step icon or step label exceed. We can't use
@@ -5527,12 +5532,12 @@ $mat-step-header-icon-size: 16px;
   }
 }
 
-@mixin _mat-stepper-density($config-or-theme) {
+@mixin mat-stepper-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  $height: _mat-density-prop-value($mat-stepper-density-config, $density-scale, height);
+  $height: mat-private-density-prop-value($mat-stepper-density-config, $density-scale, height);
   $vertical-padding: ($height - $mat-stepper-label-header-height) / 2;
 
-  @include _mat-density-legacy-compatibility() {
+  @include mat-private-density-legacy-compatibility() {
     .mat-horizontal-stepper-header {
       height: $height;
     }
@@ -5564,8 +5569,8 @@ $mat-step-header-icon-size: 16px;
 }
 
 @mixin mat-stepper-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-stepper') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-stepper') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -5574,7 +5579,7 @@ $mat-step-header-icon-size: 16px;
       @include mat-stepper-color($color);
     }
     @if $density != null {
-      @include _mat-stepper-density($density);
+      @include mat-stepper-density($density);
     }
     @if $typography != null {
       @include mat-stepper-typography($typography);
@@ -5584,7 +5589,6 @@ $mat-step-header-icon-size: 16px;
 
 
 
-
 @mixin mat-sort-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $background: map-get($config, background);
@@ -5615,8 +5619,8 @@ $mat-step-header-icon-size: 16px;
 @mixin _mat-sort-density($config-or-theme) {}
 
 @mixin mat-sort-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-sort') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-sort') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -5637,7 +5641,6 @@ $mat-step-header-icon-size: 16px;
 
 
 
-
 @mixin mat-tabs-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $primary: map-get($config, primary);
@@ -5698,7 +5701,9 @@ $mat-step-header-icon-size: 16px;
 
         // Override ink bar when background color is the same
         &.mat-background-#{$name} {
-          @include _mat-ink-bar($color, default-contrast);
+          > .mat-tab-header, > .mat-tab-link-container {
+            @include _mat-ink-bar($color, default-contrast);
+          }
         }
       }
     }
@@ -5732,13 +5737,16 @@ $mat-step-header-icon-size: 16px;
 }
 
 @mixin _mat-tabs-background($background-color) {
+  // Note that these selectors target direct descendants so
+  // that the styles don't apply to any nested tab groups.
+
   // Set background color for the tab group
-  .mat-tab-header, .mat-tab-links, .mat-tab-header-pagination {
+  > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {
     background-color: mat-color($background-color);
   }
 
   // Set labels to contrast against background
-  .mat-tab-label, .mat-tab-link {
+  > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link {
     color: mat-color($background-color, default-contrast);
 
     &.mat-tab-disabled {
@@ -5747,17 +5755,18 @@ $mat-step-header-icon-size: 16px;
   }
 
   // Set pagination chevrons to contrast background
-  .mat-tab-header-pagination-chevron {
+  > .mat-tab-header-pagination .mat-tab-header-pagination-chevron {
     border-color: mat-color($background-color, default-contrast);
   }
 
-  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+  > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
     border-color: mat-color($background-color, default-contrast, 0.4);
   }
 
   // Set ripples color to be the contrast color of the new background. Otherwise the ripple
   // color will be based on the app background color.
-  .mat-ripple-element {
+  > .mat-tab-header .mat-ripple-element,
+  > .mat-tab-link-container .mat-ripple-element {
     background-color: mat-color($background-color, default-contrast, 0.12);
   }
 }
@@ -5780,8 +5789,8 @@ $mat-step-header-icon-size: 16px;
 @mixin _mat-tabs-density($config-or-theme) {}
 
 @mixin mat-tabs-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-tabs') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tabs') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -5803,7 +5812,6 @@ $mat-step-header-icon-size: 16px;
 
 
 
-
 // Minimum height for toolbar's in the highest density is difficult to determine because
 // developers can project arbitrary content. We use a minimum value that ensures that most
 // common content (e.g. icon buttons) does not exceed the row boundaries in highest density.
@@ -5910,14 +5918,14 @@ $mat-toolbar-mobile-density-config: (
   }
 }
 
-@mixin _mat-toolbar-density($config-or-theme) {
+@mixin mat-toolbar-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  $height-desktop: _mat-density-prop-value(
+  $height-desktop: mat-private-density-prop-value(
       $mat-toolbar-desktop-density-config, $density-scale, height);
-  $height-mobile: _mat-density-prop-value(
+  $height-mobile: mat-private-density-prop-value(
       $mat-toolbar-mobile-density-config, $density-scale, height);
 
-  @include _mat-density-legacy-compatibility() {
+  @include mat-private-density-legacy-compatibility() {
     // Set the default height for the toolbar.
     @include _mat-toolbar-height($height-desktop);
 
@@ -5931,8 +5939,8 @@ $mat-toolbar-mobile-density-config: (
 }
 
 @mixin mat-toolbar-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-toolbar') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -5941,7 +5949,7 @@ $mat-toolbar-mobile-density-config: (
       @include mat-toolbar-color($color);
     }
     @if $density != null {
-      @include _mat-toolbar-density($density);
+      @include mat-toolbar-density($density);
     }
     @if $typography != null {
       @include mat-toolbar-typography($typography);
@@ -5953,7 +5961,6 @@ $mat-toolbar-mobile-density-config: (
 
 
 
-
 $mat-tooltip-target-height: 22px;
 $mat-tooltip-font-size: 10px;
 $mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
@@ -5991,8 +5998,8 @@ $mat-tooltip-handset-vertical-padding:
 @mixin _mat-tooltip-density($config-or-theme) {}
 
 @mixin mat-tooltip-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-tooltip') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tooltip') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -6015,7 +6022,6 @@ $mat-tooltip-handset-vertical-padding:
 
 
 
-
 @mixin mat-snack-bar-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $is-dark-theme: map-get($config, is-dark);
@@ -6027,7 +6033,7 @@ $mat-tooltip-handset-vertical-padding:
     color: if($is-dark-theme, $dark-primary-text, $light-secondary-text);
     background: if($is-dark-theme, map-get($mat-grey, 50), #323232);
 
-    @include _mat-theme-elevation(6, $config);
+    @include mat-private-theme-elevation(6, $config);
   }
 
   .mat-simple-snackbar-action {
@@ -6057,8 +6063,8 @@ $mat-tooltip-handset-vertical-padding:
 @mixin _mat-snack-bar-density($config-or-theme) {}
 
 @mixin mat-snack-bar-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -6088,8 +6094,6 @@ $mat-tooltip-handset-vertical-padding:
 
 
 
-
-
 // Theme styles that only apply to the fill appearance of the form-field.
 
 @mixin mat-form-field-fill-color($config-or-theme) {
@@ -6187,11 +6191,11 @@ $mat-form-field-fill-dedupe: 0;
   }
 }
 
-@mixin _mat-form-field-fill-density($config-or-theme) {}
+@mixin mat-private-form-field-fill-density($config-or-theme) {}
 
 @mixin mat-form-field-fill-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -6200,7 +6204,7 @@ $mat-form-field-fill-dedupe: 0;
       @include mat-form-field-fill-color($color);
     }
     @if $density != null {
-      @include _mat-form-field-fill-density($density);
+      @include mat-private-form-field-fill-density($density);
     }
     @if $typography != null {
       @include mat-form-field-fill-typography($typography);
@@ -6214,7 +6218,6 @@ $mat-form-field-fill-dedupe: 0;
 
 
 
-
 // Theme styles that only apply to the legacy appearance of the form-field.
 
 @mixin mat-form-field-legacy-color($config-or-theme) {
@@ -6239,7 +6242,7 @@ $mat-form-field-fill-dedupe: 0;
     }
 
     &.mat-form-field-disabled .mat-form-field-underline {
-      @include mat-control-disabled-underline($underline-color);
+      @include mat-private-control-disabled-underline($underline-color);
     }
   }
 }
@@ -6385,11 +6388,11 @@ $mat-form-field-legacy-dedupe: 0;
   }
 }
 
-@mixin _mat-form-field-legacy-density($config-or-theme) {}
+@mixin mat-private-form-field-legacy-density($config-or-theme) {}
 
 @mixin mat-form-field-legacy-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -6398,7 +6401,7 @@ $mat-form-field-legacy-dedupe: 0;
       @include mat-form-field-legacy-color($color);
     }
     @if $density != null {
-      @include _mat-form-field-legacy-density($density);
+      @include mat-private-form-field-legacy-density($density);
     }
     @if $typography != null {
       @include mat-form-field-legacy-typography($typography);
@@ -6412,7 +6415,6 @@ $mat-form-field-legacy-dedupe: 0;
 
 
 
-
 // Theme styles that only apply to the outline appearance of the form-field.
 
 @mixin mat-form-field-outline-color($config-or-theme) {
@@ -6540,11 +6542,11 @@ $mat-form-field-outline-dedupe: 0;
   }
 }
 
-@mixin _mat-form-field-outline-density($config-or-theme) {}
+@mixin mat-private-form-field-outline-density($config-or-theme) {}
 
 @mixin mat-form-field-outline-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -6553,7 +6555,7 @@ $mat-form-field-outline-dedupe: 0;
       @include mat-form-field-outline-color($color);
     }
     @if $density != null {
-      @include _mat-form-field-outline-density($density);
+      @include mat-private-form-field-outline-density($density);
     }
     @if $typography != null {
       @include mat-form-field-outline-typography($typography);
@@ -6568,7 +6570,6 @@ $mat-form-field-outline-dedupe: 0;
 
 
 
-
 // Theme styles that only apply to the standard appearance of the form-field.
 
 @mixin mat-form-field-standard-color($config-or-theme) {
@@ -6584,18 +6585,18 @@ $mat-form-field-outline-dedupe: 0;
     }
 
     &.mat-form-field-disabled .mat-form-field-underline {
-      @include mat-control-disabled-underline($underline-color);
+      @include mat-private-control-disabled-underline($underline-color);
     }
   }
 }
 
 @mixin mat-form-field-standard-typography($config-or-theme) {}
 
-@mixin _mat-form-field-standard-density($config-or-theme) {}
+@mixin mat-private-form-field-standard-density($config-or-theme) {}
 
 @mixin mat-form-field-standard-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -6604,7 +6605,7 @@ $mat-form-field-outline-dedupe: 0;
       @include mat-form-field-standard-color($color);
     }
     @if $density != null {
-      @include _mat-form-field-standard-density($density);
+      @include mat-private-form-field-standard-density($density);
     }
     @if $typography != null {
       @include mat-form-field-standard-typography($typography);
@@ -6842,17 +6843,17 @@ $mat-form-field-dedupe: 0;
   @include mat-form-field-outline-typography($config);
 }
 
-@mixin _mat-form-field-density($config-or-theme) {
+@mixin mat-form-field-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  @include _mat-form-field-legacy-density($density-scale);
-  @include _mat-form-field-standard-density($density-scale);
-  @include _mat-form-field-fill-density($density-scale);
-  @include _mat-form-field-outline-density($density-scale);
+  @include mat-private-form-field-legacy-density($density-scale);
+  @include mat-private-form-field-standard-density($density-scale);
+  @include mat-private-form-field-fill-density($density-scale);
+  @include mat-private-form-field-outline-density($density-scale);
 }
 
 @mixin mat-form-field-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-form-field') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -6861,7 +6862,7 @@ $mat-form-field-dedupe: 0;
       @include mat-form-field-color($color);
     }
     @if $density != null {
-      @include _mat-form-field-density($density);
+      @include mat-form-field-density($density);
     }
     @if $typography != null {
       @include mat-form-field-typography($typography);
@@ -6873,7 +6874,6 @@ $mat-form-field-dedupe: 0;
 
 
 
-
 $mat-tree-node-height: 48px !default;
 // Minimum height for tree nodes in highest density is difficult to determine as
 // developers can display arbitrary content. We use a minimum height which ensures
@@ -6918,11 +6918,11 @@ $mat-tree-density-config: (
   }
 }
 
-@mixin _mat-tree-density($config-or-theme) {
+@mixin mat-tree-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  $height: _mat-density-prop-value($mat-tree-density-config, $density-scale, height);
+  $height: mat-private-density-prop-value($mat-tree-density-config, $density-scale, height);
 
-  @include _mat-density-legacy-compatibility() {
+  @include mat-private-density-legacy-compatibility() {
     .mat-tree-node {
       min-height: $height;
     }
@@ -6930,8 +6930,8 @@ $mat-tree-density-config: (
 }
 
 @mixin mat-tree-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-tree') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tree') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);
@@ -6940,7 +6940,7 @@ $mat-tree-density-config: (
       @include mat-tree-color($color);
     }
     @if $density != null {
-      @include _mat-tree-density($density);
+      @include mat-tree-density($density);
     }
     @if $typography != null {
       @include mat-tree-typography($typography);
@@ -6953,7 +6953,7 @@ $mat-tree-density-config: (
 
 // Includes all of the typographic styles.
 @mixin angular-material-typography($config-or-theme: null) {
-  $config: if(_mat-is-theme-object($config-or-theme),
+  $config: if(mat-private-is-theme-object($config-or-theme),
       mat-get-typography-config($config-or-theme), $config-or-theme);
 
   // If no actual color configuration has been specified, create a default one.
@@ -7015,7 +7015,7 @@ $mat-tree-density-config: (
   @include cdk-overlay();
   @include cdk-text-field();
 
-  @include _mat-strong-focus-indicators-positioning();
+  @include mat-private-strong-focus-indicators-positioning();
   @include _mat-mdc-core();
 }
 
@@ -7036,8 +7036,8 @@ $mat-tree-density-config: (
   // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
   // elevated.
   @for $zValue from 0 through 24 {
-    .#{$_mat-elevation-prefix}#{$zValue} {
-      @include _mat-theme-elevation($zValue, $config);
+    .#{$mat-elevation-prefix}#{$zValue} {
+      @include mat-private-theme-elevation($zValue, $config);
     }
   }
 
@@ -7051,11 +7051,11 @@ $mat-tree-density-config: (
 
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin mat-core-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
   // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-core') {
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-core') {
     @include mat-ripple-theme($theme);
     @include mat-option-theme($theme);
     @include mat-optgroup-theme($theme);
@@ -7120,7 +7120,8 @@ $mat-tree-density-config: (
 
 // Create a theme.
 @mixin angular-material-theme($theme-or-color-config) {
-  @include _mat-check-duplicate-theme-styles($theme-or-color-config, 'angular-material-theme') {
+  $dedupe-key: 'angular-material-theme';
+  @include mat-private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
     @include mat-core-theme($theme-or-color-config);
     @include mat-autocomplete-theme($theme-or-color-config);
     @include mat-badge-theme($theme-or-color-config);
@@ -7160,11 +7161,12 @@ $mat-tree-density-config: (
 }
 
 
+
 // Includes all of the color styles.
 @mixin angular-material-color($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the color system, extract the color config from the theme object.
-  $config: if(_mat-is-theme-object($config-or-theme),
+  $config: if(mat-private-is-theme-object($config-or-theme),
       mat-get-color-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
@@ -7180,22 +7182,37 @@ $mat-tree-density-config: (
 
 
 
+
+
+
+
+
+
+
 // Includes all of the density styles.
-@mixin _angular-material-density($config-or-theme) {
+@mixin angular-material-density($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the density system, extract the density config from the theme object.
-  $config: if(_mat-is-theme-object($config-or-theme),
+  $config: if(mat-private-is-theme-object($config-or-theme),
       mat-get-density-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
     @error 'No density configuration specified.';
   }
 
-  @include angular-material-theme((
-    color: null,
-    typography: null,
-    density: $config,
-  ));
+  // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
+  // specify a `density` config while setting `color` and `typography` to `null`. This is currently
+  // not possible as it would introduce a circular dependency for density because the `mat-core`
+  // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
+  // would then load `all-theme` again. This ultimately results a circular dependency.
+
+  @include mat-expansion-panel-density($config);
+  @include mat-stepper-density($config);
+  @include mat-toolbar-density($config);
+  @include mat-tree-density($config);
+  @include mat-paginator-density($config);
+  @include mat-form-field-density($config);
+  @include mat-button-toggle-density($config);
 }