@material/web 1.0.0-pre.0 → 1.0.0-pre.2

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

@@ -3,34 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use 'sass:map';
+@use 'sass:string';
 @use '../../../focus/focus-ring';
 @use '../../../sass/theme';
+@use '../../../sass/map-ext';
 @use '../icon/list-item-icon';
 @use '../image/list-item-image';
 @use '../video/list-item-video';
-@use '../tokens' as list-tokens;
+@use '../../../ripple/ripple';
 @use '../../../tokens';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(list-tokens.md-comp-list-values(), $tokens);
+  $tokens: theme.validate-theme(tokens.md-comp-list-values(), $tokens);
+  $tokens: resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, list);
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: list-tokens.md-comp-list-values();
-  $tokens: theme.create-theme-vars($tokens, list);
-
   :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-
     color: unset;
 
     @include list-item-image.theme(
@@ -42,7 +35,10 @@
     );
     @include list-item-video.theme(
       (
-        list-item-leading-video-height: var(--_list-item-leading-video-height),
+        list-item-small-leading-video-height:
+          var(--_list-item-small-leading-video-height),
+        list-item-large-leading-video-height:
+          var(--_list-item-large-leading-video-height),
         list-item-leading-video-width: var(--_list-item-leading-video-width),
         list-item-leading-video-shape: var(--_list-item-leading-video-shape),
       )
@@ -54,36 +50,52 @@
         shape: map.get(tokens.md-sys-shape-values(), corner-extra-small),
       )
     );
+    @include ripple.theme(
+      (
+        hover-state-layer-color: var(--_list-item-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_list-item-hover-state-layer-opacity),
+        pressed-state-layer-color: var(--_list-item-pressed-state-layer-color),
+        pressed-state-layer-opacity:
+          var(--_list-item-pressed-state-layer-opacity),
+        focus-state-layer-color: var(--_list-item-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_list-item-focus-state-layer-opacity),
+      )
+    );
   }
 
-  .md3-list-item {
+  .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);
 
-    &.md3-list-item--enabled {
+    &.enabled {
       cursor: pointer;
     }
+
+    &.disabled {
+      pointer-events: none;
+    }
   }
 
