@vaadin/popover 24.5.0-alpha7 → 24.5.0-alpha9

package/README.md

@@ -43,7 +43,7 @@ import '@vaadin/popover/src/vaadin-popover.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/popover",
-  "version": "24.5.0-alpha7",
+  "version": "24.5.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -37,23 +37,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "24.5.0-alpha7",
-    "@vaadin/component-base": "24.5.0-alpha7",
-    "@vaadin/lit-renderer": "24.5.0-alpha7",
-    "@vaadin/overlay": "24.5.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha7",
-    "@vaadin/vaadin-material-styles": "24.5.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha7",
+    "@vaadin/a11y-base": "24.5.0-alpha9",
+    "@vaadin/component-base": "24.5.0-alpha9",
+    "@vaadin/lit-renderer": "24.5.0-alpha9",
+    "@vaadin/overlay": "24.5.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha9",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
-    "sinon": "^13.0.2"
+    "@vaadin/chai-plugins": "24.5.0-alpha9",
+    "@vaadin/testing-helpers": "^1.0.0",
+    "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "89f77a69ae0eba6247f2b3084941f9395d7134e1"
+  "gitHead": "804744762f3bec0a2247c4bbcbbb204dbcd78bc0"
 }

package/src/vaadin-popover-overlay.js

@@ -60,10 +60,8 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
         [part='overlay']::before {
           position: absolute;
           content: '';
-          top: calc(var(--vaadin-popover-offset-top, 0) * -1);
-          bottom: calc(var(--vaadin-popover-offset-bottom, 0) * -1);
-          inset-inline-start: calc(var(--vaadin-popover-offset-start, 0) * -1);
-          inset-inline-end: calc(var(--vaadin-popover-offset-end, 0) * -1);
+          inset-block: calc(var(--vaadin-popover-offset-top, 0) * -1) calc(var(--vaadin-popover-offset-bottom, 0) * -1);
+          inset-inline: calc(var(--vaadin-popover-offset-start, 0) * -1) calc(var(--vaadin-popover-offset-end, 0) * -1);
           z-index: -1;
           pointer-events: auto;
         }

package/src/vaadin-popover.d.ts

@@ -77,6 +77,24 @@ export type PopoverEventMap = HTMLElementEventMap & PopoverCustomEventMap;
 declare class Popover extends PopoverPositionMixin(
   PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement)))),
 ) {
+  /**
+   * Sets the default focus delay to be used by all popover instances,
+   * except for those that have focus delay configured using property.
+   */
+  static setDefaultFocusDelay(focusDelay: number): void;
+
+  /**
+   * Sets the default hide delay to be used by all popover instances,
+   * except for those that have hide delay configured using property.
+   */
+  static setDefaultHideDelay(hideDelay: number): void;
+
+  /**
+   * Sets the default hover delay to be used by all popover instances,
+   * except for those that have hover delay configured using property.
+   */
+  static setDefaultHoverDelay(delay: number): void;
+
   /**
    * String used to label the overlay to screen reader users.
    *
@@ -114,6 +132,9 @@ declare class Popover extends PopoverPositionMixin(
   /**
    * The delay in milliseconds before the popover is opened
    * on focus when the corresponding trigger is used.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} focus-delay
    */
   focusDelay: number;
@@ -122,6 +143,9 @@ declare class Popover extends PopoverPositionMixin(
    * The delay in milliseconds before the popover is closed
    * on losing hover, when the corresponding trigger is used.
    * On blur, the popover is closed immediately.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} hide-delay
    */
   hideDelay: number;
@@ -129,6 +153,9 @@ declare class Popover extends PopoverPositionMixin(
   /**
    * The delay in milliseconds before the popover is opened
    * on hover when the corresponding trigger is used.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} hover-delay
    */
   hoverDelay: number;

package/src/vaadin-popover.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-popover-overlay.js';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import {
   getDeepActiveElement,
@@ -22,6 +22,12 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
 import { PopoverPositionMixin } from './vaadin-popover-position-mixin.js';
 import { PopoverTargetMixin } from './vaadin-popover-target-mixin.js';
 
+const DEFAULT_DELAY = 500;
+
+let defaultFocusDelay = DEFAULT_DELAY;
+let defaultHoverDelay = DEFAULT_DELAY;
+let defaultHideDelay = DEFAULT_DELAY;
+
 /**
  * Controller for handling popover opened state.
  */
@@ -40,17 +46,20 @@ class PopoverOpenedStateController {
 
   /** @private */
   get __focusDelay() {
-    return this.host.focusDelay || 0;
+    const popover = this.host;
+    return popover.focusDelay != null && popover.focusDelay > 0 ? popover.focusDelay : defaultFocusDelay;
   }
 
   /** @private */
   get __hoverDelay() {
-    return this.host.hoverDelay || 0;
+    const popover = this.host;
+    return popover.hoverDelay != null && popover.hoverDelay > 0 ? popover.hoverDelay : defaultHoverDelay;
   }
 
   /** @private */
   get __hideDelay() {
-    return this.host.hideDelay || 0;
+    const popover = this.host;
+    return popover.hideDelay != null && popover.hideDelay > 0 ? popover.hideDelay : defaultHideDelay;
   }
 
   /**
@@ -178,7 +187,7 @@ class PopoverOpenedStateController {
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
- * @mixes ElementMixin
+ * @mixes OverlayClassMixin
  * @mixes PopoverPositionMixin
  * @mixes PopoverTargetMixin
  * @mixes ThemePropertyMixin
@@ -190,6 +199,14 @@ class Popover extends PopoverPositionMixin(
     return 'vaadin-popover';
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: none !important;
+      }
+    `;
+  }
+
   static get properties() {
     return {
       /**
@@ -239,6 +256,9 @@ class Popover extends PopoverPositionMixin(
       /**
        * The delay in milliseconds before the popover is opened
        * on focus when the corresponding trigger is used.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} focus-delay
        */
       focusDelay: {
@@ -249,6 +269,9 @@ class Popover extends PopoverPositionMixin(
        * The delay in milliseconds before the popover is closed
        * on losing hover, when the corresponding trigger is used.
        * On blur, the popover is closed immediately.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} hide-delay
        */
       hideDelay: {
@@ -258,6 +281,9 @@ class Popover extends PopoverPositionMixin(
       /**
        * The delay in milliseconds before the popover is opened
        * on hover when the corresponding trigger is used.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} hover-delay
        */
       hoverDelay: {
@@ -385,6 +411,36 @@ class Popover extends PopoverPositionMixin(
     ];
   }
 
+  /**
+   * Sets the default focus delay to be used by all popover instances,
+   * except for those that have focus delay configured using property.
+   *
+   * @param {number} delay
+   */
+  static setDefaultFocusDelay(focusDelay) {
+    defaultFocusDelay = focusDelay != null && focusDelay >= 0 ? focusDelay : DEFAULT_DELAY;
+  }
+
+  /**
+   * Sets the default hide delay to be used by all popover instances,
+   * except for those that have hide delay configured using property.
+   *
+   * @param {number} hideDelay
+   */
+  static setDefaultHideDelay(hideDelay) {
+    defaultHideDelay = hideDelay != null && hideDelay >= 0 ? hideDelay : DEFAULT_DELAY;
+  }
+
+  /**
+   * Sets the default hover delay to be used by all popover instances,
+   * except for those that have hover delay configured using property.
+   *
+   * @param {number} delay
+   */
+  static setDefaultHoverDelay(hoverDelay) {
+    defaultHoverDelay = hoverDelay != null && hoverDelay >= 0 ? hoverDelay : DEFAULT_DELAY;
+  }
+
   constructor() {
     super();
 
@@ -424,6 +480,7 @@ class Popover extends PopoverPositionMixin(
         ?no-vertical-overlap="${this.__computeNoVerticalOverlap(effectivePosition)}"
         .horizontalAlign="${this.__computeHorizontalAlign(effectivePosition)}"
         .verticalAlign="${this.__computeVerticalAlign(effectivePosition)}"
+        @mousedown="${this.__onOverlayMouseDown}"
         @mouseenter="${this.__onOverlayMouseEnter}"
         @mouseleave="${this.__onOverlayMouseLeave}"
         @focusin="${this.__onOverlayFocusIn}"
@@ -639,6 +696,12 @@ class Popover extends PopoverPositionMixin(
   __onGlobalShiftTab(event) {
     const overlayPart = this._overlayElement.$.overlay;
 
+    // Prevent restoring focus after target blur on Shift + Tab
+    if (this.target && isElementFocused(this.target) && this.__shouldRestoreFocus) {
+      this.__shouldRestoreFocus = false;
+      return;
+    }
+
     // Move focus back to the target on overlay content Shift + Tab
     if (this.target && isElementFocused(overlayPart)) {
       event.preventDefault();
@@ -692,7 +755,14 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onTargetFocusOut(event) {
-    if (this._overlayElement.contains(event.relatedTarget)) {
+    // Do not close the popover on overlay focusout if it's not the last one.
+    // This covers the case when focus moves to the nested popover opened
+    // without focusing parent popover overlay (e.g. using hover trigger).
+    if (!isLastOverlay(this._overlayElement)) {
+      return;
+    }
+
+    if ((this.__hasTrigger('focus') && this.__mouseDownInside) || this._overlayElement.contains(event.relatedTarget)) {
       return;
     }
 
@@ -714,6 +784,12 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onTargetMouseLeave(event) {
+    // Do not close the popover on target focusout if the overlay is not the last one.
+    // This happens e.g. when opening the nested popover that uses non-modal overlay.
+    if (!isLastOverlay(this._overlayElement)) {
+      return;
+    }
+
     if (this._overlayElement.contains(event.relatedTarget)) {
       return;
     }
@@ -734,13 +810,40 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onOverlayFocusOut(event) {
-    if (event.relatedTarget === this.target || this._overlayElement.contains(event.relatedTarget)) {
+    // 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)
+    // 2. Closing not focused nested overlay on outside (e.g. vaadin-combo-box)
+    if (!isLastOverlay(this._overlayElement)) {
+      return;
+    }
+
+    if (
+      (this.__hasTrigger('focus') && this.__mouseDownInside) ||
+      event.relatedTarget === this.target ||
+      this._overlayElement.contains(event.relatedTarget)
+    ) {
       return;
     }
 
     this.__handleFocusout();
   }
 
+  /** @private */
+  __onOverlayMouseDown() {
+    if (this.__hasTrigger('focus')) {
+      this.__mouseDownInside = true;
+
+      document.addEventListener(
+        'mouseup',
+        () => {
+          this.__mouseDownInside = false;
+        },
+        { once: true },
+      );
+    }
+  }
+
   /** @private */
   __onOverlayMouseEnter() {
     this.__hoverInside = true;
@@ -753,6 +856,13 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onOverlayMouseLeave(event) {
+    // Do not close the popover on overlay focusout if it's not the last one.
+    // This happens when opening the nested component that uses "modal" overlay
+    // setting `pointer-events: none` on the body (combo-box, date-picker etc).
+    if (!isLastOverlay(this._overlayElement)) {
+      return;
+    }
+
     if (event.relatedTarget === this.target) {
       return;
     }

package/theme/lumo/vaadin-popover-styles.js

@@ -15,10 +15,18 @@ const popoverOverlay = css`
     --_vaadin-popover-default-offset: var(--lumo-space-xs);
   }
 
+  [part='overlay'] {
+    outline: none;
+  }
+
   [part='content'] {
     padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
 
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0;
+  }
+
   :host([theme~='arrow']) {
     --_vaadin-popover-default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
   }

package/theme/material/vaadin-popover-styles.js

@@ -12,10 +12,18 @@ const popoverOverlay = css`
     --_vaadin-popover-default-offset: 0.25rem;
   }
 
+  [part='overlay'] {
+    outline: none;
+  }
+
   [part='content'] {
     padding: 0.25rem 0.5rem;
   }
 
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0;
+  }
+
   :host([theme~='arrow']) {
     --_vaadin-popover-default-offset: calc(0.25rem + var(--vaadin-popover-arrow-size) / 1.25);
   }

package/web-types.json

@@ -1,15 +1,26 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "24.5.0-alpha7",
+  "version": "24.5.0-alpha9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-popover",
-          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha7/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha9/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "position",
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
@@ -89,7 +100,7 @@
             },
             {
               "name": "focus-delay",
-              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "type": [
                   "number",
@@ -100,7 +111,7 @@
             },
             {
               "name": "hide-delay",
-              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "type": [
                   "number",
@@ -111,7 +122,7 @@
             },
             {
               "name": "hover-delay",
-              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "type": [
                   "number",
@@ -200,6 +211,17 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "position",
                 "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
@@ -290,7 +312,7 @@
               },
               {
                 "name": "focusDelay",
-                "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+                "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
                   "type": [
                     "number",
@@ -301,7 +323,7 @@
               },
               {
                 "name": "hideDelay",
-                "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+                "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
                   "type": [
                     "number",
@@ -312,7 +334,7 @@
               },
               {
                 "name": "hoverDelay",
-                "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+                "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
                   "type": [
                     "number",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "24.5.0-alpha7",
+  "version": "24.5.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-popover",
-          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha7/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha9/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -61,6 +61,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".position",
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
@@ -112,21 +119,21 @@
             },
             {
               "name": ".focusDelay",
-              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".hideDelay",
-              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".hoverDelay",
-              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
                 "kind": "expression"
               }