aw-wizard-forms 3.0.7 → 3.1.0

package/dist/wizard-form.esm.js

@@ -196,14 +196,7 @@ let n$3 = class n {
     return this.cssText;
   }
 };
-const r$4 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$2), i$3 = (t2, ...e2) => {
-  const o2 = 1 === t2.length ? t2[0] : e2.reduce((e3, s2, o3) => e3 + ((t3) => {
-    if (true === t3._$cssResult$) return t3.cssText;
-    if ("number" == typeof t3) return t3;
-    throw Error("Value passed to 'css' function must be a 'css' function result: " + t3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(s2) + t2[o3 + 1], t2[0]);
-  return new n$3(o2, t2, s$2);
-}, S$1 = (s2, o2) => {
+const r$4 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$2), S$1 = (s2, o2) => {
   if (e$2) s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
   else for (const e2 of o2) {
     const o3 = document.createElement("style"), n3 = t$2.litNonce;
@@ -1072,14 +1065,14 @@ class KeyboardController {
     return this._enabled;
   }
 }
-var __defProp$c = Object.defineProperty;
+var __defProp$d = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
+var __decorateClass$d = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let WfBadge = class extends i {
@@ -1088,6 +1081,12 @@ let WfBadge = class extends i {
     this.shortcut = "";
     this.variant = "default";
   }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
   render() {
     return b`
       <span
@@ -1099,80 +1098,23 @@ let WfBadge = class extends i {
     `;
   }
 };
-WfBadge.styles = i$3`
-    :host {
-      display: inline-flex;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-badge {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      min-width: 24px;
-      height: 24px;
-      padding: var(--wf-spacing-1, 4px) var(--wf-spacing-2, 8px);
-      font-size: var(--wf-font-size-xs, 0.75rem);
-      font-weight: 500;
-      font-family: inherit;
-      text-transform: uppercase;
-      flex-shrink: 0;
-      line-height: 1;
-    }
-
-    /* Default variant - unselected options */
-    .wf-badge--default {
-      background-color: var(--wf-color-badge-bg, #fcfcfc);
-      border: 1px solid var(--wf-color-badge-border, #d4d4d4);
-      border-radius: var(--wf-radius-sm, 4px);
-      color: var(--wf-color-badge-text, #5f5f5f);
-    }
-
-    /* Selected variant - selected options */
-    .wf-badge--selected {
-      background-color: var(--wf-color-primary, #8040f0);
-      border: 1px solid var(--wf-color-primary, #8040f0);
-      border-radius: var(--wf-radius-sm, 4px);
-      color: white;
-    }
-
-    /* Button variant - primary buttons (transparent) */
-    .wf-badge--button {
-      background-color: transparent;
-      border: none;
-      border-radius: var(--wf-radius-sm, 4px);
-      color: rgba(255, 255, 255, 0.65);
-    }
-
-    /* Button-secondary variant - back button (transparent like primary) */
-    .wf-badge--button-secondary {
-      background-color: transparent;
-      border: none;
-      border-radius: var(--wf-radius-sm, 4px);
-      color: var(--wf-color-text-muted, #5f5f5f);
-    }
-  `;
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: String })
 ], WfBadge.prototype, "shortcut", 2);
