@material/web 1.0.0-pre.5 → 1.0.0-pre.7

package/linearprogress/linear-progress.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { LinearProgress } from './lib/linear-progress.js';
+import { styles } from './lib/linear-progress-styles.css.js';
+/**
+ * @summary Linear progress indicators display progress by animating along the
+ * length of a fixed, visible track.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ */
+let MdLinearProgress = class MdLinearProgress extends LinearProgress {
+};
+MdLinearProgress.styles = [styles];
+MdLinearProgress = __decorate([
+    customElement('md-linear-progress')
+], MdLinearProgress);
+export { MdLinearProgress };
+//# sourceMappingURL=linear-progress.js.map

package/linearprogress/linear-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,qCAAqC,CAAC;AAQ3D;;;;;;;;GAQG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {LinearProgress} from './lib/linear-progress.js';\nimport {styles} from './lib/linear-progress-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-linear-progress': MdLinearProgress;\n  }\n}\n\n/**\n * @summary Linear progress indicators display progress by animating along the\n * length of a fixed, visible track.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n */\n@customElement('md-linear-progress')\nexport class MdLinearProgress extends LinearProgress {\n  static override styles = [styles];\n}\n"]}

package/list/harness.d.ts

@@ -6,6 +6,7 @@
 import { Harness } from '../testing/harness.js';
 import { List } from './lib/list.js';
 import { ListItemHarness } from './lib/listitem/harness.js';
+export { ListItemHarness } from './lib/listitem/harness.js';
 /**
  * Test harness for list.
  */

package/list/harness.js

@@ -5,6 +5,7 @@
  */
 import { Harness } from '../testing/harness.js';
 import { ListItemHarness } from './lib/listitem/harness.js';
+export { ListItemHarness } from './lib/listitem/harness.js';
 /**
  * Test harness for list.
  */

package/list/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,mCAAmC;IACnC,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,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 {List} from './lib/list.js';\nimport {ListItemHarness} from './lib/listitem/harness.js';\n\n/**\n * Test harness for list.\n */\nexport class ListHarness extends Harness<List> {\n  /**\n   * Returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return List item harnesses. */\n  getItems() {\n    return this.element.items.map((item) => new ListItemHarness(item));\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,mCAAmC;IACnC,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,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 {List} from './lib/list.js';\nimport {ListItemHarness} from './lib/listitem/harness.js';\n\nexport {ListItemHarness} from './lib/listitem/harness.js';\n\n/**\n * Test harness for list.\n */\nexport class ListHarness extends Harness<List> {\n  /**\n   * Returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return List item harnesses. */\n  getItems() {\n    return this.element.items.map((item) => new ListItemHarness(item));\n  }\n}\n"]}

package/list/lib/_list.scss

@@ -12,25 +12,21 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../elevation/lib/elevation';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './listitem/list-item';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $reference: tokens.md-comp-list-values();
-  $reference: resolve-tokens($reference);
-  $tokens: resolve-tokens($tokens);
-  $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: theme.create-theme-vars($tokens, list);
+  $tokens: theme.validate-theme(tokens.md-comp-list-values(), $tokens);
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-list-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
-  $tokens: resolve-tokens(tokens.md-comp-list-values());
-  $tokens: theme.create-theme-vars($tokens, list);
+  $tokens: tokens.md-comp-list-values();
 
   :host {
     @each $token, $value in $tokens {
@@ -43,6 +39,7 @@
 
   .md3-list {
     background-color: var(--_container-color);
+    border-radius: inherit;
     display: block;
     list-style-type: none;
     margin: 0;
@@ -54,44 +51,3 @@
     position: relative;
   }
 }
-
-/// Resolves the tokens that are specific to list.
-///
-/// The tokenset for list include list plus all of list item. We do not want to
-/// duplicate tokens and custom properties across md-list and md-list-item.
-/// So here we resolve list-items tokens, and resolve the difference between
-/// the full set of tokens and the ones specific to list-item.
-@function resolve-tokens($tokens) {
-  // Accept container-color token in the theme() mixin.
-  $container-color: map.get($tokens, container-color);
-
-  @if not $container-color {
-    // If not defined, rename the list-item-container-color token. This is
-    // useful for our styles() mixin where we simply feed this function the comp
-    // tokens from the compiler and no `container-color` token.
-    $container-color: map.get($tokens, list-item-container-color);
-    $tokens: map.set($tokens, container-color, $container-color);
-  }
-
-  $list-tokens: remove-unused-tokens($tokens);
-
-  @return $list-tokens;
-}
-
-// removes unused tokens
-@function remove-unused-tokens($tokens) {
-  $unused-tokens: ();
-  @each $token in map-keys($tokens) {
-    $index: string.index($token, 'list-item');
-
-    @if $index {
-      $unused-tokens: list.append($unused-tokens, $token);
-    }
-  }
-
-  @each $token in $unused-tokens {
-    $tokens: map.remove($tokens, $token);
-  }
-
-  @return $tokens;
-}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fffbfe));color:unset;min-width:300px}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;min-width:300px}.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 */
 `;
 //# sourceMappingURL=list-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fffbfe));color:unset;min-width:300px}.md3-list{background-color:var(--_container-color);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;min-width:300px}.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 "]}

package/list/lib/list.d.ts

@@ -9,9 +9,7 @@ import { ARIARole } from '../../types/aria.js';
 import { ListItem } from './listitem/list-item.js';
 export declare class List extends LitElement {
     static shadowRootOptions: ShadowRootInit;
-    ariaLabel: string;
-    ariaActivedescendant: string;
-    role: ARIARole;
+    type: ARIARole | '';
     /**
      * The tabindex of the underlying list.
      */

package/list/lib/list.js

@@ -3,14 +3,13 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-// Required for @ariaProperty
-// tslint:disable:no-new-decorators
-import { html, LitElement } from 'lit';
+var _a;
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
+import { keydownHandler } from '../../focus/strong-focus.js';
 const NAVIGABLE_KEYS = {
     ArrowDown: 'ArrowDown',
     ArrowUp: 'ArrowUp',
@@ -25,8 +24,7 @@ function isNavigableKey(key) {
 export class List extends LitElement {
     constructor() {
         super(...arguments);
-        // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-        this.role = 'list';
+        this.type = 'list';
         /**
          * The tabindex of the underlying list.
          */
@@ -39,11 +37,13 @@ export class List extends LitElement {
      * Renders the main list element.
      */
     renderList() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `
     <ul class="md3-list ${classMap(this.getListClasses())}"
