@vaadin/notification 25.3.0-alpha8 → 25.3.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "25.3.0-alpha8",
+  "version": "25.3.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,18 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.3.0-alpha8",
-    "@vaadin/lit-renderer": "25.3.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
+    "@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-alpha8",
-    "@vaadin/button": "25.3.0-alpha8",
-    "@vaadin/chai-plugins": "25.3.0-alpha8",
-    "@vaadin/test-runner-commands": "25.3.0-alpha8",
+    "@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-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -56,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
+  "gitHead": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
 }

package/src/styles/vaadin-notification-card-base-styles.d.ts

@@ -5,4 +5,4 @@
  */
 import type { CSSResult } from 'lit';
 
-export const notificationCardStyles: CSSResult;
+export const notificationCardStyles: CSSResult[];

package/src/styles/vaadin-notification-card-base-styles.js

@@ -5,10 +5,57 @@
  */
 import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { overlayAnimationStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-animation-base-styles.js';
 
-export const notificationCardStyles = css`
+const notificationCard = css`
   :host {
     display: block;
+    position: relative;
+    --vaadin-overlay-animation-duration: 0.3s;
+    transition-duration: var(--vaadin-overlay-animation-duration);
+  }
+
+  :host([closing]) [part='overlay'] {
+    animation-fill-mode: both;
+  }
+
+  :host([slot^='top']) {
+    display: flex;
+    align-items: end;
+    --vaadin-overlay-translate-closed: 0% -30%;
+  }
+
+  :host([slot^='bottom']) {
+    --vaadin-overlay-translate-closed: 0% 30%;
+  }
+
+  /* Cards on the sides slide in horizontally, once the vertical collapse is done */
+  @media (min-width: 600px) and (min-height: 600px) {
+    :host([slot$='start']) {
+      --vaadin-overlay-translate-closed: -30% 0%;
+      --vaadin-overlay-animation-delay: var(--vaadin-overlay-animation-duration);
+    }
+
+    :host([slot$='end']) {
+      --vaadin-overlay-translate-closed: 30% 0%;
+      --vaadin-overlay-animation-delay: var(--vaadin-overlay-animation-duration);
+    }
+  }
+
+  :host([closing]) {
+    animation-direction: reverse;
+    animation-duration: var(--vaadin-overlay-animation-duration);
+    animation-delay: var(--vaadin-overlay-animation-duration);
+    transition-delay: var(--vaadin-overlay-animation-duration);
+  }
+
+  /* Cards scale down in place instead of sliding back out */
+  /* WebKit/Safari needs these to be explicitly set on the part=overlay element as well */
+  :host([closing]),
+  :host([closing]) [part='overlay'] {
+    --vaadin-overlay-translate-closed: 0%;
+    --vaadin-overlay-scale-closed: 0.98;
+    --vaadin-overlay-animation-delay: 0s;
   }
 
   [part='overlay'] {
@@ -30,4 +77,67 @@ export const notificationCardStyles = css`
       border: 3px solid !important;
     }
   }
+
+  /* The other cards make room for a card that opens, and close the gap when it is removed */
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (interpolate-size: allow-keywords) {
+      :host {
+        interpolate-size: allow-keywords;
+        transition-property: height, margin-top, margin-bottom;
+      }
+
+      @starting-style {
+        :host([opening]:not(:nth-child(1 of [slot='middle']))),
+        :host([closing]) {
+          height: 0;
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+        }
+      }
+
+      :host([closing]) {
+        height: 0;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        transition-delay: var(--vaadin-overlay-animation-duration);
+      }
+    }
+
+    /* Without interpolate-size, only the margins animate, and max-height stands in for the height */
+    @supports not (interpolate-size: allow-keywords) {
+      :host([opening]:not(:nth-child(1 of [slot='middle']))),
+      :host([closing]) {
+        animation-name: --notification-max-height, --notification-margins;
+        animation-duration: calc(var(--vaadin-overlay-animation-duration) * 2 + var(--vaadin-overlay-animation-delay));
+        animation-delay: 0s;
+        animation-timing-function: ease-in-out, cubic-bezier(0.4, 1.1, 0, 1);
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    /* The height animation of the fallback above is a keyframe animation, not a transition */
+    :host(:is([opening], [closing])) {
+      animation-name: --fade !important;
+    }
+  }
+
+  @keyframes --notification-max-height {
+    0% {
+      max-height: 0;
+    }
+
+    50% {
+      max-height: 20em;
+    }
+  }
+
+  @keyframes --notification-margins {
+    0% {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
 `;
+
+export const notificationCardStyles = [overlayAnimationStyles, notificationCard];

package/src/vaadin-notification-mixin.js

@@ -342,6 +342,42 @@ 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.
+     * @private
+     */
+    __onCardAnimationEnd(callback) {
+      this.__animationEndListener = (event) => {
+        if (event.target !== this._card) {
+          return;
+        }
+        callback();
+      };
+      this._card.addEventListener('animationend', this.__animationEndListener);
+    }
+
     /** @private */
     _animatedAppendNotificationCard() {
       if (this._card) {
@@ -349,8 +385,11 @@ export const NotificationMixin = (superClass) =>
 
         this._card.setAttribute('opening', '');
         this._appendNotificationCard();
-        this.__animationEndListener = () => this.__cleanUpOpeningClosingState();
-        this._card.addEventListener('animationend', this.__animationEndListener);
+        if (this.__shouldAnimateCard()) {
+          this.__onCardAnimationEnd(() => this.__cleanUpOpeningClosingState());
+        } else {
+          this.__cleanUpOpeningClosingState();
+        }
         this._didAnimateNotificationAppend = true;
       } else {
         this._didAnimateNotificationAppend = false;
@@ -409,13 +448,11 @@ export const NotificationMixin = (superClass) =>
       this.__cleanUpOpeningClosingState();
 
       this._card.setAttribute('closing', '');
-      const name = getComputedStyle(this._card).getPropertyValue('animation-name');
-      if (name && name !== 'none') {
-        this.__animationEndListener = () => {
+      if (this.__shouldAnimateCard()) {
+        this.__onCardAnimationEnd(() => {
           this._removeNotificationCard();
           this.__cleanUpOpeningClosingState();
-        };
-        this._card.addEventListener('animationend', this.__animationEndListener);
+        });
       } else {
         this._removeNotificationCard();
       }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "25.3.0-alpha8",
+  "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-alpha8",
+  "version": "25.3.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {