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

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

@@ -4,257 +4,286 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
+// Required for @ariaProperty
+// tslint:disable:no-new-decorators
 import '../../../ripple/ripple.js';
 import '../../../focus/focus-ring.js';
-import { ActionElement } from '../../../actionelement/action-element.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, queryAsync, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ariaProperty } from '../../../decorators/aria-property.js';
 import { pointerPress, shouldShowStrongFocus } from '../../../focus/strong-focus.js';
-import { MdRipple } from '../../../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 {
+import { ripple } from '../../../ripple/directive.js';
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+export class ListItemEl extends LitElement {
     constructor() {
         super(...arguments);
         // @ts-ignore(b/264292293): Use `override` with TS 4.9+
         this.role = 'listitem';
+        /**
+         * The primary, headline text of the list item.
+         */
+        this.headline = '';
+        /**
+         * The one-line supporting text below the headline.
+         */
         this.supportingText = '';
+        /**
+         * The multi-line supporting text below the headline. __NOTE:__ if set to a
+         * truthy value, overrides the visibility and behavior of `supportingText`.
+         */
         this.multiLineSupportingText = '';
+        /**
+         * The supporting text placed at the end of the item. Overriden by elements
+         * slotted into the `end` slot.
+         */
         this.trailingSupportingText = '';
+        /**
+         * Disables the item and makes it non-selectable and non-interactive.
+         */
         this.disabled = false;
+        /**
+         * The tabindex of the underlying item.
+         *
+         * __NOTE:__ this is overriden by the keyboard behavior of `md-list` and by
+         * setting `selected`.
+         */
         this.itemTabIndex = -1;
-        this.headline = '';
+        /**
+         * Whether or not the element is in the selected visual state. When active,
+         * tabindex is set to 0, and in some list item variants (like md-list-item),
+         * focuses the underlying item.
+         */
+        this.active = false;
+        /**
+         * READONLY. Sets the `md-list-item` attribute on the element.
+         */
+        this.isListItem = true;
         this.showFocusRing = false;
+        this.showRipple = false;
+        /**
+         * Only meant to be overriden by subclassing and not by the user. This is
+         * so that we have control over focus on specific variants such as disabling
+         * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.
+         */
+        this.focusOnSelection = true;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.isFirstUpdate = true;
+    }
+    willUpdate(changed) {
+        if (changed.has('active') && !this.disabled) {
+            if (this.active) {
+                this.itemTabIndex = 0;
+                if (this.focusOnSelection) {
+                    this.showFocusRing = shouldShowStrongFocus();
+                }
+                // Do not reset anything if it's the first render because user could
+                // have set `itemTabIndex` manually.
+            }
+            else if (!this.isFirstUpdate) {
+                this.itemTabIndex = -1;
+            }
+        }
     }
-    /** @soyTemplate */
     render() {
+        return this.renderListItem(html `
+      ${this.renderStart()}
+      ${this.renderBody()}
+      ${this.renderEnd()}
+      <div class="ripple">
+        ${this.renderRipple()}
+      </div>
+      <div class="focus-ring">
+        ${this.renderFocusRing()}
+      </div>`);
+    }
+    /**
+     * Renders the root list item.
+     *
+     * @param content {unkown} the child content of the list item.
+     */
+    renderListItem(content) {
         return html `
       <li
-          tabindex=${this.itemTabIndex}
+          tabindex=${this.disabled ? -1 : 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>`;
+          aria-selected=${this.ariaSelected || nothing}
+          aria-checked=${this.ariaChecked || nothing}
+          class="list-item ${classMap(this.getRenderClasses())}"
+          @pointerdown=${this.onPointerdown}
+          @focus=${this.onFocus}
+          @blur=${this.onBlur}
+          @click=${this.onClick}
+          @pointerenter=${this.onPointerenter}
+          @pointerleave=${this.onPointerleave}
+          @keydown=${this.onKeydown}
+          ${ripple(this.getRipple)}>${content}</li>`;
     }
-    /** @soyTemplate */
+    /**
+     * Handles rendering of the ripple element.
+     */
     renderRipple() {
-        return html `<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
+        return this.showRipple ?
+            html `<md-ripple ?disabled="${this.disabled}"></md-ripple>` :
+            nothing;
     }
-    /** @soyTemplate */
+    /**
+     * Handles rendering of the focus ring.
+     */
     renderFocusRing() {
         return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
     }
-    /** @soyTemplate */
-    getAriaRole() {
-        return 'listitem';
-    }
-    /** @soyTemplate */
+    /**
+     * Classes applied to the list item root.
+     */
     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,
+            'with-one-line': this.supportingText === '' && this.multiLineSupportingText === '',
+            'with-two-line': this.supportingText !== '' && this.multiLineSupportingText === '',
+            'with-three-line': this.multiLineSupportingText !== '',
+            'disabled': this.disabled,
+            'enabled': !this.disabled,
         };
     }
