@vaadin/context-menu 25.0.0-alpha1 → 25.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,6 @@
     "lit.d.ts",
     "lit.js",
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,25 +36,25 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha1",
-    "@vaadin/component-base": "25.0.0-alpha1",
-    "@vaadin/item": "25.0.0-alpha1",
-    "@vaadin/list-box": "25.0.0-alpha1",
-    "@vaadin/lit-renderer": "25.0.0-alpha1",
-    "@vaadin/overlay": "25.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
+    "@vaadin/a11y-base": "25.0.0-alpha11",
+    "@vaadin/component-base": "25.0.0-alpha11",
+    "@vaadin/item": "25.0.0-alpha11",
+    "@vaadin/list-box": "25.0.0-alpha11",
+    "@vaadin/lit-renderer": "25.0.0-alpha11",
+    "@vaadin/overlay": "25.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha1",
-    "@vaadin/test-runner-commands": "25.0.0-alpha1",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha11",
+    "@vaadin/test-runner-commands": "25.0.0-alpha11",
+    "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
+  "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
 }

package/src/styles/vaadin-context-menu-item-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const contextMenuItemStyles: CSSResult;

package/src/styles/vaadin-context-menu-item-base-styles.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-base-styles.js';
+
+const menuItemStyles = css`
+  :host::after {
+    background: var(--vaadin-color-subtle);
+    content: '';
+    display: block;
+    height: var(--vaadin-icon-size, 1lh);
+    mask-image: var(--_vaadin-icon-chevron-down);
+    rotate: -90deg;
+    visibility: hidden;
+    width: var(--vaadin-icon-size, 1lh);
+  }
+
+  :host([dir='rtl'])::after {
+    rotate: 90deg;
+  }
+
+  /* TODO would be nice to only reserve the space for these if
+    one or mote items in the list is checkable or has child items */
+  :host([aria-haspopup='true'])::after,
+  :host([menu-item-checked]) [part='checkmark'] {
+    visibility: visible;
+  }
+`;
+
+export const contextMenuItemStyles = [itemStyles, menuItemStyles];

package/src/styles/vaadin-context-menu-overlay-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const contextMenuOverlayStyles: CSSResult;

package/src/styles/vaadin-context-menu-overlay-base-styles.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
+import { menuOverlayStyles } from './vaadin-menu-overlay-base-styles.js';
+
+export const contextMenuOverlayStyles = [overlayStyles, menuOverlayStyles];

package/src/{vaadin-menu-overlay-styles.d.ts → styles/vaadin-menu-overlay-base-styles.d.ts}

@@ -5,4 +5,4 @@
  */
 import type { CSSResult } from 'lit';
 
-export const styles: CSSResult;
+export const menuOverlayStyles: CSSResult;

package/src/{vaadin-menu-overlay-styles.js → styles/vaadin-menu-overlay-base-styles.js}

@@ -3,9 +3,9 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
-export const styles = css`
+export const menuOverlayStyles = css`
   :host {
     align-items: flex-start;
     justify-content: flex-start;
@@ -20,13 +20,12 @@ export const styles = css`
     justify-content: flex-end;
   }
 
-  [part='overlay'] {
-    background-color: #fff;
+  [part='content'] {
+    padding: var(--vaadin-item-overlay-padding, 4px);
   }
 
-  @media (forced-colors: active) {
-    [part='overlay'] {
-      outline: 3px solid !important;
-    }
+  /* TODO keyboard focus becomes visible even when navigating the menu with the mouse */
+  [part='overlay']:focus-visible {
+    outline: none;
   }
 `;

package/src/vaadin-context-menu-item.js

@@ -3,12 +3,14 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { contextMenuItemStyles } from './styles/vaadin-context-menu-item-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
@@ -20,21 +22,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @protected
  */
-class ContextMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+class ContextMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-context-menu-item';
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
+    return contextMenuItemStyles;
   }
 
   /** @protected */

package/src/vaadin-context-menu-list-box.js

@@ -3,11 +3,13 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { listBoxStyles } from '@vaadin/list-box/src/styles/vaadin-list-box-base-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -20,28 +22,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @protected
  */
-class ContextMenuListBox extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+class ContextMenuListBox extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-context-menu-list-box';
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: flex;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      [part='items'] {
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-    `;
+    return listBoxStyles;
   }
 
   static get properties() {

package/src/vaadin-context-menu-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { isElementFocusable } from '@vaadin/a11y-base/src/focus-utils.js';
+import { isElementFocusable, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { isAndroid, isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { addListener, deepTargetFind, gestures, removeListener } from '@vaadin/component-base/src/gestures.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
@@ -31,6 +31,8 @@ export const ContextMenuMixin = (superClass) =>
          */
         opened: {
           type: Boolean,
+          reflectToAttribute: true,
+          observer: '_openedChanged',
           value: false,
           notify: true,
           readOnly: true,
@@ -123,22 +125,15 @@ export const ContextMenuMixin = (superClass) =>
 
     static get observers() {
       return [
-        '_openedChanged(opened)',
         '_targetOrOpenOnChanged(listenOn, openOn)',
         '_rendererChanged(renderer, items)',
         '_fullscreenChanged(_fullscreen)',
-        '_overlayContextChanged(_overlayElement, _context)',
-        '_overlayModelessChanged(_overlayElement, _modeless)',
-        '_overlayPhoneChanged(_overlayElement, _phone)',
-        '_overlayThemeChanged(_overlayElement, _theme)',
       ];
     }
 
     constructor() {
       super();
 
-      this._createOverlay();
-
       this._boundOpen = this.open.bind(this);
       this._boundClose = this.close.bind(this);
       this._boundPreventDefault = this._preventDefault.bind(this);
@@ -170,8 +165,10 @@ export const ContextMenuMixin = (superClass) =>
     }
 
     /** @protected */
-    ready() {
-      super.ready();
+    firstUpdated() {
+      super.firstUpdated();
+
+      this._overlayElement = this.$.overlay;
 
       this.addController(
         new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
@@ -180,29 +177,17 @@ export const ContextMenuMixin = (superClass) =>
       );
     }
 
-    /** @private */
-    _createOverlay() {
-      // Create an overlay in the constructor to use in observers before `ready()`
-      const overlay = document.createElement(`${this._tagNamePrefix}-overlay`);
-      overlay.owner = this;
-
-      overlay.addEventListener('opened-changed', (e) => {
-        this._onOverlayOpened(e);
-      });
-
-      overlay.addEventListener('vaadin-overlay-open', (e) => {
-        this._onVaadinOverlayOpen(e);
-      });
-
-      this._overlayElement = overlay;
-    }
-
     /**
      * Runs before overlay is fully rendered
      * @private
      */
-    _onOverlayOpened(e) {
-      const opened = e.detail.value;
+    _onOverlayOpened(event) {
+      // Ignore events from submenus
+      if (event.target !== this._overlayElement) {
+        return;
+      }
+
+      const opened = event.detail.value;
       this._setOpened(opened);
       if (opened) {
         this.__alignOverlayPosition();
@@ -213,43 +198,23 @@ export const ContextMenuMixin = (superClass) =>
      * Runs after overlay is fully rendered
      * @private
      */
-    _onVaadinOverlayOpen() {
-      this.__alignOverlayPosition();
-      this._overlayElement.style.opacity = '';
-      this.__forwardFocus();
-    }
-
-    /** @private */
-    _overlayContextChanged(overlay, context) {
-      if (overlay) {
-        overlay.model = context;
-      }
-    }
-
-    /** @private */
-    _overlayModelessChanged(overlay, modeless) {
-      if (overlay) {
-        overlay.modeless = modeless;
+    _onVaadinOverlayOpen(event) {
+      // Ignore events from submenus
+      if (event.target !== this._overlayElement) {
+        return;
       }
-    }
 
-    /** @private */
-    _overlayPhoneChanged(overlay, phone) {
-      if (overlay) {
-        overlay.toggleAttribute('phone', phone);
-        overlay.withBackdrop = phone;
-      }
+      this.__alignOverlayPosition();
+      this._overlayElement.style.visibility = '';
+      this.__forwardFocus();
     }
 
-    /** @private */
-    _overlayThemeChanged(overlay, theme) {
-      if (overlay) {
-        if (theme) {
-          overlay.setAttribute('theme', theme);
-        } else {
-          overlay.removeAttribute('theme');
-        }
-      }
+    /**
+     * Runs after overlay's closing animation is finished
+     * @private
+     */
+    _onVaadinOverlayClosed() {
+      this.dispatchEvent(new CustomEvent('closed'));
     }
 
     /** @private */
@@ -318,17 +283,14 @@ export const ContextMenuMixin = (superClass) =>
     }
 
     /** @private */
-    _openedChanged(opened) {
+    _openedChanged(opened, oldOpened) {
       if (opened) {
         document.documentElement.addEventListener('contextmenu', this._boundOnGlobalContextMenu, true);
-      } else {
+      } else if (oldOpened) {
         document.documentElement.removeEventListener('contextmenu', this._boundOnGlobalContextMenu, true);
       }
 
       this.__setListenOnUserSelect(opened);
-
-      // Has to be set after instance has been created
-      this._overlayElement.opened = opened;
     }
 
     /**
@@ -338,11 +300,18 @@ export const ContextMenuMixin = (superClass) =>
      * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
      */
     requestContentUpdate() {
-      if (!this._overlayElement || !this.renderer) {
+      if (!this._overlayElement) {
         return;
       }
 
+      // Store state to be restored after re-rendering
+      this.__preserveMenuState();
+
+      // Run overlay renderer to re-create DOM elements
       this._overlayElement.requestContentUpdate();
+
+      // Restore focused item, update sub-menu if needed
+      this.__restoreMenuState();
     }
 
     /** @private */
@@ -355,11 +324,7 @@ export const ContextMenuMixin = (superClass) =>
         if (this.closeOn === 'click') {
           this.closeOn = '';
         }
-
-        renderer = this.__itemsRenderer;
       }
-
-      this._overlayElement.renderer = renderer;
     }
 
     /**
@@ -386,6 +351,11 @@ export const ContextMenuMixin = (superClass) =>
      * @param {!Event | undefined} e used as the context for the menu. Overlay coordinates are taken from this event.
      */
     open(e) {
+      // Ignore events from the overlay
+      if (this._overlayElement && e.composedPath().includes(this._overlayElement)) {
+        return;
+      }
+
       if (e && !this.opened) {
         this._context = {
           detail: e.detail,
@@ -403,12 +373,76 @@ export const ContextMenuMixin = (superClass) =>
           this.__y = this._getEventCoordinate(e, 'y');
           this.__pageYOffset = window.pageYOffset;
 
-          this._overlayElement.style.opacity = '0';
+          // Hide overlay until it is fully rendered and positioned
+          this._overlayElement.style.visibility = 'hidden';
           this._setOpened(true);
         }
       }
     }
 
+    /** @private */
+    __preserveMenuState() {
+      const listBox = this.__getListBox();
+      if (listBox) {
+        this.__focusedIndex = listBox.items.indexOf(listBox.focused);
+
+        if (this._subMenu && this._subMenu.opened) {
+          this.__subMenuIndex = listBox.items.indexOf(this._subMenu.listenOn);
+        }
+      }
+    }
+
+    /** @private */
+    __restoreMenuState() {
+      const focusedIndex = this.__focusedIndex;
+      const subMenuIndex = this.__subMenuIndex;
+      const selectedIndex = this.__selectedIndex;
+
+      const listBox = this.__getListBox();
+
+      if (listBox) {
+        // Initialize menu items synchronously
+        listBox._observer.flush();
+
+        if (subMenuIndex > -1) {
+          const itemToOpen = listBox.items[subMenuIndex];
+          if (itemToOpen) {
+            if (Array.isArray(itemToOpen._item.children) && itemToOpen._item.children.length) {
+              // Keep nested sub-menu opened and update it
+              this.__updateSubMenuForItem(this._subMenu, itemToOpen);
+              this._subMenu.requestContentUpdate();
+            } else {
+              // Item no longer has children, close sub-menu
+              this._subMenu.close();
+              this.__focusItem(itemToOpen);
+            }
+          } else {
+            // Item no longer exists, focus the list-box
+            listBox.focus();
+          }
+        }
+
+        // Focus previously selected item, in case it was clicked with
+        // `keepOpen` option, or the previously focused item, if any
+        this.__focusItem(selectedIndex > -1 ? listBox.children[selectedIndex] : listBox.items[focusedIndex]);
+      }
+
+      this.__focusedIndex = undefined;
+      this.__subMenuIndex = undefined;
+      this.__selectedIndex = undefined;
+    }
+
+    /** @private */
+    __focusItem(item) {
+      if (item) {
+        item.focus();
+
+        if (isKeyboardActive()) {
+          item.setAttribute('focus-ring', '');
+        }
+      }
+    }
+
     /** @private */
     __onScroll() {
       if (!this.opened) {
@@ -600,7 +634,11 @@ export const ContextMenuMixin = (superClass) =>
           // Dispatch another contextmenu at the same coordinates after the overlay is closed
           this._overlayElement.addEventListener(
             'vaadin-overlay-closed',
-            () => this.__contextMenuAt(e.clientX, e.clientY),
+            (closeEvent) => {
+              if (closeEvent.target === this._overlayElement) {
+                this.__contextMenuAt(e.clientX, e.clientY);
+              }
+            },
             {
               once: true,
             },
@@ -611,4 +649,10 @@ export const ContextMenuMixin = (superClass) =>
         this.close();
       }
     }
+
+    /**
+     * Fired when the context menu is closed.
+     *
+     * @event closed
+     */
   };

package/src/vaadin-context-menu-overlay.js

@@ -8,10 +8,10 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { contextMenuOverlayStyles } from './styles/vaadin-context-menu-overlay-base-styles.js';
 import { MenuOverlayMixin } from './vaadin-menu-overlay-mixin.js';
-import { styles } from './vaadin-menu-overlay-styles.js';
 
 /**
  * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
@@ -25,14 +25,14 @@ import { styles } from './vaadin-menu-overlay-styles.js';
  * @protected
  */
 export class ContextMenuOverlay extends MenuOverlayMixin(
-  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-context-menu-overlay';
   }
 
   static get styles() {
-    return [overlayStyles, styles];
+    return contextMenuOverlayStyles;
   }
 
   /** @protected */
@@ -42,6 +42,7 @@ export class ContextMenuOverlay extends MenuOverlayMixin(
       <div part="overlay" id="overlay" tabindex="0">
         <div part="content" id="content">
           <slot></slot>
+          <slot name="submenu"></slot>
         </div>
       </div>
     `;

package/src/vaadin-context-menu.d.ts

@@ -34,6 +34,11 @@ export type ContextMenuItemSelectedEvent<TItem extends ContextMenuItem = Context
   value: TItem;
 }>;
 
