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

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

@@ -0,0 +1,263 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../../ripple/ripple.js';
+import '../../../focus/md-focus-ring.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html as staticHtml, literal } from 'lit/static-html.js';
+import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.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. Overridden 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 overridden 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;
+        /**
+         * Sets the role of the list item. Set to 'nothing' to clear the role. This
+         * property will be ignored if `href` is set since the underlying element will
+         * be a native anchor tag.
+         */
+        this.type = 'listitem';
+        /**
+         * READONLY. Sets the `md-list-item` attribute on the element.
+         */
+        this.isListItem = true;
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+         */
+        this.href = '';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
+         * set.
+         */
+        this.target = '';
+        /**
+         * Only meant to be overridden by subclassing and not by the user. This is
+         * so that we have control over focus on specific variants such as disabling
+         * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.
+         */
+        this.focusOnActivation = true;
+        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 the child content of the list item.
+     */
+    renderListItem(content) {
+        const isAnchor = !!this.href;
+        const tag = isAnchor ? literal `a` : literal `li`;
+        const role = isAnchor || this.type === 'none' ? nothing : this.type;
+        const target = isAnchor && !!this.target ? this.target : nothing;
+        return staticHtml `
+      <${tag}
+        id="item"
+        tabindex=${this.disabled ? -1 : this.itemTabIndex}
+        role=${role}
+        aria-selected=${this.ariaSelected || nothing}
+        aria-checked=${this.ariaChecked || nothing}
+        class="list-item ${classMap(this.getRenderClasses())}"
+        href=${this.href || nothing}
+        target=${target}
+        @click=${this.onClick}
+        @pointerenter=${this.onPointerenter}
+        @pointerleave=${this.onPointerleave}
+        @keydown=${this.onKeydown}
+      >${content}</${tag}>
+    `;
+    }
+    /**
+     * Handles rendering of the ripple element.
+     */
+    renderRipple() {
+        return html `
+      <md-ripple
+          part="ripple"
+          for="item"
+          ?disabled=${this.disabled}></md-ripple>`;
+    }
+    /**
+     * Handles rendering of the focus ring.
+     */
+    renderFocusRing() {
+        return html `
+      <md-focus-ring
+          @visibility-changed=${this.onFocusRingVisibilityChanged}
+          class="focus-ring"
+          part="focus-ring"
+          for="item"
+          inward></md-focus-ring>`;
+    }
+    onFocusRingVisibilityChanged(e) { }
+    /**
+     * 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?.();
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(ListItemEl);
+})();
+__decorate([
+    property()
+], ListItemEl.prototype, "headline", void 0);
+__decorate([
+    property({ attribute: 'supporting-text' })
+], ListItemEl.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'multi-line-supporting-text' })
+], ListItemEl.prototype, "multiLineSupportingText", void 0);
+__decorate([
+    property({ attribute: 'trailing-supporting-text' })
+], ListItemEl.prototype, "trailingSupportingText", void 0);
+__decorate([
+    property({ type: Boolean })
+], ListItemEl.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number, attribute: 'item-tabindex' })
+], ListItemEl.prototype, "itemTabIndex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ListItemEl.prototype, "active", void 0);
+__decorate([
+    property()
+], ListItemEl.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'md-list-item', reflect: true })
+], ListItemEl.prototype, "isListItem", void 0);
+__decorate([
+    property()
+], ListItemEl.prototype, "href", void 0);
+__decorate([
+    property()
+], ListItemEl.prototype, "target", void 0);
+__decorate([
+    query('.list-item')
+], ListItemEl.prototype, "listItemRoot", void 0);
+//# sourceMappingURL=list-item.js.map

package/list/internal/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 '../../../ripple/ripple.js';\nimport '../../../focus/md-focus-ring.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * Supported roles for a list item.\n */\nexport type ListItemRole = 'listitem'|'menuitem'|'option'|'link'|'none';\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(ListItemEl);\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({attribute: 'supporting-text'}) supportingText = '';\n\n  /**\n   * Modifies `supportingText` to support multiple lines.\n   */\n  @property({type: Boolean, attribute: 'multi-line-supporting-text'})\n  multiLineSupportingText = false;\n\n  /**\n   * The supporting text placed at the end of the item. Overridden by elements\n   * slotted into the `end` slot.\n   */\n  @property({attribute: 'trailing-supporting-text'})\n  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 overridden by the keyboard behavior of `md-list` and by\n   * setting `selected`.\n   */\n  @property({type: Number, attribute: 'item-tabindex'}) 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   * Sets the role of the list item. Set to 'nothing' to clear the role. This\n   * property will be ignored if `href` is set since the underlying element will\n   * be a native anchor tag.\n   */\n  @property() type: ListItemRole = 'listitem';\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  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n   * set.\n   */\n  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;\n\n  /**\n   * Only meant to be overridden 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 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  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    const isAnchor = !!this.href;\n    const tag = isAnchor ? literal`a` : literal`li`;\n    const role = isAnchor || this.type === 'none' ? nothing : this.type;\n    const target = isAnchor && !!this.target ? this.target : nothing;\n    return staticHtml`\n      <${tag}\n        id=\"item\"\n        tabindex=${this.disabled ? -1 : this.itemTabIndex}\n        role=${role}\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 || nothing}\n        target=${target}\n        @click=${this.onClick}\n        @pointerenter=${this.onPointerenter}\n        @pointerleave=${this.onPointerleave}\n        @keydown=${this.onKeydown}\n      >${content}</${tag}>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult|typeof nothing {\n    return html`\n      <md-ripple\n          part=\"ripple\"\n          for=\"item\"\n          ?disabled=${this.disabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult|typeof nothing {\n    return html`\n      <md-focus-ring\n          @visibility-changed=${this.onFocusRingVisibilityChanged}\n          class=\"focus-ring\"\n          part=\"focus-ring\"\n          for=\"item\"\n          inward></md-focus-ring>`;\n  }\n\n  protected onFocusRingVisibilityChanged(e: Event) {}\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  protected 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  protected 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  protected 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  protected 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  protected 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/list-item.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ListItemOnly as ListItem } from './lib/listitem/list-item-only.js';
-export { ListItemRole } from './lib/listitem/list-item.js';
+import { ListItemOnly as ListItem } from './internal/listitem/list-item-only.js';
+export { ListItemRole } from './internal/listitem/list-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-list-item': MdListItem;

package/list/list-item.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
-import { ListItemOnly as ListItem } from './lib/listitem/list-item-only.js';
-import { styles } from './lib/listitem/list-item-styles.css.js';
+import { styles as forcedColors } from './internal/listitem/forced-colors-styles.css.js';
+import { ListItemOnly as ListItem } from './internal/listitem/list-item-only.js';
+import { styles } from './internal/listitem/list-item-styles.css.js';
 /**
  * @summary
  * Lists are continuous, vertical indexes of text or images. Items are placed

package/list/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.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,YAAY,IAAI,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAU9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","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 {ListItemOnly as ListItem} from './lib/listitem/list-item-only.js';\nimport {styles} from './lib/listitem/list-item-styles.css.js';\n\nexport {ListItemRole} from './lib/listitem/list-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\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 * Acceptable 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\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles, forcedColors];\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iDAAiD,CAAC;AACvF,OAAO,EAAC,YAAY,IAAI,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AAUnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","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 './internal/listitem/forced-colors-styles.css.js';\nimport {ListItemOnly as ListItem} from './internal/listitem/list-item-only.js';\nimport {styles} from './internal/listitem/list-item-styles.css.js';\n\nexport {ListItemRole} from './internal/listitem/list-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\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 * Acceptable 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\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/list/list.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { List } from './lib/list.js';
+import { List } from './internal/list.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-list': MdList;

package/list/list.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { List } from './lib/list.js';
-import { styles } from './lib/list-styles.css.js';
+import { List } from './internal/list.js';
+import { styles } from './internal/list-styles.css.js';
 /**
  * @summary Lists are continuous, vertical indexes of text or images.
  *

package/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAQhD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {List} from './lib/list.js';\nimport {styles} from './lib/list-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list': MdList;\n  }\n}\n\n/**\n * @summary Lists are continuous, vertical indexes of text or images.\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 * @final\n * @suppress {visibility}\n */\n@customElement('md-list')\nexport class MdList extends List {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAQrD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {List} from './internal/list.js';\nimport {styles} from './internal/list-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list': MdList;\n  }\n}\n\n/**\n * @summary Lists are continuous, vertical indexes of text or images.\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 * @final\n * @suppress {visibility}\n */\n@customElement('md-list')\nexport class MdList extends List {\n  static override styles = [styles];\n}\n"]}

package/menu/_menu-item.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/menuitem/menu-item' show theme;
+@forward './internal/menuitem/menu-item' show theme;

package/menu/_menu.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/menu' show theme;
+@forward './internal/menu' show theme;

package/menu/harness.d.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Menu } from './lib/menu.js';
-import { MenuItemHarness } from './lib/menuitem/harness.js';
-export { MenuItemHarness } from './lib/menuitem/harness.js';
+import { Menu } from './internal/menu.js';
+import { MenuItemHarness } from './internal/menuitem/harness.js';
+export { MenuItemHarness } from './internal/menuitem/harness.js';
 /**
  * Test harness for menu.
  */

package/menu/harness.js

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { MenuItemHarness } from './lib/menuitem/harness.js';
-export { MenuItemHarness } from './lib/menuitem/harness.js';
+import { MenuItemHarness } from './internal/menuitem/harness.js';
+export { MenuItemHarness } from './internal/menuitem/harness.js';
 /**
  * Test harness for menu.
  */

package/menu/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAA8B,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,MAAM,MAAM,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,MAAM,MAAM,CAAC;IACf,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Menu} from './lib/menu.js';\nimport {MenuItemHarness} from './lib/menuitem/harness.js';\n\nexport {MenuItemHarness} from './lib/menuitem/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class MenuHarness extends Harness<Menu> {\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    await this.show();\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.items.map(\n        (item) => new MenuItemHarness(item as typeof item&LitElement));\n  }\n\n  async show(quick = true) {\n    const menu = this.element;\n    menu.quick = quick;\n    if (menu.open) {\n      return;\n    }\n\n    const opened = new Promise((resolve) => {\n      menu.addEventListener('opened', () => {\n        resolve(true);\n      }, {once: true});\n    });\n\n    menu.show();\n    await opened;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAA8B,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,MAAM,MAAM,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,MAAM,MAAM,CAAC;IACf,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Menu} from './internal/menu.js';\nimport {MenuItemHarness} from './internal/menuitem/harness.js';\n\nexport {MenuItemHarness} from './internal/menuitem/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class MenuHarness extends Harness<Menu> {\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    await this.show();\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.items.map(\n        (item) => new MenuItemHarness(item as typeof item&LitElement));\n  }\n\n  async show(quick = true) {\n    const menu = this.element;\n    menu.quick = quick;\n    if (menu.open) {\n      return;\n    }\n\n    const opened = new Promise((resolve) => {\n      menu.addEventListener('opened', () => {\n        resolve(true);\n      }, {once: true});\n    });\n\n    menu.show();\n    await opened;\n  }\n}\n"]}

package/menu/internal/_menu.scss

@@ -0,0 +1,105 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../focus/focus-ring';
+@use '../../internal/sass/theme';
+@use '../../list/list' as md-list;
+@use '../../list/list-item';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-menu-values(), $tokens);
+
+  @each $token, $value in $tokens {
+    @if $value {
+      --md-menu-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-menu-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-menu-#{$token}, #{$value});
+    }
+
+    @include md-list.theme(
+      (
+        'container-color': var(--_container-color),
+      )
+    );
+
+    @include elevation.theme(
+      (
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color),
+      )
+    );
+
+    min-width: 300px;
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape': var(--_container-shape),
+      )
+    );
+  }
+
+  .menu {
+    border-radius: var(--_container-shape);
+    display: none;
+    opacity: 0;
+    z-index: 20;
+    position: absolute;
+    user-select: none;
+    max-height: inherit;
+    height: inherit;
+    min-width: inherit;
+
+    &.fixed {
+      position: fixed;
+    }
+
+    md-list {
+      height: inherit;
+      max-height: inherit;
+      display: block;
+      overflow: auto;
+      min-width: inherit;
+      border-radius: inherit;
+    }
+
+    &.has-overflow md-list {
+      overflow: visible;
+    }
+
+    &.animating md-list {
+      pointer-events: none;
+      overflow: hidden;
+    }
+
+    &.animating ::slotted(.hidden) {
+      opacity: 0;
+    }
+
+    slot {
+      display: block;
+      height: inherit;
+      max-height: inherit;
+    }
+  }
+}

package/menu/internal/menu-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{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);min-width:300px}md-focus-ring{--md-focus-ring-shape: var(--_container-shape)}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */
+`;
+//# sourceMappingURL=menu-styles.css.js.map

package/menu/internal/menu-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-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{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);min-width:300px}md-focus-ring{--md-focus-ring-shape: var(--_container-shape)}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}