@vaadin/popover 25.0.0-alpha14 → 25.0.0-alpha16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha14",
+  "version": "25.0.0-alpha16",
   "publishConfig": {
     "access": "public"
   },
@@ -36,23 +36,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha14",
-    "@vaadin/component-base": "25.0.0-alpha14",
-    "@vaadin/lit-renderer": "25.0.0-alpha14",
-    "@vaadin/overlay": "25.0.0-alpha14",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha14",
+    "@vaadin/a11y-base": "25.0.0-alpha16",
+    "@vaadin/component-base": "25.0.0-alpha16",
+    "@vaadin/lit-renderer": "25.0.0-alpha16",
+    "@vaadin/overlay": "25.0.0-alpha16",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha16",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha14",
-    "@vaadin/test-runner-commands": "25.0.0-alpha14",
+    "@vaadin/chai-plugins": "25.0.0-alpha16",
+    "@vaadin/test-runner-commands": "25.0.0-alpha16",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha14",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha16",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8ebeeeca4b5b6564eff954d6582d0d6760464e51"
+  "gitHead": "4b316158a4a4f702f032bc9940fc82f0faa840f4"
 }

package/src/lit/renderer-directives.d.ts

@@ -51,6 +51,7 @@ export class PopoverRendererDirective extends LitRendererDirective<Popover, Popo
  * @param renderer the renderer callback that returns a Lit template.
  * @param dependencies a single dependency or an array of dependencies
  *                     which trigger a re-render when changed.