+/**
+ * Fired when the context menu is closed.
+ */
+export type ContextMenuClosedEvent = CustomEvent;
+
 export interface ContextMenuCustomEventMap<TItem extends ContextMenuItem = ContextMenuItem> {
   'opened-changed': ContextMenuOpenedChangedEvent;
 
@@ -42,6 +47,8 @@ export interface ContextMenuCustomEventMap<TItem extends ContextMenuItem = Conte
   'close-all-menus': Event;
 
   'items-outside-click': Event;
+
+  closed: ContextMenuClosedEvent;
 }
 
 export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenuItem>
@@ -208,18 +215,19 @@ export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenu
  *
  * ### Styling
  *
- * `<vaadin-context-menu>` uses `<vaadin-context-menu-overlay>` internal
- * themable component as the actual visible context menu overlay.
+ * The following shadow DOM parts are available for styling:
  *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay)
- * documentation for `<vaadin-context-menu-overlay>` stylable parts.
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * ### Internal components
  *
- * When using `items` API, in addition `<vaadin-context-menu-overlay>`, the following
- * internal components are themable:
+ * When using `items` API the following internal components are themable:
  *
  * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  * - `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
@@ -231,11 +239,9 @@ export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenu
  * ---------- |-------------
  * `expanded` | Expanded parent item.
  *
- * Note: the `theme` attribute value set on `<vaadin-context-menu>` is
- * propagated to the internal components listed above.
- *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} item-selected - Fired when an item is selected when the context menu is populated using the `items` API.
+ * @fires {CustomEvent} closed - Fired when the context menu is closed.
  */
 declare class ContextMenu<TItem extends ContextMenuItem = ContextMenuItem> extends HTMLElement {
   addEventListener<K extends keyof ContextMenuEventMap>(

package/src/vaadin-context-menu.js

@@ -8,6 +8,7 @@ import './vaadin-context-menu-item.js';
 import './vaadin-context-menu-list-box.js';
 import './vaadin-context-menu-overlay.js';
 import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
@@ -175,18 +176,19 @@ import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
  *
  * ### Styling
  *
- * `<vaadin-context-menu>` uses `<vaadin-context-menu-overlay>` internal
- * themable component as the actual visible context menu overlay.
+ * The following shadow DOM parts are available for styling:
  *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay)
- * documentation for `<vaadin-context-menu-overlay>` stylable parts.
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * ### Internal components
  *
- * When using `items` API, in addition `<vaadin-context-menu-overlay>`, the following
- * internal components are themable:
+ * When using `items` API the following internal components are themable:
  *
  * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  * - `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
@@ -198,11 +200,9 @@ import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
  * ---------- |-------------
  * `expanded` | Expanded parent item.
  *
- * Note: the `theme` attribute value set on `<vaadin-context-menu>` is
- * propagated to the internal components listed above.
- *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} item-selected - Fired when an item is selected when the context menu is populated using the `items` API.
+ * @fires {CustomEvent} closed - Fired when the context menu is closed.
  *
  * @customElement
  * @extends HTMLElement
@@ -232,17 +232,27 @@ class ContextMenu extends ContextMenuMixin(
 
   /** @protected */
   render() {
-    return html`<slot id="slot"></slot>`;
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.appendChild(this._overlayElement);
-    return root;
+    return html`
+      <slot id="slot"></slot>
+      <vaadin-context-menu-overlay
+        id="overlay"
+        .owner="${this}"
+        .opened="${this.opened}"
+        .model="${this._context}"
+        .modeless="${this._modeless}"
+        .renderer="${this.items ? this.__itemsRenderer : this.renderer}"
+        .withBackdrop="${this._phone}"
+        ?phone="${this._phone}"
+        theme="${ifDefined(this._theme)}"
+        exportparts="backdrop, overlay, content"
+        @opened-changed="${this._onOverlayOpened}"
+        @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
+        @vaadin-overlay-closed="${this._onVaadinOverlayClosed}"
+      >
+        <slot name="overlay"></slot>
+        <slot name="submenu" slot="submenu"></slot>
+      </vaadin-context-menu-overlay>
+    `;
   }
 
   /**

package/src/vaadin-contextmenu-items-mixin.js

@@ -116,10 +116,10 @@ export const ItemsMixin = (superClass) =>
     /** @protected */
     __forwardFocus() {
       const overlay = this._overlayElement;
-      const child = overlay.getFirstChild();
+      const child = overlay._contentRoot.firstElementChild;
       // If parent item is not focused, do not focus submenu
       if (overlay.parentOverlay) {
-        const parent = overlay.parentOverlay.querySelector('[expanded]');
+        const parent = overlay.parentOverlay._contentRoot.querySelector('[expanded]');
         if (parent && parent.hasAttribute('focused') && child) {
           child.focus();
         } else {
@@ -132,14 +132,12 @@ export const ItemsMixin = (superClass) =>
 
     /** @private */
     __openSubMenu(subMenu, itemElement, overlayClass) {
-      subMenu.items = itemElement._item.children;
-      subMenu.listenOn = itemElement;
+      this.__updateSubMenuForItem(subMenu, itemElement);
       subMenu.overlayClass = overlayClass;
 
       const parent = this._overlayElement;
 
       const subMenuOverlay = subMenu._overlayElement;
-      subMenuOverlay.positionTarget = itemElement;
       subMenuOverlay.noHorizontalOverlap = true;
       // Store the reference parent overlay
       subMenuOverlay._setParentOverlay(parent);
@@ -163,6 +161,13 @@ export const ItemsMixin = (superClass) =>
       );
     }
 
+    /** @private */
+    __updateSubMenuForItem(subMenu, itemElement) {
+      subMenu.items = itemElement._item.children;
+      subMenu.listenOn = itemElement;
+      subMenu._overlayElement.positionTarget = itemElement;
+    }
+
     /**
      * @param {!ContextMenuItem} item
      * @return {HTMLElement}
@@ -248,10 +253,20 @@ export const ItemsMixin = (superClass) =>
       // Open a submenu on click event when a touch device is used.
       // On desktop, a submenu opens on hover.
       overlay.addEventListener(isTouch ? 'click' : 'mouseover', (event) => {
+        // Ignore events from the submenus
+        if (event.composedPath().includes(this._subMenu)) {
+          return;
+        }
+
         this.__showSubMenu(event);
       });
 
       overlay.addEventListener('keydown', (event) => {
+        // Ignore events from the submenus
+        if (event.composedPath().includes(this._subMenu)) {
+          return;
+        }
+
         const { key } = event;
         const isRTL = this.__isRTL;
 
@@ -283,10 +298,6 @@ export const ItemsMixin = (superClass) =>
       subMenu._modeless = true;
       subMenu.openOn = 'opensubmenu';
 
-      // Sub-menu doesn't have a target to wrap,
-      // so there is no need to keep it visible.
-      subMenu.setAttribute('hidden', '');
-
       // Close sub-menu when the parent menu closes.
       this.addEventListener('opened-changed', (event) => {
         if (!event.detail.value) {
@@ -317,14 +328,10 @@ export const ItemsMixin = (superClass) =>
         const menu = e.target;
         const selectedItem = e.detail.value;
         const index = menu.items.indexOf(selectedItem);
-        if (!!selectedItem.keepOpen && index > -1) {
-          menu._overlayElement.requestContentUpdate();
-
-          // Initialize items synchronously
-          menu._listBox._observer.flush();
-
-          const newItem = menu._listBox.children[index];
-          newItem.focus();
+        // Menu can be no longer opened if parent menu items changed
+        if (!!selectedItem.keepOpen && index > -1 && menu.opened) {
+          menu.__selectedIndex = index;
+          menu.requestContentUpdate();
         } else if (!selectedItem.keepOpen) {
           this.close();
         }
@@ -365,7 +372,7 @@ export const ItemsMixin = (superClass) =>
         const { children } = item._item;
 
         // Check if the sub-menu was focused before closing it.
-        const child = subMenu._overlayElement.getFirstChild();
+        const child = subMenu._overlayElement._contentRoot.firstElementChild;
         const isSubmenuFocused = child && child.focused;
 
         if (subMenu.items !== children) {
@@ -391,24 +398,26 @@ export const ItemsMixin = (superClass) =>
       }
     }
 
+    /** @protected */
+    __getListBox() {
+      return this._overlayElement._contentRoot.querySelector(`${this._tagNamePrefix}-list-box`);
+    }
+
     /**
      * @param {!HTMLElement} root
      * @param {!ContextMenu} menu
      * @param {!ContextMenuRendererContext} context
      * @protected
      */
-    __itemsRenderer(root, menu, { detail }) {
+    __itemsRenderer(root, menu) {
       this.__initMenu(root, menu);
 
-      const subMenu = root.querySelector(this.constructor.is);
-      subMenu.closeOn = menu.closeOn;
-
-      const listBox = root.querySelector(`${this._tagNamePrefix}-list-box`);
-      listBox.innerHTML = '';
+      this._subMenu.closeOn = menu.closeOn;
+      this._listBox.innerHTML = '';
 
-      [...(detail.children || menu.items)].forEach((item) => {
+      menu.items.forEach((item) => {
         const component = this.__createComponent(item);
-        listBox.appendChild(component);
+        this._listBox.appendChild(component);
       });
     }
 
@@ -449,8 +458,9 @@ export const ItemsMixin = (superClass) =>
         root.appendChild(listBox);
 
         const subMenu = this.__initSubMenu();
+        subMenu.slot = 'submenu';
         this._subMenu = subMenu;
-        root.appendChild(subMenu);
+        this.appendChild(subMenu);
 
         requestAnimationFrame(() => {
           this.__openListenerActive = true;

package/src/vaadin-menu-overlay-mixin.d.ts

@@ -18,9 +18,4 @@ export declare class MenuOverlayMixinClass {
    * Returns the adjusted boundaries of the overlay.
    */
   getBoundaries(): { xMax: number; xMin: number; yMax: number };
-
-  /**
-   * Returns the first element in the overlay content.
-   */
-  getFirstChild(): HTMLElement;
 }

package/src/vaadin-menu-overlay-mixin.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { OverlayFocusMixin } from '@vaadin/overlay/src/vaadin-overlay-focus-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 
@@ -37,6 +36,23 @@ export const MenuOverlayMixin = (superClass) =>
       return ['_themeChanged(_theme)'];
     }
 
+    /**
+     * Override method from OverlayFocusMixin to use slotted div as the content root.
+     * @protected
+     * @override
+     */
+    get _contentRoot() {
+      if (!this.__savedRoot) {
+        const root = document.createElement('div');
+        root.setAttribute('slot', 'overlay');
+        root.style.display = 'contents';
+        this.owner.appendChild(root);
+        this.__savedRoot = root;
+      }
+
+      return this.__savedRoot;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -45,7 +61,7 @@ export const MenuOverlayMixin = (superClass) =>
 
       this.addEventListener('keydown', (e) => {
         if (!e.defaultPrevented && e.composedPath()[0] === this.$.overlay && [38, 40].indexOf(e.keyCode) > -1) {
-          const child = this.getFirstChild();
+          const child = this._contentRoot.firstElementChild;
           if (child && Array.isArray(child.items) && child.items.length) {
             e.preventDefault();
             if (e.keyCode === 38) {
@@ -58,15 +74,6 @@ export const MenuOverlayMixin = (superClass) =>
       });
     }
 
-    /**
-     * Returns the first element in the overlay content.
-     *
-     * @returns {HTMLElement}
-     */
-    getFirstChild() {
-      return this.querySelector(':not(style):not(slot)');
-    }
-
     /** @private */
     _themeChanged() {
       this.close();
@@ -149,9 +156,9 @@ export const MenuOverlayMixin = (superClass) =>
     }
 
     /**
-     * Override method inherited from `OverlayFocusMixin` to return
-     * true if the overlay contains the given node, including
-     * those within descendant menu overlays.
+     * Override method inherited from `OverlayFocusMixin` to check if the
+     * node is contained within the overlay's owner element (the menu),
+     * where all content (overlay content, sub-menus, etc.) is slotted.
      *
      * @protected
      * @override
@@ -159,18 +166,6 @@ export const MenuOverlayMixin = (superClass) =>
      * @return {boolean}
      */
     _deepContains(node) {
-      // Find the closest menu overlay for the given node.
-      let overlay = getClosestElement(this.localName, node);
-      while (overlay) {
-        if (overlay === this) {
-          // The node is inside a descendant menu overlay.
-          return true;
-        }
-
-        // Traverse the overlay hierarchy to check parent overlays.
-        overlay = overlay.parentOverlay;
-      }
-
-      return false;
+      return this.owner.contains(node);
     }
   };

package/vaadin-context-menu.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-context-menu.js';
+import './src/vaadin-context-menu.js';
 export * from './src/vaadin-context-menu.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/context-menu",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-context-menu",
-          "description": "`<vaadin-context-menu>` is a Web Component for creating context menus.\n\n### Items\n\nItems is a higher level convenience API for defining a (hierarchical) menu structure for the component.\nIf a menu item has a non-empty `children` set, a sub-menu with the child items is opened\nnext to the parent menu on mouseover, tap or a right arrow keypress.\n\nWhen an item is selected, `<vaadin-context-menu>` dispatches an \"item-selected\" event\nwith the selected item as `event.detail.value` property.\nIf item does not have `keepOpen` property the menu will be closed.\n\n```javascript\ncontextMenu.items = [\n  { text: 'Menu Item 1', theme: 'primary', className: 'first', children:\n    [\n      { text: 'Menu Item 1-1', checked: true, keepOpen: true },\n      { text: 'Menu Item 1-2' }\n    ]\n  },\n  { component: 'hr' },\n  { text: 'Menu Item 2', children:\n    [\n      { text: 'Menu Item 2-1' },\n      { text: 'Menu Item 2-2', disabled: true }\n    ]\n  },\n  { text: 'Menu Item 3', disabled: true, className: 'last' }\n];\n\ncontextMenu.addEventListener('item-selected', e => {\n  const item = e.detail.value;\n  console.log(`${item.text} selected`);\n});\n```\n\n**NOTE:** when the `items` array is defined, the renderer cannot be used.\n\n### Rendering\n\nThe content of the menu can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `contextMenu`, `model` arguments when applicable.\nGenerate DOM content by using `model` object properties if needed, append it to the `root`\nelement and control the state of the host element by accessing `contextMenu`. Before generating\nnew content, the renderer function should check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-context-menu id=\"contextMenu\">\n <p>This paragraph has a context menu.</p>\n</vaadin-context-menu>\n```\n```js\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.renderer = (root, contextMenu, context) => {\n  let listBox = root.firstElementChild;\n  if (!listBox) {\n    listBox = document.createElement('vaadin-list-box');\n    root.appendChild(listBox);\n  }\n\n  let item = listBox.querySelector('vaadin-item');\n  if (!item) {\n    item = document.createElement('vaadin-item');\n    listBox.appendChild(item);\n  }\n  item.textContent = 'Content of the selector: ' + context.target.textContent;\n};\n```\n\nYou can access the menu context inside the renderer using\n`context.target` and `context.detail`.\n\nRenderer is called on the opening of the context-menu and each time the related context is updated.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### `vaadin-contextmenu` Gesture Event\n\n`vaadin-contextmenu` is a gesture event (a custom event),\nwhich is dispatched after either `contextmenu` or long touch events.\nThis enables support for both mouse and touch environments in a uniform way.\n\n`<vaadin-context-menu>` opens the menu overlay on the `vaadin-contextmenu`\nevent by default.\n\n### Menu Listener\n\nBy default, the `<vaadin-context-menu>` element listens for the menu opening\nevent on itself. In case if you do not want to wrap the target, you can listen for\nevents on an element outside the `<vaadin-context-menu>` by setting the\n`listenOn` property:\n\n```html\n<vaadin-context-menu id=\"contextMenu\"></vaadin-context-menu>\n\n<div id=\"menuListener\">The element that listens for the contextmenu event.</div>\n```\n```javascript\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.listenOn = document.querySelector('#menuListener');\n```\n\n### Filtering Menu Targets\n\nBy default, the listener element and all its descendants open the context\nmenu. You can filter the menu targets to a smaller set of elements inside\nthe listener element by setting the `selector` property.\n\nIn the following example, only the elements matching `.has-menu` will open the context menu:\n\n```html\n<vaadin-context-menu selector=\".has-menu\">\n  <p class=\"has-menu\">This paragraph opens the context menu</p>\n  <p>This paragraph does not open the context menu</p>\n</vaadin-context-menu>\n```\n\n### Menu Context\n\nThe following properties are available in the `context` argument:\n\n- `target` is the menu opening event target, which is the element that\nthe user has called the context menu for\n- `detail` is the menu opening event detail\n\nIn the following example, the menu item text is composed with the contents\nof the element that opened the menu:\n\n```html\n<vaadin-context-menu selector=\"li\" id=\"contextMenu\">\n  <ul>\n    <li>Foo</li>\n    <li>Bar</li>\n    <li>Baz</li>\n  </ul>\n</vaadin-context-menu>\n```\n```js\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.renderer = (root, contextMenu, context) => {\n  let listBox = root.firstElementChild;\n  if (!listBox) {\n    listBox = document.createElement('vaadin-list-box');\n    root.appendChild(listBox);\n  }\n\n  let item = listBox.querySelector('vaadin-item');\n  if (!item) {\n    item = document.createElement('vaadin-item');\n    listBox.appendChild(item);\n  }\n  item.textContent = 'The menu target: ' + context.target.textContent;\n};\n```\n\n### Styling\n\n`<vaadin-context-menu>` uses `<vaadin-context-menu-overlay>` internal\nthemable component as the actual visible context menu overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-overlay)\ndocumentation for `<vaadin-context-menu-overlay>` stylable parts.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nWhen using `items` API, in addition `<vaadin-context-menu-overlay>`, the following\ninternal components are themable:\n\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-list-box).\n\nThe `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.\n\nNote: the `theme` attribute value set on `<vaadin-context-menu>` is\npropagated to the internal components listed above.",
+          "description": "`<vaadin-context-menu>` is a Web Component for creating context menus.\n\n### Items\n\nItems is a higher level convenience API for defining a (hierarchical) menu structure for the component.\nIf a menu item has a non-empty `children` set, a sub-menu with the child items is opened\nnext to the parent menu on mouseover, tap or a right arrow keypress.\n\nWhen an item is selected, `<vaadin-context-menu>` dispatches an \"item-selected\" event\nwith the selected item as `event.detail.value` property.\nIf item does not have `keepOpen` property the menu will be closed.\n\n```javascript\ncontextMenu.items = [\n  { text: 'Menu Item 1', theme: 'primary', className: 'first', children:\n    [\n      { text: 'Menu Item 1-1', checked: true, keepOpen: true },\n      { text: 'Menu Item 1-2' }\n    ]\n  },\n  { component: 'hr' },\n  { text: 'Menu Item 2', children:\n    [\n      { text: 'Menu Item 2-1' },\n      { text: 'Menu Item 2-2', disabled: true }\n    ]\n  },\n  { text: 'Menu Item 3', disabled: true, className: 'last' }\n];\n\ncontextMenu.addEventListener('item-selected', e => {\n  const item = e.detail.value;\n  console.log(`${item.text} selected`);\n});\n```\n\n**NOTE:** when the `items` array is defined, the renderer cannot be used.\n\n### Rendering\n\nThe content of the menu can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `contextMenu`, `model` arguments when applicable.\nGenerate DOM content by using `model` object properties if needed, append it to the `root`\nelement and control the state of the host element by accessing `contextMenu`. Before generating\nnew content, the renderer function should check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-context-menu id=\"contextMenu\">\n <p>This paragraph has a context menu.</p>\n</vaadin-context-menu>\n```\n```js\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.renderer = (root, contextMenu, context) => {\n  let listBox = root.firstElementChild;\n  if (!listBox) {\n    listBox = document.createElement('vaadin-list-box');\n    root.appendChild(listBox);\n  }\n\n  let item = listBox.querySelector('vaadin-item');\n  if (!item) {\n    item = document.createElement('vaadin-item');\n    listBox.appendChild(item);\n  }\n  item.textContent = 'Content of the selector: ' + context.target.textContent;\n};\n```\n\nYou can access the menu context inside the renderer using\n`context.target` and `context.detail`.\n\nRenderer is called on the opening of the context-menu and each time the related context is updated.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### `vaadin-contextmenu` Gesture Event\n\n`vaadin-contextmenu` is a gesture event (a custom event),\nwhich is dispatched after either `contextmenu` or long touch events.\nThis enables support for both mouse and touch environments in a uniform way.\n\n`<vaadin-context-menu>` opens the menu overlay on the `vaadin-contextmenu`\nevent by default.\n\n### Menu Listener\n\nBy default, the `<vaadin-context-menu>` element listens for the menu opening\nevent on itself. In case if you do not want to wrap the target, you can listen for\nevents on an element outside the `<vaadin-context-menu>` by setting the\n`listenOn` property:\n\n```html\n<vaadin-context-menu id=\"contextMenu\"></vaadin-context-menu>\n\n<div id=\"menuListener\">The element that listens for the contextmenu event.</div>\n```\n```javascript\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.listenOn = document.querySelector('#menuListener');\n```\n\n### Filtering Menu Targets\n\nBy default, the listener element and all its descendants open the context\nmenu. You can filter the menu targets to a smaller set of elements inside\nthe listener element by setting the `selector` property.\n\nIn the following example, only the elements matching `.has-menu` will open the context menu:\n\n```html\n<vaadin-context-menu selector=\".has-menu\">\n  <p class=\"has-menu\">This paragraph opens the context menu</p>\n  <p>This paragraph does not open the context menu</p>\n</vaadin-context-menu>\n```\n\n### Menu Context\n\nThe following properties are available in the `context` argument:\n\n- `target` is the menu opening event target, which is the element that\nthe user has called the context menu for\n- `detail` is the menu opening event detail\n\nIn the following example, the menu item text is composed with the contents\nof the element that opened the menu:\n\n```html\n<vaadin-context-menu selector=\"li\" id=\"contextMenu\">\n  <ul>\n    <li>Foo</li>\n    <li>Bar</li>\n    <li>Baz</li>\n  </ul>\n</vaadin-context-menu>\n```\n```js\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.renderer = (root, contextMenu, context) => {\n  let listBox = root.firstElementChild;\n  if (!listBox) {\n    listBox = document.createElement('vaadin-list-box');\n    root.appendChild(listBox);\n  }\n\n  let item = listBox.querySelector('vaadin-item');\n  if (!item) {\n    item = document.createElement('vaadin-item');\n    listBox.appendChild(item);\n  }\n  item.textContent = 'The menu target: ' + context.target.textContent;\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nWhen using `items` API the following internal components are themable:\n\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/elements/vaadin-list-box).\n\nThe `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
           "attributes": [
             {
               "name": "selector",
@@ -135,6 +135,10 @@
               }
             ],
             "events": [
+              {
+                "name": "closed",
+                "description": "Fired when the context menu is closed."
+              },
               {
                 "name": "item-selected",
                 "description": "Fired when an item is selected when the context menu is populated using the `items` API."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/context-menu",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-context-menu",
-          "description": "`<vaadin-context-menu>` is a Web Component for creating context menus.\n\n### Items\n\nItems is a higher level convenience API for defining a (hierarchical) menu structure for the component.\nIf a menu item has a non-empty `children` set, a sub-menu with the child items is opened\nnext to the parent menu on mouseover, tap or a right arrow keypress.\n\nWhen an item is selected, `<vaadin-context-menu>` dispatches an \"item-selected\" event\nwith the selected item as `event.detail.value` property.\nIf item does not have `keepOpen` property the menu will be closed.\n\n```javascript\ncontextMenu.items = [\n  { text: 'Menu Item 1', theme: 'primary', className: 'first', children:\n    [\n      { text: 'Menu Item 1-1', checked: true, keepOpen: true },\n      { text: 'Menu Item 1-2' }\n    ]\n  },\n  { component: 'hr' },\n  { text: 'Menu Item 2', children:\n    [\n      { text: 'Menu Item 2-1' },\n      { text: 'Menu Item 2-2', disabled: true }\n    ]\n  },\n  { text: 'Menu Item 3', disabled: true, className: 'last' }\n];\n\ncontextMenu.addEventListener('item-selected', e => {\n  const item = e.detail.value;\n  console.log(`${item.text} selected`);\n});\n```\n\n**NOTE:** when the `items` array is defined, the renderer cannot be used.\n\n### Rendering\n\nThe content of the menu can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `contextMenu`, `model` arguments when applicable.\nGenerate DOM content by using `model` object properties if needed, append it to the `root`\nelement and control the state of the host element by accessing `contextMenu`. Before generating\nnew content, the renderer function should check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-context-menu id=\"contextMenu\">\n <p>This paragraph has a context menu.</p>\n</vaadin-context-menu>\n```\n```js\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.renderer = (root, contextMenu, context) => {\n  let listBox = root.firstElementChild;\n  if (!listBox) {\n    listBox = document.createElement('vaadin-list-box');\n    root.appendChild(listBox);\n  }\n\n  let item = listBox.querySelector('vaadin-item');\n  if (!item) {\n    item = document.createElement('vaadin-item');\n    listBox.appendChild(item);\n  }\n  item.textContent = 'Content of the selector: ' + context.target.textContent;\n};\n```\n\nYou can access the menu context inside the renderer using\n`context.target` and `context.detail`.\n\nRenderer is called on the opening of the context-menu and each time the related context is updated.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### `vaadin-contextmenu` Gesture Event\n\n`vaadin-contextmenu` is a gesture event (a custom event),\nwhich is dispatched after either `contextmenu` or long touch events.\nThis enables support for both mouse and touch environments in a uniform way.\n\n`<vaadin-context-menu>` opens the menu overlay on the `vaadin-contextmenu`\nevent by default.\n\n### Menu Listener\n\nBy default, the `<vaadin-context-menu>` element listens for the menu opening\nevent on itself. In case if you do not want to wrap the target, you can listen for\nevents on an element outside the `<vaadin-context-menu>` by setting the\n`listenOn` property:\n\n```html\n<vaadin-context-menu id=\"contextMenu\"></vaadin-context-menu>\n\n<div id=\"menuListener\">The element that listens for the contextmenu event.</div>\n```\n```javascript\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.listenOn = document.querySelector('#menuListener');\n```\n\n### Filtering Menu Targets\n\nBy default, the listener element and all its descendants open the context\nmenu. You can filter the menu targets to a smaller set of elements inside\nthe listener element by setting the `selector` property.\n\nIn the following example, only the elements matching `.has-menu` will open the context menu:\n\n```html\n<vaadin-context-menu selector=\".has-menu\">\n  <p class=\"has-menu\">This paragraph opens the context menu</p>\n  <p>This paragraph does not open the context menu</p>\n</vaadin-context-menu>\n```\n\n### Menu Context\n\nThe following properties are available in the `context` argument:\n\n- `target` is the menu opening event target, which is the element that\nthe user has called the context menu for\n- `detail` is the menu opening event detail\n\nIn the following example, the menu item text is composed with the contents\nof the element that opened the menu:\n\n```html\n<vaadin-context-menu selector=\"li\" id=\"contextMenu\">\n  <ul>\n    <li>Foo</li>\n    <li>Bar</li>\n    <li>Baz</li>\n  </ul>\n</vaadin-context-menu>\n```\n```js\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.renderer = (root, contextMenu, context) => {\n  let listBox = root.firstElementChild;\n  if (!listBox) {\n    listBox = document.createElement('vaadin-list-box');\n    root.appendChild(listBox);\n  }\n\n  let item = listBox.querySelector('vaadin-item');\n  if (!item) {\n    item = document.createElement('vaadin-item');\n    listBox.appendChild(item);\n  }\n  item.textContent = 'The menu target: ' + context.target.textContent;\n};\n```\n\n### Styling\n\n`<vaadin-context-menu>` uses `<vaadin-context-menu-overlay>` internal\nthemable component as the actual visible context menu overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-overlay)\ndocumentation for `<vaadin-context-menu-overlay>` stylable parts.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nWhen using `items` API, in addition `<vaadin-context-menu-overlay>`, the following\ninternal components are themable:\n\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-list-box).\n\nThe `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.\n\nNote: the `theme` attribute value set on `<vaadin-context-menu>` is\npropagated to the internal components listed above.",
+          "description": "`<vaadin-context-menu>` is a Web Component for creating context menus.\n\n### Items\n\nItems is a higher level convenience API for defining a (hierarchical) menu structure for the component.\nIf a menu item has a non-empty `children` set, a sub-menu with the child items is opened\nnext to the parent menu on mouseover, tap or a right arrow keypress.\n\nWhen an item is selected, `<vaadin-context-menu>` dispatches an \"item-selected\" event\nwith the selected item as `event.detail.value` property.\nIf item does not have `keepOpen` property the menu will be closed.\n\n```javascript\ncontextMenu.items = [\n  { text: 'Menu Item 1', theme: 'primary', className: 'first', children:\n    [\n      { text: 'Menu Item 1-1', checked: true, keepOpen: true },\n      { text: 'Menu Item 1-2' }\n    ]\n  },\n  { component: 'hr' },\n  { text: 'Menu Item 2', children:\n    [\n      { text: 'Menu Item 2-1' },\n      { text: 'Menu Item 2-2', disabled: true }\n    ]\n  },\n  { text: 'Menu Item 3', disabled: true, className: 'last' }\n];\n\ncontextMenu.addEventListener('item-selected', e => {\n  const item = e.detail.value;\n  console.log(`${item.text} selected`);\n});\n```\n\n**NOTE:** when the `items` array is defined, the renderer cannot be used.\n\n### Rendering\n\nThe content of the menu can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `contextMenu`, `model` arguments when applicable.\nGenerate DOM content by using `model` object properties if needed, append it to the `root`\nelement and control the state of the host element by accessing `contextMenu`. Before generating\nnew content, the renderer function should check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-context-menu id=\"contextMenu\">\n <p>This paragraph has a context menu.</p>\n</vaadin-context-menu>\n```\n```js\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.renderer = (root, contextMenu, context) => {\n  let listBox = root.firstElementChild;\n  if (!listBox) {\n    listBox = document.createElement('vaadin-list-box');\n    root.appendChild(listBox);\n  }\n\n  let item = listBox.querySelector('vaadin-item');\n  if (!item) {\n    item = document.createElement('vaadin-item');\n    listBox.appendChild(item);\n  }\n  item.textContent = 'Content of the selector: ' + context.target.textContent;\n};\n```\n\nYou can access the menu context inside the renderer using\n`context.target` and `context.detail`.\n\nRenderer is called on the opening of the context-menu and each time the related context is updated.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### `vaadin-contextmenu` Gesture Event\n\n`vaadin-contextmenu` is a gesture event (a custom event),\nwhich is dispatched after either `contextmenu` or long touch events.\nThis enables support for both mouse and touch environments in a uniform way.\n\n`<vaadin-context-menu>` opens the menu overlay on the `vaadin-contextmenu`\nevent by default.\n\n### Menu Listener\n\nBy default, the `<vaadin-context-menu>` element listens for the menu opening\nevent on itself. In case if you do not want to wrap the target, you can listen for\nevents on an element outside the `<vaadin-context-menu>` by setting the\n`listenOn` property:\n\n```html\n<vaadin-context-menu id=\"contextMenu\"></vaadin-context-menu>\n\n<div id=\"menuListener\">The element that listens for the contextmenu event.</div>\n```\n```javascript\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.listenOn = document.querySelector('#menuListener');\n```\n\n### Filtering Menu Targets\n\nBy default, the listener element and all its descendants open the context\nmenu. You can filter the menu targets to a smaller set of elements inside\nthe listener element by setting the `selector` property.\n\nIn the following example, only the elements matching `.has-menu` will open the context menu:\n\n```html\n<vaadin-context-menu selector=\".has-menu\">\n  <p class=\"has-menu\">This paragraph opens the context menu</p>\n  <p>This paragraph does not open the context menu</p>\n</vaadin-context-menu>\n```\n\n### Menu Context\n\nThe following properties are available in the `context` argument:\n\n- `target` is the menu opening event target, which is the element that\nthe user has called the context menu for\n- `detail` is the menu opening event detail\n\nIn the following example, the menu item text is composed with the contents\nof the element that opened the menu:\n\n```html\n<vaadin-context-menu selector=\"li\" id=\"contextMenu\">\n  <ul>\n    <li>Foo</li>\n    <li>Bar</li>\n    <li>Baz</li>\n  </ul>\n</vaadin-context-menu>\n```\n```js\nconst contextMenu = document.querySelector('#contextMenu');\ncontextMenu.renderer = (root, contextMenu, context) => {\n  let listBox = root.firstElementChild;\n  if (!listBox) {\n    listBox = document.createElement('vaadin-list-box');\n    root.appendChild(listBox);\n  }\n\n  let item = listBox.querySelector('vaadin-item');\n  if (!item) {\n    item = document.createElement('vaadin-item');\n    listBox.appendChild(item);\n  }\n  item.textContent = 'The menu target: ' + context.target.textContent;\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nWhen using `items` API the following internal components are themable:\n\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/elements/vaadin-list-box).\n\nThe `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
           "extension": true,
           "attributes": [
             {
@@ -68,6 +68,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@closed",
+              "description": "Fired when the context menu is closed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@item-selected",
               "description": "Fired when an item is selected when the context menu is populated using the `items` API.",

package/theme/lumo/vaadin-context-menu-item-styles.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-declare const contextMenuItem: import("lit").CSSResult;
-export { contextMenuItem };

package/theme/lumo/vaadin-context-menu-item-styles.js

@@ -1,45 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuItem = css`
-  /* :hover needed to workaround https://github.com/vaadin/web-components/issues/3133 */
-  :host(:hover) {
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  :host([role='menuitem'][menu-item-checked]) [part='checkmark']::before {
-    opacity: 1;
-  }
-
-  :host([aria-haspopup='true'])::after {
-    font-family: lumo-icons;
-    font-size: var(--lumo-icon-size-xs);
-    content: var(--lumo-icons-angle-right);
-    color: var(--lumo-tertiary-text-color);
-  }
-
-  :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
-    margin-right: calc(var(--lumo-space-m) * -1);
-    padding-left: var(--lumo-space-m);
-  }
-
-  :host([expanded]) {
-    background-color: var(--lumo-primary-color-10pct);
-  }
-
-  /* RTL styles */
-  :host([dir='rtl'][aria-haspopup='true'])::after {
-    content: var(--lumo-icons-angle-left);
-    margin-left: calc(var(--lumo-space-m) * -1);
-    padding-right: var(--lumo-space-m);
-  }
-`;
-
-registerStyles('vaadin-context-menu-item', [item, contextMenuItem], { moduleId: 'lumo-context-menu-item' });
-
-export { contextMenuItem };

package/theme/lumo/vaadin-context-menu-list-box-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-declare const contextMenuListBox: import("lit").CSSResult;
-export { contextMenuListBox };

package/theme/lumo/vaadin-context-menu-list-box-styles.js

@@ -1,47 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import { listBox } from '@vaadin/list-box/theme/lumo/vaadin-list-box-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuListBox = css`
-  :host {
-    --_lumo-list-box-item-selected-icon-display: block;
-  }
-
-  /* Normal item */
-  [part='items'] ::slotted([role='menuitem']) {
-    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-    cursor: default;
-    outline: none;
-    border-radius: var(--lumo-border-radius-m);
-    padding-left: calc(var(--lumo-border-radius-m) / 4);
-    padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-  }
-
-  /* Hovered item */
-  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
-  [part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
-  [part='items'] ::slotted([role='menuitem'][expanded]:not([disabled])) {
-    background-color: var(--lumo-primary-color-10pct);
-  }
-
-  /* RTL styles */
-  :host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
-    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-    padding-right: calc(var(--lumo-border-radius-m) / 4);
-  }
-
-  /* Focused item */
-  @media (pointer: coarse) {
-    [part='items'] ::slotted([role='menuitem']:hover:not([expanded]):not([disabled])) {
-      background-color: transparent;
-    }
-  }
-`;
-
-registerStyles('vaadin-context-menu-list-box', [listBox, contextMenuListBox], {
-  moduleId: 'lumo-context-menu-list-box',
-});
-
-export { contextMenuListBox };

package/theme/lumo/vaadin-context-menu-overlay-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-declare const contextMenuOverlay: import("lit").CSSResult;
-export { contextMenuOverlay };

package/theme/lumo/vaadin-context-menu-overlay-styles.js

@@ -1,35 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuOverlay = css`
-  :host([phone]) {
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-    top: 0 !important;
-    right: 0 !important;
-    bottom: var(--vaadin-overlay-viewport-bottom) !important;
-    left: 0 !important;
-    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
-    align-items: stretch;
-    justify-content: flex-end;
-  }
-
-  /* TODO These style overrides should not be needed.
-   We should instead offer a way to have non-selectable items inside the context menu. */
-
-  :host {
-    --_lumo-list-box-item-selected-icon-display: none;
-    --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);
-  }
-
-  [part='overlay'] {
-    outline: none;
-  }
-`;
-
-registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
-  moduleId: 'lumo-context-menu-overlay',
-});
-
-export { contextMenuOverlay };

package/theme/lumo/vaadin-context-menu.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-context-menu.js';

package/theme/lumo/vaadin-context-menu.js

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-context-menu.js';