@vaadin/overlay 25.3.0-alpha8 → 25.3.0-alpha9

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": "shouldAnimate",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLElement"
+              }
+            }
+          ],
+          "description": "Detect whether an animation runs on the given element, so that its end can be\nawaited before the element is hidden or removed. An element that is not rendered,\nhas no animation name, or has a zero duration does not fire `animationend`.",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          }
+        },
         {
           "kind": "function",
           "name": "setOverlayStateAttribute",
@@ -631,6 +693,14 @@
             "module": "src/vaadin-overlay-utils.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "shouldAnimate",
+          "declaration": {
+            "name": "shouldAnimate",
+            "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.3.0-alpha8",
+  "version": "25.3.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha8",
-    "@vaadin/component-base": "25.3.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
+    "@vaadin/a11y-base": "25.3.0-alpha9",
+    "@vaadin/component-base": "25.3.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha8",
-    "@vaadin/chai-plugins": "25.3.0-alpha8",
-    "@vaadin/test-runner-commands": "25.3.0-alpha8",
+    "@vaadin/aura": "25.3.0-alpha9",
+    "@vaadin/chai-plugins": "25.3.0-alpha9",
+    "@vaadin/test-runner-commands": "25.3.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
+  "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
 }

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,8 +55,9 @@ export declare class OverlayFocusMixinClass {
   protected _saveFocus(): void;
 
   /**
-   * Sets up focus after the overlay opening has completed: traps focus
-   * within the overlay if `focusTrap` is enabled.
+   * 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 _initFocus(): void;
 

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
@@ -103,13 +127,25 @@ export const OverlayFocusMixin = (superClass) =>
     }
 
     /**
-     * Sets up focus after the overlay opening has completed: traps focus
-     * within the overlay if `focusTrap` is enabled.
+     * 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
      */
     _initFocus() {
-      if (this.focusTrap && !isElementHidden(this._focusRoot)) {
+      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 { setOverlayStateAttribute, shouldAnimate } from './vaadin-overlay-utils.js';
 
 export const OverlayMixin = (superClass) =>
   class OverlayMixin extends OverlayFocusMixin(OverlayStackMixin(superClass)) {
@@ -133,14 +133,6 @@ export const OverlayMixin = (superClass) =>
         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');
@@ -405,14 +397,7 @@ export const OverlayMixin = (superClass) =>
      * @private
      */
     _shouldAnimate() {
-      const style = getComputedStyle(this);
-      const name = style.getPropertyValue('animation-name');
-      const hasDuration = style
-        .getPropertyValue('animation-duration')
-        .split(',')
-        .some((duration) => parseFloat(duration) > 0);
-      const hidden = style.getPropertyValue('display') === 'none';
-      return !hidden && name && name !== 'none' && hasDuration;
+      return shouldAnimate(this);
     }
 
     /**

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

@@ -12,6 +12,13 @@
  */
 export function observeMove(element: HTMLElement, callback: () => void): () => void;
 
+/**
+ * Detect whether an animation runs on the given element, so that its end can be
+ * awaited before the element is hidden or removed. An element that is not rendered,
+ * has no animation name, or has a zero duration does not fire `animationend`.
+ */
+export function shouldAnimate(element: HTMLElement): boolean;
+
 /**
  * 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,24 @@ export function observeMove(element, callback) {
   return cleanup;
 }
 
+/**
+ * Detect whether an animation runs on the given element, so that its end can be
+ * awaited before the element is hidden or removed. An element that is not rendered,
+ * has no animation name, or has a zero duration does not fire `animationend`.
+ *
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+export function shouldAnimate(element) {
+  const style = getComputedStyle(element);
+  const name = style.getPropertyValue('animation-name');
+  const hasDuration = style
+    .getPropertyValue('animation-duration')
+    .split(',')
+    .some((duration) => parseFloat(duration) > 0);
+  return style.getPropertyValue('display') !== 'none' && name && name !== 'none' && hasDuration;
+}
+
 /**
  * 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.