@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/menu/lib/typeaheadController.js

@@ -0,0 +1,252 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Indicies to access the TypeaheadRecord tuple type.
+ */
+export const TYPEAHEAD_RECORD = {
+    INDEX: 0,
+    ITEM: 1,
+    TEXT: 2,
+};
+/**
+ * This controller listens to `keydown` events and searches the header text of
+ * an array of `MenuItem`s with the corresponding entered keys within the buffer
+ * time and activates the item.
+ *
+ * @example
+ * ```ts
+ * const typeaheadController = new TypeaheadController(() => ({
+ *   typeaheadBufferTime: 50,
+ *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))
+ * }));
+ * html`
+ *   <div
+ *       @keydown=${typeaheadController.onKeydown}
+ *       tabindex="0"
+ *       class="activeItemText">
+ *     <!-- focusable element that will receive keydown events -->
+ *     Apple
+ *   </div>
+ *   <div>
+ *     <md-menu-item active header="Apple"></md-menu-item>
+ *     <md-menu-item header="Apricot"></md-menu-item>
+ *     <md-menu-item header="Banana"></md-menu-item>
+ *     <md-menu-item header="Olive"></md-menu-item>
+ *     <md-menu-item header="Orange"></md-menu-item>
+ *   </div>
+ * `;
+ * ```
+ */
+export class TypeaheadController {
+    /**
+     * @param getProperties A function that returns the options of the typeahead
+     * controller:
+     *
+     * {
+     *   getItems: A function that returns an array of menu items to be searched.
+     *   typeaheadBufferTime: The maximum time between each keystroke to keep the
+     *       current type buffer alive.
+     * }
+     */
+    constructor(getProperties) {
+        this.getProperties = getProperties;
+        /**
+         * Array of tuples that helps with indexing.
+         */
+        this.typeaheadRecords = [];
+        /**
+         * Currently-typed text since last buffer timeout
+         */
+        this.typaheadBuffer = '';
+        /**
+         * The timeout id from the current buffer's setTimeout
+         */
+        this.cancelTypeaheadTimeout = 0;
+        /**
+         * If we are currently "typing"
+         */
+        this.isTypingAhead = false;
+        /**
+         * The record of the last active item.
+         */
+        this.lastActiveRecord = null;
+        /**
+         * Apply this listener to the element that will receive `keydown` events that
+         * should trigger this controller.
+         *
+         * @param e The native browser `KeyboardEvent` from the `keydown` event.
+         */
+        this.onKeydown = (e) => {
+            if (this.isTypingAhead) {
+                this.typeahead(e);
+            }
+            else {
+                this.beginTypeahead(e);
+            }
+        };
+        /**
+         * Ends the current typeahead and clears the buffer.
+         */
+        this.endTypeahead = () => {
+            this.isTypingAhead = false;
+            this.typaheadBuffer = '';
+            this.typeaheadRecords = [];
+        };
+    }
+    get items() {
+        return this.getProperties().getItems();
+    }
+    get active() {
+        return this.getProperties().active;
+    }
+    /**
+     * Sets up typingahead
+     */
+    beginTypeahead(e) {
+        if (!this.active) {
+            return;
+        }
+        // We don't want to typeahead if the _beginning_ of the typeahead is a menu
+        // navigation, or a selection. We will handle "Space" only if it's in the
+        // middle of a typeahead
+        if (e.code === 'Space' || e.code === 'Enter' ||
+            e.code.startsWith('Arrow') || e.code === 'Escape') {
+            return;
+        }
+        this.isTypingAhead = true;
+        // Generates the record array data structure which is the index, the element
+        // and a normalized header.
+        this.typeaheadRecords = this.items.map((el, index) => [index, el, el.headline.trim().toLowerCase()]);
+        this.lastActiveRecord =
+            this.typeaheadRecords.find(record => record[TYPEAHEAD_RECORD.ITEM].active) ??
+                null;
+        if (this.lastActiveRecord) {
+            this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
+        }
+        this.typeahead(e);
+    }
+    /**
+     * Performs the typeahead. Based on the normalized items and the current text
+     * buffer, finds the _next_ item with matching text and activates it.
+     *
+     * @example
+     *
+     * items: Apple, Banana, Olive, Orange, Cucumber
+     * buffer: ''
+     * user types: o
+     *
+     * activates Olive
+     *
+     * @example
+     *
+     * items: Apple, Banana, Olive (active), Orange, Cucumber
+     * buffer: 'o'
+     * user types: l
+     *
+     * activates Olive
+     *
+     * @example
+     *
+     * items: Apple, Banana, Olive (active), Orange, Cucumber
+     * buffer: ''
+     * user types: o
+     *
+     * activates Orange
+     *
+     * @example
+     *
+     * items: Apple, Banana, Olive, Orange (active), Cucumber
+     * buffer: ''
+     * user types: o
+     *
+     * activates Olive
+     */
+    typeahead(e) {
+        clearTimeout(this.cancelTypeaheadTimeout);
+        // Stop typingahead if one of the navigation or selection keys (except for
+        // Space) are pressed
+        if (e.code === 'Enter' || e.code.startsWith('Arrow') ||
+            e.code === 'Escape') {
+            this.endTypeahead();
+            if (this.lastActiveRecord) {
+                this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
+            }
+            return;
+        }
+        // If Space is pressed, prevent it from selecting and closing the menu
+        if (e.code === 'Space') {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        // Start up a new keystroke buffer timeout
+        this.cancelTypeaheadTimeout =
+            setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);
+        this.typaheadBuffer += e.key.toLowerCase();
+        const lastActiveIndex = this.lastActiveRecord ?
+            this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] :
+            -1;
+        const numRecords = this.typeaheadRecords.length;
+        /**
+         * Sorting function that will resort the items starting with the given index
+         *
+         * @example
+         *
+         * this.typeaheadRecords =
+         * 0: [0, <reference>, 'apple']
+         * 1: [1, <reference>, 'apricot']
+         * 2: [2, <reference>, 'banana']
+         * 3: [3, <reference>, 'olive'] <-- lastActiveIndex
+         * 4: [4, <reference>, 'orange']
+         * 5: [5, <reference>, 'strawberry']
+         *
+         * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)
+         *                                       - rebaseIndexOnActive(b)) ===
+         * 0: [3, <reference>, 'olive'] <-- lastActiveIndex
+         * 1: [4, <reference>, 'orange']
+         * 2: [5, <reference>, 'strawberry']
+         * 3: [0, <reference>, 'apple']
+         * 4: [1, <reference>, 'apricot']
+         * 5: [2, <reference>, 'banana']
+         */
+        const rebaseIndexOnActive = (record) => {
+            return (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
+                numRecords;
+        };
+        // records filtered and sorted / rebased around the last active index
+        const matchingRecords = this.typeaheadRecords
+            .filter(record => !record[TYPEAHEAD_RECORD.ITEM].disabled &&
+            record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer))
+            .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));
+        // Just leave if there's nothing that matches. Native select will just
+        // choose the first thing that starts with the next letter in the alphabet
+        // but that's out of scope and hard to localize
+        if (matchingRecords.length === 0) {
+            clearTimeout(this.cancelTypeaheadTimeout);
+            if (this.lastActiveRecord) {
+                this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
+            }
+            this.endTypeahead();
+            return;
+        }
+        const isNewQuery = this.typaheadBuffer.length === 1;
+        let nextRecord;
+        // This is likely the case that someone is trying to "tab" through different
+        // entries that start with the same letter
+        if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {
+            nextRecord = matchingRecords[1] ?? matchingRecords[0];
+        }
+        else {
+            nextRecord = matchingRecords[0];
+        }
+        if (this.lastActiveRecord) {
+            this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
+        }
+        this.lastActiveRecord = nextRecord;
+        nextRecord[TYPEAHEAD_RECORD.ITEM].active = true;
+        return;
+    }
+}
+//# sourceMappingURL=typeaheadController.js.map

