@vaadin/overlay 25.0.0-alpha8 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -36,17 +33,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/component-base": "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/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"
   },
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const overlayStyles = css`
@@ -16,7 +16,7 @@ export const overlayStyles = css`
 
     /* Default position constraints. Themes can
           override this to adjust the gap between the overlay and the viewport. */
-    inset: 8px;
+    inset: var(--vaadin-overlay-viewport-inset, 8px);
     bottom: var(--vaadin-overlay-viewport-bottom);
 
     /* Override native [popover] user agent styles */
@@ -55,19 +55,32 @@ export const overlayStyles = css`
 
   [part='overlay'] {
     background: var(--vaadin-overlay-background, var(--vaadin-background-color));
-    border: var(--vaadin-overlay-border-width, 1px) solid var(--vaadin-overlay-border-color, var(--vaadin-border-color));
+    border: var(--vaadin-overlay-border-width, 1px) solid
+      var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary));
     border-radius: var(--vaadin-overlay-border-radius, var(--vaadin-radius-m));
-    box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
+    box-shadow: var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
     box-sizing: border-box;
     max-width: 100%;
     overflow: auto;
     overscroll-behavior: contain;
     pointer-events: auto;
     -webkit-tap-highlight-color: initial;
+
+    /* CSS reset for font styles */
+    color: initial;
+    font: initial;
+    letter-spacing: initial;
+    text-align: initial;
+    text-decoration: initial;
+    text-indent: initial;
+    text-transform: initial;
+    user-select: text;
+    white-space: initial;
+    word-spacing: initial;
   }
 
   [part='backdrop'] {
-    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
+    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
     content: '';
     inset: 0;
     pointer-events: auto;
@@ -81,7 +94,7 @@ export const overlayStyles = css`
 
   @media (forced-colors: active) {
     [part='overlay'] {
-      border: 3px solid;
+      border: 3px solid !important;
     }
   }
 `;

package/src/vaadin-overlay-focus-mixin.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';
 import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { getDeepActiveElement, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
@@ -48,7 +47,6 @@ export const OverlayFocusMixin = (superClass) =>
     constructor() {
       super();
 
-      this.__ariaModalController = new AriaModalController(this, () => this._modalRoot);
       this.__focusTrapController = new FocusTrapController(this);
       this.__focusRestorationController = new FocusRestorationController();
     }
@@ -66,18 +64,17 @@ export const OverlayFocusMixin = (superClass) =>
     ready() {
       super.ready();
 
-      this.addController(this.__ariaModalController);
       this.addController(this.__focusTrapController);
       this.addController(this.__focusRestorationController);
     }
 
     /**
-     * Override to specify another element used as a modality root,
-     * e.g. the overlay's owner element, rather than overlay itself.
+     * Override to specify another element used as a focus trap root,
+     * e.g. the overlay's owner element, rather than overlay part.
      * @protected
      */
-    get _modalRoot() {
-      return this;
+    get _focusTrapRoot() {
+      return this.$.overlay;
     }
 
     /**
@@ -87,13 +84,13 @@ export const OverlayFocusMixin = (superClass) =>
      */
     _resetFocus() {
       if (this.focusTrap) {
-        this.__ariaModalController.close();
         this.__focusTrapController.releaseFocus();
       }
 
       if (this.restoreFocusOnClose && this._shouldRestoreFocus()) {
-        const preventScroll = !isKeyboardActive();
-        this.__focusRestorationController.restoreFocus({ preventScroll });
+        const focusVisible = isKeyboardActive();
+        const preventScroll = !focusVisible;
+        this.__focusRestorationController.restoreFocus({ preventScroll, focusVisible });
       }
     }
 
@@ -115,8 +112,7 @@ export const OverlayFocusMixin = (superClass) =>
      */
     _trapFocus() {
       if (this.focusTrap) {
-        this.__ariaModalController.showModal();
-        this.__focusTrapController.trapFocus(this.$.overlay);
+        this.__focusTrapController.trapFocus(this._focusTrapRoot);
       }
     }
 

package/src/vaadin-overlay-mixin.js

@@ -117,8 +117,11 @@ export const OverlayMixin = (superClass) =>
     }
 
     /** @protected */
-    ready() {
-      super.ready();
+    firstUpdated() {
+      super.firstUpdated();
+
+      // Set popover in firstUpdated before opened observers are called
+      this.popover = 'manual';
 
       // Need to add dummy click listeners to this and the backdrop or else
       // the document click event listener (_outsideClickListener) may never
@@ -153,6 +156,11 @@ export const OverlayMixin = (superClass) =>
     disconnectedCallback() {
       super.disconnectedCallback();
 
+      if (this.__scheduledOpen) {
+        cancelAnimationFrame(this.__scheduledOpen);
+        this.__scheduledOpen = null;
+      }
+
       /* c8 ignore next 3 */
       if (this._boundIosResizeListener) {
         window.removeEventListener('resize', this._boundIosResizeListener);
@@ -175,13 +183,17 @@ export const OverlayMixin = (superClass) =>
      * @param {Event=} sourceEvent
      */
     close(sourceEvent) {
-      const evt = new CustomEvent('vaadin-overlay-close', {
+      // Dispatch the event on the overlay. Not using composed, as propagating the event through shadow roots could have
+      // side effects when nesting overlays
+      const event = new CustomEvent('vaadin-overlay-close', {
         bubbles: true,
         cancelable: true,
-        detail: { sourceEvent },
+        detail: { overlay: this, sourceEvent },
       });
-      this.dispatchEvent(evt);
-      if (!evt.defaultPrevented) {
+      this.dispatchEvent(event);
+      // To allow listening for the event globally, also dispatch it on the document body
+      document.body.dispatchEvent(event);
+      if (!event.defaultPrevented) {
         this.opened = false;
       }
     }
@@ -230,8 +242,25 @@ export const OverlayMixin = (superClass) =>
       }
     }
 
+    /**
+     * Whether to add global listeners for closing on outside click.
+     * By default, listeners are not added for a modeless overlay.
+     *
+     * @return {boolean}
+     * @protected
+     */
+    _shouldAddGlobalListeners() {
+      return !this.modeless;
+    }
+
     /** @private */
     _addGlobalListeners() {
+      if (this.__hasGlobalListeners) {
+        return;
+      }
+
+      this.__hasGlobalListeners = true;
+
       document.addEventListener('mousedown', this._boundMouseDownListener);
       document.addEventListener('mouseup', this._boundMouseUpListener);
       // Firefox leaks click to document on contextmenu even if prevented
@@ -241,6 +270,12 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _removeGlobalListeners() {
+      if (!this.__hasGlobalListeners) {
+        return;
+      }
+
+      this.__hasGlobalListeners = false;
+
       document.removeEventListener('mousedown', this._boundMouseDownListener);
       document.removeEventListener('mouseup', this._boundMouseUpListener);
       document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
@@ -274,13 +309,20 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _modelessChanged(modeless) {
+      if (this.opened) {
+        // Add / remove listeners if modeless is changed while opened
+        if (this._shouldAddGlobalListeners()) {
+          this._addGlobalListeners();
+        } else {
+          this._removeGlobalListeners();
+        }
+      }
+
       if (!modeless) {
         if (this.opened) {
-          this._addGlobalListeners();
           this._enterModalState();
         }
       } else {
-        this._removeGlobalListeners();
         this._exitModalState();
       }
       setOverlayStateAttribute(this, 'modeless', modeless);
@@ -308,13 +350,18 @@ export const OverlayMixin = (superClass) =>
           setTimeout(() => {
             this._trapFocus();
 
-            this.dispatchEvent(new CustomEvent('vaadin-overlay-open', { bubbles: true, composed: true }));
+            // Dispatch the event on the overlay. Not using composed, as propagating the event through shadow roots
+            // could have side effects when nesting overlays
+            const event = new CustomEvent('vaadin-overlay-open', { detail: { overlay: this }, bubbles: true });
+            this.dispatchEvent(event);
+            // To allow listening for the event globally, also dispatch it on the document body
+            document.body.dispatchEvent(event);
           });
         });
 
         document.addEventListener('keydown', this._boundKeydownListener);
 
-        if (!this.modeless) {
+        if (this._shouldAddGlobalListeners()) {
           this._addGlobalListeners();
         }
       } else if (wasOpened) {
@@ -329,7 +376,7 @@ export const OverlayMixin = (superClass) =>
 
         document.removeEventListener('keydown', this._boundKeydownListener);
 
-        if (!this.modeless) {
+        if (this._shouldAddGlobalListeners()) {
           this._removeGlobalListeners();
         }
       }
@@ -407,9 +454,7 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _attachOverlay() {
-      this._placeholder = document.createComment('vaadin-overlay-placeholder');
-      this.parentNode.insertBefore(this._placeholder, this);
-      document.body.appendChild(this);
+      this.showPopover();
     }
 
     /** @private */
@@ -448,8 +493,7 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _detachOverlay() {
-      this._placeholder.parentNode.insertBefore(this, this._placeholder);
-      this._placeholder.parentNode.removeChild(this._placeholder);
+      this.hidePopover();
     }
 
     /** @private */
@@ -493,7 +537,6 @@ export const OverlayMixin = (superClass) =>
       }
 
       const evt = new CustomEvent('vaadin-overlay-outside-click', {
-        bubbles: true,
         cancelable: true,
         detail: { sourceEvent: event },
       });
@@ -514,13 +557,12 @@ export const OverlayMixin = (superClass) =>
       }
 
       // Only close modeless overlay on Esc press when it contains focus
-      if (this.modeless && !event.composedPath().includes(this.$.overlay)) {
+      if (!this._shouldAddGlobalListeners() && !event.composedPath().includes(this._focusTrapRoot)) {
         return;
       }
 
       if (event.key === 'Escape') {
         const evt = new CustomEvent('vaadin-overlay-escape-press', {
-          bubbles: true,
           cancelable: true,
           detail: { sourceEvent: event },
         });

package/src/vaadin-overlay-position-mixin.js

@@ -116,13 +116,6 @@ export const PositionMixin = (superClass) =>
       };
     }
 
-    static get observers() {
-      return [
-        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap, requiredVerticalSpace)',
-        '__overlayOpenedChanged(opened, positionTarget)',
-      ];
-    }
-
     constructor() {
       super();
 
@@ -145,6 +138,36 @@ export const PositionMixin = (superClass) =>
       this.__removeUpdatePositionEventListeners();
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('positionTarget')) {
+        const oldTarget = props.get('positionTarget');
+
+        // 1. When position target is removed, always reset position settings
+        // 2. When position target is set, reset if overlay was opened before
+        if ((!this.positionTarget && oldTarget) || (this.positionTarget && !oldTarget && !!this.__margins)) {
+          this.__resetPosition();
+        }
+      }
+
+      if (props.has('opened') || props.has('positionTarget')) {
+        this.__updatePositionSettings(this.opened, this.positionTarget);
+      }
+
+      const positionProps = [
+        'horizontalAlign',
+        'verticalAlign',
+        'noHorizontalOverlap',
+        'noVerticalOverlap',
+        'requiredVerticalSpace',
+      ];
+      if (positionProps.some((prop) => props.has(prop))) {
+        this._updatePosition();
+      }
+    }
+
     /** @private */
     __addUpdatePositionEventListeners() {
       window.visualViewport.addEventListener('resize', this._updatePosition);
@@ -181,7 +204,7 @@ export const PositionMixin = (superClass) =>
     }
 
     /** @private */
-    __overlayOpenedChanged(opened, positionTarget) {
+    __updatePositionSettings(opened, positionTarget) {
       this.__removeUpdatePositionEventListeners();
 
       if (positionTarget) {
@@ -210,20 +233,35 @@ export const PositionMixin = (superClass) =>
       }
     }
 
-    __positionSettingsChanged() {
-      this._updatePosition();
-    }
-
     /** @private */
     __onScroll(e) {
       // If the scroll event occurred inside the overlay, ignore it.
-      if (e.target instanceof Node && this.contains(e.target)) {
+      if (e.target instanceof Node && this._deepContains(e.target)) {
         return;
       }
 
       this._updatePosition();
     }
 
+    /** @private */
+    __resetPosition() {
+      this.__margins = null;
+
+      Object.assign(this.style, {
+        justifyContent: '',
+        alignItems: '',
+        top: '',
+        bottom: '',
+        left: '',
+        right: '',
+      });
+
+      setOverlayStateAttribute(this, 'bottom-aligned', false);
+      setOverlayStateAttribute(this, 'top-aligned', false);
+      setOverlayStateAttribute(this, 'end-aligned', false);
+      setOverlayStateAttribute(this, 'start-aligned', false);
+    }
+
     _updatePosition() {
       if (!this.positionTarget || !this.opened || !this.__margins) {
         return;

package/src/vaadin-overlay-stack-mixin.js

@@ -11,23 +11,13 @@ const attachedInstances = new Set();
  * Returns all attached overlays in visual stacking order.
  * @private
  */
-const getAttachedInstances = () =>
-  [...attachedInstances].filter(
-    (el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'),
-  );
-
-/**
- * Returns all attached overlay instances excluding notification container,
- * which only needs to be in the stack for zIndex but not pointer-events.
- * @private
- */
-const getOverlayInstances = () => getAttachedInstances().filter((el) => el.$.overlay);
+const getAttachedInstances = () => [...attachedInstances].filter((el) => !el.hasAttribute('closing'));
 
 /**
  * Returns true if all the instances on top of the overlay are nested overlays.
  * @private
  */
-const hasOnlyNestedOverlays = (overlay) => {
+export const hasOnlyNestedOverlays = (overlay) => {
   const instances = getAttachedInstances();
   const next = instances[instances.indexOf(overlay) + 1];
   if (!next) {
@@ -49,38 +39,15 @@ const hasOnlyNestedOverlays = (overlay) => {
  * @protected
  */
 export const isLastOverlay = (overlay, filter = (_overlay) => true) => {
-  const filteredOverlays = getOverlayInstances().filter(filter);
+  const filteredOverlays = getAttachedInstances().filter(filter);
   return overlay === filteredOverlays.pop();
 };
 
-const overlayMap = new WeakMap();
-
-/**
- * Stores the reference to the nested overlay for given parent,
- * or removes it when the nested overlay is null.
- * @param {HTMLElement} parent
- * @param {HTMLElement} nested
- * @protected
- */
-export const setNestedOverlay = (parent, nested) => {
-  if (nested != null) {
-    overlayMap.set(parent, nested);
-  } else {
-    overlayMap.delete(parent);
-  }
-};
-
 /**
  * @polymerMixin
  */
 export const OverlayStackMixin = (superClass) =>
   class OverlayStackMixin extends superClass {
-    constructor() {
-      super();
-
-      this._hasOverlayStackMixin = true;
-    }
-
     /**
      * Returns true if this is the last one in the opened overlays stack.
      *
@@ -105,18 +72,6 @@ export const OverlayStackMixin = (superClass) =>
      * Brings the overlay as visually the frontmost one.
      */
     bringToFront() {
-      // Update z-index to be the highest among all attached overlays
-      // TODO: Can be removed after switching all overlays to be based on native popover
-      let zIndex = '';
-      const frontmost = getAttachedInstances()
-        .filter((o) => o !== this)
-        .pop();
-      if (frontmost) {
-        const frontmostZIndex = parseFloat(getComputedStyle(frontmost).zIndex);
-        zIndex = frontmostZIndex + 1;
-      }
-      this.style.zIndex = zIndex;
-
       // If the overlay is the last one, or if all other overlays shown above
       // are nested overlays (e.g. date-picker inside a dialog), do not call
       // `showPopover()` unnecessarily to avoid scroll position being reset.
@@ -133,11 +88,6 @@ export const OverlayStackMixin = (superClass) =>
       // Update order of attached instances
       this._removeAttachedInstance();
       this._appendAttachedInstance();
-
-      // If there is a nested overlay, call `bringToFront()` for it as well.
-      if (overlayMap.has(this)) {
-        overlayMap.get(this).bringToFront();
-      }
     }
 
     /** @protected */
@@ -150,7 +100,7 @@ export const OverlayStackMixin = (superClass) =>
       }
 
       // Disable pointer events in other attached overlays
-      getOverlayInstances().forEach((el) => {
+      getAttachedInstances().forEach((el) => {
         if (el !== this) {
           el.$.overlay.style.pointerEvents = 'none';
         }
@@ -166,7 +116,7 @@ export const OverlayStackMixin = (superClass) =>
       }
 
       // Restore pointer events in the previous overlay(s)
-      const instances = getOverlayInstances();
+      const instances = getAttachedInstances();
 
       let el;
       // Use instances.pop() to ensure the reverse order

package/src/vaadin-overlay-utils.js

@@ -16,10 +16,12 @@
  */
 export function observeMove(element, callback) {
   let io = null;
+  let timeout;
 
   const root = document.documentElement;
 
   function cleanup() {
+    timeout && clearTimeout(timeout);
     io && io.disconnect();
     io = null;
   }
@@ -52,27 +54,22 @@ export function observeMove(element, callback) {
     let isFirstUpdate = true;
 
     function handleObserve(entries) {
-      let ratio = entries[0].intersectionRatio;
+      const ratio = entries[0].intersectionRatio;
 
       if (ratio !== threshold) {
         if (!isFirstUpdate) {
           return refresh();
         }
 
-        // It's possible for the watched element to not be at perfect 1.0 visibility when we create
-        // the IntersectionObserver. This has a couple of causes:
-        //   - elements being on partial pixels
-        //   - elements being hidden offscreen (e.g., <html> has `overflow: hidden`)
-        //   - delays: if your DOM change occurs due to e.g., page resize, you can see elements
-        //     behind their actual position
-        //
-        // In all of these cases, refresh but with this lower ratio of threshold. When the element
-        // moves beneath _that_ new value, the user will get notified.
-        if (ratio === 0.0) {
-          ratio = 0.0000001; // Just needs to be non-zero
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeout = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
         }
-
-        refresh(false, ratio);
       }
 
       isFirstUpdate = false;

package/src/vaadin-overlay.d.ts

@@ -17,13 +17,13 @@ export type OverlayOpenedChangedEvent = CustomEvent<{ value: boolean }>;
 /**
  * Fired after the overlay is opened.
  */
-export type OverlayOpenEvent = CustomEvent;
+export type OverlayOpenEvent = CustomEvent<{ overlay: HTMLElement }>;
 
 /**
  * Fired when the opened overlay is about to be closed.
  * Calling `preventDefault()` on the event cancels the closing.
  */
-export type OverlayCloseEvent = CustomEvent;
+export type OverlayCloseEvent = CustomEvent<{ overlay: HTMLElement }>;
 
 /**
  * Fired after the overlay is closed.
@@ -98,10 +98,10 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  *
  * The following state attributes are available for styling:
  *
- * Attribute | Description | Part
- * ---|---|---
- * `opening` | Applied just after the overlay is attached to the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
- * `closing` | Applied just before the overlay is detached from the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
+ * Attribute | Description
+ * ----------|------------
+ * `opening` | Applied just after the overlay is opened. You can apply a CSS animation for this state.
+ * `closing` | Applied just before the overlay is closed. You can apply a CSS animation for this state.
  *
  * The following custom CSS properties are available for styling:
  *

package/src/vaadin-overlay.js

@@ -9,7 +9,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 { overlayStyles } from './styles/vaadin-overlay-core-styles.js';
+import { overlayStyles } from './styles/vaadin-overlay-base-styles.js';
 import { OverlayMixin } from './vaadin-overlay-mixin.js';
 
 /**
@@ -50,10 +50,10 @@ import { OverlayMixin } from './vaadin-overlay-mixin.js';
  *
  * The following state attributes are available for styling:
  *
- * Attribute | Description | Part
- * ---|---|---
- * `opening` | Applied just after the overlay is attached to the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
- * `closing` | Applied just before the overlay is detached from the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
+ * Attribute | Description
+ * ----------|------------
+ * `opening` | Applied just after the overlay is opened. You can apply a CSS animation for this state.
+ * `closing` | Applied just before the overlay is closed. You can apply a CSS animation for this state.
  *
  * The following custom CSS properties are available for styling:
  *

package/vaadin-overlay.js

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

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

@@ -1,74 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const overlayStyles = css`
-  :host {
-    z-index: 200;
-    position: fixed;
-
-    /* Despite of what the names say, <vaadin-overlay> is just a container
-          for position/sizing/alignment. The actual overlay is the overlay part. */
-
-    /* Default position constraints: the entire viewport. Note: themes can
-          override this to introduce gaps between the overlay and the viewport. */
-    inset: 0;
-    bottom: var(--vaadin-overlay-viewport-bottom);
-
-    /* Override native [popover] user agent styles */
-    width: auto;
-    height: auto;
-    border: none;
-    padding: 0;
-    background-color: transparent;
-    overflow: visible;
-
-    /* Use flexbox alignment for the overlay part. */
-    display: flex;
-    flex-direction: column; /* makes dropdowns sizing easier */
-    /* Align to center by default. */
-    align-items: center;
-    justify-content: center;
-
-    /* Allow centering when max-width/max-height applies. */
-    margin: auto;
-
-    /* The host is not clickable, only the overlay part is. */
-    pointer-events: none;
-
-    /* Remove tap highlight on touch devices. */
-    -webkit-tap-highlight-color: transparent;
-
-    /* CSS API for host */
-    --vaadin-overlay-viewport-bottom: 0;
-  }
-
-  :host([hidden]),
-  :host(:not([opened]):not([closing])),
-  :host(:not([opened]):not([closing])) [part='overlay'] {
-    display: none !important;
-  }
-
-  [part='overlay'] {
-    overflow: auto;
-    pointer-events: auto;
-
-    /* Prevent overflowing the host */
-    max-width: 100%;
-    box-sizing: border-box;
-
-    -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
-  }
-
-  [part='backdrop'] {
-    z-index: -1;
-    content: '';
-    background: rgba(0, 0, 0, 0.5);
-    position: fixed;
-    inset: 0;
-    pointer-events: auto;
-  }
-`;

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles('vaadin-overlay', overlay, { moduleId: 'lumo-vaadin-overlay' });

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

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

package/theme/lumo/vaadin-overlay.js

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