@material/web 0.1.0-alpha.0

package/menu/lib/foundation.js

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MDCMenuSurfaceFoundation } from '../../menusurface/lib/foundation.js';
+import { cssClasses, numbers, strings } from './constants.js';
+const LIST_ITEM_DISABLED_CLASS = 'md3-list-item--disabled';
+export class MDCMenuFoundation {
+    constructor(adapter) {
+        this.closeAnimationEndTimerId = 0;
+        this.selectedIndex = -1;
+        this.adapter = { ...MDCMenuFoundation.defaultAdapter, ...adapter };
+    }
+    static get cssClasses() {
+        return cssClasses;
+    }
+    static get strings() {
+        return strings;
+    }
+    static get numbers() {
+        return numbers;
+    }
+    /**
+     * @see {@link MDCMenuAdapter} for typing information on parameters and return types.
+     */
+    static get defaultAdapter() {
+        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+        return {
+            addClassToElementAtIndex: () => undefined,
+            removeClassFromElementAtIndex: () => undefined,
+            addAttributeToElementAtIndex: () => undefined,
+            removeAttributeFromElementAtIndex: () => undefined,
+            getAttributeFromElementAtIndex: () => null,
+            elementContainsClass: () => false,
+            closeSurface: () => undefined,
+            getElementIndex: () => -1,
+            notifySelected: () => undefined,
+            getMenuItemCount: () => 0,
+            getSelectedSiblingOfItemAtIndex: () => -1,
+            isSelectableItemAtIndex: () => false,
+        };
+        // tslint:enable:object-literal-sort-keys
+    }
+    destroy() {
+        if (this.closeAnimationEndTimerId) {
+            clearTimeout(this.closeAnimationEndTimerId);
+        }
+        this.adapter.closeSurface();
+    }
+    handleKeydown(evt) {
+        const { key, keyCode } = evt;
+        const isTab = key === 'Tab' || keyCode === 9;
+        if (isTab) {
+            this.adapter.closeSurface(/** skipRestoreFocus */ true);
+        }
+    }
+    handleItemAction(listItem) {
+        const index = this.adapter.getElementIndex(listItem);
+        if (index < 0) {
+            return;
+        }
+        this.adapter.notifySelected({ index });
+        const skipRestoreFocus = this.adapter.getAttributeFromElementAtIndex(index, strings.SKIP_RESTORE_FOCUS) === 'true';
+        this.adapter.closeSurface(skipRestoreFocus);
+        // Wait for the menu to close before adding/removing classes that affect
+        // styles.
+        this.closeAnimationEndTimerId = setTimeout(() => {
+            // Recompute the index in case the menu contents have changed.
+            const recomputedIndex = this.adapter.getElementIndex(listItem);
+            if (recomputedIndex >= 0 &&
+                this.adapter.isSelectableItemAtIndex(recomputedIndex)) {
+                this.setSelectedIndex(recomputedIndex);
+            }
+        }, MDCMenuSurfaceFoundation.numbers.TRANSITION_CLOSE_DURATION);
+    }
+    /** @return Index of the currently selected list item within the menu. */
+    getSelectedIndex() {
+        return this.selectedIndex;
+    }
+    /**
+     * Selects the list item at `index` within the menu.
+     * @param index Index of list item within the menu.
+     */
+    setSelectedIndex(index) {
+        this.validatedIndex(index);
+        if (!this.adapter.isSelectableItemAtIndex(index)) {
+            throw new Error('MDCMenuFoundation: No selection group at specified index.');
+        }
+        const prevSelectedIndex = this.adapter.getSelectedSiblingOfItemAtIndex(index);
+        if (prevSelectedIndex >= 0) {
+            this.adapter.removeAttributeFromElementAtIndex(prevSelectedIndex, strings.ARIA_CHECKED_ATTR);
+            this.adapter.removeClassFromElementAtIndex(prevSelectedIndex, cssClasses.MENU_SELECTED_LIST_ITEM);
+        }
+        this.adapter.addClassToElementAtIndex(index, cssClasses.MENU_SELECTED_LIST_ITEM);
+        this.adapter.addAttributeToElementAtIndex(index, strings.ARIA_CHECKED_ATTR, 'true');
+        this.selectedIndex = index;
+    }
+    /**
+     * Sets the enabled state to isEnabled for the menu item at the given index.
+     * @param index Index of the menu item
+     * @param isEnabled The desired enabled state of the menu item.
+     */
+    setEnabled(index, isEnabled) {
+        this.validatedIndex(index);
+        if (isEnabled) {
+            this.adapter.removeClassFromElementAtIndex(index, LIST_ITEM_DISABLED_CLASS);
+            this.adapter.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'false');
+        }
+        else {
+            this.adapter.addClassToElementAtIndex(index, LIST_ITEM_DISABLED_CLASS);
+            this.adapter.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'true');
+        }
+    }
+    validatedIndex(index) {
+        const menuSize = this.adapter.getMenuItemCount();
+        const isIndexInRange = index >= 0 && index < menuSize;
+        if (!isIndexInRange) {
+            throw new Error('MDCMenuFoundation: No list item at specified index.');
+        }
+    }
+}
+//# sourceMappingURL=foundation.js.map

