@angular/material 11.0.3 → 11.1.1

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);
@@ -2282,24 +2305,54 @@ $mat-ripple-color-opacity: 0.1;
   @return map-get($config, headline-1) != null;
 }
 
+// Whether a config is for the Material Design 2014 typography system.
+@function mat-private-typography-is-2014-config($config) {
+  @return map-get($config, headline) != null;
+}
+
 // Given a config for either the 2014 or 2018 Material Design typography system,
 // produces a normalized typography config for the 2014 Material Design typography system.
 // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
 // 2018 - https://material.io/design/typography/the-type-system.html#type-scale
-@function mat-private-typography-normalized-config($config) {
+@function mat-private-typography-to-2014-config($config) {
   @if mat-private-typography-is-2018-config($config) {
     @return mat-typography-config(
-        $display-3: map-get($config, display-1),
-        $display-2: map-get($config, display-2),
-        $display-1: map-get($config, display-3),
-        $headline: map-get($config, headline-4),
-        $title: map-get($config, subtitle-1),
-        $subheading-2: map-get($config, subhead-1),
-        $subheading-1: map-get($config, subhead-2),
+        $display-4: map-get($config, headline-1),
+        $display-3: map-get($config, headline-2),
+        $display-2: map-get($config, headline-3),
+        $display-1: map-get($config, headline-4),
+        $headline: map-get($config, headline-5),
+        $title: map-get($config, headline-6),
+        $subheading-2: map-get($config, subtitle-1),
+        $subheading-1: map-get($config, subtitle-2),
         $body-2: map-get($config, body-1),
         $body-1: map-get($config, body-2),
-        $caption: map-get($config, caption),
         $button: map-get($config, button),
+        $caption: map-get($config, caption),
+    );
+  }
+  @return $config;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2018 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+@function mat-private-typography-to-2018-config($config) {
+  @if mat-private-typography-is-2014-config($config) {
+    @return (
+        headline-1: map-get($config, display-4),
+        headline-2: map-get($config, display-3),
+        headline-3: map-get($config, display-2),
+        headline-4: map-get($config, display-1),
+        headline-5: map-get($config, headline),
+        headline-6: map-get($config, title),
+        subtitle-1: map-get($config, subheading-2),
+        subtitle-2: map-get($config, subheading-1),
+        body-1: map-get($config, body-2),
+        body-2: map-get($config, body-1),
+        button: map-get($config, button),
+        caption: map-get($config, caption),
     );
   }
   @return $config;
@@ -2395,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);
 
@@ -2426,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);
@@ -2452,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;
@@ -2655,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);
@@ -2678,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);
   }
@@ -2701,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);
@@ -2723,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.
@@ -2854,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);
     }
   }
 }
@@ -2897,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);
@@ -2920,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.
@@ -2933,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
@@ -2951,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}, '  +
@@ -3014,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,
@@ -3091,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;
     }
@@ -3104,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);
@@ -3114,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);
@@ -3128,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);
     }
   }
 
@@ -3176,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);
@@ -3198,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);
@@ -3307,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);
@@ -3330,7 +3379,6 @@ $mat-button-toggle-standard-density-config: (
 
 
 
-
 $mat-chip-remove-font-size: 18px;
 
 @mixin _mat-chip-element-color($foreground, $background) {
@@ -3382,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 {
@@ -3430,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);
@@ -3453,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);
@@ -3472,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);
@@ -3494,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);
@@ -3544,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);
@@ -3568,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;
@@ -3602,6 +3647,16 @@ $mat-calendar-weekday-table-font-size: 11px !default;
     box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width
                 mat-color($palette, default-contrast);
   }
+
+  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,
+  .cdk-keyboard-focused .mat-calendar-body-active,
+  .cdk-program-focused .mat-calendar-body-active {
+    & > .mat-calendar-body-cell-content {
+      @include _mat-datepicker-unselected-cell {
+        background-color: mat-color($palette, 0.3);
+      }
+    }
+  }
 }
 
 // Utility mixin to target cells that aren't selected. Used to make selector easier to follow.
@@ -3657,16 +3712,6 @@ $mat-calendar-weekday-table-font-size: 11px !default;
     color: $disabled-color;
   }
 
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,
-  .cdk-keyboard-focused .mat-calendar-body-active,
-  .cdk-program-focused .mat-calendar-body-active {
-    & > .mat-calendar-body-cell-content {
-      @include _mat-datepicker-unselected-cell {
-        background-color: mat-color($background, hover);
-      }
-    }
-  }
-
   .mat-calendar-body-in-preview {
     $divider-color: mat-color($foreground, divider);
 
@@ -3709,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);
 
