@aurodesignsystem-dev/auro-toast 0.0.0-pr121.20 → 0.0.0-pr121.22

package/demo/api.md

@@ -503,20 +503,42 @@ const toastDefs = [
   { id: "dynamicToast-success", variant: "success", message: "Successfully added lap infant.", btnId: "dynamicToastBtn-success" },
 ];
 
+// simple in-memory registry of active toasts
+const activeToasts = new Map();
+
+function generateToastId(baseId) {
+  return `${baseId}-${crypto.randomUUID()}`;
+}
+
 export function initDynamicToastsExample() {
   const toaster = document.querySelector("#dynamicToaster");
 
-  toastDefs.forEach(({ id, variant, message, btnId }) => {
+  toastDefs.forEach(({ id: baseId, variant, message, btnId }) => {
     document.querySelector(`#${btnId}`).addEventListener("click", () => {
       const toast = document.createElement("auro-toast");
-      toast.id = id;
+
+      const toastId = generateToastId(baseId);
+
+      toast.id = toastId;
+
       if (variant) {
         toast.setAttribute("variant", variant);
       }
+
       toast.setAttribute("visible", true);
       toast.textContent = message;
+
       toaster.appendChild(toast);
-      console.log("Toast added:", toast); // eslint-disable-line no-console
+
+      // 👇 now the ID is actually used meaningfully
+      activeToasts.set(toastId, toast);
+
+      console.log("Toast added:", toastId);
+
+      // optional cleanup if your component doesn't auto-remove itself
+      toast.addEventListener("onToastClose", () => {
+        activeToasts.delete(toastId);
+      });
     });
   });
 }

package/demo/api.min.js

@@ -138,20 +138,42 @@ const toastDefs = [
   { id: "dynamicToast-success", variant: "success", message: "Successfully added lap infant.", btnId: "dynamicToastBtn-success" },
 ];
 
+// simple in-memory registry of active toasts
+const activeToasts = new Map();
+
+function generateToastId(baseId) {
+  return `${baseId}-${crypto.randomUUID()}`;
+}
+
 function initDynamicToastsExample() {
   const toaster = document.querySelector("#dynamicToaster");
 
-  toastDefs.forEach(({ id, variant, message, btnId }) => {
+  toastDefs.forEach(({ id: baseId, variant, message, btnId }) => {
     document.querySelector(`#${btnId}`).addEventListener("click", () => {
       const toast = document.createElement("auro-toast");
-      toast.id = id;
+
+      const toastId = generateToastId(baseId);
+
+      toast.id = toastId;
+
       if (variant) {
         toast.setAttribute("variant", variant);
       }
+
       toast.setAttribute("visible", true);
       toast.textContent = message;
+
       toaster.appendChild(toast);
-      console.log("Toast added:", toast); // eslint-disable-line no-console
+
+      // 👇 now the ID is actually used meaningfully
+      activeToasts.set(toastId, toast);
+
+      console.log("Toast added:", toastId);
+
+      // optional cleanup if your component doesn't auto-remove itself
+      toast.addEventListener("onToastClose", () => {
+        activeToasts.delete(toastId);
+      });
     });
   });
 }

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-toast",
-  "version": "0.0.0-pr121.20",
+  "version": "0.0.0-pr121.22",
   "description": "auro-toast HTML custom element",
   "repository": {
     "type": "git",