@material/web 1.0.0-pre.12 → 1.0.0-pre.14

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

@@ -0,0 +1,428 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../focus/focus-ring';
+@use '../../../icon/icon';
+@use '../../../internal/sass/theme';
+@use '../../../ripple/ripple';
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-list-item-values(), $tokens);
+
+  @each $token, $value in $tokens {
+    @if $value {
+      --md-list-item-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-list-item-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-list-item-#{$token}, #{$value});
+    }
+  }
+
+  @include _list-item;
+  @include _image;
+  @include _icon;
+  @include _avatar;
+  @include _video;
+}
+
+@mixin _list-item() {
+  :host {
+    color: unset;
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_list-item-hover-state-layer-color),
+        hover-opacity: var(--_list-item-hover-state-layer-opacity),
+        pressed-color: var(--_list-item-pressed-state-layer-color),
+        pressed-opacity: var(--_list-item-pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape': 8px,
+      )
+    );
+  }
+
+  .list-item {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    outline: none;
+    position: relative;
+    width: 100%;
+    text-decoration: none;
+    background-color: var(--_list-item-container-color);
+    border-radius: var(--_list-item-container-shape);
+    // hide android tap color since we have ripple
+    -webkit-tap-highlight-color: transparent;
+
+    &:not(.disabled):not(.noninteractive) {
+      cursor: pointer;
+    }
+
+    &.disabled {
+      pointer-events: none;
+    }
+  }
+
+  .content-wrapper {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: inherit;
+    padding-inline-end: var(--_list-item-trailing-space);
+  }
+
+  md-ripple {
+    border-radius: inherit;
+  }
+
+  .with-one-line {
+    min-height: var(--_list-item-one-line-container-height);
+  }
+
+  .with-two-line {
+    min-height: var(--_list-item-two-line-container-height);
+  }
+
+  .with-three-line {
+    min-height: var(--_list-item-three-line-container-height);
+  }
+
+  .start {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 auto;
+    z-index: 1;
+
+    .with-three-line & {
+      justify-content: start;
+    }
+  }
+
+  slot[name='start'] {
+    &::slotted([data-variant='icon']),
+    &::slotted([data-variant='image']),
+    &::slotted([data-variant='avatar']) {
+      margin-inline-start: var(--_list-item-leading-element-leading-space);
+    }
+  }
+
+  .body {
+    display: inline-flex;
+    justify-content: center;
+    flex-direction: column;
+    box-sizing: border-box;
+    flex: 1 0 0;
+    padding-inline-start: var(--_list-item-leading-space);
+    z-index: 1;
+  }
+
+  .end {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 0 0 auto;
+    z-index: 1;
+
+    .with-three-line & {
+      justify-content: start;
+    }
+  }
+
+  slot[name='end']::slotted(*),
+  .trailing-supporting-text {
+    margin-inline-start: var(
+      --_list-item-trailing-element-headline-trailing-element-space
+    );
+  }
+
+  .label-text {
+    display: flex;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+    color: var(--_list-item-label-text-color);
+    font: var(--_list-item-label-text-type);
+
+    :hover & {
+      color: var(--_list-item-hover-label-text-color);
+    }
+
+    :focus & {
+      color: var(--_list-item-focus-label-text-color);
+    }
+
+    :active & {
+      color: var(--_list-item-pressed-label-text-color);
+    }
+
+    .disabled & {
+      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);
+
+    // Box is supposed to be deprecated, but line-clamp is not. It's still on
+    // standards track and can only be applied with display: -webkit-box and
+    // -webkit-box-orient: vertical. Must change once un-prefixed line-clamp
+    // ships
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+
+    .disabled & {
+      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) & {
+      color: var(--_list-item-trailing-supporting-text-color);
+    }
+
+    .disabled & {
+      color: var(--_list-item-disabled-label-text-color);
+      opacity: var(--_list-item-disabled-label-text-opacity);
+    }
+
+    .with-three-line & {
+      // In three line, trailing-supporting-text must align with the mid-line of
+      // the headline text.
+      padding-block-start: calc(
+        (
+            var(--_list-item-label-text-line-height) -
+              var(--_list-item-trailing-supporting-text-line-height)
+          ) / 2
+      );
+    }
+  }
+
+  .focus-ring {
+    z-index: 1;
+  }
+}
+
+@mixin _image() {
+  ::slotted([data-variant='image']) {
+    display: inline-flex;
+    height: var(--_list-item-leading-image-height);
+    width: var(--_list-item-leading-image-width);
+    border-radius: var(--_list-item-leading-image-shape);
+    // Min height is two-line height
+    padding-block: calc(
+      (
+          var(--_list-item-two-line-container-height) -
+            var(--_list-item-leading-image-height)
+        ) / 2
+    );
+
+    .with-three-line & {
+      padding-block: 0;
+    }
+  }
+}
+
+@mixin _icon() {
+  slot[name='start']::slotted([data-variant='icon']) {
+    @include icon.theme(
+      (
+        color: var(--_list-item-leading-icon-color),
+        size: var(--_list-item-leading-icon-size),
+      )
+    );
+
+    .with-three-line & {
+      // In three line, icon must align with the mid-line of headline text
+      padding-block-start: calc(
+        (
+            var(--_list-item-label-text-line-height) -
+              var(--_list-item-leading-icon-size)
+          ) / 2
+      );
+    }
+  }
+
+  slot[name='end']::slotted([data-variant='icon']) {
+    @include icon.theme(
+      (
+        color: var(--_list-item-trailing-icon-color),
+        size: var(--_list-item-trailing-icon-size),
+      )
+    );
+
+    .with-three-line & {
+      // In three line, icon must align with the mid-line of headline text
+      padding-block-start: calc(
+        (
+            var(--_list-item-label-text-line-height) -
+              var(--_list-item-trailing-icon-size)
+          ) / 2
+      );
+    }
+  }
+
+  :hover {
+    slot[name='start']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-hover-leading-icon-icon-color),
+        )
+      );
+    }
+
+    slot[name='end']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-hover-trailing-icon-icon-color),
+        )
+      );
+    }
+  }
+
+  :focus {
+    slot[name='start']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-focus-leading-icon-icon-color),
+        )
+      );
+    }
+
+    slot[name='end']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-focus-trailing-icon-icon-color),
+        )
+      );
+    }
+  }
+
+  :active {
+    slot[name='start']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-pressed-leading-icon-icon-color),
+        )
+      );
+    }
+
+    slot[name='end']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          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);
+
+      @include icon.theme(
+        (
+          color: var(--_list-item-disabled-leading-icon-color),
+        )
+      );
+    }
+
+    slot[name='end']::slotted([data-variant='icon']) {
+      opacity: var(--_list-item-disabled-trailing-icon-opacity);
+
+      @include icon.theme(
+        (
+          color: var(--_list-item-disabled-trailing-icon-color),
+        )
+      );
+    }
+  }
+}
+
+@mixin _avatar() {
+  ::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);
+  }
+}
+
+@mixin _video() {
+  ::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);
+    // Min height is three-line height
+    padding-block: calc(
+      (
+          var(--_list-item-three-line-container-height) -
+            var(--_list-item-small-leading-video-height)
+        ) / 2
+    );
+
+    // Let it auto-layout so that we don't mess with the icons and supporting
+    // text that is supposed to be top-aligned in three-line.
+    .with-three-line & {
+      padding-block: 0;
+    }
+  }
+
+  ::slotted([data-variant='video-large']) {
+    // Min height is three-line height
+    padding-block: calc(
+      (
+          var(--_list-item-three-line-container-height) -
+            var(--_list-item-large-leading-video-height)
+        ) / 2
+    );
+    height: var(--_list-item-large-leading-video-height);
+  }
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { Harness } from '../../../testing/harness.js';
+import { ListItem } from './list-item.js';
+declare const NAVIGABLE_KEYS: {
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowUp: "ArrowUp";
+    readonly Home: "Home";
+    readonly End: "End";
+};
+/**
+ * Keys that are handled by MdList. Keys not included in this are not handled by
+ * MdList and should be dispatched by yourself.
+ */
+export type HandledListKeys = typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];
+/**
+ * Test harness for list item.
+ */
+export declare class ListItemHarness extends Harness<ListItem & LitElement> {
+    getInteractiveElement(): Promise<HTMLElement>;
+    /**
+     * Constructs keyboard events that are handled by List and makes sure that
+     * they are constructed in a manner that List understands.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    pressHandledKey<T extends string = HandledListKeys>(key: T): Promise<void>;
+}
+export {};

package/list/internal/listitem/harness.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../../../testing/harness.js';
+const NAVIGABLE_KEYS = {
+    'ArrowDown': 'ArrowDown',
+    'ArrowUp': 'ArrowUp',
+    'Home': 'Home',
+    'End': 'End',
+};
+/**
+ * Test harness for list item.
+ */
+export class ListItemHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.list-item');
+    }
+    /**
+     * Constructs keyboard events that are handled by List and makes sure that
+     * they are constructed in a manner that List understands.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    async pressHandledKey(key) {
+        await this.keypress(key, { code: key });
+    }
+}
+//# sourceMappingURL=harness.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAIpD,MAAM,cAAc,GAAG;IACrB,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;CACJ,CAAC;AASX;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,OAA4B;IACtD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;IAC5E,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,eAAe,CAAqC,GAAM;QAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;IACxC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {Harness} from '../../../testing/harness.js';\n\nimport {ListItem} from './list-item.js';\n\nconst NAVIGABLE_KEYS = {\n  'ArrowDown': 'ArrowDown',\n  'ArrowUp': 'ArrowUp',\n  'Home': 'Home',\n  'End': 'End',\n} as const;\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n    typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\n/**\n * Test harness for list item.\n */\nexport class ListItemHarness extends Harness<ListItem&LitElement> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.list-item') as HTMLElement;\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<T extends string = HandledListKeys>(key: T) {\n    await this.keypress(key, {code: key});\n  }\n}\n"]}

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

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