@material/web 0.1.0-alpha.0 → 0.1.0-alpha.1

package/list/lib/_list.scss

@@ -6,36 +6,73 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@use '@material/web/elevation/lib/elevation-overlay';
+@use 'sass:map';
+@use '../../elevationold/lib/elevation-overlay';
+@use '../../elevationold/lib/elevation-theme';
+@use '../../sass/theme';
+@use '../../tokens' as m3-tokens;
+@use './tokens';
+@use './divider/list-divider';
 
-@mixin static-styles() {
-  @include elevation-overlay.static-styles();
+$_reference: (
+  container-color:
+    map.get(tokens.md-comp-list-values(), 'list-item-container-color'),
+  list-divider-color:
+    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(), 'surface-tint'),
+  container-elevation-overlay-opacity: 0,
+);
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme($_reference, $tokens);
+  $tokens: theme.create-theme-vars($tokens, list);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: $_reference;
+  $tokens: theme.create-theme-vars($tokens, list);
 
   :host {
-    @include host-root;
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    color: unset;
   }
 
   .md3-list {
-    @include root;
+    background-color: var(--_container-color);
+    display: block;
+    list-style-type: none;
+    margin: 0;
+    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;
+
+    @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;
     }
   }
 }
-
-@mixin host-root() {
-  color: unset;
-}
-
-@mixin root() {
-  display: block;
-  list-style-type: none;
-  margin: 0;
-  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;
-}

package/list/lib/_tokens.scss

@@ -72,8 +72,8 @@
     list-item-hover-state-layer-color: null,
     list-item-hover-state-layer-opacity: null,
     list-item-hover-label-text-color: null,
-    list-item-hover-leading-icon-color: null,
-    list-item-hover-trailing-icon-color: null,
+    list-item-hover-leading-icon-color: #444746,
+    list-item-hover-trailing-icon-color: #444746,
     list-divider-color: #c4c7c5,
     list-divider-height: 1px
   );

package/list/lib/avatar/_list-item-avatar.scss

@@ -6,9 +6,33 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use '../../../sass/map-ext';
+@use '../../../sass/theme';
+@use '../tokens';
+
+@mixin styles() {
+  $tokens: map-ext.pick(
+    tokens.md-comp-list-values(),
+    (
+      list-item-leading-avatar-color,
+      list-item-leading-avatar-shape,
+      list-item-leading-avatar-size
+    )
+  );
+
+  $tokens: theme.create-theme-vars($tokens, list);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-list-item__avatar {
+    border-radius: var(--_list-item-leading-avatar-shape);
     display: inline-flex;
+    height: var(--_list-item-leading-avatar-size);
     margin-inline-start: 16px;
+    width: var(--_list-item-leading-avatar-size);
   }
 }

package/list/lib/avatar/list-item-avatar-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host .md3-list-item__avatar{display:inline-flex;margin-inline-start:16px}:host .md3-list-item__avatar{border-radius:var(--md-list-list-item-leading-avatar-shape, 9999px);height:var(--md-list-list-item-leading-avatar-size, 40px);width:var(--md-list-list-item-leading-avatar-size, 40px)}/*# sourceMappingURL=list-item-avatar-styles.css.map */
+export const styles = css `:host{--_list-item-leading-avatar-color: ;--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px)}.md3-list-item__avatar{border-radius:var(--_list-item-leading-avatar-shape);display:inline-flex;height:var(--_list-item-leading-avatar-size);margin-inline-start:16px;width:var(--_list-item-leading-avatar-size)}/*# sourceMappingURL=list-item-avatar-styles.css.map */
 `;
 //# sourceMappingURL=list-item-avatar-styles.css.js.map

