@angular/material 18.2.0-next.0 → 18.2.0-next.2

package/form-field/_form-field-theme.scss

@@ -1,5 +1,3 @@
-@use '@material/textfield/filled-text-field-theme' as mdc-filled-text-field-theme;
-@use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
 @use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field;
 @use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
@@ -43,28 +41,28 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-filled-text-field-theme.theme(
-          tokens-mdc-filled-text-field.get-color-tokens($theme));
-      @include mdc-outlined-text-field-theme.theme(
-          tokens-mdc-outlined-text-field.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-color-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
         tokens-mat-form-field.get-color-tokens($theme));
     }
 
     .mat-mdc-form-field.mat-accent {
-      @include mdc-filled-text-field-theme.theme(
-          tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
-      @include mdc-outlined-text-field-theme.theme(
-          tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
       @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
         tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent));
     }
 
     .mat-mdc-form-field.mat-warn {
-      @include mdc-filled-text-field-theme.theme(
-          tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
-      @include mdc-outlined-text-field-theme.theme(
-          tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
       @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
         tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn));
     }
@@ -79,10 +77,10 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-filled-text-field-theme.theme(
-          tokens-mdc-filled-text-field.get-typography-tokens($theme));
-      @include mdc-outlined-text-field-theme.theme(
-          tokens-mdc-outlined-text-field.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-typography-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
         tokens-mat-form-field.get-typography-tokens($theme));
     }
@@ -152,7 +150,9 @@
     token-utils.get-tokens-for($tokens, tokens-mdc-outlined-text-field.$prefix, $options...);
   $mat-form-field-tokens:
     token-utils.get-tokens-for($tokens, tokens-mat-form-field.$prefix, $options...);
-  @include mdc-filled-text-field-theme.theme($mdc-filled-text-field-tokens);
-  @include mdc-outlined-text-field-theme.theme($mdc-outlined-text-field-tokens);
+  @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+    $mdc-filled-text-field-tokens);
+  @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+    $mdc-outlined-text-field-tokens);
   @include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens);
 }

package/form-field/_mdc-text-field-density-overrides.scss

@@ -1,4 +1,3 @@
-@use '@material/textfield' as mdc-textfield;
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/tokens/token-utils';
 
@@ -51,7 +50,8 @@
     .mdc-floating-label--float-above {
       // Needs to be in a string form to work around an internal check that incorrectly flags this
       // interpolation in `calc` as unnecessary. If we don't have it, Sass won't evaluate it.
-      $translate: 'calc(#{mdc-textfield.get-outlined-label-position-y(var(#{$height}))} * -1)';
+      $offset: 'calc(6.75px + var(#{$height}) / 2)';
+      $translate: 'calc(#{$offset} * -1)';
       --mat-mdc-form-field-label-transform: translateY(#{$translate})
         scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
       transform: var(--mat-mdc-form-field-label-transform);

package/form-field/_mdc-text-field-structure-overrides.scss

@@ -1,4 +1,3 @@
-@use '@material/textfield/variables' as mdc-textfield-variables;
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/tokens/token-utils';
 @use '../core/style/vendor-prefixes';
@@ -101,8 +100,8 @@ $_enable-form-field-will-change-reset: true;
   [dir='rtl'] {
     // Undo the above padding removals which only apply in LTR languages.
     .mat-mdc-text-field-wrapper {
-      padding-left: mdc-textfield-variables.$padding-horizontal;
-      padding-right: mdc-textfield-variables.$padding-horizontal;
+      padding-left: 16px;
+      padding-right: 16px;
     }
     // ...and apply the correct padding resets for RTL languages.
     .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
@@ -164,16 +163,6 @@ $_enable-form-field-will-change-reset: true;
     padding-top: 0;
   }
 
-  // Unset the baseline adjustment styles that are applied to the `.mdc-text-field` before
-  // pseudo element. We control the vertical alignment of form field controls using infix
-  // spacing since we support custom form-field controls. Those don't necessarily have an
-  // explicit height that matches with the Material Design specification. If the height isn't
-  // explicitly set to a specific value by MDC, the control will not align correctly vertically.
-  // e.g. No vertical spacing to the bottom-line if the control is too large.
-  .mat-mdc-text-field-wrapper::before {
-    content: none;
-  }
-
   // This fixes an issue where the notch appears to be thicker than the rest of the outline when
   // zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
   // that arises from a combination of the fact that the notch contains text, while the leading