@material/web 1.0.0-pre.8 → 1.0.0

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

@@ -1,129 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import '../../../ripple/ripple.js';
-import '../../../focus/focus-ring.js';
-import { LitElement, PropertyValues } from 'lit';
-import { MdRipple } from '../../../ripple/ripple.js';
-import { ARIARole } from '../../../types/aria.js';
-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. Overriden 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 overriden 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;
-    /**
-     * READONLY. Sets the `md-list-item` attribute on the element.
-     */
-    isListItem: boolean;
-    private readonly ripple;
-    protected readonly listItemRoot: HTMLElement | null;
-    protected readonly listItemRole: ARIARole;
-    private showRipple;
-    /**
-     * 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>.
-     */
-    protected focusOnActivation: boolean;
-    protected readonly getRipple: () => Promise<MdRipple>;
-    private isFirstUpdate;
-    protected willUpdate(changed: PropertyValues<this>): void;
-    protected render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Renders the root list item.
-     *
-     * @param content {unkown} the child content of the list item.
-     */
-    protected renderListItem(content: unknown): import("lit-html").TemplateResult<1>;
-    /**
-     * Handles rendering of the ripple element.
-     */
-    private renderRipple;
-    /**
-     * Handles rendering of the focus ring.
-     */
-    private renderFocusRing;
-    /**
-     * 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.
-     */
-    private renderStart;
-    /**
-     * Handles rendering the headline and supporting text.
-     */
-    private renderBody;
-    /**
-     * Renders the one-line supporting text.
-     */
-    private renderSupportingText;
-    /**
-     * Gets the classes for the supporting text node
-     */
-    private getSupportingTextClasses;
-    /**
-     * The content rendered at the end of the list item.
-     */
-    protected renderEnd(): import("lit-html").TemplateResult<1>;
-    /**
-     * Renders the supporting text at the end of the list item.
-     */
-    private renderTrailingSupportingText;
-    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 {};

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

