@material/web 1.0.0-pre.4 → 1.0.0-pre.6

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

@@ -13,7 +13,6 @@
 @use '../../../ripple/ripple';
 @use '../../../sass/map-ext';
 @use '../../../sass/theme';
-@use '../../../sass/typography';
 @use '../../../tokens';
 // go/keep-sorted end
 
@@ -50,8 +49,7 @@
 
     @include focus-ring.theme(
       (
-        offset-vertical: -2px,
-        offset-horizontal: -3px,
+        offset: -3px,
         shape: map.get(tokens.md-sys-shape-values(), corner-extra-small),
       )
     );
@@ -115,14 +113,13 @@
     .with-three-line & {
       justify-content: start;
     }
+  }
 
-    .with-leading-thumbnail &,
-    .with-leading-image & {
-      padding-inline-start: 16px;
-    }
-
-    .with-leading-video & {
-      padding-inline-start: 0;
+  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);
     }
   }
 
@@ -132,7 +129,8 @@
     flex-direction: column;
     box-sizing: border-box;
     flex: 1 0 0;
-    padding-inline-start: 16px;
+    padding-inline-start: var(--_list-item-leading-space);
+    padding-inline-end: var(--_list-item-trailing-space);
     z-index: 1;
   }
 
@@ -141,7 +139,6 @@
     flex-direction: column;
     justify-content: center;
     flex: 0 0 auto;
-    padding-inline-end: 24px;
     z-index: 1;
 
     .with-three-line & {
@@ -149,6 +146,13 @@
     }
   }
 
