Update OTP Field with Resend OTP

src/components/OtpField.astro

@@ -49,9 +49,12 @@ const boxBase =
 const groupCls = "wr:flex wr:items-center wr:gap-2 wr:select-none";
 
 const resendLabel = p.resendLabel ?? "Resend code";
+
+const containerId = `otp-${Math.random().toString(36).slice(2)}`;
 ---
 
 <div
+    id={containerId}
     class="wr:flex wr:items-center wr:justify-between wr:flex-col wr:md:flex-row"
 >
     <div class={cn("wr:space-y-1.5", p.class)} data-field={p.name}>
@@ -159,6 +162,7 @@ const resendLabel = p.resendLabel ?? "Resend code";
 <script
     is:inline
     define:vars={{
+        containerId,
         onResend: p.onResend ?? "",
         showResend: p.resendEnabled ?? false,
         resendCooldown: p.resendCooldown ?? 0,
@@ -316,16 +320,17 @@ const resendLabel = p.resendLabel ?? "Resend code";
             }
 
             // Resend
+            const host = document.getElementById(containerId);
             const btnSel = "[data-otp-resend]";
-            const timerEl = document.querySelector("[data-otp-timer]");
+            const timerEl = host.querySelector("[data-otp-timer]");
 
             let cooldownTimer = 0;
             let remaining = 0;
             const baseLabel =
-                document.querySelector(btnSel)?.textContent?.trim() || "Resend";
+                host.querySelector(btnSel)?.textContent?.trim() || "Resend";
 
             function setResendState({ disabled, label }) {
-                const btn = document.querySelector(btnSel);
+                const btn = host.querySelector(btnSel);
                 if (!btn) return;
                 btn.disabled = !!disabled;
                 if (label != null) btn.textContent = label;
@@ -359,9 +364,9 @@ const resendLabel = p.resendLabel ?? "Resend code";
             }
 
             // Delegate click so it works even if button is conditionally rendered
-            document.addEventListener("click", async (e) => {
+            host.addEventListener("click", async (e) => {
                 const btn = e.target?.closest?.(btnSel);
-                if (!btn || !document.contains(btn)) return;
+                if (!btn || !host.contains(btn)) return;
 
                 // Do nothing if already cooling down
                 if (btn.disabled) return;
@@ -374,17 +379,15 @@ const resendLabel = p.resendLabel ?? "Resend code";
                     if (typeof fn === "function") {
                         // you can pass context if you like
                         const value = Array.from(
-                            document.querySelectorAll("[data-otp-slot]"),
+                            host.querySelectorAll("[data-otp-slot]"),
                         )
                             .map((i) => i.value || "")
                             .join("");
-                        const res = await fn({ document, length, value });
+                        const res = await fn({ host, length, value });
                         if (res === false) ok = false; // let user cancel cooldown
                     } else {
                         // fire a custom event as a fallback
-                        document.dispatchEvent(
-                            new CustomEvent("wr:otp-resend"),
-                        );
+                        host.dispatchEvent(new CustomEvent("wr:otp-resend"));
                     }
                 } catch {
                     ok = false;