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

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

@@ -9,14 +9,11 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../../focus/focus-ring';
+@use '../../../icon/icon';
 @use '../../../ripple/ripple';
 @use '../../../sass/map-ext';
 @use '../../../sass/theme';
-@use '../../../sass/typography';
 @use '../../../tokens';
-@use '../icon/list-item-icon';
-@use '../image/list-item-image';
-@use '../video/list-item-video';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
@@ -30,30 +27,29 @@
 }
 
 @mixin styles() {
+  $tokens: resolve-tokens(tokens.md-comp-list-values());
+  $tokens: theme.create-theme-vars($tokens, 'list');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  @include _list-item;
+  @include _image;
+  @include _icon;
+  @include _avatar;
+  @include _video;
+}
+
+@mixin _list-item() {
   :host {
     color: unset;
 
-    @include list-item-image.theme(
-      (
-        list-item-leading-image-height: var(--_list-item-leading-image-height),
-        list-item-leading-image-width: var(--_list-item-leading-image-width),
-        list-item-leading-image-shape: var(--_list-item-leading-image-shape),
-      )
-    );
-    @include list-item-video.theme(
-      (
-        list-item-small-leading-video-height:
-          var(--_list-item-small-leading-video-height),
-        list-item-large-leading-video-height:
-          var(--_list-item-large-leading-video-height),
-        list-item-leading-video-width: var(--_list-item-leading-video-width),
-        list-item-leading-video-shape: var(--_list-item-leading-video-shape),
-      )
-    );
     @include focus-ring.theme(
       (
-        offset-vertical: -2px,
-        offset-horizontal: -3px,
+        offset: -3px,
         shape: map.get(tokens.md-sys-shape-values(), corner-extra-small),
       )
     );
@@ -80,7 +76,7 @@
     background-color: var(--_list-item-container-color);
     border-radius: var(--_list-item-container-shape);
 
-    &.enabled {
+    &:not(.disabled) {
       cursor: pointer;
     }
 
@@ -89,6 +85,11 @@
     }
   }
 
+  .content-wrapper {
+    display: flex;
+    width: 100%;
+  }
+
   .with-one-line {
     min-height: var(--_list-item-one-line-container-height);
   }
@@ -102,99 +103,54 @@
   }
 
   .start {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     flex: 0 0 auto;
     z-index: 1;
 
-    @include list-item-icon.theme(
-      (
-        list-item-icon-color: var(--_list-item-leading-icon-color),
-        list-item-icon-size: var(--_list-item-leading-icon-size),
-      )
-    );
-
-    :hover & {
-      @include list-item-icon.theme(
-        (
-          list-item-icon-color: var(--_list-item-hover-leading-icon-icon-color),
-        )
-      );
-    }
-
-    :active & {
-      @include list-item-icon.theme(
-        (
-          list-item-icon-color:
-            var(--_list-item-pressed-leading-icon-icon-color),
-        )
-      );
-    }
-
-    .disabled & {
-      @include list-item-icon.theme(
-        (
-          list-item-icon-color: var(--_list-item-disabled-leading-icon-color),
-          list-item-icon-opacity:
-            var(--_list-item-disabled-leading-icon-opacity),
-        )
-      );
-    }
-
-    .with-leading-thumbnail &,
-    .with-leading-image & {
-      padding-inline-start: 16px;
+    .with-three-line & {
+      justify-content: start;
     }
+  }
 
-    .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);
     }
   }
 
   .body {
+    display: inline-flex;
+    justify-content: center;
+    flex-direction: column;
     box-sizing: border-box;
     flex: 1 0 0;
-    padding-inline-start: 16px;
-    width: 100%;
+    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;
-    padding-inline-end: 24px;
     z-index: 1;
 
-    @include list-item-icon.theme(
-      (
-        list-item-icon-color: var(--_list-item-trailing-icon-color),
-        list-item-icon-size: var(--_list-item-trailing-icon-size),
-      )
-    );
-
-    :hover & {
-      @include list-item-icon.theme(
-        (
-          list-item-icon-color: var(--_list-item-hover-trailing-icon-icon-color),
-        )
-      );
-    }
-
-    :active & {
-      @include list-item-icon.theme(
-        (
-          list-item-icon-color:
-            var(--_list-item-pressed-trailing-icon-icon-color),
-        )
-      );
+    .with-three-line & {
+      justify-content: start;
     }
+  }
 
-    .disabled & {
-      @include list-item-icon.theme(
-        (
-          list-item-icon-color: var(--_list-item-disabled-trailing-icon-color),
-          list-item-icon-opacity:
-            var(--_list-item-disabled-trailing-icon-opacity),
-        )
-      );
-    }
+  slot[name='end']::slotted(*),
+  .trailing-supporting-text {
+    margin-inline-end: var(
+      --_list-item-trailing-element-headline-trailing-element-space
+    );
   }
 
   .label-text {
@@ -202,6 +158,18 @@
     color: var(--_list-item-label-text-color);
     font: var(--_list-item-label-text-type);
 
+    :hover & {
+      color: var(--_list-item-hover-label-text-color);
+    }
+
+    :focus & {
+      color: var(--_list-item-focus-label-text-color);
+    }
+
+    :active & {
+      color: var(--_list-item-pressed-label-text-color);
+    }
+
     .disabled & {
       color: var(--_list-item-disabled-label-text-color);
       opacity: var(--_list-item-disabled-label-text-opacity);
@@ -209,15 +177,21 @@
   }
 
   .supporting-text {
-    display: block;
-    padding-block-start: 4px;
     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);
@@ -225,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 {
@@ -244,13 +214,19 @@
       color: var(--_list-item-disabled-label-text-color);
       opacity: var(--_list-item-disabled-label-text-opacity);
     }
-  }
 
-  .ripple {
-    display: inline-flex;
-    inset: 0;
-    position: absolute;
-    z-index: 0;
+    .with-three-line & {
+      /*
+       * In three line, trailing-supporting-text must align with the mid-line of
+       * the headline text.
+       */
+      padding-block-start: calc(
+        (
+            var(--_list-item-label-text-line-height) -
+              var(--_list-item-trailing-supporting-text-line-height)
+          ) / 2
+      );
+    }
   }
 
   .focus-ring {
@@ -258,6 +234,194 @@
   }
 }
 
