@angular/material 17.2.0-next.1 → 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)
@@ -15,7 +14,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      $mat-tokens: tokens-mat-select.get-unthemable-tokens();
+      @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-tokens);
+    }
+  }
 }
 
 /// Outputs color theme styles for the mat-select.
@@ -66,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));
@@ -116,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,9 +3,11 @@
 @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;
+@use '../core/tokens/m2/mat/switch' as tokens-mat-switch;
 @use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -17,7 +19,10 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens());
+      $mat-tokens: tokens-mat-switch.get-unthemable-tokens();
+      $mdc-tokens: tokens-mdc-switch.get-unthemable-tokens();
+      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
     }
   }
 }
@@ -33,11 +38,13 @@
   }
   @else {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
+    $mat-tokens: tokens-mat-switch.get-color-tokens($theme);
+    $mdc-tokens: tokens-mdc-switch.get-color-tokens($theme);
 
     // Add values for MDC slide toggles tokens
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme($mdc-switch-color-tokens);
+      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
 
       // TODO(wagnermaciel): Use our token system to define this css variable.
     --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
@@ -71,11 +78,13 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    $mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme);
+    $mat-tokens: tokens-mat-switch.get-typography-tokens($theme);
+    $mdc-tokens: tokens-mdc-switch.get-typography-tokens($theme);
 
     // Add values for MDC slide toggle tokens
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme($mdc-switch-typography-tokens);
+      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
 
       .mat-mdc-slide-toggle {
         @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
@@ -92,6 +101,8 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
+      $mat-tokens: tokens-mat-switch.get-density-tokens($theme);
+      $mdc-tokens: tokens-mdc-switch.get-density-tokens($theme);
       @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
     }
   }
@@ -123,10 +134,15 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
-  $mdc-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-switch.$prefix, $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);
-  @include mdc-switch-theme.theme($mdc-switch-tokens);
+  $mat-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix);
+  $mdc-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-switch.$prefix, $options...);
+
   @include mdc-form-field-theme.theme($mdc-form-field-tokens);
+  @include mdc-switch-theme.theme($mdc-switch-tokens);
+  @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-switch-tokens);
 }

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));