@@ -1,236 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-var _a;
-import { __decorate } from "tslib";
-import '../../../ripple/ripple.js';
-import '../../../focus/focus-ring.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 { requestUpdateOnAriaChange } from '../../../aria/delegate.js';
-import { ripple } from '../../../ripple/directive.js';
-// tslint:disable-next-line:enforce-comments-on-exported-symbols
-export class ListItemEl extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The primary, headline text of the list item.
-         */
-        this.headline = '';
-        /**
-         * The one-line supporting text below the headline. Set
-         * `multiLineSupportingText` to `true` to support multiple lines in the
-         * supporting text.
-         */
-        this.supportingText = '';
-        /**
-         * Modifies `supportingText` to support multiple lines.
-         */
-        this.multiLineSupportingText = false;
-        /**
-         * 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;
-        /**
-         * Whether or not the element is actively being interacted with by md-list.
-         * When active, tabindex is set to 0, and in some list item variants (like
-         * md-list-item), focuses the underlying item.
-         */
-        this.active = false;
-        /**
-         * READONLY. Sets the `md-list-item` attribute on the element.
-         */
-        this.isListItem = true;
-        this.listItemRole = 'listitem';
-        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.focusOnActivation = 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;
-            }
-            else if (!this.isFirstUpdate) {
-                // Do not reset anything if it's the first render because user could
-                // have set `itemTabIndex` manually.
-                this.itemTabIndex = -1;
-            }
-        }
-    }
-    render() {
-        return this.renderListItem(html `
-      <div class="content-wrapper">
-        ${this.renderStart()}
-        ${this.renderBody()}
-        ${this.renderEnd()}
-        ${this.renderRipple()}
-        ${this.renderFocusRing()}
-      </div>`);
-    }
-    /**
-     * Renders the root list item.
-     *
-     * @param content {unkown} the child content of the list item.
-     */
-    renderListItem(content) {
-        return html `
-      <li
-          id="item"
-          tabindex=${this.disabled ? -1 : this.itemTabIndex}
-          role=${this.listItemRole}
-          aria-selected=${this.ariaSelected || nothing}
-          aria-checked=${this.ariaChecked || nothing}
-          class="list-item ${classMap(this.getRenderClasses())}"
-          @click=${this.onClick}
-          @pointerenter=${this.onPointerenter}
-          @pointerleave=${this.onPointerleave}
-          @keydown=${this.onKeydown}
-          ${ripple(this.getRipple)}>${content}</li>`;
-    }
-    /**
-     * Handles rendering of the ripple element.
-     */
-    renderRipple() {
-        return this.showRipple ?
-            html `<md-ripple ?disabled="${this.disabled}"></md-ripple>` :
-            nothing;
-    }
-    /**
-     * Handles rendering of the focus ring.
-     */
-    renderFocusRing() {
-        return html `<md-focus-ring class="focus-ring" for="item"></md-focus-ring>`;
-    }
-    /**
-     * Classes applied to the list item root.
-     */
-    getRenderClasses() {
-        return {
-            'with-one-line': this.supportingText === '',
-            'with-two-line': this.supportingText !== '' && !this.multiLineSupportingText,
-            'with-three-line': this.supportingText !== '' && this.multiLineSupportingText,
-            'disabled': this.disabled
-        };
-    }
-    /**
-     * The content rendered at the start of the list item.
-     */
-    renderStart() {
-        return html `<div class="start"><slot name="start"></slot></div>`;
-    }
-    /**
-     * Handles rendering the headline and supporting text.
-     */
-    renderBody() {
-        const supportingText = this.supportingText !== '' ? this.renderSupportingText() : '';
-        return html `<div class="body"
-      ><span class="label-text">${this.headline}</span>${supportingText}</div>`;
-    }
-    /**
-     * Renders the one-line supporting text.
-     */
-    renderSupportingText() {
-        return html `<span
-        class="supporting-text ${classMap(this.getSupportingTextClasses())}"
-      >${this.supportingText}</span>`;
-    }
-    /**
-     * Gets the classes for the supporting text node
-     */
-    getSupportingTextClasses() {
-        return { 'supporting-text--multi-line': this.multiLineSupportingText };
-    }
-    /**
-     * The content rendered at the end of the list item.
-     */
-    renderEnd() {
-        const supportingText = this.trailingSupportingText !== '' ?
-            this.renderTrailingSupportingText() :
-            '';
-        return html `<div class="end"
-      ><slot name="end">${supportingText}</slot></div>`;
-    }
-    /**
-     * Renders the supporting text at the end of the list item.
-     */
-    renderTrailingSupportingText() {
-        return html `<span class="trailing-supporting-text"
-      >${this.trailingSupportingText}</span>`;
-    }
-    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.focusOnActivation) {
-            this.focus();
-        }
-        this.isFirstUpdate = false;
-    }
-    focus() {
-        this.listItemRoot?.focus?.();
-    }
-}
-_a = ListItemEl;
-(() => {
-    requestUpdateOnAriaChange(_a);
-})();
-__decorate([
-    property()
-], ListItemEl.prototype, "headline", void 0);
-__decorate([
-    property()
-], ListItemEl.prototype, "supportingText", void 0);
-__decorate([
-    property({ type: Boolean })
-], ListItemEl.prototype, "multiLineSupportingText", void 0);
-__decorate([
-    property()
-], ListItemEl.prototype, "trailingSupportingText", void 0);
-__decorate([
-    property({ type: Boolean })
-], ListItemEl.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Number })
-], ListItemEl.prototype, "itemTabIndex", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ListItemEl.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'md-list-item', reflect: true })
-], ListItemEl.prototype, "isListItem", void 0);
-__decorate([
-    queryAsync('md-ripple')
-], ListItemEl.prototype, "ripple", void 0);
-__decorate([
-    query('.list-item')
-], ListItemEl.prototype, "listItemRoot", void 0);
-__decorate([
-    state()
-], ListItemEl.prototype, "showRipple", void 0);
-//# sourceMappingURL=list-item.js.map

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

@@ -1 +0,0 @@
-{"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 {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../../aria/delegate.js';\nimport {ripple} from '../../../ripple/directive.js';\nimport {MdRipple} from '../../../ripple/ripple.js';\nimport {ARIAMixinStrict, 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  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * The primary, headline text of the list item.\n   */\n  @property() headline = '';\n\n  /**\n   * The one-line supporting text below the headline. Set\n   * `multiLineSupportingText` to `true` to support multiple lines in the\n   * supporting text.\n   */\n  @property() supportingText = '';\n\n  /**\n   * Modifies `supportingText` to support multiple lines.\n   */\n  @property({type: Boolean}) multiLineSupportingText = false;\n\n  /**\n   * The supporting text placed at the end of the item. Overriden by elements\n   * slotted into the `end` slot.\n   */\n  @property() trailingSupportingText = '';\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * The tabindex of the underlying item.\n   *\n   * __NOTE:__ this is overriden by the keyboard behavior of `md-list` and by\n   * setting `selected`.\n   */\n  @property({type: Number}) itemTabIndex = -1;\n\n  /**\n   * Whether or not the element is actively being interacted with by md-list.\n   * When active, tabindex is set to 0, and in some list item variants (like\n   * md-list-item), focuses the underlying item.\n   */\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;\n  protected readonly listItemRole: ARIARole = 'listitem';\n\n  @state() private 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 focusOnActivation = true;\n\n  protected readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private isFirstUpdate = true;\n\n  protected override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('active') && !this.disabled) {\n      if (this.active) {\n        this.itemTabIndex = 0;\n      } else if (!this.isFirstUpdate) {\n        // Do not reset anything if it's the first render because user could\n        // have set `itemTabIndex` manually.\n        this.itemTabIndex = -1;\n      }\n    }\n  }\n\n  protected override render() {\n    return this.renderListItem(html`\n      <div class=\"content-wrapper\">\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        ${this.renderRipple()}\n        ${this.renderFocusRing()}\n      </div>`);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content {unkown} the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n          id=\"item\"\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.listItemRole}\n          aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n          aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\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  private renderRipple() {\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  private renderFocusRing() {\n    return html`<md-focus-ring class=\"focus-ring\" for=\"item\"></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses() {\n    return {\n      'with-one-line': this.supportingText === '',\n      'with-two-line':\n          this.supportingText !== '' && !this.multiLineSupportingText,\n      'with-three-line':\n          this.supportingText !== '' && this.multiLineSupportingText,\n      'disabled': this.disabled\n    };\n  }\n\n  /**\n   * The content rendered at the start of the list item.\n   */\n  private renderStart() {\n    return html`<div class=\"start\"><slot name=\"start\"></slot></div>`;\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  private renderBody() {\n    const supportingText =\n        this.supportingText !== '' ? this.renderSupportingText() : '';\n\n    return html`<div class=\"body\"\n      ><span class=\"label-text\">${this.headline}</span>${supportingText}</div>`;\n  }\n\n  /**\n   * Renders the one-line supporting text.\n   */\n  private renderSupportingText() {\n    return html`<span\n        class=\"supporting-text ${classMap(this.getSupportingTextClasses())}\"\n      >${this.supportingText}</span>`;\n  }\n\n  /**\n   * Gets the classes for the supporting text node\n   */\n  private getSupportingTextClasses() {\n    return {'supporting-text--multi-line': this.multiLineSupportingText};\n  }\n\n  /**\n   * The content rendered at the end of the list item.\n   */\n  protected renderEnd() {\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  private renderTrailingSupportingText() {\n    return html`<span class=\"trailing-supporting-text\"\n      >${this.trailingSupportingText}</span>`;\n  }\n\n  // For easier overriding in menu-item\n  protected onClick?(event: Event): void;\n  protected onKeydown?(event: KeyboardEvent): void;\n  protected onPointerenter?(event: Event): void;\n  protected onPointerleave?(event: Event): void;\n\n  protected 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.focusOnActivation) {\n      this.focus();\n    }\n\n    this.isFirstUpdate = false;\n  }\n\n  override focus() {\n    this.listItemRoot?.focus?.();\n  }\n}\n"]}

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

