@angular/material-experimental 14.0.1 → 14.1.0-next.1

package/mdc-radio/_radio-theme.import.scss

@@ -1,7 +1,7 @@
-@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 'radio-theme' hide color, density, theme, typography;
 @forward 'radio-theme' as mat-mdc-radio-* hide $mat-mdc-radio-mdc-radio-baseline-theme-color,
 $mat-mdc-radio-mdc-radio-disabled-circle-color, $mat-mdc-radio-mdc-radio-unchecked-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-radio/_radio-theme.scss

@@ -4,7 +4,7 @@
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/radio/radio' as mdc-radio;
 @use '@material/form-field' as mdc-form-field;
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 @mixin _color-palette($color-palette) {
   @include mdc-radio-theme.theme((

package/mdc-select/_select-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 'select-theme' hide color, density, theme, typography;
 @forward 'select-theme' as mat-mdc-select-* hide
 $mat-mdc-select-mdc-select-disabled-dropdown-icon-color,
@@ -7,4 +7,4 @@ $mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-drop
 $mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color,
 mat-mdc-select-get-mdc-focused-text-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-select/_select-theme.scss

@@ -4,7 +4,7 @@
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/typography' as mdc-typography;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 // Gets the color to use for some text that is highlighted while a select has focus.
 @function _get-mdc-focused-text-color($palette) {

package/mdc-slide-toggle/_slide-toggle-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 'slide-toggle-theme' hide color, density, theme, typography;
 @forward 'slide-toggle-theme' as mat-mdc-slide-toggle-* hide
 $mat-mdc-slide-toggle-mdc-switch-baseline-theme-color,
@@ -8,4 +8,4 @@ $mat-mdc-slide-toggle-mdc-switch-disabled-track-color,
 $mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color,
 $mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-slide-toggle/_slide-toggle-theme.scss

@@ -5,7 +5,7 @@
 @use '@material/theme/color-palette' as mdc-color-palette;
 @use '@material/form-field' as mdc-form-field;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 // Generates all color mapping for the properties that only change based on the theme.
 @function _get-theme-base-map($is-dark) {

package/mdc-slider/_slider-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 'slider-theme' as mat-mdc-slider-*;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-slider/_slider-theme.scss

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

package/mdc-snack-bar/_snack-bar-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 'snack-bar-theme' hide color, density, theme, typography;
 @forward 'snack-bar-theme' as mat-mdc-snack-bar-* hide
 $mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color,
 $mat-mdc-snack-bar-mdc-snackbar-label-ink-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-snack-bar/_snack-bar-theme.scss

@@ -4,7 +4,7 @@
 @use 'sass:color';
 @use 'sass:map';
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);

package/mdc-table/_table-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 'table-theme' hide color, density, theme, typography;
 @forward 'table-theme' as mat-mdc-table-* hide $mat-mdc-table-mdc-data-table-divider-color,
 $mat-mdc-table-mdc-data-table-header-row-text-color,
@@ -8,4 +8,4 @@ $mat-mdc-table-mdc-data-table-selected-row-fill-color,
 $mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color,
 $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-table/_table-theme.scss

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

package/mdc-tabs/_tabs-common.import.scss

@@ -1,6 +1,6 @@
 @forward '../../material/core/style/private.import';
-@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 '../../material/core/style/vendor-prefixes.import';
 @forward '../../cdk/a11y/index.import';
 @forward 'tabs-common' hide paginated-tab-header, paginated-tab-header-container,
@@ -11,4 +11,4 @@ paginated-tab-header-item-wrapper, tab, tab-ripple;
 @import '../../material/core/style/private';
 @import '../../material/core/style/vendor-prefixes';
 @import '../../cdk/a11y';
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-tabs/_tabs-common.scss

@@ -1,11 +1,10 @@
-@use '@angular/cdk';
 @use '@angular/material' as mat;
 @use '@material/ripple' as mdc-ripple;
 @use '@material/tab' as mdc-tab;
 @use '@material/tab-indicator' as mdc-tab-indicator;
 @use 'sass:map';
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 $mat-tab-animation-duration: 500ms !default;
 
@@ -69,14 +68,6 @@ $mat-tab-animation-duration: 500ms !default;
     .mdc-tab__ripple::before {
       opacity: map.get(mdc-ripple.$dark-ink-opacities, focus);
     }
-
-    // The usual focus indication is color-based so it won't show up in
-    // high contrast mode. Add an outline which is a bit more visible.
-    @include cdk.high-contrast {
-      $outline-width: 2px;
-      outline: dotted $outline-width;
-      outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else.
-    }
   }
 
   .mat-ripple-element {

package/mdc-tabs/_tabs-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 'tabs-theme' hide color, density, theme, typography;
 @forward 'tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active,
 $mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default,
 mat-mdc-tabs-background, mat-mdc-tabs-palette-styles;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-tabs/_tabs-theme.scss

@@ -8,7 +8,7 @@
 @use '@material/tab/mixins' as mdc-tab-mixins;
 @use '@material/tab-bar' as mdc-tab-bar;
 
-@use '../mdc-helpers/mdc-helpers';
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);

package/mdc-tooltip/_tooltip-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 'tooltip-theme' as mat-mdc-tooltip-*;
 
-@import '../mdc-helpers/mdc-helpers';
+@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-tooltip/_tooltip-theme.scss

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "14.0.1",
+  "version": "14.1.0-next.1",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -21,20 +21,20 @@
       "node": "./fesm2015/material-experimental.mjs",
       "default": "./fesm2020/material-experimental.mjs"
     },
-    "./mdc-theming/prebuilt/indigo-pink.css": {
-      "style": "./mdc-theming/prebuilt/indigo-pink.css"
+    "./mdc-core/theming/prebuilt/indigo-pink.css": {
+      "style": "./mdc-core/theming/prebuilt/indigo-pink.css"
     },
-    "./mdc-theming/prebuilt/deeppurple-amber.css": {
-      "style": "./mdc-theming/prebuilt/deeppurple-amber.css"
+    "./mdc-core/theming/prebuilt/deeppurple-amber.css": {
+      "style": "./mdc-core/theming/prebuilt/deeppurple-amber.css"
     },
-    "./mdc-theming/prebuilt/pink-bluegrey.css": {
-      "style": "./mdc-theming/prebuilt/pink-bluegrey.css"
+    "./mdc-core/theming/prebuilt/pink-bluegrey.css": {
+      "style": "./mdc-core/theming/prebuilt/pink-bluegrey.css"
     },
-    "./mdc-theming/prebuilt/purple-green.css": {
-      "style": "./mdc-theming/prebuilt/purple-green.css"
+    "./mdc-core/theming/prebuilt/purple-green.css": {
+      "style": "./mdc-core/theming/prebuilt/purple-green.css"
     },
-    "./mdc-theming/prebuilt/*": {
-      "style": "./mdc-theming/prebuilt/*.css"
+    "./mdc-core/theming/prebuilt/*": {
+      "style": "./mdc-core/theming/prebuilt/*.css"
     },
     "./package.json": {
       "default": "./package.json"
@@ -426,12 +426,12 @@
   },
   "peerDependencies": {
     "@angular/animations": "^14.0.0 || ^15.0.0",
-    "@angular/cdk": "14.0.1",
+    "@angular/cdk": "14.1.0-next.1",
     "@angular/core": "^14.0.0 || ^15.0.0",
     "@angular/common": "^14.0.0 || ^15.0.0",
     "@angular/forms": "^14.0.0 || ^15.0.0",
     "@angular/platform-browser": "^14.0.0 || ^15.0.0",
-    "@angular/material": "14.0.1"
+    "@angular/material": "14.1.0-next.1"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/mdc-helpers/_focus-indicators.scss

@@ -1,104 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-
-/// Mixin that turns on strong focus indicators.
-///
-/// @example
-///   .my-app {
-///     @include mat-mdc-strong-focus-indicators($config);
-///   }
-@mixin strong-focus-indicators($config: ()) {
-  // Default focus indicator config.
-  $default-config: (
-    border-style: solid,
-    border-width: 3px,
-    border-radius: 4px,
-  );
-
-  // Merge default config with user config.
-  $config: map.merge($default-config, $config);
-  $border-style: map.get($config, border-style);
-  $border-width: map.get($config, border-width);
-  $border-radius: map.get($config, border-radius);
-
-  // Base styles for focus indicators.
-  .mat-mdc-focus-indicator::before {
-    @include mat.private-fill();
-    box-sizing: border-box;
-    pointer-events: none;
-    border: $border-width $border-style transparent;
-    border-radius: $border-radius;
-
-    .cdk-high-contrast-active & {
-      display: none;
-    }
-  }
-
-  // By default, all focus indicators are flush with the bounding box of their
-  // host element. For particular elements (listed below), default inset/offset
-  // values are necessary to ensure that the focus indicator is sufficiently
-  // contrastive and renders appropriately.
-
-  .mat-mdc-unelevated-button .mat-mdc-focus-indicator::before,
-  .mat-mdc-raised-button .mat-mdc-focus-indicator::before,
-  .mdc-fab .mat-mdc-focus-indicator::before,
-  .mat-mdc-chip-action-label .mat-mdc-focus-indicator::before {
-    margin: -($border-width + 2px);
-  }
-
-  .mat-mdc-outlined-button .mat-mdc-focus-indicator::before {
-    margin: -($border-width + 3px);
-  }
-
-  .mat-mdc-focus-indicator.mat-mdc-chip-remove::before {
-    margin: -$border-width;
-  }
-
-  // MDC sets a padding a on the button which stretches out the focus indicator.
-  .mat-mdc-focus-indicator.mat-mdc-chip-remove::before {
-    left: 8px;
-    right: 8px;
-  }
-
-  .mat-mdc-focus-indicator.mat-mdc-tab::before,
-  .mat-mdc-focus-indicator.mat-mdc-tab-link::before {
-    margin: 5px;
-  }
-
-  // These components have to set `border-radius: 50%` in order to support density scaling
-  // which will clip a square focus indicator so we have to turn it into a circle.
-  .mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before,
-  .mat-radio-ripple.mat-mdc-focus-indicator::before,
-  .mat-mdc-slider .mat-mdc-focus-indicator::before,
-  .mat-mdc-slide-toggle .mat-mdc-focus-indicator::before {
-    border-radius: 50%;
-  }
-
-  // Render the focus indicator on focus. Defining a pseudo element's
-  // content will cause it to render.
-
-  // For checkboxes, radios and slide toggles, render the focus indicator when we know
-  // the hidden input is focused (slightly different for each control).
-  .mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
-  .mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
-  .mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
-
-  // In the chips the individual actions have focus so we target a different element.
-  .mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before,
-
-  // For buttons and list items, render the focus indicator when the parent
-  // button or list item is focused.
-  .mat-mdc-button-base:focus .mat-mdc-focus-indicator::before,
-  .mat-mdc-list-item:focus > .mat-mdc-focus-indicator::before,
-
-  // For options, render the focus indicator when the class .mat-mdc-option-active is present.
-  .mat-mdc-focus-indicator.mat-mdc-option-active::before,
-
-  // In the MDC slider the focus indicator is inside the thumb.
-  .mdc-slider__thumb--focused .mat-mdc-focus-indicator::before,
-
-    // For all other components, render the focus indicator on focus.
-  .mat-mdc-focus-indicator:focus::before {
-    content: '';
-  }
-}

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

@@ -1,8 +0,0 @@
-@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';