package/menu/lib/typeaheadController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeaheadController.js","sourceRoot":"","sources":["typeaheadController.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuItem} from './shared.js';\n\n/**\n * The options that are passed to the typeahead controller.\n */\nexport interface TypeaheadControllerProperties {\n  /**\n   * A function that returns an array of menu items to be searched.\n   * @return An array of menu items to be searched by typing.\n   */\n  getItems: () => MenuItem[];\n  /**\n   * The maximum time between each keystroke to keep the current type buffer\n   * alive.\n   */\n  typeaheadBufferTime: number;\n  /**\n   * Whether or not the typeahead should listen for keystrokes or not.\n   */\n  active: boolean;\n}\n\n/**\n * Data structure tuple that helps with indexing.\n *\n * [index, item, normalized header text]\n */\ntype TypeaheadRecord = [number, MenuItem, string];\n/**\n * Indicies to access the TypeaheadRecord tuple type.\n */\nexport const TYPEAHEAD_RECORD = {\n  INDEX: 0,\n  ITEM: 1,\n  TEXT: 2,\n} as const;\n\n/**\n * This controller listens to `keydown` events and searches the header text of\n * an array of `MenuItem`s with the corresponding entered keys within the buffer\n * time and activates the item.\n *\n * @example\n * ```ts\n * const typeaheadController = new TypeaheadController(() => ({\n *   typeaheadBufferTime: 50,\n *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))\n * }));\n * html`\n *   <div\n *       @keydown=${typeaheadController.onKeydown}\n *       tabindex=\"0\"\n *       class=\"activeItemText\">\n *     <!-- focusable element that will receive keydown events -->\n *     Apple\n *   </div>\n *   <div>\n *     <md-menu-item active header=\"Apple\"></md-menu-item>\n *     <md-menu-item header=\"Apricot\"></md-menu-item>\n *     <md-menu-item header=\"Banana\"></md-menu-item>\n *     <md-menu-item header=\"Olive\"></md-menu-item>\n *     <md-menu-item header=\"Orange\"></md-menu-item>\n *   </div>\n * `;\n * ```\n */\nexport class TypeaheadController {\n  /**\n   * Array of tuples that helps with indexing.\n   */\n  private typeaheadRecords: TypeaheadRecord[] = [];\n  /**\n   * Currently-typed text since last buffer timeout\n   */\n  private typaheadBuffer = '';\n  /**\n   * The timeout id from the current buffer's setTimeout\n   */\n  private cancelTypeaheadTimeout = 0;\n  /**\n   * If we are currently \"typing\"\n   */\n  isTypingAhead = false;\n  /**\n   * The record of the last active item.\n   */\n  lastActiveRecord: TypeaheadRecord|null = null;\n\n  /**\n   * @param getProperties A function that returns the options of the typeahead\n   * controller:\n   *\n   * {\n   *   getItems: A function that returns an array of menu items to be searched.\n   *   typeaheadBufferTime: The maximum time between each keystroke to keep the\n   *       current type buffer alive.\n   * }\n   */\n  constructor(\n      private readonly getProperties: () => TypeaheadControllerProperties,\n  ) {}\n\n  private get items() {\n    return this.getProperties().getItems();\n  }\n\n  private get active() {\n    return this.getProperties().active;\n  }\n\n  /**\n   * Apply this listener to the element that will receive `keydown` events that\n   * should trigger this controller.\n   *\n   * @param e The native browser `KeyboardEvent` from the `keydown` event.\n   */\n  readonly onKeydown = (e: KeyboardEvent) => {\n    if (this.isTypingAhead) {\n      this.typeahead(e);\n    } else {\n      this.beginTypeahead(e);\n    }\n  };\n\n  /**\n   * Sets up typingahead\n   */\n  private beginTypeahead(e: KeyboardEvent) {\n    if (!this.active) {\n      return;\n    }\n\n    // We don't want to typeahead if the _beginning_ of the typeahead is a menu\n    // navigation, or a selection. We will handle \"Space\" only if it's in the\n    // middle of a typeahead\n    if (e.code === 'Space' || e.code === 'Enter' ||\n        e.code.startsWith('Arrow') || e.code === 'Escape') {\n      return;\n    }\n\n    this.isTypingAhead = true;\n    // Generates the record array data structure which is the index, the element\n    // and a normalized header.\n    this.typeaheadRecords = this.items.map(\n        (el, index) => [index, el, el.headline.trim().toLowerCase()]);\n    this.lastActiveRecord =\n        this.typeaheadRecords.find(\n            record => record[TYPEAHEAD_RECORD.ITEM].active) ??\n        null;\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;\n    }\n    this.typeahead(e);\n  }\n\n  /**\n   * Performs the typeahead. Based on the normalized items and the current text\n   * buffer, finds the _next_ item with matching text and activates it.\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: 'o'\n   * user types: l\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Orange\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange (active), Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   */\n  private typeahead(e: KeyboardEvent) {\n    clearTimeout(this.cancelTypeaheadTimeout);\n    // Stop typingahead if one of the navigation or selection keys (except for\n    // Space) are pressed\n    if (e.code === 'Enter' || e.code.startsWith('Arrow') ||\n        e.code === 'Escape') {\n      this.endTypeahead();\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;\n      }\n      return;\n    }\n\n    // If Space is pressed, prevent it from selecting and closing the menu\n    if (e.code === 'Space') {\n      e.stopPropagation();\n      e.preventDefault();\n    }\n\n    // Start up a new keystroke buffer timeout\n    this.cancelTypeaheadTimeout =\n        setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);\n\n    this.typaheadBuffer += e.key.toLowerCase();\n\n    const lastActiveIndex = this.lastActiveRecord ?\n        this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] :\n        -1;\n    const numRecords = this.typeaheadRecords.length;\n\n    /**\n     * Sorting function that will resort the items starting with the given index\n     *\n     * @example\n     *\n     * this.typeaheadRecords =\n     * 0: [0, <reference>, 'apple']\n     * 1: [1, <reference>, 'apricot']\n     * 2: [2, <reference>, 'banana']\n     * 3: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 4: [4, <reference>, 'orange']\n     * 5: [5, <reference>, 'strawberry']\n     *\n     * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)\n     *                                       - rebaseIndexOnActive(b)) ===\n     * 0: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 1: [4, <reference>, 'orange']\n     * 2: [5, <reference>, 'strawberry']\n     * 3: [0, <reference>, 'apple']\n     * 4: [1, <reference>, 'apricot']\n     * 5: [2, <reference>, 'banana']\n     */\n    const rebaseIndexOnActive = (record: TypeaheadRecord) => {\n      return (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %\n          numRecords;\n    };\n\n    // records filtered and sorted / rebased around the last active index\n    const matchingRecords =\n        this.typeaheadRecords\n            .filter(\n                record => !record[TYPEAHEAD_RECORD.ITEM].disabled &&\n                    record[TYPEAHEAD_RECORD.TEXT].startsWith(\n                        this.typaheadBuffer))\n            .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));\n\n    // Just leave if there's nothing that matches. Native select will just\n    // choose the first thing that starts with the next letter in the alphabet\n    // but that's out of scope and hard to localize\n    if (matchingRecords.length === 0) {\n      clearTimeout(this.cancelTypeaheadTimeout);\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;\n      }\n      this.endTypeahead();\n      return;\n    }\n\n    const isNewQuery = this.typaheadBuffer.length === 1;\n    let nextRecord: TypeaheadRecord;\n\n    // This is likely the case that someone is trying to \"tab\" through different\n    // entries that start with the same letter\n    if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {\n      nextRecord = matchingRecords[1] ?? matchingRecords[0];\n    } else {\n      nextRecord = matchingRecords[0];\n    }\n\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;\n    }\n\n    this.lastActiveRecord = nextRecord;\n    nextRecord[TYPEAHEAD_RECORD.ITEM].active = true;\n    return;\n  }\n\n  /**\n   * Ends the current typeahead and clears the buffer.\n   */\n  private readonly endTypeahead = () => {\n    this.isTypingAhead = false;\n    this.typaheadBuffer = '';\n    this.typeaheadRecords = [];\n  };\n}\n"]}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuItemLink } from './lib/menuitemlink/menu-item-link.js';
+export { ListItem } from '../list/lib/listitem/list-item.js';
+export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-menu-item-link': MdMenuItemLink;
+    }
+}
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This is a linkable variant.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdMenuItemLink extends MenuItemLink {
+    static styles: import("lit").CSSResult[];
+}

