@vaadin/context-menu 25.3.0-alpha1 → 25.3.0-alpha10

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

@@ -13,11 +13,43 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 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.
+ * `<vaadin-context-menu-item>` is a Web Component for creating `<vaadin-context-menu>` items.
  *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name    | Description
+ * -------------|----------------
+ * `checkmark`  | The graphical checkmark shown for a checked item
+ * `content`    | The element that wraps the slot
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the item is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the item is disabled.
+ * `focus-ring` | Set when the item is focused using the keyboard.
+ * `focused`    | Set when the item is focused.
+ * `expanded`   | Set when the item has a sub-menu and it is opened.
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-item-border-radius`    |
+ * | `--vaadin-item-checkmark-color`  |
+ * | `--vaadin-item-gap`              |
+ * | `--vaadin-item-height`           |
+ * | `--vaadin-item-padding`          |
+ * | `--vaadin-item-text-align`       |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-context-menu-item
  * @extends HTMLElement
- * @protected
  */
 class ContextMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

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

@@ -8,7 +8,26 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ * `<vaadin-context-menu-list-box>` is a Web Component for wrapping `<vaadin-context-menu>` items.
+ *
+ * ```html
+ * <vaadin-context-menu>
+ *   <vaadin-context-menu-list-box slot="overlay">
+ *     <vaadin-context-menu-item>Edit</vaadin-context-menu-item>
+ *     <vaadin-context-menu-item>Delete</vaadin-context-menu-item>
+ *   </vaadin-context-menu-list-box>
+ * </vaadin-context-menu>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name         | Description
+ * ------------------|------------------------
+ * `items`           | The items container
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class ContextMenuListBox extends ListMixin(DirMixin(ThemableMixin(HTMLElement))) {}
 

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

@@ -13,11 +13,30 @@ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ * `<vaadin-context-menu-list-box>` is a Web Component for wrapping `<vaadin-context-menu>` items.
  *
+ * ```html
+ * <vaadin-context-menu>
+ *   <vaadin-context-menu-list-box slot="overlay">
+ *     <vaadin-context-menu-item>Edit</vaadin-context-menu-item>
+ *     <vaadin-context-menu-item>Delete</vaadin-context-menu-item>
+ *   </vaadin-context-menu-list-box>
+ * </vaadin-context-menu>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name         | Description
+ * ------------------|------------------------
+ * `items`           | The items container
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-context-menu-list-box
  * @extends HTMLElement
- * @protected
  */
 class ContextMenuListBox extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

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

@@ -5,11 +5,11 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { ContextMenuRenderer } from './vaadin-context-menu.js';
-import type { ContextMenuItem, ItemsMixinClass } from './vaadin-contextmenu-items-mixin.js';
+import type { ContextMenuItemData, ItemsMixinClass } from './vaadin-contextmenu-items-mixin.js';
 
 export declare function ContextMenuMixin<
   T extends Constructor<HTMLElement>,
-  TItem extends ContextMenuItem = ContextMenuItem,
+  TItem extends ContextMenuItemData = ContextMenuItemData,
 >(base: T): Constructor<ContextMenuMixinClass> & Constructor<ItemsMixinClass<TItem>> & T;
 
 export declare class ContextMenuMixinClass {
@@ -52,6 +52,8 @@ export declare class ContextMenuMixinClass {
    * - `context` The object with the menu context, contains:
    *   - `context.target`  the target of the menu opening event,
    *   - `context.detail` the menu opening event detail.
+   *
+   * @deprecated Use a slotted `<vaadin-context-menu-list-box>` or the `items` property instead
    */
   renderer: ContextMenuRenderer | null | undefined;
 
@@ -83,5 +85,5 @@ export declare class ContextMenuMixinClass {
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export declare interface ContextMenuMixinClass<
-  TItem extends ContextMenuItem = ContextMenuItem,
+  TItem extends ContextMenuItemData = ContextMenuItemData,
 > extends ItemsMixinClass<TItem> {}

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

@@ -81,12 +81,22 @@ export const ContextMenuMixin = (superClass) =>
          *   - `context.target`  the target of the menu opening event,
          *   - `context.detail` the menu opening event detail.
          * @type {ContextMenuRenderer | undefined}
+         * @deprecated Use a slotted `<vaadin-context-menu-list-box>` or the `items` property instead
          */
         renderer: {
           type: Function,
           sync: true,
         },
 
+        /**
+         * The `<vaadin-context-menu-list-box>` slotted directly into the overlay slot.
+         * @private
+         */
+        __slottedListBox: {
+          type: Object,
+          sync: true,
+        },
+
         /**
          * When true, the menu overlay is modeless.
          * @protected
@@ -119,11 +129,7 @@ export const ContextMenuMixin = (superClass) =>
     }
 
     static get observers() {
-      return [
-        '_targetOrOpenOnChanged(listenOn, openOn)',
-        '_rendererChanged(renderer, items)',
-        '_fullscreenChanged(_fullscreen)',
-      ];
+      return ['_targetOrOpenOnChanged(listenOn, openOn)', '_fullscreenChanged(_fullscreen)'];
     }
 
     constructor() {
@@ -188,6 +194,26 @@ export const ContextMenuMixin = (superClass) =>
       }
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('renderer') || props.has('items') || props.has('__slottedListBox')) {
+        const contentSources = [this.items, this.renderer, this.__slottedListBox].filter(Boolean);
+        if (contentSources.length > 1) {
+          throw new Error(
+            'The "items", "renderer", and slotted "<vaadin-context-menu-list-box>" cannot be used together.',
+          );
+        }
+
+        // Clicks on items bubble to the overlay and must not close the menu
+        // (items with `keepOpen` or with children), so disable `closeOn`.
+        if (this.items && this.closeOn === 'click') {
+          this.closeOn = '';
+        }
+      }
+    }
+
     /**
      * Runs before overlay is fully rendered
      * @private
@@ -199,9 +225,12 @@ export const ContextMenuMixin = (superClass) =>
       }
 
       const opened = event.detail.value;
-      this._setOpened(opened);
       if (opened) {
+        this._setOpened(true);
         this.__alignOverlayPosition();
+      } else if (this.opened) {
+        // Use `close()` to also reset menu-bar button on outside click.
+        this.close();
       }
     }
 
@@ -290,7 +319,11 @@ export const ContextMenuMixin = (superClass) =>
 
     /** @private */
     _preventDefault(e) {
-      e.preventDefault();
+      // With items, `closeOn` is cleared to not close the menu on clicks bubbling
+      // from the items to the overlay, and the menu still closes on outside click.
+      if (!this.items) {
+        e.preventDefault();
+      }
     }
 
     /** @private */
@@ -319,19 +352,6 @@ export const ContextMenuMixin = (superClass) =>
       this.__restoreMenuState();
     }
 
-    /** @private */
-    _rendererChanged(renderer, items) {
-      if (items) {
-        if (renderer) {
-          throw new Error('The items API cannot be used together with a renderer');
-        }
-
-        if (this.closeOn === 'click') {
-          this.closeOn = '';
-        }
-      }
-    }
-
     /**
      * Closes the overlay.
      */
@@ -341,13 +361,22 @@ export const ContextMenuMixin = (superClass) =>
       this._setOpened(false);
     }
 
+    /**
+     * Returns the composed path of the event. By default, it uses the path stored
+     * at dispatch time (needed for Flow connector that opens menu asynchronously).
+     * @private
+     */
+    __getComposedPath(e) {
+      return e.__composedPath ?? e.detail?.sourceEvent?.__composedPath ?? e.composedPath();
+    }
+
     /** @private */
     _contextTarget(e) {
       if (this.selector) {
         const targets = this.listenOn.querySelectorAll(this.selector);
 
         return Array.prototype.filter.call(targets, (el) => {
-          return e.composedPath().indexOf(el) > -1;
+          return this.__getComposedPath(e).indexOf(el) > -1;
         })[0];
       } else if (this.listenOn && this.listenOn !== this && this.position) {
         // If listenOn has been set on a different element than the context menu root, then use listenOn as the target.
@@ -362,7 +391,7 @@ export const ContextMenuMixin = (superClass) =>
      */
     open(e) {
       // Ignore events from the overlay
-      if (this._overlayElement && e.composedPath().includes(this._overlayElement)) {
+      if (this._overlayElement && this.__getComposedPath(e).includes(this._overlayElement)) {
         return;
       }
 
@@ -392,7 +421,7 @@ export const ContextMenuMixin = (superClass) =>
 
     /** @private */
     __preserveMenuState() {
-      const listBox = this.__getListBox();
+      const listBox = this._menuListBox;
       if (listBox) {
         this.__focusedIndex = listBox.items.indexOf(listBox.focused);
 
@@ -408,11 +437,11 @@ export const ContextMenuMixin = (superClass) =>
       const subMenuIndex = this.__subMenuIndex;
       const selectedIndex = this.__selectedIndex;
 
-      const listBox = this.__getListBox();
+      const listBox = this._menuListBox;
 
       if (listBox) {
         // Initialize menu items synchronously
-        listBox._observer.flush();
+        listBox._observer?.flush();
 
         if (subMenuIndex > -1) {
           const itemToOpen = listBox.items[subMenuIndex];
@@ -449,6 +478,17 @@ export const ContextMenuMixin = (superClass) =>
       }
     }
 
+    /**
+     * Detects a `<vaadin-context-menu-list-box>` slotted directly into the overlay
+     * slot (instead of the default one rendered into slotted `div` element).
+     *
+     * @param {!Event} e
+     * @private
+     */
+    __onOverlaySlotChange(e) {
+      this.__slottedListBox = e.target.assignedElements().find((el) => el._hasVaadinListMixin);
+    }
+
     /** @private */
     __onScroll() {
       if (!this.opened || this.position) {
@@ -559,7 +599,8 @@ export const ContextMenuMixin = (superClass) =>
 
         if (position === 0) {
           // Native keyboard event
-          const rect = event.target.getBoundingClientRect();
+          const target = this.__getComposedPath(event)[0] || event.target;
+          const rect = target.getBoundingClientRect();
           return coord === 'x' ? rect.left : rect.top + rect.height;
         }
         // Native mouse or touch event
@@ -596,7 +637,12 @@ export const ContextMenuMixin = (superClass) =>
       });
     }
 
-    /** @private */
+    /**
+     * Mimics the native focus on mousedown: walks up the flat tree from the
+     * target and focuses the closest focusable element, including elements
+     * with `tabindex="-1"` which are focusable by mouse (e.g. grid cells).
+     * @private
+     */
     __focusClosestFocusable(target) {
       let currentElement = target;
       while (currentElement) {
@@ -604,7 +650,8 @@ export const ContextMenuMixin = (superClass) =>
           currentElement.focus();
           return;
         }
-        currentElement = currentElement.parentNode || currentElement.host;
+        // Use assignedSlot to cross shadow DOM boundaries for slotted content
+        currentElement = currentElement.assignedSlot || currentElement.parentNode || currentElement.host;
       }
     }
 
@@ -618,10 +665,8 @@ export const ContextMenuMixin = (superClass) =>
       if (target) {
         // Need to run asynchronously to avoid timing issues with the Lit-based context menu
         queueMicrotask(() => {
-          // Dispatch mousedown and mouseup to the target (grid cell focus depends on it)
-          target.dispatchEvent(this.__createMouseEvent('mousedown', x, y));
-          target.dispatchEvent(this.__createMouseEvent('mouseup', x, y));
-          // Manually try to focus the closest focusable of the target
+          // Focus the target as the native mousedown preceding a real
+          // contextmenu event would do
           this.__focusClosestFocusable(target);
           // Dispatch a contextmenu event to the target
           target.dispatchEvent(this.__createMouseEvent('contextmenu', x, y));

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

@@ -16,11 +16,12 @@ import { MenuOverlayMixin } from './vaadin-menu-overlay-mixin.js';
 /**
  * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-context-menu-overlay
  * @extends HTMLElement
  * @protected
  */
-export class ContextMenuOverlay extends MenuOverlayMixin(
+class ContextMenuOverlay extends MenuOverlayMixin(
   OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
@@ -104,3 +105,5 @@ export class ContextMenuOverlay extends MenuOverlayMixin(
 }
 
 defineCustomElement(ContextMenuOverlay);
+
+export { ContextMenuOverlay };

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

@@ -6,9 +6,9 @@
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import type { ContextMenuMixinClass } from './vaadin-context-menu-mixin.js';
-import type { ContextMenuItem } from './vaadin-contextmenu-items-mixin.js';
+import type { ContextMenuItem, ContextMenuItemData } from './vaadin-contextmenu-items-mixin.js';
 
-export { ContextMenuItem };
+export { ContextMenuItem, ContextMenuItemData };
 
 export type ContextMenuPosition =
   | 'bottom-end'
@@ -43,7 +43,7 @@ export type ContextMenuOpenedChangedEvent = CustomEvent<{ value: boolean }>;
 /**
  * Fired when an item is selected when the context menu is populated using the `items` API.
  */
-export type ContextMenuItemSelectedEvent<TItem extends ContextMenuItem = ContextMenuItem> = CustomEvent<{
+export type ContextMenuItemSelectedEvent<TItem extends ContextMenuItemData = ContextMenuItemData> = CustomEvent<{
   value: TItem;
 }>;
 
@@ -52,19 +52,25 @@ export type ContextMenuItemSelectedEvent<TItem extends ContextMenuItem = Context
  */
 export type ContextMenuClosedEvent = CustomEvent;
 
-export interface ContextMenuCustomEventMap<TItem extends ContextMenuItem = ContextMenuItem> {
+export interface ContextMenuCustomEventMap<TItem extends ContextMenuItemData = ContextMenuItemData> {
   'opened-changed': ContextMenuOpenedChangedEvent;
 
   'item-selected': ContextMenuItemSelectedEvent<TItem>;
 
+  /**
+   * @deprecated This event is deprecated and will be removed in Vaadin 26. Use `closed` instead.
+   */
   'close-all-menus': Event;
 
+  /**
+   * @deprecated This event is deprecated and will be removed in Vaadin 26. Use `closed` instead.
+   */
   'items-outside-click': Event;
 
   closed: ContextMenuClosedEvent;
 }
 
-export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenuItem>
+export interface ContextMenuEventMap<TItem extends ContextMenuItemData = ContextMenuItemData>
   extends HTMLElementEventMap, ContextMenuCustomEventMap<TItem> {}
 
 /**
@@ -134,6 +140,23 @@ export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenu
  * </vaadin-context-menu>
  * ```
  *
