@vaadin/overlay 24.8.4 → 25.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js"
@@ -30,24 +32,21 @@
     "vaadin-overlay",
     "overlay",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.8.4",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-material-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

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

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * 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 { 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. Themes can
+          override this to adjust the gap between the overlay and the viewport. */
+    inset: 8px;
+    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: 8px;
+  }
+
+  :host([hidden]),
+  :host(:not([opened]):not([closing])),
+  :host(:not([opened]):not([closing])) [part='overlay'] {
+    display: none !important;
+  }
+
+  [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-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-sizing: border-box;
+    max-width: 100%;
+    overflow: auto;
+    overscroll-behavior: contain;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: initial;
+  }
+
+  [part='backdrop'] {
+    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
+    content: '';
+    inset: 0;
+    pointer-events: auto;
+    position: fixed;
+    z-index: -1;
+  }
+
+  [part='overlay']:focus-visible {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      border: 3px solid;
+    }
+  }
+`;

package/src/{vaadin-overlay-core-styles.js → styles/vaadin-overlay-core-styles.js}

@@ -18,6 +18,14 @@ export const overlayStyles = css`
     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 */
@@ -45,7 +53,6 @@ export const overlayStyles = css`
   }
 
   [part='overlay'] {
-    -webkit-overflow-scrolling: touch;
     overflow: auto;
     pointer-events: auto;
 

package/src/vaadin-overlay-focus-mixin.d.ts

@@ -4,11 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 
 export declare function OverlayFocusMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> & Constructor<OverlayFocusMixinClass> & T;
+): Constructor<OverlayFocusMixinClass> & T;
 
 export declare class OverlayFocusMixinClass {
   /**

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

@@ -7,14 +7,12 @@ import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller
 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';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 
 /**
  * @polymerMixin
- * @mixes ControllerMixin
  */
 export const OverlayFocusMixin = (superClass) =>
-  class OverlayFocusMixin extends ControllerMixin(superClass) {
+  class OverlayFocusMixin extends superClass {
     static get properties() {
       return {
         /**
@@ -50,11 +48,20 @@ export const OverlayFocusMixin = (superClass) =>
     constructor() {
       super();
 
-      this.__ariaModalController = new AriaModalController(this);
+      this.__ariaModalController = new AriaModalController(this, () => this._modalRoot);
       this.__focusTrapController = new FocusTrapController(this);
       this.__focusRestorationController = new FocusRestorationController();
     }
 
+    /**
+     * Override to specify another element used as a content root,
+     * e.g. slotted into the overlay, rather than overlay itself.
+     * @protected
+     */
+    get _contentRoot() {
+      return this;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -64,6 +71,15 @@ export const OverlayFocusMixin = (superClass) =>
       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.
+     * @protected
+     */
+    get _modalRoot() {
+      return this;
+    }
+
     /**
      * Release focus and restore focus after the overlay is closed.
      *
@@ -129,15 +145,15 @@ export const OverlayFocusMixin = (superClass) =>
      * @protected
      */
     _deepContains(node) {
-      if (this.contains(node)) {
+      if (this._contentRoot.contains(node)) {
         return true;
       }
       let n = node;
       const doc = node.ownerDocument;
-      // Walk from node to `this` or `document`
-      while (n && n !== doc && n !== this) {
+      // Walk from node to content root or `document`
+      while (n && n !== doc && n !== this._contentRoot) {
         n = n.parentNode || n.host;
       }
-      return n === this;
+      return n === this._contentRoot;
     }
   };

package/src/vaadin-overlay-mixin.d.ts

@@ -4,19 +4,21 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { OverlayFocusMixinClass } from './vaadin-overlay-focus-mixin.js';
 import type { OverlayStackMixinClass } from './vaadin-overlay-stack-mixin.js';
 
+export type OverlayBounds = {
+  top?: number | string;
+  left?: number | string;
+  width?: number | string;
+  height?: number | string;
+};
+
 export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
 
 export declare function OverlayMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> &
-  Constructor<OverlayFocusMixinClass> &
-  Constructor<OverlayMixinClass> &
-  Constructor<OverlayStackMixinClass> &
-  T;
+): Constructor<OverlayFocusMixinClass> & Constructor<OverlayMixinClass> & Constructor<OverlayStackMixinClass> & T;
 
 export declare class OverlayMixinClass {
   /**
@@ -63,6 +65,11 @@ export declare class OverlayMixinClass {
 
   close(sourceEvent?: Event | null): void;
 
+  /**
+   * Updates the coordinates of the overlay.
+   */
+  setBounds(bounds: OverlayBounds, absolute?: boolean): void;
+
   /**
    * Requests an update for the content of the overlay.
    * While performing the update, it invokes the renderer passed in the `renderer` property.

package/src/vaadin-overlay-mixin.js

@@ -6,6 +6,7 @@
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
 import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
+import { setOverlayStateAttribute } from './vaadin-overlay-utils.js';
 
 /**
  * @polymerMixin
@@ -91,6 +92,7 @@ export const OverlayMixin = (superClass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
+          observer: '_withBackdropChanged',
           sync: true,
         },
       };
@@ -115,15 +117,20 @@ 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
       // get invoked on iOS Safari (reproducible in <vaadin-dialog>
       // and <vaadin-context-menu>).
       this.addEventListener('click', () => {});
-      this.$.backdrop.addEventListener('click', () => {});
+      if (this.$.backdrop) {
+        this.$.backdrop.addEventListener('click', () => {});
+      }
 
       this.addEventListener('mouseup', () => {
         // In Chrome, focus moves to body on overlay content mousedown
@@ -163,7 +170,7 @@ export const OverlayMixin = (superClass) =>
      */
     requestContentUpdate() {
       if (this.renderer) {
-        this.renderer.call(this.owner, this, this.owner, this.model);
+        this.renderer.call(this.owner, this._contentRoot, this.owner, this.model);
       }
     }
 
@@ -171,17 +178,44 @@ 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 },
       });
-      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;
       }
     }
 
+    /**
+     * Updates the coordinates of the overlay.
+     * @param {!OverlayBoundsParam} bounds
+     * @param {boolean} absolute
+     */
+    setBounds(bounds, absolute = true) {
+      const overlay = this.$.overlay;
+      const parsedBounds = { ...bounds };
+
+      if (absolute && overlay.style.position !== 'absolute') {
+        overlay.style.position = 'absolute';
+      }
+
+      Object.keys(parsedBounds).forEach((arg) => {
+        // Allow setting width or height to `null`
+        if (parsedBounds[arg] !== null && !isNaN(parsedBounds[arg])) {
+          parsedBounds[arg] = `${parsedBounds[arg]}px`;
+        }
+      });
+
+      Object.assign(overlay.style, parsedBounds);
+    }
+
     /** @private */
     _detectIosNavbar() {
       /* c8 ignore next 15 */
@@ -233,11 +267,11 @@ export const OverlayMixin = (superClass) =>
       this._oldOpened = opened;
 
       if (rendererChanged && hasOldRenderer) {
-        this.innerHTML = '';
+        this._contentRoot.innerHTML = '';
         // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
         // When clearing the rendered content, this part needs to be manually disposed of.
         // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
-        delete this._$litPart$;
+        delete this._contentRoot._$litPart$;
       }
 
       if (opened && renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
@@ -256,11 +290,23 @@ export const OverlayMixin = (superClass) =>
         this._removeGlobalListeners();
         this._exitModalState();
       }
+      setOverlayStateAttribute(this, 'modeless', modeless);
+    }
+
+    /** @private */
+    _withBackdropChanged(withBackdrop) {
+      setOverlayStateAttribute(this, 'with-backdrop', withBackdrop);
     }
 
     /** @private */
     _openedChanged(opened, wasOpened) {
       if (opened) {
+        // Prevent possible errors on setting `opened` to `true` while disconnected
+        if (!this.isConnected) {
+          this.opened = false;
+          return;
+        }
+
         this._saveFocus();
 
         this._animatedOpening();
@@ -269,7 +315,12 @@ export const OverlayMixin = (superClass) =>
           setTimeout(() => {
             this._trapFocus();
 
-            this.dispatchEvent(new CustomEvent('vaadin-overlay-open', { bubbles: 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', { bubbles: true });
+            this.dispatchEvent(event);
+            // To allow listening for the event globally, also dispatch it on the document body
+            document.body.dispatchEvent(event);
           });
         });
 
@@ -346,14 +397,16 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _animatedOpening() {
-      if (this.parentNode === document.body && this.hasAttribute('closing')) {
+      if (this._isAttached && this.hasAttribute('closing')) {
         this._flushAnimation('closing');
       }
       this._attachOverlay();
+      this._appendAttachedInstance();
+      this.bringToFront();
       if (!this.modeless) {
         this._enterModalState();
       }
-      this.setAttribute('opening', '');
+      setOverlayStateAttribute(this, 'opening', true);
 
       if (this._shouldAnimate()) {
         this._enqueueAnimation('opening', () => {
@@ -366,22 +419,20 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _attachOverlay() {
-      this._placeholder = document.createComment('vaadin-overlay-placeholder');
-      this.parentNode.insertBefore(this._placeholder, this);
-      document.body.appendChild(this);
-      this.bringToFront();
+      this.showPopover();
     }
 
     /** @private */
     _finishOpening() {
-      this.removeAttribute('opening');
+      setOverlayStateAttribute(this, 'opening', false);
     }
 
     /** @private */
     _finishClosing() {
       this._detachOverlay();
+      this._removeAttachedInstance();
       this.$.overlay.style.removeProperty('pointer-events');
-      this.removeAttribute('closing');
+      setOverlayStateAttribute(this, 'closing', false);
       this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
     }
 
@@ -390,9 +441,9 @@ export const OverlayMixin = (superClass) =>
       if (this.hasAttribute('opening')) {
         this._flushAnimation('opening');
       }
-      if (this._placeholder) {
+      if (this._isAttached) {
         this._exitModalState();
-        this.setAttribute('closing', '');
+        setOverlayStateAttribute(this, 'closing', true);
         this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
 
         if (this._shouldAnimate()) {
@@ -407,8 +458,7 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _detachOverlay() {
-      this._placeholder.parentNode.insertBefore(this, this._placeholder);
-      this._placeholder.parentNode.removeChild(this._placeholder);
+      this.hidePopover();
     }
 
     /** @private */
@@ -452,7 +502,6 @@ export const OverlayMixin = (superClass) =>
       }
 
       const evt = new CustomEvent('vaadin-overlay-outside-click', {
-        bubbles: true,
         cancelable: true,
         detail: { sourceEvent: event },
       });
@@ -479,7 +528,6 @@ export const OverlayMixin = (superClass) =>
 
       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

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { getAncestorRootNodes } from '@vaadin/component-base/src/dom-utils.js';
-import { observeMove } from './vaadin-overlay-utils.js';
+import { observeMove, setOverlayStateAttribute } from './vaadin-overlay-utils.js';
 
 const PROP_NAMES_VERTICAL = {
   start: 'top',
@@ -271,11 +271,11 @@ export const PositionMixin = (superClass) =>
       // Apply the positioning properties to the overlay
       Object.assign(this.style, verticalProps, horizontalProps);
 
-      this.toggleAttribute('bottom-aligned', !shouldAlignStartVertically);
-      this.toggleAttribute('top-aligned', shouldAlignStartVertically);
+      setOverlayStateAttribute(this, 'bottom-aligned', !shouldAlignStartVertically);
+      setOverlayStateAttribute(this, 'top-aligned', shouldAlignStartVertically);
 
-      this.toggleAttribute('end-aligned', !flexStart);
-      this.toggleAttribute('start-aligned', flexStart);
+      setOverlayStateAttribute(this, 'end-aligned', !flexStart);
+      setOverlayStateAttribute(this, 'start-aligned', flexStart);
     }
 
     __shouldAlignStartHorizontally(targetRect, rtl) {

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

@@ -4,21 +4,32 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+/** @type {Set<HTMLElement>} */
+const attachedInstances = new Set();
+
 /**
  * Returns all attached overlays in visual stacking order.
  * @private
  */
-const getAttachedInstances = () =>
-  Array.from(document.body.children)
-    .filter((el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'))
-    .sort((a, b) => a.__zIndex - b.__zIndex || 0);
+const getAttachedInstances = () => [...attachedInstances].filter((el) => !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.
+ * Returns true if all the instances on top of the overlay are nested overlays.
  * @private
  */
-const getOverlayInstances = () => getAttachedInstances().filter((el) => el.$.overlay);
+const hasOnlyNestedOverlays = (overlay) => {
+  const instances = getAttachedInstances();
+  const next = instances[instances.indexOf(overlay) + 1];
+  if (!next) {
+    return true;
+  }
+
+  if (!overlay._deepContains(next)) {
+    return false;
+  }
+
+  return hasOnlyNestedOverlays(next);
+};
 
 /**
  * Returns true if the overlay is the last one in the opened overlays stack.
@@ -28,38 +39,15 @@ const getOverlayInstances = () => getAttachedInstances().filter((el) => el.$.ove
  * @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.
      *
@@ -70,25 +58,36 @@ export const OverlayStackMixin = (superClass) =>
       return isLastOverlay(this);
     }
 
+    /**
+     * Returns true if this is overlay is attached.
+     *
+     * @return {boolean}
+     * @protected
+     */
+    get _isAttached() {
+      return attachedInstances.has(this);
+    }
+
     /**
      * Brings the overlay as visually the frontmost one.
      */
     bringToFront() {
-      let zIndex = '';
-      const frontmost = getAttachedInstances()
-        .filter((o) => o !== this)
-        .pop();
-      if (frontmost) {
-        const frontmostZIndex = frontmost.__zIndex;
-        zIndex = frontmostZIndex + 1;
+      // 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.
+      if (isLastOverlay(this) || hasOnlyNestedOverlays(this)) {
+        return;
       }
-      this.style.zIndex = zIndex;
-      this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
 
-      // If there is a nested overlay, call `bringToFront()` for it as well.
-      if (overlayMap.has(this)) {
-        overlayMap.get(this).bringToFront();
+      // Update stacking order of native popover-based overlays
+      if (this.matches(':popover-open')) {
+        this.hidePopover();
+        this.showPopover();
       }
+
+      // Update order of attached instances
+      this._removeAttachedInstance();
+      this._appendAttachedInstance();
     }
 
     /** @protected */
@@ -101,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';
         }
@@ -117,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
@@ -133,4 +132,16 @@ export const OverlayStackMixin = (superClass) =>
         }
       }
     }
+
+    /** @protected */
+    _appendAttachedInstance() {
+      attachedInstances.add(this);
+    }
+
+    /** @protected */
+    _removeAttachedInstance() {
+      if (this._isAttached) {
+        attachedInstances.delete(this);
+      }
+    }
   };

package/src/vaadin-overlay-utils.d.ts

@@ -11,3 +11,9 @@
  * https://github.com/floating-ui/floating-ui/blob/58ed169/packages/dom/src/autoUpdate.ts#L45
  */
 export function observeMove(element: HTMLElement, callback: () => void): () => void;
+
+/**
+ * Toggle the state attribute on the overlay element and also its owner element. This allows targeting state attributes
+ * in the light DOM in case the overlay is in the shadow DOM of its owner.
+ */
+export function setOverlayStateAttribute(overlay: HTMLElement, name: string, value: string | boolean): void;

package/src/vaadin-overlay-utils.js

@@ -87,3 +87,32 @@ export function observeMove(element, callback) {
 
   return cleanup;
 }
+
+/**
+ * Toggle the state attribute on the overlay element and also its owner element. This allows targeting state attributes
+ * in the light DOM in case the overlay is in the shadow DOM of its owner.
+ * @param {HTMLElement} overlay The overlay element on which to toggle the attribute.
+ * @param {string} name The name of the attribute to toggle.
+ * @param {string|boolean} value The value of the attribute. If a string is provided, it will be set as the attribute
+ * value. Otherwise, the attribute will be added or removed depending on whether `value` is truthy or falsy.
+ */
+export function setOverlayStateAttribute(overlay, name, value) {
+  const elements = [overlay];
+  if (overlay.owner) {
+    elements.push(overlay.owner);
+  }
+
+  if (typeof value === 'string') {
+    elements.forEach((element) => {
+      element.setAttribute(name, value);
+    });
+  } else if (value) {
+    elements.forEach((element) => {
+      element.setAttribute(name, '');
+    });
+  } else {
+    elements.forEach((element) => {
+      element.removeAttribute(name);
+    });
+  }
+}

package/src/vaadin-overlay.js

@@ -3,15 +3,14 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { processTemplates } from '@vaadin/component-base/src/templates.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-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 { OverlayMixin } from './vaadin-overlay-mixin.js';
-import { overlayStyles } from './vaadin-overlay-styles.js';
-
-registerStyles('vaadin-overlay', overlayStyles, { moduleId: 'vaadin-overlay-styles' });
 
 /**
  * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
@@ -78,10 +77,19 @@ registerStyles('vaadin-overlay', overlayStyles, { moduleId: 'vaadin-overlay-styl
  * @mixes DirMixin
  * @mixes OverlayMixin
  */
-class Overlay extends OverlayMixin(ThemableMixin(DirMixin(PolymerElement))) {
-  static get template() {
+class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-overlay';
+  }
+
+  static get styles() {
+    return overlayStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <div part="content" id="content">
           <slot></slot>
@@ -90,17 +98,6 @@ class Overlay extends OverlayMixin(ThemableMixin(DirMixin(PolymerElement))) {
     `;
   }
 
-  static get is() {
-    return 'vaadin-overlay';
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    processTemplates(this);
-  }
-
   /**
    * @event vaadin-overlay-open
    * Fired after the overlay is opened.

package/src/vaadin-lit-overlay.js

@@ -1,47 +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 { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { OverlayMixin } from './vaadin-overlay-mixin.js';
-import { overlayStyles } from './vaadin-overlay-styles.js';
-
-/**
- * LitElement based version of `<vaadin-overlay>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-overlay';
-  }
-
-  static get styles() {
-    return overlayStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <div part="content" id="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(Overlay);
-
-export { Overlay };

package/src/vaadin-overlay-styles.js

@@ -1,6 +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/
- */
-export { overlayStyles } from './vaadin-overlay-core-styles.js';

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

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

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

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

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

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

package/theme/material/vaadin-overlay.js

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