package/menu/menu-item-link.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as listItemForcedColorsStyles } from '../list/lib/listitem/forced-colors-styles.css.js';
+import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
+import { styles as forcedColorsStyles } from './lib/menuitem/forced-colors-styles.css.js';
+import { styles } from './lib/menuitem/menu-item-styles.css.js';
+import { MenuItemLink } from './lib/menuitemlink/menu-item-link.js';
+export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This is a linkable variant.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdMenuItemLink = class MdMenuItemLink extends MenuItemLink {
+};
+MdMenuItemLink.styles = [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
+MdMenuItemLink = __decorate([
+    customElement('md-menu-item-link')
+], MdMenuItemLink);
+export { MdMenuItemLink };
+//# sourceMappingURL=menu-item-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-link.js","sourceRoot":"","sources":["menu-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,kDAAkD,CAAC;AACtG,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAEtF,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,4CAA4C,CAAC;AACxF,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAGlE,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAS/E;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAG1B;SAHY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';\nimport {styles} from './lib/menuitem/menu-item-styles.css.js';\nimport {MenuItemLink} from './lib/menuitemlink/menu-item-link.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item-link': MdMenuItemLink;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * This is a linkable variant.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu-item-link')\nexport class MdMenuItemLink extends MenuItemLink {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}

package/menu/menu-item.d.ts

@@ -3,12 +3,29 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { MenuItem } from './lib/menuitem/menu-item.js';
+import { MenuItemEl } from './lib/menuitem/menu-item.js';
+export { ListItem } from '../list/lib/listitem/list-item.js';
+export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-menu-item': MdMenuItem;
     }
 }