+@mixin _image() {
+  ::slotted([data-variant='image']) {
+    display: inline-flex;
+    height: var(--_list-item-leading-image-height);
+    width: var(--_list-item-leading-image-width);
+    border-radius: var(--_list-item-leading-image-shape);
+    /* Min height is two-line height */
+    padding-block: calc(
+      (
+          var(--_list-item-two-line-container-height) -
+            var(--_list-item-leading-image-height)
+        ) / 2
+    );
+
+    .with-three-line & {
+      padding-block: 0;
+    }
+  }
+}
+
+@mixin _icon() {
+  slot[name='start']::slotted([data-variant='icon']) {
+    @include icon.theme(
+      (
+        color: var(--_list-item-leading-icon-color),
+        size: var(--_list-item-leading-icon-size),
+      )
+    );
+
+    .with-three-line & {
+      /* In three line, icon must align with the mid-line of headline text */
+      padding-block-start: calc(
+        (
+            var(--_list-item-label-text-line-height) -
+              var(--_list-item-leading-icon-size)
+          ) / 2
+      );
+    }
+  }
+
+  slot[name='end']::slotted([data-variant='icon']) {
+    @include icon.theme(
+      (
+        color: var(--_list-item-trailing-icon-color),
+        size: var(--_list-item-trailing-icon-size),
+      )
+    );
+
+    .with-three-line & {
+      /* In three line, icon must align with the mid-line of headline text */
+      padding-block-start: calc(
+        (
+            var(--_list-item-label-text-line-height) -
+              var(--_list-item-trailing-icon-size)
+          ) / 2
+      );
+    }
+  }
+
+  :hover {
+    slot[name='start']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-hover-leading-icon-icon-color),
+        )
+      );
+    }
+
+    slot[name='end']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-hover-trailing-icon-icon-color),
+        )
+      );
+    }
+  }
+
+  :focus {
+    slot[name='start']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-focus-leading-icon-icon-color),
+        )
+      );
+    }
+
+    slot[name='end']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-focus-trailing-icon-icon-color),
+        )
+      );
+    }
+  }
+
+  :active {
+    slot[name='start']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-pressed-leading-icon-icon-color),
+        )
+      );
+    }
+
+    slot[name='end']::slotted([data-variant='icon']) {
+      @include icon.theme(
+        (
+          color: var(--_list-item-pressed-trailing-icon-icon-color),
+        )
+      );
+    }
+  }
+
+  .disabled {
+    slot[name='start']::slotted([data-variant='icon']) {
+      opacity: var(--_list-item-disabled-leading-icon-opacity);
+
+      @include icon.theme(
+        (
+          color: var(--_list-item-disabled-leading-icon-color),
+        )
+      );
+    }
+
+    slot[name='end']::slotted([data-variant='icon']) {
+      opacity: var(--_list-item-disabled-trailing-icon-opacity);
+
+      @include icon.theme(
+        (
+          color: var(--_list-item-disabled-trailing-icon-color),
+        )
+      );
+    }
+  }
+}
+
+@mixin _avatar() {
+  ::slotted([data-variant='avatar']) {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--_list-item-leading-avatar-color);
+    height: var(--_list-item-leading-avatar-size);
+    width: var(--_list-item-leading-avatar-size);
+    border-radius: var(--_list-item-leading-avatar-shape);
+    color: var(--_list-item-leading-avatar-label-color);
+    font: var(--_list-item-leading-avatar-label-type);
+  }
+}
+
+@mixin _video() {
+  ::slotted([data-variant='video']),
+  ::slotted([data-variant='video-large']) {
+    display: inline-flex;
+    object-fit: cover;
+    height: var(--_list-item-small-leading-video-height);
+    width: var(--_list-item-leading-video-width);
+    border-radius: var(--_list-item-leading-video-shape);
+    margin-inline-start: var(--_list-item-leading-video-leading-space);
+    /* Min height is three-line height */
+    padding-block: calc(
+      (
+          var(--_list-item-three-line-container-height) -
+            var(--_list-item-small-leading-video-height)
+        ) / 2
+    );
+
+    /*
+     * Let it auto-layout so that we don't mess with the icons and supporting
+     * text that is supposed to be top-aligned in three-line.
+     */
+    .with-three-line & {
+      padding-block: 0;
+    }
+  }
+
+  ::slotted([data-variant='video-large']) {
+    /* Min height is three-line height */
+    padding-block: calc(
+      (
+          var(--_list-item-three-line-container-height) -
+            var(--_list-item-large-leading-video-height)
+        ) / 2
+    );
+    height: var(--_list-item-large-leading-video-height);
+  }
+}
+
 /// Resolves the tokens that are specific to list-item.
 ///
 /// The tokenset for list include list plus all of list item. We do not want to
