@vaadin/popover 25.0.0-alpha8 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,9 +23,6 @@
     "lit.d.ts",
     "lit.js",
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -39,23 +36,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/component-base": "25.0.0-alpha8",
-    "@vaadin/lit-renderer": "25.0.0-alpha8",
-    "@vaadin/overlay": "25.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/lit-renderer": "25.0.0-beta1",
+    "@vaadin/overlay": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha8",
-    "@vaadin/test-runner-commands": "25.0.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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

@@ -27,7 +27,7 @@ export class PopoverRendererDirective extends LitRendererDirective<Popover, Popo
 }
 
 /**
- * A Lit directive for populating the content of the `<vaadin-popover-overlay>` element.
+ * A Lit directive for populating the content of the `<vaadin-popover>` element.
  *
  * The directive accepts a renderer callback returning a Lit template and assigns it to the popover
  * via the `renderer` property. The renderer is called once to populate the content when assigned
@@ -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

@@ -32,7 +32,7 @@ export class PopoverRendererDirective extends LitRendererDirective {
 }
 
 /**
- * A Lit directive for populating the content of the `<vaadin-popover-overlay>` element.
+ * A Lit directive for populating the content of the `<vaadin-popover>` element.
  *
  * The directive accepts a renderer callback returning a Lit template and assigns it to the popover
  * via the `renderer` property. The renderer is called once to populate the content when assigned
@@ -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/styles/vaadin-popover-overlay-base-styles.js

@@ -36,9 +36,10 @@ const popoverOverlay = css`
     overflow: visible;
     max-height: 100%;
     border: var(--_border-width) solid
-      var(--vaadin-popover-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color)));
+      var(--vaadin-popover-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary)));
     background: var(--vaadin-popover-background, var(--vaadin-overlay-background, var(--vaadin-background-color)));
-    box-shadow: var(--vaadin-popover-box-shadow, var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
+    box-shadow: var(--vaadin-popover-shadow, var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
+    border-radius: var(--vaadin-popover-border-radius, var(--vaadin-overlay-border-radius, var(--vaadin-radius-m)));
   }
 
   [part='content'] {
@@ -46,11 +47,11 @@ const popoverOverlay = css`
     overscroll-behavior: contain;
     box-sizing: border-box;
     max-height: 100%;
-    padding: var(--vaadin-popover-padding, var(--vaadin-padding));
+    padding: var(--vaadin-popover-padding, var(--vaadin-padding-s));
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 
   /* Increase the area of the popover so the pointer can go from the target directly to it. */
@@ -85,7 +86,7 @@ const popoverOverlay = css`
   }
 
   :host([theme~='arrow']) {
-    --_default-offset: calc(4px + var(--_arrow-size) / 2);
+    --_default-offset: var(--_arrow-size);
   }
 
   :host([theme~='arrow']) [part='arrow'] {

package/src/vaadin-popover-overlay.js

@@ -4,12 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
+import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { popoverOverlayStyles } from './styles/vaadin-popover-overlay-core-styles.js';
+import { popoverOverlayStyles } from './styles/vaadin-popover-overlay-base-styles.js';
 import { PopoverOverlayMixin } from './vaadin-popover-overlay-mixin.js';
 
 /**
@@ -33,17 +34,38 @@ class PopoverOverlay extends PopoverOverlayMixin(
     return popoverOverlayStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   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>
     `;
   }
 
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('restoreFocusNode') && this.opened) {
+      // Save focus to be restored when target is set while opened
+      if (this.restoreFocusNode && isElementFocused(this.restoreFocusNode.focusElement || this.restoreFocusNode)) {
+        this.__focusRestorationController.saveFocus();
+      } else if (!this.restoreFocusNode) {
+        // Do not restore focus when target is cleared while opened
+        this.__focusRestorationController.focusNode = null;
+      }
+    }
+  }
+
   /**
    * @override
    * @protected
@@ -53,27 +75,37 @@ 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
    */
-  _attachOverlay() {
-    this.showPopover();
+  _shouldAddGlobalListeners() {
+    return true;
   }
 
   /**
-   * @protected
+   * 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
    */
-  _detachOverlay() {
-    this.hidePopover();
+  _shouldCloseOnOutsideClick(event) {
+    if (event.composedPath().includes(this.positionTarget)) {
+      return false;
+    }
+    return super._shouldCloseOnOutsideClick(event);
   }
 }
 

package/src/vaadin-popover.d.ts

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-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';
@@ -68,9 +67,7 @@ export type PopoverEventMap = HTMLElementEventMap & PopoverCustomEventMap;
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} closed - Fired when the popover is closed.
  */
-declare class Popover extends PopoverPositionMixin(
-  PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement)))),
-) {
+declare class Popover extends PopoverPositionMixin(PopoverTargetMixin(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.
@@ -93,6 +90,7 @@ declare class Popover extends PopoverPositionMixin(
    * String used to label the popover to screen reader users.
    *
    * @attr {string} accessible-name
+   * @deprecated Use `aria-label` attribute on the popover instead
    */
   accessibleName: string | null | undefined;
 
@@ -100,6 +98,7 @@ declare class Popover extends PopoverPositionMixin(
    * Id of the element used as label of the popover to screen reader users.
    *
    * @attr {string} accessible-name-ref
+   * @deprecated Use `aria-labelledby` attribute on the popover instead
    */
   accessibleNameRef: string | null | undefined;
 
@@ -110,13 +109,13 @@ declare class Popover extends PopoverPositionMixin(
   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;
@@ -153,60 +152,60 @@ declare class Popover extends PopoverPositionMixin(
   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
    */
   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(
   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(
    * 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;