package/menu/lib/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["foundation.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 {MDCMenuSurfaceFoundation} from '../../menusurface/lib/foundation.js';\n\nimport {MDCMenuAdapter} from './adapter.js';\nimport {cssClasses, numbers, strings} from './constants.js';\n\nconst LIST_ITEM_DISABLED_CLASS = 'md3-list-item--disabled';\n\nexport class MDCMenuFoundation {\n  static get cssClasses() {\n    return cssClasses;\n  }\n\n  static get strings() {\n    return strings;\n  }\n\n  static get numbers() {\n    return numbers;\n  }\n\n  private readonly adapter: MDCMenuAdapter;\n  private closeAnimationEndTimerId = 0;\n  private selectedIndex = -1;\n\n  /**\n   * @see {@link MDCMenuAdapter} for typing information on parameters and return types.\n   */\n  static get defaultAdapter(): MDCMenuAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClassToElementAtIndex: () => undefined,\n      removeClassFromElementAtIndex: () => undefined,\n      addAttributeToElementAtIndex: () => undefined,\n      removeAttributeFromElementAtIndex: () => undefined,\n      getAttributeFromElementAtIndex: () => null,\n      elementContainsClass: () => false,\n      closeSurface: () => undefined,\n      getElementIndex: () => -1,\n      notifySelected: () => undefined,\n      getMenuItemCount: () => 0,\n      getSelectedSiblingOfItemAtIndex: () => -1,\n      isSelectableItemAtIndex: () => false,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  constructor(adapter: Partial<MDCMenuAdapter>) {\n    this.adapter = {...MDCMenuFoundation.defaultAdapter, ...adapter};\n  }\n\n  destroy() {\n    if (this.closeAnimationEndTimerId) {\n      clearTimeout(this.closeAnimationEndTimerId);\n    }\n\n    this.adapter.closeSurface();\n  }\n\n  handleKeydown(evt: KeyboardEvent) {\n    const {key, keyCode} = evt;\n    const isTab = key === 'Tab' || keyCode === 9;\n\n    if (isTab) {\n      this.adapter.closeSurface(/** skipRestoreFocus */ true);\n    }\n  }\n\n  handleItemAction(listItem: Element) {\n    const index = this.adapter.getElementIndex(listItem);\n    if (index < 0) {\n      return;\n    }\n\n    this.adapter.notifySelected({index});\n    const skipRestoreFocus = this.adapter.getAttributeFromElementAtIndex(\n                                 index, strings.SKIP_RESTORE_FOCUS) === 'true';\n    this.adapter.closeSurface(skipRestoreFocus);\n\n    // Wait for the menu to close before adding/removing classes that affect\n    // styles.\n    this.closeAnimationEndTimerId = setTimeout(() => {\n      // Recompute the index in case the menu contents have changed.\n      const recomputedIndex = this.adapter.getElementIndex(listItem);\n      if (recomputedIndex >= 0 &&\n          this.adapter.isSelectableItemAtIndex(recomputedIndex)) {\n        this.setSelectedIndex(recomputedIndex);\n      }\n    }, MDCMenuSurfaceFoundation.numbers.TRANSITION_CLOSE_DURATION);\n  }\n\n  /** @return Index of the currently selected list item within the menu. */\n  getSelectedIndex() {\n    return this.selectedIndex;\n  }\n\n  /**\n   * Selects the list item at `index` within the menu.\n   * @param index Index of list item within the menu.\n   */\n  setSelectedIndex(index: number) {\n    this.validatedIndex(index);\n\n    if (!this.adapter.isSelectableItemAtIndex(index)) {\n      throw new Error(\n          'MDCMenuFoundation: No selection group at specified index.');\n    }\n\n    const prevSelectedIndex =\n        this.adapter.getSelectedSiblingOfItemAtIndex(index);\n    if (prevSelectedIndex >= 0) {\n      this.adapter.removeAttributeFromElementAtIndex(\n          prevSelectedIndex, strings.ARIA_CHECKED_ATTR);\n      this.adapter.removeClassFromElementAtIndex(\n          prevSelectedIndex, cssClasses.MENU_SELECTED_LIST_ITEM);\n    }\n\n    this.adapter.addClassToElementAtIndex(\n        index, cssClasses.MENU_SELECTED_LIST_ITEM);\n    this.adapter.addAttributeToElementAtIndex(\n        index, strings.ARIA_CHECKED_ATTR, 'true');\n\n    this.selectedIndex = index;\n  }\n\n  /**\n   * Sets the enabled state to isEnabled for the menu item at the given index.\n   * @param index Index of the menu item\n   * @param isEnabled The desired enabled state of the menu item.\n   */\n  setEnabled(index: number, isEnabled: boolean): void {\n    this.validatedIndex(index);\n\n    if (isEnabled) {\n      this.adapter.removeClassFromElementAtIndex(\n          index, LIST_ITEM_DISABLED_CLASS);\n      this.adapter.addAttributeToElementAtIndex(\n          index, strings.ARIA_DISABLED_ATTR, 'false');\n    } else {\n      this.adapter.addClassToElementAtIndex(index, LIST_ITEM_DISABLED_CLASS);\n      this.adapter.addAttributeToElementAtIndex(\n          index, strings.ARIA_DISABLED_ATTR, 'true');\n    }\n  }\n\n  private validatedIndex(index: number): void {\n    const menuSize = this.adapter.getMenuItemCount();\n    const isIndexInRange = index >= 0 && index < menuSize;\n\n    if (!isIndexInRange) {\n      throw new Error('MDCMenuFoundation: No list item at specified index.');\n    }\n  }\n}\n"]}