@@ -265,7 +429,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');
@@ -275,22 +452,33 @@
     }
   }
 
-  $list-item-tokens: typography.resolve-tokens(
-    $list-item-tokens,
-    'list-item-label-text',
-    'list-item-supporting-text',
-    'list-item-trailing-supporting-text'
-  );
+  $list-item-tokens: _remove-unused-tokens($list-item-tokens);
+
   @return $list-item-tokens;
 }
 
-@mixin private-props() {
-  $tokens: resolve-tokens(tokens.md-comp-list-values());
-  $tokens: theme.create-theme-vars($tokens, 'list');
+// removes unused tokens
+@function _remove-unused-tokens($tokens) {
+  $unused-tokens: (
+    'list-item-container-elevation',
+    'list-item-disabled-state-layer-color',
+    'list-item-disabled-state-layer-opacity',
+    'list-item-dragged-container-elevation',
+    'list-item-dragged-label-text-color',
+    'list-item-dragged-leading-icon-icon-color',
+    'list-item-dragged-state-layer-color',
+    'list-item-dragged-state-layer-opacity',
+    'list-item-dragged-trailing-icon-icon-color',
+    'list-item-overline-color',
+    'list-item-overline-type',
+    'list-item-selected-trailing-icon',
+    'list-item-selected-trailing-icon-color',
+    'list-item-unselected-trailing-icon-color'
+  );
 
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
+  @each $token in $unused-tokens {
+    $tokens: map.remove($tokens, $token);
   }
+
+  @return $tokens;
 }

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

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

@@ -27,14 +27,15 @@ export declare class ListItemEl extends LitElement implements ListItem {
      */
     headline: string;
     /**
-     * The one-line supporting text below the headline.
+     * The one-line supporting text below the headline. Set
+     * `multiLineSupportingText` to `true` to support multiple lines in the
+     * supporting text.
      */
     supportingText: string;
     /**
-     * The multi-line supporting text below the headline. __NOTE:__ if set to a
-     * truthy value, overrides the visibility and behavior of `supportingText`.
+     * Modifies `supportingText` to support multiple lines.
      */
-    multiLineSupportingText: string;
+    multiLineSupportingText: boolean;
     /**
      * The supporting text placed at the end of the item. Overriden by elements
      * slotted into the `end` slot.
@@ -106,9 +107,9 @@ export declare class ListItemEl extends LitElement implements ListItem {
      */
     protected renderSupportingText(): TemplateResult;
     /**
-     * Renders the multi-line supporting text
+     * Gets the classes for the supporting text node
      */
-    protected renderMultiLineSupportingText(): TemplateResult;
+    protected getSupportingTextClasses(): ClassInfo;
     /**
      * The content rendered at the end of the list item.
      */
@@ -125,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 {};