@vaadin/popover 25.0.0-alpha11 → 25.0.0-alpha13

package/package.json

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

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

@@ -36,7 +36,7 @@ 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-subtle)));
     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)));
   }
@@ -46,7 +46,7 @@ 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'] {

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.

package/src/vaadin-popover.js

@@ -14,7 +14,6 @@ import {
 } 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 as isLastOverlayBase } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
@@ -203,13 +202,12 @@ const isLastOverlay = (overlay) => {
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
- * @mixes OverlayClassMixin
  * @mixes PopoverPositionMixin
  * @mixes PopoverTargetMixin
  * @mixes ThemePropertyMixin
  */
 class Popover extends PopoverPositionMixin(
-  PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement))))),
+  PopoverTargetMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-popover';
@@ -313,6 +311,7 @@ class Popover extends PopoverPositionMixin(
         type: Boolean,
         value: false,
         notify: true,
+        reflectToAttribute: true,
         observer: '__openedChanged',
       },
 
@@ -989,7 +988,7 @@ class Popover extends PopoverPositionMixin(
     }
 
     // Restore pointer-events set when opening on hover.
-    if (this.modal && this.target.style.pointerEvents) {
+    if (this.modal && this.target && this.target.style.pointerEvents) {
       this.target.style.pointerEvents = '';
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha11",
+  "version": "25.0.0-alpha13",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10,17 +10,6 @@
           "name": "vaadin-popover",
           "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
-            {
-              "name": "overlay-class",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "position",
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
@@ -222,17 +211,6 @@
           ],
           "js": {
             "properties": [
-              {
-                "name": "overlayClass",
-                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "position",
                 "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha11",
+  "version": "25.0.0-alpha13",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -61,13 +61,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".overlayClass",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": ".position",
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",