@material/web 0.1.0-alpha.0

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{color:unset;--md-focus-ring-container-outer-padding-vertical:-2px;--md-focus-ring-container-outer-padding-horizontal:-4px}.md3-list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%}.md3-list-item.md3-list-item--enabled{cursor:pointer}.md3-list-item .md3-list-item__start{flex:0 0 auto;z-index:1}.md3-list-item .md3-list-item__body{box-sizing:border-box;flex:1 0 0;padding-inline-start:16px;width:100%;z-index:1}.md3-list-item .md3-list-item__end{flex:0 0 auto;padding-inline-end:24px;z-index:1}.md3-list-item .md3-list-item__label-text{display:flex}.md3-list-item .md3-list-item__supporting-text{display:block;padding-block-start:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}.md3-list-item .md3-list-item__supporting-text--multi-line{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;white-space:normal}.md3-list-item .md3-list-item__trailing-supporting-text{padding-inline-start:16px}.md3-list-item--with-leading-thumbnail .md3-list-item__start{padding-inline-start:16px}.md3-list-item--with-leading-image .md3-list-item__start{padding-inline-start:16px}.md3-list-item--with-leading-video .md3-list-item__start{padding-inline-start:0}.md3-list-item__ripple{display:inline-flex;inset:0;position:absolute;z-index:0}.md3-list-item__focus-ring{z-index:1}.md3-list-item{--md-list-item-image-list-item-leading-image-height:var(--md-list-list-item-leading-image-height, 56px);--md-list-item-image-list-item-leading-image-width:var(--md-list-list-item-leading-image-width, 56px);--md-list-item-image-list-item-leading-image-shape:var(--md-list-list-item-leading-image-shape, 0);--md-list-item-video-list-item-leading-video-height:var(--md-list-list-item-leading-video-height, 64px);--md-list-item-video-list-item-leading-video-width:var(--md-list-list-item-leading-video-width, 114px);--md-list-item-video-list-item-leading-video-shape:var(--md-list-list-item-leading-video-shape, 0px)}.md3-list-item:not(.md3-list-item--disabled){background-color:var(--md-list-list-item-container-color, #fff)}.md3-list-item .md3-list-item__label-text{font-family:var(--md-list-list-item-label-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-label-text-size, 16px);letter-spacing:var(--md-list-list-item-label-text-tracking, 0.03125rem);font-weight:var(--md-list-list-item-label-text-weight, 400)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__label-text{color:var(--md-list-list-item-label-text-color, #1f1f1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__label-text{color:var(--md-list-list-item-disabled-label-text-color, #1c1b1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__label-text{opacity:var(--md-list-list-item-disabled-label-text-opacity, 0.38)}.md3-list-item .md3-list-item__supporting-text{font-family:var(--md-list-list-item-supporting-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-supporting-text-size, 14px);letter-spacing:var(--md-list-list-item-supporting-text-tracking, 0.015625rem);font-weight:var(--md-list-list-item-supporting-text-weight, 300);line-height:var(--md-list-list-item-supporting-text-line-height, 20px)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__supporting-text{color:var(--md-list-list-item-supporting-text-color, #444746)}.md3-list-item.md3-list-item--disabled .md3-list-item__supporting-text{color:var(--md-list-list-item-disabled-supporting-text-color, #1c1b1f)}.md3-list-item.md3-list-item--disabled .md3-list-item__supporting-text{opacity:var(--md-list-list-item-disabled-supporting-text-opacity, 0.38)}.md3-list-item .md3-list-item__trailing-supporting-text{font-family:var(--md-list-list-item-trailing-supporting-text-font, Roboto, sans-serif);font-size:var(--md-list-list-item-trailing-supporting-text-size, 12px);letter-spacing:var(--md-list-list-item-trailing-supporting-text-tracking, 0.015625rem);font-weight:var(--md-list-list-item-trailing-supporting-text-weight, 300)}.md3-list-item:not(.md3-list-item--disabled) .md3-list-item__trailing-supporting-text{color:var(--md-list-list-item-trailing-supporting-text-color, #646766)}.md3-list-item.md3-list-item--with-one-line{min-height:var(--md-list-list-item-one-line-container-height, 56px)}.md3-list-item.md3-list-item--with-two-line{min-height:var(--md-list-list-item-two-line-container-height, 72px)}.md3-list-item.md3-list-item--with-three-line{min-height:var(--md-list-list-item-three-line-container-height, 88px)}.md3-list-item .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-leading-icon-color, #444746);--md-list-item-icon-list-item-icon-size:var(--md-list-list-item-leading-icon-size, 24px)}.md3-list-item .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-trailing-icon-color, #444746);--md-list-item-icon-list-item-icon-size:var(--md-list-list-item-trailing-icon-size, 24px)}.md3-list-item.md3-list-item--disabled .md3-list-item__start{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-disabled-leading-icon-color, #1c1b1f);--md-list-item-icon-list-item-icon-opacity:var(--md-list-list-item-disabled-leading-icon-opacity, 0.38)}.md3-list-item.md3-list-item--disabled .md3-list-item__end{--md-list-item-icon-list-item-icon-color:var(--md-list-list-item-disabled-trailing-icon-color, #1c1b1f);--md-list-item-icon-list-item-icon-opacity:var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38)}/*# sourceMappingURL=list-item-styles.css.map */
+`;
+//# sourceMappingURL=list-item-styles.css.js.map

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

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

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

@@ -0,0 +1,16 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use './list-item-theme';
+@use './list-item';
+
+@include list-item.static-styles;
+
+.md3-list-item {
+  @include list-item-theme.theme-styles(list-item-theme.$light-theme);
+}

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

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/ripple/ripple.js';
+import '@material/web/focus/focus-ring.js';
+import { ActionElement, BeginPressConfig, EndPressConfig } from '@material/web/actionelement/action-element.js';
+import { MdRipple } from '@material/web/ripple/ripple.js';
+import { ARIARole } from '@material/web/types/aria.js';
+import { TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export declare class ListItem extends ActionElement {
+    role: ARIARole;
+    ariaSelected: 'true' | 'false';
+    ariaChecked: 'true' | 'false';
+    itemId: string;
+    supportingText: string;
+    multiLineSupportingText: string;
+    trailingSupportingText: string;
+    disabled: boolean;
+    itemTabIndex: number;
+    headline: string;
+    ripple: MdRipple;
+    listItemRoot: HTMLElement;
+    showFocusRing: boolean;
+    /** @soyTemplate */
+    render(): TemplateResult;
+    /** @soyTemplate */
+    protected renderRipple(): TemplateResult;
+    /** @soyTemplate */
+    protected renderFocusRing(): TemplateResult;
+    /** @soyTemplate */
+    protected getAriaRole(): ARIARole;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderStart(): TemplateResult;
+    /** @soyTemplate */
+    protected renderBody(): TemplateResult;
+    /** @soyTemplate */
+    protected renderSupportingText(): TemplateResult;
+    /** @soyTemplate */
+    protected renderMultiLineSupportingText(): TemplateResult;
+    /** @soyTemplate */
+    protected renderEnd(): TemplateResult;
+    /** @soyTemplate */
+    protected renderTrailingSupportingText(): TemplateResult;
+    protected handleSlotChange(): void;
+    beginPress({ positionEvent }: BeginPressConfig): void;
+    endPress({ cancelled }: EndPressConfig): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    handlePointerDown(e: PointerEvent): void;
+    protected handlePointerEnter(e: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
+    /** @bubbleWizEvent */
+    protected handleKeyDown(e: KeyboardEvent): void;
+    protected handleKeyUp(e: KeyboardEvent): void;
+    /**
+     * Focuses list item and makes list item focusable via keyboard.
+     */
+    activate(): void;
+    /**
+     * Returns true if list item is currently focused and is focusable.
+     */
+    isActive(): boolean;
+    /**
+     * Removes list item from sequential keyboard navigation.
+     */
+    deactivate(): void;
+}

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

@@ -0,0 +1,258 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import '@material/web/ripple/ripple.js';
+import '@material/web/focus/focus-ring.js';
+import { ActionElement } from '@material/web/actionelement/action-element.js';
+import { ariaProperty } from '@material/web/decorators/aria-property.js';
+import { pointerPress, shouldShowStrongFocus } from '@material/web/focus/strong-focus.js';
+import { MdRipple } from '@material/web/ripple/ripple.js';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+/** @soyCompatible */
+export class ListItem extends ActionElement {
+    constructor() {
+        super(...arguments);
+        this.role = 'listitem';
+        this.supportingText = '';
+        this.multiLineSupportingText = '';
+        this.trailingSupportingText = '';
+        this.disabled = false;
+        this.itemTabIndex = -1;
+        this.headline = '';
+        this.showFocusRing = false;
+    }
+    /** @soyTemplate */
+    render() {
+        return html `
+      <li
+          tabindex=${this.itemTabIndex}
+          role=${this.role}
+          aria-selected=${ifDefined(this.ariaSelected || undefined)}
+          aria-checked=${ifDefined(this.ariaChecked || undefined)}
+          id=${ifDefined(this.itemId || undefined)}
+          data-query-md3-list-item
+          class="md3-list-item ${classMap(this.getRenderClasses())}"
+          @pointerdown=${this.handlePointerDown}
+          @pointerenter=${this.handlePointerEnter}
+          @pointerup=${this.handlePointerUp}
+          @pointercancel=${this.handlePointerCancel}
+          @pointerleave=${this.handlePointerLeave}
+          @keydown=${this.handleKeyDown}
+          @keyup=${this.handleKeyUp}
+          @click=${this.handleClick}
+          @contextmenu=${this.handleContextMenu}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          >
+        ${this.renderStart()}
+        ${this.renderBody()}
+        ${this.renderEnd()}
+        <div class="md3-list-item__ripple">
+          ${this.renderRipple()}
+        </div>
+        <div class="md3-list-item__focus-ring">
+          ${this.renderFocusRing()}
+        </div>
+      </li>`;
+    }
+    /** @soyTemplate */
+    renderRipple() {
+        return html `<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
+    }
+    /** @soyTemplate */
+    renderFocusRing() {
+        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
+    }
+    /** @soyTemplate */
+    getAriaRole() {
+        return 'listitem';
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            'md3-list-item--with-one-line': this.supportingText === '' && this.multiLineSupportingText === '',
+            'md3-list-item--with-two-line': this.supportingText !== '' && this.multiLineSupportingText === '',
+            'md3-list-item--with-three-line': this.multiLineSupportingText !== '',
+            'md3-list-item--disabled': this.disabled,
+            'md3-list-item--enabled': !this.disabled,
+        };
+    }
+    /** @soyTemplate */
+    renderStart() {
+        return html `<div class="md3-list-item__start"><!--
+      --><slot name="start" @slotchange=${this.handleSlotChange}></slot><!--
+    --></div>`;
+    }
+    /** @soyTemplate */
+    renderBody() {
+        return html `<div class="md3-list-item__body"><!--
+       --><span class="md3-list-item__label-text"><!--
+          -->${this.headline}<!--
+       --></span><!--
+        -->${this.multiLineSupportingText !== '' ?
+            this.renderMultiLineSupportingText() :
+            this.supportingText !== '' ? this.renderSupportingText() :
+                ''}<!--
+    --></div>`;
+    }
+    /** @soyTemplate */
+    renderSupportingText() {
+        return html `<span class="md3-list-item__supporting-text"><!--
+          -->${this.supportingText}<!--
+       --></span>`;
+    }
+    /** @soyTemplate */
+    renderMultiLineSupportingText() {
+        return html `<span class="md3-list-item__supporting-text md3-list-item__supporting-text--multi-line"><!--
+          -->${this.multiLineSupportingText}<!--
+       --></span>`;
+    }
+    /** @soyTemplate */
+    renderEnd() {
+        return html `<div class="md3-list-item__end"><!--
+      --><slot name="end" @slotchange=${this.handleSlotChange}><!--
+        -->${this.trailingSupportingText !== '' ?
+            this.renderTrailingSupportingText() :
+            ''}<!--
+      --></slot><!--
+    --></div>`;
+    }
+    /** @soyTemplate */
+    renderTrailingSupportingText() {
+        return html `<span class="md3-list-item__trailing-supporting-text"><!--
+          -->${this.trailingSupportingText}<!--
+       --></span>`;
+    }
+    handleSlotChange() {
+        this.requestUpdate();
+    }
+    beginPress({ positionEvent }) {
+        this.ripple.beginPress(positionEvent);
+    }
+    endPress({ cancelled }) {
+        this.ripple.endPress();
+        if (cancelled)
+            return;
+        super.endPress({ cancelled, actionData: { item: this } });
+    }
+    handleFocus() {
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handleBlur() {
+        this.showFocusRing = false;
+    }
+    handlePointerDown(e) {
+        super.handlePointerDown(e);
+        pointerPress();
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handlePointerEnter(e) {
+        this.ripple.beginHover(e);
+    }
+    handlePointerLeave(e) {
+        super.handlePointerLeave(e);
+        this.ripple.endHover();
+    }
+    /** @bubbleWizEvent */
+    handleKeyDown(e) {
+        if (e.key !== ' ' && e.key !== 'Enter')
+            return;
+        e.preventDefault();
+        // TODO(b/240124486): Replace with beginPress provided by action
+        // element.
+        this.ripple.beginPress(e);
+    }
+    handleKeyUp(e) {
+        if (e.key !== ' ' && e.key !== 'Enter')
+            return;
+        e.preventDefault();
+        // TODO(b/240124486): Replace with beginPress provided by action element.
+        super.endPress({ cancelled: false, actionData: { item: this } });
+        this.ripple.endPress();
+    }
+    /**
+     * Focuses list item and makes list item focusable via keyboard.
+     */
+    activate() {
+        this.itemTabIndex = 0;
+        this.listItemRoot.focus();
+        this.showFocusRing = true;
+    }
+    /**
+     * Returns true if list item is currently focused and is focusable.
+     */
+    isActive() {
+        return this.itemTabIndex === 0 && this.showFocusRing;
+    }
+    /**
+     * Removes list item from sequential keyboard navigation.
+     */
+    deactivate() {
+        this.itemTabIndex = -1;
+    }
+}
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'data-role', noAccessor: true }),
+    __metadata("design:type", String)
+], ListItem.prototype, "role", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'data-aria-selected', noAccessor: true }),
+    __metadata("design:type", String)
+], ListItem.prototype, "ariaSelected", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'data-aria-checked', noAccessor: true }),
+    __metadata("design:type", String)
+], ListItem.prototype, "ariaChecked", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ListItem.prototype, "itemId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ListItem.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ListItem.prototype, "multiLineSupportingText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ListItem.prototype, "trailingSupportingText", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], ListItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], ListItem.prototype, "itemTabIndex", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ListItem.prototype, "headline", void 0);
+__decorate([
+    query('md-ripple'),
+    __metadata("design:type", MdRipple)
+], ListItem.prototype, "ripple", void 0);
+__decorate([
+    query('[data-query-md3-list-item]'),
+    __metadata("design:type", HTMLElement)
+], ListItem.prototype, "listItemRoot", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], ListItem.prototype, "showFocusRing", void 0);
+//# sourceMappingURL=list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/ripple/ripple.js';\nimport '@material/web/focus/focus-ring.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';\nimport {MdRipple} from '@material/web/ripple/ripple.js';\nimport {ARIARole} from '@material/web/types/aria.js';\nimport {html, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class ListItem extends ActionElement {\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  role: ARIARole = 'listitem';\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-selected', noAccessor: true})\n  override ariaSelected!: 'true'|'false';\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-checked', noAccessor: true})\n  override ariaChecked!: 'true'|'false';\n\n  @property({type: String}) itemId!: string;\n\n  @property({type: String}) supportingText = '';\n  @property({type: String}) multiLineSupportingText = '';\n  @property({type: String}) trailingSupportingText = '';\n  @property({type: Boolean}) disabled = false;\n  @property({type: Number}) itemTabIndex = -1;\n  @property({type: String}) headline = '';\n  @query('md-ripple') ripple!: MdRipple;\n  @query('[data-query-md3-list-item]') listItemRoot!: HTMLElement;\n  @property({type: Boolean}) showFocusRing = false;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <li\n          tabindex=${this.itemTabIndex}\n          role=${this.role}\n          aria-selected=${ifDefined(this.ariaSelected || undefined)}\n          aria-checked=${ifDefined(this.ariaChecked || undefined)}\n          id=${ifDefined(this.itemId || undefined)}\n          data-query-md3-list-item\n          class=\"md3-list-item ${classMap(this.getRenderClasses())}\"\n          @pointerdown=${this.handlePointerDown}\n          @pointerenter=${this.handlePointerEnter}\n          @pointerup=${this.handlePointerUp}\n          @pointercancel=${this.handlePointerCancel}\n          @pointerleave=${this.handlePointerLeave}\n          @keydown=${this.handleKeyDown}\n          @keyup=${this.handleKeyUp}\n          @click=${this.handleClick}\n          @contextmenu=${this.handleContextMenu}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          >\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        <div class=\"md3-list-item__ripple\">\n          ${this.renderRipple()}\n        </div>\n        <div class=\"md3-list-item__focus-ring\">\n          ${this.renderFocusRing()}\n        </div>\n      </li>`;\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult {\n    return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /** @soyTemplate */\n  protected getAriaRole(): ARIARole {\n    return 'listitem';\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-list-item--with-one-line':\n          this.supportingText === '' && this.multiLineSupportingText === '',\n      'md3-list-item--with-two-line':\n          this.supportingText !== '' && this.multiLineSupportingText === '',\n      'md3-list-item--with-three-line': this.multiLineSupportingText !== '',\n      'md3-list-item--disabled': this.disabled,\n      'md3-list-item--enabled': !this.disabled,\n    };\n  }\n\n  /** @soyTemplate */\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"md3-list-item__start\"><!--\n      --><slot name=\"start\" @slotchange=${this.handleSlotChange}></slot><!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderBody(): TemplateResult {\n    return html`<div class=\"md3-list-item__body\"><!--\n       --><span class=\"md3-list-item__label-text\"><!--\n          -->${this.headline}<!--\n       --></span><!--\n        -->${\n        this.multiLineSupportingText !== '' ?\n            this.renderMultiLineSupportingText() :\n            this.supportingText !== '' ? this.renderSupportingText() :\n                                         ''}<!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__supporting-text\"><!--\n          -->${this.supportingText}<!--\n       --></span>`;\n  }\n\n  /** @soyTemplate */\n  protected renderMultiLineSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__supporting-text md3-list-item__supporting-text--multi-line\"><!--\n          -->${this.multiLineSupportingText}<!--\n       --></span>`;\n  }\n\n  /** @soyTemplate */\n  protected renderEnd(): TemplateResult {\n    return html`<div class=\"md3-list-item__end\"><!--\n      --><slot name=\"end\" @slotchange=${this.handleSlotChange}><!--\n        -->${\n        this.trailingSupportingText !== '' ?\n            this.renderTrailingSupportingText() :\n            ''}<!--\n      --></slot><!--\n    --></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderTrailingSupportingText(): TemplateResult {\n    return html`<span class=\"md3-list-item__trailing-supporting-text\"><!--\n          -->${this.trailingSupportingText}<!--\n       --></span>`;\n  }\n\n  protected handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  override beginPress({positionEvent}: BeginPressConfig) {\n    this.ripple.beginPress(positionEvent);\n  }\n\n  override endPress({cancelled}: EndPressConfig) {\n    this.ripple.endPress();\n\n    if (cancelled) return;\n\n    super.endPress({cancelled, actionData: {item: this}});\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  override handlePointerDown(e: PointerEvent) {\n    super.handlePointerDown(e);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handlePointerEnter(e: PointerEvent) {\n    this.ripple.beginHover(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n\n    this.ripple.endHover();\n  }\n\n  /** @bubbleWizEvent */\n  protected handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    // TODO(b/240124486): Replace with beginPress provided by action\n    // element.\n    this.ripple.beginPress(e);\n  }\n\n  protected handleKeyUp(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    // TODO(b/240124486): Replace with beginPress provided by action element.\n    super.endPress({cancelled: false, actionData: {item: this}});\n    this.ripple.endPress();\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate() {\n    this.itemTabIndex = 0;\n    this.listItemRoot.focus();\n    this.showFocusRing = true;\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive() {\n    return this.itemTabIndex === 0 && this.showFocusRing;\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate() {\n    this.itemTabIndex = -1;\n  }\n}\n"]}