-    /** @soyTemplate */
+    /**
+     * The content rendered at the start of the list item.
+     */
     renderStart() {
-        return html `<div class="md3-list-item__start"><!--
-      --><slot name="start" @slotchange=${this.handleSlotChange}></slot><!--
-    --></div>`;
+        return html `<div class="start"><slot name="start"></slot></div>`;
     }
-    /** @soyTemplate */
+    /**
+     * Handles rendering the headline and supporting text.
+     */
     renderBody() {
-        return html `<div class="md3-list-item__body"><!--
-       --><span class="md3-list-item__label-text"><!--
-          -->${this.headline}<!--
-       --></span><!--
-        -->${this.multiLineSupportingText !== '' ?
+        const supportingText = this.multiLineSupportingText !== '' ?
             this.renderMultiLineSupportingText() :
             this.supportingText !== '' ? this.renderSupportingText() :
-                ''}<!--
-    --></div>`;
+                '';
+        return html `<div class="body"
+      ><span class="label-text">${this.headline}</span>${supportingText}</div>`;
     }
-    /** @soyTemplate */
+    /**
+     * Renders the one-line supporting text.
+     */
     renderSupportingText() {
-        return html `<span class="md3-list-item__supporting-text"><!--
-          -->${this.supportingText}<!--
-       --></span>`;
+        return html `<span class="supporting-text">${this.supportingText}</span>`;
     }
-    /** @soyTemplate */
+    /**
+     * Renders the multi-line supporting text
+     */
     renderMultiLineSupportingText() {
-        return html `<span class="md3-list-item__supporting-text md3-list-item__supporting-text--multi-line"><!--
-          -->${this.multiLineSupportingText}<!--
-       --></span>`;
+        return html `<span class="supporting-text supporting-text--multi-line"
+      >${this.multiLineSupportingText}</span>`;
     }
-    /** @soyTemplate */
+    /**
+     * The content rendered at the end of the list item.
+     */
     renderEnd() {
-        return html `<div class="md3-list-item__end"><!--
-      --><slot name="end" @slotchange=${this.handleSlotChange}><!--
-        -->${this.trailingSupportingText !== '' ?
+        const supportingText = this.trailingSupportingText !== '' ?
             this.renderTrailingSupportingText() :
-            ''}<!--
-      --></slot><!--
-    --></div>`;
+            '';
+        return html `<div class="end"
+      ><slot name="end">${supportingText}</slot></div>`;
     }
-    /** @soyTemplate */
+    /**
+     * Renders the supporting text at the end of the list item.
+     */
     renderTrailingSupportingText() {
-        return html `<span class="md3-list-item__trailing-supporting-text"><!--
-          -->${this.trailingSupportingText}<!--
-       --></span>`;
-    }
-    handleSlotChange() {
-        this.requestUpdate();
+        return html `<span class="trailing-supporting-text"
+      >${this.trailingSupportingText}</span>`;
     }
-    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);
+    onPointerdown() {
         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;
+    onFocus() {
+        this.showFocusRing = shouldShowStrongFocus();
     }
-    /**
-     * Returns true if list item is currently focused and is focusable.
-     */
-    isActive() {
-        return this.itemTabIndex === 0 && this.showFocusRing;
+    onBlur() {
+        this.showFocusRing = false;
     }
-    /**
-     * Removes list item from sequential keyboard navigation.
-     */
-    deactivate() {
-        this.itemTabIndex = -1;
+    // For easier overriding in menu-item
+    onClick(e) { }
+    onKeydown(e) { }
+    onPointerenter(e) { }
+    onPointerleave(e) { }
+    updated(changed) {
+        super.updated(changed);
+        // will focus the list item root if it is selected but not on the first
+        // update or else it may cause the page to jump on first load.
+        if (changed.has('active') && !this.isFirstUpdate && this.active &&
+            this.focusOnSelection) {
+            this.listItemRoot.focus();
+        }
+        this.isFirstUpdate = false;
     }
 }
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    // tslint:disable-next-line:decorator-placement
+    ariaProperty
+    // tslint:disable-next-line
     ,
     property({ type: String, attribute: 'data-role', noAccessor: true }),
     __metadata("design:type", String)
-], ListItem.prototype, "role", void 0);
+], ListItemEl.prototype, "role", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
+    ariaProperty,
     property({ type: String, attribute: 'data-aria-selected', noAccessor: true }),
     __metadata("design:type", String)