+ * @deprecated Add content elements as children of the popover using default slot
  */
 export declare function popoverRenderer(
   renderer: PopoverLitRenderer,

package/src/lit/renderer-directives.js

@@ -56,5 +56,6 @@ export class PopoverRendererDirective extends LitRendererDirective {
  * @param renderer the renderer callback that returns a Lit template.
  * @param dependencies a single dependency or an array of dependencies
  *                     which trigger a re-render when changed.
+ * @deprecated Add content elements as children of the popover using default slot
  */
 export const popoverRenderer = directive(PopoverRendererDirective);

package/src/vaadin-popover-overlay.js

@@ -38,7 +38,7 @@ class PopoverOverlay extends PopoverOverlayMixin(
   render() {
     return html`
       <div id="backdrop" part="backdrop" hidden ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
+      <div part="overlay" id="overlay">
         <div part="arrow"></div>
         <div part="content" id="content"><slot></slot></div>
       </div>
@@ -69,12 +69,38 @@ class PopoverOverlay extends PopoverOverlayMixin(
   }
 
   /**
-   * @override
+   * Override method from OverlayFocusMixin to use owner as focus trap root
    * @protected
+   * @override
    */
-  get _modalRoot() {
+  get _focusTrapRoot() {
     return this.owner;
   }
+
+  /**
+   * Override method from `OverlayMixin` to always add outside
+   * click listener so that it can be used by modeless popover.
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldAddGlobalListeners() {
+    return true;
+  }
+
+  /**
+   * Override method from `OverlayMixin` to prevent closing when clicking on target.
+   * Clicking the target will already close the popover when using the click trigger.
+   *
+   * @override
+   * @protected
+   */
+  _shouldCloseOnOutsideClick(event) {
+    if (event.composedPath().includes(this.positionTarget)) {
+      return false;
+    }
+    return super._shouldCloseOnOutsideClick(event);
+  }
 }
 
 defineCustomElement(PopoverOverlay);

package/src/vaadin-popover.d.ts

@@ -109,13 +109,13 @@ declare class Popover extends PopoverPositionMixin(PopoverTargetMixin(ThemePrope
   autofocus: boolean;
 
   /**
-   * Set the height of the overlay.
+   * Set the height of the popover.
    * If a unitless number is provided, pixels are assumed.
    */
   height: string | null;
 
   /**
-   * Set the width of the overlay.
+   * Set the width of the popover.
    * If a unitless number is provided, pixels are assumed.
    */
   width: string | null;
@@ -152,12 +152,12 @@ declare class Popover extends PopoverPositionMixin(PopoverTargetMixin(ThemePrope
   hoverDelay: number;
 
   /**
-   * True if the popover overlay is opened, false otherwise.
+   * True if the popover is visible and available for interaction.
    */
   opened: boolean;
 
   /**
-   * The `role` attribute value to be set on the overlay.
+   * The `role` attribute value to be set on the popover.
    *
    * @attr {string} overlay-role
    * @deprecated Use standard `role` attribute on the popover instead
@@ -165,48 +165,47 @@ declare class Popover extends PopoverPositionMixin(PopoverTargetMixin(ThemePrope
   overlayRole: string;
 
   /**
-   * Custom function for rendering the content of the overlay.
+   * Custom function for rendering the content of the popover.
    * Receives two arguments:
    *
    * - `root` The root container DOM element. Append your content to it.
-   * - `popover` The reference to the `vaadin-popover` element (overlay host).
+   * - `popover` The reference to the `vaadin-popover` element.
+   *
+   * @deprecated Add content elements as children of the popover using default slot
    */
   renderer: PopoverRenderer | null | undefined;
 
   /**
    * When true, the popover prevents interacting with background elements
    * by setting `pointer-events` style on the document body to `none`.
-   * This also enables trapping focus inside the overlay.
+   * This also enables trapping focus inside the popover.
    */
   modal: boolean;
 
   /**
-   * Set to true to disable closing popover overlay on outside click.
+   * Set to true to disable closing popover on outside click.
    *
    * @attr {boolean} no-close-on-outside-click
    */
   noCloseOnOutsideClick: boolean;
 
   /**
-   * Set to true to disable closing popover overlay on Escape press.
-   * When the popover is modal, pressing Escape anywhere in the
-   * document closes the overlay. Otherwise, only Escape press
-   * from the popover itself or its target closes the overlay.
+   * Set to true to disable closing popover on Escape press.
    *
    * @attr {boolean} no-close-on-esc
    */
   noCloseOnEsc: boolean;
 
   /**
-   * Popover trigger mode, used to configure how the overlay is opened or closed.
+   * Popover trigger mode, used to configure how the popover is opened or closed.
    * Could be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.
    *
    * Supported values:
    * - `click` (default) - opens and closes on target click.
    * - `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse
-   * to the popover overlay content keeps the overlay opened.
+   * to the popover content keeps the popover opened.
    * - `focus` - opens on target focus, closes on target blur. Moving focus to the
-   * popover overlay content keeps the overlay opened.
+   * popover content keeps the popover opened.
    *
    * In addition to the behavior specified by `trigger`, the popover can be closed by:
    * - pressing Escape key (unless `noCloseOnEsc` property is true)
@@ -219,7 +218,7 @@ declare class Popover extends PopoverPositionMixin(PopoverTargetMixin(ThemePrope
   trigger: PopoverTrigger[] | null | undefined;
 
   /**
-   * When true, the overlay has a backdrop (modality curtain) on top of the
+   * When true, the popover has a backdrop (modality curtain) on top of the
    * underlying page content, covering the whole viewport.
    *
    * @attr {boolean} with-backdrop
@@ -231,6 +230,8 @@ declare class Popover extends PopoverPositionMixin(PopoverTargetMixin(ThemePrope
    * While performing the update, it invokes the renderer passed in the `renderer` property.
    *
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   *
+   * @deprecated Add content elements as children of the popover using default slot
    */
   requestContentUpdate(): void;
 

package/src/vaadin-popover.js

@@ -215,8 +215,21 @@ class Popover extends PopoverPositionMixin(
 
   static get styles() {
     return css`
-      :host {
-        display: contents;
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: block !important;
+        position: absolute;
+        outline: none;
+      }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      :host(:focus) ::part(overlay) {
+        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
   }
@@ -252,7 +265,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Set the height of the overlay.
+       * Set the height of the popover.
        * If a unitless number is provided, pixels are assumed.
        */
       height: {
@@ -260,7 +273,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Set the width of the overlay.
+       * Set the width of the popover.
        * If a unitless number is provided, pixels are assumed.
        */
       width: {
@@ -305,7 +318,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * True if the popover overlay is opened, false otherwise.
+       * True if the popover is visible and available for interaction.
        */
       opened: {
         type: Boolean,
@@ -325,7 +338,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * The `role` attribute value to be set on the overlay.
+       * The `role` attribute value to be set on the popover.
        *
        * @attr {string} overlay-role
        * @deprecated Use standard `role` attribute on the popover instead
@@ -335,11 +348,13 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Custom function for rendering the content of the overlay.
+       * Custom function for rendering the content of the popover.
        * Receives two arguments:
        *
        * - `root` The root container DOM element. Append your content to it.
-       * - `popover` The reference to the `vaadin-popover` element (overlay host).
+       * - `popover` The reference to the `vaadin-popover` element.
+       *
+       * @deprecated Use the content in the `vaadin-popover` via default slot
        */
       renderer: {
         type: Object,
@@ -348,7 +363,7 @@ class Popover extends PopoverPositionMixin(
       /**
        * When true, the popover prevents interacting with background elements
        * by setting `pointer-events` style on the document body to `none`.
-       * This also enables trapping focus inside the overlay.
+       * This also enables trapping focus inside the popover.
        */
       modal: {
         type: Boolean,
@@ -356,7 +371,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Set to true to disable closing popover overlay on outside click.
+       * Set to true to disable closing popover on outside click.
        *
        * @attr {boolean} no-close-on-outside-click
        */
@@ -366,10 +381,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Set to true to disable closing popover overlay on Escape press.
-       * When the popover is modal, pressing Escape anywhere in the
-       * document closes the overlay. Otherwise, only Escape press
-       * from the popover itself or its target closes the overlay.
+       * Set to true to disable closing popover on Escape press.
        *
        * @attr {boolean} no-close-on-esc
        */
@@ -379,15 +391,15 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Popover trigger mode, used to configure how the overlay is opened or closed.
+       * Popover trigger mode, used to configure how the popover is opened or closed.
        * Could be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.
        *
        * Supported values:
        * - `click` (default) - opens and closes on target click.
        * - `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse
-       * to the popover overlay content keeps the overlay opened.
+       * to the popover content keeps the popover opened.
        * - `focus` - opens on target focus, closes on target blur. Moving focus to the
-       * popover overlay content keeps the overlay opened.
+       * popover content keeps the popover opened.
        *
        * In addition to the behavior specified by `trigger`, the popover can be closed by:
        * - pressing Escape key (unless `noCloseOnEsc` property is true)
@@ -403,7 +415,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * When true, the overlay has a backdrop (modality curtain) on top of the
+       * When true, the popover has a backdrop (modality curtain) on top of the
        * underlying page content, covering the whole viewport.
        *
        * @attr {boolean} with-backdrop
@@ -461,7 +473,6 @@ class Popover extends PopoverPositionMixin(
 
     this.__generatedId = `vaadin-popover-${generateUniqueId()}`;
 
-    this.__onGlobalClick = this.__onGlobalClick.bind(this);
     this.__onGlobalKeyDown = this.__onGlobalKeyDown.bind(this);
     this.__onTargetClick = this.__onTargetClick.bind(this);
     this.__onTargetFocusIn = this.__onTargetFocusIn.bind(this);
@@ -516,6 +527,8 @@ class Popover extends PopoverPositionMixin(
    * While performing the update, it invokes the renderer passed in the `renderer` property.
    *
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   *
+   * @deprecated Add content elements as children of the popover using default slot
    */
   requestContentUpdate() {
     if (!this.renderer || !this._overlayElement) {
@@ -531,6 +544,16 @@ class Popover extends PopoverPositionMixin(
 
     this._overlayElement = this.$.overlay;
 
+    this.setAttribute('tabindex', '0');
+
+    this.addEventListener('focusin', (e) => {
+      this.__onFocusIn(e);
+    });
+
+    this.addEventListener('focusout', (e) => {
+      this.__onFocusOut(e);
+    });
+
     if (!this.hasAttribute('role')) {
       this.role = 'dialog';
     }
@@ -564,6 +587,14 @@ class Popover extends PopoverPositionMixin(
         this.removeAttribute('aria-labelledby');
       }
     }
+
+    if (props.has('modal')) {
+      if (this.modal) {
+        this.setAttribute('aria-modal', 'true');
+      } else {
+        this.removeAttribute('aria-modal');
+      }
+    }
   }
 
   /** @protected */
@@ -574,16 +605,12 @@ class Popover extends PopoverPositionMixin(
     if (!this.id) {
       this.id = this.__generatedId;
     }
-
-    document.documentElement.addEventListener('click', this.__onGlobalClick, true);
   }
 
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    document.documentElement.removeEventListener('click', this.__onGlobalClick, true);
-
     // Automatically close popover when it is removed from DOM
     // Avoid closing if the popover is just moved in the DOM
     queueMicrotask(() => {
@@ -655,23 +682,6 @@ class Popover extends PopoverPositionMixin(
     }
   }
 
-  /**
-   * Overlay's global outside click listener doesn't work when
-   * the overlay is modeless, so we use a separate listener.
-   * @private
-   */
-  __onGlobalClick(event) {
-    if (
-      this.opened &&
-      !this.modal &&
-      !event.composedPath().some((el) => el === this._overlayElement || el === this.target) &&
-      !this.noCloseOnOutsideClick &&
-      isLastOverlay(this._overlayElement)
-    ) {
-      this._openedStateController.close(true);
-    }
-  }
-
   /** @private */
   __onTargetClick() {
     if (this.__hasTrigger('click')) {
@@ -692,17 +702,11 @@ class Popover extends PopoverPositionMixin(
    * @private
    */
   __onGlobalKeyDown(event) {
-    // Modal popover uses overlay logic for Esc key and focus trap.
+    // Modal popover uses overlay logic focus trap.
     if (this.modal) {
       return;
     }
 
-    if (event.key === 'Escape' && !this.noCloseOnEsc && this.opened && isLastOverlay(this._overlayElement)) {
-      // Prevent closing parent overlay (e.g. dialog)
-      event.stopPropagation();
-      this._openedStateController.close(true);
-    }
-
     // Include popover content in the Tab order after the target.
     if (event.key === 'Tab') {
       if (event.shiftKey) {
@@ -715,20 +719,18 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onGlobalTab(event) {
-    const overlayPart = this._overlayElement.$.overlay;
-
-    // Move focus to the popover content on target element Tab
+    // Move focus to the popover on target element Tab
     if (this.target && isElementFocused(this.__getTargetFocusable())) {
       event.preventDefault();
-      overlayPart.focus();
+      this.focus();
       return;
     }
 
     // Move focus to the next element after target on content Tab
-    const lastFocusable = this.__getLastFocusable(overlayPart);
+    const lastFocusable = this.__getLastFocusable(this);
     if (lastFocusable && isElementFocused(lastFocusable)) {
       const focusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
-      if (focusable && focusable !== overlayPart) {
+      if (focusable && focusable !== this) {
         event.preventDefault();
         focusable.focus();
         return;
@@ -738,7 +740,7 @@ class Popover extends PopoverPositionMixin(
     // Prevent focusing the popover content on previous element Tab
     const activeElement = getDeepActiveElement();
     const nextFocusable = this.__getNextBodyFocusable(activeElement);
-    if (nextFocusable === overlayPart && lastFocusable) {
+    if (nextFocusable === this && lastFocusable) {
       // Move focus to the last overlay focusable and do NOT prevent keydown
       // to move focus outside the popover content (e.g. to the URL bar).
       lastFocusable.focus();
@@ -747,16 +749,14 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onGlobalShiftTab(event) {
-    const overlayPart = this._overlayElement.$.overlay;
-
     // Prevent restoring focus after target blur on Shift + Tab
     if (this.target && isElementFocused(this.__getTargetFocusable()) && this.__shouldRestoreFocus) {
       this.__shouldRestoreFocus = false;
       return;
     }
 
-    // Move focus back to the target on overlay content Shift + Tab
-    if (this.target && isElementFocused(overlayPart)) {
+    // Move focus back to the target on popover Shift + Tab
+    if (this.target && isElementFocused(this)) {
       event.preventDefault();
       this.__getTargetFocusable().focus();
       return;
@@ -765,7 +765,7 @@ class Popover extends PopoverPositionMixin(
     // Move focus back to the popover on next element Shift + Tab
     const nextFocusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
     if (nextFocusable && isElementFocused(nextFocusable)) {
-      const lastFocusable = this.__getLastFocusable(overlayPart);
+      const lastFocusable = this.__getLastFocusable(this);
       if (lastFocusable) {
         event.preventDefault();
         lastFocusable.focus();
@@ -861,7 +861,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   /** @private */
-  __onOverlayFocusIn() {
+  __onFocusIn() {
     this.__focusInside = true;
 
     // When using Tab to move focus, restoring focus is reset. However, if pressing Tab
@@ -872,7 +872,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   /** @private */
-  __onOverlayFocusOut(event) {
+  __onFocusOut(event) {
     // Do not close the popover on overlay focusout if it's not the last one.
     // This covers the following cases of nested overlay based components:
     // 1. Moving focus to the nested overlay (e.g. vaadin-select, vaadin-menu-bar)
@@ -884,7 +884,6 @@ class Popover extends PopoverPositionMixin(
     if (
       (this.__hasTrigger('focus') && this.__mouseDownInside) ||
       event.relatedTarget === this.target ||
-      event.relatedTarget === this._overlayElement ||
       this.contains(event.relatedTarget)
     ) {
       return;
@@ -973,7 +972,7 @@ class Popover extends PopoverPositionMixin(
   /** @private */
   __onOverlayOpened() {
     if (this.autofocus && !this.modal) {
-      this._overlayElement.$.overlay.focus();
+      this.focus();
     }
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha14",
+  "version": "25.0.0-alpha16",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -67,7 +67,7 @@
             },
             {
               "name": "height",
-              "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
               "value": {
                 "type": [
                   "string",
@@ -78,7 +78,7 @@
             },
             {
               "name": "width",
-              "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
               "value": {
                 "type": [
                   "string",
@@ -122,7 +122,7 @@
             },
             {
               "name": "opened",
-              "description": "True if the popover overlay is opened, false otherwise.",
+              "description": "True if the popover is visible and available for interaction.",
               "value": {
                 "type": [
                   "boolean",
@@ -144,7 +144,7 @@
             },
             {
               "name": "overlay-role",
-              "description": "The `role` attribute value to be set on the overlay.",
+              "description": "The `role` attribute value to be set on the popover.",
               "value": {
                 "type": [
                   "string",
@@ -155,7 +155,7 @@
             },
             {
               "name": "modal",
-              "description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the overlay.",
+              "description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
               "value": {
                 "type": [
                   "boolean",
@@ -166,7 +166,7 @@
             },
             {
               "name": "no-close-on-outside-click",
-              "description": "Set to true to disable closing popover overlay on outside click.",
+              "description": "Set to true to disable closing popover on outside click.",
               "value": {
                 "type": [
                   "boolean",
@@ -177,7 +177,7 @@
             },
             {
               "name": "no-close-on-esc",
-              "description": "Set to true to disable closing popover overlay on Escape press.\nWhen the popover is modal, pressing Escape anywhere in the\ndocument closes the overlay. Otherwise, only Escape press\nfrom the popover itself or its target closes the overlay.",
+              "description": "Set to true to disable closing popover on Escape press.",
               "value": {
                 "type": [
                   "boolean",
@@ -188,7 +188,7 @@
             },
             {
               "name": "with-backdrop",
-              "description": "When true, the overlay has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
+              "description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
               "value": {
                 "type": [
                   "boolean",
@@ -279,7 +279,7 @@
               },
               {
                 "name": "height",
-                "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+                "description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
                 "value": {
                   "type": [
                     "string",
@@ -290,7 +290,7 @@
               },
               {
                 "name": "width",
-                "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+                "description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
                 "value": {
                   "type": [
                     "string",
@@ -334,7 +334,7 @@
               },
               {
                 "name": "opened",
-                "description": "True if the popover overlay is opened, false otherwise.",
+                "description": "True if the popover is visible and available for interaction.",
                 "value": {
                   "type": [
                     "boolean",
@@ -356,7 +356,7 @@
               },
               {
                 "name": "overlayRole",
-                "description": "The `role` attribute value to be set on the overlay.",
+                "description": "The `role` attribute value to be set on the popover.",
                 "value": {
                   "type": [
                     "string",
@@ -367,7 +367,7 @@
               },
               {
                 "name": "renderer",
-                "description": "Custom function for rendering the content of the overlay.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element (overlay host).",
+                "description": "Custom function for rendering the content of the popover.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element.",
                 "value": {
                   "type": [
                     "Object",
@@ -378,7 +378,7 @@
               },
               {
                 "name": "modal",
-                "description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the overlay.",
+                "description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
                 "value": {
                   "type": [
                     "boolean",
@@ -389,7 +389,7 @@
               },
               {
                 "name": "noCloseOnOutsideClick",
-                "description": "Set to true to disable closing popover overlay on outside click.",
+                "description": "Set to true to disable closing popover on outside click.",
                 "value": {
                   "type": [
                     "boolean",
@@ -400,7 +400,7 @@
               },
               {
                 "name": "noCloseOnEsc",
-                "description": "Set to true to disable closing popover overlay on Escape press.\nWhen the popover is modal, pressing Escape anywhere in the\ndocument closes the overlay. Otherwise, only Escape press\nfrom the popover itself or its target closes the overlay.",
+                "description": "Set to true to disable closing popover on Escape press.",
                 "value": {
                   "type": [
                     "boolean",
@@ -411,7 +411,7 @@
               },
               {
                 "name": "trigger",
-                "description": "Popover trigger mode, used to configure how the overlay is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover overlay content keeps the overlay opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover overlay content keeps the overlay opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
+                "description": "Popover trigger mode, used to configure how the popover is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover content keeps the popover opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover content keeps the popover opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
                 "value": {
                   "type": [
                     "Array",
@@ -422,7 +422,7 @@
               },
               {
                 "name": "withBackdrop",
-                "description": "When true, the overlay has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
+                "description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
                 "value": {
                   "type": [
                     "boolean",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha14",
+  "version": "25.0.0-alpha16",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -28,35 +28,35 @@
             },
             {
               "name": "?opened",
-              "description": "True if the popover overlay is opened, false otherwise.",
+              "description": "True if the popover is visible and available for interaction.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "?modal",
-              "description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the overlay.",
+              "description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "?noCloseOnOutsideClick",
-              "description": "Set to true to disable closing popover overlay on outside click.",
+              "description": "Set to true to disable closing popover on outside click.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "?noCloseOnEsc",
-              "description": "Set to true to disable closing popover overlay on Escape press.\nWhen the popover is modal, pressing Escape anywhere in the\ndocument closes the overlay. Otherwise, only Escape press\nfrom the popover itself or its target closes the overlay.",
+              "description": "Set to true to disable closing popover on Escape press.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "?withBackdrop",
-              "description": "When true, the overlay has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
+              "description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
               "value": {
                 "kind": "expression"
               }
@@ -98,14 +98,14 @@
             },
             {
               "name": ".height",
-              "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".width",
-              "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
               "value": {
                 "kind": "expression"
               }
@@ -140,21 +140,21 @@
             },
             {
               "name": ".overlayRole",
-              "description": "The `role` attribute value to be set on the overlay.",
+              "description": "The `role` attribute value to be set on the popover.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".renderer",
-              "description": "Custom function for rendering the content of the overlay.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element (overlay host).",
+              "description": "Custom function for rendering the content of the popover.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".trigger",
-              "description": "Popover trigger mode, used to configure how the overlay is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover overlay content keeps the overlay opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover overlay content keeps the overlay opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
+              "description": "Popover trigger mode, used to configure how the popover is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover content keeps the popover opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover content keeps the popover opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
               "value": {
                 "kind": "expression"
               }