-export declare class MdMenuItem extends MenuItem {
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdMenuItem extends MenuItemEl {
     static styles: import("lit").CSSResult[];
 }

package/menu/menu-item.js

@@ -5,11 +5,30 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles } from '../list/lib/listitem/list-item-styles.css.js';
-import { MenuItem } from './lib/menuitem/menu-item.js';
-let MdMenuItem = class MdMenuItem extends MenuItem {
+import { styles as listItemForcedColorsStyles } from '../list/lib/listitem/forced-colors-styles.css.js';
+import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
+import { styles as forcedColorsStyles } from './lib/menuitem/forced-colors-styles.css.js';
+import { MenuItemEl } from './lib/menuitem/menu-item.js';
+import { styles } from './lib/menuitem/menu-item-styles.css.js';
+export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdMenuItem = class MdMenuItem extends MenuItemEl {
 };
-MdMenuItem.styles = [styles];
+MdMenuItem.styles = [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
 MdMenuItem = __decorate([
     customElement('md-menu-item')
 ], MdMenuItem);

package/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,8CAA8C,CAAC;AAEpE,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AASrD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,QAAQ;CAEvC,CAAA;AADiB,iBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,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} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {MenuItem} from './lib/menuitem/menu-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item': MdMenuItem;\n  }\n}\n\n@customElement('md-menu-item')\nexport class MdMenuItem extends MenuItem {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,kDAAkD,CAAC;AACtG,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAEtF,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,4CAA4C,CAAC;AACxF,OAAO,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAG9D,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAQ/E;;;;;;;;;;;;;;GAcG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;;AACxB,iBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAGtB;SAHY,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 listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';\nimport {MenuItemEl} from './lib/menuitem/menu-item.js';\nimport {styles} from './lib/menuitem/menu-item-styles.css.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item': MdMenuItem;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu-item')\nexport class MdMenuItem extends MenuItemEl {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}

