fix(material/select): fix m3 arrow alignment (#28545)

Author: wagnermaciel

src/material-experimental/theming/_m3-density.scss

@@ -125,7 +125,13 @@ $_density-tokens: (
     touch-target-display: (block, block, none, none),
   ),
   (mat, ripple): (),
-  (mat, select): (),
+  (mat, select): (
+    arrow-transform: (
+      translateY(-8px),
+      translateY(-8px),
+      none,
+    ),
+  ),
   (mat, sidenav): (),
   (mat, slide-toggle): (),
   (mat, slider): (),

src/material/core/tokens/m2/mat/_select.scss

@@ -1,5 +1,7 @@
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/inspection';
+@use '../../../theming/theming';
 @use '../../../style/sass-utils';
 @use '@material/elevation/elevation-theme' as mdc-elevation;
 
@@ -46,7 +48,15 @@ $prefix: (mat, select);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -2);
+
+  @return (
+    arrow-transform: map.get((
+      0: translateY(-8px),
+      -1: translateY(-8px),
+      -2: none,
+    ), $density-scale),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

src/material/select/_select-theme.scss

@@ -1,5 +1,3 @@
-@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';
@@ -71,23 +69,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));

src/material/select/select.scss

@@ -77,11 +77,6 @@ $scale: 0.75 !default;
   display: inline-flex;
   align-items: center;
 
-  // When used in a fill appearance with a label, form-field the arrow should be shifted up 8px.
-  .mat-form-field-appearance-fill & {
-    transform: translateY(-8px);
-  }
-
   .mat-form-field-appearance-fill .mdc-text-field--no-label & {
     transform: none;
   }
@@ -245,3 +240,9 @@ div.mat-mdc-select-panel {
   // instead of `opacity` since VoiceOver + Chrome still reads out the space with the latter.
   visibility: hidden;
 }
+
+@include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
+  .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
+    @include token-utils.create-token-slot(transform, arrow-transform);
+  }
+}