@angular/material 17.2.0-rc.0 → 17.2.0

package/select/_select-theme.scss

@@ -1,11 +1,10 @@
-@use '@material/density' as mdc-density;
-@use '@material/textfield' as mdc-textfield;
 @use '../core/tokens/m2/mat/select' as tokens-mat-select;
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -71,23 +70,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $density-scale: inspection.get-theme-density($theme);
-
-    // Density is clamped at -5 here, because MDC's form field throws an error for anything lower.
-    $form-field-height: mdc-density.prop-value(
-      $density-config: mdc-textfield.$density-config,
-      $density-scale: theming.clamp-density($density-scale, -5),
-      $property-name: height,
-    );
-
-    // On lower densities the filled form field hides its label which causes the label to
-    // be misaligned. Remove the additional offset that was added because of the label.
-    @if ($form-field-height < mdc-textfield.$minimum-height-for-filled-label) {
-      .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
-        transform: none;
-      }
-    }
-
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mat-select.$prefix,
         tokens-mat-select.get-density-tokens($theme));
@@ -121,6 +103,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mat-select-tokens: token-utils.get-tokens-for($tokens, tokens-mat-select.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-select-tokens);
 }

package/sidenav/_sidenav-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav;
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
@@ -64,6 +65,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-sidenav.$prefix, map.get($tokens, tokens-mat-sidenav.$prefix));

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

@@ -3,6 +3,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
@@ -133,6 +134,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   // Don't pass $options here, since the mdc-form-field doesn't support color options,
   // only the mdc-switch does.
   $mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix);

package/slider/_slider-theme.scss

@@ -1,6 +1,7 @@
 @use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -129,6 +130,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...);
   $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...);
   @include mdc-slider-theme.theme($mdc-slider-tokens);

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

@@ -2,6 +2,7 @@
 @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
@@ -69,6 +70,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include mdc-snackbar-theme.theme(map.get($tokens, tokens-mdc-snack-bar.$prefix));
     @include token-utils.create-token-values(

package/sort/_sort-theme.scss

@@ -4,6 +4,7 @@
 @use '../core/typography/typography';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 
 @mixin base($theme) {
@@ -70,6 +71,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-sort.$prefix, map.get($tokens, tokens-mat-sort.$prefix));

package/stepper/_stepper-theme.scss

@@ -1,5 +1,6 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -96,6 +97,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     $mat-stepper-tokens: token-utils.get-tokens-for(
       $tokens,

package/table/_table-theme.scss

@@ -2,6 +2,7 @@
 @use '../core/tokens/m2/mat/table' as tokens-mat-table;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
@@ -75,6 +76,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-table.$prefix, map.get($tokens, tokens-mat-table.$prefix));

package/tabs/_tabs-theme.scss

@@ -7,6 +7,7 @@
 @use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 
@@ -147,6 +148,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-tab-indicator-tokens: token-utils.get-tokens-for(
       $tokens, tokens-mdc-tab-indicator.$prefix, $options...);
   $mat-tab-header-tokens: token-utils.get-tokens-for(

package/toolbar/_toolbar-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
 @use '../core/tokens/token-utils';
@@ -92,6 +93,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
       map.get($tokens, tokens-mat-toolbar.$prefix));

package/tooltip/_tooltip-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 
@@ -81,6 +82,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if $tokens != () {
     @include mdc-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
   }

package/tree/_tree-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -75,6 +76,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-tree.$prefix, map.get($tokens, tokens-mat-tree.$prefix));