@vaadin/popover 25.0.0-alpha15 → 25.0.0-alpha17

package/package.json

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

package/src/styles/vaadin-popover-overlay-base-styles.js

@@ -85,7 +85,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

@@ -34,11 +34,17 @@ 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>
@@ -69,10 +75,11 @@ 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;
   }
 

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-visible) ::part(overlay) {
+        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
   }
@@ -422,7 +435,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   static get observers() {
-    return ['__sizeChanged(width, height, _overlayElement)', '__updateAriaAttributes(opened, role, target)'];
+    return ['__updateAriaAttributes(opened, role, target)'];
   }
 
   /**
@@ -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';
     }
@@ -549,6 +572,11 @@ class Popover extends PopoverPositionMixin(
   updated(props) {
     super.updated(props);
 
+    if (props.has('width') || props.has('height')) {
+      const { width, height } = this;
+      requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }, false));
+    }
+
     if (props.has('accessibleName')) {
       if (this.accessibleName) {
         this.setAttribute('aria-label', this.accessibleName);
@@ -564,6 +592,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 */
@@ -688,20 +724,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;
@@ -711,7 +745,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();
@@ -720,16 +754,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;
@@ -738,7 +770,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();
@@ -834,7 +866,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
@@ -845,7 +877,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)
@@ -857,7 +889,6 @@ class Popover extends PopoverPositionMixin(
     if (
       (this.__hasTrigger('focus') && this.__mouseDownInside) ||
       event.relatedTarget === this.target ||
-      event.relatedTarget === this._overlayElement ||
       this.contains(event.relatedTarget)
     ) {
       return;
@@ -946,7 +977,7 @@ class Popover extends PopoverPositionMixin(
   /** @private */
   __onOverlayOpened() {
     if (this.autofocus && !this.modal) {
-      this._overlayElement.$.overlay.focus();
+      this.focus();
     }
   }
 
@@ -993,13 +1024,6 @@ class Popover extends PopoverPositionMixin(
     return Array.isArray(this.trigger) && this.trigger.includes(trigger);
   }
 
-  /** @private */
-  __sizeChanged(width, height, overlay) {
-    if (overlay) {
-      requestAnimationFrame(() => overlay.setBounds({ width, height }, false));
-    }
-  }
-
   /**
    * Fired when the popover is closed.
    *

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha15",
+  "version": "25.0.0-alpha17",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha15",
+  "version": "25.0.0-alpha17",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {