aw-wizard-forms 3.1.2 → 4.0.0

package/dist/wizard-form.esm.js

@@ -177,7 +177,7 @@ function createRevenueHeroAdapter(config) {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$2 = globalThis, e$2 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$4 = /* @__PURE__ */ new WeakMap();
+const t$2 = globalThis, e$4 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$4 = /* @__PURE__ */ new WeakMap();
 let n$3 = class n {
   constructor(t2, e2, o2) {
     if (this._$cssResult$ = true, o2 !== s$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -186,7 +186,7 @@ let n$3 = class n {
   get styleSheet() {
     let t2 = this.o;
     const s2 = this.t;
-    if (e$2 && void 0 === t2) {
+    if (e$4 && void 0 === t2) {
       const e2 = void 0 !== s2 && 1 === s2.length;
       e2 && (t2 = o$4.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$4.set(s2, t2));
     }
@@ -196,13 +196,20 @@ let n$3 = class n {
     return this.cssText;
   }
 };
-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);
+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) => {
+  if (e$4) 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;
     void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3);
   }
-}, c$2 = e$2 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
+}, c$2 = e$4 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
   let e2 = "";
   for (const s2 of t3.cssRules) e2 += s2.cssText;
   return r$4(e2);
@@ -212,7 +219,7 @@ const r$4 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$2),
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: i$2, defineProperty: e$1, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$3, getOwnPropertySymbols: o$3, getPrototypeOf: n$2 } = Object, a$1 = globalThis, c$1 = a$1.trustedTypes, l$1 = c$1 ? c$1.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (t2, s2) => t2, u$1 = { toAttribute(t2, s2) {
+const { is: i$2, defineProperty: e$3, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$3, getOwnPropertySymbols: o$3, getPrototypeOf: n$2 } = Object, a$1 = globalThis, c$1 = a$1.trustedTypes, l$1 = c$1 ? c$1.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (t2, s2) => t2, u$1 = { toAttribute(t2, s2) {
   switch (s2) {
     case Boolean:
       t2 = t2 ? l$1 : null;
@@ -252,7 +259,7 @@ let y$1 = class y extends HTMLElement {
   static createProperty(t2, s2 = b$1) {
     if (s2.state && (s2.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t2) && ((s2 = Object.create(s2)).wrapped = true), this.elementProperties.set(t2, s2), !s2.noAccessor) {
       const i2 = Symbol(), h2 = this.getPropertyDescriptor(t2, i2, s2);
-      void 0 !== h2 && e$1(this.prototype, t2, h2);
+      void 0 !== h2 && e$3(this.prototype, t2, h2);
     }
   }
   static getPropertyDescriptor(t2, s2, i2) {
@@ -429,11 +436,11 @@ y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$1("eleme
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$1 = globalThis, i$1 = (t2) => t2, s$1 = t$1.trustedTypes, e = s$1 ? s$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, h = "$lit$", o$2 = `lit$${Math.random().toFixed(9).slice(2)}$`, n$1 = "?" + o$2, r$2 = `<${n$1}>`, l = document, c = () => l.createComment(""), a = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, u = Array.isArray, d = (t2) => u(t2) || "function" == typeof t2?.[Symbol.iterator], f = "[ 	\n\f\r]", v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ 	
+const t$1 = globalThis, i$1 = (t2) => t2, s$1 = t$1.trustedTypes, e$2 = s$1 ? s$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, h = "$lit$", o$2 = `lit$${Math.random().toFixed(9).slice(2)}$`, n$1 = "?" + o$2, r$2 = `<${n$1}>`, l = document, c = () => l.createComment(""), a = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, u = Array.isArray, d = (t2) => u(t2) || "function" == typeof t2?.[Symbol.iterator], f = "[ 	\n\f\r]", v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y2 = /^(?:script|style|textarea|title)$/i, x = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), b = x(1), E = Symbol.for("lit-noChange"), A = Symbol.for("lit-nothing"), C = /* @__PURE__ */ new WeakMap(), P = l.createTreeWalker(l, 129);
 function V(t2, i2) {
   if (!u(t2) || !t2.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return void 0 !== e ? e.createHTML(i2) : i2;
+  return void 0 !== e$2 ? e$2.createHTML(i2) : i2;
 }
 const N = (t2, i2) => {
   const s2 = t2.length - 1, e2 = [];
@@ -736,6 +743,280 @@ function n2(t2) {
 function r(r2) {
   return n2({ ...r2, state: true, attribute: false });
 }
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$1 = (e2, t2, c2) => (c2.configurable = true, c2.enumerable = true, Reflect.decorate && "object" != typeof t2 && Object.defineProperty(e2, t2, c2), c2);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function e(e2, r2) {
+  return (n3, s2, i2) => {
+    const o2 = (t2) => t2.renderRoot?.querySelector(e2) ?? null;
+    return e$1(n3, s2, { get() {
+      return o2(this);
+    } });
+  };
+}
+i$3`
+  /* Colors */
+  --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(0, 0, 0, 0.1);
+  --wf-color-progress-inactive: rgba(0, 0, 0, 0.05);
+
+  /* Spacing scale */
+  --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;
+
+  /* Border radius */
+  --wf-radius-sm: 4px;
+  --wf-radius-md: 8px;
+  --wf-radius-lg: 8px;
+  --wf-radius-full: 99px;
+
+  /* Typography */
+  --wf-font-size-xs: 0.75rem;
+  --wf-font-size-sm: 0.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;
+
+  /* Input dimensions */
+  --wf-input-min-height: 56px;
+
+  /* Frosted glass effect (iOS-style) */
+  --wf-glass-bg: rgba(255, 255, 255, 0.7);
+  --wf-glass-bg-hover: rgba(255, 255, 255, 0.85);
+  --wf-glass-border: rgba(0, 0, 0, 0.1);
+  --wf-glass-blur: 20px;
+  --wf-glass-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+`;
+i$3`
+  --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);
+
+  /* Dark theme frosted glass */
+  --wf-glass-bg: rgba(45, 45, 45, 0.7);
+  --wf-glass-bg-hover: rgba(60, 60, 60, 0.8);
+  --wf-glass-border: rgba(255, 255, 255, 0.1);
+`;
+const sharedAnimations = i$3`@keyframes wf-spin{to{transform:rotate(360deg)}}@keyframes wf-blink{0%,to{opacity:1}50%{opacity:.5}}@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)}}`;
+const buttonBaseStyles = i$3`.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;box-sizing:border-box;border:1px solid #0000;outline:none;font-family:inherit;font-weight:600;transition:all .15s;display:inline-flex}.wf-btn:focus-visible{box-shadow:0 0 0 3px #8040f04d}.wf-btn:disabled{opacity:.5;cursor:not-allowed}`;
+i$3`.wf-glass{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)}.wf-glass:hover{background:var(--wf-glass-bg-hover,#ffffffd9)}`;
+i$3`
+  ${sharedAnimations}
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+const wizardFormStyles = [
+  sharedAnimations,
+  i$3`
+  /* ----------------------------------------
+     :host - Design tokens & base styles
+     ---------------------------------------- */
+  :host {
+    display: block;
+
+    /* Color tokens */
+    --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(0, 0, 0, 0.1);
+    --wf-color-progress-inactive: rgba(0, 0, 0, 0.05);
+
+    /* Spacing tokens */
+    --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;
+
+    /* Border radius tokens */
+    --wf-radius-sm: 4px;
+    --wf-radius-md: 8px;
+    --wf-radius-lg: 8px;
+    --wf-radius-full: 99px;
+
+    /* Typography tokens */
+    --wf-font-size-xs: 0.75rem;
+    --wf-font-size-sm: 0.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;
+
+    /* Input tokens */
+    --wf-input-min-height: 56px;
+
+    /* Frosted glass effect (iOS-style) */
+    --wf-glass-bg: rgba(255, 255, 255, 0.7);
+    --wf-glass-bg-hover: rgba(255, 255, 255, 0.85);
+    --wf-glass-border: rgba(0, 0, 0, 0.1);
+    --wf-glass-blur: 20px;
+    --wf-glass-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* 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);
+
+    /* Dark theme frosted glass */
+    --wf-glass-bg: rgba(45, 45, 45, 0.7);
+    --wf-glass-bg-hover: rgba(60, 60, 60, 0.8);
+    --wf-glass-border: rgba(255, 255, 255, 0.1);
+  }
+
+  /* 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);
+
+      /* Dark theme frosted glass */
+      --wf-glass-bg: rgba(45, 45, 45, 0.7);
+      --wf-glass-bg-hover: rgba(60, 60, 60, 0.8);
+      --wf-glass-border: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  /* ----------------------------------------
+     Container
+     ---------------------------------------- */
+  .wf-container {
+    margin: 0 auto;
+  }
+
+  /* ----------------------------------------
+     Success screen
+     ---------------------------------------- */
+  .wf-success-screen {
+    text-align: center;
+    padding: var(--wf-spacing-6, 24px);
+  }
+
+  /* ----------------------------------------
+     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);
+  }
+
+  /* ----------------------------------------
+     Slot styles
+     ---------------------------------------- */
+  ::slotted(wf-step) {
+    display: none;
+    width: 100%;
+  }
+
+  ::slotted(wf-step[active]) {
+    display: block;
+    animation: wf-stepFadeIn 0.3s ease forwards;
+  }
+
+  ::slotted(wf-step[direction='forward'][active]) {
+    animation: wf-stepSlideInRight 0.3s ease forwards;
+  }
+
+  ::slotted(wf-step[direction='backward'][active]) {
+    animation: wf-stepSlideInLeft 0.3s ease forwards;
+  }
+
+  ::slotted(wf-step[leaving]) {
+    display: block;
+    animation: wf-stepFadeOut 0.2s ease forwards;
+  }
+
+  /* Success slot hidden by default, shown when submitted */
+  ::slotted([slot='success']) {
+    display: none;
+  }
+
+  :host([submitted]) ::slotted([slot='success']) {
+    display: block;
+  }
+
+  :host([submitted]) ::slotted(wf-step) {
+    display: none !important;
+  }
+`
+];
 class FormStateController {
   constructor(host) {
     this._formData = {};
@@ -1065,14 +1346,67 @@ class KeyboardController {
     return this._enabled;
   }
 }
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+const wfBadgeStyles = 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;
+  }
+
+  .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--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;
+  }
+
+  .wf-badge--button {
+    background-color: transparent;
+    border: none;
+    border-radius: var(--wf-radius-sm, 4px);
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .wf-badge--button-secondary {
+    background-color: transparent;
+    border: none;
+    border-radius: var(--wf-radius-sm, 4px);
+    color: var(--wf-color-text-muted, #5f5f5f);
+  }
+`;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(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$d(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 let WfBadge = class extends i {
@@ -1081,40 +1415,36 @@ 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
         class="wf-badge wf-badge--${this.variant}"
         aria-hidden="true"
+        data-testid="wf-badge"
       >
         ${this.shortcut}
       </span>
     `;
   }
 };
-__decorateClass$d([
+WfBadge.styles = wfBadgeStyles;
+__decorateClass$f([
   n2({ type: String })
 ], WfBadge.prototype, "shortcut", 2);
-__decorateClass$d([
+__decorateClass$f([
   n2({ type: String })
 ], WfBadge.prototype, "variant", 2);
-WfBadge = __decorateClass$d([
+WfBadge = __decorateClass$f([
   t("wf-badge")
 ], WfBadge);
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (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$e(target, key, result);
   return result;
 };
 let WizardForm = class extends i {
@@ -1133,9 +1463,9 @@ let WizardForm = class extends i {
     this._totalSteps = 0;
     this._formData = {};
     this._submitting = false;
-    this._submitted = false;
+    this.submitted = false;
     this._error = "";
-    this._cachedSuccessContent = null;
+    this._otherInputActive = false;
     this._stateController = new FormStateController(this);
     this._handleFieldChange = (e2) => {
       const { name, value, extraFields } = e2.detail;
@@ -1146,6 +1476,10 @@ let WizardForm = class extends i {
           this._formData[fieldName] = fieldValue;
           this._stateController.setValue(fieldName, fieldValue);
         });
+        const hasOtherText = Object.values(extraFields).some((v2) => v2 && String(v2).trim());
+        this._otherInputActive = hasOtherText;
+      } else {
+        this._otherInputActive = false;
       }
       this._error = "";
       this.dispatchEvent(
@@ -1161,6 +1495,9 @@ let WizardForm = class extends i {
       );
     };
     this._handleOptionSelect = (e2) => {
+      if (this._stepHasComposableNav()) {
+        return;
+      }
       if (this.autoAdvance) {
         const target = e2.target;
         const optionsParent = target.closest("wf-options");
@@ -1171,17 +1508,22 @@ let WizardForm = class extends i {
         }
       }
     };
+    this._handleNavNext = async (e2) => {
+      e2.stopPropagation();
+      await this._goNext();
+    };
+    this._handleNavBack = (e2) => {
+      e2.stopPropagation();
+      this._goBack();
+    };
+    this._handleNavStateRequest = () => {
+      this._broadcastNavState();
+    };
     new KeyboardController(this, {
       onEnter: () => this._handleEnter(),
       onEscape: () => this._handleEscape()
     });
   }
-  /**
-   * Disable Shadow DOM - render to Light DOM for external styling
-   */
-  createRenderRoot() {
-    return this;
-  }
   // ============================================
   // Lifecycle
   // ============================================
@@ -1189,56 +1531,56 @@ let WizardForm = class extends i {
     super.connectedCallback();
     this.addEventListener("wf-change", this._handleFieldChange);
     this.addEventListener("wf-option-select", this._handleOptionSelect);
+    this.addEventListener("wf:nav-next", this._handleNavNext);
+    this.addEventListener("wf:nav-back", this._handleNavBack);
+    this.addEventListener("wf:nav-state-request", this._handleNavStateRequest);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("wf-change", this._handleFieldChange);
     this.removeEventListener("wf-option-select", this._handleOptionSelect);
+    this.removeEventListener("wf:nav-next", this._handleNavNext);
+    this.removeEventListener("wf:nav-back", this._handleNavBack);
+    this.removeEventListener("wf:nav-state-request", this._handleNavStateRequest);
   }
   firstUpdated() {
-    this._cachedSuccessContent = this.querySelector('[slot="success"]');
     this._discoverSteps();
     this._showCurrentStep();
+    this._broadcastNavState();
   }
   // ============================================
   // Rendering
   // ============================================
   render() {
-    if (this._submitted) {
+    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">
+      return b`
+        <div class="wf-container" data-testid="wf-container">
+          <slot name="success">
             <div class="wf-success-screen">
-              ${this._cachedSuccessContent}
+              <h2>Thank you!</h2>
+              <p>Your submission has been received.</p>
             </div>
-          </div>
-        `;
-      }
-      return b`
-        <div class="wf-container wf-submitted">
-          <div class="wf-success-screen">
-            <h2>Thank you!</h2>
-            <p>Your submission has been received.</p>
-          </div>
+          </slot>
         </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-container" data-testid="wf-container">
+        ${this._error ? b`<div class="wf-form-error" role="alert" data-testid="wf-form-error">${this._error}</div>` : A}
 
-        ${this._renderNavigation()}
+        <slot @slotchange="${this._handleSlotChange}"></slot>
       </div>
     `;
   }
+  /**
+   * Handle slot changes to re-discover steps when DOM changes
+   */
+  _handleSlotChange() {
+    this._discoverSteps();
+  }
   _renderProgress() {
     const segments = [];
     for (let i2 = 1; i2 <= this._totalSteps; i2++) {
@@ -1252,41 +1594,27 @@ let WizardForm = class extends i {
     }
     return b`<div class="wf-progress">${segments}</div>`;
   }
+  /**
+   * Centralized navigation is no longer rendered.
+   * All navigation is now fully composable via <wf-next-btn> and <wf-back-btn>.
+   * Keyboard shortcuts (Enter/Esc) still work regardless of button presence.
+   */
   _renderNavigation() {
-    const isFirst = this._currentStep === 1;
-    const isLast = this._currentStep === this._totalSteps;
-    const showBack = !this.hideBack && !isFirst;
-    return b`
-      <div class="wf-navigation">
-        ${showBack ? b`
-              <button
-                class="wf-btn wf-btn-back"
-                @click="${this._goBack}"
-                ?disabled="${this._submitting}"
-                data-testid="wf-back-btn"
-              >
-                <span class="wf-btn-shortcut"><wf-badge shortcut="Esc" variant="button-secondary"></wf-badge></span>
-                Back
-              </button>
-            ` : A}
-
-        <button
-          class="wf-btn wf-btn-next"
-          @click="${this._goNext}"
-          ?disabled="${this._submitting}"
-          data-testid="wf-next-btn"
-        >
-          ${this._submitting ? b`<span class="wf-loading"></span>` : isLast ? "Submit" : "Continue"}
-          <span class="wf-btn-shortcut"><wf-badge shortcut="Enter ↵" variant="button"></wf-badge></span>
-        </button>
-      </div>
-    `;
+    return A;
   }
   // ============================================
   // Step Discovery
   // ============================================
   _discoverSteps() {
-    this._steps = Array.from(this.querySelectorAll(":scope > wf-step"));
+    const slot = this.shadowRoot?.querySelector("slot:not([name])");
+    if (slot) {
+      const assignedElements = slot.assignedElements({ flatten: true });
+      this._steps = assignedElements.filter(
+        (el) => el.tagName.toLowerCase() === "wf-step"
+      );
+    } else {
+      this._steps = Array.from(this.querySelectorAll(":scope > wf-step"));
+    }
     this._steps.forEach((step, index) => {
       step.step = index + 1;
     });
@@ -1323,6 +1651,71 @@ let WizardForm = class extends i {
   // ============================================
   // Navigation
   // ============================================
+  /**
+   * Check if the current step requires manual navigation (Continue button).
+   * Returns true if step contains typing inputs or multi-select options.
+   * Returns false if step only has single-select options (auto-advance handles it).
+   */
+  _stepRequiresManualNav() {
+    if (!this.autoAdvance) {
+      return true;
+    }
+    const currentStep = this._getStepByNumber(this._currentStep);
+    if (!currentStep) {
+      return true;
+    }
+    const typingControls = ["wf-input", "wf-email", "wf-textarea", "wf-number"];
+    for (const selector of typingControls) {
+      if (currentStep.querySelector(selector)) {
+        return true;
+      }
+    }
+    const multiSelectOptions = currentStep.querySelector("wf-options[multi]");
+    if (multiSelectOptions) {
+      return true;
+    }
+    const allowOtherOptions = currentStep.querySelector("wf-options[allow-other]");
+    if (allowOtherOptions && this._otherInputActive) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Check if the current step has composable navigation buttons at the step level.
+   * Excludes buttons inside wf-other (those are for inline "Others" input only).
+   * When present, auto-advance is disabled for the step.
+   */
+  _stepHasComposableNav() {
+    const currentStep = this._getStepByNumber(this._currentStep);
+    if (!currentStep) {
+      return false;
+    }
+    const navButtons = currentStep.querySelectorAll("wf-next-btn, wf-back-btn");
+    for (const btn of navButtons) {
+      if (!btn.closest("wf-other")) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Broadcast navigation state to composable buttons.
+   * Called on step changes and submit state changes.
+   */
+  _broadcastNavState() {
+    this.dispatchEvent(
+      new CustomEvent("wf:nav-state", {
+        detail: {
+          currentStep: this._currentStep,
+          totalSteps: this._totalSteps,
+          isFirstStep: this._currentStep === 1,
+          isLastStep: this._currentStep === this._totalSteps,
+          isSubmitting: this._submitting
+        },
+        bubbles: false
+      })
+    );
+  }
   async _goNext() {
     if (this._submitting) {
       return;
@@ -1393,6 +1786,8 @@ let WizardForm = class extends i {
     }
     this._currentStep = targetStep;
     this._stateController.goToStep(targetStep);
+    this._otherInputActive = false;
+    this._broadcastNavState();
     targetStepEl.show(direction);
     this.dispatchEvent(
       new CustomEvent("wf:step-change", {
@@ -1434,6 +1829,7 @@ let WizardForm = class extends i {
     }
     this._submitting = true;
     this._error = "";
+    this._broadcastNavState();
     let submitData = rawData;
     if (this.serialize) {
       submitData = this.serialize(rawData);
@@ -1449,7 +1845,7 @@ let WizardForm = class extends i {
         console.warn("[WizardForm] No submission target configured. Use hubspot-portal/hubspot-form or mock.");
         response = { success: true };
       }
-      this._submitted = true;
+      this.submitted = true;
       this.dispatchEvent(
         new CustomEvent("wf:success", {
           detail: {
@@ -1475,6 +1871,7 @@ let WizardForm = class extends i {
       );
     } finally {
       this._submitting = false;
+      this._broadcastNavState();
     }
   }
   async _submitToHubSpot(formData) {
@@ -1566,7 +1963,7 @@ let WizardForm = class extends i {
    * Check if form was submitted
    */
   get isSubmitted() {
-    return this._submitted;
+    return this.submitted;
   }
   /**
    * Go to a specific step
@@ -1600,7 +1997,7 @@ let WizardForm = class extends i {
     this._formData = {};
     this._currentStep = 1;
     this._submitting = false;
-    this._submitted = false;
+    this.submitted = false;
     this._error = "";
     this._stateController.reset();
     this._showCurrentStep();
@@ -1623,79 +2020,142 @@ let WizardForm = class extends i {
     });
   }
 };
-__decorateClass$c([
+WizardForm.styles = wizardFormStyles;
+__decorateClass$e([
   n2({ type: String, attribute: "hubspot-portal" })
 ], WizardForm.prototype, "hubspotPortal", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String, attribute: "hubspot-form" })
 ], WizardForm.prototype, "hubspotForm", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String, reflect: true })
 ], WizardForm.prototype, "theme", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: Boolean })
 ], WizardForm.prototype, "mock", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: Boolean, attribute: "show-progress" })
 ], WizardForm.prototype, "showProgress", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: Boolean, attribute: "auto-advance" })
 ], WizardForm.prototype, "autoAdvance", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: Boolean, attribute: "hide-back" })
 ], WizardForm.prototype, "hideBack", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ attribute: false })
 ], WizardForm.prototype, "serialize", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: Boolean, attribute: "submit-on-step" })
 ], WizardForm.prototype, "submitOnStep", 2);
-__decorateClass$c([
+__decorateClass$e([
   r()
 ], WizardForm.prototype, "_steps", 2);
-__decorateClass$c([
+__decorateClass$e([
   r()
 ], WizardForm.prototype, "_currentStep", 2);
-__decorateClass$c([
+__decorateClass$e([
   r()
 ], WizardForm.prototype, "_totalSteps", 2);
-__decorateClass$c([
+__decorateClass$e([
   r()
 ], WizardForm.prototype, "_formData", 2);
-__decorateClass$c([
+__decorateClass$e([
   r()
 ], WizardForm.prototype, "_submitting", 2);
-__decorateClass$c([
-  r()
-], WizardForm.prototype, "_submitted", 2);
-__decorateClass$c([
+__decorateClass$e([
+  n2({ type: Boolean, reflect: true })
+], WizardForm.prototype, "submitted", 2);
+__decorateClass$e([
   r()
 ], WizardForm.prototype, "_error", 2);
-WizardForm = __decorateClass$c([
+__decorateClass$e([
+  r()
+], WizardForm.prototype, "_otherInputActive", 2);
+WizardForm = __decorateClass$e([
   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``;
+    return b`<slot></slot>`;
   }
 };
-WfSuccess = __decorateClass$c([
+WfSuccess.styles = i$3`
+    :host {
+      display: block;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `;
+WfSuccess = __decorateClass$e([
   t("wf-success")
 ], WfSuccess);
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+const wfStepStyles = [
+  sharedAnimations,
+  i$3`
+  :host {
+    display: none;
+    width: 100%;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([active]) {
+    display: block;
+    animation: wf-stepFadeIn 0.3s ease forwards;
+  }
+
+  :host([direction='forward'][active]) {
+    animation: wf-stepSlideInRight 0.3s ease forwards;
+  }
+
+  :host([direction='backward'][active]) {
+    animation: wf-stepSlideInLeft 0.3s ease forwards;
+  }
+
+  :host([leaving]) {
+    display: block;
+    animation: wf-stepFadeOut 0.2s ease forwards;
+  }
+
+  .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);
+  }
+`
+];
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (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$d(target, key, result);
   return result;
 };
 let WfStep = class extends i {
@@ -1708,15 +2168,11 @@ 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"></div>
+      <div class="wf-step-content" data-testid="wf-step-content">
+        <slot></slot>
+      </div>
     `;
   }
   firstUpdated() {
@@ -1884,35 +2340,59 @@ let WfStep = class extends i {
     return allValid;
   }
 };
-__decorateClass$b([
+WfStep.styles = wfStepStyles;
+__decorateClass$d([
   n2({ type: Number, attribute: "data-step" })
 ], WfStep.prototype, "step", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: Boolean, reflect: true })
 ], WfStep.prototype, "active", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: String, reflect: true })
 ], WfStep.prototype, "direction", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: Boolean, reflect: true })
 ], WfStep.prototype, "leaving", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: String, attribute: "data-skip-if" })
 ], WfStep.prototype, "skipIf", 2);
-__decorateClass$b([
+__decorateClass$d([
   r()
 ], WfStep.prototype, "_fields", 2);
-WfStep = __decorateClass$b([
+WfStep = __decorateClass$d([
   t("wf-step")
 ], WfStep);
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+const wfLayoutStyles = i$3`
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Width classes */
+  :host(.wf-layout--width-full) {
+    width: 100%;
+  }
+
+  :host(.wf-layout--width-auto) {
+    width: auto;
+  }
+
+  :host(.wf-layout--width-fit) {
+    width: fit-content;
+  }
+`;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (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$c(target, key, result);
   return result;
 };
 const SPACING_SCALE = {
@@ -1941,12 +2421,6 @@ let WfLayout = class extends i {
     this.columns = "auto";
     this.minItemWidth = "200px";
   }
-  /**
-   * Disable Shadow DOM - render to Light DOM for external styling
-   */
-  createRenderRoot() {
-    return this;
-  }
   /**
    * Convert spacing value to pixels
    */
@@ -2031,99 +2505,429 @@ let WfLayout = class extends i {
     return styles.join("; ");
   }
   /**
-   * Apply styles to host element when properties change
+   * Apply data-* attributes from children as inline styles
+   * Supports: data-span, data-row-span, data-grow, data-shrink, data-align, data-order
    */
-  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``;
-  }
+  _applyChildStyles() {
+    if (!this._slot) {
+      return;
+    }
+    const children = this._slot.assignedElements({ flatten: true });
+    for (const child of children) {
+      const el = child;
+      const styles = [];
+      const span = el.getAttribute("data-span");
+      if (span) {
+        styles.push(`grid-column: span ${span}`);
+      }
+      const rowSpan = el.getAttribute("data-row-span");
+      if (rowSpan) {
+        styles.push(`grid-row: span ${rowSpan}`);
+      }
+      if (el.hasAttribute("data-grow")) {
+        styles.push("flex-grow: 1");
+      }
+      if (el.hasAttribute("data-shrink")) {
+        styles.push("flex-shrink: 0");
+      }
+      const align = el.getAttribute("data-align");
+      if (align) {
+        styles.push(`align-self: ${align}`);
+      }
+      const order = el.getAttribute("data-order");
+      if (order) {
+        styles.push(`order: ${order}`);
+      }
+      if (styles.length > 0) {
+        const existingStyles = el.style.cssText;
+        const newStyles = styles.join("; ");
+        el.style.cssText = existingStyles ? `${existingStyles}; ${newStyles}` : newStyles;
+      }
+    }
+  }
+  /**
+   * Handle slot changes to apply child styles
+   */
+  _handleLayoutSlotChange() {
+    this._applyChildStyles();
+  }
+  /**
+   * 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}`);
+    this._applyChildStyles();
+  }
+  render() {
+    return b`<slot @slotchange="${this._handleLayoutSlotChange}"></slot>`;
+  }
 };
-__decorateClass$a([
+WfLayout.styles = wfLayoutStyles;
+__decorateClass$c([
   n2({ type: String })
 ], WfLayout.prototype, "mode", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfLayout.prototype, "direction", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfLayout.prototype, "gap", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String, attribute: "gap-x" })
 ], WfLayout.prototype, "gapX", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String, attribute: "gap-y" })
 ], WfLayout.prototype, "gapY", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfLayout.prototype, "align", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfLayout.prototype, "justify", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfLayout.prototype, "padding", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String, attribute: "padding-x" })
 ], WfLayout.prototype, "paddingX", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String, attribute: "padding-y" })
 ], WfLayout.prototype, "paddingY", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: Boolean })
 ], WfLayout.prototype, "wrap", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfLayout.prototype, "width", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfLayout.prototype, "columns", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String, attribute: "min-item-width" })
 ], WfLayout.prototype, "minItemWidth", 2);
-WfLayout = __decorateClass$a([
+__decorateClass$c([
+  e("slot")
+], WfLayout.prototype, "_slot", 2);
+WfLayout = __decorateClass$c([
   t("wf-layout")
 ], WfLayout);
-var __defProp$9 = Object.defineProperty;
+const wfOptionsStyles = i$3`
+  :host {
+    display: grid;
+    box-sizing: border-box;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Width classes inherited from WfLayout */
+  :host(.wf-layout--width-full) {
+    width: 100%;
+  }
+
+  :host(.wf-layout--width-auto) {
+    width: auto;
+  }
+
+  :host(.wf-layout--width-fit) {
+    width: fit-content;
+  }
+
+  /* Error wrapper for animated expand/collapse */
+  .wf-error-wrapper {
+    grid-column: 1 / -1;
+    order: 1000;
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 200ms ease-out;
+  }
+
+  .wf-error-wrapper.wf-has-error {
+    grid-template-rows: 1fr;
+  }
+
+  .wf-error-message {
+    overflow: hidden;
+    min-height: 0;
+    font-size: var(--wf-font-size-sm, 0.875rem);
+    color: var(--wf-color-error, #dc3545);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+  }
+
+  .wf-has-error .wf-error-message {
+    margin-top: var(--wf-spacing-2, 8px);
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Slotted wf-other spans full width and appears after options */
+  ::slotted(wf-other) {
+    grid-column: 1 / -1;
+    order: 999;
+  }
+`;
+const wfOtherStyles = i$3`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .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);
+  }
+
+  .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-glass-bg, rgba(255, 255, 255, 0.7));
+    backdrop-filter: blur(var(--wf-glass-blur, 20px));
+    -webkit-backdrop-filter: blur(var(--wf-glass-blur, 20px));
+    border: 1px solid var(--wf-glass-border, rgba(0, 0, 0, 0.1));
+    border-radius: var(--wf-radius-md, 8px);
+    box-shadow: var(--wf-glass-shadow, 0 4px 6px rgba(0, 0, 0, 0.05));
+    padding-left: var(--wf-spacing-3, 12px);
+    transition: border-color 150ms ease, box-shadow 150ms ease, background 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-3, 12px);
+    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;
+  }
+
+  .wf-other-actions {
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+  }
+
+  /* Ensure slotted button fills the action column */
+  .wf-other-actions ::slotted(*) {
+    width: 100%;
+  }
+`;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (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$b(target, key, result);
+  return result;
+};
+let WfOther = class extends i {
+  constructor() {
+    super(...arguments);
+    this.label = "Others, please specify:";
+    this.placeholder = "";
+    this.required = false;
+    this.disabled = false;
+    this.shortcut = "";
+    this._value = "";
+    this._handleInput = (e2) => {
+      const input = e2.target;
+      this._value = input.value;
+      this._notifyChange();
+    };
+  }
+  // ============================================
+  // Public API
+  // ============================================
+  /**
+   * Get current value
+   */
+  get value() {
+    return this._value;
+  }
+  /**
+   * Set value
+   */
+  set value(val) {
+    this._value = val;
+  }
+  /**
+   * Clear the input value
+   */
+  clear() {
+    this._value = "";
+    this._notifyChange();
+  }
+  /**
+   * Focus the input
+   */
+  focusInput() {
+    const input = this.shadowRoot?.querySelector(".wf-other-input");
+    input?.focus();
+  }
+  _notifyChange() {
+    this.dispatchEvent(
+      new CustomEvent("wf-other-change", {
+        detail: {
+          value: this._value,
+          name: this.name
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ============================================
+  // Render
+  // ============================================
+  render() {
+    return b`
+      <div class="wf-other-container" data-testid="wf-other">
+        <label class="wf-other-label">
+          ${this.label}
+          ${this.labelHint ? b`<span>${this.labelHint}</span>` : A}
+        </label>
+        <wf-layout mode="grid" columns="4" gap="md">
+          <div class="wf-other-input-wrapper" data-span="3">
+            ${this.shortcut ? b`<wf-badge shortcut="${this.shortcut}"></wf-badge>` : A}
+            <input
+              type="text"
+              class="wf-other-input"
+              placeholder="${this.placeholder}"
+              .value="${this._value}"
+              ?disabled="${this.disabled}"
+              ?required="${this.required}"
+              @input="${this._handleInput}"
+              data-testid="wf-other-input"
+            />
+          </div>
+          <!-- Slot for action buttons (like wf-next-btn) -->
+          <div class="wf-other-actions">
+            <slot></slot>
+          </div>
+        </wf-layout>
+      </div>
+    `;
+  }
+};
+WfOther.styles = wfOtherStyles;
+__decorateClass$b([
+  n2({ type: String })
+], WfOther.prototype, "label", 2);
+__decorateClass$b([
+  n2({ type: String, attribute: "label-hint" })
+], WfOther.prototype, "labelHint", 2);
+__decorateClass$b([
+  n2({ type: String })
+], WfOther.prototype, "placeholder", 2);
+__decorateClass$b([
+  n2({ type: String })
+], WfOther.prototype, "name", 2);
+__decorateClass$b([
+  n2({ type: Boolean })
+], WfOther.prototype, "required", 2);
+__decorateClass$b([
+  n2({ type: Boolean })
+], WfOther.prototype, "disabled", 2);
+__decorateClass$b([
+  n2({ type: String })
+], WfOther.prototype, "shortcut", 2);
+__decorateClass$b([
+  r()
+], WfOther.prototype, "_value", 2);
+WfOther = __decorateClass$b([
+  t("wf-other")
+], WfOther);
+var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
+var __decorateClass$a = (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);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
-let WfOptions = class extends i {
+let WfOptions = class extends WfLayout {
   constructor() {
     super(...arguments);
+    this.mode = "grid";
+    this.gap = "md";
     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.columns = "2";
     this._selected = /* @__PURE__ */ new Set();
     this._otherValue = "";
     this._errorMessage = "";
     this._validationActivated = false;
     this._options = [];
     this._shortcutMap = /* @__PURE__ */ new Map();
-    this._otherShortcut = "";
+    this._composableOther = null;
+    this._handleComposableOtherChange = (e2) => {
+      e2.stopPropagation();
+      this._otherValue = e2.detail.value;
+      if (this._otherValue.trim() && this._selected.size > 0) {
+        this._selected.clear();
+        this._updateOptionStates();
+      }
+      this._dispatchChange();
+    };
     this._handleOptionSelect = (e2) => {
+      if (e2.detail.forwarded) {
+        return;
+      }
       e2.stopPropagation();
       const { value } = e2.detail;
       this._selectValue(value);
+      if (!this.multi) {
+        this.dispatchEvent(
+          new CustomEvent("wf-option-select", {
+            detail: { ...e2.detail, forwarded: true },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
     };
     this._handleKeydown = (e2) => {
       const parentStep = this.closest("wf-step");
@@ -2135,18 +2939,11 @@ let WfOptions = class extends i {
       if (actualTarget?.tagName === "INPUT" || actualTarget?.tagName === "TEXTAREA") {
         return;
       }
-      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) {
+        if (this._composableOther && key === this._composableOther.shortcut) {
           e2.preventDefault();
-          const otherInput2 = this.querySelector(".wf-other-input");
-          if (otherInput2) {
-            otherInput2.focus();
-          }
+          this._composableOther.focusInput();
           return;
         }
         const option = this._shortcutMap.get(key);
@@ -2157,88 +2954,72 @@ let WfOptions = class extends i {
       }
     };
   }
-  /**
-   * Disable Shadow DOM - render to Light DOM for external styling
-   */
-  createRenderRoot() {
-    return this;
-  }
   connectedCallback() {
     super.connectedCallback();
     this._errorMessage = "";
     this._validationActivated = false;
     this.addEventListener("wf-option-select", this._handleOptionSelect);
+    this.addEventListener("wf-other-change", this._handleComposableOtherChange);
     document.addEventListener("keydown", this._handleKeydown);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("wf-option-select", this._handleOptionSelect);
+    this.removeEventListener("wf-other-change", this._handleComposableOtherChange);
     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));
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    const slottedElements = this._defaultSlot?.assignedElements({ flatten: true }) || [];
+    const foundOther = slottedElements.find(
+      (el) => el.tagName.toLowerCase() === "wf-other"
+    );
+    this._composableOther = foundOther ? foundOther : null;
     this._discoverOptions();
     this.requestUpdate();
   }
+  /**
+   * Check if this component has a composable wf-other child
+   */
+  _hasComposableOther() {
+    return this._composableOther !== null;
+  }
   updated(changedProperties) {
+    super.updated(changedProperties);
     if (changedProperties.has("multi") || changedProperties.has("max")) {
       this._updateOptionStates();
     }
   }
   render() {
+    super.updated(/* @__PURE__ */ new Map());
     this.setAttribute("role", "listbox");
     this.setAttribute("aria-multiselectable", String(this.multi));
     this.setAttribute("aria-required", String(this.required));
     return b`
-      <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>
-              <div class="wf-other-input-wrapper">
-                ${this._otherShortcut ? b`<wf-badge shortcut="${this._otherShortcut}"></wf-badge>` : ""}
-                <input
-                  type="text"
-                  class="wf-other-input"
-                  .value="${this._otherValue}"
-                  placeholder="${this.otherPlaceholder}"
-                  data-testid="wf-other-input"
-                  @input="${this._handleOtherInput}"
-                  @keydown="${this._handleOtherKeydown}"
-                  @focus="${this._handleOtherFocus}"
-                />
-              </div>
-            </div>
-          ` : ""}
-      <span class="wf-error-message" role="alert" aria-live="polite" data-testid="wf-error">
-        ${this._errorMessage}
-      </span>
+      <slot @slotchange="${this._handleSlotChange}"></slot>
+      <div class="wf-error-wrapper ${this._errorMessage ? "wf-has-error" : ""}">
+        <span class="wf-error-message" role="alert" aria-live="polite" data-testid="wf-error">
+          ${this._errorMessage || ""}
+        </span>
+      </div>
     `;
   }
-  _handleOtherInput(e2) {
-    const input = e2.target;
-    this._otherValue = input.value;
-    if (this._otherValue.trim() && this._selected.size > 0) {
-      this._selected.clear();
-      this._updateOptionStates();
-    }
-    this._dispatchChange();
-  }
-  _handleOtherFocus() {
-  }
-  _handleOtherKeydown(e2) {
-    if (e2.key === "Escape") {
-      e2.stopPropagation();
-      const input = e2.target;
-      input.blur();
-    }
+  /**
+   * Handle slot content changes to rediscover options
+   */
+  _handleSlotChange() {
+    const slottedElements = this._defaultSlot?.assignedElements({ flatten: true }) || [];
+    const foundOther = slottedElements.find(
+      (el) => el.tagName.toLowerCase() === "wf-other"
+    );
+    this._composableOther = foundOther ? foundOther : null;
+    this._discoverOptions();
   }
   _discoverOptions() {
-    const layout = this.querySelector("wf-layout");
-    this._options = layout ? Array.from(layout.querySelectorAll(":scope > wf-option")) : [];
+    const slottedElements = this._defaultSlot?.assignedElements({ flatten: true }) || [];
+    this._options = slottedElements.filter(
+      (el) => el.tagName.toLowerCase() === "wf-option"
+    );
     this._shortcutMap.clear();
     this._options.forEach((option, index) => {
       if (index < 26) {
@@ -2248,8 +3029,9 @@ let WfOptions = class extends i {
       }
       option.setSelected(this._selected.has(option.value));
     });
-    if (this.allowOther && this._options.length < 26) {
-      this._otherShortcut = String.fromCharCode(65 + this._options.length);
+    if (this._composableOther && this._options.length < 26) {
+      const otherShortcut = String.fromCharCode(65 + this._options.length);
+      this._composableOther.shortcut = otherShortcut;
     }
   }
   _selectValue(value) {
@@ -2258,8 +3040,11 @@ let WfOptions = class extends i {
     } else {
       this._handleSingleSelect(value);
     }
-    if (this.allowOther && this._otherValue) {
+    if (this._otherValue) {
       this._otherValue = "";
+      if (this._composableOther) {
+        this._composableOther.clear();
+      }
     }
     this._updateOptionStates();
     this._validateSelection();
@@ -2288,7 +3073,7 @@ let WfOptions = class extends i {
    * Silent validation check (no side effects)
    */
   _checkValidation() {
-    const hasOtherValue = this.allowOther && this._otherValue.trim();
+    const hasOtherValue = this._hasComposableOther() && this._otherValue.trim();
     const hasSelection = this._selected.size > 0 || hasOtherValue;
     if (this.required && !hasSelection) {
       return false;
@@ -2312,10 +3097,10 @@ let WfOptions = class extends i {
       return this._checkValidation();
     }
     this._errorMessage = "";
-    const hasOtherValue = this.allowOther && this._otherValue.trim();
+    const hasOtherValue = this._hasComposableOther() && this._otherValue.trim();
     const hasSelection = this._selected.size > 0 || hasOtherValue;
     if (this.required && !hasSelection) {
-      this._errorMessage = this.allowOther ? "Please select an option or specify in the text field" : "Please select an option";
+      this._errorMessage = this._hasComposableOther() ? "Please select an option or specify in the text field" : "Please select an option";
       return false;
     }
     if (this.multi) {
@@ -2332,23 +3117,11 @@ let WfOptions = class extends i {
   }
   _dispatchChange() {
     const selectedArray = Array.from(this._selected);
-    const hasOtherText = this.allowOther && this._otherValue.trim() && this._selected.size === 0;
-    let currentValue;
-    if (this.otherName && hasOtherText) {
-      currentValue = this.multi ? [this.otherFieldValue] : this.otherFieldValue;
-    } else {
-      currentValue = this.value;
-    }
     const detail = {
       name: this.name,
-      value: currentValue,
+      value: this.value,
       selected: selectedArray
     };
-    if (this.otherName) {
-      detail.extraFields = {
-        [this.otherName]: hasOtherText ? this._otherValue.trim() : ""
-      };
-    }
     this.dispatchEvent(
       new CustomEvent("wf-change", {
         detail,
@@ -2362,10 +3135,10 @@ let WfOptions = class extends i {
   // ============================================
   /**
    * Get current value (string for single, array for multi)
-   * If allowOther is enabled and "Others" text is filled, returns the custom text
+   * If wf-other child is present and has text, returns the custom text
    */
   get value() {
-    if (this.allowOther && this._otherValue.trim() && this._selected.size === 0) {
+    if (this._hasComposableOther() && this._otherValue.trim() && this._selected.size === 0) {
       return this.multi ? [this._otherValue] : this._otherValue;
     }
     const selectedArray = Array.from(this._selected);
@@ -2464,6 +3237,9 @@ let WfOptions = class extends i {
     this._otherValue = "";
     this._errorMessage = "";
     this._validationActivated = false;
+    if (this._composableOther) {
+      this._composableOther.clear();
+    }
     this._options.forEach((option) => {
       if (option.hasAttribute("selected")) {
         this._selected.add(option.value);
@@ -2473,65 +3249,146 @@ let WfOptions = class extends i {
     this._dispatchChange();
   }
 };
-__decorateClass$9([
+WfOptions.styles = [WfLayout.styles, wfOptionsStyles];
+__decorateClass$a([
+  e("slot:not([name])")
+], WfOptions.prototype, "_defaultSlot", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfOptions.prototype, "mode", 2);
+__decorateClass$a([
+  n2({ type: String })
+], WfOptions.prototype, "gap", 2);
+__decorateClass$a([
   n2({ type: String })
 ], WfOptions.prototype, "name", 2);
-__decorateClass$9([
+__decorateClass$a([
   n2({ type: Boolean })
 ], WfOptions.prototype, "multi", 2);
-__decorateClass$9([
+__decorateClass$a([
   n2({ type: Boolean })
 ], WfOptions.prototype, "required", 2);
-__decorateClass$9([
+__decorateClass$a([
   n2({ type: Number })
 ], WfOptions.prototype, "min", 2);
-__decorateClass$9([
+__decorateClass$a([
   n2({ type: Number })
 ], WfOptions.prototype, "max", 2);
-__decorateClass$9([
-  n2({ type: Number, reflect: true })
+__decorateClass$a([
+  n2({ type: String, reflect: true })
 ], WfOptions.prototype, "columns", 2);
-__decorateClass$9([
-  n2({ type: Boolean, attribute: "allow-other" })
-], WfOptions.prototype, "allowOther", 2);
-__decorateClass$9([
-  n2({ type: String, attribute: "other-label" })
-], WfOptions.prototype, "otherLabel", 2);
-__decorateClass$9([
-  n2({ type: String, attribute: "other-placeholder" })
-], WfOptions.prototype, "otherPlaceholder", 2);
-__decorateClass$9([
-  n2({ type: Boolean, attribute: "other-required" })
-], WfOptions.prototype, "otherRequired", 2);
-__decorateClass$9([
-  n2({ type: String, attribute: "other-name" })
-], WfOptions.prototype, "otherName", 2);
-__decorateClass$9([
-  n2({ type: String, attribute: "other-value" })
-], WfOptions.prototype, "otherFieldValue", 2);
-__decorateClass$9([
+__decorateClass$a([
   r()
 ], WfOptions.prototype, "_selected", 2);
-__decorateClass$9([
+__decorateClass$a([
   r()
 ], WfOptions.prototype, "_otherValue", 2);
-__decorateClass$9([
+__decorateClass$a([
   r()
 ], WfOptions.prototype, "_errorMessage", 2);
-__decorateClass$9([
-  r()
-], WfOptions.prototype, "_otherShortcut", 2);
-WfOptions = __decorateClass$9([
+WfOptions = __decorateClass$a([
   t("wf-options")
 ], WfOptions);
-var __defProp$8 = Object.defineProperty;
+const wfOptionStyles = 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: var(--wf-glass-bg, rgba(255, 255, 255, 0.7));
+    backdrop-filter: blur(var(--wf-glass-blur, 20px));
+    -webkit-backdrop-filter: blur(var(--wf-glass-blur, 20px));
+    border: 1px solid var(--wf-glass-border, rgba(0, 0, 0, 0.1));
+    border-radius: var(--wf-radius-md, 8px);
+    box-shadow: var(--wf-glass-shadow, 0 4px 6px rgba(0, 0, 0, 0.05));
+    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 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: var(--wf-glass-bg-hover, rgba(255, 255, 255, 0.85));
+  }
+
+  .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);
+  }
+
+  .wf-option-card.selecting {
+    animation: wf-blink 0.3s ease;
+  }
+
+  @keyframes wf-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;
+  }
+`;
+var __defProp$9 = Object.defineProperty;
 var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
+var __decorateClass$9 = (decorators, target, key, kind) => {
   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;
-  if (kind && result) __defProp$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let WfOption = class extends i {
@@ -2542,20 +3399,6 @@ 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`
@@ -2572,7 +3415,7 @@ let WfOption = class extends i {
               variant="${this.selected ? "selected" : "default"}"
             ></wf-badge>` : A}
         <div class="wf-option-content">
-          ${this._cachedContent}
+          <slot></slot>
         </div>
       </button>
     `;
@@ -2614,7 +3457,7 @@ let WfOption = class extends i {
    * Focus the option button
    */
   focus() {
-    const button = this.querySelector("button");
+    const button = this.shadowRoot?.querySelector("button");
     button?.focus();
   }
   /**
@@ -2624,35 +3467,205 @@ let WfOption = class extends i {
     this.selected = selected;
   }
 };
-__decorateClass$8([
+WfOption.styles = wfOptionStyles;
+__decorateClass$9([
   n2({ type: String })
 ], WfOption.prototype, "value", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: Boolean, reflect: true })
 ], WfOption.prototype, "selected", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: Boolean, reflect: true })
 ], WfOption.prototype, "disabled", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: String })
 ], WfOption.prototype, "shortcut", 2);
-__decorateClass$8([
+__decorateClass$9([
   r()
 ], WfOption.prototype, "_selecting", 2);
-WfOption = __decorateClass$8([
+WfOption = __decorateClass$9([
   t("wf-option")
 ], WfOption);
-var __defProp$7 = Object.defineProperty;
-var __decorateClass$7 = (decorators, target, key, kind) => {
+const formInputBaseStyles = i$3`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .wf-field-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .wf-label {
+    font-size: var(--wf-font-size-sm, 0.875rem);
+    font-weight: 500;
+    color: var(--wf-color-text, #0a0a0a);
+    margin-bottom: var(--wf-spacing-2, 8px);
+  }
+
+  .wf-label-required::after {
+    content: ' *';
+    color: var(--wf-color-error, #dc3545);
+  }
+
+  /* Error wrapper for animated expand/collapse */
+  .wf-error-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 200ms ease-out;
+  }
+
+  .wf-error-wrapper.wf-has-error {
+    grid-template-rows: 1fr;
+  }
+
+  .wf-error-message {
+    overflow: hidden;
+    min-height: 0;
+    font-size: var(--wf-font-size-sm, 0.875rem);
+    color: var(--wf-color-error, #dc3545);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+  }
+
+  .wf-has-error .wf-error-message {
+    margin-top: var(--wf-spacing-2, 8px);
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .wf-hint {
+    font-size: var(--wf-font-size-sm, 0.875rem);
+    color: var(--wf-color-text-muted, #646464);
+    margin-top: var(--wf-spacing-2, 8px);
+  }
+
+  .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: var(--wf-glass-bg, rgba(255, 255, 255, 0.7));
+    backdrop-filter: blur(var(--wf-glass-blur, 20px));
+    -webkit-backdrop-filter: blur(var(--wf-glass-blur, 20px));
+    border: 1px solid var(--wf-glass-border, rgba(0, 0, 0, 0.1));
+    border-radius: var(--wf-radius-md, 8px);
+    box-shadow: var(--wf-glass-shadow, 0 4px 6px rgba(0, 0, 0, 0.05));
+    color: var(--wf-color-text, #0a0a0a);
+    transition: border-color 150ms ease, box-shadow 150ms ease, background 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);
+  }
+
+  /* Textarea-specific styles */
+  .wf-textarea {
+    width: 100%;
+    padding: var(--wf-spacing-4, 16px);
+    font-size: var(--wf-font-size-base, 1rem);
+    font-family: inherit;
+    background: var(--wf-glass-bg, rgba(255, 255, 255, 0.7));
+    backdrop-filter: blur(var(--wf-glass-blur, 20px));
+    -webkit-backdrop-filter: blur(var(--wf-glass-blur, 20px));
+    border: 1px solid var(--wf-glass-border, rgba(0, 0, 0, 0.1));
+    border-radius: var(--wf-radius-lg, 12px);
+    box-shadow: var(--wf-glass-shadow, 0 4px 6px rgba(0, 0, 0, 0.05));
+    color: var(--wf-color-text, #212529);
+    transition: border-color 150ms ease, box-shadow 150ms ease, background 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-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);
+  }
+
+  /* wf-field slotted input styles */
+  .wf-input-wrapper {
+    position: relative;
+  }
+
+  /* Number input - hide 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;
+  }
+`;
+var __defProp$8 = Object.defineProperty;
+var __decorateClass$8 = (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);
+  if (result) __defProp$8(target, key, result);
   return result;
 };
 const DEFAULT_DEBOUNCE_MS = 600;
-class FormInputBase extends i {
+const _FormInputBase = class _FormInputBase extends i {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -2705,12 +3718,6 @@ class FormInputBase extends i {
       );
     };
   }
-  /**
-   * Disable Shadow DOM - render to Light DOM for external styling
-   */
-  createRenderRoot() {
-    return this;
-  }
   // ============================================
   // Lifecycle Methods
   // ============================================
@@ -2743,6 +3750,41 @@ class FormInputBase extends i {
     return "input";
   }
   // ============================================
+  // Shared Render Helpers
+  // ============================================
+  /**
+   * Render the label element
+   */
+  _renderLabel() {
+    if (!this.label) {
+      return A;
+    }
+    return b`<label
+      class="wf-label ${this.required ? "wf-label-required" : ""}"
+      for="${this.name}"
+      data-testid="wf-label"
+    >${this.label}</label>`;
+  }
+  /**
+   * Render the hint text (only shown when no error)
+   */
+  _renderHint() {
+    if (!this.hint || this._errorMessage) {
+      return A;
+    }
+    return b`<span class="wf-hint">${this.hint}</span>`;
+  }
+  /**
+   * Render the error message container with animation support
+   */
+  _renderError() {
+    return b`<div class="wf-error-wrapper ${this._errorMessage ? "wf-has-error" : ""}">
+      <span class="wf-error-message" role="alert" aria-live="polite" data-testid="wf-error">
+        ${this._errorMessage || ""}
+      </span>
+    </div>`;
+  }
+  // ============================================
   // Public API
   // ============================================
   /**
@@ -2819,7 +3861,7 @@ class FormInputBase extends i {
    * Focus the input element
    */
   focus() {
-    const element = this.querySelector(this._getFocusableSelector());
+    const element = this.shadowRoot?.querySelector(this._getFocusableSelector());
     element?.focus();
   }
   /**
@@ -2834,23 +3876,25 @@ class FormInputBase extends i {
       this._debounceTimer = null;
     }
   }
-}
-__decorateClass$7([
+};
+_FormInputBase.styles = formInputBaseStyles;
+let FormInputBase = _FormInputBase;
+__decorateClass$8([
   n2({ type: String })
 ], FormInputBase.prototype, "name");
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String })
 ], FormInputBase.prototype, "label");
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: Boolean })
 ], FormInputBase.prototype, "required");
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String })
 ], FormInputBase.prototype, "hint");
-__decorateClass$7([
+__decorateClass$8([
   r()
 ], FormInputBase.prototype, "_errorMessage");
-__decorateClass$7([
+__decorateClass$8([
   r()
 ], FormInputBase.prototype, "_value");
 const DEFAULT_BLOCKED_DOMAINS = [
@@ -3088,182 +4132,14 @@ class ValidationController {
     };
   }
 }
-var __defProp$6 = Object.defineProperty;
+var __defProp$7 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
+var __decorateClass$7 = (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$6(target, key, result);
-  return result;
-};
-let WfField = class extends FormInputBase {
-  constructor() {
-    super(...arguments);
-    this._inputElement = null;
-  }
-  // ============================================
-  // Lifecycle Overrides
-  // ============================================
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("input", this._handleInput);
-    this.addEventListener("blur", this._handleBlur, true);
-    this.addEventListener("focus", this._handleFocus, true);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("input", this._handleInput);
-    this.removeEventListener("blur", this._handleBlur, true);
-    this.removeEventListener("focus", this._handleFocus, true);
-  }
-  firstUpdated() {
-    this._discoverInput();
-    this._setupValidators();
-  }
-  // ============================================
-  // Abstract Method Implementations
-  // ============================================
-  _getValidationTriggerProperties() {
-    return ["required"];
-  }
-  /**
-   * Field uses faster debounce (300ms) for responsive validation
-   */
-  _getDebounceMs() {
-    return 300;
-  }
-  _setupValidators() {
-    if (!this._inputElement) {
-      return;
-    }
-    this._validators = [];
-    if (this.required || this._inputElement.hasAttribute("required")) {
-      this._validators.push(ValidationController.required());
-    }
-    if (this._inputElement.getAttribute("type") === "email") {
-      this._validators.push(ValidationController.email());
-    }
-    if (this._inputElement.hasAttribute("data-work-email")) {
-      const blockedDomainsAttr = this._inputElement.getAttribute("data-blocked-domains");
-      const blockedDomains = blockedDomainsAttr ? blockedDomainsAttr.split(",").map((d2) => d2.trim()) : void 0;
-      this._validators.push(ValidationController.workEmail(blockedDomains));
-    }
-    const pattern = this._inputElement.getAttribute("pattern");
-    if (pattern) {
-      const message = this._inputElement.getAttribute("data-pattern-message") || "Invalid format";
-      this._validators.push(ValidationController.pattern(new RegExp(pattern), message));
-    }
-    const minLength = this._inputElement.getAttribute("minlength");
-    if (minLength) {
-      this._validators.push(ValidationController.minLength(parseInt(minLength, 10)));
-    }
-    const maxLength = this._inputElement.getAttribute("maxlength");
-    if (maxLength) {
-      this._validators.push(ValidationController.maxLength(parseInt(maxLength, 10)));
-    }
-  }
-  // ============================================
-  // 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 from slotted element or internal state
-   */
-  get value() {
-    return this._inputElement?.value ?? this._value;
-  }
-  /**
-   * Set value on both internal state and slotted element
-   */
-  set value(val) {
-    this._value = val;
-    if (this._inputElement) {
-      this._inputElement.value = String(val ?? "");
-    }
-  }
-  // ============================================
-  // Focus and Reset Overrides
-  // ============================================
-  /**
-   * Focus the slotted input element
-   */
-  focus() {
-    this._inputElement?.focus();
-  }
-  /**
-   * Reset field to initial state including slotted element
-   */
-  reset() {
-    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>
-    `;
-  }
-};
-__decorateClass$6([
-  r()
-], WfField.prototype, "_inputElement", 2);
-WfField = __decorateClass$6([
-  t("wf-field")
-], WfField);
-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$5(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let WfEmail = class extends FormInputBase {
@@ -3309,13 +4185,7 @@ let WfEmail = class extends FormInputBase {
   render() {
     return b`
       <div class="wf-field-container">
-        ${this.label ? b`<label
-              class="wf-label ${this.required ? "wf-label-required" : ""}"
-              for="${this.name}"
-              data-testid="wf-label"
-            >
-              ${this.label}
-            </label>` : ""}
+        ${this._renderLabel()}
         <input
           type="email"
           class="wf-input ${this._errorMessage ? "wf-input-error" : ""}"
@@ -3330,40 +4200,38 @@ let WfEmail = class extends FormInputBase {
           @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>
+        ${this._renderHint()}
+        ${this._renderError()}
       </div>
     `;
   }
 };
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: String })
 ], WfEmail.prototype, "placeholder", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Boolean, attribute: "work-email" })
 ], WfEmail.prototype, "workEmail", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: String, attribute: "blocked-domains" })
 ], WfEmail.prototype, "blockedDomains", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: String, attribute: "work-email-message" })
 ], WfEmail.prototype, "workEmailMessage", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Boolean })
 ], WfEmail.prototype, "disabled", 2);
-WfEmail = __decorateClass$5([
+WfEmail = __decorateClass$7([
   t("wf-email")
 ], WfEmail);
-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$6 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (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$4(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let WfInput = class extends FormInputBase {
@@ -3404,13 +4272,7 @@ let WfInput = class extends FormInputBase {
   render() {
     return b`
       <div class="wf-field-container">
-        ${this.label ? b`<label
-              class="wf-label ${this.required ? "wf-label-required" : ""}"
-              for="${this.name}"
-              data-testid="wf-label"
-            >
-              ${this.label}
-            </label>` : ""}
+        ${this._renderLabel()}
         <input
           type="${this.type}"
           class="wf-input ${this._errorMessage ? "wf-input-error" : ""}"
@@ -3426,49 +4288,47 @@ let WfInput = class extends FormInputBase {
           @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>
+        ${this._renderHint()}
+        ${this._renderError()}
       </div>
     `;
   }
 };
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], WfInput.prototype, "placeholder", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], WfInput.prototype, "type", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Number })
 ], WfInput.prototype, "minlength", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Number })
 ], WfInput.prototype, "maxlength", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], WfInput.prototype, "pattern", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String, attribute: "pattern-message" })
 ], WfInput.prototype, "patternMessage", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Boolean })
 ], WfInput.prototype, "disabled", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], WfInput.prototype, "autocomplete", 2);
-WfInput = __decorateClass$4([
+WfInput = __decorateClass$6([
   t("wf-input")
 ], WfInput);
-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$5 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (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$3(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 let WfNumber = class extends WfInput {
@@ -3509,13 +4369,7 @@ let WfNumber = class extends WfInput {
   render() {
     return b`
       <div class="wf-field-container">
-        ${this.label ? b`<label
-              class="wf-label ${this.required ? "wf-label-required" : ""}"
-              for="${this.name}"
-              data-testid="wf-label"
-            >
-              ${this.label}
-            </label>` : ""}
+        ${this._renderLabel()}
         <input
           type="number"
           class="wf-input ${this._errorMessage ? "wf-input-error" : ""}"
@@ -3534,10 +4388,8 @@ let WfNumber = class extends WfInput {
           @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>
+        ${this._renderHint()}
+        ${this._renderError()}
       </div>
     `;
   }
@@ -3554,26 +4406,26 @@ let WfNumber = class extends WfInput {
     this._value = String(val);
   }
 };
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Number })
 ], WfNumber.prototype, "min", 2);
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Number })
 ], WfNumber.prototype, "max", 2);
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: Number })
 ], WfNumber.prototype, "step", 2);
-WfNumber = __decorateClass$3([
+WfNumber = __decorateClass$5([
   t("wf-number")
 ], WfNumber);
-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;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (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$2(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let WfTextarea = class extends FormInputBase {
@@ -3618,13 +4470,7 @@ let WfTextarea = class extends FormInputBase {
     const isAtLimit = this.maxlength !== void 0 && charCount >= this.maxlength;
     return b`
       <div class="wf-field-container">
-        ${this.label ? b`<label
-              class="wf-label ${this.required ? "wf-label-required" : ""}"
-              for="${this.name}"
-              data-testid="wf-label"
-            >
-              ${this.label}
-            </label>` : ""}
+        ${this._renderLabel()}
         <textarea
           class="wf-textarea ${this._errorMessage ? "wf-textarea-error" : ""}"
           id="${this.name}"
@@ -3644,33 +4490,31 @@ let WfTextarea = class extends FormInputBase {
         ${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>
+        ${this._renderHint()}
+        ${this._renderError()}
       </div>
     `;
   }
 };
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: String })
 ], WfTextarea.prototype, "placeholder", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Number })
 ], WfTextarea.prototype, "rows", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Number })
 ], WfTextarea.prototype, "minlength", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Number })
 ], WfTextarea.prototype, "maxlength", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Boolean })
 ], WfTextarea.prototype, "disabled", 2);
-__decorateClass$2([
+__decorateClass$4([
   n2({ type: Boolean, attribute: "show-count" })
 ], WfTextarea.prototype, "showCount", 2);
-WfTextarea = __decorateClass$2([
+WfTextarea = __decorateClass$4([
   t("wf-textarea")
 ], WfTextarea);
 function init(config) {
@@ -3875,14 +4719,41 @@ function init(config) {
   return instance;
 }
 const init_default = { init };
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+const wfProgressStyles = 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(0, 0, 0, 0.05));
+    border-radius: var(--wf-radius-full, 99px);
+    transition: background-color 300ms ease;
+  }
+
+  .wf-progress-segment.completed,
+  .wf-progress-segment.active {
+    background-color: var(--wf-color-progress-active, rgba(0, 0, 0, 0.1));
+  }
+`;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (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$1(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 let WfProgress = class extends i {
@@ -3897,12 +4768,6 @@ let WfProgress = class extends i {
     this._boundHandleSuccess = this._handleSuccess.bind(this);
     this._boundHandleStepsDiscovered = this._handleStepsDiscovered.bind(this);
   }
-  /**
-   * Disable Shadow DOM - render to Light DOM for external styling
-   */
-  createRenderRoot() {
-    return this;
-  }
   connectedCallback() {
     super.connectedCallback();
     document.addEventListener("wf:steps-discovered", this._boundHandleStepsDiscovered);
@@ -3976,6 +4841,10 @@ let WfProgress = class extends i {
       segments.push(b`
         <div
           class="wf-progress-segment ${completed ? "completed" : ""} ${active ? "active" : ""}"
+          data-testid="wf-progress-segment"
+          data-step="${i2}"
+          data-completed="${completed}"
+          data-active="${active}"
           role="progressbar"
           aria-valuenow="${this._currentStep}"
           aria-valuemin="1"
@@ -3983,24 +4852,273 @@ let WfProgress = class extends i {
         ></div>
       `);
     }
-    return b`<div class="wf-progress" role="group" aria-label="Form progress">${segments}</div>`;
+    return b`<div class="wf-progress" data-testid="wf-progress-bar" role="group" aria-label="Form progress">${segments}</div>`;
   }
 };
-__decorateClass$1([
+WfProgress.styles = wfProgressStyles;
+__decorateClass$3([
   n2({ type: String })
 ], WfProgress.prototype, "for", 2);
-__decorateClass$1([
+__decorateClass$3([
   r()
 ], WfProgress.prototype, "_currentStep", 2);
-__decorateClass$1([
+__decorateClass$3([
   r()
 ], WfProgress.prototype, "_totalSteps", 2);
-__decorateClass$1([
+__decorateClass$3([
   r()
 ], WfProgress.prototype, "_isComplete", 2);
-WfProgress = __decorateClass$1([
+WfProgress = __decorateClass$3([
   t("wf-progress")
 ], WfProgress);
+var __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (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$2(target, key, result);
+  return result;
+};
+class NavigationButtonBase extends i {
+  constructor() {
+    super(...arguments);
+    this._isFirstStep = true;
+    this._isLastStep = false;
+    this._isSubmitting = false;
+    this._handleNavState = (e2) => {
+      this._isFirstStep = e2.detail.isFirstStep;
+      this._isLastStep = e2.detail.isLastStep;
+      this._isSubmitting = e2.detail.isSubmitting;
+    };
+  }
+  // ============================================
+  // Lifecycle
+  // ============================================
+  connectedCallback() {
+    super.connectedCallback();
+    this._findWizardForm()?.addEventListener("wf:nav-state", this._handleNavState);
+    this._requestNavState();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._findWizardForm()?.removeEventListener("wf:nav-state", this._handleNavState);
+  }
+  // ============================================
+  // Helpers
+  // ============================================
+  _findWizardForm() {
+    return this.closest("wizard-form");
+  }
+  _requestNavState() {
+    this.dispatchEvent(
+      new CustomEvent("wf:nav-state-request", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Dispatch the navigation event
+   */
+  _dispatchNavEvent() {
+    this.dispatchEvent(
+      new CustomEvent(this._getEventName(), {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+}
+__decorateClass$2([
+  r()
+], NavigationButtonBase.prototype, "_isFirstStep");
+__decorateClass$2([
+  r()
+], NavigationButtonBase.prototype, "_isLastStep");
+__decorateClass$2([
+  r()
+], NavigationButtonBase.prototype, "_isSubmitting");
+const wfNextBtnStyles = [
+  sharedAnimations,
+  buttonBaseStyles,
+  i$3`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    .wf-btn-next {
+      width: 100%;
+      flex: 1;
+      background-color: var(--wf-color-primary, #8040f0);
+      border: 1px solid var(--wf-color-primary-border, #602cbb);
+      color: white;
+      position: relative;
+    }
+
+    .wf-btn-next:hover:not(:disabled) {
+      filter: brightness(1.1);
+    }
+
+    .wf-btn-shortcut {
+      position: absolute;
+      right: var(--wf-spacing-4, 16px);
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .wf-loading {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border: 2px solid rgba(0, 0, 0, 0.1);
+      border-radius: 50%;
+      border-top-color: white;
+      animation: wf-spin 0.8s linear infinite;
+    }
+
+    /* Inline button styles (for use inside wf-other) */
+    :host([inline]) {
+      display: inline-block;
+      width: auto;
+    }
+
+    :host([inline]) .wf-btn {
+      min-height: var(--wf-input-min-height, 56px);
+      width: auto;
+      padding: var(--wf-spacing-3, 12px) var(--wf-spacing-5, 20px);
+    }
+
+    :host([inline]) .wf-btn-shortcut {
+      position: static;
+      margin-left: var(--wf-spacing-2, 8px);
+    }
+  `
+];
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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$1(target, key, result);
+  return result;
+};
+let WfNextBtn = class extends NavigationButtonBase {
+  constructor() {
+    super(...arguments);
+    this.showShortcut = true;
+    this.inline = false;
+    this.disabled = false;
+    this._handleClick = () => {
+      if (this.disabled || this._isSubmitting) {
+        return;
+      }
+      this._dispatchNavEvent();
+    };
+  }
+  // ============================================
+  // Abstract Implementation
+  // ============================================
+  _getEventName() {
+    return "wf:nav-next";
+  }
+  // ============================================
+  // Helpers
+  // ============================================
+  _getButtonLabel() {
+    if (this.label) {
+      return this.label;
+    }
+    const isSubmit = !this.inline && (this.action === "submit" || this.action !== "next" && this._isLastStep);
+    return isSubmit ? "Submit" : "Continue";
+  }
+  _isSubmitAction() {
+    return !this.inline && (this.action === "submit" || this.action !== "next" && this._isLastStep);
+  }
+  // ============================================
+  // Render
+  // ============================================
+  render() {
+    const buttonLabel = this._getButtonLabel();
+    const isDisabled = this.disabled || this._isSubmitting;
+    return b`
+      <button
+        type="button"
+        class="wf-btn wf-btn-next"
+        ?disabled="${isDisabled}"
+        @click="${this._handleClick}"
+        data-testid="wf-next-btn"
+      >
+        ${this._isSubmitting ? b`<span class="wf-loading"></span>` : b`
+              ${buttonLabel}
+              ${this.showShortcut ? b`
+                    <span class="wf-btn-shortcut ${this.inline ? "wf-btn-shortcut-inline" : ""}">
+                      <wf-badge variant="button" shortcut="↵"></wf-badge>
+                    </span>
+                  ` : A}
+            `}
+      </button>
+    `;
+  }
+};
+WfNextBtn.styles = wfNextBtnStyles;
+__decorateClass$1([
+  n2({ type: String })
+], WfNextBtn.prototype, "label", 2);
+__decorateClass$1([
+  n2({ type: String })
+], WfNextBtn.prototype, "action", 2);
+__decorateClass$1([
+  n2({ type: Boolean, attribute: "show-shortcut" })
+], WfNextBtn.prototype, "showShortcut", 2);
+__decorateClass$1([
+  n2({ type: Boolean })
+], WfNextBtn.prototype, "inline", 2);
+__decorateClass$1([
+  n2({ type: Boolean })
+], WfNextBtn.prototype, "disabled", 2);
+WfNextBtn = __decorateClass$1([
+  t("wf-next-btn")
+], WfNextBtn);
+const wfBackBtnStyles = [
+  buttonBaseStyles,
+  i$3`
+    :host {
+      display: inline-block;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    .wf-btn-back {
+      background: var(--wf-glass-bg, rgba(255, 255, 255, 0.7));
+      backdrop-filter: blur(var(--wf-glass-blur, 20px));
+      -webkit-backdrop-filter: blur(var(--wf-glass-blur, 20px));
+      border: 1px solid var(--wf-glass-border, rgba(0, 0, 0, 0.1));
+      box-shadow: var(--wf-glass-shadow, 0 4px 6px rgba(0, 0, 0, 0.05));
+      color: var(--wf-color-text, #0a0a0a);
+    }
+
+    .wf-btn-back:hover:not(:disabled) {
+      background: var(--wf-glass-bg-hover, rgba(255, 255, 255, 0.85));
+    }
+
+    .wf-btn-shortcut {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+    }
+  `
+];
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -4011,92 +5129,86 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let WfThankYou = class extends i {
+let WfBackBtn = class extends NavigationButtonBase {
   constructor() {
     super(...arguments);
-    this.title = "Thank you!";
-    this.subtitle = "We've received your request.";
-    this.hideIcon = false;
+    this.label = "Back";
+    this.showShortcut = true;
+    this.disabled = false;
+    this.hideOnFirst = true;
+    this._handleClick = () => {
+      if (this.disabled) {
+        return;
+      }
+      this._dispatchNavEvent();
+    };
   }
-  /**
-   * Disable Shadow DOM - render to Light DOM for external styling
-   */
-  createRenderRoot() {
-    return this;
+  // ============================================
+  // Abstract Implementation
+  // ============================================
+  _getEventName() {
+    return "wf:nav-back";
   }
+  // ============================================
+  // Render
+  // ============================================
   render() {
+    if (this.hideOnFirst && this._isFirstStep) {
+      return A;
+    }
     return b`
-      ${!this.hideIcon ? b`
-            <div class="wf-thank-you-icon">
-              <slot name="icon">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-              </slot>
-            </div>
-          ` : ""}
-      <h2 class="wf-thank-you-title">${this.title}</h2>
-      <p class="wf-thank-you-subtitle">${this.subtitle}</p>
-      <slot></slot>
-      <slot name="footer"></slot>
+      <button
+        type="button"
+        class="wf-btn wf-btn-back"
+        ?disabled="${this.disabled}"
+        @click="${this._handleClick}"
+        data-testid="wf-back-btn"
+      >
+        ${this.showShortcut ? b`
+              <span class="wf-btn-shortcut">
+                <wf-badge variant="button-secondary">Esc</wf-badge>
+              </span>
+            ` : A}
+        ${this.label}
+      </button>
     `;
   }
 };
+WfBackBtn.styles = wfBackBtnStyles;
 __decorateClass([
   n2({ type: String })
-], WfThankYou.prototype, "title", 2);
+], WfBackBtn.prototype, "label", 2);
 __decorateClass([
-  n2({ type: String })
-], WfThankYou.prototype, "subtitle", 2);
+  n2({ type: Boolean, attribute: "show-shortcut" })
+], WfBackBtn.prototype, "showShortcut", 2);
 __decorateClass([
-  n2({ type: Boolean, attribute: "hide-icon" })
-], WfThankYou.prototype, "hideIcon", 2);
-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,#0000001a);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,#0000004d)}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,#0000001a);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,#0000004d)}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();
+  n2({ type: Boolean })
+], WfBackBtn.prototype, "disabled", 2);
+__decorateClass([
+  n2({ type: Boolean, attribute: "hide-on-first" })
+], WfBackBtn.prototype, "hideOnFirst", 2);
+WfBackBtn = __decorateClass([
+  t("wf-back-btn")
+], WfBackBtn);
 export {
   DEFAULT_BLOCKED_DOMAINS,
   FormStateController,
   KeyboardController,
   ValidationController,
+  WfBackBtn,
   WfBadge,
   WfEmail,
-  WfField,
   WfInput,
   WfLayout,
+  WfNextBtn,
   WfNumber,
   WfOption,
   WfOptions,
+  WfOther,
   WfProgress,
   WfStep,
   WfSuccess,
   WfTextarea,
-  WfThankYou,
   WizardForm,
   createHubSpotAdapter,
   createRevenueHeroAdapter,