package/list/lib/video/_list-item-video-theme.scss

@@ -0,0 +1,36 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '@material/web/sass/theme';
+@use '@material/web/sass/map-ext';
+@use '../tokens';
+
+$light-theme: map-ext.pick(
+  tokens.md-comp-list-values(),
+  (
+    list-item-leading-video-height,
+    list-item-leading-video-width,
+    list-item-leading-video-shape
+  )
+);
+
+$_custom-property-prefix: 'list-item-video';
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  height: map.get($theme, list-item-leading-video-height);
+  width: map.get($theme, list-item-leading-video-width);
+  border-radius: map.get($theme, list-item-leading-video-shape);
+}

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

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  display: inline-flex;
+
+  .md3-list-item__video {
+    display: inline-flex;
+    margin-block-end: 12px;
+    margin-block-start: 12px;
+    object-fit: cover;
+  }
+}

package/list/lib/video/list-item-video-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{display:inline-flex}:host .md3-list-item__video{display:inline-flex;margin-block-end:12px;margin-block-start:12px;object-fit:cover}:host .md3-list-item__video{height:var(--md-list-item-video-list-item-leading-video-height, 64px);width:var(--md-list-item-video-list-item-leading-video-width, 114px);border-radius:var(--md-list-item-video-list-item-leading-video-shape, 0px)}/*# sourceMappingURL=list-item-video-styles.css.map */
+`;
+//# sourceMappingURL=list-item-video-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-video-styles.css.js","sourceRoot":"","sources":["list-item-video-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{display:inline-flex}:host .md3-list-item__video{display:inline-flex;margin-block-end:12px;margin-block-start:12px;object-fit:cover}:host .md3-list-item__video{height:var(--md-list-item-video-list-item-leading-video-height, 64px);width:var(--md-list-item-video-list-item-leading-video-width, 114px);border-radius:var(--md-list-item-video-list-item-leading-video-shape, 0px)}/*# sourceMappingURL=list-item-video-styles.css.map */\n`;\n "]}