package/menu/lib/menu-button-styles.css.d.ts

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

package/menu/lib/menu-button-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 `.md3-menu-button{overflow:visible;position:relative}/*# sourceMappingURL=menu-button-styles.css.map */
+`;
+//# sourceMappingURL=menu-button-styles.css.js.map

package/menu/lib/menu-button-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button-styles.css.js","sourceRoot":"","sources":["menu-button-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`.md3-menu-button{overflow:visible;position:relative}/*# sourceMappingURL=menu-button-styles.css.map */\n`;\n "]}

package/menu/lib/menu-button-styles.scss

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use './menu-button';
+
+@include menu-button.static-styles();

package/menu/lib/menu-button.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { Menu } from './menu.js';
+/**
+ * Menu button component that automatically attaches a slotted menu to the
+ * slotted button.
+ */
+export declare class MenuButton extends LitElement {
+    protected readonly buttonAssignedElements: HTMLElement[];
+    protected readonly menuAssignedElements: HTMLElement[];
+    get button(): HTMLElement;
+    get menu(): Menu;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * If key event is ArrowUp or ArrowDown, opens the menu.
+     */
+    private handleButtonKeydown;
+    /**
+     * Toggles the menu on button click.
+     */
+    private handleButtonClick;
+}

package/menu/lib/menu-button.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { Menu } from './menu.js';
+/**
+ * Menu button component that automatically attaches a slotted menu to the
+ * slotted button.
+ */
+export class MenuButton extends LitElement {
+    get button() {
+        if (this.buttonAssignedElements.length === 0) {
+            throw new Error('MenuButton: Missing a slot="button" element.');
+        }
+        return this.buttonAssignedElements[0];
+    }
+    get menu() {
+        if (this.menuAssignedElements.length === 0) {
+            throw new Error('MenuButton: Missing a slot="menu" element.');
+        }
+        if (!(this.menuAssignedElements[0] instanceof Menu)) {
+            throw new Error('MenuButton: The slot="menu" element must be an instance of the ' +
+                'Menu component.');
+        }
+        return this.menuAssignedElements[0];
+    }
+    render() {
+        return html `
+      <div class="md3-menu-button">
+        <span>
+          <slot name="button"
+              @click=${this.handleButtonClick}
+              @keydown=${this.handleButtonKeydown}>
+          </slot>
+        </span>
+        <span><slot name="menu"></slot></span>
+      </div>
+    `;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (!this.menu.anchor) {
+            this.menu.anchor = this.button;
+        }
+    }
+    /**
+     * If key event is ArrowUp or ArrowDown, opens the menu.
+     */
+    handleButtonKeydown(event) {
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
+            return;
+        if (event.key === 'ArrowUp') {
+            this.menu.defaultFocus = 'LAST_ITEM';
+        }
+        else if (event.key === 'ArrowDown') {
+            this.menu.defaultFocus = 'FIRST_ITEM';
+        }
+        this.menu.show();
+    }
+    /**
+     * Toggles the menu on button click.
+     */
+    handleButtonClick(event) {
+        if (this.menu.open) {
+            this.menu.close();
+            return;
+        }
+        // Whether the click is from SPACE or ENTER keypress on a button, for which
+        // the browser fires a synthetic click event.
+        const isSyntheticClickEvent = event.pointerType === '';
+        if (isSyntheticClickEvent) {
+            // Key events should automatically focus on first menu item.
+            this.menu.defaultFocus = 'FIRST_ITEM';
+        }
+        else {
+            this.menu.defaultFocus = 'LIST_ROOT';
+        }
+        this.menu.show();
+    }
+}
+__decorate([
+    queryAssignedElements({ slot: 'button', flatten: true }),
+    __metadata("design:type", Array)
+], MenuButton.prototype, "buttonAssignedElements", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'menu', flatten: true }),
+    __metadata("design:type", Array)
+], MenuButton.prototype, "menuAssignedElements", void 0);
+//# sourceMappingURL=menu-button.js.map

