@vaadin/context-menu 24.3.0-beta1 → 24.3.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "24.3.0-beta1",
+  "version": "24.3.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -27,7 +27,9 @@
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
-    "web-types.lit.json"
+    "web-types.lit.json",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js"
   ],
   "keywords": [
     "Vaadin",
@@ -39,15 +41,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.3.0-beta1",
-    "@vaadin/component-base": "24.3.0-beta1",
-    "@vaadin/item": "24.3.0-beta1",
-    "@vaadin/list-box": "24.3.0-beta1",
-    "@vaadin/lit-renderer": "24.3.0-beta1",
-    "@vaadin/overlay": "24.3.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-beta1",
-    "@vaadin/vaadin-material-styles": "24.3.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-beta1"
+    "@vaadin/a11y-base": "24.3.0-rc1",
+    "@vaadin/component-base": "24.3.0-rc1",
+    "@vaadin/item": "24.3.0-rc1",
+    "@vaadin/list-box": "24.3.0-rc1",
+    "@vaadin/lit-renderer": "24.3.0-rc1",
+    "@vaadin/overlay": "24.3.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.3.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -59,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a197041861e1bbf8d3e966d893648f5dd462b036"
+  "gitHead": "54430cfc0f52bb6fc17b0fc325b0d62e0e49c700"
 }

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

@@ -43,6 +43,7 @@ export const ContextMenuMixin = (superClass) =>
         openOn: {
           type: String,
           value: 'vaadin-contextmenu',
+          sync: true,
         },
 
         /**
@@ -54,6 +55,7 @@ export const ContextMenuMixin = (superClass) =>
          */
         listenOn: {
           type: Object,
+          sync: true,
           value() {
             return this;
           },
@@ -68,6 +70,7 @@ export const ContextMenuMixin = (superClass) =>
           type: String,
           value: 'click',
           observer: '_closeOnChanged',
+          sync: true,
         },
 
         /**
@@ -83,6 +86,7 @@ export const ContextMenuMixin = (superClass) =>
          */
         renderer: {
           type: Function,
+          sync: true,
         },
 
         /**
@@ -91,10 +95,14 @@ export const ContextMenuMixin = (superClass) =>
          */
         _modeless: {
           type: Boolean,
+          sync: true,
         },
 
         /** @private */