package/list/lib/video/list-item-video-styles.scss

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use './list-item-video';
+@use './list-item-video-theme';
+
+:host {
+  @include list-item-video.static-styles();
+
+  .md3-list-item__video {
+    @include list-item-video-theme.theme-styles(
+      list-item-video-theme.$light-theme
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, TemplateResult } from 'lit';
+/** @soyCompatible */
+export declare class ListItemVideo extends LitElement {
+    media: string;
+    video: string;
+    altText?: string;
+    /** @soyTemplate */
+    render(): TemplateResult;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+/** @soyCompatible */
+export class ListItemVideo extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.media = 'video';
+        this.video = '';
+    }
+    /** @soyTemplate */
+    render() {
+        return html `
+        <img src="${this.video}" alt="${ifDefined(this.altText)}"
+         class="md3-list-item__video" />
+      `;
+    }
+}
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], ListItemVideo.prototype, "media", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], ListItemVideo.prototype, "video", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ListItemVideo.prototype, "altText", void 0);
+//# sourceMappingURL=list-item-video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-video.js","sourceRoot":"","sources":["list-item-video.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,qBAAqB;AACrB,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAC2C,UAAK,GAAG,OAAO,CAAC;QAChB,UAAK,GAAG,EAAE,CAAC;IAUtD,CAAC;IAPC,mBAAmB;IACV,MAAM;QACb,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,KAAK,UAAU,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;OAExD,CAAC;IACN,CAAC;CACF;AAX0C;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;4CAAiB;AAChB;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;4CAAY;AACX;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;8CAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class ListItemVideo extends LitElement {\n  @property({type: String, reflect: true}) media = 'video';\n  @property({type: String, reflect: true}) video = '';\n  @property({type: String, reflect: true}) altText?: string;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n        <img src=\"${this.video}\" alt=\"${ifDefined(this.altText)}\"\n         class=\"md3-list-item__video\" />\n      `;\n  }\n}\n"]}

