From ebb9a4b360e0690a0c41eee5d198458a14490de5 Mon Sep 17 00:00:00 2001
From: Joy Zhong <joyzhong@google.com>
Date: Fri, 19 Aug 2022 08:10:08 -0700
Subject: [PATCH] feat(list): Add list elevation overlay and overlay
 color/opacity to theme API.

PiperOrigin-RevId: 468704392
---
 list/_list-item.scss      |  7 +++++++
 list/_list.scss           |  7 +++++++
 list/lib/_list-theme.scss | 15 ++++++++++++++-
 list/lib/_list.scss       | 11 +++++++++++
 list/lib/list.ts          |  3 ++-
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 list/_list-item.scss
 create mode 100644 list/_list.scss

diff --git a/list/_list-item.scss b/list/_list-item.scss
new file mode 100644
index 0000000000..d93f0a8b2f
--- /dev/null
+++ b/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;
diff --git a/list/_list.scss b/list/_list.scss
new file mode 100644
index 0000000000..13c3a15361
--- /dev/null
+++ b/list/_list.scss
@@ -0,0 +1,7 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/list-theme' show
+  theme;
diff --git a/list/lib/_list-theme.scss b/list/lib/_list-theme.scss
index 3c741b5096..35c5893970 100644
--- a/list/lib/_list-theme.scss
+++ b/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');
 }
diff --git a/list/lib/_list.scss b/list/lib/_list.scss
index 9c03e269ac..2c019ed240 100644
--- a/list/lib/_list.scss
+++ b/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;
 }
diff --git a/list/lib/list.ts b/list/lib/list.ts
index 6522f1fbc6..939e0c90c4 100644
--- a/list/lib/list.ts
+++ b/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>
     `;
   }