@netlib/widerrufsbutton 2.1.9 → 2.1.13

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/upgrade.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Progressive enhancement of the static fallback modal generated by
+ * `generateModalHtml()`. Hooks the form's submit event so it sends
+ * PATCH/JSON instead of a classic browser POST. Idempotent.
+ */
+export declare function upgradeStaticForm(form: HTMLFormElement): void;
+export declare function upgradeAllStaticForms(): 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