@vaadin/overlay 25.2.7 → 25.3.0-alpha10

package/custom-elements.json

@@ -26,6 +26,16 @@
           "description": "",
           "name": "OverlayFocusMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "attribute": "autofocus"
+            },
             {
               "kind": "field",
               "name": "focusTrap",
@@ -33,7 +43,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "attribute": "focus-trap"
             },
             {
@@ -58,12 +68,20 @@
             }
           ],
           "attributes": [
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "fieldName": "autofocus"
+            },
             {
               "name": "focus-trap",
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "fieldName": "focusTrap"
             },
             {
@@ -110,6 +128,20 @@
           "description": "",
           "name": "OverlayMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "module": "src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "bringToFront",
@@ -138,7 +170,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "attribute": "focus-trap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -284,12 +316,24 @@
             }
           ],
           "attributes": [
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "module": "src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "fieldName": "focusTrap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -593,6 +637,24 @@
           "name": "rootMargin",
           "default": "`${-insetTop}px ${-insetRight}px ${-insetBottom}px ${-insetLeft}px`"
         },
+        {
+          "kind": "function",
+          "name": "getStateAnimations",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLElement"
+              }
+            }
+          ],
+          "description": "Collect the animations that report the state of the given element, so that their end can be\nawaited before the element is hidden or removed. The animations are read instead of the\ncomputed style, so that the decision to wait cannot disagree with what the browser actually\ncreated: a keyframes rule that does not exist and an element that is not rendered both give\nan empty list.\n\nOnly CSS animations count, as the transitions and the script animations that `getAnimations()`\nalso returns do not report the state. Animations of any content are already left out, as\n`getAnimations()` only descends into the subtree when asked to. Animations that take no time\nare dropped as well, so that a delay on its own does not hold the state.",
+          "return": {
+            "type": {
+              "text": "!Array<!Animation>"
+            }
+          }
+        },
         {
           "kind": "function",
           "name": "setOverlayStateAttribute",
@@ -631,6 +693,14 @@
             "module": "src/vaadin-overlay-utils.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "getStateAnimations",
+          "declaration": {
+            "name": "getStateAnimations",
+            "module": "src/vaadin-overlay-utils.js"
+          }
+        },
         {
           "kind": "js",
           "name": "setOverlayStateAttribute",
@@ -650,6 +720,20 @@
           "description": "`<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay\ncan be populated imperatively by using `renderer` callback function.\n\n### Rendering\n\nThe renderer function provides `root`, `owner`, `model` arguments when applicable.\nGenerate DOM content by using `model` object properties if needed, append it to the `root`\nelement and control the state of the host element by accessing `owner`. Before generating new\ncontent, users are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-overlay id=\"overlay\"></vaadin-overlay>\n```\n```js\nconst overlay = document.querySelector('#overlay');\noverlay.renderer = function(root) {\n root.textContent = \"Overlay content\";\n};\n```\n\nRenderer is called on the opening of the overlay and each time the related model is updated.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following Shadow DOM parts are available for styling:\n\nPart name  | Description\n-----------|---------------------------------------------------------|\n`backdrop` | Backdrop of the overlay\n`overlay`  | Container for position/sizing/alignment of the content\n`content`  | Content of the overlay\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n----------|------------\n`opening` | Applied just after the overlay is opened. You can apply a CSS animation for this state.\n`closing` | Applied just before the overlay is closed. You can apply a CSS animation for this state.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description | Default value\n---|---|---\n`--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Overlay",
           "members": [
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "module": "src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "bringToFront",
@@ -682,7 +766,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "attribute": "focus-trap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -937,12 +1021,24 @@
           "tagName": "vaadin-overlay",
           "customElement": true,
           "attributes": [
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "module": "src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "fieldName": "focusTrap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.2.7",
+  "version": "25.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.2.7",
-    "@vaadin/component-base": "~25.2.7",
-    "@vaadin/vaadin-themable-mixin": "~25.2.7",
+    "@vaadin/a11y-base": "25.3.0-alpha10",
+    "@vaadin/component-base": "25.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.2.7",
-    "@vaadin/chai-plugins": "~25.2.7",
-    "@vaadin/test-runner-commands": "~25.2.7",
+    "@vaadin/aura": "25.3.0-alpha10",
+    "@vaadin/chai-plugins": "25.3.0-alpha10",
+    "@vaadin/test-runner-commands": "25.3.0-alpha10",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.2.7",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "14be1af674f3968cce68c6eb4742340694c4a949"
+  "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
 }

package/src/styles/vaadin-overlay-animation-base-styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2026 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 overlayAnimationProperties: CSSResult;
+
+export const overlayAnimationStyles: CSSResult;

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

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, unsafeCSS } from 'lit';
+import { registerCSSProperty } from '@vaadin/component-base/src/css-utils.js';
+
+/**
+ * The custom properties that make up the overlay animation CSS API. Both the
+ * property registrations and the `overlayAnimationProperties` snippet below are
+ * derived from this list, so a new property only needs to be added here.
+ *
+ * Only the closed state is part of the API. The opened state is left out of the
+ * keyframes so that it comes from the part itself, see the keyframes below.
+ *
+ * `--vaadin-overlay-transform-closed` has no initial value, which makes it resolve
+ * to `none` in the keyframes unless a theme sets it.
+ */
+const animationProperties = [
+  { name: '--vaadin-overlay-animation-duration', syntax: '<time>', initialValue: '0s' },
+  { name: '--vaadin-overlay-animation-delay', syntax: '<time>', initialValue: '0s' },
+  { name: '--vaadin-overlay-animation-timing-function', syntax: '*', initialValue: 'ease' },
+  { name: '--vaadin-overlay-opacity-closed', syntax: '<number>', initialValue: '0' },
+  { name: '--vaadin-overlay-translate-closed', syntax: '<length>+ | <percentage>+', initialValue: '0px' },
+  { name: '--vaadin-overlay-scale-closed', syntax: '<number> | <percentage>', initialValue: '1' },
+  { name: '--vaadin-overlay-transform-closed', syntax: '*' },
+];
+
+animationProperties.forEach((property) => {
+  registerCSSProperty({ inherits: false, ...property });
+});
+
+/**
+ * The overlay animation properties as a set of `inherit` declarations. The properties are
+ * registered as non-inheriting, so components with more than one shadow root boundary
+ * between the host and the overlay need to forward them explicitly.
+ */
+export const overlayAnimationProperties = unsafeCSS(
+  animationProperties.map(({ name }) => `${name}: inherit;`).join('\n'),
+);
+
+export const overlayAnimationStyles = css`
+  :host,
+  [part='overlay'],
+  [part='backdrop'] {
+    ${overlayAnimationProperties}
+  }
+
+  :host(:where([opening], [closing])) {
+    /* This empty animation only reports the state, the parts run the visible animation */
+    animation-name: --no-op;
+    animation-duration: var(--vaadin-overlay-animation-duration);
+    animation-delay: var(--vaadin-overlay-animation-delay);
+  }
+
+  :host(:where([closing])) [part='overlay'],
+  :host(:where([closing])) ::slotted(*) {
+    pointer-events: none !important;
+  }
+
+  :host(:where([opening], [closing])) :is([part='overlay'], [part='backdrop']) {
+    animation-name: --fade, --transform;
+    animation-duration: var(--vaadin-overlay-animation-duration);
+    animation-timing-function: var(--vaadin-overlay-animation-timing-function);
+    animation-delay: var(--vaadin-overlay-animation-delay);
+    /* Fill backwards only, so the closed value applies during the delay without overriding theme styles */
+    animation-fill-mode: backwards;
+
+    @media (prefers-reduced-motion) {
+      animation-name: --fade;
+    }
+  }
+
+  :host(:where([opening], [closing])) [part='backdrop'] {
+    animation-name: --fade;
+    animation-timing-function: linear;
+    --vaadin-overlay-opacity-closed: 0;
+  }
+
+  :host(:where([closing])) :is([part='overlay'], [part='backdrop']) {
+    animation-direction: reverse;
+  }
+
+  @keyframes --no-op {
+  }
+
+  /* Only the closed state is declared, so the animations end at the value the part already has */
+  @keyframes --transform {
+    0% {
+      transform: var(--vaadin-overlay-transform-closed);
+      translate: var(--vaadin-overlay-translate-closed);
+      scale: var(--vaadin-overlay-scale-closed);
+    }
+  }
+
+  @keyframes --fade {
+    0% {
+      opacity: var(--vaadin-overlay-opacity-closed);
+    }
+  }
+`;

package/src/styles/vaadin-overlay-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2026 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 overlayStyles: CSSResult[];

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

@@ -5,8 +5,9 @@
  */
 import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { overlayAnimationStyles } from './vaadin-overlay-animation-base-styles.js';
 
-export const overlayStyles = css`
+const overlayBase = css`
   :host {
     z-index: 200;
     position: fixed;
@@ -103,3 +104,5 @@ export const overlayStyles = css`
     }
   }
 `;
+
+export const overlayStyles = [overlayBase, overlayAnimationStyles];

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

@@ -11,12 +11,27 @@ export declare function OverlayFocusMixin<T extends Constructor<HTMLElement>>(
 
 export declare class OverlayFocusMixinClass {
   /**
-   * When true, opening the overlay moves focus to the first focusable child,
-   * or to the overlay part with tabindex if there are no focusable children.
+   * Set to true to move focus into the overlay automatically on open
+   * and keep it inside: Tab and Shift+Tab cycle through the overlay's
+   * content until the overlay is closed.
+   *
+   * Focus moves to the first tabbable element in the tab order. This
+   * can be the overlay itself if it has `tabindex` attribute set to `0`
+   * on the host element or the `overlay` shadow DOM part.
+   *
    * @attr {boolean} focus-trap
    */
   focusTrap: boolean;
 
+  /**
+   * Set to true to move focus into the overlay automatically on open.
+   *
+   * Focus moves to the first tabbable element in the tab order. This
+   * can be the overlay itself if it has `tabindex` attribute set to `0`
+   * on the host element or the `overlay` shadow DOM part.
+   */
+  autofocus: boolean;
+
   /**
    * Set to true to enable restoring of focus when overlay is closed.
    * @attr {boolean} restore-focus-on-close
@@ -40,9 +55,11 @@ export declare class OverlayFocusMixinClass {
   protected _saveFocus(): void;
 
   /**
-   * Trap focus within the overlay after opening has completed.
+   * Sets up focus after the overlay opening has completed: moves focus into
+   * the overlay if `autofocus` is enabled, and traps focus within the overlay
+   * if `focusTrap` is enabled.
    */
-  protected _trapFocus(): void;
+  protected _initFocus(): void;
 
   /**
    * Returns true if focus is still inside the overlay or on the body element,

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

@@ -5,15 +5,27 @@
  */
 import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
-import { getDeepActiveElement, isElementHidden, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
+import {
+  getDeepActiveElement,
+  getTabbableElements,
+  isElementFocused,
+  isElementHidden,
+  isKeyboardActive,
+} from '@vaadin/a11y-base/src/focus-utils.js';
 
 export const OverlayFocusMixin = (superClass) =>
   class OverlayFocusMixin extends superClass {
     static get properties() {
       return {
         /**
-         * When true, opening the overlay moves focus to the first focusable child,
-         * or to the overlay part with tabindex if there are no focusable children.
+         * Set to true to move focus into the overlay automatically on open
+         * and keep it inside: Tab and Shift+Tab cycle through the overlay's
+         * content until the overlay is closed.
+         *
+         * Focus moves to the first tabbable element in the tab order. This
+         * can be the overlay itself if it has `tabindex` attribute set to `0`
+         * on the host element or the `overlay` shadow DOM part.
+         *
          * @attr {boolean} focus-trap
          */
         focusTrap: {
@@ -21,6 +33,18 @@ export const OverlayFocusMixin = (superClass) =>
           value: false,
         },
 
+        /**
+         * Set to true to move focus into the overlay automatically on open.
+         *
+         * Focus moves to the first tabbable element in the tab order. This
+         * can be the overlay itself if it has `tabindex` attribute set to `0`
+         * on the host element or the `overlay` shadow DOM part.
+         */
+        autofocus: {
+          type: Boolean,
+          value: false,
+        },
+
         /**
          * Set to true to enable restoring of focus when overlay is closed.
          * @attr {boolean} restore-focus-on-close
@@ -66,11 +90,11 @@ export const OverlayFocusMixin = (superClass) =>
     }
 
     /**
-     * Override to specify another element used as a focus trap root,
+     * Override to specify another element used as a focus root,
      * e.g. the overlay's owner element, rather than overlay part.
      * @protected
      */
-    get _focusTrapRoot() {
+    get _focusRoot() {
       return this.$.overlay;
     }
 
@@ -103,13 +127,26 @@ export const OverlayFocusMixin = (superClass) =>
     }
 
     /**
-     * Trap focus within the overlay after opening has completed.
+     * Sets up focus after the overlay opening has completed: moves focus into
+     * the overlay if `autofocus` is enabled, and traps focus within the overlay
+     * if `focusTrap` is enabled.
      *
      * @protected
      */
-    _trapFocus() {
-      if (this.focusTrap && !isElementHidden(this._focusTrapRoot)) {
-        this.__focusTrapController.trapFocus(this._focusTrapRoot);
+    _initFocus() {
+      if (isElementHidden(this._focusRoot)) {
+        return;
+      }
+
+      if (this.autofocus) {
+        const tabbables = getTabbableElements(this._focusRoot);
+        if (!tabbables.some(isElementFocused)) {
+          tabbables[0]?.focus({ focusVisible: isKeyboardActive() });
+        }
+      }
+
+      if (this.focusTrap) {
+        this.__focusTrapController.trapFocus(this._focusRoot);
       }
     }
 

package/src/vaadin-overlay-mixin.js

@@ -6,7 +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';
+import { getStateAnimations, setOverlayStateAttribute } from './vaadin-overlay-utils.js';
 
 export const OverlayMixin = (superClass) =>
   class OverlayMixin extends OverlayFocusMixin(OverlayStackMixin(superClass)) {
@@ -132,19 +132,6 @@ export const OverlayMixin = (superClass) =>
       if (this.$.backdrop) {
         this.$.backdrop.addEventListener('click', () => {});
       }
-
-      this.addEventListener('mouseup', () => {
-        // In Chrome, focus moves to body on overlay content mousedown
-        // See https://github.com/vaadin/flow-components/issues/5507
-        if (document.activeElement === document.body && this.$.overlay.getAttribute('tabindex') === '0') {
-          this.$.overlay.focus();
-        }
-      });
-
-      this.addEventListener('animationcancel', () => {
-        this._flushAnimation('opening');
-        this._flushAnimation('closing');
-      });
     }
 
     /** @protected */
@@ -359,7 +346,7 @@ export const OverlayMixin = (superClass) =>
 
         this.__scheduledOpen = requestAnimationFrame(() => {
           setTimeout(() => {
-            this._trapFocus();
+            this._initFocus();
 
             // Dispatch the event on the overlay. Not using composed, as propagating the event through shadow roots
             // could have side effects when nesting overlays
@@ -401,33 +388,35 @@ export const OverlayMixin = (superClass) =>
     }
 
     /**
-     * @return {boolean}
-     * @private
-     */
-    _shouldAnimate() {
-      const style = getComputedStyle(this);
-      const name = style.getPropertyValue('animation-name');
-      const hidden = style.getPropertyValue('display') === 'none';
-      return !hidden && name && name !== 'none';
-    }
-
-    /**
+     * Run the callback once every animation reporting the state has ended, or right away when
+     * there is none.
+     *
      * @param {string} type
      * @param {Function} callback
      * @private
      */
     _enqueueAnimation(type, callback) {
+      const animations = getStateAnimations(this);
+      if (animations.length === 0) {
+        callback();
+        return;
+      }
+
       const handler = `__${type}Handler`;
-      const listener = (event) => {
-        if (event && event.target !== this) {
+      const finish = () => {
+        // The phase may already have been finished by _flushAnimation(), or superseded by a
+        // later one of the same type, in which case this callback no longer applies
+        if (this[handler] !== finish) {
           return;
         }
-        callback();
-        this.removeEventListener('animationend', listener);
+        // Cleared before the callback, so that a listener reopening the overlay synchronously
+        // installs its own handler rather than having it deleted afterwards
         delete this[handler];
+        callback();
       };
-      this[handler] = listener;
-      this.addEventListener('animationend', listener);
+      this[handler] = finish;
+      // A cancelled animation rejects, which ends the phase just as finishing does
+      Promise.all(animations.map((animation) => animation.finished)).then(finish, finish);
     }
 
     /**
@@ -448,19 +437,14 @@ export const OverlayMixin = (superClass) =>
       }
       this._attachOverlay();
       this._appendAttachedInstance();
-      this.bringToFront();
       if (!this.modeless) {
         this._enterModalState();
       }
       setOverlayStateAttribute(this, 'opening', true);
 
-      if (this._shouldAnimate()) {
-        this._enqueueAnimation('opening', () => {
-          this._finishOpening();
-        });
-      } else {
+      this._enqueueAnimation('opening', () => {
         this._finishOpening();
-      }
+      });
     }
 
     /** @private */
@@ -494,13 +478,9 @@ export const OverlayMixin = (superClass) =>
         setOverlayStateAttribute(this, 'closing', true);
         this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
 
-        if (this._shouldAnimate()) {
-          this._enqueueAnimation('closing', () => {
-            this._finishClosing();
-          });
-        } else {
+        this._enqueueAnimation('closing', () => {
           this._finishClosing();
-        }
+        });
       }
     }
 
@@ -557,6 +537,11 @@ export const OverlayMixin = (superClass) =>
 
       if (this.opened && !evt.defaultPrevented) {
         this.close(event);
+
+        // Only for modal overlays which make underlying content non-interactive.
+        if (!this.opened && !this.modeless) {
+          event.preventDefault();
+        }
       }
     }
 
@@ -570,7 +555,7 @@ export const OverlayMixin = (superClass) =>
       }
 
       // Only close modeless overlay on Esc press when it contains focus
-      if (!this._shouldAddGlobalListeners() && !event.composedPath().includes(this._focusTrapRoot)) {
+      if (!this._shouldAddGlobalListeners() && !event.composedPath().includes(this._focusRoot)) {
         return;
       }
 

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

@@ -12,6 +12,20 @@
  */
 export function observeMove(element: HTMLElement, callback: () => void): () => void;
 
+/**
+ * Collect the animations that report the state of the given element, so that their end can be
+ * awaited before the element is hidden or removed. The animations are read instead of the
+ * computed style, so that the decision to wait cannot disagree with what the browser actually
+ * created: a keyframes rule that does not exist and an element that is not rendered both give
+ * an empty list.
+ *
+ * Only CSS animations count, as the transitions and the script animations that `getAnimations()`
+ * also returns do not report the state. Animations of any content are already left out, as
+ * `getAnimations()` only descends into the subtree when asked to. Animations that take no time
+ * are dropped as well, so that a delay on its own does not hold the state.
+ */
+export function getStateAnimations(element: HTMLElement): Animation[];
+
 /**
  * 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.

package/src/vaadin-overlay-utils.js

@@ -85,6 +85,29 @@ export function observeMove(element, callback) {
   return cleanup;
 }
 
+/**
+ * Collect the animations that report the state of the given element, so that their end can be
+ * awaited before the element is hidden or removed. The animations are read instead of the
+ * computed style, so that the decision to wait cannot disagree with what the browser actually
+ * created: a keyframes rule that does not exist and an element that is not rendered both give
+ * an empty list.
+ *
+ * Only CSS animations count, as the transitions and the script animations that `getAnimations()`
+ * also returns do not report the state. Animations of any content are already left out, as
+ * `getAnimations()` only descends into the subtree when asked to. Animations that take no time
+ * are dropped as well, so that a delay on its own does not hold the state.
+ *
+ * @param {HTMLElement} element
+ * @return {!Array<!Animation>}
+ */
+export function getStateAnimations(element) {
+  return element
+    .getAnimations()
+    .filter(
+      (animation) => animation instanceof CSSAnimation && animation.effect.getComputedTiming().activeDuration > 0,
+    );
+}
+
 /**
  * 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.