@angular/material-experimental 14.1.0-next.0 → 14.1.0-next.3

package/mdc-checkbox/_checkbox-theme.import.scss

@@ -1,5 +1,5 @@
-@forward '../mdc-helpers/mdc-helpers.import';
-@forward '../mdc-helpers/mdc-helpers';
+@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
+@forward '../mdc-core/mdc-helpers/mdc-helpers';
 @forward 'checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme,
 typography;
 @forward 'checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
@@ -12,4 +12,4 @@ mat-mdc-checkbox-background-focus-indicator-checked-color,
 mat-mdc-checkbox-background-focus-indicator-color,
 mat-mdc-checkbox-private-checkbox-styles-with-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-checkbox/_checkbox-theme.scss

@@ -7,7 +7,7 @@
 @use 'sass:map';
 @use 'sass:color';
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './checkbox-private';
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
@@ -88,7 +88,7 @@
       );
     }
 
-    @if ($density-scale == -2 or $density-scale == 'minimum') {
+    @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
       .mat-mdc-checkbox-touch-target {
         display: none;
       }

package/mdc-chips/_chips-theme.import.scss

@@ -1,8 +1,8 @@
-@forward '../mdc-helpers/mdc-helpers.import';
-@forward '../mdc-helpers/mdc-helpers';
+@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
+@forward '../mdc-core/mdc-helpers/mdc-helpers';
 @forward 'chips-theme' hide color, density, theme, typography;
 @forward 'chips-theme' as mat-mdc-chips-* hide $mat-mdc-chips-mdc-chips-fill-color-default,
 $mat-mdc-chips-mdc-chips-icon-color, $mat-mdc-chips-mdc-chips-ink-color-default,
 mat-mdc-chips-selected-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-chips/_chips-theme.scss

@@ -7,7 +7,7 @@
 @use 'sass:color';
 @use 'sass:map';
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 // Customizes the appearance of a chip. Note that ideally we would be doing this using the
 // `theme-styles` mixin, however it has the following problems:

package/mdc-core/_core-theme.import.scss

@@ -1,6 +1,6 @@
 @forward '../../material/core/theming/theming.import';
-@forward '../mdc-helpers/mdc-helpers.import';
-@forward '../mdc-helpers/mdc-helpers';
+@forward './mdc-helpers/mdc-helpers.import';
+@forward './mdc-helpers/mdc-helpers';
 @forward 'option/option-theme' as mat-mdc-*;
 @forward 'option/optgroup-theme' as mat-mdc-optgroup-*;
 @forward 'core-theme' as mat-mdc-core-*;

package/{mdc-color → mdc-core/color}/_all-color.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@use '../mdc-theming/all-theme';
+@use '../theming/all-theme';
 
 @mixin all-mdc-component-colors($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for

package/{mdc-density → mdc-core/density}/_all-density.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@use '../mdc-theming/all-theme';
+@use '../theming/all-theme';
 
 @mixin all-mdc-component-densities($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for

package/{mdc-helpers → mdc-core/mdc-helpers}/_focus-indicators-theme.scss

@@ -2,28 +2,30 @@
 @use 'sass:map';
 @use 'sass:meta';
 
-@mixin _border-color($color) {
-  .mat-mdc-focus-indicator::before {
-    border-color: $color;
-  }
-}
+$_prefix: 'mat-mdc';
 
 // stylelint-disable-next-line material/theme-mixin-api
 @mixin color($config-or-theme-or-color) {
   @if meta.type-of($config-or-theme-or-color) == 'color' {
-    @include _border-color($config-or-theme-or-color);
+    @include mat.private-strong-focus-indicators-customize-focus-indicators((
+      border-color: $config-or-theme-or-color
+    ), $_prefix);
   }
   @else {
     $config: mat.get-color-config($config-or-theme-or-color);
     $border-color: mat.get-color-from-palette(map.get($config, primary));
-    @include _border-color($border-color);
+    @include mat.private-strong-focus-indicators-customize-focus-indicators((
+      border-color: $border-color
+    ), $_prefix);
   }
 }
 
 // stylelint-disable-next-line material/theme-mixin-api
 @mixin theme($theme-or-color-config-or-color) {
   @if meta.type-of($theme-or-color-config-or-color) == 'color' {
-    @include _border-color($theme-or-color-config-or-color);
+    @include mat.private-strong-focus-indicators-customize-focus-indicators((
+      border-color: $theme-or-color-config-or-color
+    ), $_prefix);
   }
   @else {
     $theme: mat.private-legacy-get-theme($theme-or-color-config-or-color);

package/{mdc-helpers → mdc-core/mdc-helpers}/_focus-indicators.import.scss

@@ -1,10 +1,10 @@
-@forward '../../material/core/focus-indicators/focus-indicators.import';
+@forward '../../../material/core/focus-indicators/focus-indicators.import';
 @forward 'focus-indicators' hide strong-focus-indicators;
 @forward 'focus-indicators-theme' hide color, theme;
 @forward 'focus-indicators' as mat-mdc-*;
 @forward 'focus-indicators-theme' as mat-mdc-strong-focus-indicators-* hide
 mat-mdc-strong-focus-indicators-border-color;
 
-@import '../../material/core/theming/theming';
-@import '../../material/core/style/layout-common';
-@import '../../material/core/focus-indicators/focus-indicators';
+@import '../../../material/core/theming/theming';
+@import '../../../material/core/style/layout-common';
+@import '../../../material/core/focus-indicators/focus-indicators';

package/mdc-core/mdc-helpers/_focus-indicators.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin strong-focus-indicators($config: ()) {
+  // Default focus indicator config.
+  $default-config: (
+    border-color: black,
+    display: block,
+  );
+
+  // Merge default config with user config.
+  $config: map.merge($default-config, $config);
+
+  @include mat.private-strong-focus-indicators-customize-focus-indicators($config, 'mat-mdc');
+}

package/mdc-core/mdc-helpers/_mdc-helpers.import.scss

@@ -0,0 +1,8 @@
+@forward '../../../material/core/theming/theming.import';
+@forward '../../../material/core/style/layout-common.import';
+@forward '../../../material/core/typography/typography.import';
+@forward 'mdc-helpers';
+
+@import '../../../material/core/style/layout-common';
+@import '../../../material/core/theming/theming';
+@import '../../../material/core/typography/typography';

package/{mdc-helpers → mdc-core/mdc-helpers}/_mdc-helpers.scss

@@ -7,6 +7,7 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/css' as mdc-theme-css;
 @use 'sass:map';
+@use 'sass:meta';
 
 // A set of standard queries to use with MDC's queryable mixins.
 $mat-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
@@ -211,3 +212,10 @@ $mat-typography-mdc-level-mappings: (
   @content;
   mdc-theme-css.$enable-fallback-declarations: $previous-value;
 }
+
+// Excludes the passed-in CSS content if the layout is too dense to supports touch targets.
+@mixin if-touch-targets-unsupported($scale) {
+  @if ($scale == 'minimum' or (meta.type-of($scale) == 'number' and $scale < -1)) {
+    @content;
+  }
+}

package/mdc-core/option/_optgroup-theme.import.scss

@@ -1,7 +1,7 @@
 @forward '../../../material/core/theming/theming.import';
-@forward '../../mdc-helpers/mdc-helpers.import';
-@forward '../../mdc-helpers/mdc-helpers';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
 @forward 'optgroup-theme' as mat-mdc-optgroup-*;
 
-@import '../../mdc-helpers/mdc-helpers';
+@import '../mdc-helpers/mdc-helpers';
 @import '../../../material/core/theming/theming';

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

@@ -1,7 +1,7 @@
 @use '@material/theme/theme' as mdc-theme;
 @use '@angular/material' as mat;
 
-@use '../../mdc-helpers/mdc-helpers';
+@use '../mdc-helpers/mdc-helpers';
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);

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

@@ -1,7 +1,7 @@
 @forward '../../../material/core/theming/theming.import';
-@forward '../../mdc-helpers/mdc-helpers.import';
-@forward '../../mdc-helpers/mdc-helpers';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
 @forward 'option-theme' as mat-mdc-option-*;
 
-@import '../../mdc-helpers/mdc-helpers';
+@import '../mdc-helpers/mdc-helpers';
 @import '../../../material/core/theming/theming';

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

@@ -5,7 +5,7 @@
 @use '@material/ripple' as mdc-ripple;
 @use '@angular/material' as mat;
 
-@use '../../mdc-helpers/mdc-helpers';
+@use '../mdc-helpers/mdc-helpers';
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);

package/{mdc-theming → mdc-core/theming}/_all-theme.scss

@@ -1,29 +1,29 @@
 @use '@angular/material' as mat;
 
-@use '../mdc-core/core-theme';
-@use '../mdc-autocomplete/autocomplete-theme';
-@use '../mdc-button/button-theme';
-@use '../mdc-button/fab-theme';
-@use '../mdc-button/icon-button-theme';
-@use '../mdc-card/card-theme';
-@use '../mdc-checkbox/checkbox-theme';
-@use '../mdc-chips/chips-theme';
-@use '../mdc-dialog/dialog-theme';
-@use '../mdc-list/list-theme';
-@use '../mdc-menu/menu-theme';
-@use '../mdc-radio/radio-theme';
-@use '../mdc-select/select-theme';
-@use '../mdc-slide-toggle/slide-toggle-theme';
-@use '../mdc-slider/slider-theme';
-@use '../mdc-snack-bar/snack-bar-theme';
-@use '../mdc-tabs/tabs-theme';
-@use '../mdc-table/table-theme';
-@use '../mdc-tooltip/tooltip-theme';
-@use '../mdc-paginator/paginator-theme';
-@use '../mdc-progress-bar/progress-bar-theme';
-@use '../mdc-progress-spinner/progress-spinner-theme';
-@use '../mdc-input/input-theme';
-@use '../mdc-form-field/form-field-theme';
+@use '../core-theme';
+@use '../../mdc-autocomplete/autocomplete-theme';
+@use '../../mdc-button/button-theme';
+@use '../../mdc-button/fab-theme';
+@use '../../mdc-button/icon-button-theme';
+@use '../../mdc-card/card-theme';
+@use '../../mdc-checkbox/checkbox-theme';
+@use '../../mdc-chips/chips-theme';
+@use '../../mdc-dialog/dialog-theme';
+@use '../../mdc-list/list-theme';
+@use '../../mdc-menu/menu-theme';
+@use '../../mdc-radio/radio-theme';
+@use '../../mdc-select/select-theme';
+@use '../../mdc-slide-toggle/slide-toggle-theme';
+@use '../../mdc-slider/slider-theme';
+@use '../../mdc-snack-bar/snack-bar-theme';
+@use '../../mdc-tabs/tabs-theme';
+@use '../../mdc-table/table-theme';
+@use '../../mdc-tooltip/tooltip-theme';
+@use '../../mdc-paginator/paginator-theme';
+@use '../../mdc-progress-bar/progress-bar-theme';
+@use '../../mdc-progress-spinner/progress-spinner-theme';
+@use '../../mdc-input/input-theme';
+@use '../../mdc-form-field/form-field-theme';
 
 @mixin all-mdc-component-themes($theme-or-color-config) {
   $dedupe-key: 'angular-material-mdc-theme';