From cdcc21c6c65921cad41e1b3355bdd530c23f2362 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 16 Jun 2026 17:25:08 +0200
Subject: [PATCH] feat: add destructive variant to toast component

---
 static/toast.ts       | 4 +++-
 templates/base.gohtml | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/static/toast.ts b/static/toast.ts
index 074d502..61856fa 100644
--- a/static/toast.ts
+++ b/static/toast.ts
@@ -3,6 +3,7 @@ export {};
 interface ToastOptions {
   message: string;
   duration?: number;
+  variant?: "default" | "destructive";
 }
 
 /** Return the toast container element. */
@@ -12,7 +13,7 @@ const toastContainer = (): HTMLElement | null => document.getElementById("toast-
  * Show a toast notification with optional auto-dismiss.
  * Exposed globally via window.showToast.
  */
-const showToast = ({ message, duration = 3000 }: ToastOptions): void => {
+const showToast = ({ message, duration = 3000, variant = "default" }: ToastOptions): void => {
   const container = toastContainer();
   const template = document.getElementById("toast-template") as HTMLTemplateElement | null;
 
@@ -23,6 +24,7 @@ const showToast = ({ message, duration = 3000 }: ToastOptions): void => {
   const toast = (template.content.cloneNode(true) as DocumentFragment)
     .firstElementChild as HTMLElement;
   if (!toast) return;
+  toast.dataset.variant = variant;
   toast.setAttribute("role", "status");
   toast.setAttribute("aria-live", "polite");
   const messageEl = toast.querySelector(".toast-message");
diff --git a/templates/base.gohtml b/templates/base.gohtml
index 4911671..af7a15d 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -28,12 +28,12 @@
   </style>
    <script type="module" src="{{assetURL "/dist/static/app.js"}}" defer></script>
    <template id="toast-template">
-      <div class="toast pointer-events-auto w-88 max-w-[calc(100vw-2rem)] bg-background shadow-(--shadow-card) ring-1 ring-black/5 flex items-start gap-3 px-4 py-3 transform transition-all duration-300 translate-y-2 opacity-0">
+      <div class="toast pointer-events-auto w-88 max-w-[calc(100vw-2rem)] bg-background shadow-(--shadow-card) ring-1 ring-black/5 flex items-start gap-3 px-4 py-3 transform transition-all duration-300 translate-y-2 opacity-0 data-[variant=destructive]:bg-red-950/92 data-[variant=destructive]:ring-red-500/35">
         <div class="min-w-0 flex-1">
-         <div class="toast-message text-sm font-medium text-foreground leading-snug"></div>
+         <div class="toast-message text-sm font-medium text-foreground leading-snug data-[variant=destructive]:text-red-100"></div>
        </div>
-       <button class="toast-close -mr-1 -mt-1 rounded-md p-1.5 opacity-70 hover:opacity-100 hover:bg-foreground/10 focus:outline-none focus:ring-2 focus:ring-ring" aria-label="Close">
-         <svg class="size-4 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+       <button class="toast-close -mr-1 -mt-1 rounded-md p-1.5 opacity-70 hover:opacity-100 hover:bg-foreground/10 focus:outline-none focus:ring-2 focus:ring-ring data-[variant=destructive]:hover:bg-red-400/12 data-[variant=destructive]:focus:ring-red-300/60" aria-label="Close">
+         <svg class="size-4 text-foreground-muted data-[variant=destructive]:text-red-200/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18M6 6l12 12"/>
          </svg>
        </button>