package/list/list-divider.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListDivider } from './lib/divider/list-divider.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-list-divider': MdListDivider;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdListDivider extends ListDivider {
+    static styles: import("lit").CSSResult[];
+}

package/list/list-divider.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { ListDivider } from './lib/divider/list-divider.js';
+import { styles } from './lib/divider/list-divider-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdListDivider = class MdListDivider extends ListDivider {
+};
+MdListDivider.styles = [styles];
+MdListDivider = __decorate([
+    customElement('md-list-divider')
+], MdListDivider);
+export { MdListDivider };
+//# sourceMappingURL=list-divider.js.map

package/list/list-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-divider.js","sourceRoot":"","sources":["list-divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,0CAA0C,CAAC;AAQhE;;;;GAIG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,WAAW;CAE7C,CAAA;AADiB,oBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAEzB;SAFY,aAAa","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {ListDivider} from './lib/divider/list-divider.js';\nimport {styles} from './lib/divider/list-divider-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-divider': MdListDivider;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-divider')\nexport class MdListDivider extends ListDivider {\n  static override styles = [styles];\n}\n"]}

package/list/list-item-avatar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemAvatar } from './lib/avatar/list-item-avatar.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-list-item-avatar': MdListItemAvatar;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdListItemAvatar extends ListItemAvatar {
+    static styles: import("lit").CSSResult[];
+}