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

package/menu/internal/menuitem/menu-item-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_list-item-selected-container-color: var(--md-menu-item-list-item-selected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_list-item-container-color: var(--md-menu-item-list-item-container-color, var(--md-sys-color-surface-container, #f3edf7));--md-list-item-list-item-container-color: var(--_list-item-container-color)}:host([selected]) .list-item{background-color:var(--_list-item-selected-container-color)}.submenu-hover{--md-ripple-hover-opacity: 0}/*# sourceMappingURL=menu-item-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-menu-item-container-color, var(--md-sys-color-surface-container, #f3edf7));--_selected-container-color: var(--md-menu-item-selected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--md-list-item-container-color: var(--_container-color)}:host([selected]) .list-item{background-color:var(--_selected-container-color)}.submenu-hover{--md-ripple-hover-opacity: 0}/*# sourceMappingURL=menu-item-styles.css.map */
 `;
 //# sourceMappingURL=menu-item-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item-styles.css.js","sourceRoot":"","sources":["menu-item-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{--_list-item-selected-container-color: var(--md-menu-item-list-item-selected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_list-item-container-color: var(--md-menu-item-list-item-container-color, var(--md-sys-color-surface-container, #f3edf7));--md-list-item-list-item-container-color: var(--_list-item-container-color)}:host([selected]) .list-item{background-color:var(--_list-item-selected-container-color)}.submenu-hover{--md-ripple-hover-opacity: 0}/*# sourceMappingURL=menu-item-styles.css.map */\n`;\n "]}
+{"version":3,"file":"menu-item-styles.css.js","sourceRoot":"","sources":["menu-item-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-item-container-color, var(--md-sys-color-surface-container, #f3edf7));--_selected-container-color: var(--md-menu-item-selected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--md-list-item-container-color: var(--_container-color)}:host([selected]) .list-item{background-color:var(--_selected-container-color)}.submenu-hover{--md-ripple-hover-opacity: 0}/*# sourceMappingURL=menu-item-styles.css.map */\n`;\n "]}

package/menu/internal/menuitem/menu-item.js

@@ -44,7 +44,7 @@ export class MenuItemEl extends ListItemEl {
         this.hasFocusRing = focusRing.visible;
     }
     onKeydown(event) {
-        if (this.keepOpen)
+        if (this.keepOpen || event.defaultPrevented)
             return;
         const keyCode = event.code;
         if (!event.defaultPrevented && isClosableKey(keyCode)) {

package/menu/internal/menuitem/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAC,UAAU,EAAe,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAC,YAAY,EAAE,2BAA2B,EAAE,aAAa,EAAW,MAAM,cAAc,CAAC;AAIhG;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QACE;;WAEG;QAEH,eAAU,GAAG,IAAI,CAAC;QAElB;;WAEG;QACgD,aAAQ,GAAG,KAAK,CAAC;QAEjD,iBAAY,GAAG,KAAK,CAAC;QAExC;;WAEG;QACO,oBAAe,GAAG,KAAK,CAAC;QAEhB,SAAI,GAAiB,UAAU,CAAC;IA+BpD,CAAC;IA7BoB,OAAO;QACxB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe;YAAE,OAAO;QAElD,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAC1C,IAAI,EAAE,EAAC,IAAI,EAAE,YAAY,CAAC,eAAe,EAAC,CAAC,CAAC,CAAC;IACnD,CAAC;IAEkB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,gBAAgB,EAAE,IAAI,CAAC,YAAY;SACpC,CAAC;IACJ,CAAC;IAEkB,4BAA4B,CAAC,CAAQ;QACtD,MAAM,SAAS,GAAG,CAAC,CAAC,MAAqB,CAAC;QAC1C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;IACxC,CAAC;IAEkB,SAAS,CAAC,KAAoB;QAC/C,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC;QAE3B,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,aAAa,CAAC,OAAO,CAAC,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAC1C,IAAI,EAAE,EAAC,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAC,CAAC,CAAC,CAAC;SACxD;IACH,CAAC;CACF;AA7CC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAClD;AAKiC;IAAlD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAC,CAAC;4CAAkB;AAE3D;IAAR,KAAK,EAAE;gDAAgC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {property, state} from 'lit/decorators.js';\n\nimport type {MdFocusRing} from '../../../focus/md-focus-ring.js';\nimport {ListItemEl, ListItemRole} from '../../../list/internal/listitem/list-item.js';\nimport {CLOSE_REASON, createDefaultCloseMenuEvent, isClosableKey, MenuItem} from '../shared.js';\n\nexport {ListItemRole} from '../../../list/internal/listitem/list-item.js';\n\n/**\n * @fires close-menu {CloseMenuEvent}\n */\nexport class MenuItemEl extends ListItemEl implements MenuItem {\n  /**\n   * READONLY: self-identifies as a menu item and sets its identifying attribute\n   */\n  @property({type: Boolean, attribute: 'md-menu-item', reflect: true})\n  isMenuItem = true;\n\n  /**\n   * Keeps the menu open if clicked or keyboard selected.\n   */\n  @property({type: Boolean, attribute: 'keep-open'}) keepOpen = false;\n\n  @state() protected hasFocusRing = false;\n\n  /**\n   * Used for overriding e.g. sub-menu-item.\n   */\n  protected keepOpenOnClick = false;\n\n  override readonly type: ListItemRole = 'menuitem';\n\n  protected override onClick() {\n    if (this.keepOpen || this.keepOpenOnClick) return;\n\n    this.dispatchEvent(createDefaultCloseMenuEvent(\n        this, {kind: CLOSE_REASON.CLICK_SELECTION}));\n  }\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'has-focus-ring': this.hasFocusRing,\n    };\n  }\n\n  protected override onFocusRingVisibilityChanged(e: Event) {\n    const focusRing = e.target as MdFocusRing;\n    this.hasFocusRing = focusRing.visible;\n  }\n\n  protected override onKeydown(event: KeyboardEvent) {\n    if (this.keepOpen) return;\n    const keyCode = event.code;\n\n    if (!event.defaultPrevented && isClosableKey(keyCode)) {\n      event.preventDefault();\n      this.dispatchEvent(createDefaultCloseMenuEvent(\n          this, {kind: CLOSE_REASON.KEYDOWN, key: keyCode}));\n    }\n  }\n}\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAC,UAAU,EAAe,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAC,YAAY,EAAE,2BAA2B,EAAE,aAAa,EAAW,MAAM,cAAc,CAAC;AAIhG;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QACE;;WAEG;QAEH,eAAU,GAAG,IAAI,CAAC;QAElB;;WAEG;QACgD,aAAQ,GAAG,KAAK,CAAC;QAEjD,iBAAY,GAAG,KAAK,CAAC;QAExC;;WAEG;QACO,oBAAe,GAAG,KAAK,CAAC;QAEhB,SAAI,GAAiB,UAAU,CAAC;IA+BpD,CAAC;IA7BoB,OAAO;QACxB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe;YAAE,OAAO;QAElD,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAC1C,IAAI,EAAE,EAAC,IAAI,EAAE,YAAY,CAAC,eAAe,EAAC,CAAC,CAAC,CAAC;IACnD,CAAC;IAEkB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,gBAAgB,EAAE,IAAI,CAAC,YAAY;SACpC,CAAC;IACJ,CAAC;IAEkB,4BAA4B,CAAC,CAAQ;QACtD,MAAM,SAAS,GAAG,CAAC,CAAC,MAAqB,CAAC;QAC1C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;IACxC,CAAC;IAEkB,SAAS,CAAC,KAAoB;QAC/C,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,gBAAgB;YAAE,OAAO;QACpD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC;QAE3B,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,aAAa,CAAC,OAAO,CAAC,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,2BAA2B,CAC1C,IAAI,EAAE,EAAC,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAC,CAAC,CAAC,CAAC;SACxD;IACH,CAAC;CACF;AA7CC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAClD;AAKiC;IAAlD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAC,CAAC;4CAAkB;AAE3D;IAAR,KAAK,EAAE;gDAAgC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {property, state} from 'lit/decorators.js';\n\nimport type {MdFocusRing} from '../../../focus/md-focus-ring.js';\nimport {ListItemEl, ListItemRole} from '../../../list/internal/listitem/list-item.js';\nimport {CLOSE_REASON, createDefaultCloseMenuEvent, isClosableKey, MenuItem} from '../shared.js';\n\nexport {ListItemRole} from '../../../list/internal/listitem/list-item.js';\n\n/**\n * @fires close-menu {CloseMenuEvent}\n */\nexport class MenuItemEl extends ListItemEl implements MenuItem {\n  /**\n   * READONLY: self-identifies as a menu item and sets its identifying attribute\n   */\n  @property({type: Boolean, attribute: 'md-menu-item', reflect: true})\n  isMenuItem = true;\n\n  /**\n   * Keeps the menu open if clicked or keyboard selected.\n   */\n  @property({type: Boolean, attribute: 'keep-open'}) keepOpen = false;\n\n  @state() protected hasFocusRing = false;\n\n  /**\n   * Used for overriding e.g. sub-menu-item.\n   */\n  protected keepOpenOnClick = false;\n\n  override readonly type: ListItemRole = 'menuitem';\n\n  protected override onClick() {\n    if (this.keepOpen || this.keepOpenOnClick) return;\n\n    this.dispatchEvent(createDefaultCloseMenuEvent(\n        this, {kind: CLOSE_REASON.CLICK_SELECTION}));\n  }\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'has-focus-ring': this.hasFocusRing,\n    };\n  }\n\n  protected override onFocusRingVisibilityChanged(e: Event) {\n    const focusRing = e.target as MdFocusRing;\n    this.hasFocusRing = focusRing.visible;\n  }\n\n  protected override onKeydown(event: KeyboardEvent) {\n    if (this.keepOpen || event.defaultPrevented) return;\n    const keyCode = event.code;\n\n    if (!event.defaultPrevented && isClosableKey(keyCode)) {\n      event.preventDefault();\n      this.dispatchEvent(createDefaultCloseMenuEvent(\n          this, {kind: CLOSE_REASON.KEYDOWN, key: keyCode}));\n    }\n  }\n}\n"]}

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

@@ -3,6 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import { PropertyValues } from 'lit';
 import { Corner } from '../menu.js';
 import { MenuItemEl } from '../menuitem/menu-item.js';
 /**
@@ -40,6 +41,7 @@ export declare class SubMenuItem extends MenuItemEl {
      */
     selected: boolean;
     protected submenuHover: boolean;
+    private readonly rippleEl;
     private readonly menus;
     protected keepOpenOnClick: boolean;
     private previousOpenTimeout;
@@ -74,6 +76,7 @@ export declare class SubMenuItem extends MenuItemEl {
      * Renders the slot for the submenu.
      */
     private renderSubMenu;
+    firstUpdated(changed: PropertyValues<this>): void;
     private onCloseSubmenu;
     private onSubMenuKeydown;
     /**

package/menu/internal/submenuitem/sub-menu-item.js

@@ -5,13 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { List } from '../../../list/internal/list.js';
 import { MenuItemEl } from '../menuitem/menu-item.js';
 import { CLOSE_REASON, createActivateTypeaheadEvent, createCloseOnFocusoutEvent, createDeactivateItemsEvent, createDeactivateTypeaheadEvent, createStayOpenOnFocusoutEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY } from '../shared.js';
-function stopPropagation(event) {
-    event.stopPropagation();
-}
 /**
  * @fires deactivate-items Requests the parent menu to deselect other items when
  * a submenu opens
@@ -103,6 +100,8 @@ export class SubMenuItem extends MenuItemEl {
      */
     onKeydown(event) {
         const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code);
+        if (event.defaultPrevented)
+            return;
         if (event.code === SELECTION_KEY.SPACE) {
             // prevent space from scrolling. Only open the submenu.
             event.preventDefault();
@@ -137,12 +136,17 @@ export class SubMenuItem extends MenuItemEl {
         name="submenu"
         @pointerenter=${this.onSubmenuPointerEnter}
         @pointerleave=${this.onSubmenuPointerLeave}
-        @pointerdown=${stopPropagation}
-        @click=${stopPropagation}
         @keydown=${this.onSubMenuKeydown}
         @close-menu=${this.onCloseSubmenu}
     ></slot></span>`;
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        const { handleEvent } = this.rippleEl;
+        // TODO(b/298476971): remove once ripple has a better solution
+        this.rippleEl.handleEvent =
+            callIfEventNotBubbledThroughMenu(this, handleEvent.bind(this.rippleEl));
+    }
     onCloseSubmenu(event) {
         const { itemPath, reason } = event.detail;
         itemPath.push(this);
@@ -164,13 +168,15 @@ export class SubMenuItem extends MenuItemEl {
         this.selected = false;
     }
     async onSubMenuKeydown(event) {
-        // Stop propagation so that we don't accidentally close every parent menu.
-        // Additionally, we want to isolate things like the typeahead keydowns
-        // from bubbling up to the parent menu and confounding things.
-        event.stopPropagation();
+        if (event.defaultPrevented)
+            return;
         const shouldClose = this.isSubmenuCloseKey(event.code);
         if (!shouldClose)
             return;
+        // Communicate that it's handled so that we don't accidentally close every
+        // parent menu. Additionally, we want to isolate things like the typeahead
+        // keydowns from bubbling up to the parent menu and confounding things.
+        event.preventDefault();
         this.close(() => {
             List.deactivateActiveItem(this.submenuEl.items);
             this.listItemRoot?.focus();
@@ -184,7 +190,7 @@ export class SubMenuItem extends MenuItemEl {
      */
     show(onOpened = () => { }) {
         const menu = this.submenuEl;
-        if (!menu)
+        if (!menu || menu.open)
             return;
         menu.quick = true;
         // Submenus are in overflow when not fixed. Can remove once we have native
@@ -192,7 +198,7 @@ export class SubMenuItem extends MenuItemEl {
         menu.hasOverflow = true;
         menu.anchorCorner = this.anchorCorner;
         menu.menuCorner = this.menuCorner;
-        menu.anchor = this;
+        menu.anchorElement = this;
         // We manually set focus with `active` on keyboard navigation. And we
         // want to focus the root on hover, so the user can pick up navigation with
         // keyboard after hover.
@@ -302,7 +308,31 @@ __decorate([
 __decorate([
     state()
 ], SubMenuItem.prototype, "submenuHover", void 0);
+__decorate([
+    query('md-ripple')
+], SubMenuItem.prototype, "rippleEl", void 0);
 __decorate([
     queryAssignedElements({ slot: 'submenu', flatten: true })
 ], SubMenuItem.prototype, "menus", void 0);
+/**
+ * Calls the given callback if the event has not bubbled through an md-menu.
+ */
+function callIfEventNotBubbledThroughMenu(menuItem, callback) {
+    return async (event) => {
+        const path = event.composedPath();
+        for (const element of path) {
+            const isMenu = !!element?.hasAttribute?.('md-menu');
+            // The path has a submenu, do not invoke callback;
+            if (isMenu)
+                return;
+            // We have reached the target submenu. Any other menus in path are
+            // ancestors.
+            if (element === menuItem) {
+                break;
+            }
+        }
+        // invoke the callback because we have not run into a submenu.
+        await callback(event);
+    };
+}
 //# sourceMappingURL=sub-menu-item.js.map

package/menu/internal/submenuitem/sub-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.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 {html} from 'lit';\nimport {property, queryAssignedElements, state} from 'lit/decorators.js';\n\nimport {List} from '../../../list/internal/list.js';\nimport {Corner, Menu} from '../menu.js';\nimport {MenuItemEl} from '../menuitem/menu-item.js';\nimport {CLOSE_REASON, CloseMenuEvent, createActivateTypeaheadEvent, createCloseOnFocusoutEvent, createDeactivateItemsEvent, createDeactivateTypeaheadEvent, createStayOpenOnFocusoutEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY} from '../shared.js';\n\nfunction stopPropagation(event: Event) {\n  event.stopPropagation();\n}\n\n/**\n * @fires deactivate-items Requests the parent menu to deselect other items when\n * a submenu opens\n * @fires deactivate-typeahead Requests the parent menu to deactivate the\n * typeahead functionality when a submenu opens\n * @fires activate-typeahead Requests the parent menu to activate the typeahead\n * functionality when a submenu closes\n * @fires stay-open-on-focusout Requests the parent menu to stay open when\n * focusout event is fired or has a `null` `relatedTarget` when submenu is\n * opened.\n * @fires close-on-focusout Requests the parent menu to close when focusout\n * event is fired or has a `null` `relatedTarget` When submenu is closed.\n */\nexport class SubMenuItem extends MenuItemEl {\n  /**\n   * The anchorCorner to set on the submenu.\n   */\n  @property({attribute: 'anchor-corner'}) anchorCorner: Corner = 'START_END';\n  /**\n   * The menuCorner to set on the submenu.\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = 'START_START';\n  /**\n   * The delay between pointerenter and submenu opening.\n   */\n  @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;\n  /**\n   * The delay between ponterleave and the submenu closing.\n   */\n  @property({type: Number, attribute: 'hover-close-delay'})\n  hoverCloseDelay = 400;\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @state() protected submenuHover = false;\n\n  @queryAssignedElements({slot: 'submenu', flatten: true})\n  private readonly menus!: Menu[];\n\n  protected override keepOpenOnClick = true;\n  private previousOpenTimeout = 0;\n  private previousCloseTimeout = 0;\n\n  private get submenuEl(): Menu|undefined {\n    return this.menus[0];\n  }\n\n  /**\n   * Starts the default 400ms countdown to open the submenu.\n   */\n  protected override onPointerenter = () => {\n    clearTimeout(this.previousOpenTimeout);\n    clearTimeout(this.previousCloseTimeout);\n    if (this.submenuEl?.open) return;\n\n    // Open synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverOpenDelay) {\n      this.show();\n    } else {\n      this.previousOpenTimeout = setTimeout(() => {\n        this.show();\n      }, this.hoverOpenDelay);\n    }\n  };\n\n  /**\n   * Starts the default 400ms countdown to close the submenu.\n   */\n  protected override onPointerleave = () => {\n    clearTimeout(this.previousCloseTimeout);\n    clearTimeout(this.previousOpenTimeout);\n\n    // Close synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverCloseDelay) {\n      this.close();\n    } else {\n      this.previousCloseTimeout = setTimeout(() => {\n        this.close();\n      }, this.hoverCloseDelay);\n    }\n  };\n\n  protected override onClick() {\n    this.show();\n  }\n\n  protected override getRenderClasses() {\n    return {...super.getRenderClasses(), 'submenu-hover': this.submenuHover};\n  }\n\n  /**\n   * On item keydown handles opening the submenu.\n   */\n  protected override onKeydown(event: KeyboardEvent) {\n    const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code);\n\n    if (event.code === SELECTION_KEY.SPACE) {\n      // prevent space from scrolling. Only open the submenu.\n      event.preventDefault();\n    }\n\n    if (!shouldOpenSubmenu) {\n      super.onKeydown(event);\n      return;\n    }\n\n    const submenu = this.submenuEl;\n    if (!submenu) return;\n\n    const submenuItems = submenu.items;\n    const firstActivatableItem = List.getFirstActivatableItem(submenuItems);\n\n    if (firstActivatableItem) {\n      this.show(() => {\n        firstActivatableItem.active = true;\n      });\n\n      return;\n    }\n  }\n\n  /**\n   * Render the submenu at the end\n   */\n  protected override renderEnd() {\n    return html`${super.renderEnd()}${this.renderSubMenu()}`;\n  }\n\n  /**\n   * Renders the slot for the submenu.\n   */\n  private renderSubMenu() {\n    return html`<span class=\"submenu\"><slot\n        name=\"submenu\"\n        @pointerenter=${this.onSubmenuPointerEnter}\n        @pointerleave=${this.onSubmenuPointerLeave}\n        @pointerdown=${stopPropagation}\n        @click=${stopPropagation}\n        @keydown=${this.onSubMenuKeydown}\n        @close-menu=${this.onCloseSubmenu}\n    ></slot></span>`;\n  }\n\n  private onCloseSubmenu(event: CloseMenuEvent) {\n    const {itemPath, reason} = event.detail;\n    itemPath.push(this);\n    // Restore focusout behavior\n    this.dispatchEvent(createCloseOnFocusoutEvent());\n    this.dispatchEvent(createActivateTypeaheadEvent());\n    // Escape should only close one menu not all of the menus unlike space or\n    // click selection which should close all menus.\n    if (reason.kind === CLOSE_REASON.KEYDOWN &&\n        reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {\n      event.stopPropagation();\n      this.active = true;\n      this.selected = false;\n      // It might already be active so manually focus\n      this.listItemRoot?.focus();\n      return;\n    }\n\n    this.active = false;\n    this.selected = false;\n  }\n\n  private async onSubMenuKeydown(event: KeyboardEvent) {\n    // Stop propagation so that we don't accidentally close every parent menu.\n    // Additionally, we want to isolate things like the typeahead keydowns\n    // from bubbling up to the parent menu and confounding things.\n    event.stopPropagation();\n    const shouldClose = this.isSubmenuCloseKey(event.code);\n\n    if (!shouldClose) return;\n\n    this.close(() => {\n      List.deactivateActiveItem(this.submenuEl!.items);\n      this.listItemRoot?.focus();\n      this.active = true;\n    });\n  }\n\n  /**\n   * Shows the submenu.\n   *\n   * @param onOpened A function to call after the menu is opened.\n   */\n  show(onOpened = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu) return;\n\n    menu.quick = true;\n    // Submenus are in overflow when not fixed. Can remove once we have native\n    // popup support\n    menu.hasOverflow = true;\n    menu.anchorCorner = this.anchorCorner;\n    menu.menuCorner = this.menuCorner;\n    menu.anchor = this;\n    // We manually set focus with `active` on keyboard navigation. And we\n    // want to focus the root on hover, so the user can pick up navigation with\n    // keyboard after hover.\n    menu.defaultFocus = 'LIST_ROOT';\n    menu.skipRestoreFocus = true;\n    menu.stayOpenOnOutsideClick = true;\n    menu.stayOpenOnFocusout = true;\n\n    // Menu could already be opened because of mouse interaction\n    const menuAlreadyOpen = menu.open;\n    // We want the parent to stay open in the case such that a middle submenu\n    // has a submenuitem hovered which opens a third submenut. Then if you hover\n    // on yet another middle menu-item (not submenuitem) then focusout Event's\n    // relatedTarget will be `null` thus, causing all the menus to close\n    this.dispatchEvent(createStayOpenOnFocusoutEvent());\n    menu.show();\n\n    // Deactivate other items. This can be the case if the user has tabbed\n    // around the menu and then mouses over an md-sub-menu.\n    this.dispatchEvent(createDeactivateItemsEvent());\n    this.dispatchEvent(createDeactivateTypeaheadEvent());\n    this.selected = true;\n\n    // This is the case of mouse hovering when already opened via keyboard or\n    // vice versa\n    if (menuAlreadyOpen) {\n      onOpened();\n    } else {\n      menu.addEventListener('opened', onOpened, {once: true});\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   *\n   * @param onClosed A function to call after the menu is closed.\n   */\n  close(onClosed = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu || !menu.open) return;\n\n    this.dispatchEvent(createActivateTypeaheadEvent());\n    menu.quick = true;\n    menu.close();\n    // Restore focusout behavior.\n    this.dispatchEvent(createCloseOnFocusoutEvent());\n    this.active = false;\n    this.selected = false;\n    menu.addEventListener('closed', onClosed, {once: true});\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should open\n   * the submenu. This is RTL-aware. By default, left, right, space, or enter.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should open the submenu.\n   */\n  private isSubmenuOpenKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT;\n    switch (code) {\n      case arrowEnterKey:\n      case SELECTION_KEY.SPACE:\n      case SELECTION_KEY.ENTER:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should close\n   * the submenu. This is RTL-aware. By default right, left, or escape.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should close the submenu.\n   */\n  private isSubmenuCloseKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT;\n    switch (code) {\n      case arrowEnterKey:\n      case KEYDOWN_CLOSE_KEYS.ESCAPE:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  private onSubmenuPointerEnter() {\n    this.submenuHover = true;\n  }\n\n  private onSubmenuPointerLeave() {\n    this.submenuHover = false;\n  }\n}\n"]}
+{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.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 {html, PropertyValues} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\n\nimport {List} from '../../../list/internal/list.js';\nimport {MdRipple} from '../../../ripple/ripple.js';\nimport {Corner, Menu} from '../menu.js';\nimport {MenuItemEl} from '../menuitem/menu-item.js';\nimport {CLOSE_REASON, CloseMenuEvent, createActivateTypeaheadEvent, createCloseOnFocusoutEvent, createDeactivateItemsEvent, createDeactivateTypeaheadEvent, createStayOpenOnFocusoutEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY} from '../shared.js';\n\n/**\n * @fires deactivate-items Requests the parent menu to deselect other items when\n * a submenu opens\n * @fires deactivate-typeahead Requests the parent menu to deactivate the\n * typeahead functionality when a submenu opens\n * @fires activate-typeahead Requests the parent menu to activate the typeahead\n * functionality when a submenu closes\n * @fires stay-open-on-focusout Requests the parent menu to stay open when\n * focusout event is fired or has a `null` `relatedTarget` when submenu is\n * opened.\n * @fires close-on-focusout Requests the parent menu to close when focusout\n * event is fired or has a `null` `relatedTarget` When submenu is closed.\n */\nexport class SubMenuItem extends MenuItemEl {\n  /**\n   * The anchorCorner to set on the submenu.\n   */\n  @property({attribute: 'anchor-corner'}) anchorCorner: Corner = 'START_END';\n  /**\n   * The menuCorner to set on the submenu.\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = 'START_START';\n  /**\n   * The delay between pointerenter and submenu opening.\n   */\n  @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;\n  /**\n   * The delay between ponterleave and the submenu closing.\n   */\n  @property({type: Number, attribute: 'hover-close-delay'})\n  hoverCloseDelay = 400;\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @state() protected submenuHover = false;\n\n  @query('md-ripple') private readonly rippleEl!: MdRipple;\n\n  @queryAssignedElements({slot: 'submenu', flatten: true})\n  private readonly menus!: Menu[];\n\n  protected override keepOpenOnClick = true;\n  private previousOpenTimeout = 0;\n  private previousCloseTimeout = 0;\n\n  private get submenuEl(): Menu|undefined {\n    return this.menus[0];\n  }\n\n  /**\n   * Starts the default 400ms countdown to open the submenu.\n   */\n  protected override onPointerenter = () => {\n    clearTimeout(this.previousOpenTimeout);\n    clearTimeout(this.previousCloseTimeout);\n    if (this.submenuEl?.open) return;\n\n    // Open synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverOpenDelay) {\n      this.show();\n    } else {\n      this.previousOpenTimeout = setTimeout(() => {\n        this.show();\n      }, this.hoverOpenDelay);\n    }\n  };\n\n  /**\n   * Starts the default 400ms countdown to close the submenu.\n   */\n  protected override onPointerleave = () => {\n    clearTimeout(this.previousCloseTimeout);\n    clearTimeout(this.previousOpenTimeout);\n\n    // Close synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverCloseDelay) {\n      this.close();\n    } else {\n      this.previousCloseTimeout = setTimeout(() => {\n        this.close();\n      }, this.hoverCloseDelay);\n    }\n  };\n\n  protected override onClick() {\n    this.show();\n  }\n\n  protected override getRenderClasses() {\n    return {...super.getRenderClasses(), 'submenu-hover': this.submenuHover};\n  }\n\n  /**\n   * On item keydown handles opening the submenu.\n   */\n  protected override onKeydown(event: KeyboardEvent) {\n    const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code);\n\n    if (event.defaultPrevented) return;\n\n    if (event.code === SELECTION_KEY.SPACE) {\n      // prevent space from scrolling. Only open the submenu.\n      event.preventDefault();\n    }\n\n    if (!shouldOpenSubmenu) {\n      super.onKeydown(event);\n      return;\n    }\n\n    const submenu = this.submenuEl;\n    if (!submenu) return;\n\n    const submenuItems = submenu.items;\n    const firstActivatableItem = List.getFirstActivatableItem(submenuItems);\n\n    if (firstActivatableItem) {\n      this.show(() => {\n        firstActivatableItem.active = true;\n      });\n\n      return;\n    }\n  }\n\n  /**\n   * Render the submenu at the end\n   */\n  protected override renderEnd() {\n    return html`${super.renderEnd()}${this.renderSubMenu()}`;\n  }\n\n  /**\n   * Renders the slot for the submenu.\n   */\n  private renderSubMenu() {\n    return html`<span class=\"submenu\"><slot\n        name=\"submenu\"\n        @pointerenter=${this.onSubmenuPointerEnter}\n        @pointerleave=${this.onSubmenuPointerLeave}\n        @keydown=${this.onSubMenuKeydown}\n        @close-menu=${this.onCloseSubmenu}\n    ></slot></span>`;\n  }\n\n  override firstUpdated(changed: PropertyValues<this>) {\n    super.firstUpdated(changed);\n\n    const {handleEvent} = this.rippleEl;\n\n    // TODO(b/298476971): remove once ripple has a better solution\n    this.rippleEl.handleEvent =\n        callIfEventNotBubbledThroughMenu(this, handleEvent.bind(this.rippleEl));\n  }\n\n  private onCloseSubmenu(event: CloseMenuEvent) {\n    const {itemPath, reason} = event.detail;\n    itemPath.push(this);\n    // Restore focusout behavior\n    this.dispatchEvent(createCloseOnFocusoutEvent());\n    this.dispatchEvent(createActivateTypeaheadEvent());\n    // Escape should only close one menu not all of the menus unlike space or\n    // click selection which should close all menus.\n    if (reason.kind === CLOSE_REASON.KEYDOWN &&\n        reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {\n      event.stopPropagation();\n      this.active = true;\n      this.selected = false;\n      // It might already be active so manually focus\n      this.listItemRoot?.focus();\n      return;\n    }\n\n    this.active = false;\n    this.selected = false;\n  }\n\n  private async onSubMenuKeydown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n    const shouldClose = this.isSubmenuCloseKey(event.code);\n\n    if (!shouldClose) return;\n\n    // Communicate that it's handled so that we don't accidentally close every\n    // parent menu. Additionally, we want to isolate things like the typeahead\n    // keydowns from bubbling up to the parent menu and confounding things.\n    event.preventDefault();\n\n    this.close(() => {\n      List.deactivateActiveItem(this.submenuEl!.items);\n      this.listItemRoot?.focus();\n      this.active = true;\n    });\n  }\n\n  /**\n   * Shows the submenu.\n   *\n   * @param onOpened A function to call after the menu is opened.\n   */\n  show(onOpened = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu || menu.open) return;\n\n    menu.quick = true;\n    // Submenus are in overflow when not fixed. Can remove once we have native\n    // popup support\n    menu.hasOverflow = true;\n    menu.anchorCorner = this.anchorCorner;\n    menu.menuCorner = this.menuCorner;\n    menu.anchorElement = this;\n    // We manually set focus with `active` on keyboard navigation. And we\n    // want to focus the root on hover, so the user can pick up navigation with\n    // keyboard after hover.\n    menu.defaultFocus = 'LIST_ROOT';\n    menu.skipRestoreFocus = true;\n    menu.stayOpenOnOutsideClick = true;\n    menu.stayOpenOnFocusout = true;\n\n    // Menu could already be opened because of mouse interaction\n    const menuAlreadyOpen = menu.open;\n    // We want the parent to stay open in the case such that a middle submenu\n    // has a submenuitem hovered which opens a third submenut. Then if you hover\n    // on yet another middle menu-item (not submenuitem) then focusout Event's\n    // relatedTarget will be `null` thus, causing all the menus to close\n    this.dispatchEvent(createStayOpenOnFocusoutEvent());\n    menu.show();\n\n    // Deactivate other items. This can be the case if the user has tabbed\n    // around the menu and then mouses over an md-sub-menu.\n    this.dispatchEvent(createDeactivateItemsEvent());\n    this.dispatchEvent(createDeactivateTypeaheadEvent());\n    this.selected = true;\n\n    // This is the case of mouse hovering when already opened via keyboard or\n    // vice versa\n    if (menuAlreadyOpen) {\n      onOpened();\n    } else {\n      menu.addEventListener('opened', onOpened, {once: true});\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   *\n   * @param onClosed A function to call after the menu is closed.\n   */\n  close(onClosed = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu || !menu.open) return;\n\n    this.dispatchEvent(createActivateTypeaheadEvent());\n    menu.quick = true;\n    menu.close();\n    // Restore focusout behavior.\n    this.dispatchEvent(createCloseOnFocusoutEvent());\n    this.active = false;\n    this.selected = false;\n    menu.addEventListener('closed', onClosed, {once: true});\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should open\n   * the submenu. This is RTL-aware. By default, left, right, space, or enter.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should open the submenu.\n   */\n  private isSubmenuOpenKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT;\n    switch (code) {\n      case arrowEnterKey:\n      case SELECTION_KEY.SPACE:\n      case SELECTION_KEY.ENTER:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should close\n   * the submenu. This is RTL-aware. By default right, left, or escape.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should close the submenu.\n   */\n  private isSubmenuCloseKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT;\n    switch (code) {\n      case arrowEnterKey:\n      case KEYDOWN_CLOSE_KEYS.ESCAPE:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  private onSubmenuPointerEnter() {\n    this.submenuHover = true;\n  }\n\n  private onSubmenuPointerLeave() {\n    this.submenuHover = false;\n  }\n}\n\n/**\n * Calls the given callback if the event has not bubbled through an md-menu.\n */\nfunction callIfEventNotBubbledThroughMenu(\n    menuItem: HTMLElement, callback: (event: Event) => Promise<void>) {\n  return async (event: Event) => {\n    const path = event.composedPath();\n\n    for (const element of path) {\n      const isMenu =\n          !!(element as Element | HTMLElement)?.hasAttribute?.('md-menu');\n\n      // The path has a submenu, do not invoke callback;\n      if (isMenu) return;\n\n      // We have reached the target submenu. Any other menus in path are\n      // ancestors.\n      if (element === menuItem) {\n        break;\n      }\n    }\n\n    // invoke the callback because we have not run into a submenu.\n    await callback(event);\n  };\n}"]}

package/menu/internal/typeaheadController.js

@@ -165,6 +165,8 @@ export class TypeaheadController {
      * activates Olive
      */
     typeahead(event) {
+        if (event.defaultPrevented)
+            return;
         clearTimeout(this.cancelTypeaheadTimeout);
         // Stop typingahead if one of the navigation or selection keys (except for
         // Space) are pressed
@@ -178,7 +180,6 @@ export class TypeaheadController {
         }
         // If Space is pressed, prevent it from selecting and closing the menu
         if (event.code === 'Space') {
-            event.stopPropagation();
             event.preventDefault();
         }
         // Start up a new keystroke buffer timeout

package/menu/internal/typeaheadController.js.map

@@ -1 +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 event The native browser `KeyboardEvent` from the `keydown` event.\n   */\n  readonly onKeydown = (event: KeyboardEvent) => {\n    if (this.isTypingAhead) {\n      this.typeahead(event);\n    } else {\n      this.beginTypeahead(event);\n    }\n  };\n\n  /**\n   * Sets up typingahead\n   */\n  private beginTypeahead(event: 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 (event.code === 'Space' || event.code === 'Enter' ||\n        event.code.startsWith('Arrow') || event.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(event);\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(event: KeyboardEvent) {\n    clearTimeout(this.cancelTypeaheadTimeout);\n    // Stop typingahead if one of the navigation or selection keys (except for\n    // Space) are pressed\n    if (event.code === 'Enter' || event.code.startsWith('Arrow') ||\n        event.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 (event.code === 'Space') {\n      event.stopPropagation();\n      event.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 += event.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"]}
+{"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 event The native browser `KeyboardEvent` from the `keydown` event.\n   */\n  readonly onKeydown = (event: KeyboardEvent) => {\n    if (this.isTypingAhead) {\n      this.typeahead(event);\n    } else {\n      this.beginTypeahead(event);\n    }\n  };\n\n  /**\n   * Sets up typingahead\n   */\n  private beginTypeahead(event: 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 (event.code === 'Space' || event.code === 'Enter' ||\n        event.code.startsWith('Arrow') || event.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(event);\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(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n    clearTimeout(this.cancelTypeaheadTimeout);\n    // Stop typingahead if one of the navigation or selection keys (except for\n    // Space) are pressed\n    if (event.code === 'Enter' || event.code.startsWith('Arrow') ||\n        event.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 (event.code === 'Space') {\n      event.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 += event.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.d.ts

@@ -29,18 +29,25 @@ declare global {
  * @example
  * ```html
  * <div style="position:relative;">
+ *   <!--
+ *     The menu ref in this example can be achieved by any method such as the
+ *     preferred `@query` decorator in Lit or a ref in React.
+ *   -->
  *   <button
- *       class="anchor"
- *       ${ref(anchorRef)}
+ *       id="anchor"
  *       @click=${() => this.menuRef.value.show()}>
  *     Click to open menu
  *   </button>
  *   <!--
  *     `has-overflow` is required when using a submenu which overflows the
- *     menu's contents
+ *     menu's contents.
+ *
+ *     Additionally, `anchor` ingests an idref which do not pass through shadow
+ *     roots. You can also set `.anchorElement` to an element reference if
+ *     necessary.
  *   -->
- *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
- * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <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

package/menu/menu.js

@@ -25,18 +25,25 @@ import { styles } from './internal/menu-styles.css.js';
  * @example
  * ```html
  * <div style="position:relative;">
+ *   <!--
+ *     The menu ref in this example can be achieved by any method such as the
+ *     preferred `@query` decorator in Lit or a ref in React.
+ *   -->
  *   <button
- *       class="anchor"
- *       ${ref(anchorRef)}
+ *       id="anchor"
  *       @click=${() => this.menuRef.value.show()}>
  *     Click to open menu
  *   </button>
  *   <!--
  *     `has-overflow` is required when using a submenu which overflows the
- *     menu's contents
+ *     menu's contents.
+ *
+ *     Additionally, `anchor` ingests an idref which do not pass through shadow
+ *     roots. You can also set `.anchorElement` to an element reference if
+ *     necessary.
  *   -->
- *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
- * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <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

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,MAAM,IAAI,YAAY,EAAC,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAYrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 './internal/forced-colors-styles.css.js';\nimport {Menu} from './internal/menu.js';\nimport {styles} from './internal/menu-styles.css.js';\n\nexport {ListItem} from '../list/internal/listitem/list-item.js';\nexport {Corner, DefaultFocusState} from './internal/menu.js';\nexport {CloseMenuEvent, MenuItem} from './internal/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"]}
+{"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,wCAAwC,CAAC;AAC9E,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAYrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;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 './internal/forced-colors-styles.css.js';\nimport {Menu} from './internal/menu.js';\nimport {styles} from './internal/menu-styles.css.js';\n\nexport {ListItem} from '../list/internal/listitem/list-item.js';\nexport {Corner, DefaultFocusState} from './internal/menu.js';\nexport {CloseMenuEvent, MenuItem} from './internal/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 *   <!--\n *     The menu ref in this example can be achieved by any method such as the\n *     preferred `@query` decorator in Lit or a ref in React.\n *   -->\n *   <button\n *       id=\"anchor\"\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 *     Additionally, `anchor` ingests an idref which do not pass through shadow\n *     roots. You can also set `.anchorElement` to an element reference if\n *     necessary.\n *   -->\n *   <md-menu anchor=\"anchor\" has-overflow ${ref(menuRef)}>\n *     <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

@@ -31,8 +31,7 @@ declare global {
  * ```html
  * <div style="position:relative;">
  *   <button
- *       class="anchor"
- *       ${ref(anchorRef)}
+ *       id="anchor"
  *       @click=${() => this.menuRef.value.show()}>
  *     Click to open menu
  *   </button>
@@ -40,8 +39,8 @@ declare global {
  *     `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-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <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

package/menu/sub-menu-item.js

@@ -30,8 +30,7 @@ import { SubMenuItem } from './internal/submenuitem/sub-menu-item.js';
  * ```html
  * <div style="position:relative;">
  *   <button
- *       class="anchor"
- *       ${ref(anchorRef)}
+ *       id="anchor"
  *       @click=${() => this.menuRef.value.show()}>
  *     Click to open menu
  *   </button>
@@ -39,8 +38,8 @@ import { SubMenuItem } from './internal/submenuitem/sub-menu-item.js';
  *     `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-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <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

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

@@ -1 +1 @@
-{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,uDAAuD,CAAC;AAC3G,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mDAAmD,CAAC;AAE3F,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,iDAAiD,CAAC;AAC7F,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAC,WAAW,EAAC,MAAM,yCAAyC,CAAC;AAWpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;;AAC5B,oBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAGzB;SAHY,aAAa","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/internal/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/internal/listitem/list-item-styles.css.js';\n\nimport {styles as forcedColorsStyles} from './internal/menuitem/forced-colors-styles.css.js';\nimport {styles} from './internal/menuitem/menu-item-styles.css.js';\nimport {SubMenuItem} from './internal/submenuitem/sub-menu-item.js';\n\nexport {ListItem} from '../list/internal/listitem/list-item.js';\nexport {CloseMenuEvent, MenuItem} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-sub-menu-item': MdSubMenuItem;\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 menu item will open a sub-menu that is slotted in the `submenu` slot.\n * Additionally, the containing menu must either have `has-overflow` or `fixed`\n * set to `true` in order to display the containing menu properly.\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>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-sub-menu-item')\nexport class MdSubMenuItem extends SubMenuItem {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}
+{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,uDAAuD,CAAC;AAC3G,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mDAAmD,CAAC;AAE3F,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,iDAAiD,CAAC;AAC7F,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAC,WAAW,EAAC,MAAM,yCAAyC,CAAC;AAWpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;;AAC5B,oBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAGzB;SAHY,aAAa","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/internal/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/internal/listitem/list-item-styles.css.js';\n\nimport {styles as forcedColorsStyles} from './internal/menuitem/forced-colors-styles.css.js';\nimport {styles} from './internal/menuitem/menu-item-styles.css.js';\nimport {SubMenuItem} from './internal/submenuitem/sub-menu-item.js';\n\nexport {ListItem} from '../list/internal/listitem/list-item.js';\nexport {CloseMenuEvent, MenuItem} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-sub-menu-item': MdSubMenuItem;\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 menu item will open a sub-menu that is slotted in the `submenu` slot.\n * Additionally, the containing menu must either have `has-overflow` or `fixed`\n * set to `true` in order to display the containing menu properly.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       id=\"anchor\"\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 anchor=\"anchor\" has-overflow ${ref(menuRef)}>\n *     <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>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-sub-menu-item')\nexport class MdSubMenuItem extends SubMenuItem {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "@material/web",
-  "version": "1.0.0-pre.15",
+  "version": "1.0.0-pre.17",
   "publishConfig": {
     "access": "public"
   },
   "description": "Material web components",
+  "keywords": [
+    "material",
+    "material design",
+    "design system",
+    "components",
+    "web components",
+    "lit"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/material-components/material-web.git"
@@ -40,7 +48,7 @@
     "catalog"
   ],
   "dependencies": {
-    "lit": "^2.7.4",
+    "lit": "^2.7.4 || ^3.0.0",
     "tslib": "^2.4.0"
   },
   "devDependencies": {

package/progress/harness.js

@@ -10,9 +10,7 @@ import { Harness } from '../testing/harness.js';
 export class LinearProgressHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        // Test access to protected property
-        // tslint:disable-next-line:no-dict-access-on-struct-type
-        return this.element['rootEl'];
+        return this.element.querySelector('.progress');
     }
 }
 /**
@@ -21,7 +19,7 @@ export class LinearProgressHarness extends Harness {
 export class CircularProgressHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.querySelector('.circularProgresss');
+        return this.element.querySelector('.progress');
     }
 }
 //# sourceMappingURL=harness.js.map

package/progress/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAK9C;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,OAAuB;IACvD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,oCAAoC;QACpC,yDAAyD;QACzD,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,OAAyB;IAC3D,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,oBAAoB,CAAE,CAAC;IACxE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {CircularProgress} from './internal/circular-progress.js';\nimport {LinearProgress} from './internal/linear-progress.js';\n\n/**\n * Test harness for linear-progress.\n */\nexport class LinearProgressHarness extends Harness<LinearProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    // Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return this.element['rootEl'];\n  }\n}\n\n/**\n * Test harness for circular-progress.\n */\nexport class CircularProgressHarness extends Harness<CircularProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('.circularProgresss')!;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAK9C;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,OAAuB;IACvD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,WAAW,CAAE,CAAC;IAC/D,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,OAAyB;IAC3D,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,WAAW,CAAE,CAAC;IAC/D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {CircularProgress} from './internal/circular-progress.js';\nimport {LinearProgress} from './internal/linear-progress.js';\n\n/**\n * Test harness for linear-progress.\n */\nexport class LinearProgressHarness extends Harness<LinearProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('.progress')!;\n  }\n}\n\n/**\n * Test harness for circular-progress.\n */\nexport class CircularProgressHarness extends Harness<CircularProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('.progress')!;\n  }\n}\n"]}

package/progress/internal/_circular-progress.scss

@@ -11,7 +11,7 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $supported-tokens: tokens.$md-comp-circular-progress-indicator-supported-tokens;
+  $supported-tokens: tokens.$md-comp-circular-progress-supported-tokens;
   @each $token, $value in $tokens {
     @if list.index($supported-tokens, $token) == null {
       @error 'Token `#{$token}` is not a supported token.';
@@ -24,8 +24,10 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-circular-progress-indicator-values();
+  $tokens: tokens.md-comp-circular-progress-values();
 
+  // If changing this value, make sure to change $size-without-padding in the
+  // circular-progress tokens.
   $container-padding: 4px;
 
   // note, these value come from the m2 version but match current gm3 values.
@@ -80,7 +82,7 @@
   .circle,
   svg,
   .track,
-  .progress {
+  .active-track {
     position: absolute;
     inset: 0;
   }
@@ -100,7 +102,7 @@
     fill: transparent;
   }
 
-  .progress {
+  .active-track {
     // note, these value come from the m2 version but match current gm3 values.
     transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
     stroke: var(--_active-indicator-color);
@@ -162,8 +164,8 @@
     animation-delay: calc(-0.5 * $arc-duration), 0ms;
   }
 
-  @media screen and (forced-colors: active) {
-    .progress {
+  @media (forced-colors: active) {
+    .active-track {
       stroke: CanvasText;
     }