fix(material/select): styles for m3 (#28492)

* fix(material/select): m3 native select invalid arrow color

* fix(material/select): m3 option background color

* fix(material/select): m3 box-shadow

* fixup! fix(material/select): m3 box-shadow

Author: wagnermaciel

src/material-experimental/theming/_custom-tokens.scss

@@ -1012,6 +1012,8 @@
           map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
       focused-arrow-color: map.get($systems, md-sys-color, primary),
       invalid-arrow-color: map.get($systems, md-sys-color, error),
+      container-elevation-shadow:
+        _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
     )
   ), (
     // Color variants:

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

@@ -1,14 +1,17 @@
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, select);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

src/material/select/_select-theme.scss

@@ -15,7 +15,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.

src/material/select/select.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use '@angular/cdk';
 @use '@material/typography/typography' as mdc-typography;
-@use '../core/style/elevation';
 @use '../core/style/vendor-prefixes';
 @use '../core/style/variables';
 @use '../core/tokens/token-utils';
@@ -32,6 +31,11 @@ $scale: 0.75 !default;
     @include token-utils.create-token-slot(letter-spacing, trigger-text-tracking);
   }
 }
+@include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
+  div.mat-mdc-select-panel {
+    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
+  }
+}
 
 .mat-mdc-select-disabled {
   @include token-utils.use-tokens(
@@ -83,6 +87,13 @@ $scale: 0.75 !default;
   }
 }
 
+.mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow,
+.mat-form-field-invalid:not(.mat-form-field-disabled) .mat-mdc-form-field-infix::after {
+  @include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
+    @include token-utils.create-token-slot(color, invalid-arrow-color);
+  }
+}
+
 .mat-mdc-select-arrow {
   width: $mat-select-arrow-size * 2;
   height: $mat-select-arrow-size;
@@ -96,10 +107,6 @@ $scale: 0.75 !default;
       @include token-utils.create-token-slot(color, focused-arrow-color);
     }
 
-    .mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid & {
-      @include token-utils.create-token-slot(color, invalid-arrow-color);
-    }
-
     .mat-mdc-form-field .mat-mdc-select.mat-mdc-select-disabled & {
       @include token-utils.create-token-slot(color, disabled-arrow-color);
     }
@@ -128,7 +135,6 @@ $scale: 0.75 !default;
 // DOM for the Gmat versions to work. We need to bump up the specificity here
 // so that it's higher than MDC's styles.
 div.mat-mdc-select-panel {
-  @include elevation.elevation(8);
   width: 100%; // Ensures that the panel matches the overlay width.
   max-height: $mat-select-panel-max-height;
   outline: 0;
@@ -160,6 +166,10 @@ div.mat-mdc-select-panel {
     border-bottom-right-radius: 0;
     transform-origin: bottom center;
   }
+
+  .mat-mdc-option {
+    --mdc-list-list-item-container-color: var(--mat-select-panel-background-color);
+  }
 }
 
 .mat-mdc-select-placeholder {