@vaadin/notification 24.4.6 → 24.5.0-alpha10

package/README.md

@@ -59,7 +59,7 @@ import '@vaadin/notification/src/vaadin-notification.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -38,22 +38,22 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.4.6",
-    "@vaadin/lit-renderer": "~24.4.6",
-    "@vaadin/vaadin-lumo-styles": "~24.4.6",
-    "@vaadin/vaadin-material-styles": "~24.4.6",
-    "@vaadin/vaadin-themable-mixin": "~24.4.6",
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/lit-renderer": "24.5.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/button": "~24.4.6",
-    "@vaadin/testing-helpers": "^0.6.0",
-    "sinon": "^13.0.2"
+    "@vaadin/button": "24.5.0-alpha10",
+    "@vaadin/chai-plugins": "24.5.0-alpha10",
+    "@vaadin/testing-helpers": "^1.0.0",
+    "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "46d3cdb72eb99d544c7bb86c3de95043b9e5857f"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

package/src/vaadin-notification.d.ts

@@ -27,8 +27,14 @@ export type NotificationRenderer = (root: HTMLElement, notification: Notificatio
  */
 export type NotificationOpenedChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired when the notification is closed.
+ */
+export type NotificationClosedEvent = CustomEvent;
+
 export interface NotificationCustomEventMap {
   'opened-changed': NotificationOpenedChangedEvent;
+  closed: NotificationClosedEvent;
 }
 
 export interface NotificationEventMap extends HTMLElementEventMap, NotificationCustomEventMap {}
@@ -99,6 +105,7 @@ declare class NotificationCard extends ThemableMixin(HTMLElement) {}
  * propagated to the internal `<vaadin-notification-card>`.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} closed - Fired when the notification is closed.
  */
 declare class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))) {
   /**

package/src/vaadin-notification.js

@@ -257,6 +257,7 @@ class NotificationCard extends ThemableMixin(PolymerElement) {
  * propagated to the internal `<vaadin-notification-card>`.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} closed - Fired when the notification is closed.
  *
  * @customElement
  * @extends HTMLElement
@@ -532,6 +533,7 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
     }
     this._card.removeAttribute('closing');
     this._container.opened = Boolean(this._container.firstElementChild);
+    this.dispatchEvent(new CustomEvent('closed'));
   }
 
   /** @private */
@@ -575,6 +577,12 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
       }
     }
   }
+
+  /**
+   * Fired when the notification is closed.
+   *
+   * @event closed
+   */
 }
 
 defineCustomElement(NotificationContainer);

package/theme/lumo/vaadin-notification-styles.js

@@ -15,7 +15,9 @@ registerStyles(
     [part='overlay'] {
       background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
       border-radius: var(--lumo-border-radius-l);
-      box-shadow: 0 0 0 1px var(--lumo-contrast-10pct), var(--lumo-box-shadow-l);
+      box-shadow:
+        0 0 0 1px var(--lumo-contrast-10pct),
+        var(--lumo-box-shadow-l);
       font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-m);
       font-weight: 400;
@@ -44,25 +46,25 @@ registerStyles(
       margin: var(--lumo-space-s) auto;
     }
 
-    :host([slot\$='stretch']) {
+    :host([slot$='stretch']) {
       margin: 0;
     }
 
-    :host([slot\$='stretch']) [part='overlay'] {
+    :host([slot$='stretch']) [part='overlay'] {
       border-radius: 0;
     }
 
     @media (min-width: 421px) {
-      :host(:not([slot\$='stretch'])) {
+      :host(:not([slot$='stretch'])) {
         display: flex;
       }
 
-      :host([slot\$='end']) {
+      :host([slot$='end']) {
         justify-content: flex-end;
       }
 
       :host([slot^='middle']),
-      :host([slot\$='center']) {
+      :host([slot$='center']) {
         display: flex;
         justify-content: center;
       }
@@ -132,6 +134,26 @@ registerStyles(
       animation: lumo-notification-exit-slide-down 300ms;
     }
 
+    :host([theme='success']) {
+      --_focus-ring-gap-color: var(--lumo-success-color);
+      --vaadin-focus-ring-color: var(--lumo-success-contrast-color);
+    }
+
+    :host([theme='warning']) {
+      --_focus-ring-gap-color: var(--lumo-warning-color);
+      --vaadin-focus-ring-color: var(--lumo-warning-contrast-color);
+    }
+
+    :host([theme='error']) {
+      --_focus-ring-gap-color: var(--lumo-error-color);
+      --vaadin-focus-ring-color: var(--lumo-error-contrast-color);
+    }
+
+    :host([theme='primary']) {
+      --_focus-ring-gap-color: var(--lumo-primary-color);
+      --vaadin-focus-ring-color: var(--lumo-primary-contrast-color);
+    }
+
     :host([theme~='primary']) [part='overlay'] {
       background: var(--lumo-primary-color);
       color: var(--lumo-primary-contrast-color);
@@ -187,7 +209,9 @@ registerStyles(
     :host([theme~='warning']) [part='overlay'] {
       background: var(--lumo-warning-color);
       color: var(--lumo-warning-contrast-color);
-      box-shadow: inset 0 0 0 1px var(--lumo-contrast-20pct), var(--lumo-box-shadow-l);
+      box-shadow:
+        inset 0 0 0 1px var(--lumo-contrast-20pct),
+        var(--lumo-box-shadow-l);
     }
 
     :host([theme~='warning']) {

package/theme/material/vaadin-notification-styles.js

@@ -30,7 +30,6 @@ const notificationCard = css`
     background-color: var(--material-background-color);
     border-radius: 4px;
     box-shadow: var(--material-shadow-elevation-6dp);
-
     padding: 14px 16px;
     justify-content: stretch;
   }
@@ -53,11 +52,11 @@ const notificationCard = css`
     margin: -8px 0;
   }
 
-  :host([slot\$='stretch']) {
+  :host([slot$='stretch']) {
     margin: 0 -4px;
   }
 
-  :host([slot\$='stretch']) [part='overlay'] {
+  :host([slot$='stretch']) [part='overlay'] {
     border-radius: 0;
   }
 
@@ -71,7 +70,7 @@ const notificationCard = css`
       margin: auto;
     }
 
-    :host([slot\$='stretch']) {
+    :host([slot$='stretch']) {
       margin: 0 -12px;
     }
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -112,6 +112,10 @@
               }
             ],
             "events": [
+              {
+                "name": "closed",
+                "description": "Fired when the notification is closed."
+              },
               {
                 "name": "opened-changed",
                 "description": "Fired when the `opened` property changes."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -54,6 +54,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@closed",
+              "description": "Fired when the notification is closed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@opened-changed",
               "description": "Fired when the `opened` property changes.",