package/menu/lib/menu-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["menu-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAOxC,IAAI,MAAM;QACR,IAAI,IAAI,CAAC,sBAAsB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;SAChE;QACD,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,IAAI;QACN,IAAI,IAAI,CAAC,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1C,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;SAC9D;QACD,IAAI,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,EAAE;YACnD,MAAM,IAAI,KAAK,CACX,iEAAiE;gBACjE,iBAAiB,CAAC,CAAC;SACxB;QACD,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;uBAIQ,IAAI,CAAC,iBAAiB;yBACpB,IAAI,CAAC,mBAAmB;;;;;KAK5C,CAAC;IACJ,CAAC;IAEkB,YAAY,CAAC,iBAAiC;QAC/D,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACrB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;SAChC;IACH,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,KAAoB;QAC9C,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;YAAE,OAAO;QAEjE,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;SACtC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACpC,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;SACvC;QACD,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;IAED;;OAEG;IACK,iBAAiB,CAAC,KAAmB;QAC3C,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,OAAO;SACR;QAED,2EAA2E;QAC3E,6CAA6C;QAC7C,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,KAAK,EAAE,CAAC;QACvD,IAAI,qBAAqB,EAAE;YACzB,4DAA4D;YAC5D,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;SACtC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;CACF;AAjFC;IADC,qBAAqB,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;0DACG;AAG1D;IADC,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;wDACG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {Menu} from './menu.js';\n\n/**\n * Menu button component that automatically attaches a slotted menu to the\n * slotted button.\n */\nexport class MenuButton extends LitElement {\n  @queryAssignedElements({slot: 'button', flatten: true})\n  protected readonly buttonAssignedElements!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'menu', flatten: true})\n  protected readonly menuAssignedElements!: HTMLElement[];\n\n  get button(): HTMLElement {\n    if (this.buttonAssignedElements.length === 0) {\n      throw new Error('MenuButton: Missing a slot=\"button\" element.')\n    }\n    return this.buttonAssignedElements[0];\n  }\n\n  get menu(): Menu {\n    if (this.menuAssignedElements.length === 0) {\n      throw new Error('MenuButton: Missing a slot=\"menu\" element.')\n    }\n    if (!(this.menuAssignedElements[0] instanceof Menu)) {\n      throw new Error(\n          'MenuButton: The slot=\"menu\" element must be an instance of the ' +\n          'Menu component.');\n    }\n    return this.menuAssignedElements[0];\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"md3-menu-button\">\n        <span>\n          <slot name=\"button\"\n              @click=${this.handleButtonClick}\n              @keydown=${this.handleButtonKeydown}>\n          </slot>\n        </span>\n        <span><slot name=\"menu\"></slot></span>\n      </div>\n    `;\n  }\n\n  protected override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.menu.anchor) {\n      this.menu.anchor = this.button;\n    }\n  }\n\n  /**\n   * If key event is ArrowUp or ArrowDown, opens the menu.\n   */\n  private handleButtonKeydown(event: KeyboardEvent) {\n    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;\n\n    if (event.key === 'ArrowUp') {\n      this.menu.defaultFocus = 'LAST_ITEM';\n    } else if (event.key === 'ArrowDown') {\n      this.menu.defaultFocus = 'FIRST_ITEM';\n    }\n    this.menu.show();\n  }\n\n  /**\n   * Toggles the menu on button click.\n   */\n  private handleButtonClick(event: PointerEvent) {\n    if (this.menu.open) {\n      this.menu.close();\n      return;\n    }\n\n    // Whether the click is from SPACE or ENTER keypress on a button, for which\n    // the browser fires a synthetic click event.\n    const isSyntheticClickEvent = event.pointerType === '';\n    if (isSyntheticClickEvent) {\n      // Key events should automatically focus on first menu item.\n      this.menu.defaultFocus = 'FIRST_ITEM';\n    } else {\n      this.menu.defaultFocus = 'LIST_ROOT';\n    }\n\n    this.menu.show();\n  }\n}\n"]}