@@ -1,17 +0,0 @@
-/**
- * @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

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } 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
-          id="item"
-          tabindex=${this.disabled ? -1 : this.itemTabIndex}
-          role=${this.listItemRole}
-          aria-selected=${this.ariaSelected || nothing}
-          aria-checked=${this.ariaChecked || nothing}
-          class="list-item ${classMap(this.getRenderClasses())}"
-          href=${this.href}
-          target=${this.target || nothing}
-          @click=${this.onClick}
-          @pointerenter=${this.onPointerenter}
-          @pointerleave=${this.onPointerleave}
-          @keydown=${this.onKeydown}
-          ${ripple(this.getRipple)}>${content}</a>`;
-    }
-}
-__decorate([
-    property()
-], ListItemLink.prototype, "href", void 0);
-__decorate([
-    property()
-], ListItemLink.prototype, "target", void 0);
-//# sourceMappingURL=list-item-link.js.map

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

@@ -1 +0,0 @@
-{"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;AAEpD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAIpD,gEAAgE;AAChE,MAAM,OAAO,YAAa,SAAQ,UAAU;IAUvB,cAAc,CAAC,OAAgB;QAChD,OAAO,IAAI,CAAA;;;qBAGM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY;iBAC1C,IAAI,CAAC,YAAY;0BACP,IAAwB,CAAC,YAAY,IAAI,OAAO;yBACjD,IAAwB,CAAC,WAAW,IAAI,OAAO;6BAC5C,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBAC7C,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAoB,IAAI,OAAO;mBACpC,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;AAvBa;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 {ARIAMixinStrict} from '../../../types/aria.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          id=\"item\"\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.listItemRole}\n          aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n          aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\n          href=${this.href}\n          target=${this.target as LinkTarget || nothing}\n          @click=${this.onClick}\n          @pointerenter=${this.onPointerenter}\n          @pointerleave=${this.onPointerleave}\n          @keydown=${this.onKeydown}\n          ${ripple(this.getRipple)}>${content}</a>`;\n  }\n}\n"]}

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

@@ -1,53 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { ListItemLink } from './lib/listitemlink/list-item-link.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'md-list-item-link': MdListItemLink;
-    }
-}
-/**
- * @summary
- * Lists are continuous, vertical indexes of text or images. Items are placed
- * inside the list. This is a linkable variant.
- *
- * @description
- * Lists consist of one or more list items, and can contain actions represented
- * by icons and text. List items come in three sizes: one-line, two-line, and
- * three-line.
- *
- * __Takeaways:__
- *
- * - Lists should be sorted in logical ways that make content easy to scan, such
- *   as alphabetical, numerical, chronological, or by user preference.
- * - Lists present content in a way that makes it easy to identify a specific
- *   item in a collection and act on it.
- * - Lists should present icons, text, and actions in a consistent format.
- *
- * Example slottable child variants are:
- *
- * - `video[data-variant=video]`
- * - `img,span[data-variant=avatar]`
- * - `img[data-variant=image]`
- * - `md-icon[data-variant=icon]`
- *
- *  @example
- * ```html
- * <md-list-item-link
- *     headline="User Name"
- *     supportingText="user@name.com"
- *     href="/accounts">
- *   <md-icon data-variant="icon" slot="start">account_circle</md-icon>
- *   <md-icon data-variant="icon" slot="end">open_in_new</md-icon>
- * </md-list-item-link>
- * ```
- *
- * @final
- * @suppress {visibility}
- */
-export declare class MdListItemLink extends ListItemLink {
-    static styles: import("lit").CSSResult[];
-}

