fix(list): use new elevation component

PiperOrigin-RevId: 499297946

Author: asyncliz

autocomplete/lib/_filled-autocomplete.scss

@@ -7,7 +7,6 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../elevationold/lib/elevation-theme';
 @use '../../field/filled-field';
 @use '../../list/list';
 @use '../../list/list-item';
@@ -188,6 +187,7 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
       (
         container-elevation: var(--_menu-container-elevation),
         container-shape: var(--_menu-container-shape),
+        container-shadow-color: var(--_menu-container-shadow-color),
       )
     );
 
@@ -196,8 +196,7 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
         container-color: var(--_menu-container-color),
         container-surface-tint-layer-color:
           var(--_menu-container-surface-tint-layer-color),
-        container-elevation-overlay-opacity:
-          var(--_menu-container-elevation-overlay-opacity),
+        container-elevation: var(--_menu-container-elevation),
       )
     );
 

autocomplete/lib/_outlined-autocomplete.scss

@@ -176,6 +176,7 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
       (
         container-elevation: var(--_menu-container-elevation),
         container-shape: var(--_menu-container-shape),
+        container-shadow-color: var(--_menu-container-shadow-color),
       )
     );
 
@@ -184,8 +185,7 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
         container-color: var(--_menu-container-color),
         container-surface-tint-layer-color:
           var(--_menu-container-surface-tint-layer-color),
-        container-elevation-overlay-opacity:
-          var(--_menu-container-elevation-overlay-opacity),
+        container-elevation: var(--_menu-container-elevation),
       )
     );
 

autocomplete/lib/_shared.scss

@@ -7,7 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../elevationold/lib/elevation-theme';
+@use '../../elevation/lib/elevation';
 @use '../../sass/resolvers';
 @use '../../sass/shape';
 
@@ -19,12 +19,7 @@
 }
 
 @function resolve-tokens($tokens) {
-  $tokens: elevation-theme.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'elevation'),
-    $shadow-color-token: 'menu-container-shadow-color',
-    $elevation-tokens: (menu-container-elevation)
-  );
+  $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
   $tokens: shape.resolve-theme(
     $tokens,
     map.get(resolvers.$material, shape),

list/lib/_list.scss

@@ -7,8 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../elevationold/lib/elevation-overlay';
-@use '../../elevationold/lib/elevation-theme';
+@use '../../elevation/lib/elevation';
 @use '../../sass/theme';
 @use '../../tokens' as m3-tokens;
 @use './tokens';
@@ -23,25 +22,33 @@ $_reference: (
     map.get(tokens.md-comp-list-values(), 'list-divider-height'),
   container-surface-tint-layer-color:
     map.get(m3-tokens.md-sys-color-values-light(), 'surface-tint'),
-  container-elevation-overlay-opacity: 0,
+  container-elevation: 0,
 );
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme($_reference, $tokens);
+  $tokens: _resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, list);
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: $_reference;
+  $tokens: _resolve-tokens($_reference);
   $tokens: theme.create-theme-vars($tokens, list);
 
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
 
+    @include elevation.theme(
+      (
+        level: var(--_container-elevation),
+        surface-tint-color: var(--_container-surface-tint-layer-color),
+      )
+    );
+
     color: unset;
   }
 
@@ -57,22 +64,21 @@ $_reference: (
     // can be positioned relative to the list root.
     position: relative;
 
-    @include elevation-overlay.static-styles;
     @include list-divider.theme(
       (
         list-divider-color: var(--_list-divider-color),
         list-divider-height: var(--_list-divider-height),
       )
     );
-    @include elevation-theme.theme-styles(
-      (
-        surface-tint-layer-color: var(--_container-surface-tint-layer-color),
-        overlay-opacity: var(--_container-elevation-overlay-opacity),
-      )
-    );
+  }
 
-    .md3-elevation-overlay {
-      z-index: 0;
-    }
+  md-elevation {
+    inset: 0;
+    position: absolute;
+    z-index: 0;
   }
 }
+
+@function _resolve-tokens($tokens) {
+  @return elevation.resolve-tokens($tokens, 'container-elevation');
+}

list/lib/list.ts

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../elevation/elevation.js';
+
 import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
@@ -71,7 +73,7 @@ export class List extends LitElement {
           @keydown=${this.handleKeydown}
           >
         <span><slot></slot></span>
-        <div class="md3-elevation-overlay"></div>
+        <md-elevation surface></md-elevation>
       </ul>
     `;
   }

menu/lib/_menu.scss

@@ -53,8 +53,7 @@ $_custom-property-prefix: 'menu';
         container-color: var(--_container-color),
         container-surface-tint-layer-color:
           var(--_container-surface-tint-layer-color),
-        container-elevation-overlay-opacity:
-          var(--_container-elevation-overlay-opacity),
+        container-elevation: var(--_container-elevation),
       )
     );
     @include list-item.theme(