-], ListItem.prototype, "ariaSelected", void 0);
+], ListItemEl.prototype, "ariaSelected", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
+    ariaProperty,
     property({ type: String, attribute: 'data-aria-checked', noAccessor: true }),
     __metadata("design:type", String)
-], ListItem.prototype, "ariaChecked", void 0);
+], ListItemEl.prototype, "ariaChecked", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], ListItem.prototype, "itemId", void 0);
+    property(),
+    __metadata("design:type", Object)
+], ListItemEl.prototype, "headline", void 0);
 __decorate([
-    property({ type: String }),
+    property(),
     __metadata("design:type", Object)
-], ListItem.prototype, "supportingText", void 0);
+], ListItemEl.prototype, "supportingText", void 0);
 __decorate([
-    property({ type: String }),
+    property(),
     __metadata("design:type", Object)
-], ListItem.prototype, "multiLineSupportingText", void 0);
+], ListItemEl.prototype, "multiLineSupportingText", void 0);
 __decorate([
-    property({ type: String }),
+    property(),
     __metadata("design:type", Object)
-], ListItem.prototype, "trailingSupportingText", void 0);
+], ListItemEl.prototype, "trailingSupportingText", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
-], ListItem.prototype, "disabled", void 0);
+], ListItemEl.prototype, "disabled", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Object)
-], ListItem.prototype, "itemTabIndex", void 0);
+], ListItemEl.prototype, "itemTabIndex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], ListItemEl.prototype, "active", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: Boolean, attribute: 'md-list-item', reflect: true }),
     __metadata("design:type", Object)
-], ListItem.prototype, "headline", void 0);
+], ListItemEl.prototype, "isListItem", void 0);
 __decorate([
-    query('md-ripple'),
-    __metadata("design:type", MdRipple)
-], ListItem.prototype, "ripple", void 0);
+    queryAsync('md-ripple'),
+    __metadata("design:type", Promise)
+], ListItemEl.prototype, "ripple", void 0);
 __decorate([
-    query('[data-query-md3-list-item]'),
+    query('.list-item'),
     __metadata("design:type", HTMLElement)
-], ListItem.prototype, "listItemRoot", void 0);
+], ListItemEl.prototype, "listItemRoot", void 0);
 __decorate([
-    property({ type: Boolean }),
+    state(),
+    __metadata("design:type", Object)
+], ListItemEl.prototype, "showFocusRing", void 0);
+__decorate([
+    state(),
     __metadata("design:type", Object)
-], ListItem.prototype, "showFocusRing", void 0);
+], ListItemEl.prototype, "showRipple", void 0);
 //# sourceMappingURL=list-item.js.map

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

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

package/list/lib/listitemlink/list-item-link.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemEl } from '../listitem/list-item.js';
+export declare class ListItemLink extends ListItemEl {
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+     */
+    href: string;
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `target` attribute.
+     */
+    target: string;
+    protected renderListItem(content: unknown): import("lit-html").TemplateResult<1>;
+}