package/list/lib/avatar/list-item-avatar-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-avatar-styles.css.js","sourceRoot":"","sources":["list-item-avatar-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host .md3-list-item__avatar{display:inline-flex;margin-inline-start:16px}:host .md3-list-item__avatar{border-radius:var(--md-list-list-item-leading-avatar-shape, 9999px);height:var(--md-list-list-item-leading-avatar-size, 40px);width:var(--md-list-list-item-leading-avatar-size, 40px)}/*# sourceMappingURL=list-item-avatar-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-avatar-styles.css.js","sourceRoot":"","sources":["list-item-avatar-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-leading-avatar-color: ;--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px)}.md3-list-item__avatar{border-radius:var(--_list-item-leading-avatar-shape);display:inline-flex;height:var(--_list-item-leading-avatar-size);margin-inline-start:16px;width:var(--_list-item-leading-avatar-size)}/*# sourceMappingURL=list-item-avatar-styles.css.map */\n`;\n "]}

package/list/lib/avatar/list-item-avatar-styles.scss

@@ -3,18 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './list-item-avatar';
-@use './list-item-avatar-theme';
-
-:host {
-  @include list-item-avatar.static-styles();
 
-  .md3-list-item__avatar {
-    @include list-item-avatar-theme.theme-styles(
-      list-item-avatar-theme.$light-theme
-    );
-  }
-}
+@include list-item-avatar.styles;

package/list/lib/divider/_list-divider.scss

@@ -6,9 +6,41 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use '../../../sass/map-ext';
+@use '../../../sass/theme';
+@use '../tokens';
+
+$_custom-property-prefix: 'list-divider';
+
+@mixin theme($tokens) {
+  $reference: map-ext.pick(
+    tokens.md-comp-list-values(),
+    (list-divider-color, list-divider-height)
+  );
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: map-ext.pick(
+    tokens.md-comp-list-values(),
+    (list-divider-color, list-divider-height)
+  );
+
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-list__divider {
     background-clip: content-box;
+    background-color: var(--_list-divider-color);
+    height: var(--_list-divider-height);
     padding: 0;
   }
 }

package/list/lib/divider/list-divider-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host .md3-list__divider{background-clip:content-box;padding:0}:host .md3-list__divider{background-color:var(--md-list-divider-list-divider-color, #000);height:var(--md-list-divider-list-divider-height, 0)}/*# sourceMappingURL=list-divider-styles.css.map */
+export const styles = css `:host{--_list-divider-color: var(--md-list-divider-list-divider-color, #c4c7c5);--_list-divider-height: var(--md-list-divider-list-divider-height, 1px)}.md3-list__divider{background-clip:content-box;background-color:var(--_list-divider-color);height:var(--_list-divider-height);padding:0}/*# sourceMappingURL=list-divider-styles.css.map */
 `;
 //# sourceMappingURL=list-divider-styles.css.js.map

package/list/lib/divider/list-divider-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-divider-styles.css.js","sourceRoot":"","sources":["list-divider-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host .md3-list__divider{background-clip:content-box;padding:0}:host .md3-list__divider{background-color:var(--md-list-divider-list-divider-color, #000);height:var(--md-list-divider-list-divider-height, 0)}/*# sourceMappingURL=list-divider-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-divider-styles.css.js","sourceRoot":"","sources":["list-divider-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-divider-color: var(--md-list-divider-list-divider-color, #c4c7c5);--_list-divider-height: var(--md-list-divider-list-divider-height, 1px)}.md3-list__divider{background-clip:content-box;background-color:var(--_list-divider-color);height:var(--_list-divider-height);padding:0}/*# sourceMappingURL=list-divider-styles.css.map */\n`;\n "]}

package/list/lib/divider/list-divider-styles.scss

@@ -3,16 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './list-divider';
-@use './list-divider-theme';
-
-:host {
-  @include list-divider.static-styles();
 
-  .md3-list__divider {
-    @include list-divider-theme.theme-styles(list-divider-theme.$light-theme);
-  }
-}
+@include list-divider.styles;

package/list/lib/divider/list-divider.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ARIARole } from '@material/web/types/aria.js';
 import { LitElement, TemplateResult } from 'lit';
+import { ARIARole } from '../../../types/aria.js';
 /** @soyCompatible */
 export declare class ListDivider extends LitElement {
     role: ARIARole;

package/list/lib/divider/list-divider.js

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import { ariaProperty } from '@material/web/decorators/aria-property.js';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ariaProperty } from '../../../decorators/aria-property.js';
 /** @soyCompatible */
 export class ListDivider extends LitElement {
     constructor() {

package/list/lib/divider/list-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-divider.js","sourceRoot":"","sources":["list-divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2CAA2C,CAAC;AAEvE,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,qBAAqB;AACrB,MAAM,OAAO,WAAY,SAAQ,UAAU;IAA3C;;QAGE,SAAI,GAAa,WAAW,CAAC;IAS/B,CAAC;IAPC,mBAAmB;IACV,MAAM;QACb,OAAO,IAAI,CAAA;;;MAGT,CAAC;IACL,CAAC;CACF;AATC;IAFC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;yCACtC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {ARIARole} from '@material/web/types/aria.js';\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n/** @soyCompatible */\nexport class ListDivider extends LitElement {\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  role: ARIARole = 'separator';\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n       <li role=\"separator\" class=\"md3-list__divider\">\n       </li>\n     `;\n  }\n}\n"]}
+{"version":3,"file":"list-divider.js","sourceRoot":"","sources":["list-divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAGlE,qBAAqB;AACrB,MAAM,OAAO,WAAY,SAAQ,UAAU;IAA3C;;QAGE,SAAI,GAAa,WAAW,CAAC;IAS/B,CAAC;IAPC,mBAAmB;IACV,MAAM;QACb,OAAO,IAAI,CAAA;;;MAGT,CAAC;IACL,CAAC;CACF;AATC;IAFC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;yCACtC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ariaProperty} from '../../../decorators/aria-property.js';\nimport {ARIARole} from '../../../types/aria.js';\n\n/** @soyCompatible */\nexport class ListDivider extends LitElement {\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  role: ARIARole = 'separator';\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n       <li role=\"separator\" class=\"md3-list__divider\">\n       </li>\n     `;\n  }\n}\n"]}

package/list/lib/icon/_list-item-icon.scss

@@ -6,12 +6,42 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../../sass/map-ext';
+@use '../../../sass/theme';
+
+$_custom-property-prefix: 'list-item-icon';
+
+$_reference: (
+  list-item-icon-color: #000,
+  list-item-icon-size: 0,
+  list-item-icon-opacity: 1,
+);
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme($_reference, $tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: $_reference;
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-list-item__icon {
+    color: var(--_list-item-icon-color);
+    opacity: var(--_list-item-icon-opacity);
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
-    font-size: inherit;
+    font-size: var(--_list-item-icon-size);
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;

package/list/lib/icon/list-item-icon-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host .md3-list-item__icon{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;height:100%;width:100%;padding-inline-start:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}:host .md3-list-item__icon{color:var(--md-list-item-icon-list-item-icon-color, #000);font-size:var(--md-list-item-icon-list-item-icon-size, 0);opacity:var(--md-list-item-icon-list-item-icon-opacity, 1)}/*# sourceMappingURL=list-item-icon-styles.css.map */
+export const styles = css `:host{--_list-item-icon-color: var(--md-list-item-icon-list-item-icon-color, #000);--_list-item-icon-size: var(--md-list-item-icon-list-item-icon-size, 0);--_list-item-icon-opacity: var(--md-list-item-icon-list-item-icon-opacity, 1)}.md3-list-item__icon{color:var(--_list-item-icon-color);opacity:var(--_list-item-icon-opacity);font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:var(--_list-item-icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;height:100%;width:100%;padding-inline-start:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}/*# sourceMappingURL=list-item-icon-styles.css.map */
 `;
 //# sourceMappingURL=list-item-icon-styles.css.js.map

package/list/lib/icon/list-item-icon-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-icon-styles.css.js","sourceRoot":"","sources":["list-item-icon-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host .md3-list-item__icon{font-family:\"Material Icons\";font-weight:normal;font-style:normal;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;height:100%;width:100%;padding-inline-start:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}:host .md3-list-item__icon{color:var(--md-list-item-icon-list-item-icon-color, #000);font-size:var(--md-list-item-icon-list-item-icon-size, 0);opacity:var(--md-list-item-icon-list-item-icon-opacity, 1)}/*# sourceMappingURL=list-item-icon-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-icon-styles.css.js","sourceRoot":"","sources":["list-item-icon-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-icon-color: var(--md-list-item-icon-list-item-icon-color, #000);--_list-item-icon-size: var(--md-list-item-icon-list-item-icon-size, 0);--_list-item-icon-opacity: var(--md-list-item-icon-list-item-icon-opacity, 1)}.md3-list-item__icon{color:var(--_list-item-icon-color);opacity:var(--_list-item-icon-opacity);font-family:\"Material Icons\";font-weight:normal;font-style:normal;font-size:var(--_list-item-icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;height:100%;width:100%;padding-inline-start:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}/*# sourceMappingURL=list-item-icon-styles.css.map */\n`;\n "]}

package/list/lib/icon/list-item-icon-styles.scss

@@ -3,18 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './list-item-icon';
-@use './list-item-icon-theme';
-
-:host {
-  @include list-item-icon.static-styles();
 
-  .md3-list-item__icon {
-    @include list-item-icon-theme.theme-styles(
-      list-item-icon-theme.$light-theme
-    );
-  }
-}
+@include list-item-icon.styles;

package/list/lib/image/_list-item-image.scss

@@ -6,11 +6,54 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../../sass/theme';
+@use '../../../sass/map-ext';
+@use '../tokens';
+
+$_custom-property-prefix: 'list-item-image';
+
+@mixin theme($tokens) {
+  $reference: map-ext.pick(
+    tokens.md-comp-list-values(),
+    (
+      list-item-leading-image-height,
+      list-item-leading-image-width,
+      list-item-leading-image-shape
+    )
+  );
+
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: map-ext.pick(
+    tokens.md-comp-list-values(),
+    (
+      list-item-leading-image-height,
+      list-item-leading-image-width,
+      list-item-leading-image-shape
+    )
+  );
+
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-list-item__image {
     display: inline-flex;
     margin-block-end: 8px;
     margin-block-start: 8px;
     margin-inline-start: 16px;
+    height: var(--_list-item-leading-image-height);
+    width: var(--_list-item-leading-image-width);
+    border-radius: var(--_list-item-leading-image-shape);
   }
 }

package/list/lib/image/list-item-image-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host .md3-list-item__image{display:inline-flex;margin-block-end:8px;margin-block-start:8px;margin-inline-start:16px}:host .md3-list-item__image{height:var(--md-list-item-image-list-item-leading-image-height, 56px);width:var(--md-list-item-image-list-item-leading-image-width, 56px);border-radius:var(--md-list-item-image-list-item-leading-image-shape, 0)}/*# sourceMappingURL=list-item-image-styles.css.map */
+export const styles = css `:host{--_list-item-leading-image-height: var(--md-list-item-image-list-item-leading-image-height, 56px);--_list-item-leading-image-width: var(--md-list-item-image-list-item-leading-image-width, 56px);--_list-item-leading-image-shape: var(--md-list-item-image-list-item-leading-image-shape, 0)}.md3-list-item__image{display:inline-flex;margin-block-end:8px;margin-block-start:8px;margin-inline-start:16px;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape)}/*# sourceMappingURL=list-item-image-styles.css.map */
 `;
 //# sourceMappingURL=list-item-image-styles.css.js.map

package/list/lib/image/list-item-image-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-image-styles.css.js","sourceRoot":"","sources":["list-item-image-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host .md3-list-item__image{display:inline-flex;margin-block-end:8px;margin-block-start:8px;margin-inline-start:16px}:host .md3-list-item__image{height:var(--md-list-item-image-list-item-leading-image-height, 56px);width:var(--md-list-item-image-list-item-leading-image-width, 56px);border-radius:var(--md-list-item-image-list-item-leading-image-shape, 0)}/*# sourceMappingURL=list-item-image-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-image-styles.css.js","sourceRoot":"","sources":["list-item-image-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-leading-image-height: var(--md-list-item-image-list-item-leading-image-height, 56px);--_list-item-leading-image-width: var(--md-list-item-image-list-item-leading-image-width, 56px);--_list-item-leading-image-shape: var(--md-list-item-image-list-item-leading-image-shape, 0)}.md3-list-item__image{display:inline-flex;margin-block-end:8px;margin-block-start:8px;margin-inline-start:16px;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape)}/*# sourceMappingURL=list-item-image-styles.css.map */\n`;\n "]}

package/list/lib/image/list-item-image-styles.scss

@@ -3,18 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './list-item-image';
-@use './list-item-image-theme';
-
-:host {
-  @include list-item-image.static-styles();
 
-  .md3-list-item__image {
-    @include list-item-image-theme.theme-styles(
-      list-item-image-theme.$light-theme
-    );
-  }
-}
+@include list-item-image.styles;

package/list/lib/list-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}:host{color:unset}.md3-list{display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative}.md3-list .md3-elevation-overlay{z-index:0}.md3-list{--md-list-divider-list-divider-color:var(--md-list-list-divider-color, #c4c7c5);--md-list-divider-list-divider-height:var(--md-list-list-divider-height, 1px);background-color:var(--md-list-container-color, #fff)}.md3-list .md3-elevation-overlay{background-color:var(--md-list-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-list .md3-elevation-overlay{opacity:var(--md-list-container-elevation-overlay-opacity, 0)}/*# sourceMappingURL=list-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-list-container-color, #fff);--_list-divider-color: var(--md-list-list-divider-color, #c4c7c5);--_list-divider-height: var(--md-list-list-divider-height, 1px);--_container-surface-tint-layer-color: var(--md-list-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_container-elevation-overlay-opacity: var(--md-list-container-elevation-overlay-opacity, 0);color:unset}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative;--md-list-divider-list-divider-color:var(--_list-divider-color);--md-list-divider-list-divider-height:var(--_list-divider-height)}.md3-list .md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}.md3-list .md3-elevation-overlay{background-color:var(--_container-surface-tint-layer-color)}.md3-list .md3-elevation-overlay{opacity:var(--_container-elevation-overlay-opacity)}.md3-list .md3-elevation-overlay{z-index:0}/*# sourceMappingURL=list-styles.css.map */
 `;
 //# sourceMappingURL=list-styles.css.js.map

package/list/lib/list-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}:host{color:unset}.md3-list{display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative}.md3-list .md3-elevation-overlay{z-index:0}.md3-list{--md-list-divider-list-divider-color:var(--md-list-list-divider-color, #c4c7c5);--md-list-divider-list-divider-height:var(--md-list-list-divider-height, 1px);background-color:var(--md-list-container-color, #fff)}.md3-list .md3-elevation-overlay{background-color:var(--md-list-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-list .md3-elevation-overlay{opacity:var(--md-list-container-elevation-overlay-opacity, 0)}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-list-container-color, #fff);--_list-divider-color: var(--md-list-list-divider-color, #c4c7c5);--_list-divider-height: var(--md-list-list-divider-height, 1px);--_container-surface-tint-layer-color: var(--md-list-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_container-elevation-overlay-opacity: var(--md-list-container-elevation-overlay-opacity, 0);color:unset}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative;--md-list-divider-list-divider-color:var(--_list-divider-color);--md-list-divider-list-divider-height:var(--_list-divider-height)}.md3-list .md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}.md3-list .md3-elevation-overlay{background-color:var(--_container-surface-tint-layer-color)}.md3-list .md3-elevation-overlay{opacity:var(--_container-elevation-overlay-opacity)}.md3-list .md3-elevation-overlay{z-index:0}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}

package/list/lib/list-styles.scss

@@ -3,14 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use './list-theme';
 @use './list';
 
-@include list.static-styles;
-
-.md3-list {
-  @include list-theme.theme-styles(list-theme.$light-theme);
-}
+@include list.styles;

package/list/lib/list.d.ts

@@ -3,8 +3,9 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ARIARole } from '@material/web/types/aria.js';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { ARIARole } from '../../types/aria.js';
 import { ListItem } from './listitem/list-item.js';
 /** @soyCompatible */
 export declare class List extends LitElement {
@@ -12,6 +13,7 @@ export declare class List extends LitElement {
     ariaLabel: string;
     ariaActivedescendant: string;
     role: ARIARole;
+    listId: string;
     listTabIndex: number;
     items: ListItem[];
     activeListItem: ListItem | null;
@@ -21,6 +23,8 @@ export declare class List extends LitElement {
     firstUpdated(changedProperties: PropertyValues): void;
     /** @soyTemplate */
     render(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
     handleKeydown(event: KeyboardEvent): void;
     protected activateListItem(item: ListItem): void;
     protected deactivateListItem(item: ListItem): void;

package/list/lib/list.js

@@ -4,10 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import { ariaProperty } from '@material/web/decorators/aria-property.js';
 import { html, LitElement } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { ariaProperty } from '../../decorators/aria-property.js';
 const NAVIGATABLE_KEYS = {
     ArrowDown: 'ArrowDown',
     ArrowUp: 'ArrowUp',
@@ -19,6 +20,7 @@ export class List extends LitElement {
     constructor() {
         super(...arguments);
         this.role = 'list';
+        this.listId = '';
         this.listTabIndex = 0;
         this.items = [];
         this.activeListItem = null;
@@ -31,8 +33,9 @@ export class List extends LitElement {
     /** @soyTemplate */
     render() {
         return html `
-      <ul class="md3-list"
+      <ul class="md3-list ${classMap(this.getRenderClasses())}"
           aria-label="${ifDefined(this.ariaLabel)}"
+          id=${ifDefined(this.listId || undefined)}
           tabindex=${this.listTabIndex}
           role=${this.role}
           @action=${this.handleAction}
@@ -43,6 +46,10 @@ export class List extends LitElement {
       </ul>
     `;
     }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {};
+    }
     handleKeydown(event) {
         if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1)
             return;
@@ -149,6 +156,10 @@ __decorate([
     property({ type: String, attribute: 'data-role', noAccessor: true }),
     __metadata("design:type", String)
 ], List.prototype, "role", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], List.prototype, "listId", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Number)