@nectary/components 5.38.0 → 5.38.1

package/bundle.js

@@ -15893,7 +15893,7 @@ class Toast extends NectaryElement {
     this.#clearTimeout();
   }
   static get observedAttributes() {
-    return ["text", "persistent"];
+    return ["text", "type", "persistent"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -15901,6 +15901,7 @@ class Toast extends NectaryElement {
         updateAttribute(this.#$text, name, newVal);
         break;
       }
+      case "type":
       case "persistent": {
         this.#updateTimeout();
         break;
@@ -15926,7 +15927,8 @@ class Toast extends NectaryElement {
     updateBooleanAttribute(this, "persistent", isPersistent);
   }
   #updateTimeout() {
-    if (this.persistent) {
+    const type = getAttribute(this, "type");
+    if (this.persistent || type === "error" || type === "warn") {
       this.#clearTimeout();
       return;
     }
@@ -15950,7 +15952,7 @@ class Toast extends NectaryElement {
 }
 defineCustomElement("sinch-toast", Toast);
 const originValues = ["bottom-right", "top-right"];
-const templateHTML$1 = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list" aria-live="polite"></div>';
+const templateHTML$1 = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list" role="status" aria-live="polite" aria-atomic="false"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
@@ -16061,6 +16063,27 @@ class ToastManager extends NectaryElement {
       this.#onAnimateRemove(item, removeIndex);
       ++removeIndex;
     }
+    let hasNewItems = false;
+    let isAssertive = false;
+    for (const item of slotItems) {
+      if (this.#map.has(item)) {
+        continue;
+      }
+      hasNewItems = true;
+      if (item instanceof Toast) {
+        const type = item.type;
+        if (type === "error" || type === "warn") {
+          isAssertive = true;
+        }
+      }
+    }
+    if (slotItems.length === 0) {
+      this.#$list.setAttribute("role", "status");
+      this.#$list.setAttribute("aria-live", "polite");
+    } else if (hasNewItems) {
+      this.#$list.setAttribute("role", isAssertive ? "alert" : "status");
+      this.#$list.setAttribute("aria-live", isAssertive ? "assertive" : "polite");
+    }
     let addIndex = 0;
     for (const item of slotItems) {
       if (this.#map.has(item)) {
@@ -16069,12 +16092,6 @@ class ToastManager extends NectaryElement {
       const cloned = cloneNode(item, true);
       const rect = item.getBoundingClientRect();
       const wrapper = document.createElement("div");
-      if (item instanceof Toast) {
-        if (item.hasAttribute("type")) {
-          const type = item.type;
-          this.#$list.setAttribute("aria-live", type === "error" || type === "warn" ? "assertive" : "polite");
-        }
-      }
       wrapper.className = "item-wrapper";
       wrapper.appendChild(cloned);
       this.#$list.appendChild(wrapper);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.38.0",
+  "version": "5.38.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/toast/index.js

@@ -29,7 +29,7 @@ class Toast extends NectaryElement {
     this.#clearTimeout();
   }
   static get observedAttributes() {
-    return ["text", "persistent"];
+    return ["text", "type", "persistent"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -37,6 +37,7 @@ class Toast extends NectaryElement {
         updateAttribute(this.#$text, name, newVal);
         break;
       }
+      case "type":
       case "persistent": {
         this.#updateTimeout();
         break;
@@ -62,7 +63,8 @@ class Toast extends NectaryElement {
     updateBooleanAttribute(this, "persistent", isPersistent);
   }
   #updateTimeout() {
-    if (this.persistent) {
+    const type = getAttribute(this, "type");
+    if (this.persistent || type === "error" || type === "warn") {
       this.#clearTimeout();
       return;
     }

package/toast/types.d.ts

@@ -5,7 +5,7 @@ export type TSinchToastProps = {
     type: TSinchToastType;
     /** Text */
     text: string;
-    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    /** Persistent, i.e. doesn't automatically disappear after 5s. Error and warn toasts are always persistent. */
     persistent?: boolean;
 };
 export type TSinchToastEvents = {

package/toast-manager/index.js

@@ -5,7 +5,7 @@ import { shouldReduceMotion, getLiteralAttribute, updateLiteralAttribute, cloneN
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { originValues } from "./utils.js";
-const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list" aria-live="polite"></div>';
+const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list" role="status" aria-live="polite" aria-atomic="false"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
@@ -116,6 +116,27 @@ class ToastManager extends NectaryElement {
       this.#onAnimateRemove(item, removeIndex);
       ++removeIndex;
     }
+    let hasNewItems = false;
+    let isAssertive = false;
+    for (const item of slotItems) {
+      if (this.#map.has(item)) {
+        continue;
+      }
+      hasNewItems = true;
+      if (item instanceof Toast) {
+        const type = item.type;
+        if (type === "error" || type === "warn") {
+          isAssertive = true;
+        }
+      }
+    }
+    if (slotItems.length === 0) {
+      this.#$list.setAttribute("role", "status");
+      this.#$list.setAttribute("aria-live", "polite");
+    } else if (hasNewItems) {
+      this.#$list.setAttribute("role", isAssertive ? "alert" : "status");
+      this.#$list.setAttribute("aria-live", isAssertive ? "assertive" : "polite");
+    }
     let addIndex = 0;
     for (const item of slotItems) {
       if (this.#map.has(item)) {
@@ -124,12 +145,6 @@ class ToastManager extends NectaryElement {
       const cloned = cloneNode(item, true);
       const rect = item.getBoundingClientRect();
       const wrapper = document.createElement("div");
-      if (item instanceof Toast) {
-        if (item.hasAttribute("type")) {
-          const type = item.type;
-          this.#$list.setAttribute("aria-live", type === "error" || type === "warn" ? "assertive" : "polite");
-        }
-      }
       wrapper.className = "item-wrapper";
       wrapper.appendChild(cloned);
       this.#$list.appendChild(wrapper);