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

package/mdc-form-field/_form-field-subscript.scss

@@ -23,12 +23,23 @@
     padding: 0 mdc-textfield-variables.$padding-horizontal;
   }
 
+  .mat-mdc-form-field-subscript-dynamic-size {
+    .mat-mdc-form-field-hint-wrapper,
+    .mat-mdc-form-field-error-wrapper {
+      position: static;
+    }
+  }
+
   .mat-mdc-form-field-bottom-align::before {
     content: '';
     display: inline-block;
     height: 16px;
   }
 
+  .mat-mdc-form-field-bottom-align.mat-mdc-form-field-subscript-dynamic-size::before {
+    content: unset;
+  }
+
   .mat-mdc-form-field-hint-end {
     order: 1;
   }

package/mdc-form-field/form-field.d.ts

@@ -25,6 +25,8 @@ import * as i0 from "@angular/core";
 export declare type FloatLabelType = 'always' | 'auto';
 /** Possible appearance styles for the form field. */
 export declare type MatFormFieldAppearance = 'fill' | 'outline';
+/** Behaviors for how the subscript height is set. */
+export declare type SubscriptSizing = 'fixed' | 'dynamic';
 /**
  * Represents the default options for the form field that can be configured
  * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
@@ -33,6 +35,7 @@ export interface MatFormFieldDefaultOptions {
     appearance?: MatFormFieldAppearance;
     hideRequiredMarker?: boolean;
     floatLabel?: FloatLabelType;
+    subscriptSizing?: SubscriptSizing;
 }
 /**
  * Injection token that can be used to configure the
@@ -76,6 +79,14 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     get appearance(): MatFormFieldAppearance;
     set appearance(value: MatFormFieldAppearance);
     private _appearance;
+    /**
+     * Whether the form field should reserve space for one line of hint/error text (default)
+     * or to have the spacing grow from 0px as needed based on the size of the hint/error content.
+     * Note that when using dynamic sizing, layout shifts will occur when hint/error text changes.
+     */
+    get subscriptSizing(): SubscriptSizing;
+    set subscriptSizing(value: SubscriptSizing);
+    private _subscriptSizing;
     /** Text for the form field hint. */
     get hintLabel(): string;
     set hintLabel(value: string);
@@ -185,5 +196,5 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     /** Checks whether the form field is attached to the DOM. */
     private _isAttachedToDom;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormField, [null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": "hideRequiredMarker"; "color": "color"; "floatLabel": "floatLabel"; "appearance": "appearance"; "hintLabel": "hintLabel"; }, {}, ["_labelChildNonStatic", "_labelChildStatic", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": "hideRequiredMarker"; "color": "color"; "floatLabel": "floatLabel"; "appearance": "appearance"; "subscriptSizing": "subscriptSizing"; "hintLabel": "hintLabel"; }, {}, ["_labelChildNonStatic", "_labelChildStatic", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']"]>;
 }

package/mdc-list/_list-option-theme.scss

@@ -1,14 +1,14 @@
 @use '@material/checkbox' as mdc-checkbox;
-@use '../mdc-checkbox/checkbox-theme';
+@use '../mdc-checkbox/checkbox-private';
 @use '../mdc-helpers/mdc-helpers';
 @use './list-option-trailing-avatar-compat';
 
 // Mixin that overrides the selected item and checkbox colors for list options. By
 // default, the MDC list uses the `primary` color for list items. The MDC checkbox
 // inside list options by default uses the `primary` color too.
