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

package/linearprogress/lib/_linear-progress.scss

@@ -4,16 +4,23 @@
 //
 
 // go/keep-sorted start
-@use '../../sass/theme';
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $reference: tokens.md-comp-linear-progress-indicator-values();
-  $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: theme.create-theme-vars($tokens, 'linear-progress');
+  $supported-tokens: tokens.$md-comp-linear-progress-indicator-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
 
-  @include theme.emit-theme-vars($tokens);
+    @if $value {
+      --md-linear-progress-#{$token}: #{$value};
+    }
+  }
 }
 
 // note, transition settings match MDC
@@ -46,76 +53,12 @@ $rtl-selectors: (
   '.linear-progress:dir(rtl)'
 );
 
-// Generates keyframes for ltr and rtl.
-@mixin directional-keyframes($dir) {
-  $is-rtl: $dir == 'rtl';
-  $sign: if($is-rtl, -1, 1);
-  $suffix: if($is-rtl, '-rtl', '');
-
-  @keyframes buffering#{$suffix} {
-    0% {
-      // the amount to animate is aligned with the default track background
-      transform: translateX(calc(#{$sign} * #{$_track-background-width}));
-    }
-  }
-
-  // note, the numbers here come directly from the mdc implementation.
-  // see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
-  // keyframes
-  @keyframes primary-indeterminate-translate#{$suffix} {
-    0% {
-      transform: translateX(0px);
-    }
-
-    20% {
-      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-      transform: translateX(0px);
-    }
-
-    59.15% {
-      animation-timing-function: cubic-bezier(
-        0.302435,
-        0.381352,
-        0.55,
-        0.956352
-      );
-      transform: translateX(calc(#{$sign} * 83.6714%));
-    }
-
-    100% {
-      transform: translateX(calc(#{$sign} * 200.611%));
-    }
-  }
-
-  @keyframes secondary-indeterminate-translate#{$suffix} {
-    0% {
-      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-      transform: translateX(0px);
-    }
-
-    25% {
-      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-      transform: translateX(calc(#{$sign} * 37.6519%));
-    }
-
-    48.35% {
-      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-      transform: translateX(calc(#{$sign} * 84.3862%));
-    }
-
-    100% {
-      transform: translateX(calc(#{$sign} * 160.278%));
-    }
-  }
-}
-
 @mixin styles() {
   $tokens: tokens.md-comp-linear-progress-indicator-values();
-  $tokens: theme.create-theme-vars($tokens, 'linear-progress');
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-linear-progress-#{$token}, #{$value});
     }
 
     display: block;
@@ -331,8 +274,8 @@ $rtl-selectors: (
     }
   }
 
-  @include directional-keyframes('ltr');
-  @include directional-keyframes('rtl');
+  @include _directional-keyframes('ltr');
+  @include _directional-keyframes('rtl');
 
   @keyframes four-colors {
     0% {
@@ -378,3 +321,66 @@ $rtl-selectors: (
     }
   }
 }
+
+// Generates keyframes for ltr and rtl.
+@mixin _directional-keyframes($dir) {
+  $is-rtl: $dir == 'rtl';
+  $sign: if($is-rtl, -1, 1);
+  $suffix: if($is-rtl, '-rtl', '');
+
+  @keyframes buffering#{$suffix} {
+    0% {
+      // the amount to animate is aligned with the default track background
+      transform: translateX(calc(#{$sign} * #{$_track-background-width}));
+    }
+  }
+
+  // note, the numbers here come directly from the mdc implementation.
+  // see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
+  // keyframes
+  @keyframes primary-indeterminate-translate#{$suffix} {
+    0% {
+      transform: translateX(0px);
+    }
+
+    20% {
+      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+      transform: translateX(0px);
+    }
+
+    59.15% {
+      animation-timing-function: cubic-bezier(
+        0.302435,
+        0.381352,
+        0.55,
+        0.956352
+      );
+      transform: translateX(calc(#{$sign} * 83.6714%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 200.611%));
+    }
+  }
+
+  @keyframes secondary-indeterminate-translate#{$suffix} {
+    0% {
+      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+      transform: translateX(0px);
+    }
+
+    25% {
+      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+      transform: translateX(calc(#{$sign} * 37.6519%));
+    }
+
+    48.35% {
+      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+      transform: translateX(calc(#{$sign} * 84.3862%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 160.278%));
+    }
+  }
+}

package/linearprogress/lib/linear-progress.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 /**
- * LinearProgress component.
+ * A linear progress component.
  */
 export declare class LinearProgress extends LitElement {
     /**
@@ -25,11 +25,11 @@ export declare class LinearProgress extends LitElement {
      *
      */
     fourColors: boolean;
-    protected rootEl: HTMLElement;
-    protected animationReady: boolean;
-    protected resizeObserver: ResizeObserver | null;
+    private readonly rootEl;
+    private animationReady;
+    private resizeObserver;
     protected render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
-    protected restartAnimation(): Promise<void>;
+    private restartAnimation;
 }

package/linearprogress/lib/linear-progress.js

@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 /**
- * LinearProgress component.
+ * A linear progress component.
  */
 export class LinearProgress extends LitElement {
     constructor() {

package/linearprogress/lib/linear-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * LinearProgress component.\n */\nexport class LinearProgress extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * Whether or not to render indeterminate progress in an animated state.\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * Progress to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) progress = 0;\n\n  /**\n   * Buffer amount to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) buffer = 1;\n\n  /**\n   * Whether or not to render indeterminate mode using 4 colors instead of one.\n   *\n   */\n  @property({type: Boolean, attribute: 'four-colors'}) fourColors = false;\n\n  @query('.linear-progress') protected rootEl!: HTMLElement;\n\n  @state() protected animationReady = true;\n  protected resizeObserver: ResizeObserver|null = null;\n\n  // Note, the indeterminate animation is rendered with transform %'s\n  // Previously, this was optimized to use px calculated with the resizeObserver\n  // due to a now fixed Chrome bug: crbug.com/389359.\n  protected override render() {\n    const rootClasses = {\n      'indeterminate': this.indeterminate,\n      'animation-ready': this.animationReady,\n      'four-colors': this.fourColors\n    };\n\n    const progressStyles = {\n      transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`\n    };\n    const bufferStyles = {\n      transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`\n    };\n\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div\n          role=\"progressbar\"\n          class=\"linear-progress ${classMap(rootClasses)}\"\n          aria-label=\"${ariaLabel || nothing}\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"1\"\n          aria-valuenow=\"${this.indeterminate ? nothing : this.progress}\">\n        <div class=\"track\"></div>\n        <div class=\"buffer-bar\" style=${styleMap(bufferStyles)}></div>\n        <div class=\"bar primary-bar\" style=${styleMap(progressStyles)}>\n          <div class=\"bar-inner\"></div>\n        </div>\n        <div class=\"bar secondary-bar\">\n          <div class=\"bar-inner\"></div>\n        </div>\n      </div>`;\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback();\n    // wait for rendering.\n    await this.updateComplete;\n    if (this.resizeObserver) {\n      return;\n    }\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.indeterminate) {\n        this.restartAnimation();\n      }\n    });\n    this.resizeObserver.observe(this.rootEl);\n  }\n\n  override disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  // When size changes, restart the animation\n  // to avoid jank.\n  protected async restartAnimation() {\n    await this.updateComplete;\n    this.animationReady = false;\n    await new Promise(requestAnimationFrame);\n    this.animationReady = true;\n    await this.updateComplete;\n  }\n}\n"]}
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * A linear progress component.\n */\nexport class LinearProgress extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * Whether or not to render indeterminate progress in an animated state.\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * Progress to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) progress = 0;\n\n  /**\n   * Buffer amount to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) buffer = 1;\n\n  /**\n   * Whether or not to render indeterminate mode using 4 colors instead of one.\n   *\n   */\n  @property({type: Boolean, attribute: 'four-colors'}) fourColors = false;\n\n  @query('.linear-progress') private readonly rootEl!: HTMLElement|null;\n\n  @state() private animationReady = true;\n  private resizeObserver: ResizeObserver|null = null;\n\n  // Note, the indeterminate animation is rendered with transform %'s\n  // Previously, this was optimized to use px calculated with the resizeObserver\n  // due to a now fixed Chrome bug: crbug.com/389359.\n  protected override render() {\n    const rootClasses = {\n      'indeterminate': this.indeterminate,\n      'animation-ready': this.animationReady,\n      'four-colors': this.fourColors\n    };\n\n    const progressStyles = {\n      transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`\n    };\n    const bufferStyles = {\n      transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`\n    };\n\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div\n          role=\"progressbar\"\n          class=\"linear-progress ${classMap(rootClasses)}\"\n          aria-label=\"${ariaLabel || nothing}\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"1\"\n          aria-valuenow=\"${this.indeterminate ? nothing : this.progress}\">\n        <div class=\"track\"></div>\n        <div class=\"buffer-bar\" style=${styleMap(bufferStyles)}></div>\n        <div class=\"bar primary-bar\" style=${styleMap(progressStyles)}>\n          <div class=\"bar-inner\"></div>\n        </div>\n        <div class=\"bar secondary-bar\">\n          <div class=\"bar-inner\"></div>\n        </div>\n      </div>`;\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback();\n    // wait for rendering.\n    await this.updateComplete;\n    if (this.resizeObserver) {\n      return;\n    }\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.indeterminate) {\n        this.restartAnimation();\n      }\n    });\n    this.resizeObserver.observe(this.rootEl!);\n  }\n\n  override disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  // When size changes, restart the animation\n  // to avoid jank.\n  private async restartAnimation() {\n    await this.updateComplete;\n    this.animationReady = false;\n    await new Promise(requestAnimationFrame);\n    this.animationReady = true;\n    await this.updateComplete;\n  }\n}\n"]}

package/list/lib/_list.scss

@@ -21,7 +21,9 @@
   $tokens: theme.validate-theme(tokens.md-comp-list-values(), $tokens);
 
   @each $token, $value in $tokens {
-    --md-list-#{$token}: #{$value};
+    @if $value {
+      --md-list-#{$token}: #{$value};
+    }
   }
 }
 
@@ -30,7 +32,7 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-list-#{$token}, #{$value});
     }
 
     color: unset;

package/list/lib/list.d.ts

@@ -3,8 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
+import { LitElement } from 'lit';
 import { ARIARole } from '../../types/aria.js';
 import { ListItem } from './listitem/list-item.js';
 export declare class List extends LitElement {
@@ -14,7 +13,7 @@ export declare class List extends LitElement {
      * The tabindex of the underlying list.
      */
     listTabIndex: number;
-    listRoot: HTMLElement;
+    listRoot: HTMLElement | null;
     /**
      * An array of activatable and disableable list items. Queries every assigned
      * element that has the `md-list-item` attribute.
@@ -24,19 +23,15 @@ export declare class List extends LitElement {
      * children / directly slotted elements.
      */
     items: ListItem[];
-    render(): TemplateResult;
+    protected render(): import("lit-html").TemplateResult<1>;
     /**
      * Renders the main list element.
      */
-    protected renderList(): TemplateResult<1>;
-    /**
-     * The classes to be applied to the underlying list.
-     */
-    protected getListClasses(): ClassInfo;
+    private renderList;
     /**
      * The content to be slotted into the list.
      */
-    protected renderContent(): TemplateResult<1>;
+    private renderContent;
     /**
      * Handles keyboard navigation in the list.
      *
@@ -103,7 +98,7 @@ export declare class List extends LitElement {
      * @param index {{index: number}} The index to search from.
      * @returns The next activatable item or `null` if none are activatable.
      */
-    protected static getNextItem<T extends ListItem>(items: T[], index: number): T;
+    private static getNextItem;
     /**
      * Retrieves the the previous non-disabled item of a given array of items.
      *
@@ -111,5 +106,5 @@ export declare class List extends LitElement {
      * @param index {{index: number}} The index to search from.
      * @returns The previous activatable item or `null` if none are activatable.
      */
-    protected static getPrevItem<T extends ListItem>(items: T[], index: number): T;
+    private static getPrevItem;
 }

package/list/lib/list.js

@@ -7,9 +7,7 @@ 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 { requestUpdateOnAriaChange } from '../../aria/delegate.js';
-import { keydownHandler } from '../../focus/strong-focus.js';
 const NAVIGABLE_KEYS = {
     ArrowDown: 'ArrowDown',
     ArrowUp: 'ArrowUp',
@@ -40,7 +38,7 @@ export class List extends LitElement {
         // Needed for closure conformance
         const { ariaLabel } = this;
         return html `
-    <ul class="md3-list ${classMap(this.getListClasses())}"
+    <ul class="md3-list"
         aria-label=${ariaLabel || nothing}
         tabindex=${this.listTabIndex}
         role=${this.type || nothing}
@@ -50,12 +48,6 @@ export class List extends LitElement {
     </ul>
   `;
     }
-    /**
-     * The classes to be applied to the underlying list.
-     */
-    getListClasses() {
-        return {};
-    }
     /**
      * The content to be slotted into the list.
      */
@@ -83,7 +75,6 @@ export class List extends LitElement {
         if (activeItemRecord) {
             activeItemRecord.item.active = false;
         }
-        keydownHandler(event);
         event.preventDefault();
         switch (key) {
             // Activate the next item
@@ -163,7 +154,7 @@ export class List extends LitElement {
         return activeItem;
     }
     focus() {
-        this.listRoot.focus();
+        this.listRoot?.focus();
     }
     /**
      * Retrieves the the first activated item of a given array of items.

package/list/lib/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {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"]}
+{"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 {requestUpdateOnAriaChange} from '../../aria/delegate.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|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=${(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  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    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  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    return null;\n  }\n}\n"]}

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

@@ -20,7 +20,9 @@
   $tokens: theme.validate-theme(tokens.md-comp-list-item-values(), $tokens);
 
   @each $token, $value in $tokens {
-    --md-list-item-#{$token}: #{$value};
+    @if $value {
+      --md-list-item-#{$token}: #{$value};
+    }
   }
 }
 
@@ -29,7 +31,7 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-list-item-#{$token}, #{$value});
     }
   }
 
@@ -46,8 +48,8 @@
 
     @include focus-ring.theme(
       (
-        offset: -3px,
-        shape: map.get(tokens.md-sys-shape-values(), corner-extra-small),
+        'offset': -3px,
+        'shape': map.get(tokens.md-sys-shape-values(), 'corner-extra-small'),
       )
     );
     @include ripple.theme(
@@ -72,6 +74,8 @@
     text-decoration: none;
     background-color: var(--_list-item-container-color);
     border-radius: var(--_list-item-container-shape);
+    // hide android tap color since we have ripple
+    -webkit-tap-highlight-color: transparent;
 
     &:not(.disabled) {
       cursor: pointer;

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-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 */
+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-offset: -3px;--md-focus-ring-shape: 4px;--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);-webkit-tap-highlight-color:rgba(0,0,0,0)}.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

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

@@ -1 +1 @@
-{"version":3,"file":"list-item-styles.css.js","sourceRoot":"","sources":["list-item-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_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 */\n`;\n "]}
+{"version":3,"file":"list-item-styles.css.js","sourceRoot":"","sources":["list-item-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-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-offset: -3px;--md-focus-ring-shape: 4px;--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);-webkit-tap-highlight-color:rgba(0,0,0,0)}.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 */\n`;\n "]}