@vaadin/popover 25.0.0-alpha10 → 25.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha11",
   "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-alpha10",
-    "@vaadin/component-base": "25.0.0-alpha10",
-    "@vaadin/lit-renderer": "25.0.0-alpha10",
-    "@vaadin/overlay": "25.0.0-alpha10",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
+    "@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",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha10",
-    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/chai-plugins": "25.0.0-alpha11",
+    "@vaadin/test-runner-commands": "25.0.0-alpha11",
     "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
+  "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
 }

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

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

package/src/vaadin-popover-overlay.js

@@ -10,7 +10,7 @@ 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';
 
 /**

package/src/vaadin-popover.d.ts

@@ -93,6 +93,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 +101,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;
 
@@ -161,6 +163,7 @@ declare class Popover extends PopoverPositionMixin(
    * The `role` attribute value to be set on the overlay.
    *
    * @attr {string} overlay-role
+   * @deprecated Use standard `role` attribute on the popover instead
    */
   overlayRole: string;
 

package/src/vaadin-popover.js

@@ -229,6 +229,7 @@ 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: {
         type: String,
@@ -238,6 +239,7 @@ 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: {
         type: String,
@@ -327,6 +329,7 @@ class Popover extends PopoverPositionMixin(
        * The `role` attribute value to be set on the overlay.
        *
        * @attr {string} overlay-role
+       * @deprecated Use standard `role` attribute on the popover instead
        */
       overlayRole: {
         type: String,

package/vaadin-popover.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-popover.js';
+import './src/vaadin-popover.js';
 export * from './src/vaadin-popover.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha11",
   "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-alpha10",
+  "version": "25.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/src/styles/vaadin-popover-overlay-core-styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2024 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const popoverOverlayStyles: CSSResult;

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

@@ -1,74 +0,0 @@
-/**
- * @license
- * Copyright (c) 2024 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
-
-const popoverOverlay = css`
-  :host {
-    --_default-offset: 0;
-  }
-
-  :host([modeless][with-backdrop]) [part='backdrop'] {
-    pointer-events: none;
-  }
-
-  :host([position^='top'][top-aligned]) [part='overlay'],
-  :host([position^='bottom'][top-aligned]) [part='overlay'] {
-    margin-top: var(--vaadin-popover-offset-top, var(--_default-offset));
-  }
-
-  [part='overlay'] {
-    position: relative;
-    overflow: visible;
-    max-height: 100%;
-  }
-
-  [part='content'] {
-    overflow: auto;
-    box-sizing: border-box;
-    max-height: 100%;
-  }
-
-  /* Increase the area of the popover so the pointer can go from the target directly to it. */
-  [part='overlay']::before {
-    position: absolute;
-    content: '';
-    inset-block: calc(var(--vaadin-popover-offset-top, var(--_default-offset)) * -1)
-      calc(var(--vaadin-popover-offset-bottom, var(--_default-offset)) * -1);
-    inset-inline: calc(var(--vaadin-popover-offset-start, var(--_default-offset)) * -1)
-      calc(var(--vaadin-popover-offset-end, var(--_default-offset)) * -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, var(--_default-offset));
-  }
-
-  :host([position^='start'][start-aligned]) [part='overlay'],
-  :host([position^='end'][start-aligned]) [part='overlay'] {
-    margin-inline-start: var(--vaadin-popover-offset-start, var(--_default-offset));
-  }
-
-  :host([position^='start'][end-aligned]) [part='overlay'],
-  :host([position^='end'][end-aligned]) [part='overlay'] {
-    margin-inline-end: var(--vaadin-popover-offset-end, var(--_default-offset));
-  }
-
-  [part='arrow'] {
-    display: none;
-    position: absolute;
-    height: 0;
-    width: 0;
-  }
-
-  :host([theme~='arrow']) [part='arrow'] {
-    display: block;
-  }
-`;
-
-export const popoverOverlayStyles = [overlayStyles, popoverOverlay];

package/theme/lumo/vaadin-popover-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-popover-styles.js

@@ -1,107 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const popoverOverlay = css`
-  :host {
-    --vaadin-popover-arrow-size: 0.5rem;
-    --_default-offset: var(--lumo-space-xs);
-  }
-
-  [part='overlay'] {
-    outline: none;
-  }
-
-  [part='content'] {
-    padding: var(--lumo-space-xs) var(--lumo-space-s);
-  }
-
-  :host([theme~='no-padding']) [part='content'] {
-    padding: 0 !important;
-  }
-
-  :host([theme~='arrow']) {
-    --_default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
-  }
-
-  /* top / bottom position */
-  :host([theme~='arrow'][position^='top']) [part='arrow'],
-  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
-    border-left: var(--vaadin-popover-arrow-size) solid transparent;
-    border-right: var(--vaadin-popover-arrow-size) solid transparent;
-  }
-
-  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
-    bottom: calc(var(--vaadin-popover-arrow-size) * -1);
-    border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
-    filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
-  }
-
-  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
-    top: calc(var(--vaadin-popover-arrow-size) * -1);
-    border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
-    filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
-  }
-
-  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
-    transform: translateX(-50%);
-    inset-inline-start: 1.5rem;
-  }
-
-  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
-    transform: translateX(50%);
-    inset-inline-end: 1.5rem;
-  }
-
-  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
-    transform: translateX(-50%);
-    inset-inline-start: 50%;
-  }
-
-  /* start / end position */
-  :host([theme~='arrow'][position^='start']) [part='arrow'],
-  :host([theme~='arrow'][position^='end']) [part='arrow'] {
-    border-top: var(--vaadin-popover-arrow-size) solid transparent;
-    border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
-  }
-
-  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
-    inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
-    border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
-    filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
-  }
-
-  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
-    inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
-    border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
-    filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
-  }
-
-  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
-    top: 0.5rem;
-  }
-
-  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
-    bottom: 0.5rem;
-  }
-`;
-
-registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'lumo-popover-overlay' });

package/theme/lumo/vaadin-popover.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-popover-styles.js';
-import '../../src/vaadin-popover.js';

package/theme/lumo/vaadin-popover.js

@@ -1,2 +0,0 @@
-import './vaadin-popover-styles.js';
-import '../../src/vaadin-popover.js';