-        _context: Object,
+        _context: {
+          type: Object,
+          sync: true,
+        },
 
         /** @private */
         _phone: {
@@ -126,11 +134,18 @@ export const ContextMenuMixin = (superClass) =>
         '_targetOrOpenOnChanged(listenOn, openOn)',
         '_rendererChanged(renderer, items)',
         '_touchOrWideChanged(_touch, _wide)',
+        '_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);
@@ -165,9 +180,6 @@ export const ContextMenuMixin = (superClass) =>
     ready() {
       super.ready();
 
-      this._overlayElement = this.$.overlay;
-      this._overlayElement.owner = this;
-
       this.addController(
         new MediaQueryController(this._wideMediaQuery, (matches) => {
           this._wide = matches;
@@ -175,6 +187,23 @@ 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
@@ -190,10 +219,43 @@ export const ContextMenuMixin = (superClass) =>
      */
     _onVaadinOverlayOpen() {
       this.__alignOverlayPosition();
-      this.$.overlay.style.opacity = '';
+      this._overlayElement.style.opacity = '';
       this.__forwardFocus();
     }
 
+    /** @private */
+    _overlayContextChanged(overlay, context) {
+      if (overlay) {
+        overlay.model = context;
+      }
+    }
+
+    /** @private */
+    _overlayModelessChanged(overlay, modeless) {
+      if (overlay) {
+        overlay.modeless = modeless;
+      }
+    }
+
+    /** @private */
+    _overlayPhoneChanged(overlay, phone) {
+      if (overlay) {
+        overlay.toggleAttribute('phone', phone);
+        overlay.withBackdrop = phone;
+      }
+    }
+
+    /** @private */
+    _overlayThemeChanged(overlay, theme) {
+      if (overlay) {
+        if (theme) {
+          overlay.setAttribute('theme', theme);
+        } else {
+          overlay.removeAttribute('theme');
+        }
+      }
+    }
+
     /** @private */
     _targetOrOpenOnChanged(listenOn, openOn) {
       if (this._oldListenOn && this._oldOpenOn) {
@@ -238,7 +300,7 @@ export const ContextMenuMixin = (superClass) =>
       // Outside click event from overlay
       const evtOverlay = 'vaadin-overlay-outside-click';
 
-      const overlay = this.$.overlay;
+      const overlay = this._overlayElement;
 
       if (oldCloseOn) {
         this._unlisten(overlay, oldCloseOn, this._boundClose);
@@ -267,7 +329,7 @@ export const ContextMenuMixin = (superClass) =>
       }
 
       // Has to be set after instance has been created
-      this.$.overlay.opened = opened;
+      this._overlayElement.opened = opened;
     }
 
     /**
@@ -298,7 +360,7 @@ export const ContextMenuMixin = (superClass) =>
         renderer = this.__itemsRenderer;
       }
 
-      this.$.overlay.renderer = renderer;
+      this._overlayElement.renderer = renderer;
     }
 
     /**
@@ -342,7 +404,7 @@ export const ContextMenuMixin = (superClass) =>
           this.__y = this._getEventCoordinate(e, 'y');
           this.__pageYOffset = window.pageYOffset;
 
-          this.$.overlay.style.opacity = '0';
+          this._overlayElement.style.opacity = '0';
           this._setOpened(true);
         }
       }
@@ -369,7 +431,7 @@ export const ContextMenuMixin = (superClass) =>
 
     /** @private */
     __adjustPosition(coord, diff) {
-      const overlay = this.$.overlay;
+      const overlay = this._overlayElement;
       const style = overlay.style;
 
       style[coord] = `${(parseInt(style[coord]) || 0) + diff}px`;
@@ -377,7 +439,7 @@ export const ContextMenuMixin = (superClass) =>
 
     /** @private */
     __alignOverlayPosition() {
-      const overlay = this.$.overlay;
+      const overlay = this._overlayElement;
 
       if (overlay.positionTarget) {
         // The overlay is positioned relative to another node, for example, a

package/src/vaadin-context-menu.js

@@ -222,17 +222,6 @@ class ContextMenu extends ContextMenuMixin(
       </style>
 
       <slot id="slot"></slot>
-
-      <vaadin-context-menu-overlay
-        id="overlay"
-        on-opened-changed="_onOverlayOpened"
-        on-vaadin-overlay-open="_onVaadinOverlayOpen"
-        modeless="[[_modeless]]"
-        with-backdrop="[[_phone]]"
-        phone$="[[_phone]]"
-        model="[[_context]]"
-        theme$="[[_theme]]"
-      ></vaadin-context-menu-overlay>
     `;
   }
 
@@ -247,6 +236,19 @@ class ContextMenu extends ContextMenuMixin(
     processTemplates(this);
   }
 
+  /**
+   * @param {DocumentFragment} dom
+   * @return {null}
+   * @protected
+   * @override
+   */
+  _attachDom(dom) {
+    const root = this.attachShadow({ mode: 'open' });
+    root.appendChild(dom);
+    root.appendChild(this._overlayElement);
+    return root;
+  }
+
   /**
    * Fired when an item is selected when the context menu is populated using the `items` API.
    *

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

@@ -66,7 +66,10 @@ export const ItemsMixin = (superClass) =>
          * ----------------|----------------|----------------
          * `:host` | expanded | Expanded parent item
          */
-        items: Array,
+        items: {
+          type: Array,
+          sync: true,
+        },
       };
     }
 
@@ -110,7 +113,7 @@ export const ItemsMixin = (superClass) =>
 
     /** @protected */
     __forwardFocus() {
-      const overlay = this.$.overlay;
+      const overlay = this._overlayElement;
       const child = overlay.getFirstChild();
       // If parent item is not focused, do not focus submenu
       if (overlay.parentOverlay) {
@@ -131,9 +134,9 @@ export const ItemsMixin = (superClass) =>
       subMenu.listenOn = itemElement;
       subMenu.overlayClass = overlayClass;
 
-      const parent = this.$.overlay;
+      const parent = this._overlayElement;
 
-      const subMenuOverlay = subMenu.$.overlay;
+      const subMenuOverlay = subMenu._overlayElement;
       subMenuOverlay.positionTarget = itemElement;
       subMenuOverlay.noHorizontalOverlap = true;
       // Store the reference parent overlay
@@ -146,7 +149,7 @@ export const ItemsMixin = (superClass) =>
         subMenu.removeAttribute('theme');
       }
 
-      const content = subMenu.$.overlay.$.content;
+      const content = subMenuOverlay.$.content;
       content.style.minWidth = '';
 
       itemElement.dispatchEvent(
@@ -233,7 +236,7 @@ export const ItemsMixin = (superClass) =>
 
     /** @private */
     __initOverlay() {
-      const overlay = this.$.overlay;
+      const overlay = this._overlayElement;
 
       overlay.$.backdrop.addEventListener('click', () => {
         this.close();
@@ -300,7 +303,9 @@ export const ItemsMixin = (superClass) =>
 
       // Listen to the forwarded event from sub-menu.
       this.addEventListener('close-all-menus', () => {
-        this.close();
+        // Call `close()` on the overlay to close synchronously,
+        // as we can't have `sync: true` on `opened` property.
+        this._overlayElement.close();
       });
 
       // Listen to the forwarded event from sub-menu.
@@ -342,7 +347,7 @@ export const ItemsMixin = (superClass) =>
       }
 
       // Don't open sub-menus while the menu is still opening
-      if (this.$.overlay.hasAttribute('opening')) {
+      if (this._overlayElement.hasAttribute('opening')) {
         requestAnimationFrame(() => {
           this.__showSubMenu(event, item);
         });

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

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 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 { 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ItemMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class ContextMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-context-menu-item';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('role', 'menuitem');
+  }
+}
+
+defineCustomElement(ContextMenuItem);
+
+export { ContextMenuItem };

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

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 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 { 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ListMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class ContextMenuListBox extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(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;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      // We don't need to define this property since super default is vertical,
+      // but we don't want it to be modified, or be shown in the API docs.
+      /** @private */
+      orientation: {
+        type: String,
+        readOnly: true,
+      },
+    };
+  }
+
+  /**
+   * @return {!HTMLElement}
+   * @protected
+   * @override
+   */
+  get _scrollerElement() {
+    return this.shadowRoot.querySelector('[part="items"]');
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="items">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('role', 'menu');
+  }
+}
+
+defineCustomElement(ContextMenuListBox);
+
+export { ContextMenuListBox };

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

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+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 { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.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.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes MenuOverlayMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+export class ContextMenuOverlay extends MenuOverlayMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
+  static get is() {
+    return 'vaadin-context-menu-overlay';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * When true, the overlay is visible and attached to body.
+       * This property config is overridden to set `sync: true`.
+       */
+      opened: {
+        type: Boolean,
+        notify: true,
+        observer: '_openedChanged',
+        reflectToAttribute: true,
+        sync: true,
+      },
+    };
+  }
+
+  static get styles() {
+    return [overlayStyles, styles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
+      <div part="overlay" id="overlay" tabindex="0">
+        <div part="content" id="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(ContextMenuOverlay);

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

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-contextmenu-event.js';
+import './vaadin-lit-context-menu-item.js';
+import './vaadin-lit-context-menu-list-box.js';
+import './vaadin-lit-context-menu-overlay.js';
+import { css, html, LitElement } from 'lit';
+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';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { processTemplates } from '@vaadin/component-base/src/templates.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-context-menu>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class ContextMenu extends ContextMenuMixin(
+  OverlayClassMixin(ElementMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
+) {
+  static get is() {
+    return 'vaadin-context-menu';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot id="slot"></slot>`;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    processTemplates(this);
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  createRenderRoot() {
+    const root = super.createRenderRoot();
+    root.appendChild(this._overlayElement);
+    return root;
+  }
+
+  /**
+   * Fired when an item is selected when the context menu is populated using the `items` API.
+   *
+   * @event item-selected
+   * @param {Object} detail
+   * @param {Object} detail.value the selected menu item
+   */
+}
+
+defineCustomElement(ContextMenu);
+export { ContextMenu };

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

@@ -21,6 +21,15 @@ export const MenuOverlayMixin = (superClass) =>
           type: Object,
           readOnly: true,
         },
+
+        /**
+         * @protected
+         */
+        _theme: {
+          type: String,
+          readOnly: true,
+          sync: true,
+        },
       };
     }
 

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

@@ -0,0 +1,4 @@
+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-lit-context-menu.js';

package/theme/material/vaadin-lit-context-menu.js

@@ -0,0 +1,4 @@
+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-lit-context-menu.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/context-menu",
-  "version": "24.3.0-beta1",
+  "version": "24.3.0-rc1",
   "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/24.3.0-beta1/#/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/24.3.0-beta1/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta1/#/elements/vaadin-list-box).\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\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/24.3.0-rc1/#/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/24.3.0-rc1/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-list-box).\n\nNote: the `theme` attribute value set on `<vaadin-context-menu>` is\npropagated to the internal components listed above.",
           "attributes": [
             {
               "name": "selector",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/context-menu",
-  "version": "24.3.0-beta1",
+  "version": "24.3.0-rc1",
   "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/24.3.0-beta1/#/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/24.3.0-beta1/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-beta1/#/elements/vaadin-list-box).\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\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/24.3.0-rc1/#/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/24.3.0-rc1/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-rc1/#/elements/vaadin-list-box).\n\nNote: the `theme` attribute value set on `<vaadin-context-menu>` is\npropagated to the internal components listed above.",
           "extension": true,
           "attributes": [
             {