@material/web 1.0.0-pre.15 → 1.0.0-pre.17

package/list/internal/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`:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# 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, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex}.list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}

package/list/internal/list.d.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LitElement } from 'lit';
-import { ARIARole } from '../../internal/aria/aria.js';
 import { ListItem } from './listitem/list-item.js';
 /**
  * A record that describes a list item in a list with metadata such a reference
@@ -17,7 +16,7 @@ export interface ItemRecord {
 export declare class List extends LitElement {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
-    type: ARIARole | '';
+    type: 'menu' | 'menubar' | 'listbox' | 'list' | '';
     /**
      * The tabindex of the underlying list.
      */

package/list/internal/list.js

@@ -37,7 +37,7 @@ export class List extends LitElement {
         // Needed for closure conformance
         const { ariaLabel } = this;
         return html `
-    <ul class="md3-list"
+    <ul class="list"
         aria-label=${ariaLabel || nothing}
         tabindex=${this.listTabIndex}
         role=${this.type || nothing}
@@ -51,9 +51,7 @@ export class List extends LitElement {
      * The content to be slotted into the list.
      */
     renderContent() {
-        return html `<span><slot @click=${(event) => {
-            event.stopPropagation();
-        }}></slot></span>`;
+        return html `<span><slot></slot></span>`;
     }
     /**
      * Handles keyboard navigation in the list.
@@ -62,7 +60,7 @@ export class List extends LitElement {
      */
     handleKeydown(event) {
         const key = event.key;
-        if (!isNavigableKey(key)) {
+        if (event.defaultPrevented || !isNavigableKey(key)) {
             return;
         }
         // do not use this.items directly so we don't re-query the DOM unnecessarily
@@ -295,7 +293,7 @@ __decorate([
     property({ type: Number, attribute: 'list-tabindex' })
 ], List.prototype, "listTabIndex", void 0);
 __decorate([
-    query('.md3-list')
+    query('.list')
 ], List.prototype, "listRoot", void 0);
 __decorate([
     queryAssignedElements({ flatten: true, selector: '[md-list-item]' })

package/list/internal/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 {html, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict, ARIARole} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n} as const;\n\n/**\n * A record that describes a list item in a list with metadata such a reference\n * to the item and its index in the list.\n */\nexport interface ItemRecord {\n  item: ListItem;\n  index: number;\n}\n\ntype NavigatableValues = typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\nconst navigableKeySet = new Set(Object.values(NAVIGABLE_KEYS));\n\nfunction isNavigableKey(key: string): key is NavigatableValues {\n  return navigableKeySet.has(key as NavigatableValues);\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  static {\n    requestUpdateOnAriaChange(List);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property() type: ARIARole|'' = 'list';\n\n  /**\n   * The tabindex of the underlying list.\n   */\n  @property({type: Number, attribute: 'list-tabindex'}) listTabIndex = 0;\n\n  @query('.md3-list') private listRoot!: HTMLElement|null;\n\n  /**\n   * An array of activatable and disableable list items. Queries every assigned\n   * element that has the `md-list-item` attribute.\n   *\n   * _NOTE:_ This is a shallow, flattened query via\n   * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct\n   * children / directly slotted elements.\n   */\n  @queryAssignedElements({flatten: true, selector: '[md-list-item]'})\n  items!: ListItem[];\n\n  protected override render() {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  private renderList() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n    <ul class=\"md3-list\"\n        aria-label=${ariaLabel || nothing}\n        tabindex=${this.listTabIndex}\n        role=${this.type || nothing}\n        @keydown=${this.handleKeydown}\n        >\n      ${this.renderContent()}\n    </ul>\n  `;\n  }\n\n  /**\n   * The content to be slotted into the list.\n   */\n  private renderContent() {\n    return html`<span><slot @click=${(event: Event) => {\n      event.stopPropagation();\n    }}></slot></span>`;\n  }\n\n  /**\n   * Handles keyboard navigation in the list.\n   *\n   * @param event {KeyboardEvent} The keyboard event that triggers this handler.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    if (!isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly so we don't re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = List.getActiveItem(items);\n\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n\n    event.preventDefault();\n\n    switch (key) {\n      // Activate the next item\n      case NAVIGABLE_KEYS.ArrowDown:\n        this.activateNextItemInternal(items, activeItemRecord);\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        this.activatePreviousItemInternal(items, activeItemRecord);\n        break;\n\n      // Activate the first item\n      case NAVIGABLE_KEYS.Home:\n        List.activateFirstItem(items);\n        break;\n\n      // Activate the last item\n      case NAVIGABLE_KEYS.End:\n        List.activateLastItem(items);\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  private activateNextItemInternal(\n      items: ListItem[], activeItemRecord: null|ItemRecord): ListItem|null {\n    if (activeItemRecord) {\n      const next = List.getNextItem(items, activeItemRecord.index);\n\n      if (next) next.active = true;\n\n      return next;\n    } else {\n      return List.activateFirstItem(items);\n    }\n  }\n\n  private activatePreviousItemInternal(\n      items: ListItem[], activeItemRecord: null|ItemRecord): ListItem|null {\n    if (activeItemRecord) {\n      const prev = List.getPrevItem(items, activeItemRecord.index);\n      if (prev) prev.active = true;\n      return prev;\n    } else {\n      return List.activateLastItem(items);\n    }\n  }\n\n  /**\n   * Activates the next item in the list. If at the end of the list, the first\n   * item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activateNextItem(): ListItem|null {\n    const items = this.items;\n    const activeItemRecord = List.getActiveItem(items);\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n    return this.activateNextItemInternal(items, activeItemRecord);\n  }\n\n  /**\n   * Activates the previous item in the list. If at the start of the list, the\n   * last item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activatePreviousItem(): ListItem|null {\n    const items = this.items;\n    const activeItemRecord = List.getActiveItem(items);\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n    return this.activatePreviousItemInternal(items, activeItemRecord);\n  }\n\n  /**\n   * Activates the first non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * first item.\n   * @nocollapse\n   */\n  static activateFirstItem<T extends ListItem>(items: T[]) {\n    // NOTE: These selector functions are static and not on the instance such\n    // that multiple operations can be chained and we do not have to re-query\n    // the DOM\n    const firstItem = List.getFirstActivatableItem(items);\n    if (firstItem) {\n      firstItem.active = true;\n    }\n    return firstItem;\n  }\n\n  /**\n   * Activates the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * last item.\n   * @nocollapse\n   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\n    return lastItem;\n  }\n\n  /**\n   * Deactivates the currently active item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to deactivate the\n   * active item.\n   * @return A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\n   * @nocollapse\n   */\n  static deactivateActiveItem<T extends ListItem>(items: T[]) {\n    const activeItem = List.getActiveItem(items);\n    if (activeItem) {\n      activeItem.item.active = false;\n    }\n    return activeItem;\n  }\n\n  override focus() {\n    this.listRoot?.focus();\n  }\n\n  /**\n   * Retrieves the first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\n   * @nocollapse\n   */\n  static getActiveItem<T extends ListItem>(items: T[]) {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i];\n      if (item.active) {\n        return {\n          item,\n          index: i,\n        } as ItemRecord;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the first non-disabled item of a given array of items. This\n   * the first item that is not disabled.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return The first activatable item or `null` if none are activatable.\n   * @nocollapse\n   */\n  static getFirstActivatableItem<T extends ListItem>(items: T[]) {\n    for (const item of items) {\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return The last activatable item or `null` if none are activatable.\n   * @nocollapse\n   */\n  static getLastActivatableItem<T extends ListItem>(items: T[]) {\n    for (let i = items.length - 1; i >= 0; i--) {\n      const item = items[i];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the next non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @return The next activatable item or `null` if none are activatable.\n   */\n  private static getNextItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const nextIndex = (i + index) % items.length;\n      const item = items[nextIndex];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return items[index] ? items[index] : null;\n  }\n\n  /**\n   * Retrieves the previous non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @return The previous activatable item or `null` if none are activatable.\n   */\n  private static getPrevItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const prevIndex = (index - i + items.length) % items.length;\n      const item = items[prevIndex];\n\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return items[index] ? items[index] : null;\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, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n} as const;\n\n/**\n * A record that describes a list item in a list with metadata such a reference\n * to the item and its index in the list.\n */\nexport interface ItemRecord {\n  item: ListItem;\n  index: number;\n}\n\ntype NavigatableValues = typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\nconst navigableKeySet = new Set(Object.values(NAVIGABLE_KEYS));\n\nfunction isNavigableKey(key: string): key is NavigatableValues {\n  return navigableKeySet.has(key as NavigatableValues);\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  static {\n    requestUpdateOnAriaChange(List);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property() type: 'menu'|'menubar'|'listbox'|'list'|'' = 'list';\n\n  /**\n   * The tabindex of the underlying list.\n   */\n  @property({type: Number, attribute: 'list-tabindex'}) listTabIndex = 0;\n\n  @query('.list') private listRoot!: HTMLElement|null;\n\n  /**\n   * An array of activatable and disableable list items. Queries every assigned\n   * element that has the `md-list-item` attribute.\n   *\n   * _NOTE:_ This is a shallow, flattened query via\n   * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct\n   * children / directly slotted elements.\n   */\n  @queryAssignedElements({flatten: true, selector: '[md-list-item]'})\n  items!: ListItem[];\n\n  protected override render() {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  private renderList() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n    <ul class=\"list\"\n        aria-label=${ariaLabel || nothing}\n        tabindex=${this.listTabIndex}\n        role=${this.type || nothing}\n        @keydown=${this.handleKeydown}\n        >\n      ${this.renderContent()}\n    </ul>\n  `;\n  }\n\n  /**\n   * The content to be slotted into the list.\n   */\n  private renderContent() {\n    return html`<span><slot></slot></span>`;\n  }\n\n  /**\n   * Handles keyboard navigation in the list.\n   *\n   * @param event {KeyboardEvent} The keyboard event that triggers this handler.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    if (event.defaultPrevented || !isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly so we don't re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = List.getActiveItem(items);\n\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n\n    event.preventDefault();\n\n    switch (key) {\n      // Activate the next item\n      case NAVIGABLE_KEYS.ArrowDown:\n        this.activateNextItemInternal(items, activeItemRecord);\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        this.activatePreviousItemInternal(items, activeItemRecord);\n        break;\n\n      // Activate the first item\n      case NAVIGABLE_KEYS.Home:\n        List.activateFirstItem(items);\n        break;\n\n      // Activate the last item\n      case NAVIGABLE_KEYS.End:\n        List.activateLastItem(items);\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  private activateNextItemInternal(\n      items: ListItem[], activeItemRecord: null|ItemRecord): ListItem|null {\n    if (activeItemRecord) {\n      const next = List.getNextItem(items, activeItemRecord.index);\n\n      if (next) next.active = true;\n\n      return next;\n    } else {\n      return List.activateFirstItem(items);\n    }\n  }\n\n  private activatePreviousItemInternal(\n      items: ListItem[], activeItemRecord: null|ItemRecord): ListItem|null {\n    if (activeItemRecord) {\n      const prev = List.getPrevItem(items, activeItemRecord.index);\n      if (prev) prev.active = true;\n      return prev;\n    } else {\n      return List.activateLastItem(items);\n    }\n  }\n\n  /**\n   * Activates the next item in the list. If at the end of the list, the first\n   * item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activateNextItem(): ListItem|null {\n    const items = this.items;\n    const activeItemRecord = List.getActiveItem(items);\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n    return this.activateNextItemInternal(items, activeItemRecord);\n  }\n\n  /**\n   * Activates the previous item in the list. If at the start of the list, the\n   * last item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activatePreviousItem(): ListItem|null {\n    const items = this.items;\n    const activeItemRecord = List.getActiveItem(items);\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n    return this.activatePreviousItemInternal(items, activeItemRecord);\n  }\n\n  /**\n   * Activates the first non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * first item.\n   * @nocollapse\n   */\n  static activateFirstItem<T extends ListItem>(items: T[]) {\n    // NOTE: These selector functions are static and not on the instance such\n    // that multiple operations can be chained and we do not have to re-query\n    // the DOM\n    const firstItem = List.getFirstActivatableItem(items);\n    if (firstItem) {\n      firstItem.active = true;\n    }\n    return firstItem;\n  }\n\n  /**\n   * Activates the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * last item.\n   * @nocollapse\n   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\n    return lastItem;\n  }\n\n  /**\n   * Deactivates the currently active item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to deactivate the\n   * active item.\n   * @return A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\n   * @nocollapse\n   */\n  static deactivateActiveItem<T extends ListItem>(items: T[]) {\n    const activeItem = List.getActiveItem(items);\n    if (activeItem) {\n      activeItem.item.active = false;\n    }\n    return activeItem;\n  }\n\n  override focus() {\n    this.listRoot?.focus();\n  }\n\n  /**\n   * Retrieves the first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\n   * @nocollapse\n   */\n  static getActiveItem<T extends ListItem>(items: T[]) {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i];\n      if (item.active) {\n        return {\n          item,\n          index: i,\n        } as ItemRecord;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the first non-disabled item of a given array of items. This\n   * the first item that is not disabled.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return The first activatable item or `null` if none are activatable.\n   * @nocollapse\n   */\n  static getFirstActivatableItem<T extends ListItem>(items: T[]) {\n    for (const item of items) {\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return The last activatable item or `null` if none are activatable.\n   * @nocollapse\n   */\n  static getLastActivatableItem<T extends ListItem>(items: T[]) {\n    for (let i = items.length - 1; i >= 0; i--) {\n      const item = items[i];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the next non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @return The next activatable item or `null` if none are activatable.\n   */\n  private static getNextItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const nextIndex = (i + index) % items.length;\n      const item = items[nextIndex];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return items[index] ? items[index] : null;\n  }\n\n  /**\n   * Retrieves the previous non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @return The previous activatable item or `null` if none are activatable.\n   */\n  private static getPrevItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const prevIndex = (index - i + items.length) % items.length;\n      const item = items[prevIndex];\n\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return items[index] ? items[index] : null;\n  }\n}\n"]}

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

@@ -4,21 +4,25 @@
 //
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../../focus/focus-ring';
 @use '../../../icon/icon';
-@use '../../../internal/sass/theme';
 @use '../../../ripple/ripple';
 @use '../../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-list-item-values(), $tokens);
+  $supported-tokens: tokens.$md-comp-list-item-supported-tokens;
 
   @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
     @if $value {
       --md-list-item-#{$token}: #{$value};
     }
@@ -47,10 +51,10 @@
 
     @include ripple.theme(
       (
-        hover-color: var(--_list-item-hover-state-layer-color),
-        hover-opacity: var(--_list-item-hover-state-layer-opacity),
-        pressed-color: var(--_list-item-pressed-state-layer-color),
-        pressed-opacity: var(--_list-item-pressed-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
@@ -71,8 +75,8 @@
     position: relative;
     width: 100%;
     text-decoration: none;
-    background-color: var(--_list-item-container-color);
-    border-radius: var(--_list-item-container-shape);
+    background-color: var(--_container-color);
+    border-radius: var(--_container-shape);
     // hide android tap color since we have ripple
     -webkit-tap-highlight-color: transparent;
 
@@ -90,7 +94,7 @@
     width: 100%;
     box-sizing: border-box;
     border-radius: inherit;
-    padding-inline-end: var(--_list-item-trailing-space);
+    padding-inline-end: var(--_trailing-space);
   }
 
   md-ripple {
@@ -98,15 +102,15 @@
   }
 
   .with-one-line {
-    min-height: var(--_list-item-one-line-container-height);
+    min-height: var(--_one-line-container-height);
   }
 
   .with-two-line {
-    min-height: var(--_list-item-two-line-container-height);
+    min-height: var(--_two-line-container-height);
   }
 
   .with-three-line {
-    min-height: var(--_list-item-three-line-container-height);
+    min-height: var(--_three-line-container-height);
   }
 
   .start {
@@ -126,7 +130,7 @@
     &::slotted([data-variant='icon']),
     &::slotted([data-variant='image']),
     &::slotted([data-variant='avatar']) {
-      margin-inline-start: var(--_list-item-leading-element-leading-space);
+      margin-inline-start: var(--_leading-element-leading-space);
     }
   }
 
@@ -134,9 +138,10 @@
     display: inline-flex;
     justify-content: center;
     flex-direction: column;
+    min-width: 0;
     box-sizing: border-box;
     flex: 1 0 0;
-    padding-inline-start: var(--_list-item-leading-space);
+    padding-inline-start: var(--_leading-space);
     z-index: 1;
   }
 
@@ -155,33 +160,35 @@
   slot[name='end']::slotted(*),
   .trailing-supporting-text {
     margin-inline-start: var(
-      --_list-item-trailing-element-headline-trailing-element-space
+      --_trailing-element-headline-trailing-element-space
     );
   }
 
   .label-text {
-    display: flex;
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
-    color: var(--_list-item-label-text-color);
-    font: var(--_list-item-label-text-type);
+    color: var(--_label-text-color);
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
 
     :hover & {
-      color: var(--_list-item-hover-label-text-color);
+      color: var(--_hover-label-text-color);
     }
 
     :focus & {
-      color: var(--_list-item-focus-label-text-color);
+      color: var(--_focus-label-text-color);
     }
 
     :active & {
-      color: var(--_list-item-pressed-label-text-color);
+      color: var(--_pressed-label-text-color);
     }
 
     .disabled & {
-      color: var(--_list-item-disabled-label-text-color);
-      opacity: var(--_list-item-disabled-label-text-opacity);
+      color: var(--_disabled-label-text-color);
+      opacity: var(--_disabled-label-text-opacity);
     }
   }
 
@@ -190,8 +197,11 @@
     white-space: normal;
     overflow: hidden;
     width: 100%;
-    color: var(--_list-item-supporting-text-color);
-    font: var(--_list-item-supporting-text-type);
+    color: var(--_supporting-text-color);
+    font-family: var(--_supporting-text-font);
+    font-size: var(--_supporting-text-size);
+    line-height: var(--_supporting-text-line-height);
+    font-weight: var(--_supporting-text-weight);
 
     // Box is supposed to be deprecated, but line-clamp is not. It's still on
     // standards track and can only be applied with display: -webkit-box and
@@ -202,8 +212,8 @@
     display: -webkit-box;
 
     .disabled & {
-      color: var(--_list-item-disabled-label-text-color);
-      opacity: var(--_list-item-disabled-label-text-opacity);
+      color: var(--_disabled-label-text-color);
+      opacity: var(--_disabled-label-text-opacity);
     }
   }
 
@@ -212,25 +222,27 @@
   }
 
   .trailing-supporting-text {
-    padding-inline-start: 16px;
-    font: var(--_list-item-trailing-supporting-text-type);
+    font-family: var(--_trailing-supporting-text-font);
+    font-size: var(--_trailing-supporting-text-size);
+    line-height: var(--_trailing-supporting-text-line-height);
+    font-weight: var(--_trailing-supporting-text-weight);
 
     .list-item:not(.disabled) & {
-      color: var(--_list-item-trailing-supporting-text-color);
+      color: var(--_trailing-supporting-text-color);
     }
 
     .disabled & {
-      color: var(--_list-item-disabled-label-text-color);
-      opacity: var(--_list-item-disabled-label-text-opacity);
+      color: var(--_disabled-label-text-color);
+      opacity: var(--_disabled-label-text-opacity);
     }
 
     .with-three-line & {
       // In three line, trailing-supporting-text must align with the mid-line of
       // the headline text.
-      padding-block-start: calc(
+      margin-block-start: calc(
         (
-            var(--_list-item-label-text-line-height) -
-              var(--_list-item-trailing-supporting-text-line-height)
+            var(--_label-text-line-height) -
+              var(--_trailing-supporting-text-line-height)
           ) / 2
       );
     }
@@ -244,19 +256,16 @@
 @mixin _image() {
   ::slotted([data-variant='image']) {
     display: inline-flex;
-    height: var(--_list-item-leading-image-height);
-    width: var(--_list-item-leading-image-width);
-    border-radius: var(--_list-item-leading-image-shape);
+    height: var(--_leading-image-height);
+    width: var(--_leading-image-width);
+    border-radius: var(--_leading-image-shape);
     // Min height is two-line height
-    padding-block: calc(
-      (
-          var(--_list-item-two-line-container-height) -
-            var(--_list-item-leading-image-height)
-        ) / 2
+    margin-block: calc(
+      (var(--_two-line-container-height) - var(--_leading-image-height)) / 2
     );
 
     .with-three-line & {
-      padding-block: 0;
+      margin-block: 0;
     }
   }
 }
@@ -267,78 +276,72 @@
   }
 
   slot[name='start']::slotted([data-variant='icon']) {
-    font-size: var(--_list-item-leading-icon-size);
-    width: var(--_list-item-leading-icon-size);
-    height: var(--_list-item-leading-icon-size);
-    color: var(--_list-item-leading-icon-color);
+    font-size: var(--_leading-icon-size);
+    width: var(--_leading-icon-size);
+    height: var(--_leading-icon-size);
+    color: var(--_leading-icon-color);
 
     .with-three-line & {
       // In three line, icon must align with the mid-line of headline text
-      padding-block-start: calc(
-        (
-            var(--_list-item-label-text-line-height) -
-              var(--_list-item-leading-icon-size)
-          ) / 2
+      margin-block-start: calc(
+        (var(--_label-text-line-height) - var(--_leading-icon-size)) / 2
       );
     }
   }
 
   slot[name='end']::slotted([data-variant='icon']) {
-    font-size: var(--_list-item-trailing-icon-size);
-    width: var(--_list-item-trailing-icon-size);
-    height: var(--_list-item-trailing-icon-size);
-    color: var(--_list-item-trailing-icon-color);
+    font-size: var(--_trailing-icon-size);
+    width: var(--_trailing-icon-size);
+    height: var(--_trailing-icon-size);
+    color: var(--_trailing-icon-color);
 
     .with-three-line & {
       // In three line, icon must align with the mid-line of headline text
-      padding-block-start: calc(
-        (
-            var(--_list-item-label-text-line-height) -
-              var(--_list-item-trailing-icon-size)
-          ) / 2
+      margin-block-start: calc(
+        (var(--_label-text-line-height) - var(--_trailing-icon-size)) / 2
       );
     }
   }
 
   :hover {
     slot[name='start']::slotted([data-variant='icon']) {
-      color: var(--_list-item-hover-leading-icon-icon-color);
+      color: var(--_hover-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      color: var(--_list-item-hover-trailing-icon-icon-color);
+      color: var(--_hover-trailing-icon-icon-color);
     }
   }
 
   :focus {
     slot[name='start']::slotted([data-variant='icon']) {
-      color: var(--_list-item-focus-leading-icon-icon-color);
+      color: var(--_focus-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      color: var(--_list-item-focus-trailing-icon-icon-color);
+      color: var(--_focus-trailing-icon-icon-color);
     }
   }
 
   :active {
     slot[name='start']::slotted([data-variant='icon']) {
-      color: var(--_list-item-pressed-leading-icon-icon-color);
+      color: var(--_pressed-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      color: var(--_list-item-pressed-trailing-icon-icon-color);
+      color: var(--_pressed-trailing-icon-icon-color);
     }
   }
 
   .disabled {
     slot[name='start']::slotted([data-variant='icon']) {
-      opacity: var(--_list-item-disabled-leading-icon-opacity);
-      color: var(--_list-item-disabled-leading-icon-color);
+      opacity: var(--_disabled-leading-icon-opacity);
+      color: var(--_disabled-leading-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      opacity: var(--_list-item-disabled-trailing-icon-opacity);
-      color: var(--_list-item-disabled-trailing-icon-color);
+      opacity: var(--_disabled-trailing-icon-opacity);
+      color: var(--_disabled-trailing-icon-color);
     }
   }
 }
@@ -348,12 +351,15 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--_list-item-leading-avatar-color);
-    height: var(--_list-item-leading-avatar-size);
-    width: var(--_list-item-leading-avatar-size);
-    border-radius: var(--_list-item-leading-avatar-shape);
-    color: var(--_list-item-leading-avatar-label-color);
-    font: var(--_list-item-leading-avatar-label-type);
+    background-color: var(--_leading-avatar-color);
+    height: var(--_leading-avatar-size);
+    width: var(--_leading-avatar-size);
+    border-radius: var(--_leading-avatar-shape);
+    color: var(--_leading-avatar-label-color);
+    font-family: var(--_leading-avatar-label-font);
+    font-size: var(--_leading-avatar-label-size);
+    line-height: var(--_leading-avatar-label-line-height);
+    font-weight: var(--_leading-avatar-label-weight);
   }
 }
 
@@ -362,33 +368,29 @@
   ::slotted([data-variant='video-large']) {
     display: inline-flex;
     object-fit: cover;
-    height: var(--_list-item-small-leading-video-height);
-    width: var(--_list-item-leading-video-width);
-    border-radius: var(--_list-item-leading-video-shape);
-    margin-inline-start: var(--_list-item-leading-video-leading-space);
+    height: var(--_small-leading-video-height);
+    width: var(--_leading-video-width);
+    border-radius: var(--_leading-video-shape);
+    margin-inline-start: var(--_leading-video-leading-space);
     // Min height is three-line height
-    padding-block: calc(
-      (
-          var(--_list-item-three-line-container-height) -
-            var(--_list-item-small-leading-video-height)
-        ) / 2
+    margin-block: calc(
+      (var(--_three-line-container-height) - var(--_small-leading-video-height)) /
+        2
     );
 
     // Let it auto-layout so that we don't mess with the icons and supporting
     // text that is supposed to be top-aligned in three-line.
     .with-three-line & {
-      padding-block: 0;
+      margin-block: 0;
     }
   }
 
   ::slotted([data-variant='video-large']) {
     // Min height is three-line height
-    padding-block: calc(
-      (
-          var(--_list-item-three-line-container-height) -
-            var(--_list-item-large-leading-video-height)
-        ) / 2
+    margin-block: calc(
+      (var(--_three-line-container-height) - var(--_large-leading-video-height)) /
+        2
     );
-    height: var(--_list-item-large-leading-video-height);
+    height: var(--_large-leading-video-height);
   }
 }

package/list/internal/listitem/forced-colors-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `@media(forced-colors: active){:host{--md-list-item-list-item-disabled-label-text-color: GrayText;--md-list-item-list-item-disabled-label-text-opacity: 1;--md-list-item-list-item-disabled-leading-icon-color: GrayText;--md-list-item-list-item-disabled-leading-icon-opacity: 1;--md-list-item-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */
+export const styles = css `@media(forced-colors: active){:host{--md-list-item-disabled-label-text-color: GrayText;--md-list-item-disabled-label-text-opacity: 1;--md-list-item-disabled-leading-icon-color: GrayText;--md-list-item-disabled-leading-icon-opacity: 1;--md-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */
 `;
 //# sourceMappingURL=forced-colors-styles.css.js.map

package/list/internal/listitem/forced-colors-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){:host{--md-list-item-list-item-disabled-label-text-color: GrayText;--md-list-item-list-item-disabled-label-text-opacity: 1;--md-list-item-list-item-disabled-leading-icon-color: GrayText;--md-list-item-list-item-disabled-leading-icon-opacity: 1;--md-list-item-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){:host{--md-list-item-disabled-label-text-color: GrayText;--md-list-item-disabled-label-text-opacity: 1;--md-list-item-disabled-leading-icon-color: GrayText;--md-list-item-disabled-leading-icon-opacity: 1;--md-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

package/list/internal/listitem/forced-colors-styles.scss

@@ -11,12 +11,12 @@
   :host {
     @include list-item.theme(
       (
-        list-item-disabled-label-text-color: GrayText,
-        list-item-disabled-label-text-opacity: 1,
-        list-item-disabled-leading-icon-color: GrayText,
-        list-item-disabled-leading-icon-opacity: 1,
-        list-item-disabled-trailing-icon-color: GrayText,
-        list-item-disabled-trailing-icon-opacity: 1,
+        disabled-label-text-color: GrayText,
+        disabled-label-text-opacity: 1,
+        disabled-leading-icon-color: GrayText,
+        disabled-leading-icon-opacity: 1,
+        disabled-trailing-icon-color: GrayText,
+        disabled-trailing-icon-opacity: 1,
       )
     );
   }

package/list/internal/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{--_list-item-container-color: var(--md-list-item-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_list-item-container-shape: var(--md-list-item-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-item-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-label-text-opacity: var(--md-list-item-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-item-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-leading-icon-opacity: var(--md-list-item-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-item-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-trailing-icon-opacity: var(--md-list-item-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-item-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-focus-leading-icon-icon-color: var(--md-list-item-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-trailing-icon-icon-color: var(--md-list-item-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-item-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-leading-icon-icon-color: var(--md-list-item-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-item-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-state-layer-opacity: var(--md-list-item-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-item-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-item-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-label-text-line-height: var(--md-list-item-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-item-list-item-label-text-type, var(--md-sys-typescale-body-large, 400 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-large-leading-video-height: var(--md-list-item-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-item-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-item-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-leading-avatar-color: var(--md-list-item-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-item-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-item-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-item-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-item-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-item-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-item-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-item-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-item-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-item-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-item-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-item-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-leading-icon-icon-color: var(--md-list-item-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-item-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-state-layer-opacity: var(--md-list-item-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-item-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-item-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-item-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-item-list-item-supporting-text-type, var(--md-sys-typescale-body-medium, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_list-item-three-line-container-height: var(--md-list-item-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-item-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-item-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-item-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-item-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-item-list-item-trailing-supporting-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_list-item-two-line-container-height: var(--md-list-item-list-item-two-line-container-height, 72px);--_list-item-leading-element-leading-space: var(--md-list-item-list-item-leading-element-leading-space, 16px);--_list-item-leading-space: var(--md-list-item-list-item-leading-space, 16px);--_list-item-leading-video-leading-space: var(--md-list-item-list-item-leading-video-leading-space, 0px);--_list-item-trailing-element-headline-trailing-element-space: var(--md-list-item-list-item-trailing-element-headline-trailing-element-space, 16px);--_list-item-trailing-space: var(--md-list-item-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_list-item-hover-state-layer-color);--md-ripple-hover-opacity: var(--_list-item-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_list-item-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_list-item-pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape);-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled):not(.noninteractive){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%;box-sizing:border-box;border-radius:inherit;padding-inline-end:var(--_list-item-trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_list-item-one-line-container-height)}.with-two-line{min-height:var(--_list-item-two-line-container-height)}.with-three-line{min-height:var(--_list-item-three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}slot[name=start]::slotted([data-variant=icon]),slot[name=start]::slotted([data-variant=image]),slot[name=start]::slotted([data-variant=avatar]){margin-inline-start:var(--_list-item-leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_list-item-leading-space);z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;z-index:1}.with-three-line .end{justify-content:start}slot[name=end]::slotted(*),.trailing-supporting-text{margin-inline-start:var(--_list-item-trailing-element-headline-trailing-element-space)}.label-text{display:flex;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_list-item-label-text-color);font:var(--_list-item-label-text-type)}:hover .label-text{color:var(--_list-item-hover-label-text-color)}:focus .label-text{color:var(--_list-item-focus-label-text-color)}:active .label-text{color:var(--_list-item-pressed-label-text-color)}.disabled .label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font:var(--_list-item-supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{padding-inline-start:16px;font:var(--_list-item-trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape);padding-block:calc((var(--_list-item-two-line-container-height) - var(--_list-item-leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){padding-block:0}::slotted(*){fill:currentColor}slot[name=start]::slotted([data-variant=icon]){font-size:var(--_list-item-leading-icon-size);width:var(--_list-item-leading-icon-size);height:var(--_list-item-leading-icon-size);color:var(--_list-item-leading-icon-color)}.with-three-line slot[name=start]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){font-size:var(--_list-item-trailing-icon-size);width:var(--_list-item-trailing-icon-size);height:var(--_list-item-trailing-icon-size);color:var(--_list-item-trailing-icon-color)}.with-three-line slot[name=end]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){color:var(--_list-item-pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-leading-icon-opacity);color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);color:var(--_list-item-disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_list-item-leading-avatar-color);height:var(--_list-item-leading-avatar-size);width:var(--_list-item-leading-avatar-size);border-radius:var(--_list-item-leading-avatar-shape);color:var(--_list-item-leading-avatar-label-color);font:var(--_list-item-leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_list-item-small-leading-video-height);width:var(--_list-item-leading-video-width);border-radius:var(--_list-item-leading-video-shape);margin-inline-start:var(--_list-item-leading-video-leading-space);padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){padding-block:0}::slotted([data-variant=video-large]){padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-large-leading-video-height))/2);height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_container-shape: var(--md-list-item-container-shape, 0px);--_disabled-label-text-color: var(--md-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-list-item-disabled-label-text-opacity, 0.3);--_disabled-leading-icon-color: var(--md-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-list-item-disabled-leading-icon-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-list-item-disabled-trailing-icon-opacity, 0.38);--_focus-label-text-color: var(--md-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-leading-icon-icon-color: var(--md-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-icon-color: var(--md-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-icon-color: var(--md-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--_hover-trailing-icon-icon-color: var(--md-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-size: var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_large-leading-video-height: var(--md-list-item-large-leading-video-height, 69px);--_leading-avatar-label-color: var(--md-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_leading-avatar-label-font: var(--md-list-item-leading-avatar-label-font, var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto)));--_leading-avatar-label-line-height: var(--md-list-item-leading-avatar-label-line-height, var(--md-sys-typescale-title-medium-line-height, 1.5rem));--_leading-avatar-label-size: var(--md-list-item-leading-avatar-label-size, var(--md-sys-typescale-title-medium-size, 1rem));--_leading-avatar-label-weight: var(--md-list-item-leading-avatar-label-weight, var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_leading-avatar-color: var(--md-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_leading-avatar-shape: var(--md-list-item-leading-avatar-shape, 9999px);--_leading-avatar-size: var(--md-list-item-leading-avatar-size, 40px);--_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-list-item-leading-icon-size, 18px);--_leading-image-height: var(--md-list-item-leading-image-height, 56px);--_leading-image-shape: var(--md-list-item-leading-image-shape, 0px);--_leading-image-width: var(--md-list-item-leading-image-width, 56px);--_leading-video-shape: var(--md-list-item-leading-video-shape, 0px);--_leading-video-width: var(--md-list-item-leading-video-width, 100px);--_one-line-container-height: var(--md-list-item-one-line-container-height, 56px);--_pressed-label-text-color: var(--md-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-leading-icon-icon-color: var(--md-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12);--_pressed-trailing-icon-icon-color: var(--md-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_small-leading-video-height: var(--md-list-item-small-leading-video-height, 56px);--_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-list-item-supporting-text-weight, var(--md-ref-typeface-weight-regular, 400));--_three-line-container-height: var(--md-list-item-three-line-container-height, 88px);--_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-list-item-trailing-icon-size, 24px);--_trailing-supporting-text-color: var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-supporting-text-font: var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_trailing-supporting-text-line-height: var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_trailing-supporting-text-size: var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.688rem));--_trailing-supporting-text-weight: var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_two-line-container-height: var(--md-list-item-two-line-container-height, 72px);--_leading-element-leading-space: var(--md-list-item-leading-element-leading-space, 16px);--_leading-space: var(--md-list-item-leading-space, 16px);--_leading-video-leading-space: var(--md-list-item-leading-video-leading-space, 0px);--_trailing-element-headline-trailing-element-space: var(--md-list-item-trailing-element-headline-trailing-element-space, 16px);--_trailing-space: var(--md-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_container-color);border-radius:var(--_container-shape);-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled):not(.noninteractive){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%;box-sizing:border-box;border-radius:inherit;padding-inline-end:var(--_trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_one-line-container-height)}.with-two-line{min-height:var(--_two-line-container-height)}.with-three-line{min-height:var(--_three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}slot[name=start]::slotted([data-variant=icon]),slot[name=start]::slotted([data-variant=image]),slot[name=start]::slotted([data-variant=avatar]){margin-inline-start:var(--_leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;min-width:0;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_leading-space);z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;z-index:1}.with-three-line .end{justify-content:start}slot[name=end]::slotted(*),.trailing-supporting-text{margin-inline-start:var(--_trailing-element-headline-trailing-element-space)}.label-text{text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight)}:hover .label-text{color:var(--_hover-label-text-color)}:focus .label-text{color:var(--_focus-label-text-color)}:active .label-text{color:var(--_pressed-label-text-color)}.disabled .label-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{font-family:var(--_trailing-supporting-text-font);font-size:var(--_trailing-supporting-text-size);line-height:var(--_trailing-supporting-text-line-height);font-weight:var(--_trailing-supporting-text-weight)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_leading-image-height);width:var(--_leading-image-width);border-radius:var(--_leading-image-shape);margin-block:calc((var(--_two-line-container-height) - var(--_leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){margin-block:0}::slotted(*){fill:currentColor}slot[name=start]::slotted([data-variant=icon]){font-size:var(--_leading-icon-size);width:var(--_leading-icon-size);height:var(--_leading-icon-size);color:var(--_leading-icon-color)}.with-three-line slot[name=start]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){font-size:var(--_trailing-icon-size);width:var(--_trailing-icon-size);height:var(--_trailing-icon-size);color:var(--_trailing-icon-color)}.with-three-line slot[name=end]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){color:var(--_hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){color:var(--_hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){color:var(--_focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){color:var(--_focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){color:var(--_pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){color:var(--_pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_disabled-leading-icon-opacity);color:var(--_disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_disabled-trailing-icon-opacity);color:var(--_disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_leading-avatar-color);height:var(--_leading-avatar-size);width:var(--_leading-avatar-size);border-radius:var(--_leading-avatar-shape);color:var(--_leading-avatar-label-color);font-family:var(--_leading-avatar-label-font);font-size:var(--_leading-avatar-label-size);line-height:var(--_leading-avatar-label-line-height);font-weight:var(--_leading-avatar-label-weight)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_small-leading-video-height);width:var(--_leading-video-width);border-radius:var(--_leading-video-shape);margin-inline-start:var(--_leading-video-leading-space);margin-block:calc((var(--_three-line-container-height) - var(--_small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){margin-block:0}::slotted([data-variant=video-large]){margin-block:calc((var(--_three-line-container-height) - var(--_large-leading-video-height))/2);height:var(--_large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */
 `;
 //# sourceMappingURL=list-item-styles.css.js.map