-  .md3-list-item--with-one-line {
+  .with-one-line {
     min-height: var(--_list-item-one-line-container-height);
   }
 
-  .md3-list-item--with-two-line {
+  .with-two-line {
     min-height: var(--_list-item-two-line-container-height);
   }
 
-  .md3-list-item--with-three-line {
+  .with-three-line {
     min-height: var(--_list-item-three-line-container-height);
   }
 
-  .md3-list-item__start {
+  .start {
     flex: 0 0 auto;
     z-index: 1;
 
@@ -97,12 +109,21 @@
     :hover & {
       @include list-item-icon.theme(
         (
-          list-item-icon-color: var(--_list-item-hover-leading-icon-color),
+          list-item-icon-color: var(--_list-item-hover-leading-icon-icon-color),
         )
       );
     }
 
-    .md3-list-item--disabled & {
+    :active & {
+      @include list-item-icon.theme(
+        (
+          list-item-icon-color:
+            var(--_list-item-pressed-leading-icon-icon-color),
+        )
+      );
+    }
+
+    .disabled & {
       @include list-item-icon.theme(
         (
           list-item-icon-color: var(--_list-item-disabled-leading-icon-color),
@@ -112,17 +133,17 @@
       );
     }
 
-    .md3-list-item--with-leading-thumbnail &,
-    .md3-list-item--with-leading-image & {
+    .with-leading-thumbnail &,
+    .with-leading-image & {
       padding-inline-start: 16px;
     }
 
-    .md3-list-item--with-leading-video & {
+    .with-leading-video & {
       padding-inline-start: 0;
     }
   }
 
-  .md3-list-item__body {
+  .body {
     box-sizing: border-box;
     flex: 1 0 0;
     padding-inline-start: 16px;
@@ -130,7 +151,7 @@
     z-index: 1;
   }
 
-  .md3-list-item__end {
+  .end {
     flex: 0 0 auto;
     padding-inline-end: 24px;
     z-index: 1;
@@ -145,12 +166,21 @@
     :hover & {
       @include list-item-icon.theme(
         (
-          list-item-icon-color: var(--_list-item-hover-trailing-icon-color),
+          list-item-icon-color: var(--_list-item-hover-trailing-icon-icon-color),
         )
       );
     }
 
-    .md3-list-item--disabled & {
+    :active & {
+      @include list-item-icon.theme(
+        (
+          list-item-icon-color:
+            var(--_list-item-pressed-trailing-icon-icon-color),
+        )
+      );
+    }
+
+    .disabled & {
       @include list-item-icon.theme(
         (
           list-item-icon-color: var(--_list-item-disabled-trailing-icon-color),
@@ -161,7 +191,7 @@
     }
   }
 
-  .md3-list-item__label-text {
+  .label-text {
     display: flex;
     color: var(--_list-item-label-text-color);
     font-family: var(--_list-item-label-text-font);
@@ -170,13 +200,13 @@
     font-weight: var(--_list-item-label-text-weight);
     line-height: var(--_list-item-label-text-line-height);
 
-    .md3-list-item--disabled & {
+    .disabled & {
       color: var(--_list-item-disabled-label-text-color);
       opacity: var(--_list-item-disabled-label-text-opacity);
     }
   }
 
-  .md3-list-item__supporting-text {
+  .supporting-text {
     display: block;
     padding-block-start: 4px;
     text-overflow: ellipsis;
@@ -190,13 +220,13 @@
     font-weight: var(--_list-item-supporting-text-weight);
     line-height: var(--_list-item-supporting-text-line-height);
 
-    .md3-list-item--disabled & {
-      color: var(--_list-item-disabled-supporting-text-color);
-      opacity: var(--_list-item-disabled-supporting-text-opacity);
+    .disabled & {
+      color: var(--_list-item-disabled-label-text-color);
+      opacity: var(--_list-item-disabled-label-text-opacity);
     }
   }
 
-  .md3-list-item__supporting-text--multi-line {
+  .supporting-text--multi-line {
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     display: -webkit-box;
@@ -204,7 +234,7 @@
     white-space: normal;
   }
 
-  .md3-list-item__trailing-supporting-text {
+  .trailing-supporting-text {
     padding-inline-start: 16px;
     font-family: var(--_list-item-trailing-supporting-text-font);
     font-size: var(--_list-item-trailing-supporting-text-size);
@@ -212,19 +242,54 @@
     font-weight: var(--_list-item-trailing-supporting-text-weight);
     line-height: var(--_list-item-trailing-supporting-text-line-height);
 
-    .md3-list-item:not(.md3-list-item--disabled) & {
+    .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);
+    }
   }
 
-  .md3-list-item__ripple {
+  .ripple {
     display: inline-flex;
     inset: 0;
     position: absolute;
     z-index: 0;
   }
 
-  .md3-list-item__focus-ring {
+  .focus-ring {
     z-index: 1;
   }
 }
+
+/// Resolves the tokens that are specific to list-item.
+///
+/// The tokenset for list include list plus all of list item. We do not want to
+/// duplicate tokens and custom properties across md-list and md-list-item.
+/// So here we resolve list-items tokens by selecting only tokens that have
+/// 'list-item' in its name.
+@function resolve-tokens($tokens) {
+  $list-item-tokens: ();
+
+  @each $token, $value in $tokens {
+    $index: string.index($token, list-item);
+
+    @if $index {
+      $list-item-tokens: map.set($list-item-tokens, $token, $value);
+    }
+  }
+  @return $list-item-tokens;
+}
+
+@mixin private-props() {
+  $tokens: resolve-tokens(tokens.md-comp-list-values());
+  $tokens: theme.create-theme-vars($tokens, list);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}

package/list/lib/listitem/harness.js

@@ -10,7 +10,8 @@ import { Harness } from '../../../testing/harness.js';
 export class ListItemHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('li');
+        return this.element
+            .renderRoot.querySelector('.list-item');
     }
 }
 //# sourceMappingURL=harness.js.map

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

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

package/list/lib/listitem/list-item-private-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-list-item-container-color, var(--md-sys-color-surface, #fffbfe));--_list-item-container-elevation: var(--md-list-list-item-container-elevation, 0);--_list-item-container-shape: var(--md-list-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-list-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-leading-icon-opacity: var(--md-list-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-state-layer-color: var(--md-list-list-item-disabled-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-state-layer-opacity: var(--md-list-list-item-disabled-state-layer-opacity, 0.12);--_list-item-disabled-trailing-icon-color: var(--md-list-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-trailing-icon-opacity: var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-dragged-container-elevation: var(--md-list-list-item-dragged-container-elevation, 8);--_list-item-dragged-label-text-color: var(--md-list-list-item-dragged-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-dragged-leading-icon-icon-color: var(--md-list-list-item-dragged-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-dragged-state-layer-color: var(--md-list-list-item-dragged-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-dragged-state-layer-opacity: var(--md-list-list-item-dragged-state-layer-opacity, 0.12);--_list-item-dragged-trailing-icon-icon-color: var(--md-list-list-item-dragged-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-label-text-color: var(--md-list-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-leading-icon-icon-color: var(--md-list-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-state-layer-color: var(--md-list-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-list-list-item-focus-state-layer-opacity, 0.12);--_list-item-focus-trailing-icon-icon-color: var(--md-list-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-leading-icon-icon-color: var(--md-list-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-list-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-list-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-list-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-size: var(--md-list-list-item-label-text-size, 1rem);--_list-item-label-text-tracking: var(--md-list-list-item-label-text-tracking, 0.031rem);--_list-item-label-text-type: var(--md-list-list-item-label-text-type, 400 1rem / 1.5rem Roboto);--_list-item-label-text-weight: var(--md-list-list-item-label-text-weight, 400);--_list-item-large-leading-video-height: var(--md-list-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-font: var(--md-list-list-item-leading-avatar-label-font, Roboto);--_list-item-leading-avatar-label-line-height: var(--md-list-list-item-leading-avatar-label-line-height, 1.5rem);--_list-item-leading-avatar-label-size: var(--md-list-list-item-leading-avatar-label-size, 1rem);--_list-item-leading-avatar-label-tracking: var(--md-list-list-item-leading-avatar-label-tracking, 0.009rem);--_list-item-leading-avatar-label-type: var(--md-list-list-item-leading-avatar-label-type, 500 1rem / 1.5rem Roboto);--_list-item-leading-avatar-label-weight: var(--md-list-list-item-leading-avatar-label-weight, 500);--_list-item-leading-avatar-color: var(--md-list-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-list-item-one-line-container-height, 56px);--_list-item-overline-color: var(--md-list-list-item-overline-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-overline-font: var(--md-list-list-item-overline-font, Roboto);--_list-item-overline-line-height: var(--md-list-list-item-overline-line-height, 1rem);--_list-item-overline-size: var(--md-list-list-item-overline-size, 0.688rem);--_list-item-overline-tracking: var(--md-list-list-item-overline-tracking, 0.031rem);--_list-item-overline-type: var(--md-list-list-item-overline-type, 500 0.688rem / 1rem Roboto);--_list-item-overline-weight: var(--md-list-list-item-overline-weight, 500);--_list-item-pressed-label-text-color: var(--md-list-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-leading-icon-icon-color: var(--md-list-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-list-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-selected-trailing-icon-color: var(--md-list-list-item-selected-trailing-icon-color, var(--md-sys-color-primary, #6750a4));--_list-item-small-leading-video-height: var(--md-list-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-font: var(--md-list-list-item-supporting-text-font, Roboto);--_list-item-supporting-text-line-height: var(--md-list-list-item-supporting-text-line-height, 1.25rem);--_list-item-supporting-text-size: var(--md-list-list-item-supporting-text-size, 0.875rem);--_list-item-supporting-text-tracking: var(--md-list-list-item-supporting-text-tracking, 0.016rem);--_list-item-supporting-text-type: var(--md-list-list-item-supporting-text-type, 400 0.875rem / 1.25rem Roboto);--_list-item-supporting-text-weight: var(--md-list-list-item-supporting-text-weight, 400);--_list-item-three-line-container-height: var(--md-list-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-font: var(--md-list-list-item-trailing-supporting-text-font, Roboto);--_list-item-trailing-supporting-text-line-height: var(--md-list-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-size: var(--md-list-list-item-trailing-supporting-text-size, 0.688rem);--_list-item-trailing-supporting-text-tracking: var(--md-list-list-item-trailing-supporting-text-tracking, 0.031rem);--_list-item-trailing-supporting-text-type: var(--md-list-list-item-trailing-supporting-text-type, 500 0.688rem / 1rem Roboto);--_list-item-trailing-supporting-text-weight: var(--md-list-list-item-trailing-supporting-text-weight, 500);--_list-item-two-line-container-height: var(--md-list-list-item-two-line-container-height, 72px);--_list-item-unselected-trailing-icon-color: var(--md-list-list-item-unselected-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}/*# sourceMappingURL=list-item-private-styles.css.map */
+`;
+//# sourceMappingURL=list-item-private-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-private-styles.css.js","sourceRoot":"","sources":["list-item-private-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-list-item-container-color, var(--md-sys-color-surface, #fffbfe));--_list-item-container-elevation: var(--md-list-list-item-container-elevation, 0);--_list-item-container-shape: var(--md-list-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-list-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-leading-icon-opacity: var(--md-list-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-state-layer-color: var(--md-list-list-item-disabled-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-state-layer-opacity: var(--md-list-list-item-disabled-state-layer-opacity, 0.12);--_list-item-disabled-trailing-icon-color: var(--md-list-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-trailing-icon-opacity: var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-dragged-container-elevation: var(--md-list-list-item-dragged-container-elevation, 8);--_list-item-dragged-label-text-color: var(--md-list-list-item-dragged-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-dragged-leading-icon-icon-color: var(--md-list-list-item-dragged-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-dragged-state-layer-color: var(--md-list-list-item-dragged-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-dragged-state-layer-opacity: var(--md-list-list-item-dragged-state-layer-opacity, 0.12);--_list-item-dragged-trailing-icon-icon-color: var(--md-list-list-item-dragged-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-label-text-color: var(--md-list-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-leading-icon-icon-color: var(--md-list-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-state-layer-color: var(--md-list-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-list-list-item-focus-state-layer-opacity, 0.12);--_list-item-focus-trailing-icon-icon-color: var(--md-list-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-leading-icon-icon-color: var(--md-list-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-list-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-list-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-list-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-size: var(--md-list-list-item-label-text-size, 1rem);--_list-item-label-text-tracking: var(--md-list-list-item-label-text-tracking, 0.031rem);--_list-item-label-text-type: var(--md-list-list-item-label-text-type, 400 1rem / 1.5rem Roboto);--_list-item-label-text-weight: var(--md-list-list-item-label-text-weight, 400);--_list-item-large-leading-video-height: var(--md-list-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-font: var(--md-list-list-item-leading-avatar-label-font, Roboto);--_list-item-leading-avatar-label-line-height: var(--md-list-list-item-leading-avatar-label-line-height, 1.5rem);--_list-item-leading-avatar-label-size: var(--md-list-list-item-leading-avatar-label-size, 1rem);--_list-item-leading-avatar-label-tracking: var(--md-list-list-item-leading-avatar-label-tracking, 0.009rem);--_list-item-leading-avatar-label-type: var(--md-list-list-item-leading-avatar-label-type, 500 1rem / 1.5rem Roboto);--_list-item-leading-avatar-label-weight: var(--md-list-list-item-leading-avatar-label-weight, 500);--_list-item-leading-avatar-color: var(--md-list-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-list-item-one-line-container-height, 56px);--_list-item-overline-color: var(--md-list-list-item-overline-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-overline-font: var(--md-list-list-item-overline-font, Roboto);--_list-item-overline-line-height: var(--md-list-list-item-overline-line-height, 1rem);--_list-item-overline-size: var(--md-list-list-item-overline-size, 0.688rem);--_list-item-overline-tracking: var(--md-list-list-item-overline-tracking, 0.031rem);--_list-item-overline-type: var(--md-list-list-item-overline-type, 500 0.688rem / 1rem Roboto);--_list-item-overline-weight: var(--md-list-list-item-overline-weight, 500);--_list-item-pressed-label-text-color: var(--md-list-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-leading-icon-icon-color: var(--md-list-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-list-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-selected-trailing-icon-color: var(--md-list-list-item-selected-trailing-icon-color, var(--md-sys-color-primary, #6750a4));--_list-item-small-leading-video-height: var(--md-list-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-font: var(--md-list-list-item-supporting-text-font, Roboto);--_list-item-supporting-text-line-height: var(--md-list-list-item-supporting-text-line-height, 1.25rem);--_list-item-supporting-text-size: var(--md-list-list-item-supporting-text-size, 0.875rem);--_list-item-supporting-text-tracking: var(--md-list-list-item-supporting-text-tracking, 0.016rem);--_list-item-supporting-text-type: var(--md-list-list-item-supporting-text-type, 400 0.875rem / 1.25rem Roboto);--_list-item-supporting-text-weight: var(--md-list-list-item-supporting-text-weight, 400);--_list-item-three-line-container-height: var(--md-list-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-font: var(--md-list-list-item-trailing-supporting-text-font, Roboto);--_list-item-trailing-supporting-text-line-height: var(--md-list-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-size: var(--md-list-list-item-trailing-supporting-text-size, 0.688rem);--_list-item-trailing-supporting-text-tracking: var(--md-list-list-item-trailing-supporting-text-tracking, 0.031rem);--_list-item-trailing-supporting-text-type: var(--md-list-list-item-trailing-supporting-text-type, 500 0.688rem / 1rem Roboto);--_list-item-trailing-supporting-text-weight: var(--md-list-list-item-trailing-supporting-text-weight, 500);--_list-item-two-line-container-height: var(--md-list-list-item-two-line-container-height, 72px);--_list-item-unselected-trailing-icon-color: var(--md-list-list-item-unselected-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}/*# sourceMappingURL=list-item-private-styles.css.map */\n`;\n "]}

package/list/lib/listitem/list-item-private-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './list-item';
+
+@include list-item.private-props;

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

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

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

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

@@ -5,69 +5,125 @@
  */
 import '../../../ripple/ripple.js';
 import '../../../focus/focus-ring.js';
-import { ActionElement, BeginPressConfig, EndPressConfig } from '../../../actionelement/action-element.js';
+import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
 import { MdRipple } from '../../../ripple/ripple.js';
 import { ARIARole } from '../../../types/aria.js';
-import { TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-/** @soyCompatible */
-export declare class ListItem extends ActionElement {
+interface ListItemSelf {
+    active: boolean;
+    disabled: boolean;
+}
+/**
+ * The interface of an item that is compatible with md-list. An item that is
+ * selectable and disablable.
+ */
+export declare type ListItem = ListItemSelf & HTMLElement;
+export declare class ListItemEl extends LitElement implements ListItem {
     role: ARIARole;
     ariaSelected: 'true' | 'false';
     ariaChecked: 'true' | 'false';
-    itemId: string;
+    /**
+     * The primary, headline text of the list item.
+     */
+    headline: string;
+    /**
+     * The one-line supporting text below the headline.
+     */
     supportingText: string;
+    /**
+     * The multi-line supporting text below the headline. __NOTE:__ if set to a
+     * truthy value, overrides the visibility and behavior of `supportingText`.
+     */
     multiLineSupportingText: string;
+    /**
+     * The supporting text placed at the end of the item. Overriden by elements
+     * slotted into the `end` slot.
+     */
     trailingSupportingText: string;
+    /**
+     * Disables the item and makes it non-selectable and non-interactive.
+     */
     disabled: boolean;
+    /**
+     * The tabindex of the underlying item.
+     *
+     * __NOTE:__ this is overriden by the keyboard behavior of `md-list` and by
+     * setting `selected`.
+     */
     itemTabIndex: number;
-    headline: string;
-    ripple: MdRipple;
-    listItemRoot: HTMLElement;
-    showFocusRing: boolean;
-    /** @soyTemplate */
+    /**
+     * Whether or not the element is in the selected visual state. When active,
+     * tabindex is set to 0, and in some list item variants (like md-list-item),
+     * focuses the underlying item.
+     */
+    active: boolean;
+    /**
+     * READONLY. Sets the `md-list-item` attribute on the element.
+     */
+    isListItem: boolean;
+    protected ripple: Promise<MdRipple | null>;
+    protected listItemRoot: HTMLElement;
+    protected showFocusRing: boolean;
+    protected showRipple: boolean;
+    /**
+     * Only meant to be overriden by subclassing and not by the user. This is
+     * so that we have control over focus on specific variants such as disabling
+     * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.
+     */
+    protected focusOnSelection: boolean;
+    protected getRipple: () => Promise<MdRipple>;
+    private isFirstUpdate;
+    willUpdate(changed: PropertyValues<this>): void;
     render(): TemplateResult;
-    /** @soyTemplate */
-    protected renderRipple(): TemplateResult;
-    /** @soyTemplate */
+    /**
+     * Renders the root list item.
+     *
+     * @param content {unkown} the child content of the list item.
+     */
+    protected renderListItem(content: unknown): TemplateResult<1>;
+    /**
+     * Handles rendering of the ripple element.
+     */
+    protected renderRipple(): TemplateResult | typeof nothing;
+    /**
+     * Handles rendering of the focus ring.
+     */
     protected renderFocusRing(): TemplateResult;
-    /** @soyTemplate */
-    protected getAriaRole(): ARIARole;
-    /** @soyTemplate */
+    /**
+     * Classes applied to the list item root.
+     */
     protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
+    /**
+     * The content rendered at the start of the list item.
+     */
     protected renderStart(): TemplateResult;
-    /** @soyTemplate */
+    /**
+     * Handles rendering the headline and supporting text.
+     */
     protected renderBody(): TemplateResult;
-    /** @soyTemplate */
+    /**
+     * Renders the one-line supporting text.
+     */
     protected renderSupportingText(): TemplateResult;
-    /** @soyTemplate */
-    protected renderMultiLineSupportingText(): TemplateResult;
-    /** @soyTemplate */
-    protected renderEnd(): TemplateResult;
-    /** @soyTemplate */
-    protected renderTrailingSupportingText(): TemplateResult;
-    protected handleSlotChange(): void;
-    beginPress({ positionEvent }: BeginPressConfig): void;
-    endPress({ cancelled }: EndPressConfig): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
-    handlePointerDown(e: PointerEvent): void;
-    protected handlePointerEnter(e: PointerEvent): void;
-    handlePointerLeave(e: PointerEvent): void;
-    /** @bubbleWizEvent */
-    protected handleKeyDown(e: KeyboardEvent): void;
-    protected handleKeyUp(e: KeyboardEvent): void;
     /**
-     * Focuses list item and makes list item focusable via keyboard.
+     * Renders the multi-line supporting text
      */
-    activate(): void;
+    protected renderMultiLineSupportingText(): TemplateResult;
     /**
-     * Returns true if list item is currently focused and is focusable.
+     * The content rendered at the end of the list item.
      */
-    isActive(): boolean;
+    protected renderEnd(): TemplateResult;
     /**
-     * Removes list item from sequential keyboard navigation.
+     * Renders the supporting text at the end of the list item.
      */
-    deactivate(): void;
+    protected renderTrailingSupportingText(): TemplateResult;
+    protected onPointerdown(): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    protected onClick(e: Event): void;
+    protected onKeydown(e: KeyboardEvent): void;
+    protected onPointerenter(e: Event): void;
+    protected onPointerleave(e: Event): void;
+    updated(changed: PropertyValues<this>): void;
 }
+export {};