-__decorateClass$c([
+__decorateClass$d([
   n2({ type: String })
 ], WfBadge.prototype, "variant", 2);
-WfBadge = __decorateClass$c([
+WfBadge = __decorateClass$d([
   t("wf-badge")
 ], WfBadge);
-var __defProp$b = Object.defineProperty;
+var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
+var __decorateClass$c = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 let WizardForm = class extends i {
@@ -1185,6 +1127,7 @@ let WizardForm = class extends i {
     this.showProgress = false;
     this.autoAdvance = true;
     this.hideBack = true;
+    this.submitOnStep = false;
     this._steps = [];
     this._currentStep = 1;
     this._totalSteps = 0;
@@ -1192,6 +1135,7 @@ let WizardForm = class extends i {
     this._submitting = false;
     this._submitted = false;
     this._error = "";
+    this._cachedSuccessContent = null;
     this._stateController = new FormStateController(this);
     this._handleFieldChange = (e2) => {
       const { name, value, extraFields } = e2.detail;
@@ -1232,6 +1176,12 @@ let WizardForm = class extends i {
       onEscape: () => this._handleEscape()
     });
   }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
   // ============================================
   // Lifecycle
   // ============================================
@@ -1246,6 +1196,7 @@ let WizardForm = class extends i {
     this.removeEventListener("wf-option-select", this._handleOptionSelect);
   }
   firstUpdated() {
+    this._cachedSuccessContent = this.querySelector('[slot="success"]');
     this._discoverSteps();
     this._showCurrentStep();
   }
@@ -1254,25 +1205,36 @@ let WizardForm = class extends i {
   // ============================================
   render() {
     if (this._submitted) {
+      this._steps.forEach((step) => {
+        step.active = false;
+        step.style.display = "none";
+      });
+      if (this._cachedSuccessContent) {
+        this._cachedSuccessContent.style.display = "";
+        return b`
+          <div class="wf-container wf-submitted">
+            <div class="wf-success-screen">
+              ${this._cachedSuccessContent}
+            </div>
+          </div>
+        `;
+      }
       return b`
-        <div class="wf-container">
+        <div class="wf-container wf-submitted">
           <div class="wf-success-screen">
-            <slot name="success">
-              <h2>Thank you!</h2>
-              <p>Your submission has been received.</p>
-            </slot>
+            <h2>Thank you!</h2>
+            <p>Your submission has been received.</p>
           </div>
         </div>
       `;
     }
+    if (this._cachedSuccessContent) {
+      this._cachedSuccessContent.style.display = "none";
+    }
     return b`
       <div class="wf-container">
         ${this._error ? b`<div class="wf-form-error" role="alert">${this._error}</div>` : A}
 
-        <div class="wf-steps-container">
-          <slot @slotchange="${this._handleSlotChange}"></slot>
-        </div>
-
         ${this._renderNavigation()}
       </div>
     `;
@@ -1323,19 +1285,8 @@ let WizardForm = class extends i {
   // ============================================
   // Step Discovery
   // ============================================
-  _handleSlotChange() {
-    this._discoverSteps();
-    this._showCurrentStep();
-  }
   _discoverSteps() {
-    const slot = this.shadowRoot?.querySelector("slot:not([name])");
-    if (!slot) {
-      return;
-    }
-    const elements = slot.assignedElements({ flatten: true });
-    this._steps = elements.filter(
-      (el) => el.tagName.toLowerCase() === "wf-step"
-    );
+    this._steps = Array.from(this.querySelectorAll(":scope > wf-step"));
     this._steps.forEach((step, index) => {
       step.step = index + 1;
     });
@@ -1414,6 +1365,28 @@ let WizardForm = class extends i {
       return;
     }
     const previousStep = this._currentStep;
+    let submitted = false;
+    let adapter;
+    if (this.submitOnStep && this.hubspotPortal && this.hubspotForm) {
+      try {
+        await this._submitPartialToHubSpot();
+        submitted = true;
+        adapter = "hubspot";
+      } catch (error) {
+        console.error("[wizard-form] Partial submission failed:", error);
+        this.dispatchEvent(
+          new CustomEvent("wf:error", {
+            detail: {
+              error: error instanceof Error ? error.message : "Partial submission failed",
+              formData: this._getFieldsUpToStep(this._currentStep)
+            },
+            bubbles: true,
+            composed: true
+          })
+        );
+        return;
+      }
+    }
     const currentStepEl = this._getStepByNumber(this._currentStep);
     if (currentStepEl) {
       await currentStepEl.hide();
@@ -1426,7 +1399,9 @@ let WizardForm = class extends i {
         detail: {
           from: previousStep,
           to: targetStep,
-          direction
+          direction,
+          submitted,
+          adapter
         },
         bubbles: true,
         composed: true
@@ -1446,8 +1421,9 @@ let WizardForm = class extends i {
     if (this._submitting) {
       return;
     }
+    const rawData = { ...this._formData };
     const submitEvent = new CustomEvent("wf:submit", {
-      detail: { formData: { ...this._formData } },
+      detail: { formData: rawData },
       bubbles: true,
       composed: true,
       cancelable: true
@@ -1458,13 +1434,17 @@ let WizardForm = class extends i {
     }
     this._submitting = true;
     this._error = "";
+    let submitData = rawData;
+    if (this.serialize) {
+      submitData = this.serialize(rawData);
+    }
     try {
       let response;
       if (this.mock) {
         await new Promise((resolve) => setTimeout(resolve, 1e3));
         response = { success: true };
       } else if (this.hubspotPortal && this.hubspotForm) {
-        response = await this._submitToHubSpot();
+        response = await this._submitToHubSpot(submitData);
       } else {
         console.warn("[WizardForm] No submission target configured. Use hubspot-portal/hubspot-form or mock.");
         response = { success: true };
@@ -1473,7 +1453,7 @@ let WizardForm = class extends i {
       this.dispatchEvent(
         new CustomEvent("wf:success", {
           detail: {
-            formData: { ...this._formData },
+            formData: submitData,
             response
           },
           bubbles: true,
@@ -1487,7 +1467,7 @@ let WizardForm = class extends i {
         new CustomEvent("wf:error", {
           detail: {
             error: errorMessage,
-            formData: { ...this._formData }
+            formData: submitData
           },
           bubbles: true,
           composed: true
@@ -1497,9 +1477,9 @@ let WizardForm = class extends i {
       this._submitting = false;
     }
   }
-  async _submitToHubSpot() {
+  async _submitToHubSpot(formData) {
     const endpoint = `https://api.hsforms.com/submissions/v3/integration/submit/${this.hubspotPortal}/${this.hubspotForm}`;
-    const fields = Object.entries(this._formData).map(([name, value]) => ({
+    const fields = Object.entries(formData).map(([name, value]) => ({
       name,
       value: Array.isArray(value) ? value.join(";") : String(value ?? "")
     }));
@@ -1524,6 +1504,38 @@ let WizardForm = class extends i {
     return response.json();
   }
   // ============================================
+  // Partial Submission
+  // ============================================
+  /**
+   * Get form fields from steps up to and including the specified step number.
+   * Used for partial submission to only include completed step data.
+   */
+  _getFieldsUpToStep(stepNumber) {
+    const result = {};
+    for (let i2 = 0; i2 < stepNumber && i2 < this._steps.length; i2++) {
+      const step = this._steps[i2];
+      const fields = step.querySelectorAll("[name]");
+      fields.forEach((field) => {
+        if (field.name && this._formData[field.name] !== void 0) {
+          result[field.name] = this._formData[field.name];
+        }
+      });
+    }
+    return result;
+  }
+  /**
+   * Submit partial form data to HubSpot.
+   * Only includes fields from steps up to and including the current step.
+   */
+  async _submitPartialToHubSpot() {
+    const partialData = this._getFieldsUpToStep(this._currentStep);
+    let submitData = { ...partialData };
+    if (this.serialize) {
+      submitData = this.serialize(submitData);
+    }
+    await this._submitToHubSpot(submitData);
+  }
+  // ============================================
   // Public API
   // ============================================
   /**
@@ -1611,289 +1623,79 @@ let WizardForm = class extends i {
     });
   }
 };
-WizardForm.styles = i$3`
-    :host {
-      display: block;
-      --wf-color-primary: #8040f0;
-      --wf-color-primary-border: #602cbb;
-      --wf-color-primary-light: rgba(128, 64, 240, 0.08);
-      --wf-color-surface: #f3f3f5;
-      --wf-color-surface-hover: #e9e9eb;
-      --wf-color-border: #d4d4d4;
-      --wf-color-text: #0a0a0a;
-      --wf-color-text-secondary: #404040;
-      --wf-color-text-muted: #646464;
-      --wf-color-error: #dc3545;
-      --wf-color-badge-bg: #fcfcfc;
-      --wf-color-badge-border: #d4d4d4;
-      --wf-color-badge-text: #5f5f5f;
-      --wf-color-progress-active: rgba(139, 139, 139, 0.6);
-      --wf-color-progress-inactive: rgba(217, 217, 217, 0.6);
-      --wf-spacing-1: 4px;
-      --wf-spacing-2: 8px;
-      --wf-spacing-3: 12px;
-      --wf-spacing-4: 16px;
-      --wf-spacing-5: 20px;
-      --wf-spacing-6: 24px;
-      --wf-spacing-8: 32px;
-      --wf-radius-sm: 4px;
-      --wf-radius-md: 8px;
-      --wf-radius-lg: 8px;
-      --wf-radius-full: 99px;
-      /* Typography Scale (Major Third based, 16px = 1rem) */
-      --wf-font-size-xs: 0.75rem;     /* 12px - badges, captions */
-      --wf-font-size-sm: 0.875rem;    /* 14px - labels, hints */
-      --wf-font-size-base: 1rem;      /* 16px - body, inputs */
-      --wf-font-size-lg: 1.25rem;     /* 20px - buttons */
-      --wf-font-size-xl: 1.5rem;      /* 24px - subtitles */
-      --wf-font-size-2xl: 2rem;       /* 32px - small headings */
-      --wf-font-size-3xl: 2.5rem;     /* 40px - main headings */
-      --wf-input-min-height: 56px;
-    }
-
-    /* Dark theme */
-    :host([theme='dark']) {
-      --wf-color-surface: #2d2d2d;
-      --wf-color-surface-hover: #3d3d3d;
-      --wf-color-border: #4d4d4d;
-      --wf-color-text: #f8f9fa;
-      --wf-color-text-secondary: #d0d0d0;
-      --wf-color-text-muted: #adb5bd;
-      --wf-color-badge-bg: #3d3d3d;
-      --wf-color-badge-border: #4d4d4d;
-      --wf-color-badge-text: #adb5bd;
-      --wf-color-progress-active: rgba(200, 200, 200, 0.6);
-      --wf-color-progress-inactive: rgba(100, 100, 100, 0.6);
-    }
-
-    /* Auto theme (respects system preference) */
-    @media (prefers-color-scheme: dark) {
-      :host([theme='auto']) {
-        --wf-color-surface: #2d2d2d;
-        --wf-color-surface-hover: #3d3d3d;
-        --wf-color-border: #4d4d4d;
-        --wf-color-text: #f8f9fa;
-        --wf-color-text-secondary: #d0d0d0;
-        --wf-color-text-muted: #adb5bd;
-        --wf-color-badge-bg: #3d3d3d;
-        --wf-color-badge-border: #4d4d4d;
-        --wf-color-badge-text: #adb5bd;
-        --wf-color-progress-active: rgba(200, 200, 200, 0.6);
-        --wf-color-progress-inactive: rgba(100, 100, 100, 0.6);
-      }
-    }
-
-    .wf-container {
-      margin: 0 auto;
-    }
-
-    .wf-progress {
-      display: flex;
-      gap: var(--wf-spacing-4, 16px);
-      margin-top: var(--wf-spacing-6, 24px);
-    }
-
-    .wf-progress-segment {
-      width: 32px;
-      height: 8px;
-      background-color: var(--wf-color-progress-inactive, rgba(217, 217, 217, 0.6));
-      border-radius: var(--wf-radius-full, 99px);
-      transition: background-color 300ms ease;
-    }
-
-    .wf-progress-segment.completed {
-      background-color: var(--wf-color-progress-active, rgba(139, 139, 139, 0.6));
-    }
-
-    .wf-progress-segment.active {
-      background-color: var(--wf-color-progress-active, rgba(139, 139, 139, 0.6));
-    }
-
-    .wf-steps-container {
-      min-height: 200px;
-    }
-
-    .wf-navigation {
-      display: flex;
-      justify-content: space-between;
-      gap: var(--wf-spacing-4, 16px);
-      margin-top: var(--wf-spacing-6, 24px);
-    }
-
-    .wf-btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--wf-spacing-2, 8px);
-      padding: var(--wf-spacing-3, 12px) var(--wf-spacing-4, 16px);
-      min-height: 48px;
-      font-size: var(--wf-font-size-base, 1rem);
-      font-weight: 600;
-      font-family: inherit;
-      border-radius: var(--wf-radius-md, 8px);
-      cursor: pointer;
-      transition: all 150ms ease;
-      border: 1px solid transparent;
-      outline: none;
-    }
-
-    .wf-btn:focus-visible {
-      box-shadow: 0 0 0 3px rgba(128, 64, 240, 0.3);
-    }
-
-    .wf-btn-back {
-      background-color: var(--wf-color-surface, #f3f3f5);
-      border: 1px solid var(--wf-color-border, #d4d4d4);
-      color: var(--wf-color-text, #0a0a0a);
-    }
-
-    .wf-btn-back:hover:not(:disabled) {
-      background-color: var(--wf-color-surface-hover, #e9e9eb);
-    }
-
-    .wf-btn-next {
-      flex: 1;
-      background-color: var(--wf-color-primary, #8040f0);
-      border: 1px solid var(--wf-color-primary-border, #602cbb);
-      color: white;
-      margin-left: auto;
-      position: relative;
-    }
-
-    .wf-btn-next:hover:not(:disabled) {
-      filter: brightness(1.1);
-    }
-
-    .wf-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .wf-btn-shortcut {
-      position: absolute;
-      right: var(--wf-spacing-4, 16px);
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
-    }
-
-    .wf-btn-back .wf-btn-shortcut {
-      position: static;
-    }
-
-    /* Success screen styles */
-    .wf-success-screen {
-      text-align: center;
-      padding: var(--wf-spacing-6, 24px);
-    }
-
-    /* Loading spinner */
-    .wf-loading {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      border: 2px solid rgba(255, 255, 255, 0.3);
-      border-radius: 50%;
-      border-top-color: white;
-      animation: spin 0.8s linear infinite;
-    }
-
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* Error message */
-    .wf-form-error {
-      padding: var(--wf-spacing-4, 16px);
-      margin-bottom: var(--wf-spacing-4, 16px);
-      background-color: rgba(220, 53, 69, 0.1);
-      border: 1px solid var(--wf-color-error, #dc3545);
-      border-radius: var(--wf-radius-md, 8px);
-      color: var(--wf-color-error, #dc3545);
-      font-size: var(--wf-font-size-base, 1rem);
-    }
-  `;
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: String, attribute: "hubspot-portal" })
 ], WizardForm.prototype, "hubspotPortal", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: String, attribute: "hubspot-form" })
 ], WizardForm.prototype, "hubspotForm", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: String, reflect: true })
 ], WizardForm.prototype, "theme", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: Boolean })
 ], WizardForm.prototype, "mock", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: Boolean, attribute: "show-progress" })
 ], WizardForm.prototype, "showProgress", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: Boolean, attribute: "auto-advance" })
 ], WizardForm.prototype, "autoAdvance", 2);
-__decorateClass$b([
+__decorateClass$c([
   n2({ type: Boolean, attribute: "hide-back" })
 ], WizardForm.prototype, "hideBack", 2);
-__decorateClass$b([
+__decorateClass$c([
+  n2({ attribute: false })
+], WizardForm.prototype, "serialize", 2);
+__decorateClass$c([
+  n2({ type: Boolean, attribute: "submit-on-step" })
+], WizardForm.prototype, "submitOnStep", 2);
+__decorateClass$c([
   r()
 ], WizardForm.prototype, "_steps", 2);
-__decorateClass$b([
+__decorateClass$c([
   r()
 ], WizardForm.prototype, "_currentStep", 2);
-__decorateClass$b([
+__decorateClass$c([
   r()
 ], WizardForm.prototype, "_totalSteps", 2);
-__decorateClass$b([
+__decorateClass$c([
   r()
 ], WizardForm.prototype, "_formData", 2);
-__decorateClass$b([
+__decorateClass$c([
   r()
 ], WizardForm.prototype, "_submitting", 2);
-__decorateClass$b([
+__decorateClass$c([
   r()
 ], WizardForm.prototype, "_submitted", 2);
-__decorateClass$b([
+__decorateClass$c([
   r()
 ], WizardForm.prototype, "_error", 2);
-WizardForm = __decorateClass$b([
+WizardForm = __decorateClass$c([
   t("wizard-form")
 ], WizardForm);
 let WfSuccess = class extends i {
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
   render() {
-    return b`<slot></slot>`;
+    return b``;
   }
 };
-WfSuccess.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    ::slotted(h1),
-    ::slotted(h2),
-    ::slotted(h3) {
-      margin: 0 0 var(--wf-spacing-4, 16px) 0;
-      font-weight: 600;
-      color: var(--wf-color-text, #212529);
-    }
-
-    ::slotted(p) {
-      margin: 0;
-      color: var(--wf-color-text-muted, #6c757d);
-    }
-  `;
-WfSuccess = __decorateClass$b([
+WfSuccess = __decorateClass$c([
   t("wf-success")
 ], WfSuccess);
-var __defProp$a = Object.defineProperty;
+var __defProp$b = Object.defineProperty;
 var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
+var __decorateClass$b = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let WfStep = class extends i {
@@ -1906,16 +1708,17 @@ let WfStep = class extends i {
     this.skipIf = "";
     this._fields = [];
   }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
   render() {
     return b`
-      <div class="wf-step-content">
-        <slot @slotchange="${this._handleSlotChange}"></slot>
-      </div>
+      <div class="wf-step-content"></div>
     `;
   }
-  _handleSlotChange() {
-    this._discoverFields();
-  }
   firstUpdated() {
     this._discoverFields();
   }
@@ -1931,14 +1734,9 @@ let WfStep = class extends i {
    * Discover field elements within this step
    */
   _discoverFields() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) {
-      return;
-    }
-    const elements = slot.assignedElements({ flatten: true });
+    const fieldElements = ["wf-options", "wf-field", "wf-email", "wf-input", "wf-textarea", "wf-number"];
     const fields = [];
     const findFields = (el) => {
-      const fieldElements = ["wf-options", "wf-field", "wf-email", "wf-input", "wf-textarea"];
       if (fieldElements.includes(el.tagName.toLowerCase())) {
         const name = el.getAttribute("name");
         if (name) {
@@ -1947,7 +1745,7 @@ let WfStep = class extends i {
       }
       Array.from(el.children).forEach(findFields);
     };
-    elements.forEach(findFields);
+    Array.from(this.children).forEach(findFields);
     this._fields = fields;
   }
   /**
@@ -1955,12 +1753,7 @@ let WfStep = class extends i {
    */
   _focusFirstField() {
     requestAnimationFrame(() => {
-      const slot = this.shadowRoot?.querySelector("slot");
-      if (!slot) {
-        return;
-      }
-      const elements = slot.assignedElements({ flatten: true });
-      for (const el of elements) {
+      for (const el of this.children) {
         const focusable = this._findFocusable(el);
         if (focusable) {
           focusable.focus();
@@ -2059,11 +1852,6 @@ let WfStep = class extends i {
    * Scrolls to and focuses the first invalid field if validation fails
    */
   async validate() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) {
-      return true;
-    }
-    const elements = slot.assignedElements({ flatten: true });
     const invalidElements = [];
     let allValid = true;
     const validateElement = async (el) => {
@@ -2078,7 +1866,7 @@ let WfStep = class extends i {
         await validateElement(child);
       }
     };
-    for (const el of elements) {
+    for (const el of this.children) {
       await validateElement(el);
     }
     if (invalidElements.length > 0) {
@@ -2096,147 +1884,237 @@ let WfStep = class extends i {
     return allValid;
   }
 };
-WfStep.styles = i$3`
-    :host {
-      display: none;
-      width: 100%;
-    }
-
-    :host([active]) {
-      display: block;
-      animation: stepFadeIn 0.3s ease forwards;
-    }
-
-    :host([direction='forward'][active]) {
-      animation: stepSlideInRight 0.3s ease forwards;
-    }
-
-    :host([direction='backward'][active]) {
-      animation: stepSlideInLeft 0.3s ease forwards;
-    }
-
-    :host([leaving]) {
-      display: block;
-      animation: stepFadeOut 0.2s ease forwards;
-    }
-
-    @keyframes stepFadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    @keyframes stepFadeOut {
-      from {
-        opacity: 1;
-        transform: translateY(0);
-      }
-      to {
-        opacity: 0;
-        transform: translateY(-10px);
-      }
-    }
-
-    @keyframes stepSlideInRight {
-      from {
-        opacity: 0;
-        transform: translateX(30px);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(0);
-      }
-    }
-
-    @keyframes stepSlideInLeft {
-      from {
-        opacity: 0;
-        transform: translateX(-30px);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(0);
-      }
-    }
-
-    .wf-step-content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--wf-spacing-4, 16px);
-    }
-
-    /* Slotted heading styles */
-    ::slotted(h1),
-    ::slotted(h2),
-    ::slotted(h3) {
-      margin: 0;
-      font-weight: 600;
-      color: var(--wf-color-text, #212529);
-    }
-
-    ::slotted(h2) {
-      font-size: var(--wf-font-size-3xl, 2rem);
-    }
-
-    ::slotted(p) {
-      margin: 0;
-      color: var(--wf-color-text-muted, #6c757d);
-      font-size: var(--wf-font-size-xl, 1.375rem);
-    }
-  `;
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: Number, attribute: "data-step" })
 ], WfStep.prototype, "step", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: Boolean, reflect: true })
 ], WfStep.prototype, "active", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: String, reflect: true })
 ], WfStep.prototype, "direction", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: Boolean, reflect: true })
 ], WfStep.prototype, "leaving", 2);
-__decorateClass$a([
+__decorateClass$b([
   n2({ type: String, attribute: "data-skip-if" })
 ], WfStep.prototype, "skipIf", 2);
-__decorateClass$a([
+__decorateClass$b([
   r()
 ], WfStep.prototype, "_fields", 2);
-WfStep = __decorateClass$a([
+WfStep = __decorateClass$b([
   t("wf-step")
 ], WfStep);
-var __defProp$9 = Object.defineProperty;
+var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
+var __decorateClass$a = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
-let WfOptions = class extends i {
+const SPACING_SCALE = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+let WfLayout = class extends i {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.multi = false;
-    this.required = false;
-    this.min = 0;
-    this.max = 0;
-    this.columns = 2;
-    this.allowOther = false;
-    this.otherLabel = "Other, please specify:";
-    this.otherPlaceholder = "Enter your answer";
-    this.otherRequired = false;
-    this.otherName = "";
-    this.otherFieldValue = "Others";
-    this._selected = /* @__PURE__ */ new Set();
-    this._otherValue = "";
+    this.mode = "flex";
+    this.direction = "column";
+    this.gap = "none";
+    this.gapX = "";
+    this.gapY = "";
+    this.align = "stretch";
+    this.justify = "start";
+    this.padding = "none";
+    this.paddingX = "";
+    this.paddingY = "";
+    this.wrap = false;
+    this.width = "full";
+    this.columns = "auto";
+    this.minItemWidth = "200px";
+  }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
+  /**
+   * Convert spacing value to pixels
+   */
+  _resolveSpacing(value) {
+    if (!value || value === "none") {
+      return "0";
+    }
+    if (value in SPACING_SCALE) {
+      return `${SPACING_SCALE[value]}px`;
+    }
+    const num = parseFloat(value);
+    if (!isNaN(num)) {
+      return `${num}px`;
+    }
+    return value;
+  }
+  /**
+   * Get computed gap-x value
+   */
+  _getGapX() {
+    return this._resolveSpacing(this.gapX || this.gap);
+  }
+  /**
+   * Get computed gap-y value
+   */
+  _getGapY() {
+    return this._resolveSpacing(this.gapY || this.gap);
+  }
+  /**
+   * Get computed padding values
+   */
+  _getPadding() {
+    const uniformPadding = this._resolveSpacing(this.padding);
+    const px = this.paddingX ? this._resolveSpacing(this.paddingX) : uniformPadding;
+    const py = this.paddingY ? this._resolveSpacing(this.paddingY) : uniformPadding;
+    return `${py} ${px}`;
+  }
+  /**
+   * Build inline styles based on properties
+   */
+  _buildStyles() {
+    const styles = [];
+    if (this.mode === "grid") {
+      styles.push("display: grid");
+      const cols = parseInt(this.columns, 10);
+      if (!isNaN(cols) && cols > 0) {
+        styles.push(`grid-template-columns: repeat(${cols}, 1fr)`);
+      } else {
+        styles.push(
+          `grid-template-columns: repeat(auto-fit, minmax(${this.minItemWidth}, 1fr))`
+        );
+      }
+      if (this.align !== "stretch") {
+        styles.push(`align-items: ${this.align}`);
+      }
+      if (this.justify !== "start") {
+        styles.push(`justify-content: ${this.justify}`);
+      }
+    } else {
+      styles.push("display: flex");
+      styles.push(`flex-direction: ${this.direction}`);
+      if (this.wrap) {
+        styles.push("flex-wrap: wrap");
+      }
+      if (this.align !== "stretch") {
+        styles.push(`align-items: ${this.align}`);
+      }
+      if (this.justify !== "start") {
+        styles.push(`justify-content: ${this.justify}`);
+      }
+    }
+    const gapX = this._getGapX();
+    const gapY = this._getGapY();
+    if (gapX !== "0" || gapY !== "0") {
+      styles.push(`column-gap: ${gapX}`);
+      styles.push(`row-gap: ${gapY}`);
+    }
+    const padding = this._getPadding();
+    if (padding !== "0 0") {
+      styles.push(`padding: ${padding}`);
+    }
+    return styles.join("; ");
+  }
+  /**
+   * Apply styles to host element when properties change
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.style.cssText = this._buildStyles();
+    this.classList.remove("wf-layout--width-full", "wf-layout--width-auto", "wf-layout--width-fit");
+    this.classList.add(`wf-layout--width-${this.width}`);
+  }
+  render() {
+    return b``;
+  }
+};
+__decorateClass$a([
+  n2({ type: String })
+], WfLayout.prototype, "mode", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfLayout.prototype, "direction", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfLayout.prototype, "gap", 2);
+__decorateClass$a([
+  n2({ type: String, attribute: "gap-x" })
+], WfLayout.prototype, "gapX", 2);
+__decorateClass$a([
+  n2({ type: String, attribute: "gap-y" })
+], WfLayout.prototype, "gapY", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfLayout.prototype, "align", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfLayout.prototype, "justify", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfLayout.prototype, "padding", 2);
+__decorateClass$a([
+  n2({ type: String, attribute: "padding-x" })
+], WfLayout.prototype, "paddingX", 2);
+__decorateClass$a([
+  n2({ type: String, attribute: "padding-y" })
+], WfLayout.prototype, "paddingY", 2);
+__decorateClass$a([
+  n2({ type: Boolean })
+], WfLayout.prototype, "wrap", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfLayout.prototype, "width", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfLayout.prototype, "columns", 2);
+__decorateClass$a([
+  n2({ type: String, attribute: "min-item-width" })
+], WfLayout.prototype, "minItemWidth", 2);
+WfLayout = __decorateClass$a([
+  t("wf-layout")
+], WfLayout);
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$9(target, key, result);
+  return result;
+};
+let WfOptions = class extends i {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.multi = false;
+    this.required = false;
+    this.min = 0;
+    this.max = 0;
+    this.columns = 2;
+    this.allowOther = false;
+    this.otherLabel = "Other, please specify:";
+    this.otherPlaceholder = "Enter your answer";
+    this.otherRequired = false;
+    this.otherName = "";
+    this.otherFieldValue = "Others";
+    this._selected = /* @__PURE__ */ new Set();
+    this._otherValue = "";
     this._errorMessage = "";
     this._validationActivated = false;
     this._options = [];
@@ -2257,15 +2135,15 @@ let WfOptions = class extends i {
       if (actualTarget?.tagName === "INPUT" || actualTarget?.tagName === "TEXTAREA") {
         return;
       }
-      const otherInput = this.shadowRoot?.querySelector("#wf-other-input");
-      if (otherInput && otherInput === this.shadowRoot?.activeElement) {
+      const otherInput = this.querySelector(".wf-other-input");
+      if (otherInput && document.activeElement === otherInput) {
         return;
       }
       const key = e2.key.toUpperCase();
       if (key.length === 1 && key >= "A" && key <= "Z") {
         if (this.allowOther && key === this._otherShortcut) {
           e2.preventDefault();
-          const otherInput2 = this.shadowRoot?.querySelector("#wf-other-input");
+          const otherInput2 = this.querySelector(".wf-other-input");
           if (otherInput2) {
             otherInput2.focus();
           }
@@ -2279,6 +2157,12 @@ let WfOptions = class extends i {
       }
     };
   }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
   connectedCallback() {
     super.connectedCallback();
     this._errorMessage = "";
@@ -2292,7 +2176,11 @@ let WfOptions = class extends i {
     document.removeEventListener("keydown", this._handleKeydown);
   }
   firstUpdated() {
+    const layout = this.querySelector("wf-layout");
+    const options = Array.from(this.querySelectorAll(":scope > wf-option"));
+    options.forEach((option) => layout?.appendChild(option));
     this._discoverOptions();
+    this.requestUpdate();
   }
   updated(changedProperties) {
     if (changedProperties.has("multi") || changedProperties.has("max")) {
@@ -2300,15 +2188,13 @@ let WfOptions = class extends i {
     }
   }
   render() {
+    this.setAttribute("role", "listbox");
+    this.setAttribute("aria-multiselectable", String(this.multi));
+    this.setAttribute("aria-required", String(this.required));
     return b`
-      <div
-        class="wf-options-container"
-        role="listbox"
-        aria-multiselectable="${this.multi}"
-        aria-required="${this.required}"
-      >
-        <slot @slotchange="${this._handleSlotChange}"></slot>
-      </div>
+      <wf-layout mode="grid" columns="${this.columns}" gap="md">
+        <!-- wf-option children will be moved here in firstUpdated -->
+      </wf-layout>
       ${this.allowOther ? b`
             <div class="wf-other-container">
               <label class="wf-other-label">${this.otherLabel}</label>
@@ -2316,7 +2202,6 @@ let WfOptions = class extends i {
                 ${this._otherShortcut ? b`<wf-badge shortcut="${this._otherShortcut}"></wf-badge>` : ""}
                 <input
                   type="text"
-                  id="wf-other-input"
                   class="wf-other-input"
                   .value="${this._otherValue}"
                   placeholder="${this.otherPlaceholder}"
@@ -2351,18 +2236,9 @@ let WfOptions = class extends i {
       input.blur();
     }
   }
-  _handleSlotChange() {
-    this._discoverOptions();
-  }
   _discoverOptions() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) {
-      return;
-    }
-    const elements = slot.assignedElements({ flatten: true });
-    this._options = elements.filter(
-      (el) => el.tagName.toLowerCase() === "wf-option"
-    );
+    const layout = this.querySelector("wf-layout");
+    this._options = layout ? Array.from(layout.querySelectorAll(":scope > wf-option")) : [];
     this._shortcutMap.clear();
     this._options.forEach((option, index) => {
       if (index < 26) {
@@ -2597,97 +2473,6 @@ let WfOptions = class extends i {
     this._dispatchChange();
   }
 };
-WfOptions.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    /* Two columns (default) */
-    .wf-options-container {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: var(--wf-spacing-4, 16px);
-    }
-
-    /* Single column via attribute */
-    :host([columns='1']) .wf-options-container {
-      grid-template-columns: 1fr;
-    }
-
-    /* Single column on mobile */
-    @media (max-width: 600px) {
-      .wf-options-container {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    .wf-error-message {
-      display: block;
-      margin-top: var(--wf-spacing-2, 8px);
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-error, #dc3545);
-      min-height: 20px;
-    }
-
-    /* Other input styles */
-    .wf-other-container {
-      margin-top: var(--wf-spacing-4, 16px);
-    }
-
-    .wf-other-label {
-      display: block;
-      margin-bottom: var(--wf-spacing-2, 8px);
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      font-weight: 500;
-      color: var(--wf-color-text, #0a0a0a);
-    }
-
-    .wf-other-label span {
-      font-weight: 400;
-      color: var(--wf-color-text-muted, #646464);
-    }
-
-    /* Wrapper puts badge inside the input */
-    .wf-other-input-wrapper {
-      display: flex;
-      align-items: center;
-      gap: var(--wf-spacing-3, 12px);
-      min-height: var(--wf-input-min-height, 56px);
-      background: var(--wf-color-surface, #f3f3f5);
-      border: 1px solid var(--wf-color-border, #d4d4d4);
-      border-radius: var(--wf-radius-md, 8px);
-      padding-left: var(--wf-spacing-4, 16px);
-      transition: border-color 150ms ease, box-shadow 150ms ease;
-    }
-
-    .wf-other-input-wrapper:focus-within {
-      border-color: var(--wf-color-primary, #8040f0);
-      box-shadow: 0 0 0 3px rgba(128, 64, 240, 0.1);
-    }
-
-    .wf-other-input {
-      flex: 1;
-      min-height: calc(var(--wf-input-min-height, 56px) - 2px);
-      padding: var(--wf-spacing-4, 16px);
-      padding-left: 0;
-      font-size: var(--wf-font-size-base, 1rem);
-      font-weight: 500;
-      color: var(--wf-color-text, #0a0a0a);
-      background: transparent;
-      border: none;
-      outline: none;
-      box-sizing: border-box;
-    }
-
-    .wf-other-input::placeholder {
-      color: var(--wf-color-text-muted, #646464);
-      font-weight: 500;
-    }
-  `;
 __decorateClass$9([
   n2({ type: String })
 ], WfOptions.prototype, "name", 2);
@@ -2740,9 +2525,9 @@ WfOptions = __decorateClass$9([
   t("wf-options")
 ], WfOptions);
 var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
 var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -2757,6 +2542,20 @@ let WfOption = class extends i {
     this.disabled = false;
     this.shortcut = "";
     this._selecting = false;
+    this._cachedContent = [];
+  }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    if (this._cachedContent.length === 0) {
+      this._cachedContent = Array.from(this.childNodes).map((node) => node.cloneNode(true));
+      this.textContent = "";
+    }
+    super.connectedCallback();
   }
   render() {
     return b`
@@ -2773,7 +2572,7 @@ let WfOption = class extends i {
               variant="${this.selected ? "selected" : "default"}"
             ></wf-badge>` : A}
         <div class="wf-option-content">
-          <slot></slot>
+          ${this._cachedContent}
         </div>
       </button>
     `;
@@ -2815,7 +2614,7 @@ let WfOption = class extends i {
    * Focus the option button
    */
   focus() {
-    const button = this.shadowRoot?.querySelector("button");
+    const button = this.querySelector("button");
     button?.focus();
   }
   /**
@@ -2825,98 +2624,6 @@ let WfOption = class extends i {
     this.selected = selected;
   }
 };
-WfOption.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-option-card {
-      display: flex;
-      align-items: center;
-      gap: var(--wf-spacing-3, 12px);
-      width: 100%;
-      min-height: var(--wf-input-min-height, 56px);
-      padding: var(--wf-spacing-3, 12px);
-      background-color: var(--wf-color-surface, #f3f3f5);
-      border: 1px solid var(--wf-color-border, #d4d4d4);
-      border-radius: var(--wf-radius-md, 8px);
-      cursor: pointer;
-      text-align: left;
-      font-family: inherit;
-      font-size: var(--wf-font-size-base, 1rem);
-      font-weight: 500;
-      color: var(--wf-color-text, #0a0a0a);
-      transition: border-color 150ms ease, background-color 150ms ease,
-        transform 100ms ease;
-      outline: none;
-      box-sizing: border-box;
-    }
-
-    .wf-option-card:hover:not(:disabled) {
-      border-color: var(--wf-color-primary, #8040f0);
-      background-color: var(--wf-color-primary-light, rgba(128, 64, 240, 0.08));
-    }
-
-    .wf-option-card:focus-visible {
-      border-color: var(--wf-color-primary, #8040f0);
-      box-shadow: 0 0 0 3px rgba(128, 64, 240, 0.2);
-    }
-
-    .wf-option-card[aria-selected='true'] {
-      border-color: var(--wf-color-primary, #8040f0);
-      background-color: var(--wf-color-primary-light, rgba(128, 64, 240, 0.1));
-    }
-
-    .wf-option-card:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .wf-option-card:active:not(:disabled) {
-      transform: scale(0.98);
-    }
-
-    /* Blink animation on selection */
-    .wf-option-card.selecting {
-      animation: blink 0.3s ease;
-    }
-
-    @keyframes blink {
-      0%,
-      100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.5;
-      }
-    }
-
-    .wf-option-content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    /* Slotted content styling */
-    ::slotted(strong),
-    ::slotted(h3),
-    ::slotted(h4) {
-      display: block;
-      font-weight: 600;
-      margin: 0;
-    }
-
-    ::slotted(span),
-    ::slotted(p) {
-      display: block;
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-text-muted, #646464);
-      margin: 4px 0 0 0;
-    }
-  `;
 __decorateClass$8([
   n2({ type: String })
 ], WfOption.prototype, "value", 2);
@@ -2935,6 +2642,217 @@ __decorateClass$8([
 WfOption = __decorateClass$8([
   t("wf-option")
 ], WfOption);
+var __defProp$7 = Object.defineProperty;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$7(target, key, result);
+  return result;
+};
+const DEFAULT_DEBOUNCE_MS = 600;
+class FormInputBase extends i {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.label = "";
+    this.required = false;
+    this.hint = "";
+    this._errorMessage = "";
+    this._value = "";
+    this._validationActivated = false;
+    this._debounceTimer = null;
+    this._validators = [];
+    this._handleInput = (e2) => {
+      const target = e2.target;
+      this._value = target.value;
+      if (this._validationActivated) {
+        if (this._debounceTimer) {
+          clearTimeout(this._debounceTimer);
+        }
+        this._debounceTimer = setTimeout(() => {
+          this.validate();
+        }, this._getDebounceMs());
+      }
+      this.dispatchEvent(
+        new CustomEvent("wf-change", {
+          detail: {
+            name: this.name,
+            value: this._value
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._handleBlur = () => {
+      this.dispatchEvent(
+        new CustomEvent("wf-blur", {
+          detail: { name: this.name, value: this._value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._handleFocus = () => {
+      this.dispatchEvent(
+        new CustomEvent("wf-focus", {
+          detail: { name: this.name },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
+  // ============================================
+  // Lifecycle Methods
+  // ============================================
+  connectedCallback() {
+    super.connectedCallback();
+    this._setupValidators();
+  }
+  updated(changedProperties) {
+    const triggerProps = this._getValidationTriggerProperties();
+    const shouldRebuild = triggerProps.some((prop) => changedProperties.has(prop));
+    if (shouldRebuild) {
+      this._setupValidators();
+    }
+  }
+  // ============================================
+  // Overridable Methods
+  // ============================================
+  /**
+   * Return the debounce delay for input validation (in milliseconds).
+   * Override in subclasses that need different debounce timing.
+   */
+  _getDebounceMs() {
+    return DEFAULT_DEBOUNCE_MS;
+  }
+  /**
+   * Return the CSS selector for the focusable element.
+   * Override in subclasses with different focusable elements (e.g., 'textarea').
+   */
+  _getFocusableSelector() {
+    return "input";
+  }
+  // ============================================
+  // Public API
+  // ============================================
+  /**
+   * Get current value
+   */
+  get value() {
+    return this._value;
+  }
+  /**
+   * Set value programmatically
+   */
+  set value(val) {
+    this._value = val;
+  }
+  /**
+   * Add a custom validator
+   */
+  addValidator(validator) {
+    this._validators.push(validator);
+  }
+  /**
+   * Validate the field asynchronously
+   * @returns Promise resolving to true if valid, false otherwise
+   */
+  async validate() {
+    this._validationActivated = true;
+    const currentValue = this.value;
+    for (const validator of this._validators) {
+      try {
+        const result = await validator.validate(currentValue);
+        if (!result.valid) {
+          this._errorMessage = result.error ?? validator.message ?? "Validation failed";
+          return false;
+        }
+      } catch (error) {
+        console.error(`[${this.tagName}] Validator error:`, error);
+        this._errorMessage = "Validation error occurred";
+        return false;
+      }
+    }
+    this._errorMessage = "";
+    return true;
+  }
+  /**
+   * Check if field is valid synchronously (doesn't update UI)
+   */
+  get isValid() {
+    const currentValue = this.value;
+    for (const validator of this._validators) {
+      const result = validator.validate(currentValue);
+      if (result instanceof Promise) {
+        console.warn(`[${this.tagName}] Async validator called synchronously`);
+        continue;
+      }
+      if (!result.valid) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Show an error message manually
+   */
+  showError(message) {
+    this._errorMessage = message;
+  }
+  /**
+   * Clear the error message
+   */
+  clearError() {
+    this._errorMessage = "";
+  }
+  /**
+   * Focus the input element
+   */
+  focus() {
+    const element = this.querySelector(this._getFocusableSelector());
+    element?.focus();
+  }
+  /**
+   * Reset field to initial state
+   */
+  reset() {
+    this._value = "";
+    this._errorMessage = "";
+    this._validationActivated = false;
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = null;
+    }
+  }
+}
+__decorateClass$7([
+  n2({ type: String })
+], FormInputBase.prototype, "name");
+__decorateClass$7([
+  n2({ type: String })
+], FormInputBase.prototype, "label");
+__decorateClass$7([
+  n2({ type: Boolean })
+], FormInputBase.prototype, "required");
+__decorateClass$7([
+  n2({ type: String })
+], FormInputBase.prototype, "hint");
+__decorateClass$7([
+  r()
+], FormInputBase.prototype, "_errorMessage");
+__decorateClass$7([
+  r()
+], FormInputBase.prototype, "_value");
 const DEFAULT_BLOCKED_DOMAINS = [
   "gmail.com",
   "yahoo.com",
@@ -3170,70 +3088,24 @@ class ValidationController {
     };
   }
 }
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
-let WfField = class extends i {
+let WfField = class extends FormInputBase {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.label = "";
-    this.required = false;
-    this.hint = "";
-    this._errorMessage = "";
-    this._value = "";
-    this._validationActivated = false;
-    this._debounceTimer = null;
-    this._validators = [];
     this._inputElement = null;
-    this._handleInput = (e2) => {
-      const target = e2.target;
-      this._value = target.value;
-      if (this._validationActivated) {
-        if (this._debounceTimer) {
-          clearTimeout(this._debounceTimer);
-        }
-        this._debounceTimer = setTimeout(() => {
-          this.validate();
-        }, 300);
-      }
-      this.dispatchEvent(
-        new CustomEvent("wf-change", {
-          detail: {
-            name: this.name,
-            value: this._value
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-    this._handleBlur = () => {
-      this.dispatchEvent(
-        new CustomEvent("wf-blur", {
-          detail: { name: this.name, value: this._value },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-    this._handleFocus = () => {
-      this.dispatchEvent(
-        new CustomEvent("wf-focus", {
-          detail: { name: this.name },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
   }
+  // ============================================
+  // Lifecycle Overrides
+  // ============================================
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("input", this._handleInput);
@@ -3248,52 +3120,21 @@ let WfField = class extends i {
   }
   firstUpdated() {
     this._discoverInput();
-    this._setupValidatorsFromAttributes();
+    this._setupValidators();
   }
-  render() {
-    return b`
-      <div class="wf-field-container">
-        ${this.label ? b`<label
-              class="wf-label ${this.required ? "wf-label-required" : ""}"
-              for="${this.name}"
-            >
-              ${this.label}
-            </label>` : ""}
-        <div class="wf-input-wrapper">
-          <slot @slotchange="${this._handleSlotChange}"></slot>
-        </div>
-        ${this.hint && !this._errorMessage ? b`<span class="wf-hint">${this.hint}</span>` : ""}
-        <span class="wf-error-message" role="alert" aria-live="polite">
-          ${this._errorMessage}
-        </span>
-      </div>
-    `;
+  // ============================================
+  // Abstract Method Implementations
+  // ============================================
+  _getValidationTriggerProperties() {
+    return ["required"];
   }
-  _handleSlotChange() {
-    this._discoverInput();
-    this._setupValidatorsFromAttributes();
-  }
-  _discoverInput() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) {
-      return;
-    }
-    const elements = slot.assignedElements({ flatten: true });
-    for (const el of elements) {
-      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) {
-        this._inputElement = el;
-        if (!el.id) {
-          el.id = this.name;
-        }
-        if (!el.name) {
-          el.name = this.name;
-        }
-        this._value = el.value;
-        break;
-      }
-    }
+  /**
+   * Field uses faster debounce (300ms) for responsive validation
+   */
+  _getDebounceMs() {
+    return 300;
   }
-  _setupValidatorsFromAttributes() {
+  _setupValidators() {
     if (!this._inputElement) {
       return;
     }
@@ -3324,16 +3165,43 @@ let WfField = class extends i {
     }
   }
   // ============================================
-  // Public API
+  // Slot Handling
+  // ============================================
+  _handleSlotChange() {
+    this._discoverInput();
+    this._setupValidators();
+  }
+  _discoverInput() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (!slot) {
+      return;
+    }
+    const elements = slot.assignedElements({ flatten: true });
+    for (const el of elements) {
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) {
+        this._inputElement = el;
+        if (!el.id) {
+          el.id = this.name;
+        }
+        if (!el.name) {
+          el.name = this.name;
+        }
+        this._value = el.value;
+        break;
+      }
+    }
+  }
+  // ============================================
+  // Value Override (for slotted elements)
   // ============================================
   /**
-   * Get current value
+   * Get current value from slotted element or internal state
    */
   get value() {
     return this._inputElement?.value ?? this._value;
   }
   /**
-   * Set value
+   * Set value on both internal state and slotted element
    */
   set value(val) {
     this._value = val;
@@ -3341,259 +3209,83 @@ let WfField = class extends i {
       this._inputElement.value = String(val ?? "");
     }
   }
+  // ============================================
+  // Focus and Reset Overrides
+  // ============================================
   /**
-   * Add a custom validator
-   */
-  addValidator(validator) {
-    this._validators.push(validator);
-  }
-  /**
-   * Validate the field
-   */
-  async validate() {
-    this._validationActivated = true;
-    const value = this.value;
-    for (const validator of this._validators) {
-      try {
-        const result = await validator.validate(value);
-        if (!result.valid) {
-          this._errorMessage = result.error ?? validator.message ?? "Validation failed";
-          return false;
-        }
-      } catch (error) {
-        console.error("[WfField] Validator error:", error);
-        this._errorMessage = "Validation error occurred";
-        return false;
-      }
-    }
-    this._errorMessage = "";
-    return true;
-  }
-  /**
-   * Check if field is valid (sync check, doesn't update UI)
-   */
-  get isValid() {
-    const value = this.value;
-    for (const validator of this._validators) {
-      const result = validator.validate(value);
-      if (result instanceof Promise) {
-        console.warn("[WfField] Async validator called synchronously");
-        continue;
-      }
-      if (!result.valid) {
-        return false;
-      }
-    }
-    return true;
-  }
-  /**
-   * Show error message
-   */
-  showError(message) {
-    this._errorMessage = message;
-  }
-  /**
-   * Clear error message
-   */
-  clearError() {
-    this._errorMessage = "";
-  }
-  /**
-   * Focus the input element
+   * Focus the slotted input element
    */
   focus() {
     this._inputElement?.focus();
   }
   /**
-   * Reset field to initial state
+   * Reset field to initial state including slotted element
    */
   reset() {
-    this._value = "";
-    this._errorMessage = "";
-    this._validationActivated = false;
-    if (this._debounceTimer) {
-      clearTimeout(this._debounceTimer);
-      this._debounceTimer = null;
-    }
+    super.reset();
     if (this._inputElement) {
       this._inputElement.value = "";
     }
   }
+  // ============================================
+  // Render
+  // ============================================
+  render() {
+    return b`
+      <div class="wf-field-container">
+        ${this.label ? b`<label
+              class="wf-label ${this.required ? "wf-label-required" : ""}"
+              for="${this.name}"
+            >
+              ${this.label}
+            </label>` : ""}
+        <div class="wf-input-wrapper">
+          <slot @slotchange="${this._handleSlotChange}"></slot>
+        </div>
+        ${this.hint && !this._errorMessage ? b`<span class="wf-hint">${this.hint}</span>` : ""}
+        <span class="wf-error-message" role="alert" aria-live="polite">
+          ${this._errorMessage}
+        </span>
+      </div>
+    `;
+  }
 };
-WfField.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-field-container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--wf-spacing-2, 8px);
-    }
-
-    .wf-label {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      font-weight: 500;
-      color: var(--wf-color-text, #212529);
-    }
-
-    .wf-label-required::after {
-      content: ' *';
-      color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-input-wrapper {
-      position: relative;
-    }
-
-    /* Style slotted inputs */
-    ::slotted(input),
-    ::slotted(textarea),
-    ::slotted(select) {
-      width: 100%;
-      padding: var(--wf-spacing-4, 16px);
-      font-size: var(--wf-font-size-base, 1rem);
-      font-family: inherit;
-      background-color: var(--wf-color-surface, #f8f9fa);
-      border: 2px solid var(--wf-color-border, #dee2e6);
-      border-radius: var(--wf-radius-lg, 12px);
-      color: var(--wf-color-text, #212529);
-      transition: border-color 150ms ease, box-shadow 150ms ease;
-      outline: none;
-      box-sizing: border-box;
-    }
-
-    ::slotted(input::placeholder),
-    ::slotted(textarea::placeholder) {
-      color: var(--wf-color-text-muted, #6c757d);
-    }
-
-    ::slotted(input:focus),
-    ::slotted(textarea:focus),
-    ::slotted(select:focus) {
-      border-color: var(--wf-color-primary, #8b5cf6);
-      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
-    }
-
-    ::slotted(input:disabled),
-    ::slotted(textarea:disabled),
-    ::slotted(select:disabled) {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .wf-error-message {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-error, #dc3545);
-      min-height: 20px;
-    }
-
-    .wf-hint {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-text-muted, #6c757d);
-    }
-  `;
-__decorateClass$7([
-  n2({ type: String })
-], WfField.prototype, "name", 2);
-__decorateClass$7([
-  n2({ type: String })
-], WfField.prototype, "label", 2);
-__decorateClass$7([
-  n2({ type: Boolean })
-], WfField.prototype, "required", 2);
-__decorateClass$7([
-  n2({ type: String })
-], WfField.prototype, "hint", 2);
-__decorateClass$7([
-  r()
-], WfField.prototype, "_errorMessage", 2);
-__decorateClass$7([
+__decorateClass$6([
   r()
-], WfField.prototype, "_value", 2);
-WfField = __decorateClass$7([
+], WfField.prototype, "_inputElement", 2);
+WfField = __decorateClass$6([
   t("wf-field")
 ], WfField);
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
-let WfEmail = class extends i {
+let WfEmail = class extends FormInputBase {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.label = "";
     this.placeholder = "you@company.com";
-    this.required = false;
     this.workEmail = false;
     this.blockedDomains = "";
     this.workEmailMessage = "Please use your work email address";
     this.disabled = false;
-    this.hint = "";
-    this._errorMessage = "";
-    this._value = "";
-    this._validationActivated = false;
-    this._debounceTimer = null;
-    this._validators = [];
-    this._handleInput = (e2) => {
-      const target = e2.target;
-      this._value = target.value;
-      if (this._validationActivated) {
-        if (this._debounceTimer) {
-          clearTimeout(this._debounceTimer);
-        }
-        this._debounceTimer = setTimeout(() => {
-          this.validate();
-        }, 300);
-      }
-      this.dispatchEvent(
-        new CustomEvent("wf-change", {
-          detail: {
-            name: this.name,
-            value: this._value
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-    this._handleBlur = () => {
-      this.dispatchEvent(
-        new CustomEvent("wf-blur", {
-          detail: { name: this.name, value: this._value },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-    this._handleFocus = () => {
-      this.dispatchEvent(
-        new CustomEvent("wf-focus", {
-          detail: { name: this.name },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this._setupValidators();
+  // ============================================
+  // Abstract Method Implementations
+  // ============================================
+  _getValidationTriggerProperties() {
+    return ["required", "workEmail", "blockedDomains"];
   }
-  updated(changedProperties) {
-    if (changedProperties.has("required") || changedProperties.has("workEmail") || changedProperties.has("blockedDomains")) {
-      this._setupValidators();
-    }
+  /**
+   * Email uses faster debounce (300ms) for responsive validation
+   */
+  _getDebounceMs() {
+    return 300;
   }
   _setupValidators() {
     this._validators = [];
@@ -3611,6 +3303,9 @@ let WfEmail = class extends i {
       );
     }
   }
+  // ============================================
+  // Render
+  // ============================================
   render() {
     return b`
       <div class="wf-field-container">
@@ -3642,277 +3337,49 @@ let WfEmail = class extends i {
       </div>
     `;
   }
-  // ============================================
-  // Public API
-  // ============================================
-  /**
-   * Get current value
-   */
-  get value() {
-    return this._value;
-  }
-  /**
-   * Set value
-   */
-  set value(val) {
-    this._value = val;
-  }
-  /**
-   * Validate the field
-   */
-  async validate() {
-    this._validationActivated = true;
-    for (const validator of this._validators) {
-      try {
-        const result = await validator.validate(this._value);
-        if (!result.valid) {
-          this._errorMessage = result.error ?? validator.message ?? "Validation failed";
-          return false;
-        }
-      } catch (error) {
-        console.error("[WfEmail] Validator error:", error);
-        this._errorMessage = "Validation error occurred";
-        return false;
-      }
-    }
-    this._errorMessage = "";
-    return true;
-  }
-  /**
-   * Check if field is valid (sync check)
-   */
-  get isValid() {
-    for (const validator of this._validators) {
-      const result = validator.validate(this._value);
-      if (result instanceof Promise) {
-        console.warn("[WfEmail] Async validator called synchronously");
-        continue;
-      }
-      if (!result.valid) {
-        return false;
-      }
-    }
-    return true;
-  }
-  /**
-   * Show error message
-   */
-  showError(message) {
-    this._errorMessage = message;
-  }
-  /**
-   * Clear error message
-   */
-  clearError() {
-    this._errorMessage = "";
-  }
-  /**
-   * Focus the input
-   */
-  focus() {
-    const input = this.shadowRoot?.querySelector("input");
-    input?.focus();
-  }
-  /**
-   * Reset field to initial state
-   */
-  reset() {
-    this._value = "";
-    this._errorMessage = "";
-    this._validationActivated = false;
-    if (this._debounceTimer) {
-      clearTimeout(this._debounceTimer);
-      this._debounceTimer = null;
-    }
-  }
 };
-WfEmail.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-field-container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--wf-spacing-2, 8px);
-    }
-
-    .wf-label {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      font-weight: 500;
-      color: var(--wf-color-text, #0a0a0a);
-    }
-
-    .wf-label-required::after {
-      content: ' *';
-      color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-input {
-      width: 100%;
-      min-height: var(--wf-input-min-height, 56px);
-      padding: var(--wf-spacing-4, 16px);
-      font-size: var(--wf-font-size-base, 1rem);
-      font-weight: 500;
-      font-family: inherit;
-      background-color: var(--wf-color-surface, #f3f3f5);
-      border: 1px solid var(--wf-color-border, #d4d4d4);
-      border-radius: var(--wf-radius-md, 8px);
-      color: var(--wf-color-text, #0a0a0a);
-      transition: border-color 150ms ease, box-shadow 150ms ease;
-      outline: none;
-      box-sizing: border-box;
-    }
-
-    .wf-input::placeholder {
-      color: var(--wf-color-text-muted, #646464);
-      font-weight: 500;
-    }
-
-    .wf-input:focus {
-      border-color: var(--wf-color-primary, #8040f0);
-      box-shadow: 0 0 0 3px rgba(128, 64, 240, 0.2);
-    }
-
-    .wf-input:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .wf-input.wf-input-error {
-      border-color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-input.wf-input-error:focus {
-      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
-    }
-
-    .wf-error-message {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-hint {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-text-muted, #646464);
-    }
-  `;
-__decorateClass$6([
-  n2({ type: String })
-], WfEmail.prototype, "name", 2);
-__decorateClass$6([
-  n2({ type: String })
-], WfEmail.prototype, "label", 2);
-__decorateClass$6([
+__decorateClass$5([
   n2({ type: String })
 ], WfEmail.prototype, "placeholder", 2);
-__decorateClass$6([
-  n2({ type: Boolean })
-], WfEmail.prototype, "required", 2);
-__decorateClass$6([
+__decorateClass$5([
   n2({ type: Boolean, attribute: "work-email" })
 ], WfEmail.prototype, "workEmail", 2);
-__decorateClass$6([
+__decorateClass$5([
   n2({ type: String, attribute: "blocked-domains" })
 ], WfEmail.prototype, "blockedDomains", 2);
-__decorateClass$6([
+__decorateClass$5([
   n2({ type: String, attribute: "work-email-message" })
 ], WfEmail.prototype, "workEmailMessage", 2);
-__decorateClass$6([
+__decorateClass$5([
   n2({ type: Boolean })
 ], WfEmail.prototype, "disabled", 2);
-__decorateClass$6([
-  n2({ type: String })
-], WfEmail.prototype, "hint", 2);
-__decorateClass$6([
-  r()
-], WfEmail.prototype, "_errorMessage", 2);
-__decorateClass$6([
-  r()
-], WfEmail.prototype, "_value", 2);
-WfEmail = __decorateClass$6([
+WfEmail = __decorateClass$5([
   t("wf-email")
 ], WfEmail);
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
-let WfInput = class extends i {
+let WfInput = class extends FormInputBase {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.label = "";
     this.placeholder = "";
     this.type = "text";
-    this.required = false;
     this.patternMessage = "Invalid format";
     this.disabled = false;
     this.autocomplete = "";
-    this.hint = "";
-    this._errorMessage = "";
-    this._value = "";
-    this._validationActivated = false;
-    this._debounceTimer = null;
-    this._validators = [];
-    this._handleInput = (e2) => {
-      const target = e2.target;
-      this._value = target.value;
-      if (this._validationActivated) {
-        if (this._debounceTimer) {
-          clearTimeout(this._debounceTimer);
-        }
-        this._debounceTimer = setTimeout(() => {
-          this.validate();
-        }, 600);
-      }
-      this.dispatchEvent(
-        new CustomEvent("wf-change", {
-          detail: {
-            name: this.name,
-            value: this._value
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-    this._handleBlur = () => {
-      this.dispatchEvent(
-        new CustomEvent("wf-blur", {
-          detail: { name: this.name, value: this._value },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-    this._handleFocus = () => {
-      this.dispatchEvent(
-        new CustomEvent("wf-focus", {
-          detail: { name: this.name },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this._setupValidators();
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("required") || changedProperties.has("minlength") || changedProperties.has("maxlength") || changedProperties.has("pattern")) {
-      this._setupValidators();
-    }
+  // ============================================
+  // Abstract Method Implementations
+  // ============================================
+  _getValidationTriggerProperties() {
+    return ["required", "minlength", "maxlength", "pattern"];
   }
   _setupValidators() {
     this._validators = [];
@@ -3931,6 +3398,9 @@ let WfInput = class extends i {
       );
     }
   }
+  // ============================================
+  // Render
+  // ============================================
   render() {
     return b`
       <div class="wf-field-container">
@@ -3949,238 +3419,56 @@ let WfInput = class extends i {
           placeholder="${this.placeholder}"
           .value="${this._value}"
           ?disabled="${this.disabled}"
-          ?required="${this.required}"
-          autocomplete="${this.autocomplete || "off"}"
-          data-testid="wf-input"
-          @input="${this._handleInput}"
-          @blur="${this._handleBlur}"
-          @focus="${this._handleFocus}"
-        />
-        ${this.hint && !this._errorMessage ? b`<span class="wf-hint">${this.hint}</span>` : ""}
-        <span class="wf-error-message" role="alert" aria-live="polite" data-testid="wf-error">
-          ${this._errorMessage}
-        </span>
-      </div>
-    `;
-  }
-  // ============================================
-  // Public API
-  // ============================================
-  /**
-   * Get current value
-   */
-  get value() {
-    return this._value;
-  }
-  /**
-   * Set value
-   */
-  set value(val) {
-    this._value = val;
-  }
-  /**
-   * Add a custom validator
-   */
-  addValidator(validator) {
-    this._validators.push(validator);
-  }
-  /**
-   * Validate the field
-   */
-  async validate() {
-    this._validationActivated = true;
-    for (const validator of this._validators) {
-      try {
-        const result = await validator.validate(this._value);
-        if (!result.valid) {
-          this._errorMessage = result.error ?? validator.message ?? "Validation failed";
-          return false;
-        }
-      } catch (error) {
-        console.error("[WfInput] Validator error:", error);
-        this._errorMessage = "Validation error occurred";
-        return false;
-      }
-    }
-    this._errorMessage = "";
-    return true;
-  }
-  /**
-   * Check if field is valid (sync check)
-   */
-  get isValid() {
-    for (const validator of this._validators) {
-      const result = validator.validate(this._value);
-      if (result instanceof Promise) {
-        console.warn("[WfInput] Async validator called synchronously");
-        continue;
-      }
-      if (!result.valid) {
-        return false;
-      }
-    }
-    return true;
-  }
-  /**
-   * Show error message
-   */
-  showError(message) {
-    this._errorMessage = message;
-  }
-  /**
-   * Clear error message
-   */
-  clearError() {
-    this._errorMessage = "";
-  }
-  /**
-   * Focus the input
-   */
-  focus() {
-    const input = this.shadowRoot?.querySelector("input");
-    input?.focus();
-  }
-  /**
-   * Reset field to initial state
-   */
-  reset() {
-    this._value = "";
-    this._errorMessage = "";
-    this._validationActivated = false;
-    if (this._debounceTimer) {
-      clearTimeout(this._debounceTimer);
-      this._debounceTimer = null;
-    }
-  }
-};
-WfInput.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-field-container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--wf-spacing-2, 8px);
-    }
-
-    .wf-label {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      font-weight: 500;
-      color: var(--wf-color-text, #0a0a0a);
-    }
-
-    .wf-label-required::after {
-      content: ' *';
-      color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-input {
-      width: 100%;
-      min-height: var(--wf-input-min-height, 56px);
-      padding: var(--wf-spacing-4, 16px);
-      font-size: var(--wf-font-size-base, 1rem);
-      font-weight: 400;
-      font-family: inherit;
-      background-color: var(--wf-color-surface, #f3f3f5);
-      border: 1px solid var(--wf-color-border, #d4d4d4);
-      border-radius: var(--wf-radius-md, 8px);
-      color: var(--wf-color-text, #0a0a0a);
-      transition: border-color 150ms ease, box-shadow 150ms ease;
-      outline: none;
-      box-sizing: border-box;
-    }
-
-    .wf-input::placeholder {
-      color: var(--wf-color-text-muted, #646464);
-      font-weight: 500;
-    }
-
-    .wf-input:focus {
-      border-color: var(--wf-color-primary, #8040f0);
-      box-shadow: 0 0 0 3px rgba(128, 64, 240, 0.2);
-    }
-
-    .wf-input:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .wf-input.wf-input-error {
-      border-color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-input.wf-input-error:focus {
-      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
-    }
-
-    .wf-error-message {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-hint {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-text-muted, #646464);
-    }
-  `;
-__decorateClass$5([
-  n2({ type: String })
-], WfInput.prototype, "name", 2);
-__decorateClass$5([
-  n2({ type: String })
-], WfInput.prototype, "label", 2);
-__decorateClass$5([
+          ?required="${this.required}"
+          autocomplete="${this.autocomplete || "off"}"
+          data-testid="wf-input"
+          @input="${this._handleInput}"
+          @blur="${this._handleBlur}"
+          @focus="${this._handleFocus}"
+        />
+        ${this.hint && !this._errorMessage ? b`<span class="wf-hint">${this.hint}</span>` : ""}
+        <span class="wf-error-message" role="alert" aria-live="polite" data-testid="wf-error">
+          ${this._errorMessage}
+        </span>
+      </div>
+    `;
+  }
+};
+__decorateClass$4([
   n2({ type: String })
 ], WfInput.prototype, "placeholder", 2);
-__decorateClass$5([
+__decorateClass$4([
   n2({ type: String })
 ], WfInput.prototype, "type", 2);
-__decorateClass$5([
-  n2({ type: Boolean })
-], WfInput.prototype, "required", 2);
-__decorateClass$5([
+__decorateClass$4([
   n2({ type: Number })
 ], WfInput.prototype, "minlength", 2);
-__decorateClass$5([
+__decorateClass$4([
   n2({ type: Number })
 ], WfInput.prototype, "maxlength", 2);
-__decorateClass$5([
+__decorateClass$4([
   n2({ type: String })
 ], WfInput.prototype, "pattern", 2);
-__decorateClass$5([
+__decorateClass$4([
   n2({ type: String, attribute: "pattern-message" })
 ], WfInput.prototype, "patternMessage", 2);
-__decorateClass$5([
+__decorateClass$4([
   n2({ type: Boolean })
 ], WfInput.prototype, "disabled", 2);
-__decorateClass$5([
+__decorateClass$4([
   n2({ type: String })
 ], WfInput.prototype, "autocomplete", 2);
-__decorateClass$5([
-  n2({ type: String })
-], WfInput.prototype, "hint", 2);
-__decorateClass$5([
-  r()
-], WfInput.prototype, "_errorMessage", 2);
-__decorateClass$5([
-  r()
-], WfInput.prototype, "_value", 2);
-WfInput = __decorateClass$5([
+WfInput = __decorateClass$4([
   t("wf-input")
 ], WfInput);
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$4(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 let WfNumber = class extends WfInput {
@@ -4266,113 +3554,49 @@ let WfNumber = class extends WfInput {
     this._value = String(val);
   }
 };
-WfNumber.styles = [
-  WfInput.styles,
-  i$3`
-      /* Hide number input spinners */
-      .wf-input::-webkit-outer-spin-button,
-      .wf-input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      .wf-input[type='number'] {
-        -moz-appearance: textfield;
-      }
-    `
-];
-__decorateClass$4([
+__decorateClass$3([
   n2({ type: Number })
 ], WfNumber.prototype, "min", 2);
-__decorateClass$4([
+__decorateClass$3([
   n2({ type: Number })
 ], WfNumber.prototype, "max", 2);
-__decorateClass$4([
+__decorateClass$3([
   n2({ type: Number })
 ], WfNumber.prototype, "step", 2);
-WfNumber = __decorateClass$4([
+WfNumber = __decorateClass$3([
   t("wf-number")
 ], WfNumber);
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$3(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
-let WfTextarea = class extends i {
+let WfTextarea = class extends FormInputBase {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.label = "";
     this.placeholder = "";
     this.rows = 4;
-    this.required = false;
     this.disabled = false;
     this.showCount = false;
-    this.hint = "";
-    this._errorMessage = "";
-    this._value = "";
-    this._validationActivated = false;
-    this._debounceTimer = null;
-    this._validators = [];
-    this._handleInput = (e2) => {
-      const target = e2.target;
-      this._value = target.value;
-      if (this._validationActivated) {
-        if (this._debounceTimer) {
-          clearTimeout(this._debounceTimer);
-        }
-        this._debounceTimer = setTimeout(() => {
-          this.validate();
-        }, 600);
-      }
-      this.dispatchEvent(
-        new CustomEvent("wf-change", {
-          detail: {
-            name: this.name,
-            value: this._value
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-    this._handleBlur = () => {
-      this.dispatchEvent(
-        new CustomEvent("wf-blur", {
-          detail: { name: this.name, value: this._value },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-    this._handleFocus = () => {
-      this.dispatchEvent(
-        new CustomEvent("wf-focus", {
-          detail: { name: this.name },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
     this._handleKeydown = (e2) => {
       if (e2.key === "Enter") {
         e2.stopPropagation();
       }
     };
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this._setupValidators();
+  // ============================================
+  // Abstract Method Implementations
+  // ============================================
+  _getValidationTriggerProperties() {
+    return ["required", "minlength", "maxlength"];
   }
-  updated(changedProperties) {
-    if (changedProperties.has("required") || changedProperties.has("minlength") || changedProperties.has("maxlength")) {
-      this._setupValidators();
-    }
+  _getFocusableSelector() {
+    return "textarea";
   }
   _setupValidators() {
     this._validators = [];
@@ -4386,6 +3610,9 @@ let WfTextarea = class extends i {
       this._validators.push(ValidationController.maxLength(this.maxlength));
     }
   }
+  // ============================================
+  // Render
+  // ============================================
   render() {
     const charCount = this._value.length;
     const isAtLimit = this.maxlength !== void 0 && charCount >= this.maxlength;
@@ -4408,237 +3635,48 @@ let WfTextarea = class extends i {
           ?disabled="${this.disabled}"
           ?required="${this.required}"
           maxlength="${this.maxlength ?? ""}"
-          data-testid="wf-textarea"
-          @input="${this._handleInput}"
-          @blur="${this._handleBlur}"
-          @focus="${this._handleFocus}"
-          @keydown="${this._handleKeydown}"
-        ></textarea>
-        ${this.showCount && this.maxlength ? b`<span class="wf-char-count ${isAtLimit ? "wf-char-limit" : ""}" data-testid="wf-counter">
-              ${charCount}/${this.maxlength}
-            </span>` : ""}
-        ${this.hint && !this._errorMessage ? b`<span class="wf-hint">${this.hint}</span>` : ""}
-        <span class="wf-error-message" role="alert" aria-live="polite" data-testid="wf-error">
-          ${this._errorMessage}
-        </span>
-      </div>
-    `;
-  }
-  // ============================================
-  // Public API
-  // ============================================
-  /**
-   * Get current value
-   */
-  get value() {
-    return this._value;
-  }
-  /**
-   * Set value
-   */
-  set value(val) {
-    this._value = val;
-  }
-  /**
-   * Add a custom validator
-   */
-  addValidator(validator) {
-    this._validators.push(validator);
-  }
-  /**
-   * Validate the field
-   */
-  async validate() {
-    this._validationActivated = true;
-    for (const validator of this._validators) {
-      try {
-        const result = await validator.validate(this._value);
-        if (!result.valid) {
-          this._errorMessage = result.error ?? validator.message ?? "Validation failed";
-          return false;
-        }
-      } catch (error) {
-        console.error("[WfTextarea] Validator error:", error);
-        this._errorMessage = "Validation error occurred";
-        return false;
-      }
-    }
-    this._errorMessage = "";
-    return true;
-  }
-  /**
-   * Check if field is valid (sync check)
-   */
-  get isValid() {
-    for (const validator of this._validators) {
-      const result = validator.validate(this._value);
-      if (result instanceof Promise) {
-        console.warn("[WfTextarea] Async validator called synchronously");
-        continue;
-      }
-      if (!result.valid) {
-        return false;
-      }
-    }
-    return true;
-  }
-  /**
-   * Show error message
-   */
-  showError(message) {
-    this._errorMessage = message;
-  }
-  /**
-   * Clear error message
-   */
-  clearError() {
-    this._errorMessage = "";
-  }
-  /**
-   * Focus the textarea
-   */
-  focus() {
-    const textarea = this.shadowRoot?.querySelector("textarea");
-    textarea?.focus();
-  }
-  /**
-   * Reset field to initial state
-   */
-  reset() {
-    this._value = "";
-    this._errorMessage = "";
-    this._validationActivated = false;
-    if (this._debounceTimer) {
-      clearTimeout(this._debounceTimer);
-      this._debounceTimer = null;
-    }
-  }
-};
-WfTextarea.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-field-container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--wf-spacing-2, 8px);
-    }
-
-    .wf-label {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      font-weight: 500;
-      color: var(--wf-color-text, #212529);
-    }
-
-    .wf-label-required::after {
-      content: ' *';
-      color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-textarea {
-      width: 100%;
-      padding: var(--wf-spacing-4, 16px);
-      font-size: var(--wf-font-size-base, 1rem);
-      font-family: inherit;
-      background-color: var(--wf-color-surface, #f8f9fa);
-      border: 1.5px solid var(--wf-color-border, #e5e7eb);
-      border-radius: var(--wf-radius-lg, 12px);
-      color: var(--wf-color-text, #212529);
-      transition: border-color 150ms ease, box-shadow 150ms ease;
-      outline: none;
-      box-sizing: border-box;
-      resize: vertical;
-      min-height: 100px;
-    }
-
-    .wf-textarea::placeholder {
-      color: var(--wf-color-text-muted, #6c757d);
-    }
-
-    .wf-textarea:focus {
-      border-color: var(--wf-color-primary, #8b5cf6);
-      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
-    }
-
-    .wf-textarea:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .wf-textarea.wf-textarea-error {
-      border-color: var(--wf-color-error, #dc3545);
-    }
-
-    .wf-textarea.wf-textarea-error:focus {
-      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
-    }
-
-    .wf-error-message {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-error, #dc3545);
-      min-height: 20px;
-    }
-
-    .wf-hint {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-text-muted, #6c757d);
-    }
-
-    .wf-char-count {
-      font-size: var(--wf-font-size-sm, 0.875rem);
-      color: var(--wf-color-text-muted, #6c757d);
-      text-align: right;
-    }
-
-    .wf-char-count.wf-char-limit {
-      color: var(--wf-color-error, #dc3545);
-    }
-  `;
-__decorateClass$3([
-  n2({ type: String })
-], WfTextarea.prototype, "name", 2);
-__decorateClass$3([
-  n2({ type: String })
-], WfTextarea.prototype, "label", 2);
-__decorateClass$3([
+          data-testid="wf-textarea"
+          @input="${this._handleInput}"
+          @blur="${this._handleBlur}"
+          @focus="${this._handleFocus}"
+          @keydown="${this._handleKeydown}"
+        ></textarea>
+        ${this.showCount && this.maxlength ? b`<span class="wf-char-count ${isAtLimit ? "wf-char-limit" : ""}" data-testid="wf-counter">
+              ${charCount}/${this.maxlength}
+            </span>` : ""}
+        ${this.hint && !this._errorMessage ? b`<span class="wf-hint">${this.hint}</span>` : ""}
+        <span class="wf-error-message" role="alert" aria-live="polite" data-testid="wf-error">
+          ${this._errorMessage}
+        </span>
+      </div>
+    `;
+  }
+};
+__decorateClass$2([
   n2({ type: String })
 ], WfTextarea.prototype, "placeholder", 2);
-__decorateClass$3([
+__decorateClass$2([
   n2({ type: Number })
 ], WfTextarea.prototype, "rows", 2);
-__decorateClass$3([
-  n2({ type: Boolean })
-], WfTextarea.prototype, "required", 2);
-__decorateClass$3([
+__decorateClass$2([
   n2({ type: Number })
 ], WfTextarea.prototype, "minlength", 2);
-__decorateClass$3([
+__decorateClass$2([
   n2({ type: Number })
 ], WfTextarea.prototype, "maxlength", 2);
-__decorateClass$3([
+__decorateClass$2([
   n2({ type: Boolean })
 ], WfTextarea.prototype, "disabled", 2);
-__decorateClass$3([
+__decorateClass$2([
   n2({ type: Boolean, attribute: "show-count" })
 ], WfTextarea.prototype, "showCount", 2);
-__decorateClass$3([
-  n2({ type: String })
-], WfTextarea.prototype, "hint", 2);
-__decorateClass$3([
-  r()
-], WfTextarea.prototype, "_errorMessage", 2);
-__decorateClass$3([
-  r()
-], WfTextarea.prototype, "_value", 2);
-WfTextarea = __decorateClass$3([
+WfTextarea = __decorateClass$2([
   t("wf-textarea")
 ], WfTextarea);
 function init(config) {
+  console.warn(
+    '[WizardForm] init() is deprecated. Use the event-based API instead:\n  form.addEventListener("wf:submit", (e) => { ... });\n  form.addEventListener("wf:success", (e) => { ... });\nSee https://github.com/atomicwork/aw-wizard-forms for migration guide.'
+  );
   const container = typeof config.container === "string" ? document.querySelector(config.container) : config.container;
   if (!container) {
     throw new Error(`[WizardForm] Container not found: ${config.container}`);
@@ -4837,207 +3875,6 @@ function init(config) {
   return instance;
 }
 const init_default = { init };
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
-  return result;
-};
-const SPACING_SCALE = {
-  none: 0,
-  xs: 4,
-  sm: 8,
-  md: 16,
-  lg: 24,
-  xl: 32
-};
-let WfLayout = class extends i {
-  constructor() {
-    super(...arguments);
-    this.mode = "flex";
-    this.direction = "column";
-    this.gap = "none";
-    this.gapX = "";
-    this.gapY = "";
-    this.align = "stretch";
-    this.justify = "start";
-    this.padding = "none";
-    this.paddingX = "";
-    this.paddingY = "";
-    this.wrap = false;
-    this.width = "full";
-    this.columns = "auto";
-    this.minItemWidth = "200px";
-  }
-  /**
-   * Convert spacing value to pixels
-   */
-  _resolveSpacing(value) {
-    if (!value || value === "none") {
-      return "0";
-    }
-    if (value in SPACING_SCALE) {
-      return `${SPACING_SCALE[value]}px`;
-    }
-    const num = parseFloat(value);
-    if (!isNaN(num)) {
-      return `${num}px`;
-    }
-    return value;
-  }
-  /**
-   * Get computed gap-x value
-   */
-  _getGapX() {
-    return this._resolveSpacing(this.gapX || this.gap);
-  }
-  /**
-   * Get computed gap-y value
-   */
-  _getGapY() {
-    return this._resolveSpacing(this.gapY || this.gap);
-  }
-  /**
-   * Get computed padding values
-   */
-  _getPadding() {
-    const uniformPadding = this._resolveSpacing(this.padding);
-    const px = this.paddingX ? this._resolveSpacing(this.paddingX) : uniformPadding;
-    const py = this.paddingY ? this._resolveSpacing(this.paddingY) : uniformPadding;
-    return `${py} ${px}`;
-  }
-  /**
-   * Build inline styles based on properties
-   */
-  _buildStyles() {
-    const styles = [];
-    if (this.mode === "grid") {
-      styles.push("display: grid");
-      const cols = parseInt(this.columns, 10);
-      if (!isNaN(cols) && cols > 0) {
-        styles.push(`grid-template-columns: repeat(${cols}, 1fr)`);
-      } else {
-        styles.push(
-          `grid-template-columns: repeat(auto-fit, minmax(${this.minItemWidth}, 1fr))`
-        );
-      }
-      if (this.align !== "stretch") {
-        styles.push(`align-items: ${this.align}`);
-      }
-      if (this.justify !== "start") {
-        styles.push(`justify-content: ${this.justify}`);
-      }
-    } else {
-      styles.push("display: flex");
-      styles.push(`flex-direction: ${this.direction}`);
-      if (this.wrap) {
-        styles.push("flex-wrap: wrap");
-      }
-      if (this.align !== "stretch") {
-        styles.push(`align-items: ${this.align}`);
-      }
-      if (this.justify !== "start") {
-        styles.push(`justify-content: ${this.justify}`);
-      }
-    }
-    const gapX = this._getGapX();
-    const gapY = this._getGapY();
-    if (gapX !== "0" || gapY !== "0") {
-      styles.push(`column-gap: ${gapX}`);
-      styles.push(`row-gap: ${gapY}`);
-    }
-    const padding = this._getPadding();
-    if (padding !== "0 0") {
-      styles.push(`padding: ${padding}`);
-    }
-    return styles.join("; ");
-  }
-  render() {
-    return b`
-      <div
-        class="wf-layout wf-layout--width-${this.width}"
-        style="${this._buildStyles()}"
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-WfLayout.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-layout {
-      box-sizing: border-box;
-    }
-
-    /* Width behaviors */
-    .wf-layout--width-full {
-      width: 100%;
-    }
-
-    .wf-layout--width-auto {
-      width: auto;
-    }
-
-    .wf-layout--width-fit {
-      width: fit-content;
-    }
-  `;
-__decorateClass$2([
-  n2({ type: String })
-], WfLayout.prototype, "mode", 2);
-__decorateClass$2([
-  n2({ type: String })
-], WfLayout.prototype, "direction", 2);
-__decorateClass$2([
-  n2({ type: String })
-], WfLayout.prototype, "gap", 2);
-__decorateClass$2([
-  n2({ type: String, attribute: "gap-x" })
-], WfLayout.prototype, "gapX", 2);
-__decorateClass$2([
-  n2({ type: String, attribute: "gap-y" })
-], WfLayout.prototype, "gapY", 2);
-__decorateClass$2([
-  n2({ type: String })
-], WfLayout.prototype, "align", 2);
-__decorateClass$2([
-  n2({ type: String })
-], WfLayout.prototype, "justify", 2);
-__decorateClass$2([
-  n2({ type: String })
-], WfLayout.prototype, "padding", 2);
-__decorateClass$2([
-  n2({ type: String, attribute: "padding-x" })
-], WfLayout.prototype, "paddingX", 2);
-__decorateClass$2([
-  n2({ type: String, attribute: "padding-y" })
-], WfLayout.prototype, "paddingY", 2);
-__decorateClass$2([
-  n2({ type: Boolean })
-], WfLayout.prototype, "wrap", 2);
-__decorateClass$2([
-  n2({ type: String })
-], WfLayout.prototype, "width", 2);
-__decorateClass$2([
-  n2({ type: String })
-], WfLayout.prototype, "columns", 2);
-__decorateClass$2([
-  n2({ type: String, attribute: "min-item-width" })
-], WfLayout.prototype, "minItemWidth", 2);
-WfLayout = __decorateClass$2([
-  t("wf-layout")
-], WfLayout);
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -5059,10 +3896,24 @@ let WfProgress = class extends i {
     this._boundHandleStepChange = this._handleStepChange.bind(this);
     this._boundHandleSuccess = this._handleSuccess.bind(this);
   }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
   connectedCallback() {
     super.connectedCallback();
     requestAnimationFrame(() => {
       this._connectToWizard();
+      if (this._wizard && this._totalSteps <= 1) {
+        requestAnimationFrame(() => {
+          if (this._wizard) {
+            this._totalSteps = this._wizard.totalSteps || this._totalSteps;
+            this._currentStep = this._wizard.currentStep || this._currentStep;
+          }
+        });
+      }
     });
   }
   disconnectedCallback() {
@@ -5127,36 +3978,6 @@ let WfProgress = class extends i {
     return b`<div class="wf-progress" role="group" aria-label="Form progress">${segments}</div>`;
   }
 };
-WfProgress.styles = i$3`
-    :host {
-      display: block;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-progress {
-      display: flex;
-      gap: var(--wf-spacing-4, 16px);
-    }
-
-    .wf-progress-segment {
-      width: 32px;
-      height: 8px;
-      background-color: var(--wf-color-progress-inactive, rgba(217, 217, 217, 0.6));
-      border-radius: var(--wf-radius-full, 99px);
-      transition: background-color 300ms ease;
-    }
-
-    .wf-progress-segment.completed {
-      background-color: var(--wf-color-progress-active, rgba(139, 139, 139, 0.6));
-    }
-
-    .wf-progress-segment.active {
-      background-color: var(--wf-color-progress-active, rgba(139, 139, 139, 0.6));
-    }
-  `;
 __decorateClass$1([
   n2({ type: String })
 ], WfProgress.prototype, "for", 2);
@@ -5189,6 +4010,12 @@ let WfThankYou = class extends i {
     this.subtitle = "We've received your request.";
     this.hideIcon = false;
   }
+  /**
+   * Disable Shadow DOM - render to Light DOM for external styling
+   */
+  createRenderRoot() {
+    return this;
+  }
   render() {
     return b`
       ${!this.hideIcon ? b`
@@ -5217,53 +4044,6 @@ let WfThankYou = class extends i {
     `;
   }
 };
-WfThankYou.styles = i$3`
-    :host {
-      display: block;
-      text-align: center;
-      padding: var(--wf-spacing-8, 48px) var(--wf-spacing-4, 24px);
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    .wf-thank-you-icon {
-      width: 72px;
-      height: 72px;
-      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 auto var(--wf-spacing-4, 24px);
-      box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
-    }
-
-    .wf-thank-you-icon svg {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-
-    .wf-thank-you-title {
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--wf-color-text, #1e293b);
-      margin: 0 0 12px 0;
-    }
-
-    .wf-thank-you-subtitle {
-      font-size: 16px;
-      color: var(--wf-color-text-muted, #64748b);
-      margin: 0 0 24px 0;
-      line-height: 1.6;
-    }
-
-    ::slotted([slot="footer"]) {
-      margin-top: var(--wf-spacing-4, 24px);
-    }
-  `;
 __decorateClass([
   n2({ type: String })
 ], WfThankYou.prototype, "title", 2);
@@ -5276,6 +4056,21 @@ __decorateClass([
 WfThankYou = __decorateClass([
   t("wf-thank-you")
 ], WfThankYou);
+const GLOBAL_STYLES = `wizard-form{--wf-color-primary:#8040f0;--wf-color-primary-border:#602cbb;--wf-color-primary-light:#8040f014;--wf-color-surface:#f3f3f5;--wf-color-surface-hover:#e9e9eb;--wf-color-border:#d4d4d4;--wf-color-text:#0a0a0a;--wf-color-text-secondary:#404040;--wf-color-text-muted:#646464;--wf-color-error:#dc3545;--wf-color-badge-bg:#fcfcfc;--wf-color-badge-border:#d4d4d4;--wf-color-badge-text:#5f5f5f;--wf-color-progress-active:#8b8b8b99;--wf-color-progress-inactive:#d9d9d999;--wf-spacing-1:4px;--wf-spacing-2:8px;--wf-spacing-3:12px;--wf-spacing-4:16px;--wf-spacing-5:20px;--wf-spacing-6:24px;--wf-spacing-8:32px;--wf-radius-sm:4px;--wf-radius-md:8px;--wf-radius-lg:8px;--wf-radius-full:99px;--wf-font-size-xs:.75rem;--wf-font-size-sm:.875rem;--wf-font-size-base:1rem;--wf-font-size-lg:1.25rem;--wf-font-size-xl:1.5rem;--wf-font-size-2xl:2rem;--wf-font-size-3xl:2.5rem;--wf-input-min-height:56px;--wf-glass-bg:#ffffffb3;--wf-glass-bg-hover:#ffffffd9;--wf-glass-border:#0000001a;--wf-glass-blur:20px;--wf-glass-shadow:0 4px 6px #0000000d;display:block}wizard-form[theme=dark]{--wf-color-surface:#2d2d2d;--wf-color-surface-hover:#3d3d3d;--wf-color-border:#4d4d4d;--wf-color-text:#f8f9fa;--wf-color-text-secondary:#d0d0d0;--wf-color-text-muted:#adb5bd;--wf-color-badge-bg:#3d3d3d;--wf-color-badge-border:#4d4d4d;--wf-color-badge-text:#adb5bd;--wf-color-progress-active:#c8c8c899;--wf-color-progress-inactive:#64646499;--wf-glass-bg:#2d2d2db3;--wf-glass-bg-hover:#3c3c3ccc;--wf-glass-border:#ffffff1a}@media (prefers-color-scheme:dark){wizard-form[theme=auto]{--wf-color-surface:#2d2d2d;--wf-color-surface-hover:#3d3d3d;--wf-color-border:#4d4d4d;--wf-color-text:#f8f9fa;--wf-color-text-secondary:#d0d0d0;--wf-color-text-muted:#adb5bd;--wf-color-badge-bg:#3d3d3d;--wf-color-badge-border:#4d4d4d;--wf-color-badge-text:#adb5bd;--wf-color-progress-active:#c8c8c899;--wf-color-progress-inactive:#64646499;--wf-glass-bg:#2d2d2db3;--wf-glass-bg-hover:#3c3c3ccc;--wf-glass-border:#ffffff1a}}wizard-form .wf-container{margin:0 auto}wizard-form .wf-progress{gap:var(--wf-spacing-4,16px);margin-top:var(--wf-spacing-6,24px);display:flex}wizard-form .wf-progress-segment{background-color:var(--wf-color-progress-inactive,#d9d9d999);border-radius:var(--wf-radius-full,99px);width:32px;height:8px;transition:background-color .3s}wizard-form .wf-progress-segment.completed,wizard-form .wf-progress-segment.active{background-color:var(--wf-color-progress-active,#8b8b8b99)}wizard-form .wf-steps-container{min-height:200px}wizard-form .wf-navigation{justify-content:space-between;gap:var(--wf-spacing-4,16px);margin-top:var(--wf-spacing-6,24px);display:flex}wizard-form .wf-btn{justify-content:center;align-items:center;gap:var(--wf-spacing-2,8px);padding:var(--wf-spacing-3,12px)var(--wf-spacing-4,16px);min-height:48px;font-size:var(--wf-font-size-base,1rem);border-radius:var(--wf-radius-md,8px);cursor:pointer;border:1px solid #0000;outline:none;font-family:inherit;font-weight:600;transition:all .15s;display:inline-flex}wizard-form .wf-btn:focus-visible{box-shadow:0 0 0 3px #8040f04d}wizard-form .wf-btn-back{background:var(--wf-glass-bg,#ffffffb3);-webkit-backdrop-filter:blur(var(--wf-glass-blur,20px));border:1px solid var(--wf-glass-border,#0000001a);box-shadow:var(--wf-glass-shadow,0 4px 6px #0000000d);color:var(--wf-color-text,#0a0a0a)}wizard-form .wf-btn-back:hover:not(:disabled){background:var(--wf-glass-bg-hover,#ffffffd9)}wizard-form .wf-btn-next{background-color:var(--wf-color-primary,#8040f0);border:1px solid var(--wf-color-primary-border,#602cbb);color:#fff;flex:1;margin-left:auto;position:relative}wizard-form .wf-btn-next:hover:not(:disabled){filter:brightness(1.1)}wizard-form .wf-btn:disabled{opacity:.5;cursor:not-allowed}wizard-form .wf-btn-shortcut{right:var(--wf-spacing-4,16px);align-items:center;gap:2px;display:inline-flex;position:absolute}wizard-form .wf-btn-back .wf-btn-shortcut{position:static}wizard-form .wf-success-screen{text-align:center;padding:var(--wf-spacing-6,24px)}wizard-form .wf-loading{border:2px solid #0000001a;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite wf-spin;display:inline-block}@keyframes wf-spin{to{transform:rotate(360deg)}}wizard-form .wf-form-error{padding:var(--wf-spacing-4,16px);margin-bottom:var(--wf-spacing-4,16px);border:1px solid var(--wf-color-error,#dc3545);border-radius:var(--wf-radius-md,8px);color:var(--wf-color-error,#dc3545);font-size:var(--wf-font-size-base,1rem);background-color:#dc35451a}wf-success{display:block}wf-success h1,wf-success h2,wf-success h3{margin:0 0 var(--wf-spacing-4,16px)0;color:var(--wf-color-text,#212529);font-weight:600}wf-success p{color:var(--wf-color-text-muted,#6c757d);margin:0}wf-step{width:100%;display:none}wf-step[active]{animation:.3s forwards wf-stepFadeIn;display:block}wf-step[direction=forward][active]{animation:.3s forwards wf-stepSlideInRight}wf-step[direction=backward][active]{animation:.3s forwards wf-stepSlideInLeft}wf-step[leaving]{animation:.2s forwards wf-stepFadeOut;display:block}@keyframes wf-stepFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes wf-stepFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@keyframes wf-stepSlideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes wf-stepSlideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}wf-step .wf-step-content{gap:var(--wf-spacing-4,16px);flex-direction:column;display:flex}wf-step h1,wf-step h2,wf-step h3{color:var(--wf-color-text,#212529);margin:0;font-weight:600}wf-step h2{font-size:var(--wf-font-size-3xl,2rem)}wf-step p{color:var(--wf-color-text-muted,#6c757d);font-size:var(--wf-font-size-xl,1.375rem);margin:0}wf-options{display:block}wf-options[hidden]{display:none}wf-options .wf-options-container{gap:var(--wf-spacing-4,16px);grid-template-columns:repeat(2,1fr);display:grid}wf-options[columns="1"] .wf-options-container{grid-template-columns:1fr}@media (width<=600px){wf-options .wf-options-container{grid-template-columns:1fr}}wf-options .wf-error-message{margin-top:var(--wf-spacing-2,8px);font-size:var(--wf-font-size-sm,.875rem);color:var(--wf-color-error,#dc3545);min-height:20px;display:block}wf-options .wf-other-container{margin-top:var(--wf-spacing-4,16px)}wf-options .wf-other-label{margin-bottom:var(--wf-spacing-2,8px);font-size:var(--wf-font-size-sm,.875rem);color:var(--wf-color-text,#0a0a0a);font-weight:500;display:block}wf-options .wf-other-label span{color:var(--wf-color-text-muted,#646464);font-weight:400}wf-options .wf-other-input-wrapper{align-items:center;gap:var(--wf-spacing-3,12px);min-height:var(--wf-input-min-height,56px);background:var(--wf-glass-bg,#ffffffb3);-webkit-backdrop-filter:blur(var(--wf-glass-blur,20px));border:1px solid var(--wf-glass-border,#0000001a);border-radius:var(--wf-radius-md,8px);box-shadow:var(--wf-glass-shadow,0 4px 6px #0000000d);padding-left:var(--wf-spacing-4,16px);transition:border-color .15s,box-shadow .15s,background .15s;display:flex}wf-options .wf-other-input-wrapper:focus-within{border-color:var(--wf-color-primary,#8040f0);box-shadow:0 0 0 3px #8040f01a}wf-options .wf-other-input{min-height:calc(var(--wf-input-min-height,56px) - 2px);padding:var(--wf-spacing-4,16px);font-size:var(--wf-font-size-base,1rem);color:var(--wf-color-text,#0a0a0a);box-sizing:border-box;background:0 0;border:none;outline:none;flex:1;padding-left:0;font-weight:500}wf-options .wf-other-input::placeholder{color:var(--wf-color-text-muted,#646464);font-weight:500}wf-option{display:block}wf-option[hidden]{display:none}wf-option .wf-option-card{align-items:center;gap:var(--wf-spacing-3,12px);width:100%;min-height:var(--wf-input-min-height,56px);padding:var(--wf-spacing-3,12px);background:var(--wf-glass-bg,#ffffffb3);-webkit-backdrop-filter:blur(var(--wf-glass-blur,20px));border:1px solid var(--wf-glass-border,#0000001a);border-radius:var(--wf-radius-md,8px);box-shadow:var(--wf-glass-shadow,0 4px 6px #0000000d);cursor:pointer;text-align:left;font-family:inherit;font-size:var(--wf-font-size-base,1rem);color:var(--wf-color-text,#0a0a0a);box-sizing:border-box;outline:none;font-weight:500;transition:border-color .15s,background .15s,transform .1s;display:flex}wf-option .wf-option-card:hover:not(:disabled){border-color:var(--wf-color-primary,#8040f0);background:var(--wf-glass-bg-hover,#ffffffd9)}wf-option .wf-option-card:focus-visible{border-color:var(--wf-color-primary,#8040f0);box-shadow:0 0 0 3px #8040f033}wf-option .wf-option-card[aria-selected=true]{border-color:var(--wf-color-primary,#8040f0);background-color:var(--wf-color-primary-light,#8040f01a)}wf-option .wf-option-card:disabled{opacity:.5;cursor:not-allowed}wf-option .wf-option-card:active:not(:disabled){transform:scale(.98)}wf-option .wf-option-card.selecting{animation:.3s wf-blink}@keyframes wf-blink{0%,to{opacity:1}50%{opacity:.5}}wf-option .wf-option-content{flex:1;min-width:0}wf-option .wf-option-content strong,wf-option .wf-option-content h3,wf-option .wf-option-content h4{margin:0;font-weight:600;display:block}wf-option .wf-option-content span,wf-option .wf-option-content p{font-size:var(--wf-font-size-sm,.875rem);color:var(--wf-color-text-muted,#646464);margin:4px 0 0;display:block}wf-progress{display:block}wf-progress[hidden]{display:none}wf-progress .wf-progress{gap:var(--wf-spacing-4,16px);display:flex}wf-progress .wf-progress-segment{background-color:var(--wf-color-progress-inactive,#d9d9d999);border-radius:var(--wf-radius-full,99px);width:32px;height:8px;transition:background-color .3s}wf-progress .wf-progress-segment.completed,wf-progress .wf-progress-segment.active{background-color:var(--wf-color-progress-active,#8b8b8b99)}wf-badge{display:inline-flex}wf-badge[hidden]{display:none}wf-badge .wf-badge{box-sizing:border-box;min-width:24px;height:24px;padding:var(--wf-spacing-1,4px)var(--wf-spacing-2,8px);font-size:var(--wf-font-size-xs,.75rem);text-transform:uppercase;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;font-weight:500;line-height:1;display:inline-flex}wf-badge .wf-badge--default{background-color:var(--wf-color-badge-bg,#fcfcfc);border:1px solid var(--wf-color-badge-border,#d4d4d4);border-radius:var(--wf-radius-sm,4px);color:var(--wf-color-badge-text,#5f5f5f)}wf-badge .wf-badge--selected{background-color:var(--wf-color-primary,#8040f0);border:1px solid var(--wf-color-primary,#8040f0);border-radius:var(--wf-radius-sm,4px);color:#fff}wf-badge .wf-badge--button{border-radius:var(--wf-radius-sm,4px);color:#ffffffa6;background-color:#0000;border:none}wf-badge .wf-badge--button-secondary{border-radius:var(--wf-radius-sm,4px);color:var(--wf-color-text-muted,#5f5f5f);background-color:#0000;border:none}wf-layout{box-sizing:border-box;display:block}wf-layout[hidden]{display:none}wf-layout.wf-layout--width-full{width:100%}wf-layout.wf-layout--width-auto{width:auto}wf-layout.wf-layout--width-fit{width:fit-content}wf-thank-you{text-align:center;padding:var(--wf-spacing-8,48px)var(--wf-spacing-4,24px);display:block}wf-thank-you[hidden]{display:none}wf-thank-you .wf-thank-you-icon{width:72px;height:72px;margin:0 auto var(--wf-spacing-4,24px);background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 10px 25px -5px #10b98166}wf-thank-you .wf-thank-you-icon svg{color:#fff;width:36px;height:36px}wf-thank-you .wf-thank-you-title{color:var(--wf-color-text,#1e293b);margin:0 0 12px;font-size:28px;font-weight:700}wf-thank-you .wf-thank-you-subtitle{color:var(--wf-color-text-muted,#64748b);margin:0 0 24px;font-size:16px;line-height:1.6}wf-thank-you [slot=footer]{margin-top:var(--wf-spacing-4,24px)}wf-input,wf-email,wf-textarea,wf-field,wf-number{display:block}wf-input[hidden],wf-email[hidden],wf-textarea[hidden],wf-field[hidden],wf-number[hidden]{display:none}.wf-field-container{gap:var(--wf-spacing-2,8px);flex-direction:column;display:flex}.wf-label{font-size:var(--wf-font-size-sm,.875rem);color:var(--wf-color-text,#0a0a0a);font-weight:500}.wf-label-required:after{content:" *";color:var(--wf-color-error,#dc3545)}.wf-error-message{font-size:var(--wf-font-size-sm,.875rem);color:var(--wf-color-error,#dc3545)}.wf-hint{font-size:var(--wf-font-size-sm,.875rem);color:var(--wf-color-text-muted,#646464)}.wf-input{width:100%;min-height:var(--wf-input-min-height,56px);padding:var(--wf-spacing-4,16px);font-size:var(--wf-font-size-base,1rem);background:var(--wf-glass-bg,#ffffffb3);-webkit-backdrop-filter:blur(var(--wf-glass-blur,20px));border:1px solid var(--wf-glass-border,#0000001a);border-radius:var(--wf-radius-md,8px);box-shadow:var(--wf-glass-shadow,0 4px 6px #0000000d);color:var(--wf-color-text,#0a0a0a);box-sizing:border-box;outline:none;font-family:inherit;font-weight:400;transition:border-color .15s,box-shadow .15s,background .15s}.wf-input::placeholder{color:var(--wf-color-text-muted,#646464);font-weight:500}.wf-input:focus{border-color:var(--wf-color-primary,#8040f0);box-shadow:0 0 0 3px #8040f033}.wf-input:disabled{opacity:.5;cursor:not-allowed}.wf-input.wf-input-error{border-color:var(--wf-color-error,#dc3545)}.wf-input.wf-input-error:focus{box-shadow:0 0 0 3px #dc354533}.wf-textarea{width:100%;padding:var(--wf-spacing-4,16px);font-size:var(--wf-font-size-base,1rem);background:var(--wf-glass-bg,#ffffffb3);-webkit-backdrop-filter:blur(var(--wf-glass-blur,20px));border:1px solid var(--wf-glass-border,#0000001a);border-radius:var(--wf-radius-lg,12px);box-shadow:var(--wf-glass-shadow,0 4px 6px #0000000d);color:var(--wf-color-text,#212529);box-sizing:border-box;resize:vertical;outline:none;min-height:100px;font-family:inherit;transition:border-color .15s,box-shadow .15s,background .15s}.wf-textarea::placeholder{color:var(--wf-color-text-muted,#6c757d)}.wf-textarea:focus{border-color:var(--wf-color-primary,#8b5cf6);box-shadow:0 0 0 3px #8b5cf633}.wf-textarea:disabled{opacity:.5;cursor:not-allowed}.wf-textarea.wf-textarea-error{border-color:var(--wf-color-error,#dc3545)}.wf-textarea.wf-textarea-error:focus{box-shadow:0 0 0 3px #dc354533}.wf-char-count{font-size:var(--wf-font-size-sm,.875rem);color:var(--wf-color-text-muted,#6c757d);text-align:right}.wf-char-count.wf-char-limit{color:var(--wf-color-error,#dc3545)}wf-field .wf-input-wrapper{position:relative}wf-field .wf-input-wrapper input,wf-field .wf-input-wrapper textarea,wf-field .wf-input-wrapper select{width:100%;padding:var(--wf-spacing-4,16px);font-size:var(--wf-font-size-base,1rem);background-color:var(--wf-color-surface,#f8f9fa);border:2px solid var(--wf-color-border,#dee2e6);border-radius:var(--wf-radius-lg,12px);color:var(--wf-color-text,#212529);box-sizing:border-box;outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}wf-field .wf-input-wrapper input::placeholder,wf-field .wf-input-wrapper textarea::placeholder{color:var(--wf-color-text-muted,#6c757d)}wf-field .wf-input-wrapper input:focus,wf-field .wf-input-wrapper textarea:focus,wf-field .wf-input-wrapper select:focus{border-color:var(--wf-color-primary,#8b5cf6);box-shadow:0 0 0 3px #8b5cf633}wf-field .wf-input-wrapper input:disabled,wf-field .wf-input-wrapper textarea:disabled,wf-field .wf-input-wrapper select:disabled{opacity:.5;cursor:not-allowed}wf-number .wf-input::-webkit-outer-spin-button,wf-number .wf-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}wf-number .wf-input[type=number]{-moz-appearance:textfield}`;
+function injectGlobalStyles() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const STYLE_ID = "wf-global-styles";
+  if (document.getElementById(STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = GLOBAL_STYLES;
+  document.head.appendChild(style);
+}
+injectGlobalStyles();
 export {
   DEFAULT_BLOCKED_DOMAINS,
   FormStateController,