@vaadin/overlay 25.0.0-alpha7 → 25.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -36,17 +36,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha7",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@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",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/chai-plugins": "25.0.0-alpha8",
+    "@vaadin/test-runner-commands": "25.0.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
 }

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

@@ -7,76 +7,81 @@ import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const overlayStyles = css`
-  @layer base {
-    :host {
-      z-index: 200;
-      position: fixed;
+  :host {
+    z-index: 200;
+    position: fixed;
 
-      /* Despite of what the names say, <vaadin-overlay> is just a container
+    /* 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
+    /* 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);
+    inset: 8px;
+    bottom: var(--vaadin-overlay-viewport-bottom);
 
-      /* 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;
+    /* Override native [popover] user agent styles */
+    width: auto;
+    height: auto;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    overflow: visible;
 
-      /* Allow centering when max-width/max-height applies. */
-      margin: auto;
+    /* 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;
 
-      /* The host is not clickable, only the overlay part is. */
-      pointer-events: none;
+    /* Allow centering when max-width/max-height applies. */
+    margin: auto;
 
-      /* Remove tap highlight on touch devices. */
-      -webkit-tap-highlight-color: transparent;
+    /* The host is not clickable, only the overlay part is. */
+    pointer-events: none;
 
-      /* CSS API for host */
-      --vaadin-overlay-viewport-bottom: 8px;
-    }
+    /* Remove tap highlight on touch devices. */
+    -webkit-tap-highlight-color: transparent;
 
-    :host([hidden]),
-    :host(:not([opened]):not([closing])),
-    :host(:not([opened]):not([closing])) [part='overlay'] {
-      display: none !important;
-    }
+    /* CSS API for host */
+    --vaadin-overlay-viewport-bottom: 8px;
+  }
 
-    [part='overlay'] {
-      background: var(--vaadin-overlay-background, var(--vaadin-background-color));
-      border: var(--vaadin-overlay-border, 1px solid 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;
-    }
+  :host([hidden]),
+  :host(:not([opened]):not([closing])),
+  :host(:not([opened]):not([closing])) [part='overlay'] {
+    display: none !important;
+  }
 
-    [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'] {
+    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;
+  }
 
-    @media (forced-colors: active) {
-      [part='overlay'] {
-        border: 3px solid;
-      }
+  [part='overlay']:focus-visible {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  }
 
-      [part='overlay']:focus-visible {
-        outline: var(--vaadin-focus-ring-width) solid;
-        outline-offset: 1px;
-      }
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      border: 3px solid;
     }
   }
 `;

package/src/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 */

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

@@ -48,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();
@@ -62,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.
      *
@@ -127,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.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,
         },
       };
@@ -123,7 +125,9 @@ export const OverlayMixin = (superClass) =>
       // 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 +167,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);
       }
     }
 
@@ -256,11 +260,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)) {
@@ -279,11 +283,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();
@@ -292,7 +308,7 @@ export const OverlayMixin = (superClass) =>
           setTimeout(() => {
             this._trapFocus();
 
-            this.dispatchEvent(new CustomEvent('vaadin-overlay-open', { bubbles: true }));
+            this.dispatchEvent(new CustomEvent('vaadin-overlay-open', { bubbles: true, composed: true }));
           });
         });
 
@@ -369,14 +385,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', () => {
@@ -392,19 +410,19 @@ export const OverlayMixin = (superClass) =>
       this._placeholder = document.createComment('vaadin-overlay-placeholder');
       this.parentNode.insertBefore(this._placeholder, this);
       document.body.appendChild(this);
-      this.bringToFront();
     }
 
     /** @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'));
     }
 
@@ -413,9 +431,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()) {

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,14 +4,17 @@
  * 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);
+  [...attachedInstances].filter(
+    (el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'),
+  );
 
 /**
  * Returns all attached overlay instances excluding notification container,
@@ -20,6 +23,24 @@ const getAttachedInstances = () =>
  */
 const getOverlayInstances = () => getAttachedInstances().filter((el) => el.$.overlay);
 
+/**
+ * Returns true if all the instances on top of the overlay are nested overlays.
+ * @private
+ */
+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.
  * @param {HTMLElement} overlay
@@ -70,20 +91,48 @@ 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() {
+      // 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 = frontmost.__zIndex;
+        const frontmostZIndex = parseFloat(getComputedStyle(frontmost).zIndex);
         zIndex = frontmostZIndex + 1;
       }
       this.style.zIndex = zIndex;
-      this.__zIndex = zIndex || parseFloat(getComputedStyle(this).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.
+      if (isLastOverlay(this) || hasOnlyNestedOverlays(this)) {
+        return;
+      }
+
+      // 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();
 
       // If there is a nested overlay, call `bringToFront()` for it as well.
       if (overlayMap.has(this)) {
@@ -133,4 +182,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

@@ -77,7 +77,7 @@ import { OverlayMixin } from './vaadin-overlay-mixin.js';
  * @mixes DirMixin
  * @mixes OverlayMixin
  */
-class Overlay extends OverlayMixin(DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
+class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-overlay';
   }