@material/web 1.0.0-pre.13 → 1.0.0-pre.15

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

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

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

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

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

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

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

@@ -1,133 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import '../../../ripple/ripple.js';
-import '../../../focus/focus-ring.js';
-import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
-/**
- * Supported roles for a list item.
- */
-export type ListItemRole = 'listitem' | 'menuitem' | 'option' | 'link' | 'none';
-interface ListItemSelf {
-    active: boolean;
-    disabled: boolean;
-}
-/**
- * The interface of an item that is compatible with md-list. An item that is
- * selectable and disablable.
- */
-export type ListItem = ListItemSelf & HTMLElement;
-export declare class ListItemEl extends LitElement implements ListItem {
-    /**
-     * The primary, headline text of the list item.
-     */
-    headline: string;
-    /**
-     * The one-line supporting text below the headline. Set
-     * `multiLineSupportingText` to `true` to support multiple lines in the
-     * supporting text.
-     */
-    supportingText: string;
-    /**
-     * Modifies `supportingText` to support multiple lines.
-     */
-    multiLineSupportingText: boolean;
-    /**
-     * The supporting text placed at the end of the item. Overridden by elements
-     * slotted into the `end` slot.
-     */
-    trailingSupportingText: string;
-    /**
-     * Disables the item and makes it non-selectable and non-interactive.
-     */
-    disabled: boolean;
-    /**
-     * The tabindex of the underlying item.
-     *
-     * __NOTE:__ this is overridden by the keyboard behavior of `md-list` and by
-     * setting `selected`.
-     */
-    itemTabIndex: number;
-    /**
-     * 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;
-    /**
-     * Sets the role of the list item. Set to '' to clear the role.
-     */
-    type: ListItemRole;
-    /**
-     * READONLY. Sets the `md-list-item` attribute on the element.
-     */
-    isListItem: boolean;
-    protected readonly listItemRoot: HTMLElement | null;
-    /**
-     * Only meant to be overridden by subclassing and not by the user. This is
-     * so that we have control over focus on specific variants such as disabling
-     * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.
-     */
-    protected focusOnActivation: boolean;
-    protected isFirstUpdate: boolean;
-    protected willUpdate(changed: PropertyValues<this>): void;
-    protected render(): TemplateResult<1>;
-    /**
-     * Renders the root list item.
-     *
-     * @param content the child content of the list item.
-     */
-    protected renderListItem(content: unknown): TemplateResult<1>;
-    /**
-     * Handles rendering of the ripple element.
-     */
-    protected renderRipple(): TemplateResult | typeof nothing;
-    /**
-     * Handles rendering of the focus ring.
-     */
-    protected renderFocusRing(): TemplateResult | typeof nothing;
-    /**
-     * Classes applied to the list item root.
-     */
-    protected getRenderClasses(): {
-        'with-one-line': boolean;
-        'with-two-line': boolean;
-        'with-three-line': boolean;
-        disabled: boolean;
-    };
-    /**
-     * The content rendered at the start of the list item.
-     */
-    protected renderStart(): TemplateResult<1>;
-    /**
-     * Handles rendering the headline and supporting text.
-     */
-    protected renderBody(): TemplateResult<1>;
-    /**
-     * Renders the one-line supporting text.
-     */
-    protected renderSupportingText(): TemplateResult<1>;
-    /**
-     * Gets the classes for the supporting text node
-     */
-    protected getSupportingTextClasses(): {
-        'supporting-text--multi-line': boolean;
-    };
-    /**
-     * The content rendered at the end of the list item.
-     */
-    protected renderEnd(): TemplateResult<1>;
-    /**
-     * Renders the supporting text at the end of the list item.
-     */
-    protected renderTrailingSupportingText(): TemplateResult<1>;
-    protected onClick?(event: Event): void;
-    protected onKeydown?(event: KeyboardEvent): void;
-    protected onPointerenter?(event: Event): void;
-    protected onPointerleave?(event: Event): void;
-    protected updated(changed: PropertyValues<this>): void;
-    focus(): void;
-}
-export {};