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

package/list/lib/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 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, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGATABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n};\n\n/** @soyCompatible */\nexport class List extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property(\n      {type: String, attribute: 'data-aria-activedescendant', noAccessor: true})\n  ariaActivedescendant!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  role: ARIARole = 'list';\n\n  @property({type: Number}) listTabIndex: number = 0;\n\n  items: ListItem[] = [];\n  activeListItem: ListItem|null = null;\n\n  @query('.md3-list') listRoot!: HTMLElement;\n\n  @property({type: String}) listItemTagName = 'md-list-item';\n\n  @queryAssignedElements({flatten: true})\n  protected assignedElements!: HTMLElement[]|null;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.updateItems();\n  }\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <ul class=\"md3-list\"\n          aria-label=\"${ifDefined(this.ariaLabel)}\"\n          tabindex=${this.listTabIndex}\n          role=${this.role}\n          @action=${this.handleAction}\n          @keydown=${this.handleKeydown}\n          >\n        <span><slot></slot></span>\n        <div class=\"md3-elevation-overlay\"></div>\n      </ul>\n    `;\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1) return;\n\n    for (const item of this.items) {\n      if (this.isListItemActive(item)) {\n        this.activeListItem = item;\n      }\n\n      this.deactivateListItem(item);\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.ArrowDown) {\n      event.preventDefault();\n      if (this.activeListItem) {\n        this.activeListItem = this.getNextItem(this.activeListItem);\n      } else {\n        this.activeListItem = this.getFirstItem();\n      }\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.ArrowUp) {\n      event.preventDefault();\n      if (this.activeListItem) {\n        this.activeListItem = this.getPrevItem(this.activeListItem);\n      } else {\n        this.activeListItem = this.getLastItem();\n      }\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.Home) {\n      event.preventDefault();\n      this.activeListItem = this.getFirstItem();\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.End) {\n      event.preventDefault();\n      this.activeListItem = this.getLastItem();\n    }\n\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  protected activateListItem(item: ListItem) {\n    item.activate();\n  }\n\n  protected deactivateListItem(item: ListItem) {\n    item.deactivate();\n  }\n\n  protected isListItemActive(item: ListItem): boolean {\n    return item.isActive();\n  }\n\n  protected handleAction(event: CustomEvent) {}\n\n  activateFirstItem() {\n    this.activeListItem = this.getFirstItem();\n    this.activeListItem.activate();\n  }\n\n  activateLastItem() {\n    this.activeListItem = this.getLastItem();\n    this.activeListItem.activate();\n  }\n\n  resetActiveListItem() {\n    this.activeListItem = null;\n  }\n\n  focusListRoot() {\n    this.listRoot.focus();\n  }\n\n  /** Updates `this.items` based on slot elements in the DOM. */\n  protected updateItems() {\n    const elements = this.assignedElements || [];\n    this.items = elements.filter(this.isListItem, this);\n  }\n\n  /** @return Whether the given element is a list item element. */\n  private isListItem(element: Element): element is ListItem {\n    return element.tagName.toLowerCase() === this.listItemTagName;\n  }\n\n  private getFirstItem(): ListItem {\n    return this.items[0];\n  }\n\n  private getLastItem(): ListItem {\n    return this.items[this.items.length - 1];\n  }\n\n  private getPrevItem(item: ListItem): ListItem {\n    const curIndex = this.items.indexOf(item);\n    return this.items[curIndex === 0 ? this.items.length - 1 : curIndex - 1];\n  }\n\n  private getNextItem(item: ListItem): ListItem {\n    const curIndex = this.items.indexOf(item);\n    return this.items[(curIndex + 1) % this.items.length];\n  }\n}\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {ARIARole} from '../../types/aria.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGATABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n};\n\n/** @soyCompatible */\nexport class List extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property(\n      {type: String, attribute: 'data-aria-activedescendant', noAccessor: true})\n  ariaActivedescendant!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  role: ARIARole = 'list';\n\n  @property({type: String}) listId = '';\n\n  @property({type: Number}) listTabIndex: number = 0;\n\n  items: ListItem[] = [];\n  activeListItem: ListItem|null = null;\n\n  @query('.md3-list') listRoot!: HTMLElement;\n\n  @property({type: String}) listItemTagName = 'md-list-item';\n\n  @queryAssignedElements({flatten: true})\n  protected assignedElements!: HTMLElement[]|null;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.updateItems();\n  }\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <ul class=\"md3-list ${classMap(this.getRenderClasses())}\"\n          aria-label=\"${ifDefined(this.ariaLabel)}\"\n          id=${ifDefined(this.listId || undefined)}\n          tabindex=${this.listTabIndex}\n          role=${this.role}\n          @action=${this.handleAction}\n          @keydown=${this.handleKeydown}\n          >\n        <span><slot></slot></span>\n        <div class=\"md3-elevation-overlay\"></div>\n      </ul>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {};\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1) return;\n\n    for (const item of this.items) {\n      if (this.isListItemActive(item)) {\n        this.activeListItem = item;\n      }\n\n      this.deactivateListItem(item);\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.ArrowDown) {\n      event.preventDefault();\n      if (this.activeListItem) {\n        this.activeListItem = this.getNextItem(this.activeListItem);\n      } else {\n        this.activeListItem = this.getFirstItem();\n      }\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.ArrowUp) {\n      event.preventDefault();\n      if (this.activeListItem) {\n        this.activeListItem = this.getPrevItem(this.activeListItem);\n      } else {\n        this.activeListItem = this.getLastItem();\n      }\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.Home) {\n      event.preventDefault();\n      this.activeListItem = this.getFirstItem();\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.End) {\n      event.preventDefault();\n      this.activeListItem = this.getLastItem();\n    }\n\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  protected activateListItem(item: ListItem) {\n    item.activate();\n  }\n\n  protected deactivateListItem(item: ListItem) {\n    item.deactivate();\n  }\n\n  protected isListItemActive(item: ListItem): boolean {\n    return item.isActive();\n  }\n\n  protected handleAction(event: CustomEvent) {}\n\n  activateFirstItem() {\n    this.activeListItem = this.getFirstItem();\n    this.activeListItem.activate();\n  }\n\n  activateLastItem() {\n    this.activeListItem = this.getLastItem();\n    this.activeListItem.activate();\n  }\n\n  resetActiveListItem() {\n    this.activeListItem = null;\n  }\n\n  focusListRoot() {\n    this.listRoot.focus();\n  }\n\n  /** Updates `this.items` based on slot elements in the DOM. */\n  protected updateItems() {\n    const elements = this.assignedElements || [];\n    this.items = elements.filter(this.isListItem, this);\n  }\n\n  /** @return Whether the given element is a list item element. */\n  private isListItem(element: Element): element is ListItem {\n    return element.tagName.toLowerCase() === this.listItemTagName;\n  }\n\n  private getFirstItem(): ListItem {\n    return this.items[0];\n  }\n\n  private getLastItem(): ListItem {\n    return this.items[this.items.length - 1];\n  }\n\n  private getPrevItem(item: ListItem): ListItem {\n    const curIndex = this.items.indexOf(item);\n    return this.items[curIndex === 0 ? this.items.length - 1 : curIndex - 1];\n  }\n\n  private getNextItem(item: ListItem): ListItem {\n    const curIndex = this.items.indexOf(item);\n    return this.items[(curIndex + 1) % this.items.length];\n  }\n}\n"]}

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

