@vaadin/notification 25.3.0-alpha9 → 25.3.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "25.3.0-alpha9",
+  "version": "25.3.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,19 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.3.0-alpha9",
-    "@vaadin/lit-renderer": "25.3.0-alpha9",
-    "@vaadin/overlay": "25.3.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
+    "@vaadin/component-base": "25.3.0-beta1",
+    "@vaadin/lit-renderer": "25.3.0-beta1",
+    "@vaadin/overlay": "25.3.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha9",
-    "@vaadin/button": "25.3.0-alpha9",
-    "@vaadin/chai-plugins": "25.3.0-alpha9",
-    "@vaadin/test-runner-commands": "25.3.0-alpha9",
+    "@vaadin/aura": "25.3.0-beta1",
+    "@vaadin/button": "25.3.0-beta1",
+    "@vaadin/chai-plugins": "25.3.0-beta1",
+    "@vaadin/test-runner-commands": "25.3.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
+  "gitHead": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
 }

package/src/vaadin-notification-mixin.js

@@ -7,7 +7,6 @@ import { render } from 'lit';
 import { isTemplateResult } from 'lit/directive-helpers.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { shouldAnimate } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 /**
@@ -343,6 +342,27 @@ export const NotificationMixin = (superClass) =>
       this._card.removeEventListener('animationend', this.__animationEndListener);
     }
 
+    /**
+     * Detect whether an animation runs on the card, so that its end can be awaited before the
+     * card is removed. A card that is not rendered, has no animation name, or has a zero
+     * duration does not fire `animationend`.
+     *
+     * `getStateAnimations()` cannot replace this: the card declares the same keyframes for both
+     * states, so nothing restarts when it closes right after the opening animation ended, and no
+     * animation is found. The computed style still reports the declared animation, which is what
+     * the card needs in order to stay in the DOM until its height has collapsed.
+     * @private
+     */
+    __shouldAnimateCard() {
+      const style = getComputedStyle(this._card);
+      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;
+    }
+
     /**
      * Run the callback when the animation of the card itself ends. Animations of the
      * notification content also end on the card, as the content is in its light DOM.
@@ -365,7 +385,7 @@ export const NotificationMixin = (superClass) =>
 
         this._card.setAttribute('opening', '');
         this._appendNotificationCard();
-        if (shouldAnimate(this._card)) {
+        if (this.__shouldAnimateCard()) {
           this.__onCardAnimationEnd(() => this.__cleanUpOpeningClosingState());
         } else {
           this.__cleanUpOpeningClosingState();
@@ -428,7 +448,7 @@ export const NotificationMixin = (superClass) =>
       this.__cleanUpOpeningClosingState();
 
       this._card.setAttribute('closing', '');
-      if (shouldAnimate(this._card)) {
+      if (this.__shouldAnimateCard()) {
         this.__onCardAnimationEnd(() => {
           this._removeNotificationCard();
           this.__cleanUpOpeningClosingState();

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "25.3.0-alpha9",
+  "version": "25.3.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "25.3.0-alpha9",
+  "version": "25.3.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {