@vaadin/notification 25.2.0-alpha8 → 25.2.0-beta1

package/custom-elements.json

@@ -263,7 +263,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
+          "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                       |\n:-----------------------------------------|\n| `--vaadin-notification-background`      |\n| `--vaadin-notification-border-color`    |\n| `--vaadin-notification-border-radius`   |\n| `--vaadin-notification-border-width`    |\n| `--vaadin-notification-container-gap`   |\n| `--vaadin-notification-padding`         |\n| `--vaadin-notification-shadow`          |\n| `--vaadin-notification-viewport-inset`  |\n| `--vaadin-notification-width`           |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
           "name": "Notification",
           "members": [
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,18 +37,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.2.0-alpha8",
-    "@vaadin/lit-renderer": "25.2.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha8",
+    "@vaadin/component-base": "25.2.0-beta1",
+    "@vaadin/lit-renderer": "25.2.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha8",
-    "@vaadin/button": "25.2.0-alpha8",
-    "@vaadin/chai-plugins": "25.2.0-alpha8",
-    "@vaadin/test-runner-commands": "25.2.0-alpha8",
+    "@vaadin/aura": "25.2.0-beta1",
+    "@vaadin/button": "25.2.0-beta1",
+    "@vaadin/chai-plugins": "25.2.0-beta1",
+    "@vaadin/test-runner-commands": "25.2.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
+  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
 }

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

@@ -104,7 +104,7 @@ export const notificationContainerStyles = css`
 
   [region-group] > [region$='center'] {
     left: 50%;
-    translate: -50%;
+    translate: round(-50%, 1px);
   }
 
   [region-group] > [region$='end'] {

package/src/vaadin-notification-mixin.js

@@ -11,8 +11,6 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
 
 /**
  * A mixin providing common notification container functionality.
- *
- * @polymerMixin
  */
 export const NotificationContainerMixin = (superClass) =>
   class extends superClass {
@@ -94,7 +92,7 @@ export const NotificationContainerMixin = (superClass) =>
       // Notifications are a separate overlay mechanism from vaadin-overlay, and
       // interacting with them should not close modal overlays
       const sourceEvent = event.detail.sourceEvent;
-      const isFromNotification = sourceEvent && sourceEvent.composedPath().indexOf(this) >= 0;
+      const isFromNotification = sourceEvent?.composedPath().indexOf(this) >= 0;
       if (isFromNotification) {
         event.preventDefault();
       }
@@ -103,10 +101,6 @@ export const NotificationContainerMixin = (superClass) =>
 
 /**
  * A mixin providing common notification functionality.
- *
- * @polymerMixin
- * @mixes OverlayClassMixin
- * @mixes ThemePropertyMixin
  */
 export const NotificationMixin = (superClass) =>
   class extends ThemePropertyMixin(OverlayClassMixin(superClass)) {
@@ -216,16 +210,16 @@ export const NotificationMixin = (superClass) =>
       if (options && Number.isFinite(options.duration)) {
         notification.duration = options.duration;
       }
-      if (options && options.position) {
+      if (options?.position) {
         notification.position = options.position;
       }
-      if (options && options.assertive) {
+      if (options?.assertive) {
         notification.assertive = options.assertive;
       }
-      if (options && options.theme) {
+      if (options?.theme) {
         notification.setAttribute('theme', options.theme);
       }
-      if (options && options.className) {
+      if (options?.className) {
         notification.overlayClass = options.className;
       }
       notification.renderer = renderer;
@@ -443,10 +437,4 @@ export const NotificationMixin = (superClass) =>
         }
       }
     }
-
-    /**
-     * Fired when the notification is closed.
-     *
-     * @event closed
-     */
   };

package/src/vaadin-notification.d.ts

@@ -84,10 +84,24 @@ declare class NotificationCard extends ThemableMixin(HTMLElement) {}
  * The following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:
  *
  * Part name | Description
- * ----------------|----------------
+ * ----------|----------------
  * `overlay` | The notification container
  * `content` | The content of the notification
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                       |
+ * :-----------------------------------------|
+ * | `--vaadin-notification-background`      |
+ * | `--vaadin-notification-border-color`    |
+ * | `--vaadin-notification-border-radius`   |
+ * | `--vaadin-notification-border-width`    |
+ * | `--vaadin-notification-container-gap`   |
+ * | `--vaadin-notification-padding`         |
+ * | `--vaadin-notification-shadow`          |
+ * | `--vaadin-notification-viewport-inset`  |
+ * | `--vaadin-notification-width`           |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * Note: the `theme` attribute value set on `<vaadin-notification>` is

package/src/vaadin-notification.js

@@ -19,9 +19,6 @@ import { NotificationContainerMixin, NotificationMixin } from './vaadin-notifica
  *
  * @customElement vaadin-notification-container
  * @extends HTMLElement
- * @mixes NotificationContainerMixin
- * @mixes ElementMixin
- * @mixes ThemableMixin
  * @private
  */
 class NotificationContainer extends NotificationContainerMixin(
@@ -60,7 +57,6 @@ class NotificationContainer extends NotificationContainerMixin(
  *
  * @customElement vaadin-notification-card
  * @extends HTMLElement
- * @mixes ThemableMixin
  * @private
  */
 class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
@@ -125,10 +121,24 @@ class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(Lit
  * The following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:
  *
  * Part name | Description
- * ----------------|----------------
+ * ----------|----------------
  * `overlay` | The notification container
  * `content` | The content of the notification
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                       |
+ * :-----------------------------------------|
+ * | `--vaadin-notification-background`      |
+ * | `--vaadin-notification-border-color`    |
+ * | `--vaadin-notification-border-radius`   |
+ * | `--vaadin-notification-border-width`    |
+ * | `--vaadin-notification-container-gap`   |
+ * | `--vaadin-notification-padding`         |
+ * | `--vaadin-notification-shadow`          |
+ * | `--vaadin-notification-viewport-inset`  |
+ * | `--vaadin-notification-width`           |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * Note: the `theme` attribute value set on `<vaadin-notification>` is
@@ -139,8 +149,6 @@ class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(Lit
  *
  * @customElement vaadin-notification
  * @extends HTMLElement
- * @mixes NotificationMixin
- * @mixes ElementMixin
  */
 class Notification extends NotificationMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
@@ -164,12 +172,6 @@ class Notification extends NotificationMixin(ElementMixin(ThemableMixin(PolylitM
       ></vaadin-notification-card>
     `;
   }
-
-  /**
-   * Fired when the notification is closed.
-   *
-   * @event closed
-   */
 }
 
 defineCustomElement(NotificationContainer);

package/web-types.json

@@ -1,23 +1,21 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-notification",
-          "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
+          "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                       |\n:-----------------------------------------|\n| `--vaadin-notification-background`      |\n| `--vaadin-notification-border-color`    |\n| `--vaadin-notification-border-radius`   |\n| `--vaadin-notification-border-width`    |\n| `--vaadin-notification-container-gap`   |\n| `--vaadin-notification-padding`         |\n| `--vaadin-notification-shadow`          |\n| `--vaadin-notification-viewport-inset`  |\n| `--vaadin-notification-width`           |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
           "attributes": [
             {
               "name": "assertive",
               "description": "When true, the notification card has `aria-live` attribute set to\n`assertive` instead of `polite`. This makes screen readers announce\nthe notification content immediately when it appears.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -26,9 +24,7 @@
               "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
               "value": {
                 "type": [
-                  "number",
-                  "null",
-                  "undefined"
+                  "number"
                 ]
               }
             },
@@ -37,9 +33,7 @@
               "description": "True if the notification is currently displayed.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -48,9 +42,7 @@
               "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -59,9 +51,7 @@
               "description": "Alignment of the notification in the viewport\nValid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -84,9 +74,7 @@
                 "description": "When true, the notification card has `aria-live` attribute set to\n`assertive` instead of `polite`. This makes screen readers announce\nthe notification content immediately when it appears.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -95,9 +83,7 @@
                 "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
                 "value": {
                   "type": [
-                    "number",
-                    "null",
-                    "undefined"
+                    "number"
                   ]
                 }
               },
@@ -106,9 +92,7 @@
                 "description": "True if the notification is currently displayed.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -117,9 +101,7 @@
                 "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               },
@@ -128,9 +110,7 @@
                 "description": "Alignment of the notification in the viewport\nValid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`",
                 "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.0-alpha8",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-notification",
-          "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
+          "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                       |\n:-----------------------------------------|\n| `--vaadin-notification-background`      |\n| `--vaadin-notification-border-color`    |\n| `--vaadin-notification-border-radius`   |\n| `--vaadin-notification-border-width`    |\n| `--vaadin-notification-container-gap`   |\n| `--vaadin-notification-padding`         |\n| `--vaadin-notification-shadow`          |\n| `--vaadin-notification-viewport-inset`  |\n| `--vaadin-notification-width`           |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
           "extension": true,
           "attributes": [
             {
@@ -27,15 +27,15 @@
               }
             },
             {
-              "name": "?opened",
-              "description": "True if the notification is currently displayed.",
+              "name": ".duration",
+              "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".duration",
-              "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
+              "name": "?opened",
+              "description": "True if the notification is currently displayed.",
               "value": {
                 "kind": "expression"
               }