package/menu/lib/menu-styles.css.d.ts

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

package/menu/lib/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 `.md3-menu{--md-menu-surface-container-elevation-shadow:var(--md-menu-container-elevation-shadow, 0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15));--md-menu-surface-container-shape:var(--md-menu-container-shape, 4px);--md-list-container-color:var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--md-list-container-surface-tint-layer-color:var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--md-list-container-elevation-overlay-opacity:var(--md-menu-container-elevation-overlay-opacity, 0.08);--md-list-list-item-container-color:var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--md-list-list-item-one-line-container-height:var(--md-menu-list-item-container-height, 48px);--md-list-list-item-disabled-label-text-color:var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-disabled-label-text-opacity:var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--md-list-list-item-hover-label-text-color:var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-hover-state-layer-color:var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-hover-state-layer-opacity:var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--md-list-list-item-label-text-color:var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-label-text-font:var(--md-menu-list-item-label-text-font, Roboto);--md-list-list-item-label-text-line-height:var(--md-menu-list-item-label-text-line-height, 20px);--md-list-list-item-label-text-size:var(--md-menu-list-item-label-text-size, 14px);--md-list-list-item-label-text-tracking:var(--md-menu-list-item-label-text-tracking, 0.1px);--md-list-list-item-label-text-weight:var(--md-menu-list-item-label-text-tracking, 0.1px);--md-list-list-item-disabled-leading-icon-color:var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-disabled-leading-icon-opacity:var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--md-list-list-item-hover-leading-icon-color:var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--md-list-list-item-leading-icon-color:var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--md-list-list-item-leading-icon-size:var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--md-list-list-item-disabled-trailing-icon-color:var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-disabled-trailing-icon-opacity:var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--md-list-list-item-hover-trailing-icon-color:var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--md-list-list-item-trailing-icon-color:var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}/*# sourceMappingURL=menu-styles.css.map */
+`;
+//# sourceMappingURL=menu-styles.css.js.map