package/list/lib/listitemlink/list-item-link.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ripple } from '../../../ripple/directive.js';
+import { ListItemEl } from '../listitem/list-item.js';
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+export class ListItemLink extends ListItemEl {
+    renderListItem(content) {
+        return html `
+      <a
+          tabindex=${this.disabled ? -1 : this.itemTabIndex}
+          role=${this.role}
+          aria-selected=${this.ariaSelected || nothing}
+          aria-checked=${this.ariaChecked || nothing}
+          class="list-item ${classMap(this.getRenderClasses())}"
+          href=${this.href}
+          target=${this.target || nothing}
+          @pointerdown=${this.onPointerdown}
+          @focus=${this.onFocus}
+          @blur=${this.onBlur}
+          @click=${this.onClick}
+          @pointerenter=${this.onPointerenter}
+          @pointerleave=${this.onPointerleave}
+          @keydown=${this.onKeydown}
+          ${ripple(this.getRipple)}>${content}</a>`;
+    }
+}
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], ListItemLink.prototype, "href", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], ListItemLink.prototype, "target", void 0);
+//# sourceMappingURL=list-item-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-link.js","sourceRoot":"","sources":["list-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAIpD,gEAAgE;AAChE,MAAM,OAAO,YAAa,SAAQ,UAAU;IAUvB,cAAc,CAAC,OAAgB;QAChD,OAAO,IAAI,CAAA;;qBAEM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY;iBAC1C,IAAI,CAAC,IAAI;0BACA,IAAI,CAAC,YAAY,IAAI,OAAO;yBAC7B,IAAI,CAAC,WAAW,IAAI,OAAO;6BACvB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBAC7C,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAoB,IAAI,OAAO;yBAC9B,IAAI,CAAC,aAAa;mBACxB,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;mBACV,IAAI,CAAC,OAAO;0BACL,IAAI,CAAC,cAAc;0BACnB,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;YACvB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,OAAO,MAAM,CAAC;IAClD,CAAC;CACF;AAzBa;IAAX,QAAQ,EAAE;;0CAAe;AAKd;IAAX,QAAQ,EAAE;;4CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ripple} from '../../../ripple/directive.js';\nimport {ListItemEl} from '../listitem/list-item.js';\n\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemLink extends ListItemEl {\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href!: string;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target!: string;\n  protected override renderListItem(content: unknown) {\n    return html`\n      <a\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.role}\n          aria-selected=${this.ariaSelected || nothing}\n          aria-checked=${this.ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\n          href=${this.href}\n          target=${this.target as LinkTarget || nothing}\n          @pointerdown=${this.onPointerdown}\n          @focus=${this.onFocus}\n          @blur=${this.onBlur}\n          @click=${this.onClick}\n          @pointerenter=${this.onPointerenter}\n          @pointerleave=${this.onPointerleave}\n          @keydown=${this.onKeydown}\n          ${ripple(this.getRipple)}>${content}</a>`;\n  }\n}"]}

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

@@ -9,7 +9,7 @@
 @use 'sass:map';
 @use '../../../sass/theme';
 @use '../../../sass/map-ext';
-@use '../tokens';
+@use '../../../tokens';
 
 $_custom-property-prefix: 'list-item-video';
 
@@ -17,7 +17,8 @@ $_custom-property-prefix: 'list-item-video';
   $reference: map-ext.pick(
     tokens.md-comp-list-values(),
     (
-      list-item-leading-video-height,
+      list-item-small-leading-video-height,
+      list-item-large-leading-video-height,
       list-item-leading-video-width,
       list-item-leading-video-shape
     )
@@ -33,7 +34,8 @@ $_custom-property-prefix: 'list-item-video';
   $tokens: map-ext.pick(
     tokens.md-comp-list-values(),
     (
-      list-item-leading-video-height,
+      list-item-small-leading-video-height,
+      list-item-large-leading-video-height,
       list-item-leading-video-width,
       list-item-leading-video-shape
     )
@@ -54,8 +56,12 @@ $_custom-property-prefix: 'list-item-video';
     margin-block-end: 12px;
     margin-block-start: 12px;
     object-fit: cover;
-    height: var(--_list-item-leading-video-height);
+    height: var(--_list-item-small-leading-video-height);
     width: var(--_list-item-leading-video-width);
     border-radius: var(--_list-item-leading-video-shape);
+
+    &.large {
+      height: var(--_list-item-large-leading-video-height);
+    }
   }
 }

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_list-item-leading-video-height: var(--md-list-item-video-list-item-leading-video-height, 64px);--_list-item-leading-video-width: var(--md-list-item-video-list-item-leading-video-width, 114px);--_list-item-leading-video-shape: var(--md-list-item-video-list-item-leading-video-shape, 0px);display:inline-flex}.md3-list-item__video{display:inline-flex;margin-block-end:12px;margin-block-start:12px;object-fit:cover;height:var(--_list-item-leading-video-height);width:var(--_list-item-leading-video-width);border-radius:var(--_list-item-leading-video-shape)}/*# sourceMappingURL=list-item-video-styles.css.map */
+export const styles = css `:host{--_list-item-small-leading-video-height: var(--md-list-item-video-list-item-small-leading-video-height, 56px);--_list-item-large-leading-video-height: var(--md-list-item-video-list-item-large-leading-video-height, 69px);--_list-item-leading-video-width: var(--md-list-item-video-list-item-leading-video-width, 100px);--_list-item-leading-video-shape: var(--md-list-item-video-list-item-leading-video-shape, 0px);display:inline-flex}.md3-list-item__video{display:inline-flex;margin-block-end:12px;margin-block-start:12px;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)}.md3-list-item__video.large{height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-video-styles.css.map */
 `;
 //# sourceMappingURL=list-item-video-styles.css.js.map