feat: add trigger property, make opened property public

dev/popover.html

@@ -23,6 +23,8 @@
     <script type="module">
       const popover = document.querySelector('vaadin-popover');
 
+      // popover.trigger = ['hover', 'focus'];
+
       popover.renderer = (root) => {
         if (root.firstChild) {
           return;

packages/popover/src/vaadin-popover-overlay.js

@@ -39,6 +39,27 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
           margin-top: var(--vaadin-popover-offset-top, 0);
         }
 
+        [part='overlay'] {
+          position: relative;
+          overflow: visible;
+        }
+
+        [part='content'] {
+          overflow: auto;
+        }
+
+        /* Increase the area of the popover so the pointer can go from the target directly to it. */
+        [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);
+          z-index: -1;
+          pointer-events: auto;
+        }
+
         :host([position^='top'][bottom-aligned]) [part='overlay'],
         :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
           margin-bottom: var(--vaadin-popover-offset-bottom, 0);

packages/popover/src/vaadin-popover.d.ts

@@ -13,16 +13,36 @@ export type { PopoverPosition } from './vaadin-popover-position-mixin.js';
 
 export type PopoverRenderer = (root: HTMLElement, popover: Popover) => void;
 
+export type PopoverTrigger = 'click' | 'focus' | 'hover';
+
+/**
+ * Fired when the `opened` property changes.
+ */
+export type PopoverOpenedChangedEvent = CustomEvent<{ value: boolean }>;
+
+export interface PopoverCustomEventMap {
+  'opened-changed': PopoverOpenedChangedEvent;
+}
+
+export type PopoverEventMap = HTMLElementEventMap & PopoverCustomEventMap;
+
 /**
  * `<vaadin-popover>` is a Web Component for creating overlays
  * that are positioned next to specified DOM element (target).
  *
  * Unlike `<vaadin-tooltip>`, the popover supports rich content
  * that can be provided by using `renderer` function.
+ *
+ * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
 declare class Popover extends PopoverPositionMixin(
   PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement)))),
 ) {
+  /**
+   * True if the popover overlay is opened, false otherwise.
+   */
+  opened: boolean;
+
   /**
    * Custom function for rendering the content of the overlay.
    * Receives two arguments:
@@ -56,6 +76,26 @@ declare class Popover extends PopoverPositionMixin(
    */
   noCloseOnEsc: boolean;
 
+  /**
+   * Popover trigger mode, used to configure how the overlay 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.
+   * - `focus` - opens on target focus, closes on target blur. Moving focus to the
+   * popover overlay content keeps the overlay opened.
+   *
+   * In addition to the behavior specified by `trigger`, the popover can be closed by:
+   * - pressing Escape key (unless `noCloseOnEsc` property is true)
+   * - outside click (unless `noCloseOnOutsideClick` property is true)
+   *
+   * When setting `trigger` property to `null`, `undefined` or empty array, the popover
+   * can be only opened or closed programmatically by changing `opened` property.
+   */
+  trigger: PopoverTrigger[] | null | undefined;
+
   /**
    * When true, the overlay has a backdrop (modality curtain) on top of the
    * underlying page content, covering the whole viewport.
@@ -71,6 +111,18 @@ declare class Popover extends PopoverPositionMixin(
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
    */
   requestContentUpdate(): void;
+
+  addEventListener<K extends keyof PopoverEventMap>(
+    type: K,
+    listener: (this: Popover, ev: PopoverEventMap[K]) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+
+  removeEventListener<K extends keyof PopoverEventMap>(
+    type: K,
+    listener: (this: Popover, ev: PopoverEventMap[K]) => void,
+    options?: EventListenerOptions | boolean,
+  ): void;
 }
 
 declare global {