package/list/list-item-link.js

@@ -1,57 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
-import { styles } from './lib/listitem/list-item-styles.css.js';
-import { ListItemLink } from './lib/listitemlink/list-item-link.js';
-/**
- * @summary
- * Lists are continuous, vertical indexes of text or images. Items are placed
- * inside the list. This is a linkable variant.
- *
- * @description
- * Lists consist of one or more list items, and can contain actions represented
- * by icons and text. List items come in three sizes: one-line, two-line, and
- * three-line.
- *
- * __Takeaways:__
- *
- * - Lists should be sorted in logical ways that make content easy to scan, such
- *   as alphabetical, numerical, chronological, or by user preference.
- * - Lists present content in a way that makes it easy to identify a specific
- *   item in a collection and act on it.
- * - Lists should present icons, text, and actions in a consistent format.
- *
- * Example slottable child variants are:
- *
- * - `video[data-variant=video]`
- * - `img,span[data-variant=avatar]`
- * - `img[data-variant=image]`
- * - `md-icon[data-variant=icon]`
- *
- *  @example
- * ```html
- * <md-list-item-link
- *     headline="User Name"
- *     supportingText="user@name.com"
- *     href="/accounts">
- *   <md-icon data-variant="icon" slot="start">account_circle</md-icon>
- *   <md-icon data-variant="icon" slot="end">open_in_new</md-icon>
- * </md-list-item-link>
- * ```
- *
- * @final
- * @suppress {visibility}
- */
-let MdListItemLink = class MdListItemLink extends ListItemLink {
-};
-MdListItemLink.styles = [styles, forcedColors];
-MdListItemLink = __decorate([
-    customElement('md-list-item-link')
-], MdListItemLink);
-export { MdListItemLink };
-//# sourceMappingURL=list-item-link.js.map

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

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

package/localization/localize.d.ts

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { TemplateResult } from 'lit';
-/** Options object to the `msg()` function */
-export interface MsgOptions {
-    id?: string;
-    desc?: string;
-}
-/** stand-in for lit-localize str function */
-export declare function str(strings: TemplateStringsArray, ...values: unknown[]): string;
-/** stand-in for lit-localize msg function */
-export declare function msg<T extends (string | TemplateResult)>(template: T, options?: MsgOptions): T;

package/localization/localize.js

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/** stand-in for lit-localize str function */
-export function str(strings, ...values) {
-    let out = strings[0];
-    for (let i = 1; i < strings.length; i++) {
-        out += String(values[i - 1]) + strings[i];
-    }
-    return out;
-}
-/** stand-in for lit-localize msg function */
-export function msg(template, options) {
-    return template;
-}
-//# sourceMappingURL=localize.js.map

package/localization/localize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"localize.js","sourceRoot":"","sources":["localize.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,6CAA6C;AAC7C,MAAM,UAAU,GAAG,CACf,OAA6B,EAAE,GAAG,MAAiB;IACrD,IAAI,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACvC,GAAG,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3C;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,6CAA6C;AAC7C,MAAM,UAAU,GAAG,CACf,QAAW,EAAE,OAAoB;IACnC,OAAO,QAAQ,CAAC;AAClB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {TemplateResult} from 'lit';\n\n/** Options object to the `msg()` function */\nexport interface MsgOptions {\n  id?: string;\n  desc?: string;\n}\n\n/** stand-in for lit-localize str function */\nexport function str(\n    strings: TemplateStringsArray, ...values: unknown[]): string {\n  let out = strings[0];\n  for (let i = 1; i < strings.length; i++) {\n    out += String(values[i - 1]) + strings[i];\n  }\n  return out;\n}\n\n/** stand-in for lit-localize msg function */\nexport function msg<T extends(string | TemplateResult)>(\n    template: T, options?: MsgOptions): T {\n  return template;\n}"]}