@vaadin/popover 25.0.0-alpha16 → 25.0.0-alpha18

package/package.json

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

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,6 +34,12 @@ class PopoverOverlay extends PopoverOverlayMixin(
     return popoverOverlayStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

package/src/vaadin-popover.js

@@ -228,7 +228,7 @@ class Popover extends PopoverPositionMixin(
         display: none !important;
       }
 
-      :host(:focus) ::part(overlay) {
+      :host(:focus-visible) ::part(overlay) {
         outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
@@ -435,7 +435,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   static get observers() {
-    return ['__sizeChanged(width, height, _overlayElement)', '__updateAriaAttributes(opened, role, target)'];
+    return ['__updateAriaAttributes(opened, role, target)'];
   }
 
   /**
@@ -572,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);
@@ -1019,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-alpha16",
+  "version": "25.0.0-alpha18",
   "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-alpha16",
+  "version": "25.0.0-alpha18",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {