✨ Added ability to click-to-close toast

Author: codewithkyle

src/toaster.ts

@@ -17,7 +17,9 @@ class Toaster {
         for (let i = this.toastQueue.length - 1; i >= 0; i--) {
             this.toastQueue[i].duration -= deltaTime;
             if (this.toastQueue[i].duration <= 0) {
-                this.toastQueue[i].el.remove();
+                if (this.toastQueue[i].el.isConnected) {
+                    this.toastQueue[i].el.remove();
+                }
                 this.toastQueue.splice(i, 1);
             }
         }
@@ -50,6 +52,10 @@ class Toaster {
             el.classList.add(...toast.classes);
         }
         toast.el = el;
+        toast.el.addEventListener("click", () => {
+            toast.el.remove();
+            this.toastQueue.splice(this.toastQueue.indexOf(toast), 1);
+        });
         this.toastQueue.push(toast);
         this.flip(el);
     }

test/toaster.css

@@ -25,6 +25,12 @@ toaster-component output{
         fade-out 0.3s 4.4s ease;
     animation-fill-mode: forwards;
     font-size: var(--font-sm);
+    user-select: none;
+    cursor: pointer;
+    pointer-events: all;
+}
+toaster-component output:active{
+    transform: scale(0.95);
 }
 @keyframes fade-in {
   from { opacity: 0 }