@@ -6,66 +6,120 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@use '@material/web/focus/lib/focus-ring-theme';
+@use 'sass:map';
+@use '../../../focus/focus-ring';
+@use '../../../sass/theme';
+@use '../icon/list-item-icon';
+@use '../image/list-item-image';
+@use '../video/list-item-video';
+@use '../tokens' as list-tokens;
+@use '../../../tokens';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(list-tokens.md-comp-list-values(), $tokens);
+  $tokens: theme.create-theme-vars($tokens, list);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: list-tokens.md-comp-list-values();
+  $tokens: theme.create-theme-vars($tokens, list);
 
-@mixin static-styles() {
   :host {
-    @include host-root;
-    @include focus-ring-theme.theme(
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    color: unset;
+
+    @include list-item-image.theme(
+      (
+        list-item-leading-image-height: var(--_list-item-leading-image-height),
+        list-item-leading-image-width: var(--_list-item-leading-image-width),
+        list-item-leading-image-shape: var(--_list-item-leading-image-shape),
+      )
+    );
+    @include list-item-video.theme(
+      (
+        list-item-leading-video-height: var(--_list-item-leading-video-height),
+        list-item-leading-video-width: var(--_list-item-leading-video-width),
+        list-item-leading-video-shape: var(--_list-item-leading-video-shape),
+      )
+    );
+    @include focus-ring.theme(
       (
-        container-outer-padding-vertical: -2px,
-        container-outer-padding-horizontal: -4px,
+        offset-vertical: -2px,
+        offset-horizontal: -3px,
+        shape: map.get(tokens.md-sys-shape-values(), corner-extra-small),
       )
     );
   }
 
   .md3-list-item {
-    @include item-root;
-  }
-
-  .md3-list-item--with-leading-thumbnail {
-    @include thumbnail-item-root;
-  }
-
-  .md3-list-item--with-leading-image {
-    @include image-item-root;
-  }
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    outline: none;
+    position: relative;
+    width: 100%;
+    background-color: var(--_list-item-container-color);
+    border-radius: var(--_list-item-container-shape);
 
-  .md3-list-item--with-leading-video {
-    @include video-item-root;
+    &.md3-list-item--enabled {
+      cursor: pointer;
+    }
   }
 
-  .md3-list-item__ripple {
-    display: inline-flex;
-    inset: 0;
-    position: absolute;
-    z-index: 0;
+  .md3-list-item--with-one-line {
+    min-height: var(--_list-item-one-line-container-height);
   }
 
-  .md3-list-item__focus-ring {
-    z-index: 1;
+  .md3-list-item--with-two-line {
+    min-height: var(--_list-item-two-line-container-height);
   }
-}
-
-@mixin host-root() {
-  color: unset;
-}
 
-@mixin item-root() {
-  align-items: center;
-  box-sizing: border-box;
-  display: flex;
-  outline: none;
-  position: relative;
-  width: 100%;
-
-  &.md3-list-item--enabled {
-    cursor: pointer;
+  .md3-list-item--with-three-line {
+    min-height: var(--_list-item-three-line-container-height);
   }
 
   .md3-list-item__start {
     flex: 0 0 auto;
     z-index: 1;
+
+    @include list-item-icon.theme(
+      (
+        list-item-icon-color: var(--_list-item-leading-icon-color),
+        list-item-icon-size: var(--_list-item-leading-icon-size),
+      )
+    );
+
+    :hover & {
+      @include list-item-icon.theme(
+        (
+          list-item-icon-color: var(--_list-item-hover-leading-icon-color),
+        )
+      );
+    }
+
+    .md3-list-item--disabled & {
+      @include list-item-icon.theme(
+        (
+          list-item-icon-color: var(--_list-item-disabled-leading-icon-color),
+          list-item-icon-opacity:
+            var(--_list-item-disabled-leading-icon-opacity),
+        )
+      );
+    }
+
+    .md3-list-item--with-leading-thumbnail &,
+    .md3-list-item--with-leading-image & {
+      padding-inline-start: 16px;
+    }
+
+    .md3-list-item--with-leading-video & {
+      padding-inline-start: 0;
+    }
   }
 
   .md3-list-item__body {
@@ -80,10 +134,46 @@
     flex: 0 0 auto;
     padding-inline-end: 24px;
     z-index: 1;
+
+    @include list-item-icon.theme(
+      (
+        list-item-icon-color: var(--_list-item-trailing-icon-color),
+        list-item-icon-size: var(--_list-item-trailing-icon-size),
+      )
+    );
+
+    :hover & {
+      @include list-item-icon.theme(
+        (
+          list-item-icon-color: var(--_list-item-hover-trailing-icon-color),
+        )
+      );
+    }
+
+    .md3-list-item--disabled & {
+      @include list-item-icon.theme(
+        (
+          list-item-icon-color: var(--_list-item-disabled-trailing-icon-color),
+          list-item-icon-opacity:
+            var(--_list-item-disabled-trailing-icon-opacity),
+        )
+      );
+    }
   }
 
   .md3-list-item__label-text {
     display: flex;
+    color: var(--_list-item-label-text-color);
+    font-family: var(--_list-item-label-text-font);
+    font-size: var(--_list-item-label-text-size);
+    letter-spacing: var(--_list-item-label-text-tracking);
+    font-weight: var(--_list-item-label-text-weight);
+    line-height: var(--_list-item-label-text-line-height);
+
+    .md3-list-item--disabled & {
+      color: var(--_list-item-disabled-label-text-color);
+      opacity: var(--_list-item-disabled-label-text-opacity);
+    }
   }
 
   .md3-list-item__supporting-text {
@@ -93,6 +183,17 @@
     white-space: nowrap;
     overflow: hidden;
     width: 100%;
+    color: var(--_list-item-supporting-text-color);
+    font-family: var(--_list-item-supporting-text-font);
+    font-size: var(--_list-item-supporting-text-size);
+    letter-spacing: var(--_list-item-supporting-text-tracking);
+    font-weight: var(--_list-item-supporting-text-weight);
+    line-height: var(--_list-item-supporting-text-line-height);
+
+    .md3-list-item--disabled & {
+      color: var(--_list-item-disabled-supporting-text-color);
+      opacity: var(--_list-item-disabled-supporting-text-opacity);
+    }
   }
 
   .md3-list-item__supporting-text--multi-line {
@@ -105,29 +206,25 @@
 
   .md3-list-item__trailing-supporting-text {
     padding-inline-start: 16px;
-  }
-}
+    font-family: var(--_list-item-trailing-supporting-text-font);
+    font-size: var(--_list-item-trailing-supporting-text-size);
+    letter-spacing: var(--_list-item-trailing-supporting-text-tracking);
+    font-weight: var(--_list-item-trailing-supporting-text-weight);
+    line-height: var(--_list-item-trailing-supporting-text-line-height);
 
-@mixin icon-item-root() {
-  .md3-list-item__start {
-    padding-inline-start: 16px;
+    .md3-list-item:not(.md3-list-item--disabled) & {
+      color: var(--_list-item-trailing-supporting-text-color);
+    }
   }
-}
 
-@mixin thumbnail-item-root() {
-  .md3-list-item__start {
-    padding-inline-start: 16px;
-  }
-}
-
-@mixin image-item-root() {
-  .md3-list-item__start {
-    padding-inline-start: 16px;
+  .md3-list-item__ripple {
+    display: inline-flex;
+    inset: 0;
+    position: absolute;
+    z-index: 0;
   }
-}
 
-@mixin video-item-root() {
-  .md3-list-item__start {
-    padding-inline-start: 0;
+  .md3-list-item__focus-ring {
+    z-index: 1;
   }
 }

package/list/lib/listitem/harness.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../../../testing/harness.js';
 import { ListItem } from './list-item.js';
 /**
  * Test harness for list item.

package/list/lib/listitem/harness.js

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../../../testing/harness.js';
 /**
  * Test harness for list item.
  */

package/list/lib/listitem/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAIzD;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,OAAiB;IAC3C,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAgB,CAAC;IACpE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '@material/web/testing/harness.js';\n\nimport {ListItem} from './list-item.js';\n\n/**\n * Test harness for list item.\n */\nexport class ListItemHarness extends Harness<ListItem> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('li') as HTMLElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAIpD;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,OAAiB;IAC3C,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAgB,CAAC;IACpE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../../../testing/harness.js';\n\nimport {ListItem} from './list-item.js';\n\n/**\n * Test harness for list item.\n */\nexport class ListItemHarness extends Harness<ListItem> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('li') as HTMLElement;\n  }\n}\n"]}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{color:unset;--md-focus-ring-container-outer-padding-vertical:-2px;--md-focus-ring-container-outer-padding-horizontal:-4px}.md3-list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%}.md3-list-item.md3-list-item--enabled{cursor:pointer}.md3-list-item .md3-list-item__start{flex:0 0 auto;z-index:1}.md3-list-item .md3-list-item__body{box-sizing:border-box;flex:1 0 0;padding-inline-start:16px;width:100%;z-index:1}.md3-list-item .md3-list-item__end{flex:0 0 auto;padding-inline-end:24px;z-index:1}.md3-list-item .md3-list-item__label-text{display:flex}.md3-list-item .md3-list-item__supporting-text{display:block;padding-block-start:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}.md3-list-item .md3-list-item__supporting-text--multi-line{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;white-space:normal}.md3-list-item .md3-list-item__trailing-supporting-text{padding-inline-start:16px}.md3-list-item--with-leading-thumbnail .md3-list-item__start{padding-inline-start:16px}.md3-list-item--with-leading-image .md3-list-item__start{padding-inline-start:16px}.md3-list-item--with-leading-video .md3-list-item__start{padding-inline-start:0}.md3-list-item__ripple{display:inline-flex;inset:0;position:absolute;z-index:0}.md3-list-item__focus-ring{z-index:1}.md3-list-item{--md-list-item-image-list-item-leading-image-height:var(--md-list-list-item-leading-image-height, 56px);--md-list-item-image-list-item-leading-image-width:var(--md-list-list-item-leading-image-width, 56px);--md-list-item-image-list-item-leading-image-shape:var(--md-list-list-item-leading-image-shape, 0);--md-list-item-video-list-item-leading-video-height:var(--md-list-list-item-leading-video-height, 64px);--md-list-item-video-list-item-leading-video-width:var(--md-list-list-item-leading-video-width, 114px);--md-list-item-video-list-item-leading-video-shape:var(--md-list-list-item-leading-video-shape, 0px)}.md3-list-item:not(.md3-list-item--disabled){background-color:var(--md-list-list-item-container-color, #fff)}.md3-list-item .md3-list-item__label-text{font-family:var(--md-list-list-item-label-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-label-text-size, 16px);letter-spacing:var(--md-list-list-item-label-text-tracking, 0.03125rem);font-weight:var(--md-list-list-item-label-text-weight, 400)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__label-text{color:var(--md-list-list-item-label-text-color, #1f1f1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__label-text{color:var(--md-list-list-item-disabled-label-text-color, #1c1b1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__label-text{opacity:var(--md-list-list-item-disabled-label-text-opacity, 0.38)}.md3-list-item .md3-list-item__supporting-text{font-family:var(--md-list-list-item-supporting-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-supporting-text-size, 14px);letter-spacing:var(--md-list-list-item-supporting-text-tracking, 0.015625rem);font-weight:var(--md-list-list-item-supporting-text-weight, 300);line-height:var(--md-list-list-item-supporting-text-line-height, 20px)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__supporting-text{color:var(--md-list-list-item-supporting-text-color, #444746)}.md3-list-item.md3-list-item--disabled .md3-list-item__supporting-text{color:var(--md-list-list-item-disabled-supporting-text-color, #1c1b1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__supporting-text{opacity:var(--md-list-list-item-disabled-supporting-text-opacity, 0.38)}.md3-list-item .md3-list-item__trailing-supporting-text{font-family:var(--md-list-list-item-trailing-supporting-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-trailing-supporting-text-size, 12px);letter-spacing:var(--md-list-list-item-trailing-supporting-text-tracking, 0.015625rem);font-weight:var(--md-list-list-item-trailing-supporting-text-weight, 300)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__trailing-supporting-text{color:var(--md-list-list-item-trailing-supporting-text-color, #646766)}.md3-list-item.md3-list-item--with-one-line{min-height:var(--md-list-list-item-one-line-container-height, 56px)}.md3-list-item.md3-list-item--with-two-line{min-height:var(--md-list-list-item-two-line-container-height, 72px)}.md3-list-item.md3-list-item--with-three-line{min-height:var(--md-list-list-item-three-line-container-height, 88px)}.md3-list-item .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-leading-icon-color, #444746);--md-list-item-icon-list-item-icon-size:var(--md-list-list-item-leading-icon-size, 24px)}.md3-list-item .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-trailing-icon-color, #444746);--md-list-item-icon-list-item-icon-size:var(--md-list-list-item-trailing-icon-size, 24px)}.md3-list-item.md3-list-item--disabled .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-disabled-leading-icon-color, #1c1b1f);--md-list-item-icon-list-item-icon-opacity:var(--md-list-list-item-disabled-leading-icon-opacity, 0.38)}.md3-list-item.md3-list-item--disabled .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-disabled-trailing-icon-color, #1c1b1f);--md-list-item-icon-list-item-icon-opacity:var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38)}/*# sourceMappingURL=list-item-styles.css.map */
+export const styles = css `:host{--_list-item-one-line-container-height: var(--md-list-list-item-one-line-container-height, 56px);--_list-item-two-line-container-height: var(--md-list-list-item-two-line-container-height, 72px);--_list-item-three-line-container-height: var(--md-list-list-item-three-line-container-height, 88px);--_list-item-container-color: var(--md-list-list-item-container-color, #fff);--_list-item-label-text-font: var(--md-list-list-item-label-text-font, Roboto, sans-serif);--_list-item-label-text-size: var(--md-list-list-item-label-text-size, 16px);--_list-item-label-text-tracking: var(--md-list-list-item-label-text-tracking, 0.03125rem);--_list-item-label-text-weight: var(--md-list-list-item-label-text-weight, 400);--_list-item-label-text-color: var(--md-list-list-item-label-text-color, #1f1f1f);--_list-item-supporting-text-font: var(--md-list-list-item-supporting-text-font, Roboto, sans-serif);--_list-item-supporting-text-size: var(--md-list-list-item-supporting-text-size, 14px);--_list-item-supporting-text-tracking: var(--md-list-list-item-supporting-text-tracking, 0.015625rem);--_list-item-supporting-text-weight: var(--md-list-list-item-supporting-text-weight, 300);--_list-item-supporting-text-color: var(--md-list-list-item-supporting-text-color, #444746);--_list-item-trailing-supporting-text-font: var(--md-list-list-item-trailing-supporting-text-font, Roboto, sans-serif);--_list-item-trailing-supporting-text-size: var(--md-list-list-item-trailing-supporting-text-size, 12px);--_list-item-trailing-supporting-text-tracking: var(--md-list-list-item-trailing-supporting-text-tracking, 0.015625rem);--_list-item-trailing-supporting-text-weight: var(--md-list-list-item-trailing-supporting-text-weight, 300);--_list-item-trailing-supporting-text-color: var(--md-list-list-item-trailing-supporting-text-color, #646766);--_list-item-leading-icon-color: var(--md-list-list-item-leading-icon-color, #444746);--_list-item-container-shape: ;--_list-item-label-text-line-height: ;--_list-item-supporting-text-line-height: var(--md-list-list-item-supporting-text-line-height, 20px);--_list-item-overline-color: ;--_list-item-overline-font: ;--_list-item-overline-line-height: ;--_list-item-overline-size: ;--_list-item-overline-tracking: ;--_list-item-overline-weight: ;--_list-item-leading-icon-size: var(--md-list-list-item-leading-icon-size, 24px);--_list-item-leading-video-shape: var(--md-list-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-list-item-leading-video-width, 114px);--_list-item-leading-video-height: var(--md-list-list-item-leading-video-height, 64px);--_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);--_list-item-leading-avatar-label-color: ;--_list-item-leading-avatar-label-font: ;--_list-item-leading-avatar-label-line-height: ;--_list-item-leading-avatar-label-size: ;--_list-item-leading-avatar-label-tracking: ;--_list-item-leading-avatar-label-weight: ;--_list-item-leading-image-width: var(--md-list-list-item-leading-image-width, 56px);--_list-item-leading-image-height: var(--md-list-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-list-item-leading-image-shape, 0);--_list-item-trailing-supporting-text-line-height: ;--_list-item-trailing-icon-color: var(--md-list-list-item-trailing-icon-color, #444746);--_list-item-trailing-icon-size: var(--md-list-list-item-trailing-icon-size, 24px);--_list-item-selected-trailing-icon-color: ;--_list-item-unselected-trailing-icon-color: ;--_list-item-disabled-label-text-color: var(--md-list-list-item-disabled-label-text-color, #1c1b1f);--_list-item-disabled-label-text-opacity: var(--md-list-list-item-disabled-label-text-opacity, 0.38);--_list-item-disabled-supporting-text-color: var(--md-list-list-item-disabled-supporting-text-color, #1c1b1f);--_list-item-disabled-supporting-text-opacity: var(--md-list-list-item-disabled-supporting-text-opacity, 0.38);--_list-item-disabled-state-layer-color: ;--_list-item-disabled-state-layer-opacity: ;--_list-item-disabled-leading-icon-color: var(--md-list-list-item-disabled-leading-icon-color, #1c1b1f);--_list-item-disabled-leading-icon-opacity: var(--md-list-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-list-item-disabled-trailing-icon-color, #1c1b1f);--_list-item-disabled-trailing-icon-opacity: var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-hover-state-layer-color: ;--_list-item-hover-state-layer-opacity: ;--_list-item-hover-label-text-color: ;--_list-item-hover-leading-icon-color: var(--md-list-list-item-hover-leading-icon-color, #444746);--_list-item-hover-trailing-icon-color: var(--md-list-list-item-hover-trailing-icon-color, #444746);--_list-divider-color: var(--md-list-list-divider-color, #c4c7c5);--_list-divider-height: var(--md-list-list-divider-height, 1px);color:unset;--md-list-item-image-list-item-leading-image-height:var(--_list-item-leading-image-height);--md-list-item-image-list-item-leading-image-width:var(--_list-item-leading-image-width);--md-list-item-image-list-item-leading-image-shape:var(--_list-item-leading-image-shape);--md-list-item-video-list-item-leading-video-height:var(--_list-item-leading-video-height);--md-list-item-video-list-item-leading-video-width:var(--_list-item-leading-video-width);--md-list-item-video-list-item-leading-video-shape:var(--_list-item-leading-video-shape);--md-focus-ring-shape-start-start:4px;--md-focus-ring-shape-start-end:4px;--md-focus-ring-shape-end-end:4px;--md-focus-ring-shape-end-start:4px;--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-3px}.md3-list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape)}.md3-list-item.md3-list-item--enabled{cursor:pointer}.md3-list-item--with-one-line{min-height:var(--_list-item-one-line-container-height)}.md3-list-item--with-two-line{min-height:var(--_list-item-two-line-container-height)}.md3-list-item--with-three-line{min-height:var(--_list-item-three-line-container-height)}.md3-list-item__start{flex:0 0 auto;z-index:1;--md-list-item-icon-list-item-icon-color:var(--_list-item-leading-icon-color);--md-list-item-icon-list-item-icon-size:var(--_list-item-leading-icon-size)}:hover .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--_list-item-hover-leading-icon-color)}.md3-list-item--disabled .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--_list-item-disabled-leading-icon-color);--md-list-item-icon-list-item-icon-opacity:var(--_list-item-disabled-leading-icon-opacity)}.md3-list-item--with-leading-thumbnail .md3-list-item__start,.md3-list-item--with-leading-image .md3-list-item__start{padding-inline-start:16px}.md3-list-item--with-leading-video .md3-list-item__start{padding-inline-start:0}.md3-list-item__body{box-sizing:border-box;flex:1 0 0;padding-inline-start:16px;width:100%;z-index:1}.md3-list-item__end{flex:0 0 auto;padding-inline-end:24px;z-index:1;--md-list-item-icon-list-item-icon-color:var(--_list-item-trailing-icon-color);--md-list-item-icon-list-item-icon-size:var(--_list-item-trailing-icon-size)}:hover .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--_list-item-hover-trailing-icon-color)}.md3-list-item--disabled .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--_list-item-disabled-trailing-icon-color);--md-list-item-icon-list-item-icon-opacity:var(--_list-item-disabled-trailing-icon-opacity)}.md3-list-item__label-text{display:flex;color:var(--_list-item-label-text-color);font-family:var(--_list-item-label-text-font);font-size:var(--_list-item-label-text-size);letter-spacing:var(--_list-item-label-text-tracking);font-weight:var(--_list-item-label-text-weight);line-height:var(--_list-item-label-text-line-height)}.md3-list-item--disabled .md3-list-item__label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.md3-list-item__supporting-text{display:block;padding-block-start:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font-family:var(--_list-item-supporting-text-font);font-size:var(--_list-item-supporting-text-size);letter-spacing:var(--_list-item-supporting-text-tracking);font-weight:var(--_list-item-supporting-text-weight);line-height:var(--_list-item-supporting-text-line-height)}.md3-list-item--disabled .md3-list-item__supporting-text{color:var(--_list-item-disabled-supporting-text-color);opacity:var(--_list-item-disabled-supporting-text-opacity)}.md3-list-item__supporting-text--multi-line{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;white-space:normal}.md3-list-item__trailing-supporting-text{padding-inline-start:16px;font-family:var(--_list-item-trailing-supporting-text-font);font-size:var(--_list-item-trailing-supporting-text-size);letter-spacing:var(--_list-item-trailing-supporting-text-tracking);font-weight:var(--_list-item-trailing-supporting-text-weight);line-height:var(--_list-item-trailing-supporting-text-line-height)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.md3-list-item__ripple{display:inline-flex;inset:0;position:absolute;z-index:0}.md3-list-item__focus-ring{z-index:1}/*# sourceMappingURL=list-item-styles.css.map */
 `;
 //# sourceMappingURL=list-item-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"list-item-styles.css.js","sourceRoot":"","sources":["list-item-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{color:unset;--md-focus-ring-container-outer-padding-vertical:-2px;--md-focus-ring-container-outer-padding-horizontal:-4px}.md3-list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%}.md3-list-item.md3-list-item--enabled{cursor:pointer}.md3-list-item .md3-list-item__start{flex:0 0 auto;z-index:1}.md3-list-item .md3-list-item__body{box-sizing:border-box;flex:1 0 0;padding-inline-start:16px;width:100%;z-index:1}.md3-list-item .md3-list-item__end{flex:0 0 auto;padding-inline-end:24px;z-index:1}.md3-list-item .md3-list-item__label-text{display:flex}.md3-list-item .md3-list-item__supporting-text{display:block;padding-block-start:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}.md3-list-item .md3-list-item__supporting-text--multi-line{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;white-space:normal}.md3-list-item .md3-list-item__trailing-supporting-text{padding-inline-start:16px}.md3-list-item--with-leading-thumbnail .md3-list-item__start{padding-inline-start:16px}.md3-list-item--with-leading-image .md3-list-item__start{padding-inline-start:16px}.md3-list-item--with-leading-video .md3-list-item__start{padding-inline-start:0}.md3-list-item__ripple{display:inline-flex;inset:0;position:absolute;z-index:0}.md3-list-item__focus-ring{z-index:1}.md3-list-item{--md-list-item-image-list-item-leading-image-height:var(--md-list-list-item-leading-image-height, 56px);--md-list-item-image-list-item-leading-image-width:var(--md-list-list-item-leading-image-width, 56px);--md-list-item-image-list-item-leading-image-shape:var(--md-list-list-item-leading-image-shape, 0);--md-list-item-video-list-item-leading-video-height:var(--md-list-list-item-leading-video-height, 64px);--md-list-item-video-list-item-leading-video-width:var(--md-list-list-item-leading-video-width, 114px);--md-list-item-video-list-item-leading-video-shape:var(--md-list-list-item-leading-video-shape, 0px)}.md3-list-item:not(.md3-list-item--disabled){background-color:var(--md-list-list-item-container-color, #fff)}.md3-list-item .md3-list-item__label-text{font-family:var(--md-list-list-item-label-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-label-text-size, 16px);letter-spacing:var(--md-list-list-item-label-text-tracking, 0.03125rem);font-weight:var(--md-list-list-item-label-text-weight, 400)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__label-text{color:var(--md-list-list-item-label-text-color, #1f1f1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__label-text{color:var(--md-list-list-item-disabled-label-text-color, #1c1b1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__label-text{opacity:var(--md-list-list-item-disabled-label-text-opacity, 0.38)}.md3-list-item .md3-list-item__supporting-text{font-family:var(--md-list-list-item-supporting-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-supporting-text-size, 14px);letter-spacing:var(--md-list-list-item-supporting-text-tracking, 0.015625rem);font-weight:var(--md-list-list-item-supporting-text-weight, 300);line-height:var(--md-list-list-item-supporting-text-line-height, 20px)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__supporting-text{color:var(--md-list-list-item-supporting-text-color, #444746)}.md3-list-item.md3-list-item--disabled .md3-list-item__supporting-text{color:var(--md-list-list-item-disabled-supporting-text-color, #1c1b1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__supporting-text{opacity:var(--md-list-list-item-disabled-supporting-text-opacity, 0.38)}.md3-list-item .md3-list-item__trailing-supporting-text{font-family:var(--md-list-list-item-trailing-supporting-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-trailing-supporting-text-size, 12px);letter-spacing:var(--md-list-list-item-trailing-supporting-text-tracking, 0.015625rem);font-weight:var(--md-list-list-item-trailing-supporting-text-weight, 300)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__trailing-supporting-text{color:var(--md-list-list-item-trailing-supporting-text-color, #646766)}.md3-list-item.md3-list-item--with-one-line{min-height:var(--md-list-list-item-one-line-container-height, 56px)}.md3-list-item.md3-list-item--with-two-line{min-height:var(--md-list-list-item-two-line-container-height, 72px)}.md3-list-item.md3-list-item--with-three-line{min-height:var(--md-list-list-item-three-line-container-height, 88px)}.md3-list-item .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-leading-icon-color, #444746);--md-list-item-icon-list-item-icon-size:var(--md-list-list-item-leading-icon-size, 24px)}.md3-list-item .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-trailing-icon-color, #444746);--md-list-item-icon-list-item-icon-size:var(--md-list-list-item-trailing-icon-size, 24px)}.md3-list-item.md3-list-item--disabled .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-disabled-leading-icon-color, #1c1b1f);--md-list-item-icon-list-item-icon-opacity:var(--md-list-list-item-disabled-leading-icon-opacity, 0.38)}.md3-list-item.md3-list-item--disabled .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-disabled-trailing-icon-color, #1c1b1f);--md-list-item-icon-list-item-icon-opacity:var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38)}/*# sourceMappingURL=list-item-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-styles.css.js","sourceRoot":"","sources":["list-item-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-one-line-container-height: var(--md-list-list-item-one-line-container-height, 56px);--_list-item-two-line-container-height: var(--md-list-list-item-two-line-container-height, 72px);--_list-item-three-line-container-height: var(--md-list-list-item-three-line-container-height, 88px);--_list-item-container-color: var(--md-list-list-item-container-color, #fff);--_list-item-label-text-font: var(--md-list-list-item-label-text-font, Roboto, sans-serif);--_list-item-label-text-size: var(--md-list-list-item-label-text-size, 16px);--_list-item-label-text-tracking: var(--md-list-list-item-label-text-tracking, 0.03125rem);--_list-item-label-text-weight: var(--md-list-list-item-label-text-weight, 400);--_list-item-label-text-color: var(--md-list-list-item-label-text-color, #1f1f1f);--_list-item-supporting-text-font: var(--md-list-list-item-supporting-text-font, Roboto, sans-serif);--_list-item-supporting-text-size: var(--md-list-list-item-supporting-text-size, 14px);--_list-item-supporting-text-tracking: var(--md-list-list-item-supporting-text-tracking, 0.015625rem);--_list-item-supporting-text-weight: var(--md-list-list-item-supporting-text-weight, 300);--_list-item-supporting-text-color: var(--md-list-list-item-supporting-text-color, #444746);--_list-item-trailing-supporting-text-font: var(--md-list-list-item-trailing-supporting-text-font, Roboto, sans-serif);--_list-item-trailing-supporting-text-size: var(--md-list-list-item-trailing-supporting-text-size, 12px);--_list-item-trailing-supporting-text-tracking: var(--md-list-list-item-trailing-supporting-text-tracking, 0.015625rem);--_list-item-trailing-supporting-text-weight: var(--md-list-list-item-trailing-supporting-text-weight, 300);--_list-item-trailing-supporting-text-color: var(--md-list-list-item-trailing-supporting-text-color, #646766);--_list-item-leading-icon-color: var(--md-list-list-item-leading-icon-color, #444746);--_list-item-container-shape: ;--_list-item-label-text-line-height: ;--_list-item-supporting-text-line-height: var(--md-list-list-item-supporting-text-line-height, 20px);--_list-item-overline-color: ;--_list-item-overline-font: ;--_list-item-overline-line-height: ;--_list-item-overline-size: ;--_list-item-overline-tracking: ;--_list-item-overline-weight: ;--_list-item-leading-icon-size: var(--md-list-list-item-leading-icon-size, 24px);--_list-item-leading-video-shape: var(--md-list-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-list-item-leading-video-width, 114px);--_list-item-leading-video-height: var(--md-list-list-item-leading-video-height, 64px);--_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);--_list-item-leading-avatar-label-color: ;--_list-item-leading-avatar-label-font: ;--_list-item-leading-avatar-label-line-height: ;--_list-item-leading-avatar-label-size: ;--_list-item-leading-avatar-label-tracking: ;--_list-item-leading-avatar-label-weight: ;--_list-item-leading-image-width: var(--md-list-list-item-leading-image-width, 56px);--_list-item-leading-image-height: var(--md-list-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-list-item-leading-image-shape, 0);--_list-item-trailing-supporting-text-line-height: ;--_list-item-trailing-icon-color: var(--md-list-list-item-trailing-icon-color, #444746);--_list-item-trailing-icon-size: var(--md-list-list-item-trailing-icon-size, 24px);--_list-item-selected-trailing-icon-color: ;--_list-item-unselected-trailing-icon-color: ;--_list-item-disabled-label-text-color: var(--md-list-list-item-disabled-label-text-color, #1c1b1f);--_list-item-disabled-label-text-opacity: var(--md-list-list-item-disabled-label-text-opacity, 0.38);--_list-item-disabled-supporting-text-color: var(--md-list-list-item-disabled-supporting-text-color, #1c1b1f);--_list-item-disabled-supporting-text-opacity: var(--md-list-list-item-disabled-supporting-text-opacity, 0.38);--_list-item-disabled-state-layer-color: ;--_list-item-disabled-state-layer-opacity: ;--_list-item-disabled-leading-icon-color: var(--md-list-list-item-disabled-leading-icon-color, #1c1b1f);--_list-item-disabled-leading-icon-opacity: var(--md-list-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-list-item-disabled-trailing-icon-color, #1c1b1f);--_list-item-disabled-trailing-icon-opacity: var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-hover-state-layer-color: ;--_list-item-hover-state-layer-opacity: ;--_list-item-hover-label-text-color: ;--_list-item-hover-leading-icon-color: var(--md-list-list-item-hover-leading-icon-color, #444746);--_list-item-hover-trailing-icon-color: var(--md-list-list-item-hover-trailing-icon-color, #444746);--_list-divider-color: var(--md-list-list-divider-color, #c4c7c5);--_list-divider-height: var(--md-list-list-divider-height, 1px);color:unset;--md-list-item-image-list-item-leading-image-height:var(--_list-item-leading-image-height);--md-list-item-image-list-item-leading-image-width:var(--_list-item-leading-image-width);--md-list-item-image-list-item-leading-image-shape:var(--_list-item-leading-image-shape);--md-list-item-video-list-item-leading-video-height:var(--_list-item-leading-video-height);--md-list-item-video-list-item-leading-video-width:var(--_list-item-leading-video-width);--md-list-item-video-list-item-leading-video-shape:var(--_list-item-leading-video-shape);--md-focus-ring-shape-start-start:4px;--md-focus-ring-shape-start-end:4px;--md-focus-ring-shape-end-end:4px;--md-focus-ring-shape-end-start:4px;--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-3px}.md3-list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape)}.md3-list-item.md3-list-item--enabled{cursor:pointer}.md3-list-item--with-one-line{min-height:var(--_list-item-one-line-container-height)}.md3-list-item--with-two-line{min-height:var(--_list-item-two-line-container-height)}.md3-list-item--with-three-line{min-height:var(--_list-item-three-line-container-height)}.md3-list-item__start{flex:0 0 auto;z-index:1;--md-list-item-icon-list-item-icon-color:var(--_list-item-leading-icon-color);--md-list-item-icon-list-item-icon-size:var(--_list-item-leading-icon-size)}:hover .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--_list-item-hover-leading-icon-color)}.md3-list-item--disabled .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--_list-item-disabled-leading-icon-color);--md-list-item-icon-list-item-icon-opacity:var(--_list-item-disabled-leading-icon-opacity)}.md3-list-item--with-leading-thumbnail .md3-list-item__start,.md3-list-item--with-leading-image .md3-list-item__start{padding-inline-start:16px}.md3-list-item--with-leading-video .md3-list-item__start{padding-inline-start:0}.md3-list-item__body{box-sizing:border-box;flex:1 0 0;padding-inline-start:16px;width:100%;z-index:1}.md3-list-item__end{flex:0 0 auto;padding-inline-end:24px;z-index:1;--md-list-item-icon-list-item-icon-color:var(--_list-item-trailing-icon-color);--md-list-item-icon-list-item-icon-size:var(--_list-item-trailing-icon-size)}:hover .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--_list-item-hover-trailing-icon-color)}.md3-list-item--disabled .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--_list-item-disabled-trailing-icon-color);--md-list-item-icon-list-item-icon-opacity:var(--_list-item-disabled-trailing-icon-opacity)}.md3-list-item__label-text{display:flex;color:var(--_list-item-label-text-color);font-family:var(--_list-item-label-text-font);font-size:var(--_list-item-label-text-size);letter-spacing:var(--_list-item-label-text-tracking);font-weight:var(--_list-item-label-text-weight);line-height:var(--_list-item-label-text-line-height)}.md3-list-item--disabled .md3-list-item__label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.md3-list-item__supporting-text{display:block;padding-block-start:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font-family:var(--_list-item-supporting-text-font);font-size:var(--_list-item-supporting-text-size);letter-spacing:var(--_list-item-supporting-text-tracking);font-weight:var(--_list-item-supporting-text-weight);line-height:var(--_list-item-supporting-text-line-height)}.md3-list-item--disabled .md3-list-item__supporting-text{color:var(--_list-item-disabled-supporting-text-color);opacity:var(--_list-item-disabled-supporting-text-opacity)}.md3-list-item__supporting-text--multi-line{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;white-space:normal}.md3-list-item__trailing-supporting-text{padding-inline-start:16px;font-family:var(--_list-item-trailing-supporting-text-font);font-size:var(--_list-item-trailing-supporting-text-size);letter-spacing:var(--_list-item-trailing-supporting-text-tracking);font-weight:var(--_list-item-trailing-supporting-text-weight);line-height:var(--_list-item-trailing-supporting-text-line-height)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.md3-list-item__ripple{display:inline-flex;inset:0;position:absolute;z-index:0}.md3-list-item__focus-ring{z-index:1}/*# sourceMappingURL=list-item-styles.css.map */\n`;\n "]}

package/list/lib/listitem/list-item-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-item-theme';
 @use './list-item';
 
-@include list-item.static-styles;
-
-.md3-list-item {
-  @include list-item-theme.theme-styles(list-item-theme.$light-theme);
-}
+@include list-item.styles;

package/list/lib/listitem/list-item.d.ts

@@ -3,11 +3,11 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/ripple/ripple.js';
-import '@material/web/focus/focus-ring.js';
-import { ActionElement, BeginPressConfig, EndPressConfig } from '@material/web/actionelement/action-element.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
-import { ARIARole } from '@material/web/types/aria.js';
+import '../../../ripple/ripple.js';
+import '../../../focus/focus-ring.js';
+import { ActionElement, BeginPressConfig, EndPressConfig } from '../../../actionelement/action-element.js';
+import { MdRipple } from '../../../ripple/ripple.js';
+import { ARIARole } from '../../../types/aria.js';
 import { TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
 /** @soyCompatible */

package/list/lib/listitem/list-item.js

@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import '@material/web/ripple/ripple.js';
-import '@material/web/focus/focus-ring.js';
-import { ActionElement } from '@material/web/actionelement/action-element.js';
-import { ariaProperty } from '@material/web/decorators/aria-property.js';
-import { pointerPress, shouldShowStrongFocus } from '@material/web/focus/strong-focus.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
+import '../../../ripple/ripple.js';
+import '../../../focus/focus-ring.js';
+import { ActionElement } from '../../../actionelement/action-element.js';
+import { ariaProperty } from '../../../decorators/aria-property.js';
+import { pointerPress, shouldShowStrongFocus } from '../../../focus/strong-focus.js';
+import { MdRipple } from '../../../ripple/ripple.js';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';

package/list/lib/listitem/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/ripple/ripple.js';\nimport '@material/web/focus/focus-ring.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';\nimport {MdRipple} from '@material/web/ripple/ripple.js';\nimport {ARIARole} from '@material/web/types/aria.js';\nimport {html, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class ListItem extends ActionElement {\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  role: ARIARole = 'listitem';\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-selected', noAccessor: true})\n  override ariaSelected!: 'true'|'false';\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-checked', noAccessor: true})\n  override ariaChecked!: 'true'|'false';\n\n  @property({type: String}) itemId!: string;\n\n  @property({type: String}) supportingText = '';\n  @property({type: String}) multiLineSupportingText = '';\n  @property({type: String}) trailingSupportingText = '';\n  @property({type: Boolean}) disabled = false;\n  @property({type: Number}) itemTabIndex = -1;\n  @property({type: String}) headline = '';\n  @query('md-ripple') ripple!: MdRipple;\n  @query('[data-query-md3-list-item]') listItemRoot!: HTMLElement;\n  @property({type: Boolean}) showFocusRing = false;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <li\n          tabindex=${this.itemTabIndex}\n          role=${this.role}\n          aria-selected=${ifDefined(this.ariaSelected || undefined)}\n          aria-checked=${ifDefined(this.ariaChecked || undefined)}\n          id=${ifDefined(this.itemId || undefined)}\n          data-query-md3-list-item\n          class=\"md3-list-item ${classMap(this.getRenderClasses())}\"\n          @pointerdown=${this.handlePointerDown}\n          @pointerenter=${this.handlePointerEnter}\n          @pointerup=${this.handlePointerUp}\n          @pointercancel=${this.handlePointerCancel}\n          @pointerleave=${this.handlePointerLeave}\n          @keydown=${this.handleKeyDown}\n          @keyup=${this.handleKeyUp}\n          @click=${this.handleClick}\n          @contextmenu=${this.handleContextMenu}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          >\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        <div class=\"md3-list-item__ripple\">\n          ${this.renderRipple()}\n        </div>\n        <div class=\"md3-list-item__focus-ring\">\n          ${this.renderFocusRing()}\n        </div>\n      </li>`;\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult {\n    return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /** @soyTemplate */\n  protected getAriaRole(): ARIARole {\n    return 'listitem';\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-list-item--with-one-line':\n          this.supportingText === '' && this.multiLineSupportingText === '',\n      'md3-list-item--with-two-line':\n          this.supportingText !== '' && this.multiLineSupportingText === '',\n      'md3-list-item--with-three-line': this.multiLineSupportingText !== '',\n      'md3-list-item--disabled': this.disabled,\n      'md3-list-item--enabled': !this.disabled,\n    };\n  }\n\n  /** @soyTemplate */\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"md3-list-item__start\"><!--\n      --><slot name=\"start\" @slotchange=${this.handleSlotChange}></slot><!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderBody(): TemplateResult {\n    return html`<div class=\"md3-list-item__body\"><!--\n       --><span class=\"md3-list-item__label-text\"><!--\n          -->${this.headline}<!--\n       --></span><!--\n        -->${\n        this.multiLineSupportingText !== '' ?\n            this.renderMultiLineSupportingText() :\n            this.supportingText !== '' ? this.renderSupportingText() :\n                                         ''}<!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__supporting-text\"><!--\n          -->${this.supportingText}<!--\n       --></span>`;\n  }\n\n  /** @soyTemplate */\n  protected renderMultiLineSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__supporting-text md3-list-item__supporting-text--multi-line\"><!--\n          -->${this.multiLineSupportingText}<!--\n       --></span>`;\n  }\n\n  /** @soyTemplate */\n  protected renderEnd(): TemplateResult {\n    return html`<div class=\"md3-list-item__end\"><!--\n      --><slot name=\"end\" @slotchange=${this.handleSlotChange}><!--\n        -->${\n        this.trailingSupportingText !== '' ?\n            this.renderTrailingSupportingText() :\n            ''}<!--\n      --></slot><!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderTrailingSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__trailing-supporting-text\"><!--\n          -->${this.trailingSupportingText}<!--\n       --></span>`;\n  }\n\n  protected handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  override beginPress({positionEvent}: BeginPressConfig) {\n    this.ripple.beginPress(positionEvent);\n  }\n\n  override endPress({cancelled}: EndPressConfig) {\n    this.ripple.endPress();\n\n    if (cancelled) return;\n\n    super.endPress({cancelled, actionData: {item: this}});\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  override handlePointerDown(e: PointerEvent) {\n    super.handlePointerDown(e);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handlePointerEnter(e: PointerEvent) {\n    this.ripple.beginHover(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n\n    this.ripple.endHover();\n  }\n\n  /** @bubbleWizEvent */\n  protected handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    // TODO(b/240124486): Replace with beginPress provided by action\n    // element.\n    this.ripple.beginPress(e);\n  }\n\n  protected handleKeyUp(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    // TODO(b/240124486): Replace with beginPress provided by action element.\n    super.endPress({cancelled: false, actionData: {item: this}});\n    this.ripple.endPress();\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate() {\n    this.itemTabIndex = 0;\n    this.listItemRoot.focus();\n    this.showFocusRing = true;\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive() {\n    return this.itemTabIndex === 0 && this.showFocusRing;\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate() {\n    this.itemTabIndex = -1;\n  }\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../ripple/ripple.js';\nimport '../../../focus/focus-ring.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '../../../actionelement/action-element.js';\nimport {ariaProperty} from '../../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../../focus/strong-focus.js';\nimport {MdRipple} from '../../../ripple/ripple.js';\nimport {ARIARole} from '../../../types/aria.js';\nimport {html, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class ListItem extends ActionElement {\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  role: ARIARole = 'listitem';\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-selected', noAccessor: true})\n  override ariaSelected!: 'true'|'false';\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-checked', noAccessor: true})\n  override ariaChecked!: 'true'|'false';\n\n  @property({type: String}) itemId!: string;\n\n  @property({type: String}) supportingText = '';\n  @property({type: String}) multiLineSupportingText = '';\n  @property({type: String}) trailingSupportingText = '';\n  @property({type: Boolean}) disabled = false;\n  @property({type: Number}) itemTabIndex = -1;\n  @property({type: String}) headline = '';\n  @query('md-ripple') ripple!: MdRipple;\n  @query('[data-query-md3-list-item]') listItemRoot!: HTMLElement;\n  @property({type: Boolean}) showFocusRing = false;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <li\n          tabindex=${this.itemTabIndex}\n          role=${this.role}\n          aria-selected=${ifDefined(this.ariaSelected || undefined)}\n          aria-checked=${ifDefined(this.ariaChecked || undefined)}\n          id=${ifDefined(this.itemId || undefined)}\n          data-query-md3-list-item\n          class=\"md3-list-item ${classMap(this.getRenderClasses())}\"\n          @pointerdown=${this.handlePointerDown}\n          @pointerenter=${this.handlePointerEnter}\n          @pointerup=${this.handlePointerUp}\n          @pointercancel=${this.handlePointerCancel}\n          @pointerleave=${this.handlePointerLeave}\n          @keydown=${this.handleKeyDown}\n          @keyup=${this.handleKeyUp}\n          @click=${this.handleClick}\n          @contextmenu=${this.handleContextMenu}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          >\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        <div class=\"md3-list-item__ripple\">\n          ${this.renderRipple()}\n        </div>\n        <div class=\"md3-list-item__focus-ring\">\n          ${this.renderFocusRing()}\n        </div>\n      </li>`;\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult {\n    return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /** @soyTemplate */\n  protected getAriaRole(): ARIARole {\n    return 'listitem';\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-list-item--with-one-line':\n          this.supportingText === '' && this.multiLineSupportingText === '',\n      'md3-list-item--with-two-line':\n          this.supportingText !== '' && this.multiLineSupportingText === '',\n      'md3-list-item--with-three-line': this.multiLineSupportingText !== '',\n      'md3-list-item--disabled': this.disabled,\n      'md3-list-item--enabled': !this.disabled,\n    };\n  }\n\n  /** @soyTemplate */\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"md3-list-item__start\"><!--\n      --><slot name=\"start\" @slotchange=${this.handleSlotChange}></slot><!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderBody(): TemplateResult {\n    return html`<div class=\"md3-list-item__body\"><!--\n       --><span class=\"md3-list-item__label-text\"><!--\n          -->${this.headline}<!--\n       --></span><!--\n        -->${\n        this.multiLineSupportingText !== '' ?\n            this.renderMultiLineSupportingText() :\n            this.supportingText !== '' ? this.renderSupportingText() :\n                                         ''}<!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__supporting-text\"><!--\n          -->${this.supportingText}<!--\n       --></span>`;\n  }\n\n  /** @soyTemplate */\n  protected renderMultiLineSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__supporting-text md3-list-item__supporting-text--multi-line\"><!--\n          -->${this.multiLineSupportingText}<!--\n       --></span>`;\n  }\n\n  /** @soyTemplate */\n  protected renderEnd(): TemplateResult {\n    return html`<div class=\"md3-list-item__end\"><!--\n      --><slot name=\"end\" @slotchange=${this.handleSlotChange}><!--\n        -->${\n        this.trailingSupportingText !== '' ?\n            this.renderTrailingSupportingText() :\n            ''}<!--\n      --></slot><!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderTrailingSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__trailing-supporting-text\"><!--\n          -->${this.trailingSupportingText}<!--\n       --></span>`;\n  }\n\n  protected handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  override beginPress({positionEvent}: BeginPressConfig) {\n    this.ripple.beginPress(positionEvent);\n  }\n\n  override endPress({cancelled}: EndPressConfig) {\n    this.ripple.endPress();\n\n    if (cancelled) return;\n\n    super.endPress({cancelled, actionData: {item: this}});\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  override handlePointerDown(e: PointerEvent) {\n    super.handlePointerDown(e);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handlePointerEnter(e: PointerEvent) {\n    this.ripple.beginHover(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n\n    this.ripple.endHover();\n  }\n\n  /** @bubbleWizEvent */\n  protected handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    // TODO(b/240124486): Replace with beginPress provided by action\n    // element.\n    this.ripple.beginPress(e);\n  }\n\n  protected handleKeyUp(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    // TODO(b/240124486): Replace with beginPress provided by action element.\n    super.endPress({cancelled: false, actionData: {item: this}});\n    this.ripple.endPress();\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate() {\n    this.itemTabIndex = 0;\n    this.listItemRoot.focus();\n    this.showFocusRing = true;\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive() {\n    return this.itemTabIndex === 0 && this.showFocusRing;\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate() {\n    this.itemTabIndex = -1;\n  }\n}\n"]}

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

@@ -6,13 +6,56 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
-  display: inline-flex;
+@use 'sass:map';
+@use '../../../sass/theme';
+@use '../../../sass/map-ext';
+@use '../tokens';
+
+$_custom-property-prefix: 'list-item-video';
+
+@mixin theme($tokens) {
+  $reference: map-ext.pick(
+    tokens.md-comp-list-values(),
+    (
+      list-item-leading-video-height,
+      list-item-leading-video-width,
+      list-item-leading-video-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-video-height,
+      list-item-leading-video-width,
+      list-item-leading-video-shape
+    )
+  );
+
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    display: inline-flex;
+  }
 
   .md3-list-item__video {
     display: inline-flex;
     margin-block-end: 12px;
     margin-block-start: 12px;
     object-fit: cover;
+    height: var(--_list-item-leading-video-height);
+    width: var(--_list-item-leading-video-width);
+    border-radius: var(--_list-item-leading-video-shape);
   }
 }