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

package/menu/internal/menuitem/forced-colors-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){.list-item{position:relative}:host([selected]) .list-item:not(:has(.focus-ring[visible]))::before{content:\"\";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){.list-item{position:relative}:host([selected]) .list-item:not(.has-focus-ring)::before{content:\"\";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

package/menu/internal/menuitem/forced-colors-styles.scss

@@ -10,7 +10,7 @@
 
   // Show double border only when selected, and the current list item does not
   // have a focus ring on it.
-  :host([selected]) .list-item:not(:has(.focus-ring[visible]))::before {
+  :host([selected]) .list-item:not(.has-focus-ring)::before {
     content: '';
     position: absolute;
     inset: 0;

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)}.list-item:has(.submenu:hover){--md-ripple-hover-opacity: 0}/*# sourceMappingURL=menu-item-styles.css.map */
+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 */
 `;
 //# 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)}.list-item:has(.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{--_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 "]}

package/menu/internal/menuitem/menu-item.d.ts

@@ -18,11 +18,20 @@ export declare class MenuItemEl extends ListItemEl implements MenuItem {
      * Keeps the menu open if clicked or keyboard selected.
      */
     keepOpen: boolean;
+    protected hasFocusRing: boolean;
     /**
      * Used for overriding e.g. sub-menu-item.
      */
     protected keepOpenOnClick: boolean;
     readonly type: ListItemRole;
     protected onClick(): void;
+    protected getRenderClasses(): {
+        'has-focus-ring': boolean;
+        'with-one-line': boolean;
+        'with-two-line': boolean;
+        'with-three-line': boolean;
+        disabled: boolean;
+    };
+    protected onFocusRingVisibilityChanged(e: Event): void;
     protected onKeydown(event: KeyboardEvent): void;
 }

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

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { ListItemEl } from '../../../list/internal/listitem/list-item.js';
-import { CLOSE_REASON, DefaultCloseMenuEvent, isClosableKey } from '../shared.js';
+import { CLOSE_REASON, createDefaultCloseMenuEvent, isClosableKey } from '../shared.js';
 /**
  * @fires close-menu {CloseMenuEvent}
  */
@@ -21,6 +21,7 @@ export class MenuItemEl extends ListItemEl {
          * Keeps the menu open if clicked or keyboard selected.
          */
         this.keepOpen = false;
+        this.hasFocusRing = false;
         /**
          * Used for overriding e.g. sub-menu-item.
          */
@@ -30,7 +31,17 @@ export class MenuItemEl extends ListItemEl {
     onClick() {
         if (this.keepOpen || this.keepOpenOnClick)
             return;
-        this.dispatchEvent(new DefaultCloseMenuEvent(this, { kind: CLOSE_REASON.CLICK_SELECTION }));
+        this.dispatchEvent(createDefaultCloseMenuEvent(this, { kind: CLOSE_REASON.CLICK_SELECTION }));
+    }
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'has-focus-ring': this.hasFocusRing,
+        };
+    }
+    onFocusRingVisibilityChanged(e) {
+        const focusRing = e.target;
+        this.hasFocusRing = focusRing.visible;
     }
     onKeydown(event) {
         if (this.keepOpen)
@@ -38,7 +49,7 @@ export class MenuItemEl extends ListItemEl {
         const keyCode = event.code;
         if (!event.defaultPrevented && isClosableKey(keyCode)) {
             event.preventDefault();
-            this.dispatchEvent(new DefaultCloseMenuEvent(this, { kind: CLOSE_REASON.KEYDOWN, key: keyCode }));
+            this.dispatchEvent(createDefaultCloseMenuEvent(this, { kind: CLOSE_REASON.KEYDOWN, key: keyCode }));
         }
     }
 }
@@ -48,4 +59,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'keep-open' })
 ], MenuItemEl.prototype, "keepOpen", void 0);
+__decorate([
+    state()
+], MenuItemEl.prototype, "hasFocusRing", void 0);
 //# sourceMappingURL=menu-item.js.map

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,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,UAAU,EAAe,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAE,aAAa,EAAW,MAAM,cAAc,CAAC;AAI1F;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QACE;;WAEG;QAEH,eAAU,GAAG,IAAI,CAAC;QAElB;;WAEG;QACgD,aAAQ,GAAG,KAAK,CAAC;QAEpE;;WAEG;QACO,oBAAe,GAAG,KAAK,CAAC;QAEhB,SAAI,GAAiB,UAAU,CAAC;IAmBpD,CAAC;IAjBoB,OAAO;QACxB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe;YAAE,OAAO;QAElD,IAAI,CAAC,aAAa,CACd,IAAI,qBAAqB,CAAC,IAAI,EAAE,EAAC,IAAI,EAAE,YAAY,CAAC,eAAe,EAAC,CAAC,CAAC,CAAC;IAC7E,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,IAAI,qBAAqB,CACxC,IAAI,EAAE,EAAC,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAC,CAAC,CAAC,CAAC;SACxD;IACH,CAAC;CACF;AA/BC;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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {property} from 'lit/decorators.js';\n\nimport {ListItemEl, ListItemRole} from '../../../list/internal/listitem/list-item.js';\nimport {CLOSE_REASON, DefaultCloseMenuEvent, 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  /**\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(\n        new DefaultCloseMenuEvent(this, {kind: CLOSE_REASON.CLICK_SELECTION}));\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(new DefaultCloseMenuEvent(\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;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"]}

package/menu/internal/shared.d.ts

@@ -63,58 +63,65 @@ export interface KeydownReason extends Reason {
  */
 export type DefaultReasons = ClickReason | KeydownReason;
 /**
- * The event that closes any parent menus. It is recommended to subclass and
- * dispatch this event rather than creating your own `close-menu` event.
+ * Creates an event that closes any parent menus.
  */
-export declare class CloseMenuEvent<T extends Reason = DefaultReasons> extends Event {
+export declare function createCloseMenuEvent<T extends Reason = DefaultReasons>(initiator: MenuItem, reason: T): CustomEvent<{
     initiator: MenuItem;
-    readonly reason: T;
-    readonly itemPath: MenuItem[];
-    constructor(initiator: MenuItem, reason: T);
-}
+    itemPath: MenuItem[];
+    reason: T;
+}>;
 /**
- * The event that signals to the menu that it should stay open on the focusout
- * event.
+ * Creates an event that signals to the menu that it should stay open on the
+ * focusout event.
  */
-export declare class StayOpenOnFocusoutEvent extends Event {
-    constructor();
-}
+export declare function createStayOpenOnFocusoutEvent(): Event;
 /**
- * The event that signals to the menu that it should close open on the focusout
- * event.
+ * Creates an event that signals to the menu that it should close open on the
+ * focusout event.
  */
-export declare class CloseOnFocusoutEvent extends Event {
-    constructor();
-}
+export declare function createCloseOnFocusoutEvent(): Event;
 /**
- * The default close menu event used by md-menu. To create your own `close-menu`
- * event, you should subclass the `CloseMenuEvent` instead.
+ * Creates a default close menu event used by md-menu.
  */
-export declare const DefaultCloseMenuEvent: {
-    new (initiator: MenuItem, reason: DefaultReasons): CloseMenuEvent<DefaultReasons>;
-    readonly AT_TARGET: number;
-    readonly BUBBLING_PHASE: number;
-    readonly CAPTURING_PHASE: number;
-    readonly NONE: number;
-};
+export declare const createDefaultCloseMenuEvent: (initiator: MenuItem, reason: DefaultReasons) => CustomEvent<{
+    initiator: MenuItem;
+    itemPath: MenuItem[];
+    reason: DefaultReasons;
+}>;
 /**
- * The event that requests the parent md-menu to deactivate all other items.
+ * The type of the default close menu event used by md-menu.
  */
-export declare class DeactivateItemsEvent extends Event {
-    constructor();
-}
+export type CloseMenuEvent<T extends Reason = DefaultReasons> = ReturnType<typeof createCloseMenuEvent<T>>;
 /**
- * Requests the typeahead functionality of containing menu be deactivated.
+ * Creates an event that requests the parent md-menu to deactivate all other
+ * items.
  */
-export declare class DeactivateTypeaheadEvent extends Event {
-    constructor();
-}
+export declare function createDeactivateItemsEvent(): Event;
 /**
- * Requests the typeahead functionality of containing menu be activated.
+ * The type of the event that requests the parent md-menu to deactivate all
+ * other items.
  */
-export declare class ActivateTypeaheadEvent extends Event {
-    constructor();
-}
+export type DeactivateItemsEvent = ReturnType<typeof createDeactivateItemsEvent>;
+/**
+ * Creates an event that requests the typeahead functionality of containing menu
+ * be deactivated.
+ */
+export declare function createDeactivateTypeaheadEvent(): Event;
+/**
+ * The type of the event that requests the typeahead functionality of containing
+ * menu be deactivated.
+ */
+export type DeactivateTypeaheadEvent = ReturnType<typeof createDeactivateTypeaheadEvent>;
+/**
+ * Creates an event that requests the typeahead functionality of containing menu
+ * be activated.
+ */
+export declare function createActivateTypeaheadEvent(): Event;
+/**
+ * The type of the event that requests the typeahead functionality of containing
+ * menu be activated.
+ */
+export type ActivateTypeaheadEvent = ReturnType<typeof createActivateTypeaheadEvent>;
 /**
  * Keys that are used to navigate menus.
  */

package/menu/internal/shared.js

@@ -4,64 +4,53 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * The event that closes any parent menus. It is recommended to subclass and
- * dispatch this event rather than creating your own `close-menu` event.
+ * Creates an event that closes any parent menus.
  */
-export class CloseMenuEvent extends Event {
-    constructor(initiator, reason) {
-        super('close-menu', { bubbles: true, composed: true });
-        this.initiator = initiator;
-        this.reason = reason;
-        this.itemPath = [initiator];
-    }
+export function createCloseMenuEvent(initiator, reason) {
+    return new CustomEvent('close-menu', {
+        bubbles: true,
+        composed: true,
+        detail: { initiator, reason, itemPath: [initiator] }
+    });
 }
 /**
- * The event that signals to the menu that it should stay open on the focusout
- * event.
+ * Creates an event that signals to the menu that it should stay open on the
+ * focusout event.
  */
-export class StayOpenOnFocusoutEvent extends Event {
-    constructor() {
-        super('stay-open-on-focusout', { bubbles: true, composed: true });
-    }
+export function createStayOpenOnFocusoutEvent() {
+    return new Event('stay-open-on-focusout', { bubbles: true, composed: true });
 }
 /**
- * The event that signals to the menu that it should close open on the focusout
- * event.
+ * Creates an event that signals to the menu that it should close open on the
+ * focusout event.
  */
-export class CloseOnFocusoutEvent extends Event {
-    constructor() {
-        super('close-on-focusout', { bubbles: true, composed: true });
-    }
+export function createCloseOnFocusoutEvent() {
+    return new Event('close-on-focusout', { bubbles: true, composed: true });
 }
 /**
- * The default close menu event used by md-menu. To create your own `close-menu`
- * event, you should subclass the `CloseMenuEvent` instead.
+ * Creates a default close menu event used by md-menu.
  */
-// tslint:disable-next-line
-export const DefaultCloseMenuEvent = (CloseMenuEvent);
+export const createDefaultCloseMenuEvent = (createCloseMenuEvent);
 /**
- * The event that requests the parent md-menu to deactivate all other items.
+ * Creates an event that requests the parent md-menu to deactivate all other
+ * items.
  */
-export class DeactivateItemsEvent extends Event {
-    constructor() {
-        super('deactivate-items', { bubbles: true, composed: true });
-    }
+export function createDeactivateItemsEvent() {
+    return new Event('deactivate-items', { bubbles: true, composed: true });
 }
 /**
- * Requests the typeahead functionality of containing menu be deactivated.
+ * Creates an event that requests the typeahead functionality of containing menu
+ * be deactivated.
  */
-export class DeactivateTypeaheadEvent extends Event {
-    constructor() {
-        super('deactivate-typeahead', { bubbles: true, composed: true });
-    }
+export function createDeactivateTypeaheadEvent() {
+    return new Event('deactivate-typeahead', { bubbles: true, composed: true });
 }
 /**
- * Requests the typeahead functionality of containing menu be activated.
+ * Creates an event that requests the typeahead functionality of containing menu
+ * be activated.
  */
-export class ActivateTypeaheadEvent extends Event {
-    constructor() {
-        super('activate-typeahead', { bubbles: true, composed: true });
-    }
+export function createActivateTypeaheadEvent() {
+    return new Event('activate-typeahead', { bubbles: true, composed: true });
 }
 /**
  * Keys that are used to navigate menus.

package/menu/internal/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.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 {ListItem} from '../../list/internal/listitem/list-item.js';\n\n/**\n * Interface specific to menu item and not list item.\n */\ninterface MenuItemSelf {\n  /**\n   * The visible headline text of the item.\n   */\n  headline: string;\n  /**\n   * Whether or not the item is the currently active item of interest (focuses\n   * upon activation).\n   */\n  active: boolean;\n  /**\n   * Whether or not the item is in the selected visual state.\n   */\n  selected?: boolean;\n  /**\n   * If it is a sub-menu-item, a method that can close the submenu.\n   */\n  close?: () => void;\n  /**\n   * Focuses the item.\n   */\n  focus: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * they should have both the `md-menu-item` and `md-list-item` attributes set.\n */\nexport type MenuItem = MenuItemSelf&ListItem;\n\n/**\n * The reason the `close-menu` event was dispatched.\n */\nexport interface Reason {\n  kind: string;\n}\n\n/**\n * The click selection reason for the `close-menu` event. The menu was closed\n * because an item was selected via user click.\n */\nexport interface ClickReason extends Reason {\n  kind: typeof CLOSE_REASON.CLICK_SELECTION;\n}\n\n/**\n * The keydown reason for the `close-menu` event. The menu was closed\n * because a specific key was pressed. The default closing keys for\n * `md-menu-item` are, Space, Enter or Escape.\n */\nexport interface KeydownReason extends Reason {\n  kind: typeof CLOSE_REASON.KEYDOWN;\n  key: string;\n}\n\n/**\n * The default menu closing reasons for the material md-menu package.\n */\nexport type DefaultReasons = ClickReason|KeydownReason;\n\n/**\n * The event that closes any parent menus. It is recommended to subclass and\n * dispatch this event rather than creating your own `close-menu` event.\n */\nexport class CloseMenuEvent<T extends Reason = DefaultReasons> extends Event {\n  readonly itemPath: MenuItem[];\n  constructor(public initiator: MenuItem, readonly reason: T) {\n    super('close-menu', {bubbles: true, composed: true});\n    this.itemPath = [initiator];\n  }\n}\n\n/**\n * The event that signals to the menu that it should stay open on the focusout\n * event.\n */\nexport class StayOpenOnFocusoutEvent extends Event {\n  constructor() {\n    super('stay-open-on-focusout', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * The event that signals to the menu that it should close open on the focusout\n * event.\n */\nexport class CloseOnFocusoutEvent extends Event {\n  constructor() {\n    super('close-on-focusout', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * The default close menu event used by md-menu. To create your own `close-menu`\n * event, you should subclass the `CloseMenuEvent` instead.\n */\n// tslint:disable-next-line\nexport const DefaultCloseMenuEvent = CloseMenuEvent<DefaultReasons>;\n\n/**\n * The event that requests the parent md-menu to deactivate all other items.\n */\nexport class DeactivateItemsEvent extends Event {\n  constructor() {\n    super('deactivate-items', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Requests the typeahead functionality of containing menu be deactivated.\n */\nexport class DeactivateTypeaheadEvent extends Event {\n  constructor() {\n    super('deactivate-typeahead', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Requests the typeahead functionality of containing menu be activated.\n */\nexport class ActivateTypeaheadEvent extends Event {\n  constructor() {\n    super('activate-typeahead', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Keys that are used to navigate menus.\n */\nexport const NAVIGABLE_KEY = {\n  UP: 'ArrowUp',\n  DOWN: 'ArrowDown',\n  RIGHT: 'ArrowRight',\n  LEFT: 'ArrowLeft',\n} as const;\n\n/**\n * Keys that are used for selection in menus.\n */\nexport const SELECTION_KEY = {\n  SPACE: 'Space',\n  ENTER: 'Enter',\n} as const;\n\n/**\n * Default close `Reason` kind values.\n */\nexport const CLOSE_REASON = {\n  CLICK_SELECTION: 'CLICK_SELECTION',\n  KEYDOWN: 'KEYDOWN',\n} as const;\n\n/**\n * Keys that can close menus.\n */\nexport const KEYDOWN_CLOSE_KEYS = {\n  ESCAPE: 'Escape',\n  SPACE: SELECTION_KEY.SPACE,\n  ENTER: SELECTION_KEY.ENTER,\n} as const;\n\ntype Values<T> = T[keyof T];\n\n/**\n * Determines whether the given key code is a key code that should close the\n * menu.\n *\n * @param code The KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to close the\n * menu.\n */\nexport function isClosableKey(code: string):\n    code is Values<typeof KEYDOWN_CLOSE_KEYS> {\n  return Object.values(KEYDOWN_CLOSE_KEYS).some(value => (value === code));\n}\n\n/**\n * Determines whether the given key code is a key code that should select a menu\n * item.\n *\n * @param code They KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to select a\n * menu item.\n */\nexport function isSelectableKey(code: string):\n    code is Values<typeof SELECTION_KEY> {\n  return Object.values(SELECTION_KEY).some(value => (value === code));\n}\n\n/**\n * Determines whether a target element is contained inside another element's\n * composed tree.\n *\n * @param target The potential contained element.\n * @param container The potential containing element of the target.\n * @returns Whether the target element is contained inside the container's\n * composed subtree\n */\nexport function isElementInSubtree(\n    target: EventTarget, container: EventTarget) {\n  // Dispatch a composed, bubbling event to check its path to see if the\n  // newly-focused element is contained in container's subtree\n  const focusEv = new Event('md-contains', {bubbles: true, composed: true});\n  let composedPath: EventTarget[] = [];\n  const listener = (ev: Event) => {\n    composedPath = ev.composedPath();\n  };\n\n  container.addEventListener('md-contains', listener);\n  target.dispatchEvent(focusEv);\n  container.removeEventListener('md-contains', listener);\n\n  const isContained = composedPath.length > 0;\n  return isContained;\n}\n"]}
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.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 {ListItem} from '../../list/internal/listitem/list-item.js';\n\n/**\n * Interface specific to menu item and not list item.\n */\ninterface MenuItemSelf {\n  /**\n   * The visible headline text of the item.\n   */\n  headline: string;\n  /**\n   * Whether or not the item is the currently active item of interest (focuses\n   * upon activation).\n   */\n  active: boolean;\n  /**\n   * Whether or not the item is in the selected visual state.\n   */\n  selected?: boolean;\n  /**\n   * If it is a sub-menu-item, a method that can close the submenu.\n   */\n  close?: () => void;\n  /**\n   * Focuses the item.\n   */\n  focus: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * they should have both the `md-menu-item` and `md-list-item` attributes set.\n */\nexport type MenuItem = MenuItemSelf&ListItem;\n\n/**\n * The reason the `close-menu` event was dispatched.\n */\nexport interface Reason {\n  kind: string;\n}\n\n/**\n * The click selection reason for the `close-menu` event. The menu was closed\n * because an item was selected via user click.\n */\nexport interface ClickReason extends Reason {\n  kind: typeof CLOSE_REASON.CLICK_SELECTION;\n}\n\n/**\n * The keydown reason for the `close-menu` event. The menu was closed\n * because a specific key was pressed. The default closing keys for\n * `md-menu-item` are, Space, Enter or Escape.\n */\nexport interface KeydownReason extends Reason {\n  kind: typeof CLOSE_REASON.KEYDOWN;\n  key: string;\n}\n\n/**\n * The default menu closing reasons for the material md-menu package.\n */\nexport type DefaultReasons = ClickReason|KeydownReason;\n\n/**\n * Creates an event that closes any parent menus.\n */\nexport function createCloseMenuEvent<T extends Reason = DefaultReasons>(\n    initiator: MenuItem, reason: T) {\n  return new CustomEvent<\n      {initiator: MenuItem, itemPath: MenuItem[], reason: T}>('close-menu', {\n    bubbles: true,\n    composed: true,\n    detail: {initiator, reason, itemPath: [initiator]}\n  });\n}\n\n/**\n * Creates an event that signals to the menu that it should stay open on the\n * focusout event.\n */\nexport function createStayOpenOnFocusoutEvent() {\n  return new Event('stay-open-on-focusout', {bubbles: true, composed: true});\n}\n\n/**\n * Creates an event that signals to the menu that it should close open on the\n * focusout event.\n */\nexport function createCloseOnFocusoutEvent() {\n  return new Event('close-on-focusout', {bubbles: true, composed: true});\n}\n\n/**\n * Creates a default close menu event used by md-menu.\n */\nexport const createDefaultCloseMenuEvent = createCloseMenuEvent<DefaultReasons>;\n\n/**\n * The type of the default close menu event used by md-menu.\n */\n// tslint:disable-next-line\nexport type CloseMenuEvent<T extends Reason = DefaultReasons> =\n    ReturnType<typeof createCloseMenuEvent<T>>;\n\n/**\n * Creates an event that requests the parent md-menu to deactivate all other\n * items.\n */\nexport function createDeactivateItemsEvent() {\n  return new Event('deactivate-items', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the parent md-menu to deactivate all\n * other items.\n */\nexport type DeactivateItemsEvent =\n    ReturnType<typeof createDeactivateItemsEvent>;\n\n\n/**\n * Creates an event that requests the typeahead functionality of containing menu\n * be deactivated.\n */\nexport function createDeactivateTypeaheadEvent() {\n  return new Event('deactivate-typeahead', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the typeahead functionality of containing\n * menu be deactivated.\n */\nexport type DeactivateTypeaheadEvent =\n    ReturnType<typeof createDeactivateTypeaheadEvent>;\n\n/**\n * Creates an event that requests the typeahead functionality of containing menu\n * be activated.\n */\nexport function createActivateTypeaheadEvent() {\n  return new Event('activate-typeahead', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the typeahead functionality of containing\n * menu be activated.\n */\nexport type ActivateTypeaheadEvent =\n    ReturnType<typeof createActivateTypeaheadEvent>;\n\n/**\n * Keys that are used to navigate menus.\n */\nexport const NAVIGABLE_KEY = {\n  UP: 'ArrowUp',\n  DOWN: 'ArrowDown',\n  RIGHT: 'ArrowRight',\n  LEFT: 'ArrowLeft',\n} as const;\n\n/**\n * Keys that are used for selection in menus.\n */\nexport const SELECTION_KEY = {\n  SPACE: 'Space',\n  ENTER: 'Enter',\n} as const;\n\n/**\n * Default close `Reason` kind values.\n */\nexport const CLOSE_REASON = {\n  CLICK_SELECTION: 'CLICK_SELECTION',\n  KEYDOWN: 'KEYDOWN',\n} as const;\n\n/**\n * Keys that can close menus.\n */\nexport const KEYDOWN_CLOSE_KEYS = {\n  ESCAPE: 'Escape',\n  SPACE: SELECTION_KEY.SPACE,\n  ENTER: SELECTION_KEY.ENTER,\n} as const;\n\ntype Values<T> = T[keyof T];\n\n/**\n * Determines whether the given key code is a key code that should close the\n * menu.\n *\n * @param code The KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to close the\n * menu.\n */\nexport function isClosableKey(code: string):\n    code is Values<typeof KEYDOWN_CLOSE_KEYS> {\n  return Object.values(KEYDOWN_CLOSE_KEYS).some(value => (value === code));\n}\n\n/**\n * Determines whether the given key code is a key code that should select a menu\n * item.\n *\n * @param code They KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to select a\n * menu item.\n */\nexport function isSelectableKey(code: string):\n    code is Values<typeof SELECTION_KEY> {\n  return Object.values(SELECTION_KEY).some(value => (value === code));\n}\n\n/**\n * Determines whether a target element is contained inside another element's\n * composed tree.\n *\n * @param target The potential contained element.\n * @param container The potential containing element of the target.\n * @returns Whether the target element is contained inside the container's\n * composed subtree\n */\nexport function isElementInSubtree(\n    target: EventTarget, container: EventTarget) {\n  // Dispatch a composed, bubbling event to check its path to see if the\n  // newly-focused element is contained in container's subtree\n  const focusEv = new Event('md-contains', {bubbles: true, composed: true});\n  let composedPath: EventTarget[] = [];\n  const listener = (ev: Event) => {\n    composedPath = ev.composedPath();\n  };\n\n  container.addEventListener('md-contains', listener);\n  target.dispatchEvent(focusEv);\n  container.removeEventListener('md-contains', listener);\n\n  const isContained = composedPath.length > 0;\n  return isContained;\n}\n"]}

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

@@ -6,18 +6,17 @@
 import { Corner } from '../menu.js';
 import { MenuItemEl } from '../menuitem/menu-item.js';
 /**
- * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to
- *     deselect other items when a submenu opens
- * @fires deactivate-typeahead {DeactivateItemsEvent} Requests the parent menu
- *     to deactivate the typeahead functionality when a submenu opens
- * @fires activate-typeahead {DeactivateItemsEvent} Requests the parent menu to
- *     activate the typeahead functionality when a submenu closes
- * @fires stay-open-on-focusout {StayOpenOnFocusoutEvent} Requests the parent
- *     menu to stay open when focusout event is fired or has a `null`
- *     `relatedTarget` when submenu is opened.
- * @fires close-on-focusout {CloseOnFocusoutEvent} Requests the parent
- *     menu to close when focusout event is fired or has a `null`
- *     `relatedTarget` When submenu is closed.
+ * @fires deactivate-items Requests the parent menu to deselect other items when
+ * a submenu opens
+ * @fires deactivate-typeahead Requests the parent menu to deactivate the
+ * typeahead functionality when a submenu opens
+ * @fires activate-typeahead Requests the parent menu to activate the typeahead
+ * functionality when a submenu closes
+ * @fires stay-open-on-focusout Requests the parent menu to stay open when
+ * focusout event is fired or has a `null` `relatedTarget` when submenu is
+ * opened.
+ * @fires close-on-focusout Requests the parent menu to close when focusout
+ * event is fired or has a `null` `relatedTarget` When submenu is closed.
  */
 export declare class SubMenuItem extends MenuItemEl {
     /**
@@ -40,6 +39,7 @@ export declare class SubMenuItem extends MenuItemEl {
      * Sets the item in the selected visual state when a submenu is opened.
      */
     selected: boolean;
+    protected submenuHover: boolean;
     private readonly menus;
     protected keepOpenOnClick: boolean;
     private previousOpenTimeout;
@@ -54,6 +54,14 @@ export declare class SubMenuItem extends MenuItemEl {
      */
     protected onPointerleave: () => void;
     protected onClick(): void;
+    protected getRenderClasses(): {
+        'submenu-hover': boolean;
+        'has-focus-ring': boolean;
+        'with-one-line': boolean;
+        'with-two-line': boolean;
+        'with-three-line': boolean;
+        disabled: boolean;
+    };
     /**
      * On item keydown handles opening the submenu.
      */
@@ -96,4 +104,6 @@ export declare class SubMenuItem extends MenuItemEl {
      * @return Whether or not the key code should close the submenu.
      */
     private isSubmenuCloseKey;
+    private onSubmenuPointerEnter;
+    private onSubmenuPointerLeave;
 }

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

@@ -5,26 +5,25 @@
  */
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import { List } from '../../../list/internal/list.js';
 import { MenuItemEl } from '../menuitem/menu-item.js';
-import { ActivateTypeaheadEvent, CLOSE_REASON, CloseOnFocusoutEvent, DeactivateItemsEvent, DeactivateTypeaheadEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY, StayOpenOnFocusoutEvent } from '../shared.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 {DeactivateItemsEvent} Requests the parent menu to
- *     deselect other items when a submenu opens
- * @fires deactivate-typeahead {DeactivateItemsEvent} Requests the parent menu
- *     to deactivate the typeahead functionality when a submenu opens
- * @fires activate-typeahead {DeactivateItemsEvent} Requests the parent menu to
- *     activate the typeahead functionality when a submenu closes
- * @fires stay-open-on-focusout {StayOpenOnFocusoutEvent} Requests the parent
- *     menu to stay open when focusout event is fired or has a `null`
- *     `relatedTarget` when submenu is opened.
- * @fires close-on-focusout {CloseOnFocusoutEvent} Requests the parent
- *     menu to close when focusout event is fired or has a `null`
- *     `relatedTarget` When submenu is closed.
+ * @fires deactivate-items Requests the parent menu to deselect other items when
+ * a submenu opens
+ * @fires deactivate-typeahead Requests the parent menu to deactivate the
+ * typeahead functionality when a submenu opens
+ * @fires activate-typeahead Requests the parent menu to activate the typeahead
+ * functionality when a submenu closes
+ * @fires stay-open-on-focusout Requests the parent menu to stay open when
+ * focusout event is fired or has a `null` `relatedTarget` when submenu is
+ * opened.
+ * @fires close-on-focusout Requests the parent menu to close when focusout
+ * event is fired or has a `null` `relatedTarget` When submenu is closed.
  */
 export class SubMenuItem extends MenuItemEl {
     constructor() {
@@ -49,6 +48,7 @@ export class SubMenuItem extends MenuItemEl {
          * Sets the item in the selected visual state when a submenu is opened.
          */
         this.selected = false;
+        this.submenuHover = false;
         this.keepOpenOnClick = true;
         this.previousOpenTimeout = 0;
         this.previousCloseTimeout = 0;
@@ -95,6 +95,9 @@ export class SubMenuItem extends MenuItemEl {
     onClick() {
         this.show();
     }
+    getRenderClasses() {
+        return { ...super.getRenderClasses(), 'submenu-hover': this.submenuHover };
+    }
     /**
      * On item keydown handles opening the submenu.
      */
@@ -132,6 +135,8 @@ export class SubMenuItem extends MenuItemEl {
     renderSubMenu() {
         return html `<span class="submenu"><slot
         name="submenu"
+        @pointerenter=${this.onSubmenuPointerEnter}
+        @pointerleave=${this.onSubmenuPointerLeave}
         @pointerdown=${stopPropagation}
         @click=${stopPropagation}
         @keydown=${this.onSubMenuKeydown}
@@ -139,14 +144,15 @@ export class SubMenuItem extends MenuItemEl {
     ></slot></span>`;
     }
     onCloseSubmenu(event) {
-        event.itemPath.push(this);
+        const { itemPath, reason } = event.detail;
+        itemPath.push(this);
         // Restore focusout behavior
-        this.dispatchEvent(new CloseOnFocusoutEvent());
-        this.dispatchEvent(new ActivateTypeaheadEvent());
+        this.dispatchEvent(createCloseOnFocusoutEvent());
+        this.dispatchEvent(createActivateTypeaheadEvent());
         // Escape should only close one menu not all of the menus unlike space or
         // click selection which should close all menus.
-        if (event.reason.kind === CLOSE_REASON.KEYDOWN &&
-            event.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {
+        if (reason.kind === CLOSE_REASON.KEYDOWN &&
+            reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {
             event.stopPropagation();
             this.active = true;
             this.selected = false;
@@ -200,12 +206,12 @@ export class SubMenuItem extends MenuItemEl {
         // has a submenuitem hovered which opens a third submenut. Then if you hover
         // on yet another middle menu-item (not submenuitem) then focusout Event's
         // relatedTarget will be `null` thus, causing all the menus to close
-        this.dispatchEvent(new StayOpenOnFocusoutEvent());
+        this.dispatchEvent(createStayOpenOnFocusoutEvent());
         menu.show();
         // Deactivate other items. This can be the case if the user has tabbed
         // around the menu and then mouses over an md-sub-menu.
-        this.dispatchEvent(new DeactivateItemsEvent());
-        this.dispatchEvent(new DeactivateTypeaheadEvent());
+        this.dispatchEvent(createDeactivateItemsEvent());
+        this.dispatchEvent(createDeactivateTypeaheadEvent());
         this.selected = true;
         // This is the case of mouse hovering when already opened via keyboard or
         // vice versa
@@ -225,11 +231,11 @@ export class SubMenuItem extends MenuItemEl {
         const menu = this.submenuEl;
         if (!menu || !menu.open)
             return;
-        this.dispatchEvent(new ActivateTypeaheadEvent());
+        this.dispatchEvent(createActivateTypeaheadEvent());
         menu.quick = true;
         menu.close();
         // Restore focusout behavior.
-        this.dispatchEvent(new CloseOnFocusoutEvent());
+        this.dispatchEvent(createCloseOnFocusoutEvent());
         this.active = false;
         this.selected = false;
         menu.addEventListener('closed', onClosed, { once: true });
@@ -271,6 +277,12 @@ export class SubMenuItem extends MenuItemEl {
                 return false;
         }
     }
+    onSubmenuPointerEnter() {
+        this.submenuHover = true;
+    }
+    onSubmenuPointerLeave() {
+        this.submenuHover = false;
+    }
 }
 __decorate([
     property({ attribute: 'anchor-corner' })
@@ -287,6 +299,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SubMenuItem.prototype, "selected", void 0);
+__decorate([
+    state()
+], SubMenuItem.prototype, "submenuHover", void 0);
 __decorate([
     queryAssignedElements({ slot: 'submenu', flatten: true })
 ], SubMenuItem.prototype, "menus", void 0);