package/menu/menu.d.ts

@@ -4,11 +4,56 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Menu } from './lib/menu.js';
+export { ListItem } from '../list/lib/listitem/list-item.js';
+export { Corner, DefaultFocusState } from './lib/menu.js';
+export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-menu': MdMenu;
     }
 }
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menus appear when users interact with a button, action, or other control.
+ *
+ * They can be opened from a variety of elements, most commonly icon buttons,
+ * buttons, and text fields.
+ *
+ * md-menu listens for the `close-menu` and `deselect-items` events.
+ *
+ * - `close-menu` closes the menu when dispatched from a child element.
+ * - `deselect-items` deselects all of its immediate menu-item children.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       class="anchor"
+ *       ${ref(anchorRef)}
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
+ * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *     <md-sub-menu-item header="this is a submenu item">
+ *       <md-menu slot="submenu">
+ *         <md-menu-item
+ *           header="This is an item inside a submenu"></md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu-item>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
 export declare class MdMenu extends Menu {
     static styles: import("lit").CSSResult[];
 }

package/menu/menu.js

@@ -5,11 +5,55 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
+import { styles as forcedColors } from './lib/forced-colors-styles.css.js';
 import { Menu } from './lib/menu.js';
 import { styles } from './lib/menu-styles.css.js';
