@vaadin/notification 25.2.7 → 25.3.0-alpha10

package/custom-elements.json

@@ -418,30 +418,6 @@
               "name": "opened-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "NotificationMixin",
-              "module": "src/vaadin-notification-mixin.js"
-            },
-            {
-              "name": "ElementMixin",
-              "package": "@vaadin/component-base/src/element-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-notification",
-          "customElement": true,
           "attributes": [
             {
               "name": "assertive",
@@ -514,8 +490,39 @@
                 "name": "NotificationMixin",
                 "module": "src/vaadin-notification-mixin.js"
               }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "NotificationMixin",
+              "module": "src/vaadin-notification-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-notification",
+          "customElement": true
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "25.2.7",
+  "version": "25.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,18 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "~25.2.7",
-    "@vaadin/lit-renderer": "~25.2.7",
-    "@vaadin/vaadin-themable-mixin": "~25.2.7",
+    "@vaadin/component-base": "25.3.0-alpha10",
+    "@vaadin/lit-renderer": "25.3.0-alpha10",
+    "@vaadin/overlay": "25.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.2.7",
-    "@vaadin/button": "~25.2.7",
-    "@vaadin/chai-plugins": "~25.2.7",
-    "@vaadin/test-runner-commands": "~25.2.7",
+    "@vaadin/aura": "25.3.0-alpha10",
+    "@vaadin/button": "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",
@@ -56,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "14be1af674f3968cce68c6eb4742340694c4a949"
+  "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
 }

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/src/vaadin-notification.js

@@ -17,6 +17,7 @@ import { NotificationContainerMixin, NotificationMixin } from './vaadin-notifica
 /**
  * An element used internally by `<vaadin-notification>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-notification-container
  * @extends HTMLElement
  * @private
@@ -55,6 +56,7 @@ class NotificationContainer extends NotificationContainerMixin(
 /**
  * An element used internally by `<vaadin-notification>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-notification-card
  * @extends HTMLElement
  * @private
@@ -147,6 +149,7 @@ class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(Lit
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} closed - Fired when the notification is closed.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-notification
  * @extends HTMLElement
  */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "25.2.7",
+  "version": "25.3.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -60,9 +60,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             }

package/web-types.lit.json

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