-        aria-label="${ifDefined(this.ariaLabel)}"
+        aria-label=${ariaLabel || nothing}
         tabindex=${this.listTabIndex}
-        role=${this.role}
+        role=${this.type || nothing}
         @keydown=${this.handleKeydown}
         >
       ${this.renderContent()}
@@ -83,6 +83,7 @@ export class List extends LitElement {
         if (activeItemRecord) {
             activeItemRecord.item.active = false;
         }
+        keydownHandler(event);
         event.preventDefault();
         switch (key) {
             // Activate the next item
@@ -248,36 +249,21 @@ export class List extends LitElement {
         return null;
     }
 }
+_a = List;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 List.shadowRootOptions = { mode: 'open', delegatesFocus: true };
 __decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], List.prototype, "ariaLabel", void 0);
+    property()
+], List.prototype, "type", void 0);
 __decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-activedescendant', noAccessor: true }),
-    __metadata("design:type", String)
-], List.prototype, "ariaActivedescendant", void 0);
-__decorate([
-    ariaProperty
-    // tslint:disable-next-line
-    ,
-    property({ type: String, attribute: 'data-role', noAccessor: true })
-    // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-    ,
-    __metadata("design:type", String)
-], List.prototype, "role", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], List.prototype, "listTabIndex", void 0);
 __decorate([
-    query('.md3-list'),
-    __metadata("design:type", HTMLElement)
+    query('.md3-list')
 ], List.prototype, "listRoot", void 0);
 __decorate([
-    queryAssignedElements({ flatten: true, selector: '[md-list-item]' }),
-    __metadata("design:type", Array)
+    queryAssignedElements({ flatten: true, selector: '[md-list-item]' })
 ], List.prototype, "items", void 0);
 //# sourceMappingURL=list.js.map

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\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport {html, LitElement, 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 NAVIGABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n} as const;\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 override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty\n  @property(\n      {type: String, attribute: 'data-aria-activedescendant', noAccessor: true})\n  ariaActivedescendant!: string;\n\n  @ariaProperty\n  // tslint:disable-next-line\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  // @ts-ignore(b/264292293): Use `override` with TS 4.9+\n  role: ARIARole = 'list';\n\n  /**\n   * The tabindex of the underlying list.\n   */\n  @property({type: Number}) listTabIndex: number = 0;\n\n  @query('.md3-list') listRoot!: HTMLElement;\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  override render(): TemplateResult {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  protected renderList() {\n    return html`\n    <ul class=\"md3-list ${classMap(this.getListClasses())}\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        tabindex=${this.listTabIndex}\n        role=${this.role}\n        @keydown=${this.handleKeydown}\n        >\n      ${this.renderContent()}\n    </ul>\n  `;\n  }\n\n  /**\n   * The classes to be applied to the underlying list.\n   */\n  protected getListClasses(): ClassInfo {\n    return {};\n  }\n\n  /**\n   * The content to be slotted into the list.\n   */\n  protected renderContent() {\n    return html`<span><slot @click=${(e: Event) => {\n      e.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  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        if (activeItemRecord) {\n          const next = List.getNextItem(items, activeItemRecord.index);\n\n          if (next) next.active = true;\n        } else {\n          List.activateFirstItem(items);\n        }\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        if (activeItemRecord) {\n          const prev = List.getPrevItem(items, activeItemRecord.index);\n          if (prev) prev.active = true;\n        } else {\n          items[items.length - 1].active = true;\n        }\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  /**\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   */\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  }\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   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\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   * @returns A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\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 the first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\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        };\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the 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   * @returns The first activatable item or `null` if none are activatable.\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 the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns The last activatable item or `null` if none are activatable.\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 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   * @returns The next activatable item or `null` if none are activatable.\n   */\n  protected 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    return null;\n  }\n\n  /**\n   * Retrieves the 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   * @returns The previous activatable item or `null` if none are activatable.\n   */\n  protected 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    return 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, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {keydownHandler} from '../../focus/strong-focus.js';\nimport {ARIAMixinStrict, ARIARole} from '../../types/aria.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\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(this);\n  }\n\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}) listTabIndex = 0;\n\n  @query('.md3-list') listRoot!: HTMLElement;\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  override render(): TemplateResult {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  protected renderList() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n    <ul class=\"md3-list ${classMap(this.getListClasses())}\"\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 classes to be applied to the underlying list.\n   */\n  protected getListClasses(): ClassInfo {\n    return {};\n  }\n\n  /**\n   * The content to be slotted into the list.\n   */\n  protected renderContent() {\n    return html`<span><slot @click=${(e: Event) => {\n      e.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  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    keydownHandler(event);\n    event.preventDefault();\n\n    switch (key) {\n      // Activate the next item\n      case NAVIGABLE_KEYS.ArrowDown:\n        if (activeItemRecord) {\n          const next = List.getNextItem(items, activeItemRecord.index);\n\n          if (next) next.active = true;\n        } else {\n          List.activateFirstItem(items);\n        }\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        if (activeItemRecord) {\n          const prev = List.getPrevItem(items, activeItemRecord.index);\n          if (prev) prev.active = true;\n        } else {\n          items[items.length - 1].active = true;\n        }\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  /**\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   */\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  }\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   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\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   * @returns A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\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 the first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\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        };\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the 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   * @returns The first activatable item or `null` if none are activatable.\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 the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns The last activatable item or `null` if none are activatable.\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 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   * @returns The next activatable item or `null` if none are activatable.\n   */\n  protected 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    return null;\n  }\n\n  /**\n   * Retrieves the 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   * @returns The previous activatable item or `null` if none are activatable.\n   */\n  protected 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    return null;\n  }\n}\n"]}

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

@@ -17,18 +17,15 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    resolve-tokens(tokens.md-comp-list-values()),
-    resolve-tokens($tokens)
-  );
-  $tokens: theme.create-theme-vars($tokens, 'list');
+  $tokens: theme.validate-theme(tokens.md-comp-list-item-values(), $tokens);
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-list-item-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
-  $tokens: resolve-tokens(tokens.md-comp-list-values());
-  $tokens: theme.create-theme-vars($tokens, 'list');
+  $tokens: tokens.md-comp-list-item-values();
 
   :host {
     @each $token, $value in $tokens {
@@ -88,6 +85,11 @@
   .content-wrapper {
     display: flex;
     width: 100%;
+    border-radius: inherit;
+  }
+
+  md-ripple {
+    border-radius: inherit;
   }
 
   .with-one-line {
@@ -216,10 +218,8 @@
     }
 
     .with-three-line & {
-      /*
-       * In three line, trailing-supporting-text must align with the mid-line of
-       * the headline text.
-       */
+      // In three line, trailing-supporting-text must align with the mid-line of
+      // the headline text.
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -240,7 +240,7 @@
     height: var(--_list-item-leading-image-height);
     width: var(--_list-item-leading-image-width);
     border-radius: var(--_list-item-leading-image-shape);
-    /* Min height is two-line height */
+    // Min height is two-line height
     padding-block: calc(
       (
           var(--_list-item-two-line-container-height) -
@@ -264,7 +264,7 @@
     );
 
     .with-three-line & {
-      /* In three line, icon must align with the mid-line of headline text */
+      // In three line, icon must align with the mid-line of headline text
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -283,7 +283,7 @@
     );
 
     .with-three-line & {
-      /* In three line, icon must align with the mid-line of headline text */
+      // In three line, icon must align with the mid-line of headline text
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -393,7 +393,7 @@
     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);
-    /* Min height is three-line height */
+    // Min height is three-line height
     padding-block: calc(
       (
           var(--_list-item-three-line-container-height) -
@@ -401,17 +401,15 @@
         ) / 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.
-     */
+    // 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;
     }
   }
 
   ::slotted([data-variant='video-large']) {
-    /* Min height is three-line height */
+    // Min height is three-line height
     padding-block: calc(
       (
           var(--_list-item-three-line-container-height) -
@@ -421,64 +419,3 @@
     height: var(--_list-item-large-leading-video-height);
   }
 }
-
-/// Resolves the tokens that are specific to list-item.
-///
-/// The tokenset for list include list plus all of list item. We do not want to
-/// duplicate tokens and custom properties across md-list and md-list-item.
-/// So here we resolve list-items tokens by selecting only tokens that have
-/// 'list-item' in its name.
-@function resolve-tokens($tokens) {
-  // Values pulled from b/198759625 spreadsheet
-  $list-item-tokens: (
-    'list-item-leading-space': 16px,
-    'list-item-trailing-space': 16px,
-    'list-item-leading-element-leading-space': 16px,
-    'list-item-leading-video-leading-space': 0px,
-    // Commented out until the comments in the spreadsheet linked above are
-    // resolved regarding vertical alignment.
-    // 'list-item-leading-item-top-space': 8px,
-    // 'list-item-leading-video-top-space': 0px,
-    // 'list-item-leading-item-bottom-space': 8px,
-    // 'list-item-leading-video-bottom-space': 0px,
-    'list-item-trailing-element-headline-trailing-element-space': 16px,
-  );
-
-  @each $token, $value in $tokens {
-    $index: string.index($token, 'list-item');
-
-    @if $index {
-      $list-item-tokens: map.set($list-item-tokens, $token, $value);
-    }
-  }
-
-  $list-item-tokens: _remove-unused-tokens($list-item-tokens);
-
-  @return $list-item-tokens;
-}
-
-// removes unused tokens
-@function _remove-unused-tokens($tokens) {
-  $unused-tokens: (
-    'list-item-container-elevation',
-    'list-item-disabled-state-layer-color',
-    'list-item-disabled-state-layer-opacity',
-    'list-item-dragged-container-elevation',
-    'list-item-dragged-label-text-color',
-    'list-item-dragged-leading-icon-icon-color',
-    'list-item-dragged-state-layer-color',
-    'list-item-dragged-state-layer-opacity',
-    'list-item-dragged-trailing-icon-icon-color',
-    'list-item-overline-color',
-    'list-item-overline-type',
-    'list-item-selected-trailing-icon',
-    'list-item-selected-trailing-icon-color',
-    'list-item-unselected-trailing-icon-color'
-  );
-
-  @each $token in $unused-tokens {
-    $tokens: map.remove($tokens, $token);
-  }
-
-  @return $tokens;
-}

package/list/lib/listitem/forced-colors-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * 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 */
+`;
+//# sourceMappingURL=forced-colors-styles.css.js.map

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

@@ -0,0 +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 "]}

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

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './list-item';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :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,
+      )
+    );
+  }
+}

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{--_list-item-leading-space: var(--md-list-list-item-leading-space, 16px);--_list-item-trailing-space: var(--md-list-list-item-trailing-space, 16px);--_list-item-leading-element-leading-space: var(--md-list-list-item-leading-element-leading-space, 16px);--_list-item-leading-video-leading-space: var(--md-list-list-item-leading-video-leading-space, 0px);--_list-item-trailing-element-headline-trailing-element-space: var(--md-list-list-item-trailing-element-headline-trailing-element-space, 16px);--_list-item-container-color: var(--md-list-list-item-container-color, var(--md-sys-color-surface, #fffbfe));--_list-item-container-shape: var(--md-list-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-list-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #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, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-trailing-icon-opacity: var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-leading-icon-icon-color: var(--md-list-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-state-layer-color: var(--md-list-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-list-list-item-focus-state-layer-opacity, 0.12);--_list-item-focus-trailing-icon-icon-color: var(--md-list-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-leading-icon-icon-color: var(--md-list-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-list-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-line-height: var(--md-list-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-list-item-label-text-type, 400 1rem / 1.5rem Roboto);--_list-item-large-leading-video-height: var(--md-list-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-list-item-leading-avatar-label-type, 500 1rem / 1.5rem Roboto);--_list-item-leading-avatar-color: var(--md-list-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_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-icon-color: var(--md-list-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-list-item-leading-icon-size, 18px);--_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, 0px);--_list-item-leading-image-width: var(--md-list-list-item-leading-image-width, 56px);--_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, 100px);--_list-item-one-line-container-height: var(--md-list-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-leading-icon-icon-color: var(--md-list-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-list-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-list-item-supporting-text-type, 400 0.875rem / 1.25rem Roboto);--_list-item-three-line-container-height: var(--md-list-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-list-item-trailing-supporting-text-type, 500 0.688rem / 1rem Roboto);--_list-item-two-line-container-height: var(--md-list-list-item-two-line-container-height, 72px)}:host{color:unset;--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-offset:-3px;--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-ripple-focus-color:var(--_list-item-focus-state-layer-color);--md-ripple-focus-opacity:var(--_list-item-focus-state-layer-opacity)}.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)}.list-item:not(.disabled){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%}.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);padding-inline-end:var(--_list-item-trailing-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-end:var(--_list-item-trailing-element-headline-trailing-element-space)}.label-text{display:flex;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}slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-leading-icon-color);--md-icon-size:var(--_list-item-leading-icon-size)}.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]){--md-icon-color:var(--_list-item-trailing-icon-color);--md-icon-size:var(--_list-item-trailing-icon-size)}.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]){--md-icon-color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){--md-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);--md-icon-color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);--md-icon-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{--_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-state-layer-color: var(--md-list-item-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-focus-state-layer-opacity: var(--md-list-item-list-item-focus-state-layer-opacity, 0.12);--_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, 16px)}:host{color:unset;--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-offset:-3px;--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-ripple-focus-color:var(--_list-item-focus-state-layer-color);--md-ripple-focus-opacity:var(--_list-item-focus-state-layer-opacity)}.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)}.list-item:not(.disabled){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%;border-radius:inherit}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);padding-inline-end:var(--_list-item-trailing-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-end:var(--_list-item-trailing-element-headline-trailing-element-space)}.label-text{display:flex;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}slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-leading-icon-color);--md-icon-size:var(--_list-item-leading-icon-size)}.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]){--md-icon-color:var(--_list-item-trailing-icon-color);--md-icon-size:var(--_list-item-trailing-icon-size)}.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]){--md-icon-color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){--md-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);--md-icon-color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);--md-icon-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 */
 `;
 //# sourceMappingURL=list-item-styles.css.js.map