@@ -3723,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 {
@@ -3808,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);
@@ -3832,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);
   }
@@ -3855,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);
@@ -3878,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;
@@ -3917,7 +3960,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);
   }
@@ -3979,14 +4022,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;
 
@@ -3998,8 +4041,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);
@@ -4008,7 +4051,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);
@@ -4019,7 +4062,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() {
@@ -4087,8 +4129,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);
@@ -4107,7 +4149,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);
@@ -4136,8 +4177,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);
@@ -4159,11 +4200,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;
@@ -4172,7 +4212,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));
@@ -4220,9 +4260,9 @@ $mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
   backface-visibility: $value;
 }
 
-@mixin position-sticky {
-  position: -webkit-sticky;
-  position: sticky;
+@mixin position-sticky($important: false) {
+  position: -webkit-sticky #{if($important, '!important', '')};
+  position: sticky #{if($important, '!important', '')};
 }
 /* stylelint-enable */
 
@@ -4248,7 +4288,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,
@@ -4300,8 +4340,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);
@@ -4324,7 +4364,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);
@@ -4417,8 +4456,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);
@@ -4441,14 +4480,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');
   }
 
@@ -4494,8 +4532,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);
@@ -4517,7 +4555,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).
@@ -4579,11 +4616,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;
     }
@@ -4591,8 +4628,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);
@@ -4601,7 +4638,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);
@@ -4612,7 +4649,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);
@@ -4665,8 +4701,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);
@@ -4687,7 +4723,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);
@@ -4714,8 +4749,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);
@@ -4736,7 +4771,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin _mat-radio-color($palette) {
   &.mat-radio-checked .mat-radio-outer-circle {
     border-color: mat-color($palette);
@@ -4812,8 +4846,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);
@@ -4837,7 +4871,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);
@@ -4851,7 +4884,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 {
@@ -4864,7 +4897,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);
@@ -4913,8 +4946,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);
@@ -4935,7 +4968,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);
@@ -4965,7 +4997,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);
     }
   }
 
@@ -5012,8 +5044,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);
@@ -5035,7 +5067,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
   &.mat-checked {
     .mat-slide-toggle-thumb {
@@ -5096,7 +5127,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);
   }
 
@@ -5115,8 +5146,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);
@@ -5138,7 +5169,6 @@ $mat-paginator-density-config: (
 
 
 
-
 @mixin _mat-slider-inner-content-theme($palette) {
   .mat-slider-track-fill,
   .mat-slider-thumb,
@@ -5314,8 +5344,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);
@@ -5336,7 +5366,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
@@ -5497,12 +5526,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;
     }
@@ -5534,8 +5563,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);
@@ -5544,7 +5573,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);
@@ -5554,7 +5583,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);
@@ -5585,8 +5613,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);
@@ -5607,7 +5635,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);
@@ -5668,7 +5695,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);
+          }
         }
       }
     }
@@ -5702,13 +5731,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 {
@@ -5717,17 +5749,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);
   }
 }
@@ -5750,8 +5783,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);
@@ -5773,7 +5806,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.
@@ -5880,14 +5912,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);
 
@@ -5901,8 +5933,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);
@@ -5911,7 +5943,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);
@@ -5923,7 +5955,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;
@@ -5961,8 +5992,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);
@@ -5985,7 +6016,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);
@@ -5997,7 +6027,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 {
@@ -6027,8 +6057,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);
@@ -6058,8 +6088,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) {
@@ -6157,11 +6185,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);
@@ -6170,7 +6198,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);
@@ -6184,7 +6212,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) {
@@ -6209,7 +6236,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);
     }
   }
 }
@@ -6355,11 +6382,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);
@@ -6368,7 +6395,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);
@@ -6382,7 +6409,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) {
@@ -6510,11 +6536,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);
@@ -6523,7 +6549,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);
@@ -6538,7 +6564,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) {
@@ -6554,18 +6579,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);
@@ -6574,7 +6599,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);
@@ -6812,17 +6837,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);
@@ -6831,7 +6856,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);
@@ -6843,7 +6868,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
@@ -6888,11 +6912,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;
     }
@@ -6900,8 +6924,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);
@@ -6910,7 +6934,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);
@@ -6923,7 +6947,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.
@@ -6985,7 +7009,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();
 }
 
@@ -7006,8 +7030,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);
     }
   }
 
@@ -7021,11 +7045,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);
@@ -7090,7 +7114,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);
@@ -7130,11 +7155,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 {
@@ -7150,22 +7176,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);
 }