+ * ### Slotted list-box
+ *
+ * The content of the menu can also be populated by providing a custom
+ * `<vaadin-context-menu-list-box>` with the `overlay` slot:
+ *
+ * ```html
+ * <vaadin-context-menu>
+ *   <vaadin-context-menu-list-box slot="overlay">
+ *     <vaadin-context-menu-item>Edit</vaadin-context-menu-item>
+ *     <vaadin-context-menu-item>Delete</vaadin-context-menu-item>
+ *   </vaadin-context-menu-list-box>
+ * </vaadin-context-menu>
+ * ```
+ *
+ * **Note:** slotted list-box supports a single root-level menu only and
+ * cannot be combined with the `items` or `renderer` API.
+ *
  * ### Rendering
  *
  * The content of the menu can be populated by using the renderer callback function.
@@ -276,27 +299,20 @@ export interface ContextMenuEventMap<TItem extends ContextMenuItem = ContextMenu
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
- * ### Internal components
- *
- * 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).
+ * ### Related components
  *
- * The `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes
- * on top of the built-in `<vaadin-item>` state attributes:
+ * In addition to `<vaadin-context-menu>` itself, the following components are themable:
  *
- * Attribute  | Description
- * ---------- |-------------
- * `expanded` | Expanded parent item.
+ * - [`<vaadin-context-menu-item>`](#/elements/vaadin-context-menu-item) - an item element.
+ * - [`<vaadin-context-menu-list-box>`](#/elements/vaadin-context-menu-list-box) - a list-box element.
  *
  * @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.
- * @fires {CustomEvent} close-all-menus - Fired when all menus should close, e.g., after pressing Tab or on submenu close.
- * @fires {CustomEvent} items-outside-click - Fired when a click happens outside any open sub-menus.
+ * @fires {CustomEvent} close-all-menus - Fired when all menus should close, e.g., after pressing Tab or on submenu close. This event is deprecated and will be removed in Vaadin 26. Use `closed` instead.
+ * @fires {CustomEvent} items-outside-click - Fired when a click happens outside any open sub-menus. This event is deprecated and will be removed in Vaadin 26. Use `closed` instead.
  */
-declare class ContextMenu<TItem extends ContextMenuItem = ContextMenuItem> extends HTMLElement {
+declare class ContextMenu<TItem extends ContextMenuItemData = ContextMenuItemData> extends HTMLElement {
   /**
    * Position of the overlay with respect to the target.
    * Supported values: null, `top-start`, `top`, `top-end`,
@@ -318,7 +334,7 @@ declare class ContextMenu<TItem extends ContextMenuItem = ContextMenuItem> exten
   ): void;
 }
 
-interface ContextMenu<TItem extends ContextMenuItem = ContextMenuItem>
+interface ContextMenu<TItem extends ContextMenuItemData = ContextMenuItemData>
   extends ContextMenuMixinClass<TItem>, ElementMixinClass, ThemePropertyMixinClass {}
 
 declare global {

package/src/vaadin-context-menu.js

@@ -82,6 +82,23 @@ import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
  * </vaadin-context-menu>
  * ```
  *