-@mixin private-list-option-color-override($color, $mdcColor) {
+@mixin private-list-option-color-override($color, $mdc-color) {
   & .mdc-list-item__start, & .mdc-list-item__end {
-    @include checkbox-theme.private-checkbox-styles-with-color($color, $mdcColor);
+    @include checkbox-private.private-checkbox-styles-with-color($color, $mdc-color);
   }
 }
 

package/mdc-list/_list-option-trailing-avatar-compat.scss

@@ -3,6 +3,7 @@
 @use '@material/density/functions' as density-functions;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/list/evolution-variables' as mdc-list-variables;
+@use '../mdc-helpers/mdc-helpers';
 
 // For compatibility with the non-MDC selection list, we support avatars that are
 // shown at the end of the list option. This is not supported by the MDC list as the
@@ -15,19 +16,21 @@
 @mixin core-styles($query) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
-  .mat-mdc-list-option-with-trailing-avatar {
-    @include mdc-list.item-end-spacing(16px, $query: $query);
-    @include mdc-list.item-end-size(40px, $query: $query);
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-option-with-trailing-avatar {
+      @include mdc-list.item-end-spacing(16px, $query: $query);
+      @include mdc-list.item-end-size(40px, $query: $query);
 
-    &.mdc-list-item--with-two-lines {
-      .mdc-list-item__primary-text {
-        @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
+      &.mdc-list-item--with-two-lines {
+        .mdc-list-item__primary-text {
+          @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
+        }
       }
-    }
 
-    .mdc-list-item__end {
-      @include feature-targeting.targets($feat-structure) {
-        border-radius: 50%;
+      .mdc-list-item__end {
+        @include feature-targeting.targets($feat-structure) {
+          border-radius: 50%;
+        }
       }
     }
   }
@@ -46,8 +49,10 @@
     $property-name: height,
   );
 
-  .mat-mdc-list-option-with-trailing-avatar {
-    @include mdc-list.one-line-item-height($one-line-tall-height);
-    @include mdc-list.two-line-item-height($two-line-tall-height);
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-option-with-trailing-avatar {
+      @include mdc-list.one-line-item-height($one-line-tall-height);
+      @include mdc-list.two-line-item-height($two-line-tall-height);
+    }
   }
 }

package/mdc-list/_list-theme.scss

@@ -16,11 +16,10 @@
   $accent: theming.get-color-from-palette(map.get($config, accent));
   $warn: theming.get-color-from-palette(map.get($config, warn));
 
-  // MDC's state styles are tied in with their ripple. Since we don't use the MDC
-  // ripple, we need to add the hover, focus and selected states manually.
-  @include interactive-list-theme.private-interactive-list-item-state-colors($config);
-
   @include mdc-helpers.mat-using-mdc-theme($config) {
+    // MDC's state styles are tied in with their ripple. Since we don't use the MDC
+    // ripple, we need to add the hover, focus and selected states manually.
+    @include interactive-list-theme.private-interactive-list-item-state-colors($config);
     @include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-list-option {
@@ -38,13 +37,15 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  .mat-mdc-list-item {
-    @include mdc-list.one-line-item-density($density-scale);
-    @include mdc-list.two-line-item-density($density-scale);
-    @include mdc-list.three-line-item-density($density-scale);
-  }
+  @include mdc-helpers.disable-fallback-declarations {
+    .mat-mdc-list-item {
+      @include mdc-list.one-line-item-density($density-scale);
+      @include mdc-list.two-line-item-density($density-scale);
+      @include mdc-list.three-line-item-density($density-scale);
+    }
 
-  @include list-option-theme.private-list-option-density-styles($density-scale);
+    @include list-option-theme.private-list-option-density-styles($density-scale);
+  }
 }
 
 @mixin typography($config-or-theme) {

package/mdc-radio/_radio-theme.scss

@@ -10,12 +10,9 @@
 @mixin _color-palette($color-palette) {
   @include mdc-radio-theme.theme((
     selected-focus-icon-color: $color-palette,
-    selected-focus-state-layer-color: $color-palette,
     selected-hover-icon-color: $color-palette,
-    selected-hover-state-layer-color: $color-palette,
     selected-icon-color: $color-palette,
     selected-pressed-icon-color: $color-palette,
-    selected-pressed-state-layer-color: $color-palette,
   ));
 
   // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently.
@@ -39,12 +36,9 @@
         disabled-selected-icon-color: mdc-theme-color.$on-surface,
         disabled-unselected-icon-color: mdc-theme-color.$on-surface,
         unselected-focus-icon-color: $on-surface,
-        unselected-focus-state-layer-color: $on-surface,
         unselected-hover-icon-color: $on-surface,
-        unselected-hover-state-layer-color: $on-surface,
         unselected-icon-color: $on-surface,
         unselected-pressed-icon-color: $on-surface,
-        unselected-pressed-state-layer-color: $on-surface,
       ));
 
       &.mat-primary {

package/mdc-tabs/_tabs-common.scss

@@ -11,7 +11,7 @@ $mat-tab-animation-duration: 500ms !default;
 // Combines the various structural styles we need for the tab group and tab nav bar.
 @mixin structural-styles {
   @include mdc-helpers.disable-fallback-declarations {
-    @include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-tab.static-styles($query: mdc-helpers.$mat-base-styles-query);
     @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
   }
 
@@ -51,6 +51,13 @@ $mat-tab-animation-duration: 500ms !default;
     pointer-events: none;
   }
 
+  // Required for `fitInkBarToContent` to work. This used to be included with MDC's `without-ripple`
+  // mixin, but that no longer appears to be the case with `static-styles`. Since the latter is
+  // ~10kb smaller, we include this one extra style ourselves.
+  .mdc-tab__content {
+    @include mdc-tab-indicator.surface;
+  }
+
   // We need to handle the hover and focus indication ourselves, because we don't use MDC's ripple.
   &:hover .mdc-tab__ripple::before {
     opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);

package/mdc-tabs/_tabs-theme.scss

@@ -4,7 +4,7 @@
 @use '@material/tab-indicator' as mdc-tab-indicator;
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab' as mdc-tab;
-@use '@material/tab/tab-theme' as mdc-tab-theme;
+@use '@material/tab/mixins' as mdc-tab-mixins;
 @use '@material/tab-bar' as mdc-tab-bar;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
@@ -18,39 +18,9 @@
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-tab, .mat-mdc-tab-link {
-      $surface: mdc-theme-color.$surface;
-      $on-surface: rgba(mdc-theme-color.$on-surface, 0.6);
-
-      // TODO(crisbeto): these styles should actually be set through the `theme` mixin while the
-      // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
-      // they are not, because `theme-styles` outputs the token values directly, rather than
-      // generating CSS variables.
-      @include mdc-tab-theme.primary-navigation-tab-theme-styles(map.merge(
-          mdc-tab-theme.$primary-light-theme,
-          (
-            container-color: $surface,
-            inactive-focus-state-layer-color: $on-surface,
-            inactive-hover-state-layer-color: $on-surface,
-            inactive-pressed-state-layer-color: $on-surface,
-            with-icon-inactive-focus-icon-color: $on-surface,
-            with-icon-inactive-hover-icon-color: $on-surface,
-            with-icon-inactive-icon-color: $on-surface,
-            with-icon-inactive-pressed-icon-color: $on-surface,
-            with-label-text-inactive-focus-label-text-color: $on-surface,
-            with-label-text-inactive-hover-label-text-color: $on-surface,
-            with-label-text-inactive-label-text-color: $on-surface,
-            with-label-text-inactive-pressed-label-text-color: $on-surface,
-
-            // TODO(crisbeto): MDC's styles are set up so that the icon size is set through a
-            // `font-size` at the root of the tab while the text size of the tab is set on
-            // `.mdc-tab__text-label` which overrides the one from the root. The problem is that
-            // the `$light-theme` is looking for a `subhead2` level which doesn't exist in MDC's
-            // code which in turn causes no text label styles to be emitted and for the icon size
-            // to be applied to the entire tab. Since we don't support icons inside the tab
-            // anyway, we can temporarily work around it by preventing MDC from emitting icon
-            // styles. The correct label typography will be applied by our theme instead.
-            with-icon-icon-size: null
-          )));
+      &:not(.mat-mdc-tab-disabled) {
+        @include mdc-tab-mixins.text-label-color(rgba(mdc-theme-color.$on-surface, 0.6));
+      }
 
       // MDC seems to include a background color on tabs which only stands out on dark themes.
       // Disable for now for backwards compatibility. These styles are inside the theme in order
@@ -125,27 +95,10 @@
 
 @mixin _palette-styles($color) {
   .mat-mdc-tab, .mat-mdc-tab-link {
-    // TODO(crisbeto): these styles should actually be set through the `theme` mixin while the
-    // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
-    // they are not, because `theme-styles` outputs the token values directly, rather than
-    // generating CSS variables.
-    @include mdc-tab-theme.primary-navigation-tab-theme-styles((
-      active-focus-state-layer-color: $color,
-      active-hover-state-layer-color: $color,
-      active-pressed-state-layer-color: $color,
-      with-icon-active-focus-icon-color: $color,
-      with-icon-active-hover-icon-color: $color,
-      with-icon-active-icon-color: $color,
-      with-icon-active-pressed-icon-color: $color,
-      with-label-text-active-focus-label-text-color: $color,
-      with-label-text-active-hover-label-text-color: $color,
-      with-label-text-active-label-text-color: $color,
-      with-label-text-active-pressed-label-text-color: $color,
-    ));
-
-    @include mdc-tab-indicator-theme.theme-styles((
-      active-indicator-color: $color
-    ));
+    &:not(.mat-mdc-tab-disabled) {
+      @include mdc-tab-mixins.active-text-label-color($color);
+      @include mdc-tab-indicator-theme.theme-styles((active-indicator-color: $color));
+    }
   }
 
   .mdc-tab__ripple::before,