@netlib/widerrufsbutton 2.1.11 → 2.1.13

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as u, Fragment as M } from "react/jsx-runtime";
-import { useState as f, useRef as U, useEffect as T } from "react";
-import { createPortal as L } from "react-dom";
-async function O(e, r) {
+import { jsx as n, jsxs as c, Fragment as O } from "react/jsx-runtime";
+import { useState as f, useRef as j, useEffect as q } from "react";
+import { createPortal as I } from "react-dom";
+async function R(e, r) {
   const t = {
     "Content-Type": "application/json"
   };
@@ -32,56 +32,59 @@ async function O(e, r) {
   if (!a.ok)
     throw new Error(`Server antwortete mit Status ${a.status}`);
 }
-const I = {
+const P = {
   firstName: "",
   lastName: "",
   email: "",
   orderNumber: "",
   reason: ""
 };
-function z(e) {
+function A(e) {
   const r = {};
-  return e.firstName.trim() || (r.firstName = "Bitte geben Sie Ihren Vornamen an."), e.lastName.trim() || (r.lastName = "Bitte geben Sie Ihren Nachnamen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (r.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : r.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.orderNumber.trim() || (r.orderNumber = "Bitte geben Sie die Bestellnummer oder Vertragsnummer an."), r;
+  return e.firstName.trim() || (r.firstName = "Bitte geben Sie Ihren Vornamen an."), e.lastName.trim() || (r.lastName = "Bitte geben Sie Ihren Nachnamen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (r.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : r.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.orderNumber.trim() || (r.orderNumber = "Bitte geben Sie die Rechnungs-, Lieferschein- oder Auftragsnummer an."), r;
 }
-function P({ config: e, onClose: r }) {
-  const [t, o] = f(I), [a, b] = f({}), [s, g] = f({}), [w, m] = f("idle"), [d, h] = f(""), v = U(null);
-  T(() => {
+function D({ config: e, onClose: r }) {
+  const [t, o] = f(P), [a, b] = f({}), [s, x] = f({}), [h, u] = f("idle"), [d, w] = f(""), v = j(null), z = j(null);
+  q(() => {
     var p;
     (p = v.current) == null || p.focus();
-    const i = (c) => c.key === "Escape" && r();
+    const i = (m) => m.key === "Escape" && r();
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
   }, [r]);
-  function x(i, p) {
-    const c = { ...t, [i]: p };
-    if (o(c), s[i]) {
-      const k = z(c);
+  function g(i, p) {
+    const m = { ...t, [i]: p };
+    if (o(m), s[i]) {
+      const k = A(m);
       b((S) => ({ ...S, [i]: k[i] }));
     }
   }
   function N(i) {
-    g((c) => ({ ...c, [i]: !0 }));
-    const p = z(t);
-    b((c) => ({ ...c, [i]: p[i] }));
+    x((m) => ({ ...m, [i]: !0 }));
+    const p = A(t);
+    b((m) => ({ ...m, [i]: p[i] }));
   }
-  async function q(i) {
-    var k, S;
-    i.preventDefault();
+  async function M(i) {
+    var k, S, C;
+    if (i.preventDefault(), (((k = z.current) == null ? void 0 : k.value) ?? "").trim() !== "") {
+      u("success");
+      return;
+    }
     const p = Object.fromEntries(
       Object.keys(t).map(($) => [$, !0])
     );
-    g(p);
-    const c = z(t);
-    if (b(c), !(Object.keys(c).length > 0)) {
-      m("loading"), h("");
+    x(p);
+    const m = A(t);
+    if (b(m), !(Object.keys(m).length > 0)) {
+      u("loading"), w("");
       try {
-        await O(e, t), m("success"), (k = e.onSuccess) == null || k.call(e);
+        await R(e, t), u("success"), (S = e.onSuccess) == null || S.call(e);
       } catch ($) {
-        const C = $ instanceof Error ? $ : new Error("Ein unbekannter Fehler ist aufgetreten.");
-        h(C.message), m("error"), (S = e.onError) == null || S.call(e, C);
+        const T = $ instanceof Error ? $ : new Error("Ein unbekannter Fehler ist aufgetreten.");
+        w(T.message), u("error"), (C = e.onError) == null || C.call(e, T);
       }
     }
   }
-  const F = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
+  const U = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
   return /* @__PURE__ */ n(
     "div",
     {
@@ -90,9 +93,9 @@ function P({ config: e, onClose: r }) {
       "aria-modal": "true",
       "aria-labelledby": "wrb-title",
       onClick: (i) => i.target === i.currentTarget && r(),
-      children: /* @__PURE__ */ u("div", { className: "wrb-modal", children: [
-        /* @__PURE__ */ u("div", { className: "wrb-modal-header", children: [
-          /* @__PURE__ */ n("h2", { className: "wrb-modal-title", id: "wrb-title", children: F }),
+      children: /* @__PURE__ */ c("div", { className: "wrb-modal", children: [
+        /* @__PURE__ */ c("div", { className: "wrb-modal-header", children: [
+          /* @__PURE__ */ n("h2", { className: "wrb-modal-title", id: "wrb-title", children: U }),
           /* @__PURE__ */ n(
             "button",
             {
@@ -104,21 +107,21 @@ function P({ config: e, onClose: r }) {
             }
           )
         ] }),
-        w === "success" ? /* @__PURE__ */ u("div", { className: "wrb-modal-body", children: [
-          /* @__PURE__ */ u("div", { className: "wrb-success", children: [
+        h === "success" ? /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
+          /* @__PURE__ */ c("div", { className: "wrb-success", children: [
             /* @__PURE__ */ n("span", { className: "wrb-success-icon", children: "✓" }),
             /* @__PURE__ */ n("h3", { children: "Widerruf eingegangen" }),
-            /* @__PURE__ */ u("p", { children: [
+            /* @__PURE__ */ c("p", { children: [
               "Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",
               /* @__PURE__ */ n("strong", { children: t.email }),
               "."
             ] })
           ] }),
-          /* @__PURE__ */ n(W, { config: e })
-        ] }) : /* @__PURE__ */ u("div", { className: "wrb-modal-body", children: [
+          /* @__PURE__ */ n(B, { config: e })
+        ] }) : /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
           e.introText && /* @__PURE__ */ n("p", { className: "wrb-intro", children: e.introText }),
-          w === "error" && d && /* @__PURE__ */ n("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: d }),
-          /* @__PURE__ */ u("form", { onSubmit: q, noValidate: !0, children: [
+          h === "error" && d && /* @__PURE__ */ n("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: d }),
+          /* @__PURE__ */ c("form", { onSubmit: M, noValidate: !0, children: [
             /* @__PURE__ */ n(
               y,
               {
@@ -133,7 +136,7 @@ function P({ config: e, onClose: r }) {
                     type: "text",
                     autoComplete: "given-name",
                     value: t.firstName,
-                    onChange: (i) => x("firstName", i.target.value),
+                    onChange: (i) => g("firstName", i.target.value),
                     onBlur: () => N("firstName"),
                     placeholder: "Max"
                   }
@@ -153,7 +156,7 @@ function P({ config: e, onClose: r }) {
                     type: "text",
                     autoComplete: "family-name",
                     value: t.lastName,
-                    onChange: (i) => x("lastName", i.target.value),
+                    onChange: (i) => g("lastName", i.target.value),
                     onBlur: () => N("lastName"),
                     placeholder: "Mustermann"
                   }
@@ -165,7 +168,7 @@ function P({ config: e, onClose: r }) {
               {
                 label: "E-Mail-Adresse",
                 required: !0,
-                hint: "Hierüber erhalten Sie die Eingangsbestätigung.",
+                hint: "An diese Adresse senden wir Ihnen die Eingangsbestätigung.",
                 error: s.email ? a.email : void 0,
                 children: /* @__PURE__ */ n(
                   "input",
@@ -174,7 +177,7 @@ function P({ config: e, onClose: r }) {
                     type: "email",
                     autoComplete: "email",
                     value: t.email,
-                    onChange: (i) => x("email", i.target.value),
+                    onChange: (i) => g("email", i.target.value),
                     onBlur: () => N("email"),
                     placeholder: "name@beispiel.de"
                   }
@@ -184,9 +187,8 @@ function P({ config: e, onClose: r }) {
             /* @__PURE__ */ n(
               y,
               {
-                label: "Bestell- / Auftrags- / Vertragsnummer",
+                label: "Rechnungs- / Lieferschein- / Auftragsnummer",
                 required: !0,
-                hint: "Zu finden in Ihrer Bestellbestätigung.",
                 error: s.orderNumber ? a.orderNumber : void 0,
                 children: /* @__PURE__ */ n(
                   "input",
@@ -194,9 +196,9 @@ function P({ config: e, onClose: r }) {
                     className: `wrb-input${s.orderNumber && a.orderNumber ? " wrb-error" : ""}`,
                     type: "text",
                     value: t.orderNumber,
-                    onChange: (i) => x("orderNumber", i.target.value),
+                    onChange: (i) => g("orderNumber", i.target.value),
                     onBlur: () => N("orderNumber"),
-                    placeholder: "z.B. 10045678"
+                    placeholder: "z.B. RE123456"
                   }
                 )
               }
@@ -211,14 +213,28 @@ function P({ config: e, onClose: r }) {
                   {
                     className: "wrb-textarea",
                     value: t.reason,
-                    onChange: (i) => x("reason", i.target.value),
+                    onChange: (i) => g("reason", i.target.value),
                     placeholder: "Optional",
                     rows: 2
                   }
                 )
               }
             ),
-            /* @__PURE__ */ u("div", { className: "wrb-actions", children: [
+            /* @__PURE__ */ c("div", { className: "wrb-hp", "aria-hidden": "true", children: [
+              /* @__PURE__ */ n("label", { children: "Website (leer lassen)" }),
+              /* @__PURE__ */ n(
+                "input",
+                {
+                  ref: z,
+                  type: "text",
+                  name: "wrbWebsite",
+                  tabIndex: -1,
+                  autoComplete: "off",
+                  defaultValue: ""
+                }
+              )
+            ] }),
+            /* @__PURE__ */ c("div", { className: "wrb-actions", children: [
               /* @__PURE__ */ n(
                 "button",
                 {
@@ -233,21 +249,21 @@ function P({ config: e, onClose: r }) {
                 {
                   type: "submit",
                   className: "wrb-submit-btn",
-                  disabled: w === "loading",
-                  children: w === "loading" ? "Wird gesendet…" : e.submitLabel ?? "Absenden"
+                  disabled: h === "loading",
+                  children: h === "loading" ? "Wird gesendet…" : e.submitLabel ?? "Absenden"
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ n(W, { config: e })
+          /* @__PURE__ */ n(B, { config: e })
         ] })
       ] })
     }
   );
 }
 function y({ label: e, required: r, hint: t, error: o, children: a }) {
-  return /* @__PURE__ */ u("div", { className: "wrb-field", children: [
-    /* @__PURE__ */ u("label", { className: "wrb-label", children: [
+  return /* @__PURE__ */ c("div", { className: "wrb-field", children: [
+    /* @__PURE__ */ c("label", { className: "wrb-label", children: [
       e,
       r && /* @__PURE__ */ n("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -256,7 +272,7 @@ function y({ label: e, required: r, hint: t, error: o, children: a }) {
     o && /* @__PURE__ */ n("p", { className: "wrb-field-error", role: "alert", children: o })
   ] });
 }
-function W({ config: e }) {
+function B({ config: e }) {
   return e.privacyUrl ? /* @__PURE__ */ n("div", { className: "wrb-legal-links", children: /* @__PURE__ */ n(
     "a",
     {
@@ -268,7 +284,7 @@ function W({ config: e }) {
     }
   ) }) : null;
 }
-const A = `
+const W = `
 /* Widerrufsbutton widget — prefix: wrb- */
 .wrb-btn {
   display: inline-flex;
@@ -497,19 +513,36 @@ const A = `
   color: #374151;
   text-decoration: underline;
 }
+
+/* Honeypot — off-screen, never visible, not tabbable */
+.wrb-hp {
+  position: absolute !important;
+  left: -10000px !important;
+  top: auto !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
 `;
 function V() {
   const e = "wrb-styles";
   if (document.getElementById(e)) return;
   const r = document.createElement("style");
-  r.id = e, r.textContent = A, document.head.appendChild(r);
+  r.id = e, r.textContent = W, document.head.appendChild(r);
 }
-function D(e) {
+function H(e) {
   e.dataset.wrbUpgraded || (e.dataset.wrbUpgraded = "true", e.addEventListener("submit", async (r) => {
     r.preventDefault();
     const t = e.querySelector('.wrb-submit-btn, button[type="submit"]'), o = (t == null ? void 0 : t.textContent) ?? "";
     t && (t.disabled = !0, t.textContent = "Wird gesendet…");
-    const a = new FormData(e), b = String(a.get("action") ?? ""), s = {
+    const a = new FormData(e);
+    if (String(a.get("wrbWebsite") ?? "").trim() !== "") {
+      e.reset(), location.hash = "#wrb-success", t && (t.disabled = !1, t.textContent = o);
+      return;
+    }
+    const b = String(a.get("action") ?? ""), s = {
       firstName: String(a.get("firstName") ?? ""),
       lastName: String(a.get("lastName") ?? ""),
       email: String(a.get("email") ?? ""),
@@ -517,41 +550,41 @@ function D(e) {
       reason: String(a.get("reason") ?? "")
     };
     e.dataset.companyName && (s.companyName = e.dataset.companyName), e.dataset.senderEmail && (s.senderEmail = e.dataset.senderEmail);
-    const g = { "Content-Type": "application/json" };
-    e.dataset.authToken && (g.Authorization = `Bearer ${e.dataset.authToken}`);
-    const w = e.getAttribute("action") ?? "";
+    const x = { "Content-Type": "application/json" };
+    e.dataset.authToken && (x.Authorization = `Bearer ${e.dataset.authToken}`);
+    const h = e.getAttribute("action") ?? "";
     try {
-      const m = await fetch(w, {
+      const u = await fetch(h, {
         method: "PATCH",
-        headers: g,
+        headers: x,
         body: JSON.stringify({ action: b, payload: s })
       });
       let d = null;
       try {
-        d = await m.json();
+        d = await u.json();
       } catch {
       }
-      if (!(d && typeof d == "object" && "ok" in d ? d.ok !== !1 : m.ok)) {
+      if (!(d && typeof d == "object" && "ok" in d ? d.ok !== !1 : u.ok)) {
         const v = d && typeof d == "object" && "message" in d ? String(d.message ?? "") : "";
-        throw new Error(v || `Server antwortete mit Status ${m.status}`);
+        throw new Error(v || `Server antwortete mit Status ${u.status}`);
       }
       e.reset(), location.hash = "#wrb-success";
-    } catch (m) {
-      const d = m instanceof Error ? m : new Error("Unbekannter Fehler"), h = document.querySelector("#wrb-error .wrb-alert");
-      h && (h.textContent = d.message), location.hash = "#wrb-error";
+    } catch (u) {
+      const d = u instanceof Error ? u : new Error("Unbekannter Fehler"), w = document.querySelector("#wrb-error .wrb-alert");
+      w && (w.textContent = d.message), location.hash = "#wrb-error";
     } finally {
       t && (t.disabled = !1, t.textContent = o);
     }
   }));
 }
-function H() {
-  typeof document > "u" || document.querySelectorAll("#wrb-modal form").forEach(D);
+function K() {
+  typeof document > "u" || document.querySelectorAll("#wrb-modal form").forEach(H);
 }
-function _({ config: e }) {
+function J({ config: e }) {
   const [r, t] = f(!1);
-  return T(() => {
-    V(), H();
-  }, []), /* @__PURE__ */ u(M, { children: [
+  return q(() => {
+    V(), K();
+  }, []), /* @__PURE__ */ c(O, { children: [
     /* @__PURE__ */ n(
       "button",
       {
@@ -561,8 +594,8 @@ function _({ config: e }) {
         children: e.buttonLabel ?? "Vertrag widerrufen"
       }
     ),
-    r && L(
-      /* @__PURE__ */ n(P, { config: e, onClose: () => t(!1) }),
+    r && I(
+      /* @__PURE__ */ n(D, { config: e, onClose: () => t(!1) }),
       document.body
     )
   ] });
@@ -578,11 +611,11 @@ function E(e) {
         <a href="${l(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${r}</a>
       </div>`;
 }
-function B(e) {
+function F(e) {
   const r = [];
   return e.companyName && r.push(`data-company-name="${l(e.companyName)}"`), e.senderEmail && r.push(`data-sender-email="${l(e.senderEmail)}"`), e.authToken && r.push(`data-auth-token="${l(e.authToken)}"`), r.length ? " " + r.join(" ") : "";
 }
-function j(e, r = "", t = "") {
+function L(e, r = "", t = "") {
   const o = l(e.successUrl ?? r), a = l(e.errorUrl ?? t);
   return `
           <div class="wrb-field">
@@ -605,16 +638,15 @@ function j(e, r = "", t = "") {
             </label>
             <input class="wrb-input" type="email" name="email" autocomplete="email"
               placeholder="name@beispiel.de" required>
-            <p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
+            <p class="wrb-hint"An diese Adresse senden wir Ihnen die Eingangsbestätigung.</p>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">
-              Bestell- / Auftrags- / Vertragsnummer
+              Rechnungs- / Lieferschein- / Auftragsnummer
               <span class="wrb-required" aria-hidden="true">*</span>
             </label>
             <input class="wrb-input" type="text" name="orderNumber"
-              placeholder="z.B. 10045678" required>
-            <p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
+              placeholder="z.B. RE123456" required>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">Widerrufsgrund</label>
@@ -625,9 +657,13 @@ function j(e, r = "", t = "") {
           </div>
           <input type="hidden" name="action" value="${l(e.action)}">
           ${o ? `<input type="hidden" name="successUrl" value="${o}">` : ""}
-          ${a ? `<input type="hidden" name="errorUrl" value="${a}">` : ""}`;
+          ${a ? `<input type="hidden" name="errorUrl" value="${a}">` : ""}
+          <div class="wrb-hp" aria-hidden="true">
+            <label>Website (leer lassen)</label>
+            <input type="text" name="wrbWebsite" tabindex="-1" autocomplete="off" value="">
+          </div>`;
 }
-function G(e) {
+function Q(e) {
   const r = e.companyName ? `Widerruf – ${l(e.companyName)}` : "Widerrufsformular", t = l(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
   return `<!DOCTYPE html>
 <html lang="de">
@@ -647,7 +683,7 @@ function G(e) {
     }
     .wrb-page .wrb-modal { max-height: none; }
     .wrb-page .wrb-modal-title { font-size: 20px; }
-    ${A}
+    ${W}
   </style>
 </head>
 <body>
@@ -658,8 +694,8 @@ function G(e) {
       </div>
       <div class="wrb-modal-body">
         ${e.introText ? `<p class="wrb-intro">${l(e.introText)}</p>` : ""}
-        <form method="POST" action="${t}"${B(e)}>
-          ${j(e)}
+        <form method="POST" action="${t}"${F(e)}>
+          ${L(e)}
           <div class="wrb-actions">
             <button type="submit" class="wrb-submit-btn">
               ${l(e.submitLabel ?? "Absenden")}
@@ -673,12 +709,12 @@ function G(e) {
 </body>
 </html>`;
 }
-function J(e, { inlineStyles: r = !0 } = {}) {
+function X(e, { inlineStyles: r = !0 } = {}) {
   const t = e.companyName ? `Widerruf – ${l(e.companyName)}` : "Widerrufsformular", o = l(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), a = `
 #wrb-modal, #wrb-success, #wrb-error { display: none; }
 #wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
   return `${r ? `<style>${a}
-${A}</style>` : `<style>${a}</style>`}
+${W}</style>` : `<style>${a}</style>`}
 
 <!-- Widerruf: Form-Modal -->
 <div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
@@ -689,8 +725,8 @@ ${A}</style>` : `<style>${a}</style>`}
     </div>
     <div class="wrb-modal-body">
       ${e.introText ? `<p class="wrb-intro">${l(e.introText)}</p>` : ""}
-      <form method="POST" action="${o}"${B(e)}>
-        ${j(e, "#wrb-success", "#wrb-error")}
+      <form method="POST" action="${o}"${F(e)}>
+        ${L(e, "#wrb-success", "#wrb-error")}
         <div class="wrb-actions">
           <a href="#" class="wrb-cancel-btn">${l(e.cancelLabel ?? "Abbrechen")}</a>
           <button type="submit" class="wrb-submit-btn">
@@ -746,10 +782,10 @@ ${A}</style>` : `<style>${a}</style>`}
 </div>`;
 }
 export {
-  P as WiderrufsModal,
-  _ as WiderrufsWidget,
-  G as generateFallbackHtml,
-  J as generateModalHtml,
-  H as upgradeAllStaticForms,
-  D as upgradeStaticForm
+  D as WiderrufsModal,
+  J as WiderrufsWidget,
+  Q as generateFallbackHtml,
+  X as generateModalHtml,
+  K as upgradeAllStaticForms,
+  H as upgradeStaticForm
 };

package/dist/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const WRB_CSS = "\n/* Widerrufsbutton widget \u2014 prefix: wrb- */\n.wrb-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 20px;\n  background: #c0392b;\n  color: #fff;\n  border: none;\n  border-radius: 6px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n  text-decoration: none;\n}\n.wrb-btn:hover { background: #a93226; }\n.wrb-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 2px; }\n\n/* Overlay */\n.wrb-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.55);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n  padding: 16px;\n  animation: wrb-fade-in 0.15s ease;\n}\n@keyframes wrb-fade-in { from { opacity: 0 } to { opacity: 1 } }\n\n/* Modal box */\n.wrb-modal {\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n  width: 100%;\n  max-width: 540px;\n  max-height: 90vh;\n  overflow-y: auto;\n  animation: wrb-slide-up 0.2s ease;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 15px;\n  color: #1a1a1a;\n}\n@keyframes wrb-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }\n\n.wrb-modal-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 20px 24px 16px;\n  border-bottom: 1px solid #e5e7eb;\n  gap: 12px;\n}\n.wrb-modal-title {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #111;\n  line-height: 1.3;\n}\n.wrb-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6b7280;\n  padding: 4px;\n  border-radius: 4px;\n  font-size: 20px;\n  line-height: 1;\n  flex-shrink: 0;\n}\n.wrb-close-btn:hover { color: #111; background: #f3f4f6; }\n\n.wrb-modal-body {\n  padding: 20px 24px 24px;\n}\n\n.wrb-intro {\n  margin: 0 0 20px;\n  color: #4b5563;\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n/* Form */\n.wrb-field {\n  margin-bottom: 16px;\n}\n.wrb-label {\n  display: block;\n  font-size: 13px;\n  font-weight: 600;\n  color: #374151;\n  margin-bottom: 5px;\n}\n.wrb-required {\n  color: #c0392b;\n  margin-left: 2px;\n}\n.wrb-input,\n.wrb-textarea {\n  width: 100%;\n  padding: 9px 12px;\n  border: 1.5px solid #d1d5db;\n  border-radius: 6px;\n  font-size: 15px;\n  font-family: inherit;\n  color: #111;\n  background: #fff;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.wrb-input:focus,\n.wrb-textarea:focus {\n  outline: none;\n  border-color: #c0392b;\n  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);\n}\n.wrb-input.wrb-error,\n.wrb-textarea.wrb-error {\n  border-color: #c0392b;\n}\n.wrb-field-error {\n  color: #c0392b;\n  font-size: 12px;\n  margin-top: 4px;\n}\n.wrb-textarea { resize: vertical; min-height: 80px; }\n\n.wrb-hint {\n  font-size: 12px;\n  color: #6b7280;\n  margin-top: 4px;\n}\n\n.wrb-date-display {\n  padding: 9px 12px;\n  background: #f9fafb;\n  border: 1.5px solid #e5e7eb;\n  border-radius: 6px;\n  color: #6b7280;\n  font-size: 15px;\n}\n\n/* Actions */\n.wrb-actions {\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n  margin-top: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #e5e7eb;\n}\n.wrb-submit-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 10px 22px;\n  background: #c0392b;\n  color: #fff;\n  border: none;\n  border-radius: 6px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n}\n.wrb-submit-btn:hover:not(:disabled) { background: #a93226; }\n.wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }\n.wrb-cancel-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 10px 18px;\n  background: transparent;\n  color: #374151;\n  border: 1.5px solid #d1d5db;\n  border-radius: 6px;\n  font-size: 15px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.15s;\n}\n.wrb-cancel-btn:hover { background: #f3f4f6; }\n\n/* Success / Error states */\n.wrb-success {\n  text-align: center;\n  padding: 32px 24px;\n}\n.wrb-success-icon { font-size: 48px; display: block; margin-bottom: 12px; }\n.wrb-success h3 { margin: 0 0 8px; font-size: 20px; color: #111; }\n.wrb-success p { margin: 0; color: #4b5563; line-height: 1.6; }\n\n.wrb-alert {\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-bottom: 16px;\n  font-size: 14px;\n}\n.wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }\n\n/* Legal links */\n.wrb-legal-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 16px;\n  margin-top: 16px;\n  padding-top: 12px;\n  border-top: 1px solid #e5e7eb;\n}\n.wrb-legal-link {\n  font-size: 12px;\n  color: #6b7280;\n  text-decoration: none;\n}\n.wrb-legal-link:hover {\n  color: #374151;\n  text-decoration: underline;\n}\n";
+export declare const WRB_CSS = "\n/* Widerrufsbutton widget \u2014 prefix: wrb- */\n.wrb-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 20px;\n  background: #c0392b;\n  color: #fff;\n  border: none;\n  border-radius: 6px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n  text-decoration: none;\n}\n.wrb-btn:hover { background: #a93226; }\n.wrb-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 2px; }\n\n/* Overlay */\n.wrb-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.55);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n  padding: 16px;\n  animation: wrb-fade-in 0.15s ease;\n}\n@keyframes wrb-fade-in { from { opacity: 0 } to { opacity: 1 } }\n\n/* Modal box */\n.wrb-modal {\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n  width: 100%;\n  max-width: 540px;\n  max-height: 90vh;\n  overflow-y: auto;\n  animation: wrb-slide-up 0.2s ease;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 15px;\n  color: #1a1a1a;\n}\n@keyframes wrb-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }\n\n.wrb-modal-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 20px 24px 16px;\n  border-bottom: 1px solid #e5e7eb;\n  gap: 12px;\n}\n.wrb-modal-title {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #111;\n  line-height: 1.3;\n}\n.wrb-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6b7280;\n  padding: 4px;\n  border-radius: 4px;\n  font-size: 20px;\n  line-height: 1;\n  flex-shrink: 0;\n}\n.wrb-close-btn:hover { color: #111; background: #f3f4f6; }\n\n.wrb-modal-body {\n  padding: 20px 24px 24px;\n}\n\n.wrb-intro {\n  margin: 0 0 20px;\n  color: #4b5563;\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n/* Form */\n.wrb-field {\n  margin-bottom: 16px;\n}\n.wrb-label {\n  display: block;\n  font-size: 13px;\n  font-weight: 600;\n  color: #374151;\n  margin-bottom: 5px;\n}\n.wrb-required {\n  color: #c0392b;\n  margin-left: 2px;\n}\n.wrb-input,\n.wrb-textarea {\n  width: 100%;\n  padding: 9px 12px;\n  border: 1.5px solid #d1d5db;\n  border-radius: 6px;\n  font-size: 15px;\n  font-family: inherit;\n  color: #111;\n  background: #fff;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.wrb-input:focus,\n.wrb-textarea:focus {\n  outline: none;\n  border-color: #c0392b;\n  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);\n}\n.wrb-input.wrb-error,\n.wrb-textarea.wrb-error {\n  border-color: #c0392b;\n}\n.wrb-field-error {\n  color: #c0392b;\n  font-size: 12px;\n  margin-top: 4px;\n}\n.wrb-textarea { resize: vertical; min-height: 80px; }\n\n.wrb-hint {\n  font-size: 12px;\n  color: #6b7280;\n  margin-top: 4px;\n}\n\n.wrb-date-display {\n  padding: 9px 12px;\n  background: #f9fafb;\n  border: 1.5px solid #e5e7eb;\n  border-radius: 6px;\n  color: #6b7280;\n  font-size: 15px;\n}\n\n/* Actions */\n.wrb-actions {\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n  margin-top: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #e5e7eb;\n}\n.wrb-submit-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 10px 22px;\n  background: #c0392b;\n  color: #fff;\n  border: none;\n  border-radius: 6px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n}\n.wrb-submit-btn:hover:not(:disabled) { background: #a93226; }\n.wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }\n.wrb-cancel-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 10px 18px;\n  background: transparent;\n  color: #374151;\n  border: 1.5px solid #d1d5db;\n  border-radius: 6px;\n  font-size: 15px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.15s;\n}\n.wrb-cancel-btn:hover { background: #f3f4f6; }\n\n/* Success / Error states */\n.wrb-success {\n  text-align: center;\n  padding: 32px 24px;\n}\n.wrb-success-icon { font-size: 48px; display: block; margin-bottom: 12px; }\n.wrb-success h3 { margin: 0 0 8px; font-size: 20px; color: #111; }\n.wrb-success p { margin: 0; color: #4b5563; line-height: 1.6; }\n\n.wrb-alert {\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-bottom: 16px;\n  font-size: 14px;\n}\n.wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }\n\n/* Legal links */\n.wrb-legal-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 16px;\n  margin-top: 16px;\n  padding-top: 12px;\n  border-top: 1px solid #e5e7eb;\n}\n.wrb-legal-link {\n  font-size: 12px;\n  color: #6b7280;\n  text-decoration: none;\n}\n.wrb-legal-link:hover {\n  color: #374151;\n  text-decoration: underline;\n}\n\n/* Honeypot \u2014 off-screen, never visible, not tabbable */\n.wrb-hp {\n  position: absolute !important;\n  left: -10000px !important;\n  top: auto !important;\n  width: 1px !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  opacity: 0 !important;\n  pointer-events: none !important;\n}\n";
 /** Injects scoped CSS once into the document head */
 export declare function injectStyles(): void;

package/dist/widerruf.html

@@ -246,6 +246,18 @@
   text-decoration: underline;
 }
 
+/* Honeypot — off-screen, never visible, not tabbable */
+.wrb-hp {
+  position: absolute !important;
+  left: -10000px !important;
+  top: auto !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
   </style>
 </head>
 <body>
@@ -278,16 +290,15 @@
             </label>
             <input class="wrb-input" type="email" name="email" autocomplete="email"
               placeholder="name@beispiel.de" required>
-            <p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
+            <p class="wrb-hint"An diese Adresse senden wir Ihnen die Eingangsbestätigung.</p>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">
-              Bestell- / Auftrags- / Vertragsnummer
+              Rechnungs- / Lieferschein- / Auftragsnummer
               <span class="wrb-required" aria-hidden="true">*</span>
             </label>
             <input class="wrb-input" type="text" name="orderNumber"
-              placeholder="z.B. 10045678" required>
-            <p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
+              placeholder="z.B. RE123456" required>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">Widerrufsgrund</label>
@@ -299,6 +310,10 @@
           <input type="hidden" name="action" value="widerruf_submit">
           
           
+          <div class="wrb-hp" aria-hidden="true">
+            <label>Website (leer lassen)</label>
+            <input type="text" name="wrbWebsite" tabindex="-1" autocomplete="off" value="">
+          </div>
           <div class="wrb-actions">
             <button type="submit" class="wrb-submit-btn">
               Absenden