@vaadin/popover 24.5.0-alpha1 → 24.5.0-alpha11

package/src/vaadin-popover.js

@@ -4,18 +4,30 @@
  * 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 { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
+import {
+  getDeepActiveElement,
+  getFocusableElements,
+  isElementFocused,
+  isKeyboardActive,
+} from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { isLastOverlay } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 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.
  */
@@ -34,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;
   }
 
   /**
@@ -130,12 +145,49 @@ class PopoverOpenedStateController {
  * Unlike `<vaadin-tooltip>`, the popover supports rich content
  * that can be provided by using `renderer` function.
  *
+ * ### Styling
+ *
+ * `<vaadin-popover>` uses `<vaadin-popover-overlay>` internal
+ * themable component as the actual visible overlay.
+ *
+ * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
+ * for `<vaadin-popover-overlay>` parts.
+ *
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `arrow`          | Optional arrow pointing to the target when using `theme="arrow"`
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute        | Description
+ * -----------------|----------------------------------------
+ * `position`       | Reflects the `position` property value.
+ *
+ * Note: the `theme` attribute value set on `<vaadin-popover>` is
+ * propagated to the internal `<vaadin-popover-overlay>` component.
+ *
+ * ### Custom CSS Properties
+ *
+ * The following custom CSS properties are available on the `<vaadin-popover>` element:
+ *
+ * Custom CSS property              | Description
+ * ---------------------------------|-------------
+ * `--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target
+ * `--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target
+ * `--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target
+ * `--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} closed - Fired when the popover is closed.
  *
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
- * @mixes ElementMixin
+ * @mixes OverlayClassMixin
  * @mixes PopoverPositionMixin
  * @mixes PopoverTargetMixin
  * @mixes ThemePropertyMixin
@@ -147,6 +199,14 @@ class Popover extends PopoverPositionMixin(
     return 'vaadin-popover';
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: none !important;
+      }
+    `;
+  }
+
   static get properties() {
     return {
       /**
@@ -167,6 +227,14 @@ class Popover extends PopoverPositionMixin(
         type: String,
       },
 
+      /**
+       * When true, the popover content automatically receives focus after
+       * it is opened. Modal popovers use this behavior by default.
+       */
+      autofocus: {
+        type: Boolean,
+      },
+
       /**
        * Height to be set on the overlay content.
        *
@@ -188,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: {
@@ -198,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: {
@@ -207,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: {
@@ -334,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();
 
@@ -342,7 +449,6 @@ class Popover extends PopoverPositionMixin(
     this.__onGlobalClick = this.__onGlobalClick.bind(this);
     this.__onGlobalKeyDown = this.__onGlobalKeyDown.bind(this);
     this.__onTargetClick = this.__onTargetClick.bind(this);
-    this.__onTargetKeydown = this.__onTargetKeydown.bind(this);
     this.__onTargetFocusIn = this.__onTargetFocusIn.bind(this);
     this.__onTargetFocusOut = this.__onTargetFocusOut.bind(this);
     this.__onTargetMouseEnter = this.__onTargetMouseEnter.bind(this);
@@ -374,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}"
@@ -383,6 +490,7 @@ class Popover extends PopoverPositionMixin(
         .restoreFocusNode="${this.target}"
         @vaadin-overlay-escape-press="${this.__onEscapePress}"
         @vaadin-overlay-outside-click="${this.__onOutsideClick}"
+        @vaadin-overlay-open="${this.__onOverlayOpened}"
         @vaadin-overlay-closed="${this.__onOverlayClosed}"
       ></vaadin-popover-overlay>
     `;
@@ -413,14 +521,14 @@ class Popover extends PopoverPositionMixin(
   connectedCallback() {
     super.connectedCallback();
 
-    document.addEventListener('click', this.__onGlobalClick, true);
+    document.documentElement.addEventListener('click', this.__onGlobalClick, true);
   }
 
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    document.removeEventListener('click', this.__onGlobalClick, true);
+    document.documentElement.removeEventListener('click', this.__onGlobalClick, true);
 
     this._openedStateController.close(true);
   }
@@ -432,7 +540,6 @@ class Popover extends PopoverPositionMixin(
    */
   _addTargetListeners(target) {
     target.addEventListener('click', this.__onTargetClick);
-    target.addEventListener('keydown', this.__onTargetKeydown);
     target.addEventListener('mouseenter', this.__onTargetMouseEnter);
     target.addEventListener('mouseleave', this.__onTargetMouseLeave);
     target.addEventListener('focusin', this.__onTargetFocusIn);
@@ -446,7 +553,6 @@ class Popover extends PopoverPositionMixin(
    */
   _removeTargetListeners(target) {
     target.removeEventListener('click', this.__onTargetClick);
-    target.removeEventListener('keydown', this.__onTargetKeydown);
     target.removeEventListener('mouseenter', this.__onTargetMouseEnter);
     target.removeEventListener('mouseleave', this.__onTargetMouseLeave);
     target.removeEventListener('focusin', this.__onTargetFocusIn);
@@ -500,7 +606,8 @@ class Popover extends PopoverPositionMixin(
       !this.__isManual &&
       !this.modal &&
       !event.composedPath().some((el) => el === this._overlayElement || el === this.target) &&
-      !this.noCloseOnOutsideClick
+      !this.noCloseOnOutsideClick &&
+      isLastOverlay(this._overlayElement)
     ) {
       this._openedStateController.close(true);
     }
@@ -526,19 +633,104 @@ class Popover extends PopoverPositionMixin(
    * @private
    */
   __onGlobalKeyDown(event) {
-    if (event.key === 'Escape' && !this.modal && !this.noCloseOnEsc && this.opened && !this.__isManual) {
+    // Modal popover uses overlay logic for Esc key and focus trap.
+    if (this.modal) {
+      return;
+    }
+
+    if (
+      event.key === 'Escape' &&
+      !this.noCloseOnEsc &&
+      this.opened &&
+      !this.__isManual &&
+      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) {
+        this.__onGlobalShiftTab(event);
+      } else {
+        this.__onGlobalTab(event);
+      }
+    }
   }
 
   /** @private */
-  __onTargetKeydown(event) {
-    // Prevent restoring focus after target blur on Tab key
-    if (event.key === 'Tab' && this.__shouldRestoreFocus) {
+  __onGlobalTab(event) {
+    const overlayPart = this._overlayElement.$.overlay;
+
+    // Move focus to the popover content on target element Tab
+    if (this.target && isElementFocused(this.target)) {
+      event.preventDefault();
+      overlayPart.focus();
+      return;
+    }
+
+    // Move focus to the next element after target on content Tab
+    const lastFocusable = this.__getLastFocusable(overlayPart);
+    if (lastFocusable && isElementFocused(lastFocusable)) {
+      const focusable = this.__getNextBodyFocusable(this.target);
+      if (focusable && focusable !== overlayPart) {
+        event.preventDefault();
+        focusable.focus();
+        return;
+      }
+    }
+
+    // Prevent focusing the popover content on previous element Tab
+    const activeElement = getDeepActiveElement();
+    const nextFocusable = this.__getNextBodyFocusable(activeElement);
+    if (nextFocusable === overlayPart && 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();
+    }
+  }
+
+  /** @private */
+  __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();
+      this.target.focus();
+      return;
+    }
+
+    // Move focus back to the popover on next element Shift + Tab
+    const nextFocusable = this.__getNextBodyFocusable(this.target);
+    if (nextFocusable && isElementFocused(nextFocusable)) {
+      const lastFocusable = this.__getLastFocusable(overlayPart);
+      if (lastFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      }
+    }
+  }
+
+  /** @private */
+  __getNextBodyFocusable(target) {
+    const focusables = getFocusableElements(document.body);
+    const idx = focusables.findIndex((el) => el === target);
+    return focusables[idx + 1];
+  }
+
+  /** @private */
+  __getLastFocusable(container) {
+    const focusables = getFocusableElements(container);
+    return focusables.pop();
   }
 
   /** @private */
@@ -563,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;
     }
 
@@ -585,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;
     }
@@ -605,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;
@@ -624,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;
     }
@@ -662,6 +901,13 @@ class Popover extends PopoverPositionMixin(
     this.opened = event.detail.value;
   }
 
+  /** @private */
+  __onOverlayOpened() {
+    if (this.autofocus && !this.modal) {
+      this._overlayElement.$.overlay.focus();
+    }
+  }
+
   /** @private */
   __onOverlayClosed() {
     // Reset restoring focus state after a timeout to make sure focus was restored
@@ -676,6 +922,8 @@ class Popover extends PopoverPositionMixin(
     if (this.modal && this.target.style.pointerEvents) {
       this.target.style.pointerEvents = '';
     }
+
+    this.dispatchEvent(new CustomEvent('closed'));
   }
 
   /**
@@ -732,6 +980,12 @@ class Popover extends PopoverPositionMixin(
       this.__updateDimension(overlay, 'width', width);
     }
   }
+
+  /**
+   * Fired when the popover is closed.
+   *
+   * @event closed
+   */
 }
 
 defineCustomElement(Popover);

package/theme/lumo/vaadin-popover-styles.d.ts

@@ -1,3 +1,4 @@
 import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,4 +1,5 @@
 import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
@@ -6,15 +7,105 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 const popoverOverlay = css`
   :host {
-    --vaadin-popover-offset-top: var(--lumo-space-xs);
-    --vaadin-popover-offset-bottom: var(--lumo-space-xs);
-    --vaadin-popover-offset-start: var(--lumo-space-xs);
-    --vaadin-popover-offset-end: var(--lumo-space-xs);
+    --vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-arrow-size: 0.5rem;
+    --_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);
+  }
+
+  /* top / bottom position */
+  :host([theme~='arrow'][position^='top']) [part='arrow'],
+  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
+    border-left: var(--vaadin-popover-arrow-size) solid transparent;
+    border-right: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
+    bottom: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
+    top: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
+    transform: translateX(50%);
+    inset-inline-end: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 50%;
+  }
+
+  /* start / end position */
+  :host([theme~='arrow'][position^='start']) [part='arrow'],
+  :host([theme~='arrow'][position^='end']) [part='arrow'] {
+    border-top: var(--vaadin-popover-arrow-size) solid transparent;
+    border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
+    inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
+    inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
+    top: 0.5rem;
+  }
+
+  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
+    bottom: 0.5rem;
+  }
 `;
 
 registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'lumo-popover-overlay' });

package/theme/material/vaadin-popover-styles.d.ts

@@ -1 +1 @@
-export {};
+import '@vaadin/vaadin-material-styles/color.js';