+export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menus appear when users interact with a button, action, or other control.
+ *
+ * They can be opened from a variety of elements, most commonly icon buttons,
+ * buttons, and text fields.
+ *
+ * md-menu listens for the `close-menu` and `deselect-items` events.
+ *
+ * - `close-menu` closes the menu when dispatched from a child element.
+ * - `deselect-items` deselects all of its immediate menu-item children.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       class="anchor"
+ *       ${ref(anchorRef)}
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
+ * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *     <md-sub-menu-item header="this is a submenu item">
+ *       <md-menu slot="submenu">
+ *         <md-menu-item
+ *           header="This is an item inside a submenu"></md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu-item>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
 let MdMenu = class MdMenu extends Menu {
 };
-MdMenu.styles = [styles];
+MdMenu.styles = [styles, forcedColors];
 MdMenu = __decorate([
     customElement('md-menu')
 ], MdMenu);

package/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.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;AAShD,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,IAAI;CAE/B,CAAA;AADiB,aAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","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 {Menu} from './lib/menu.js';\nimport {styles} from './lib/menu-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAIhD,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAQ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","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/forced-colors-styles.css.js';\nimport {Menu} from './lib/menu.js';\nimport {styles} from './lib/menu-styles.css.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {Corner, DefaultFocusState} from './lib/menu.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menus appear when users interact with a button, action, or other control.\n *\n * They can be opened from a variety of elements, most commonly icon buttons,\n * buttons, and text fields.\n *\n * md-menu listens for the `close-menu` and `deselect-items` events.\n *\n * - `close-menu` closes the menu when dispatched from a child element.\n * - `deselect-items` deselects all of its immediate menu-item children.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       class=\"anchor\"\n *       ${ref(anchorRef)}\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents\n *   -->\n *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =\n * anchorRef.value}> <md-menu-item header=\"This is a header\"></md-menu-item>\n *     <md-sub-menu-item header=\"this is a submenu item\">\n *       <md-menu slot=\"submenu\">\n *         <md-menu-item\n *           header=\"This is an item inside a submenu\"></md-menu-item>\n *       </md-menu>\n *     </md-sub-menu-item>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/menu/sub-menu-item.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SubMenuItem } from './lib/submenuitem/sub-menu-item.js';
+export { ListItem } from '../list/lib/listitem/list-item.js';
+export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-sub-menu-item': MdSubMenuItem;
+    }
+}
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This menu item will open a sub-menu that is slotted in the `submenu` slot.
+ * Additionally, the containing menu must either have `has-overflow` or `fixed`
+ * set to `true` in order to display the containing menu properly.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       class="anchor"
+ *       ${ref(anchorRef)}
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
+ * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *     <md-sub-menu-item header="this is a submenu item">
+ *       <md-menu slot="submenu">
+ *         <md-menu-item
+ *           header="This is an item inside a submenu"></md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdSubMenuItem extends SubMenuItem {
+    static styles: import("lit").CSSResult[];
+}