+ * ### Slotted list-box
+ *
+ * The content of the menu can also be populated by providing a custom
+ * `<vaadin-context-menu-list-box>` with the `overlay` slot:
+ *
+ * ```html
+ * <vaadin-context-menu>
+ *   <vaadin-context-menu-list-box slot="overlay">
+ *     <vaadin-context-menu-item>Edit</vaadin-context-menu-item>
+ *     <vaadin-context-menu-item>Delete</vaadin-context-menu-item>
+ *   </vaadin-context-menu-list-box>
+ * </vaadin-context-menu>
+ * ```
+ *
+ * **Note:** slotted list-box supports a single root-level menu only and
+ * cannot be combined with the `items` or `renderer` API.
+ *
  * ### Rendering
  *
  * The content of the menu can be populated by using the renderer callback function.
@@ -224,26 +241,20 @@ import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
- * ### Internal components
- *
- * When using `items` API the following internal components are themable:
+ * ### Related components
  *
- * - `<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).
+ * In addition to `<vaadin-context-menu>` itself, the following components are themable:
  *
- * The `<vaadin-context-menu-item>` sub-menu elements have the following additional state attributes
- * on top of the built-in `<vaadin-item>` state attributes:
- *
- * Attribute  | Description
- * ---------- |-------------
- * `expanded` | Expanded parent item.
+ * - [`<vaadin-context-menu-item>`](#/elements/vaadin-context-menu-item) - an item element.
+ * - [`<vaadin-context-menu-list-box>`](#/elements/vaadin-context-menu-list-box) - a list-box element.
  *
  * @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.
- * @fires {CustomEvent} close-all-menus - Fired when all menus should close, e.g., after pressing Tab or on submenu close.
- * @fires {CustomEvent} items-outside-click - Fired when a click happens outside any open sub-menus.
+ * @fires {CustomEvent} close-all-menus - Fired when all menus should close, e.g., after pressing Tab or on submenu close. This event is deprecated and will be removed in Vaadin 26. Use `closed` instead.
+ * @fires {CustomEvent} items-outside-click - Fired when a click happens outside any open sub-menus. This event is deprecated and will be removed in Vaadin 26. Use `closed` instead.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-context-menu
  * @extends HTMLElement
  */
@@ -290,7 +301,7 @@ class ContextMenu extends ContextMenuMixin(ElementMixin(ThemePropertyMixin(Polyl
         .opened="${this.opened}"
         .model="${context}"
         .modeless="${this._modeless}"
-        .renderer="${this.items ? this.__itemsRenderer : this.renderer}"
+        .renderer="${this.__slottedListBox ? undefined : this.items ? this.__itemsRenderer : this.renderer}"
         .position="${position}"
         .positionTarget="${position ? context?.target : this._positionTarget}"
         .horizontalAlign="${this.__computeHorizontalAlign(position)}"
@@ -305,7 +316,7 @@ class ContextMenu extends ContextMenuMixin(ElementMixin(ThemePropertyMixin(Polyl
         @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
         @vaadin-overlay-closed="${this._onVaadinOverlayClosed}"
       >
-        <slot name="overlay"></slot>
+        <slot name="overlay" @slotchange="${this.__onOverlaySlotChange}"></slot>
         <slot name="submenu" slot="submenu"></slot>
       </vaadin-context-menu-overlay>
 
@@ -351,4 +362,5 @@ class ContextMenu extends ContextMenuMixin(ElementMixin(ThemePropertyMixin(Polyl
 }
 
 defineCustomElement(ContextMenu);
+
 export { ContextMenu };

package/src/vaadin-contextmenu-event.js

@@ -7,6 +7,11 @@ import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { isFirefox, isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { prevent, register } from '@vaadin/component-base/src/gestures.js';
 
+// A `contextmenu` caused by a selection change on touch focus (e.g. with `autoselect`) is
+// dispatched in the same input turn as the tap, measured at ~80 ms after `touchstart`. A long
+// press needs the finger held for 500 ms or more, which platform settings can shorten.
+const SELECTION_CONTEXTMENU_MAX_DELAY = 200;
+
 register({
   name: 'vaadin-contextmenu',
   deps: ['touchstart', 'touchmove', 'touchend', 'contextmenu'],
@@ -21,6 +26,10 @@ register({
     sourceEvent: null,
   },
 
+  // Deliberately not cleared in `reset()`: it runs when the `contextmenu` handling starts,
+  // which is exactly when this value is needed.
+  _touchStartTime: null,
+
   reset() {
     this.info.sourceEvent = null;
     this._cancelTimer();
@@ -49,6 +58,8 @@ register({
   touchstart(e) {
     this._setSourceEvent(e);
 
+    this._touchStartTime = performance.now();
+
     this.info.touchStartCoords = {
       x: e.changedTouches[0].clientX,
       y: e.changedTouches[0].clientY,
@@ -92,6 +103,18 @@ register({
   },
 
   contextmenu(e) {
+    // Ignore a `contextmenu` that fires too soon after `touchstart` to be a long press. On
+    // touch, changing the text selection on focus (e.g. with `autoselect`) makes the browser
+    // fire `contextmenu` as a side effect of the tap itself. Mouse and keyboard events do
+    // not follow a touch this closely in practice.
+    //
+    // Uses `performance.now()` rather than `e.timeStamp`: on Android, the `contextmenu` of a
+    // long press carries the timestamp of the touch that started it, so `e.timeStamp` would
+    // report no elapsed time and suppress every long press.
+    if (this._touchStartTime !== null && performance.now() - this._touchStartTime < SELECTION_CONTEXTMENU_MAX_DELAY) {
+      return;
+    }
+
     if (!e.shiftKey) {
       this._setSourceEvent(e);
       if (isFirefox && isKeyboardActive()) {

package/src/vaadin-contextmenu-items-mixin.d.ts

@@ -7,7 +7,7 @@ import './vaadin-context-menu-item.js';
 import './vaadin-context-menu-list-box.js';
 import type { Constructor } from '@open-wc/dedupe-mixin';
 
-export type ContextMenuItem<TItemData extends object = object> = {
+export type ContextMenuItemData<TItemData extends object = object> = {
   text?: string;
   /**
    * Text to be set as the menu item's tooltip.
@@ -28,12 +28,17 @@ export type ContextMenuItem<TItemData extends object = object> = {
   keepOpen?: boolean;
   theme?: string[] | string;
   className?: string;
-  children?: Array<ContextMenuItem<TItemData>>;
+  children?: Array<ContextMenuItemData<TItemData>>;
 } & TItemData;
 
+/**
+ * @deprecated Use `ContextMenuItemData` instead.
+ */
+export type ContextMenuItem<TItemData extends object = object> = ContextMenuItemData<TItemData>;
+
 export declare function ItemsMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ItemsMixinClass> & T;
 
-export declare class ItemsMixinClass<TItem extends ContextMenuItem = ContextMenuItem> {
+export declare class ItemsMixinClass<TItem extends ContextMenuItemData = ContextMenuItemData> {
   /**
    * Defines a (hierarchical) menu structure for the component.
    * If a menu item has a non-empty `children` set, a sub-menu with the child items is opened