feat(list): Add list elevation overlay and overlay color/opacity to t…

…heme API.

PiperOrigin-RevId: 468704392

list/_list-item.scss

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/listitem/list-item-theme' show
+  theme;

list/_list.scss

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/list-theme' show
+  theme;

list/lib/_list-theme.scss

@@ -4,7 +4,9 @@
 //
 
 @use 'sass:map';
+@use '@material/web/elevation/lib/elevation-theme';
 @use '@material/web/sass/theme';
+@use '@material/web/tokens' as m3-tokens;
 @use './tokens';
 @use './divider/list-divider-theme';
 
@@ -15,6 +17,9 @@ $light-theme: (
     map.get(tokens.md-comp-list-values(), 'list-divider-color'),
   list-divider-height:
     map.get(tokens.md-comp-list-values(), 'list-divider-height'),
+  container-surface-tint-layer-color:
+    map.get(m3-tokens.md-sys-color-values-light-dynamic(), 'surface-tint'),
+  container-elevation-overlay-opacity: 0,
 );
 
 @mixin theme($theme) {
@@ -28,11 +33,19 @@ $light-theme: (
   $theme: theme.validate-theme-styles($light-theme, $theme);
   $theme: theme.create-theme-vars($theme, list);
 
-  background-color: map.get($theme, 'container-color');
   @include list-divider-theme.theme(
     (
       list-divider-color: map.get($theme, 'list-divider-color'),
       list-divider-height: map.get($theme, 'list-divider-height'),
     )
   );
+  @include elevation-theme.theme-styles(
+    (
+      surface-tint-layer-color:
+        map.get($theme, 'container-surface-tint-layer-color'),
+      overlay-opacity: map.get($theme, 'container-elevation-overlay-opacity'),
+    )
+  );
+
+  background-color: map.get($theme, 'container-color');
 }

list/lib/_list.scss

@@ -6,13 +6,21 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+@use '@material/web/elevation/lib/elevation-overlay';
+
 @mixin static-styles() {
+  @include elevation-overlay.static-styles();
+
   :host {
     @include host-root;
   }
 
   .md3-list {
     @include root;
+
+    .md3-elevation-overlay {
+      z-index: 0;
+    }
   }
 }
 
@@ -27,4 +35,7 @@
   min-width: 300px;
   outline: none;
   padding: 8px 0;
+  // Add position so the elevation overlay (which is absolutely positioned)
+  // can be positioned relative to the list root.
+  position: relative;
 }

list/lib/list.ts

@@ -65,7 +65,8 @@ export class List extends LitElement {
           @action=${this.handleAction}
           @keydown=${this.handleKeydown}
           >
-        <slot></slot>
+        <span><slot></slot></span>
+        <div class="md3-elevation-overlay"></div>
       </ul>
     `;
   }