+  slot[name='end']::slotted(*),
+  .trailing-supporting-text {
+    margin-inline-end: var(
+      --_list-item-trailing-element-headline-trailing-element-space
+    );
+  }
+
   .label-text {
     display: flex;
     color: var(--_list-item-label-text-color);
@@ -173,14 +177,21 @@
   }
 
   .supporting-text {
-    display: block;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    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);
@@ -188,11 +199,7 @@
   }
 
   .supporting-text--multi-line {
-    -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
-    display: -webkit-box;
-    overflow: hidden;
-    white-space: normal;
   }
 
   .trailing-supporting-text {
@@ -209,10 +216,8 @@
     }
 
     .with-three-line & {
-      /*
-       * In three line, trailing-supporting-text must align with the mid-line of
-       * the headline text.
-       */
+      // In three line, trailing-supporting-text must align with the mid-line of
+      // the headline text.
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -230,11 +235,10 @@
 @mixin _image() {
   ::slotted([data-variant='image']) {
     display: inline-flex;
-    margin-inline-start: 16px;
     height: var(--_list-item-leading-image-height);
     width: var(--_list-item-leading-image-width);
     border-radius: var(--_list-item-leading-image-shape);
-    /* Min height is two-line height */
+    // Min height is two-line height
     padding-block: calc(
       (
           var(--_list-item-two-line-container-height) -
@@ -258,7 +262,7 @@
     );
 
     .with-three-line & {
-      /* In three line, icon must align with the mid-line of headline text */
+      // In three line, icon must align with the mid-line of headline text
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -277,7 +281,7 @@
     );
 
     .with-three-line & {
-      /* In three line, icon must align with the mid-line of headline text */
+      // In three line, icon must align with the mid-line of headline text
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -287,10 +291,6 @@
     }
   }
 
-  ::slotted([data-variant='icon']) {
-    padding-inline-start: 16px;
-  }
-
   :hover {
     slot[name='start']::slotted([data-variant='icon']) {
       @include icon.theme(
@@ -373,7 +373,6 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    margin-inline-start: 16px;
     background-color: var(--_list-item-leading-avatar-color);
     height: var(--_list-item-leading-avatar-size);
     width: var(--_list-item-leading-avatar-size);
@@ -391,7 +390,8 @@
     height: var(--_list-item-small-leading-video-height);
     width: var(--_list-item-leading-video-width);
     border-radius: var(--_list-item-leading-video-shape);
-    /* Min height is three-line height */
+    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) -
@@ -399,17 +399,15 @@
         ) / 2
     );
 
-    /*
-     * Let it auto-layout so that we don't mess with the icons and supporting
-     * text that is supposed to be top-aligned in three-line.
-     */
+    // Let it auto-layout so that we don't mess with the icons and supporting
+    // text that is supposed to be top-aligned in three-line.
     .with-three-line & {
       padding-block: 0;
     }
   }
 
   ::slotted([data-variant='video-large']) {
-    /* Min height is three-line height */
+    // Min height is three-line height
     padding-block: calc(
       (
           var(--_list-item-three-line-container-height) -
@@ -427,7 +425,20 @@
 /// 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: ();
+  // Values pulled from b/198759625 spreadsheet
+  $list-item-tokens: (
+    'list-item-leading-space': 16px,
+    'list-item-trailing-space': 16px,
+    'list-item-leading-element-leading-space': 16px,
+    'list-item-leading-video-leading-space': 0px,
+    // Commented out until the comments in the spreadsheet linked above are
+    // resolved regarding vertical alignment.
+    // 'list-item-leading-item-top-space': 8px,
+    // 'list-item-leading-video-top-space': 0px,
+    // 'list-item-leading-item-bottom-space': 8px,
+    // 'list-item-leading-video-bottom-space': 0px,
+    'list-item-trailing-element-headline-trailing-element-space': 16px,
+  );
 
   @each $token, $value in $tokens {
     $index: string.index($token, 'list-item');
@@ -437,16 +448,6 @@
     }
   }
 
-  // Do not include list-item-trailing-supporting-text or list-item-label-text
-  // because we actually need the line-height tokens separately from the
-  // *-type tokens.
-  $list-item-tokens: typography.resolve-tokens(
-    $list-item-tokens,
-    'list-item-supporting-text',
-    'list-item-leading-avatar-label',
-    'list-item-overline'
-  );
-
   $list-item-tokens: _remove-unused-tokens($list-item-tokens);
 
   @return $list-item-tokens;
@@ -468,15 +469,7 @@
     'list-item-overline-type',
     'list-item-selected-trailing-icon',
     'list-item-selected-trailing-icon-color',
-    'list-item-unselected-trailing-icon-color',
-    'list-item-label-text-font',
-    'list-item-label-text-size',
-    'list-item-label-text-tracking',
-    'list-item-label-text-weight',
-    'list-item-trailing-supporting-text-font',
-    'list-item-trailing-supporting-text-size',
-    'list-item-trailing-supporting-text-tracking',
-    'list-item-trailing-supporting-text-weight'
+    'list-item-unselected-trailing-icon-color'
   );
 
   @each $token in $unused-tokens {

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `@media(forced-colors: active){:host{--md-list-list-item-leading-space:16px;--md-list-list-item-trailing-space:16px;--md-list-list-item-leading-element-leading-space:16px;--md-list-list-item-leading-video-leading-space:0px;--md-list-list-item-trailing-element-headline-trailing-element-space:16px;--md-list-list-item-disabled-label-text-color:GrayText;--md-list-list-item-disabled-label-text-opacity:1;--md-list-list-item-disabled-leading-icon-color:GrayText;--md-list-list-item-disabled-leading-icon-opacity:1;--md-list-list-item-disabled-trailing-icon-color:GrayText;--md-list-list-item-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=forced-colors-styles.css.map */
+`;
+//# sourceMappingURL=forced-colors-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){:host{--md-list-list-item-leading-space:16px;--md-list-list-item-trailing-space:16px;--md-list-list-item-leading-element-leading-space:16px;--md-list-list-item-leading-video-leading-space:0px;--md-list-list-item-trailing-element-headline-trailing-element-space:16px;--md-list-list-item-disabled-label-text-color:GrayText;--md-list-list-item-disabled-label-text-opacity:1;--md-list-list-item-disabled-leading-icon-color:GrayText;--md-list-list-item-disabled-leading-icon-opacity:1;--md-list-list-item-disabled-trailing-icon-color:GrayText;--md-list-list-item-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

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

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './list-item';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include list-item.theme(
+      (
+        list-item-disabled-label-text-color: GrayText,
+        list-item-disabled-label-text-opacity: 1,
+        list-item-disabled-leading-icon-color: GrayText,
+        list-item-disabled-leading-icon-opacity: 1,
+        list-item-disabled-trailing-icon-color: GrayText,
+        list-item-disabled-trailing-icon-opacity: 1,
+      )
+    );
+  }
+}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"list-item-styles.css.js","sourceRoot":"","sources":["list-item-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-container-color: var(--md-list-list-item-container-color, var(--md-sys-color-surface, #fffbfe));--_list-item-container-shape: var(--md-list-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-list-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-leading-icon-opacity: var(--md-list-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-trailing-icon-opacity: var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-leading-icon-icon-color: var(--md-list-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-state-layer-color: var(--md-list-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-list-list-item-focus-state-layer-opacity, 0.12);--_list-item-focus-trailing-icon-icon-color: var(--md-list-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-leading-icon-icon-color: var(--md-list-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-list-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-line-height: var(--md-list-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-list-item-label-text-type, 400 1rem / 1.5rem Roboto);--_list-item-large-leading-video-height: var(--md-list-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-list-item-leading-avatar-label-type, 500 1rem / 1.5rem Roboto);--_list-item-leading-avatar-color: var(--md-list-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-leading-icon-icon-color: var(--md-list-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-list-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-list-item-supporting-text-type, 400 0.875rem / 1.25rem Roboto);--_list-item-three-line-container-height: var(--md-list-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-list-item-trailing-supporting-text-type, 500 0.688rem / 1rem Roboto);--_list-item-two-line-container-height: var(--md-list-list-item-two-line-container-height, 72px)}:host{color:unset;--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-3px;--md-ripple-hover-color:var(--_list-item-hover-state-layer-color);--md-ripple-hover-opacity:var(--_list-item-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_list-item-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_list-item-pressed-state-layer-opacity);--md-ripple-focus-color:var(--_list-item-focus-state-layer-color);--md-ripple-focus-opacity:var(--_list-item-focus-state-layer-opacity)}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape)}.list-item:not(.disabled){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%}.with-one-line{min-height:var(--_list-item-one-line-container-height)}.with-two-line{min-height:var(--_list-item-two-line-container-height)}.with-three-line{min-height:var(--_list-item-three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}.with-leading-thumbnail .start,.with-leading-image .start{padding-inline-start:16px}.with-leading-video .start{padding-inline-start:0}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:16px;z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;padding-inline-end:24px;z-index:1}.with-three-line .end{justify-content:start}.label-text{display:flex;color:var(--_list-item-label-text-color);font:var(--_list-item-label-text-type)}:hover .label-text{color:var(--_list-item-hover-label-text-color)}:focus .label-text{color:var(--_list-item-focus-label-text-color)}:active .label-text{color:var(--_list-item-pressed-label-text-color)}.disabled .label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font:var(--_list-item-supporting-text-type)}.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: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;margin-inline-start:16px;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)}::slotted([data-variant=icon]){padding-inline-start:16px}: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;margin-inline-start:16px;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);padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){padding-block:0}::slotted([data-variant=video-large]){padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-large-leading-video-height))/2);height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-styles.css.js","sourceRoot":"","sources":["list-item-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-leading-space: var(--md-list-list-item-leading-space, 16px);--_list-item-trailing-space: var(--md-list-list-item-trailing-space, 16px);--_list-item-leading-element-leading-space: var(--md-list-list-item-leading-element-leading-space, 16px);--_list-item-leading-video-leading-space: var(--md-list-list-item-leading-video-leading-space, 0px);--_list-item-trailing-element-headline-trailing-element-space: var(--md-list-list-item-trailing-element-headline-trailing-element-space, 16px);--_list-item-container-color: var(--md-list-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_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, #1d1b20));--_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, #1d1b20));--_list-item-disabled-leading-icon-opacity: var(--md-list-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-trailing-icon-opacity: var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_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, #1d1b20));--_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, #1d1b20));--_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, #1d1b20));--_list-item-label-text-line-height: var(--md-list-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-list-item-label-text-type, 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-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-leading-avatar-color: var(--md-list-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_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, #1d1b20));--_list-item-pressed-state-layer-opacity: var(--md-list-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-list-item-supporting-text-type, 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-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-list-item-trailing-supporting-text-type, 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-list-item-two-line-container-height, 72px)}:host{color:unset;--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-offset:-3px;--md-ripple-hover-color:var(--_list-item-hover-state-layer-color);--md-ripple-hover-opacity:var(--_list-item-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_list-item-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_list-item-pressed-state-layer-opacity);--md-ripple-focus-color:var(--_list-item-focus-state-layer-color);--md-ripple-focus-opacity:var(--_list-item-focus-state-layer-opacity)}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape)}.list-item:not(.disabled){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%}.with-one-line{min-height:var(--_list-item-one-line-container-height)}.with-two-line{min-height:var(--_list-item-two-line-container-height)}.with-three-line{min-height:var(--_list-item-three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}slot[name=start]::slotted([data-variant=icon]),slot[name=start]::slotted([data-variant=image]),slot[name=start]::slotted([data-variant=avatar]){margin-inline-start:var(--_list-item-leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_list-item-leading-space);padding-inline-end:var(--_list-item-trailing-space);z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;z-index:1}.with-three-line .end{justify-content:start}slot[name=end]::slotted(*),.trailing-supporting-text{margin-inline-end:var(--_list-item-trailing-element-headline-trailing-element-space)}.label-text{display:flex;color:var(--_list-item-label-text-color);font:var(--_list-item-label-text-type)}:hover .label-text{color:var(--_list-item-hover-label-text-color)}:focus .label-text{color:var(--_list-item-focus-label-text-color)}:active .label-text{color:var(--_list-item-pressed-label-text-color)}.disabled .label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font:var(--_list-item-supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{padding-inline-start:16px;font:var(--_list-item-trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape);padding-block:calc((var(--_list-item-two-line-container-height) - var(--_list-item-leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){padding-block:0}slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-leading-icon-color);--md-icon-size:var(--_list-item-leading-icon-size)}.with-three-line slot[name=start]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-trailing-icon-color);--md-icon-size:var(--_list-item-trailing-icon-size)}.with-three-line slot[name=end]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-leading-icon-opacity);--md-icon-color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);--md-icon-color:var(--_list-item-disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_list-item-leading-avatar-color);height:var(--_list-item-leading-avatar-size);width:var(--_list-item-leading-avatar-size);border-radius:var(--_list-item-leading-avatar-shape);color:var(--_list-item-leading-avatar-label-color);font:var(--_list-item-leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_list-item-small-leading-video-height);width:var(--_list-item-leading-video-width);border-radius:var(--_list-item-leading-video-shape);margin-inline-start:var(--_list-item-leading-video-leading-space);padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){padding-block:0}::slotted([data-variant=video-large]){padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-large-leading-video-height))/2);height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */\n`;\n "]}

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

@@ -53,9 +53,9 @@ export declare class ListItemEl extends LitElement implements ListItem {
      */
     itemTabIndex: number;
     /**
-     * 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.
+     * Whether or not the element is actively being interacted with by md-list.
+     * When active, tabindex is set to 0, and in some list item variants (like
+     * md-list-item), focuses the underlying item.
      */
     active: boolean;
     /**
@@ -126,5 +126,6 @@ export declare class ListItemEl extends LitElement implements ListItem {
     protected onPointerenter(e: Event): void;
     protected onPointerleave(e: Event): void;
     updated(changed: PropertyValues<this>): void;
+    focus(): void;
 }
 export {};

package/list/lib/listitem/list-item.js

@@ -51,9 +51,9 @@ export class ListItemEl extends LitElement {
          */
         this.itemTabIndex = -1;
         /**
-         * 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.
+         * Whether or not the element is actively being interacted with by md-list.
+         * When active, tabindex is set to 0, and in some list item variants (like
+         * md-list-item), focuses the underlying item.
          */
         this.active = false;
         /**
@@ -212,10 +212,13 @@ export class ListItemEl extends LitElement {
         // update or else it may cause the page to jump on first load.
         if (changed.has('active') && !this.isFirstUpdate && this.active &&
             this.focusOnSelection) {
-            this.listItemRoot.focus();
+            this.focus();
         }
         this.isFirstUpdate = false;
     }
+    focus() {
+        this.listItemRoot?.focus?.();
+    }
 }
 __decorate([
     ariaProperty

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../../ripple/ripple.js';\nimport '../../../focus/focus-ring.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {ariaProperty} from '../../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../../focus/strong-focus.js';\nimport {ripple} from '../../../ripple/directive.js';\nimport {MdRipple} from '../../../ripple/ripple.js';\nimport {ARIARole} from '../../../types/aria.js';\n\ninterface ListItemSelf {\n  active: boolean;\n  disabled: boolean;\n}\n\n/**\n * The interface of an item that is compatible with md-list. An item that is\n * selectable and disablable.\n */\nexport type ListItem = ListItemSelf&HTMLElement;\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemEl extends LitElement implements ListItem {\n  @ariaProperty\n  // tslint:disable-next-line\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  // @ts-ignore(b/264292293): Use `override` with TS 4.9+\n  role: ARIARole = 'listitem';\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-selected', noAccessor: true})\n  override ariaSelected!: 'true'|'false';\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-checked', noAccessor: true})\n  override ariaChecked!: 'true'|'false';\n\n  /**\n   * The primary, headline text of the list item.\n   */\n  @property() headline = '';\n\n  /**\n   * The one-line supporting text below the headline. Set\n   * `multiLineSupportingText` to `true` to support multiple lines in the\n   * supporting text.\n   */\n  @property() supportingText = '';\n\n  /**\n   * Modifies `supportingText` to support multiple lines.\n   */\n  @property({type: Boolean}) multiLineSupportingText = false;\n\n  /**\n   * The supporting text placed at the end of the item. Overriden by elements\n   * slotted into the `end` slot.\n   */\n  @property() trailingSupportingText = '';\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * The tabindex of the underlying item.\n   *\n   * __NOTE:__ this is overriden by the keyboard behavior of `md-list` and by\n   * setting `selected`.\n   */\n  @property({type: Number}) itemTabIndex = -1;\n\n  /**\n   * Whether or not the element is in the selected visual state. When active,\n   * tabindex is set to 0, and in some list item variants (like md-list-item),\n   * focuses the underlying item.\n   */\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n  @query('.list-item') protected listItemRoot!: HTMLElement;\n\n  @state() protected showFocusRing = false;\n  @state() protected showRipple = false;\n\n  /**\n   * Only meant to be overriden by subclassing and not by the user. This is\n   * so that we have control over focus on specific variants such as disabling\n   * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.\n   */\n  protected focusOnSelection = true;\n\n  protected getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private isFirstUpdate = true;\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('active') && !this.disabled) {\n      if (this.active) {\n        this.itemTabIndex = 0;\n\n        if (this.focusOnSelection) {\n          this.showFocusRing = shouldShowStrongFocus();\n        }\n\n        // Do not reset anything if it's the first render because user could\n        // have set `itemTabIndex` manually.\n      } else if (!this.isFirstUpdate) {\n        this.itemTabIndex = -1;\n      }\n    }\n  }\n\n  override render(): TemplateResult {\n    return this.renderListItem(html`\n      <div class=\"content-wrapper\">\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        ${this.renderRipple()}\n        ${this.renderFocusRing()}\n      </div>`);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content {unkown} the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.role}\n          aria-selected=${this.ariaSelected || nothing}\n          aria-checked=${this.ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\n          @pointerdown=${this.onPointerdown}\n          @focus=${this.onFocus}\n          @blur=${this.onBlur}\n          @click=${this.onClick}\n          @pointerenter=${this.onPointerenter}\n          @pointerleave=${this.onPointerleave}\n          @keydown=${this.onKeydown}\n          ${ripple(this.getRipple)}>${content}</li>`;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult|typeof nothing {\n    return this.showRipple ?\n        html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>` :\n        nothing;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring class=\"focus-ring\" .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'with-one-line': this.supportingText === '',\n      'with-two-line':\n          this.supportingText !== '' && !this.multiLineSupportingText,\n      'with-three-line':\n          this.supportingText !== '' && this.multiLineSupportingText,\n      'disabled': this.disabled\n    };\n  }\n\n  /**\n   * The content rendered at the start of the list item.\n   */\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\"><slot name=\"start\"></slot></div>`;\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody(): TemplateResult {\n    const supportingText =\n        this.supportingText !== '' ? this.renderSupportingText() : '';\n\n    return html`<div class=\"body\"\n      ><span class=\"label-text\">${this.headline}</span>${supportingText}</div>`;\n  }\n\n  /**\n   * Renders the one-line supporting text.\n   */\n  protected renderSupportingText(): TemplateResult {\n    return html`<span\n        class=\"supporting-text ${classMap(this.getSupportingTextClasses())}\"\n      >${this.supportingText}</span>`;\n  }\n\n  /**\n   * Gets the classes for the supporting text node\n   */\n  protected getSupportingTextClasses(): ClassInfo {\n    return {'supporting-text--multi-line': this.multiLineSupportingText};\n  }\n\n  /**\n   * The content rendered at the end of the list item.\n   */\n  protected renderEnd(): TemplateResult {\n    const supportingText = this.trailingSupportingText !== '' ?\n        this.renderTrailingSupportingText() :\n        '';\n    return html`<div class=\"end\"\n      ><slot name=\"end\">${supportingText}</slot></div>`;\n  }\n\n  /**\n   * Renders the supporting text at the end of the list item.\n   */\n  protected renderTrailingSupportingText(): TemplateResult {\n    return html`<span class=\"trailing-supporting-text\"\n      >${this.trailingSupportingText}</span>`;\n  }\n\n  protected onPointerdown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected onFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected onBlur() {\n    this.showFocusRing = false;\n  }\n\n  // For easier overriding in menu-item\n  protected onClick(e: Event) {}\n  protected onKeydown(e: KeyboardEvent) {}\n  protected onPointerenter(e: Event) {}\n  protected onPointerleave(e: Event) {}\n\n  override updated(changed: PropertyValues<this>) {\n    super.updated(changed);\n\n    // will focus the list item root if it is selected but not on the first\n    // update or else it may cause the page to jump on first load.\n    if (changed.has('active') && !this.isFirstUpdate && this.active &&\n        this.focusOnSelection) {\n      this.listItemRoot.focus();\n    }\n\n    this.isFirstUpdate = false;\n  }\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../../ripple/ripple.js';\nimport '../../../focus/focus-ring.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {ariaProperty} from '../../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../../focus/strong-focus.js';\nimport {ripple} from '../../../ripple/directive.js';\nimport {MdRipple} from '../../../ripple/ripple.js';\nimport {ARIARole} from '../../../types/aria.js';\n\ninterface ListItemSelf {\n  active: boolean;\n  disabled: boolean;\n}\n\n/**\n * The interface of an item that is compatible with md-list. An item that is\n * selectable and disablable.\n */\nexport type ListItem = ListItemSelf&HTMLElement;\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemEl extends LitElement implements ListItem {\n  @ariaProperty\n  // tslint:disable-next-line\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  // @ts-ignore(b/264292293): Use `override` with TS 4.9+\n  role: ARIARole = 'listitem';\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-selected', noAccessor: true})\n  override ariaSelected!: 'true'|'false';\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-checked', noAccessor: true})\n  override ariaChecked!: 'true'|'false';\n\n  /**\n   * The primary, headline text of the list item.\n   */\n  @property() headline = '';\n\n  /**\n   * The one-line supporting text below the headline. Set\n   * `multiLineSupportingText` to `true` to support multiple lines in the\n   * supporting text.\n   */\n  @property() supportingText = '';\n\n  /**\n   * Modifies `supportingText` to support multiple lines.\n   */\n  @property({type: Boolean}) multiLineSupportingText = false;\n\n  /**\n   * The supporting text placed at the end of the item. Overriden by elements\n   * slotted into the `end` slot.\n   */\n  @property() trailingSupportingText = '';\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * The tabindex of the underlying item.\n   *\n   * __NOTE:__ this is overriden by the keyboard behavior of `md-list` and by\n   * setting `selected`.\n   */\n  @property({type: Number}) itemTabIndex = -1;\n\n  /**\n   * Whether or not the element is actively being interacted with by md-list.\n   * When active, tabindex is set to 0, and in some list item variants (like\n   * md-list-item), focuses the underlying item.\n   */\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n  @query('.list-item') protected listItemRoot!: HTMLElement;\n\n  @state() protected showFocusRing = false;\n  @state() protected showRipple = false;\n\n  /**\n   * Only meant to be overriden by subclassing and not by the user. This is\n   * so that we have control over focus on specific variants such as disabling\n   * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.\n   */\n  protected focusOnSelection = true;\n\n  protected getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private isFirstUpdate = true;\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('active') && !this.disabled) {\n      if (this.active) {\n        this.itemTabIndex = 0;\n\n        if (this.focusOnSelection) {\n          this.showFocusRing = shouldShowStrongFocus();\n        }\n\n        // Do not reset anything if it's the first render because user could\n        // have set `itemTabIndex` manually.\n      } else if (!this.isFirstUpdate) {\n        this.itemTabIndex = -1;\n      }\n    }\n  }\n\n  override render(): TemplateResult {\n    return this.renderListItem(html`\n      <div class=\"content-wrapper\">\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        ${this.renderRipple()}\n        ${this.renderFocusRing()}\n      </div>`);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content {unkown} the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.role}\n          aria-selected=${this.ariaSelected || nothing}\n          aria-checked=${this.ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\n          @pointerdown=${this.onPointerdown}\n          @focus=${this.onFocus}\n          @blur=${this.onBlur}\n          @click=${this.onClick}\n          @pointerenter=${this.onPointerenter}\n          @pointerleave=${this.onPointerleave}\n          @keydown=${this.onKeydown}\n          ${ripple(this.getRipple)}>${content}</li>`;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult|typeof nothing {\n    return this.showRipple ?\n        html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>` :\n        nothing;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring class=\"focus-ring\" .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'with-one-line': this.supportingText === '',\n      'with-two-line':\n          this.supportingText !== '' && !this.multiLineSupportingText,\n      'with-three-line':\n          this.supportingText !== '' && this.multiLineSupportingText,\n      'disabled': this.disabled\n    };\n  }\n\n  /**\n   * The content rendered at the start of the list item.\n   */\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\"><slot name=\"start\"></slot></div>`;\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody(): TemplateResult {\n    const supportingText =\n        this.supportingText !== '' ? this.renderSupportingText() : '';\n\n    return html`<div class=\"body\"\n      ><span class=\"label-text\">${this.headline}</span>${supportingText}</div>`;\n  }\n\n  /**\n   * Renders the one-line supporting text.\n   */\n  protected renderSupportingText(): TemplateResult {\n    return html`<span\n        class=\"supporting-text ${classMap(this.getSupportingTextClasses())}\"\n      >${this.supportingText}</span>`;\n  }\n\n  /**\n   * Gets the classes for the supporting text node\n   */\n  protected getSupportingTextClasses(): ClassInfo {\n    return {'supporting-text--multi-line': this.multiLineSupportingText};\n  }\n\n  /**\n   * The content rendered at the end of the list item.\n   */\n  protected renderEnd(): TemplateResult {\n    const supportingText = this.trailingSupportingText !== '' ?\n        this.renderTrailingSupportingText() :\n        '';\n    return html`<div class=\"end\"\n      ><slot name=\"end\">${supportingText}</slot></div>`;\n  }\n\n  /**\n   * Renders the supporting text at the end of the list item.\n   */\n  protected renderTrailingSupportingText(): TemplateResult {\n    return html`<span class=\"trailing-supporting-text\"\n      >${this.trailingSupportingText}</span>`;\n  }\n\n  protected onPointerdown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected onFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected onBlur() {\n    this.showFocusRing = false;\n  }\n\n  // For easier overriding in menu-item\n  protected onClick(e: Event) {}\n  protected onKeydown(e: KeyboardEvent) {}\n  protected onPointerenter(e: Event) {}\n  protected onPointerleave(e: Event) {}\n\n  override updated(changed: PropertyValues<this>) {\n    super.updated(changed);\n\n    // will focus the list item root if it is selected but not on the first\n    // update or else it may cause the page to jump on first load.\n    if (changed.has('active') && !this.isFirstUpdate && this.active &&\n        this.focusOnSelection) {\n      this.focus();\n    }\n\n    this.isFirstUpdate = false;\n  }\n\n  override focus() {\n    this.listItemRoot?.focus?.();\n  }\n}\n"]}

package/list/list-item-link.js

@@ -5,6 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
+import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
 import { styles } from './lib/listitem/list-item-styles.css.js';
 import { ListItemLink } from './lib/listitemlink/list-item-link.js';
 /**
@@ -48,7 +49,7 @@ import { ListItemLink } from './lib/listitemlink/list-item-link.js';
  */
 let MdListItemLink = class MdListItemLink extends ListItemLink {
 };
-MdListItemLink.styles = [styles];
+MdListItemLink.styles = [styles, forcedColors];
 MdListItemLink = __decorate([
     customElement('md-list-item-link')
 ], MdListItemLink);

package/list/list-item-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-link.js","sourceRoot":"","sources":["list-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from './lib/listitem/list-item-styles.css.js';\nimport {ListItemLink} from './lib/listitemlink/list-item-link.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item-link': MdListItemLink;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list. This is a linkable variant.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Example slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item-link\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\"\n *     href=\"/accounts\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">open_in_new</md-icon>\n * </md-list-item-link>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item-link')\nexport class MdListItemLink extends ListItemLink {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"list-item-link.js","sourceRoot":"","sources":["list-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';\nimport {styles} from './lib/listitem/list-item-styles.css.js';\nimport {ListItemLink} from './lib/listitemlink/list-item-link.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item-link': MdListItemLink;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list. This is a linkable variant.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Example slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item-link\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\"\n *     href=\"/accounts\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">open_in_new</md-icon>\n * </md-list-item-link>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item-link')\nexport class MdListItemLink extends ListItemLink {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/list/list-item.js

@@ -5,6 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
+import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
 import { ListItemEl as ListItem } from './lib/listitem/list-item.js';
 import { styles } from './lib/listitem/list-item-styles.css.js';
 /**
@@ -49,7 +50,7 @@ import { styles } from './lib/listitem/list-item-styles.css.js';
  */
 let MdListItem = class MdListItem extends ListItem {
 };
-MdListItem.styles = [styles];
+MdListItem.styles = [styles, forcedColors];
 MdListItem = __decorate([
     customElement('md-list-item')
 ], MdListItem);

package/list/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,IAAI,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {ListItemEl as ListItem} from './lib/listitem/list-item.js';\nimport {styles} from './lib/listitem/list-item-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Acceptable slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAC,UAAU,IAAI,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';\nimport {ListItemEl as ListItem} from './lib/listitem/list-item.js';\nimport {styles} from './lib/listitem/list-item-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Acceptable slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/menu/harness.d.ts

@@ -6,6 +6,7 @@
 import { Harness } from '../testing/harness.js';
 import { Menu } from './lib/menu.js';
 import { MenuItemHarness } from './lib/menuitem/harness.js';
+export { MenuItemHarness } from './lib/menuitem/harness.js';
 /**
  * Test harness for menu.
  */

package/menu/harness.js

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