package/menu/lib/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`.md3-menu{--md-menu-surface-container-elevation-shadow:var(--md-menu-container-elevation-shadow, 0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15));--md-menu-surface-container-shape:var(--md-menu-container-shape, 4px);--md-list-container-color:var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--md-list-container-surface-tint-layer-color:var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--md-list-container-elevation-overlay-opacity:var(--md-menu-container-elevation-overlay-opacity, 0.08);--md-list-list-item-container-color:var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--md-list-list-item-one-line-container-height:var(--md-menu-list-item-container-height, 48px);--md-list-list-item-disabled-label-text-color:var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-disabled-label-text-opacity:var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--md-list-list-item-hover-label-text-color:var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-hover-state-layer-color:var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-hover-state-layer-opacity:var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--md-list-list-item-label-text-color:var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-label-text-font:var(--md-menu-list-item-label-text-font, Roboto);--md-list-list-item-label-text-line-height:var(--md-menu-list-item-label-text-line-height, 20px);--md-list-list-item-label-text-size:var(--md-menu-list-item-label-text-size, 14px);--md-list-list-item-label-text-tracking:var(--md-menu-list-item-label-text-tracking, 0.1px);--md-list-list-item-label-text-weight:var(--md-menu-list-item-label-text-tracking, 0.1px);--md-list-list-item-disabled-leading-icon-color:var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-disabled-leading-icon-opacity:var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--md-list-list-item-hover-leading-icon-color:var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--md-list-list-item-leading-icon-color:var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--md-list-list-item-leading-icon-size:var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--md-list-list-item-disabled-trailing-icon-color:var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--md-list-list-item-disabled-trailing-icon-opacity:var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--md-list-list-item-hover-trailing-icon-color:var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--md-list-list-item-trailing-icon-color:var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}

package/menu/lib/menu-styles.scss

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

package/menu/lib/menu.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../list/list.js';
+import '../../menusurface/menu-surface.js';
+import { LitElement } from 'lit';
+import { List } from '../../list/lib/list.js';
+import { ListItem } from '../../list/lib/listitem/list-item.js';
+import { Corner, MenuSurface } from '../../menusurface/lib/menu-surface.js';
+import { MDCMenuAdapter } from './adapter.js';
+import { MDCMenuFoundation } from './foundation.js';
+interface ActionDetail {
+    item: ListItem;
+}
+/** Element to focus on when menu is first opened. */
+export declare type DefaultFocusState = 'NONE' | 'LIST_ROOT' | 'FIRST_ITEM' | 'LAST_ITEM';
+/**
+ * @fires selected {SelectedDetail}
+ * @fires action {ActionDetail}
+ * @fires items-updated
+ * @fires opened
+ * @fires closed
+ */
+export declare abstract class Menu extends LitElement {
+    protected mdcFoundation: MDCMenuFoundation;
+    protected listElementInternal: List | null;
+    mdcRoot: MenuSurface;
+    slotElement: HTMLSlotElement | null;
+    anchor: HTMLElement | null;
+    ariaLabel: string;
+    open: boolean;
+    quick: boolean;
+    corner: Corner;
+    x: number | null;
+    y: number | null;
+    absolute: boolean;
+    activatable: boolean;
+    fixed: boolean;
+    forceGroupSelection: boolean;
+    fullwidth: boolean;
+    flipMenuHorizontally: boolean;
+    stayOpenOnBodyClick: boolean;
+    skipRestoreFocus: boolean;
+    defaultFocus: DefaultFocusState;
+    protected listUpdateComplete: null | Promise<unknown>;
+    protected get listElement(): List;
+    get items(): ListItem[];
+    render(): import("lit-html").TemplateResult<1>;
+    protected getMenuItemTagName(): string;
+    protected createAdapter(): MDCMenuAdapter;
+    protected onKeydown(evt: KeyboardEvent): void;
+    protected onAction(evt: CustomEvent<ActionDetail>): void;
+    protected onOpened(): void;
+    protected onClosed(): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    protected firstUpdated(): Promise<void>;
+    close(): void;
+    show(): void;
+}
+export {};