aw-wizard-forms 4.0.0 → 4.3.0

package/dist/wizard-form.esm.js

@@ -762,7 +762,7 @@ function e(e2, r2) {
     } });
   };
 }
-i$3`
+const designTokens = i$3`
   /* Colors */
   --wf-color-primary: #8040f0;
   --wf-color-primary-border: #602cbb;
@@ -774,13 +774,20 @@ i$3`
   --wf-color-text-secondary: #404040;
   --wf-color-text-muted: #646464;
   --wf-color-error: #dc3545;
+  --wf-color-error-light: rgba(220, 53, 69, 0.1);
   --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);
 
+  /* Focus ring */
+  --wf-focus-ring-width: 3px;
+  --wf-focus-ring-primary: rgba(128, 64, 240, 0.2);
+  --wf-focus-ring-error: rgba(220, 53, 69, 0.2);
+
   /* Spacing scale */
+  --wf-spacing-05: 2px;
   --wf-spacing-1: 4px;
   --wf-spacing-2: 8px;
   --wf-spacing-3: 12px;
@@ -803,16 +810,33 @@ i$3`
   --wf-font-size-xl: 1.5rem;
   --wf-font-size-2xl: 2rem;
   --wf-font-size-3xl: 2.5rem;
+  --wf-font-family-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  --wf-font-weight-input: 400;
+  --wf-font-weight-label: 500;
+  --wf-font-weight-heading: 600;
+  --wf-font-weight-button: 400;
 
   /* Input dimensions */
   --wf-input-min-height: 56px;
+  --wf-textarea-min-height: 100px;
+
+  /* Component dimensions */
+  --wf-btn-min-height: 48px;
+  --wf-badge-size: 24px;
+  --wf-spinner-size: 20px;
+  --wf-progress-height: 4px;
 
   /* 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);
+  --wf-glass-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
+`;
+const hostTokens = i$3`
+  :host {
+    ${designTokens}
+  }
 `;
 i$3`
   --wf-color-surface: #2d2d2d;
@@ -833,8 +857,8 @@ i$3`
   --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)}`;
+const buttonBaseStyles = i$3`.wf-btn{justify-content:center;align-items:center;gap:var(--wf-spacing-2);padding:var(--wf-spacing-3)var(--wf-spacing-4);min-height:var(--wf-btn-min-height);font-size:var(--wf-font-size-base);font-weight:var(--wf-font-weight-button);border-radius:var(--wf-radius-md);cursor:pointer;box-sizing:border-box;border:1px solid #0000;outline:none;font-family:inherit;transition:all .15s;display:inline-flex}.wf-btn:focus-visible{box-shadow:0 0 0 var(--wf-focus-ring-width)var(--wf-focus-ring-primary)}.wf-btn:disabled{opacity:.5;cursor:not-allowed}`;
+i$3`.wf-glass{background:var(--wf-glass-bg);-webkit-backdrop-filter:blur(var(--wf-glass-blur));border:1px solid var(--wf-glass-border);box-shadow:var(--wf-glass-shadow)}.wf-glass:hover{background:var(--wf-glass-bg-hover)}`;
 i$3`
   ${sharedAnimations}
 
@@ -862,13 +886,20 @@ const wizardFormStyles = [
     --wf-color-text-secondary: #404040;
     --wf-color-text-muted: #646464;
     --wf-color-error: #dc3545;
+    --wf-color-error-light: rgba(220, 53, 69, 0.1);
     --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);
 
+    /* Focus ring */
+    --wf-focus-ring-width: 3px;
+    --wf-focus-ring-primary: rgba(128, 64, 240, 0.2);
+    --wf-focus-ring-error: rgba(220, 53, 69, 0.2);
+
     /* Spacing tokens */
+    --wf-spacing-05: 2px;
     --wf-spacing-1: 4px;
     --wf-spacing-2: 8px;
     --wf-spacing-3: 12px;
@@ -891,16 +922,28 @@ const wizardFormStyles = [
     --wf-font-size-xl: 1.5rem;
     --wf-font-size-2xl: 2rem;
     --wf-font-size-3xl: 2.5rem;
+    --wf-font-family-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    --wf-font-weight-input: 400;
+    --wf-font-weight-label: 500;
+    --wf-font-weight-heading: 600;
+    --wf-font-weight-button: 400;
 
     /* Input tokens */
     --wf-input-min-height: 56px;
+    --wf-textarea-min-height: 100px;
+
+    /* Component dimensions */
+    --wf-btn-min-height: 48px;
+    --wf-badge-size: 24px;
+    --wf-spinner-size: 20px;
+    --wf-progress-height: 4px;
 
     /* 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);
+    --wf-glass-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
   }
 
   :host([hidden]) {
@@ -961,20 +1004,20 @@ const wizardFormStyles = [
      ---------------------------------------- */
   .wf-success-screen {
     text-align: center;
-    padding: var(--wf-spacing-6, 24px);
+    padding: var(--wf-spacing-6);
   }
 
   /* ----------------------------------------
      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);
+    padding: var(--wf-spacing-4);
+    margin-bottom: var(--wf-spacing-4);
+    background-color: var(--wf-color-error-light);
+    border: 1px solid var(--wf-color-error);
+    border-radius: var(--wf-radius-md);
+    color: var(--wf-color-error);
+    font-size: var(--wf-font-size-base);
   }
 
   /* ----------------------------------------
@@ -1360,43 +1403,43 @@ const wfBadgeStyles = i$3`
     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;
+    min-width: var(--wf-badge-size);
+    height: var(--wf-badge-size);
+    padding: var(--wf-spacing-1) var(--wf-spacing-2);
+    font-size: var(--wf-font-size-xs);
+    font-weight: var(--wf-font-weight-label);
+    font-family: var(--wf-font-family-mono);
     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);
+    background-color: var(--wf-color-badge-bg);
+    border: 1px solid var(--wf-color-badge-border);
+    border-radius: var(--wf-radius-sm);
+    color: var(--wf-color-badge-text);
   }
 
   .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);
+    background-color: var(--wf-color-primary);
+    border: 1px solid var(--wf-color-primary);
+    border-radius: var(--wf-radius-sm);
     color: white;
   }
 
   .wf-badge--button {
     background-color: transparent;
     border: none;
-    border-radius: var(--wf-radius-sm, 4px);
+    border-radius: var(--wf-radius-sm);
     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);
+    border-radius: var(--wf-radius-sm);
+    color: var(--wf-color-text-muted);
   }
 `;
 var __defProp$f = Object.defineProperty;
@@ -1466,6 +1509,7 @@ let WizardForm = class extends i {
     this.submitted = false;
     this._error = "";
     this._otherInputActive = false;
+    this._partialSubmitting = false;
     this._stateController = new FormStateController(this);
     this._handleFieldChange = (e2) => {
       const { name, value, extraFields } = e2.detail;
@@ -1760,8 +1804,9 @@ let WizardForm = class extends i {
     const previousStep = this._currentStep;
     let submitted = false;
     let adapter;
-    if (this.submitOnStep && this.hubspotPortal && this.hubspotForm) {
+    if (this.submitOnStep && this.hubspotPortal && this.hubspotForm && direction === "forward" && !this._partialSubmitting) {
       try {
+        this._partialSubmitting = true;
         await this._submitPartialToHubSpot();
         submitted = true;
         adapter = "hubspot";
@@ -1778,6 +1823,8 @@ let WizardForm = class extends i {
           })
         );
         return;
+      } finally {
+        this._partialSubmitting = false;
       }
     }
     const currentStepEl = this._getStepByNumber(this._currentStep);
@@ -1923,6 +1970,7 @@ let WizardForm = class extends i {
   /**
    * Submit partial form data to HubSpot.
    * Only includes fields from steps up to and including the current step.
+   * Filters out empty/blank values to avoid submitting unfilled fields.
    */
   async _submitPartialToHubSpot() {
     const partialData = this._getFieldsUpToStep(this._currentStep);
@@ -1930,7 +1978,18 @@ let WizardForm = class extends i {
     if (this.serialize) {
       submitData = this.serialize(submitData);
     }
-    await this._submitToHubSpot(submitData);
+    const filteredData = Object.fromEntries(
+      Object.entries(submitData).filter(([, value]) => {
+        if (value === null || value === void 0 || value === "") {
+          return false;
+        }
+        if (Array.isArray(value) && value.length === 0) {
+          return false;
+        }
+        return true;
+      })
+    );
+    await this._submitToHubSpot(filteredData);
   }
   // ============================================
   // Public API
@@ -2125,7 +2184,7 @@ const wfStepStyles = [
   .wf-step-content {
     display: flex;
     flex-direction: column;
-    gap: var(--wf-spacing-4, 16px);
+    gap: var(--wf-spacing-4);
   }
 
   /* Slotted heading styles */
@@ -2133,18 +2192,18 @@ const wfStepStyles = [
   ::slotted(h2),
   ::slotted(h3) {
     margin: 0;
-    font-weight: 600;
-    color: var(--wf-color-text, #212529);
+    font-weight: var(--wf-font-weight-heading);
+    color: var(--wf-color-text);
   }
 
   ::slotted(h2) {
-    font-size: var(--wf-font-size-3xl, 2rem);
+    font-size: var(--wf-font-size-3xl);
   }
 
   ::slotted(p) {
     margin: 0;
-    color: var(--wf-color-text-muted, #6c757d);
-    font-size: var(--wf-font-size-xl, 1.375rem);
+    color: var(--wf-color-text-muted);
+    font-size: var(--wf-font-size-xl);
   }
 `
 ];
@@ -2653,15 +2712,15 @@ const wfOptionsStyles = i$3`
   .wf-error-message {
     overflow: hidden;
     min-height: 0;
-    font-size: var(--wf-font-size-sm, 0.875rem);
-    color: var(--wf-color-error, #dc3545);
+    font-size: var(--wf-font-size-sm);
+    color: var(--wf-color-error);
     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);
+    margin-top: var(--wf-spacing-2);
     opacity: 1;
     transform: translateY(0);
   }
@@ -2682,50 +2741,51 @@ const wfOtherStyles = i$3`
   }
 
   .wf-other-container {
-    margin-top: var(--wf-spacing-4, 16px);
+    margin-top: var(--wf-spacing-4);
   }
 
   .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);
+    margin-bottom: var(--wf-spacing-2);
+    font-size: var(--wf-font-size-sm);
+    font-weight: var(--wf-font-weight-label);
+    color: var(--wf-color-text);
   }
 
   .wf-other-label span {
-    font-weight: 400;
-    color: var(--wf-color-text-muted, #646464);
+    font-weight: var(--wf-font-weight-input);
+    color: var(--wf-color-text-muted);
   }
 
   .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);
+    gap: var(--wf-spacing-3);
+    height: var(--wf-input-min-height);
+    background: var(--wf-glass-bg);
+    backdrop-filter: blur(var(--wf-glass-blur));
+    -webkit-backdrop-filter: blur(var(--wf-glass-blur));
+    border: 1px solid var(--wf-glass-border);
+    border-radius: var(--wf-radius-md);
+    box-shadow: var(--wf-glass-shadow);
+    padding-left: var(--wf-spacing-3);
+    padding-right: var(--wf-spacing-2);
     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);
+    border-color: var(--wf-color-primary);
+    box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-focus-ring-primary);
   }
 
   .wf-other-input {
     flex: 1;
-    min-height: calc(var(--wf-input-min-height, 56px) - 2px);
-    padding: var(--wf-spacing-3, 12px);
+    min-height: calc(var(--wf-input-min-height) - 2px);
+    padding: var(--wf-spacing-3);
     padding-left: 0;
-    font-size: var(--wf-font-size-base, 1rem);
-    font-weight: 500;
-    color: var(--wf-color-text, #0a0a0a);
+    font-size: var(--wf-font-size-base);
+    font-weight: var(--wf-font-weight-input);
+    color: var(--wf-color-text);
     background: transparent;
     border: none;
     outline: none;
@@ -2733,19 +2793,29 @@ const wfOtherStyles = i$3`
   }
 
   .wf-other-input::placeholder {
-    color: var(--wf-color-text-muted, #646464);
-    font-weight: 500;
+    color: var(--wf-color-text-muted);
+    font-weight: var(--wf-font-weight-input);
   }
 
   .wf-other-actions {
     display: flex;
     align-items: center;
-    justify-content: stretch;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+
+  /* Show button when input has value */
+  .wf-other-input-wrapper.has-value .wf-other-actions {
+    opacity: 1;
+    visibility: visible;
   }
 
-  /* Ensure slotted button fills the action column */
+  /* Button inside input box should not stretch */
   .wf-other-actions ::slotted(*) {
-    width: 100%;
+    width: auto;
   }
 `;
 var __defProp$b = Object.defineProperty;
@@ -2763,6 +2833,7 @@ let WfOther = class extends i {
     super(...arguments);
     this.label = "Others, please specify:";
     this.placeholder = "";
+    this.parentValue = "Others";
     this.required = false;
     this.disabled = false;
     this.shortcut = "";
@@ -2818,31 +2889,30 @@ let WfOther = class extends i {
   // Render
   // ============================================
   render() {
+    const hasValue = this._value.trim().length > 0;
     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-input-wrapper ${hasValue ? "has-value" : ""}">
+          ${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"
+          />
+          <!-- Slot for action buttons (like wf-next-btn) inside input -->
           <div class="wf-other-actions">
             <slot></slot>
           </div>
-        </wf-layout>
+        </div>
       </div>
     `;
   }
@@ -2860,6 +2930,9 @@ __decorateClass$b([
 __decorateClass$b([
   n2({ type: String })
 ], WfOther.prototype, "name", 2);
+__decorateClass$b([
+  n2({ type: String, attribute: "parent-value" })
+], WfOther.prototype, "parentValue", 2);
 __decorateClass$b([
   n2({ type: Boolean })
 ], WfOther.prototype, "required", 2);
@@ -3122,6 +3195,13 @@ let WfOptions = class extends WfLayout {
       value: this.value,
       selected: selectedArray
     };
+    if (this._hasComposableOther() && this._otherValue.trim() && this._selected.size === 0) {
+      const otherName = this._composableOther?.name || `${this.name}_other`;
+      detail.extraFields = {
+        [otherName]: this._otherValue
+      };
+      detail.value = this._composableOther?.parentValue || "Others";
+    }
     this.dispatchEvent(
       new CustomEvent("wf-change", {
         detail,
@@ -3301,40 +3381,40 @@ const wfOptionStyles = i$3`
   .wf-option-card {
     display: flex;
     align-items: center;
-    gap: var(--wf-spacing-3, 12px);
+    gap: var(--wf-spacing-3);
     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));
+    min-height: var(--wf-input-min-height);
+    padding: var(--wf-spacing-3);
+    background: var(--wf-glass-bg);
+    backdrop-filter: blur(var(--wf-glass-blur));
+    -webkit-backdrop-filter: blur(var(--wf-glass-blur));
+    border: 1px solid var(--wf-glass-border);
+    border-radius: var(--wf-radius-md);
+    box-shadow: var(--wf-glass-shadow);
     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);
+    font-size: var(--wf-font-size-base);
+    font-weight: var(--wf-font-weight-input);
+    color: var(--wf-color-text);
     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));
+    border-color: var(--wf-color-primary);
+    background: var(--wf-glass-bg-hover);
   }
 
   .wf-option-card:focus-visible {
-    border-color: var(--wf-color-primary, #8040f0);
-    box-shadow: 0 0 0 3px rgba(128, 64, 240, 0.2);
+    border-color: var(--wf-color-primary);
+    box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-focus-ring-primary);
   }
 
   .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));
+    border-color: var(--wf-color-primary);
+    background-color: var(--wf-color-primary-light);
   }
 
   .wf-option-card:disabled {
@@ -3369,16 +3449,16 @@ const wfOptionStyles = i$3`
   ::slotted(h3),
   ::slotted(h4) {
     display: block;
-    font-weight: 600;
+    font-weight: var(--wf-font-weight-heading);
     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;
+    font-size: var(--wf-font-size-sm);
+    color: var(--wf-color-text-muted);
+    margin: var(--wf-spacing-1) 0 0 0;
   }
 `;
 var __defProp$9 = Object.defineProperty;
@@ -3501,15 +3581,15 @@ const formInputBaseStyles = i$3`
   }
 
   .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);
+    font-size: var(--wf-font-size-sm);
+    font-weight: var(--wf-font-weight-label);
+    color: var(--wf-color-text);
+    margin-bottom: var(--wf-spacing-2);
   }
 
   .wf-label-required::after {
     content: ' *';
-    color: var(--wf-color-error, #dc3545);
+    color: var(--wf-color-error);
   }
 
   /* Error wrapper for animated expand/collapse */
@@ -3526,52 +3606,52 @@ const formInputBaseStyles = i$3`
   .wf-error-message {
     overflow: hidden;
     min-height: 0;
-    font-size: var(--wf-font-size-sm, 0.875rem);
-    color: var(--wf-color-error, #dc3545);
+    font-size: var(--wf-font-size-sm);
+    color: var(--wf-color-error);
     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);
+    margin-top: var(--wf-spacing-2);
     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);
+    font-size: var(--wf-font-size-sm);
+    color: var(--wf-color-text-muted);
+    margin-top: var(--wf-spacing-2);
   }
 
   .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;
+    min-height: var(--wf-input-min-height);
+    padding: var(--wf-spacing-4);
+    font-size: var(--wf-font-size-base);
+    font-weight: var(--wf-font-weight-input);
     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);
+    background: var(--wf-glass-bg);
+    backdrop-filter: blur(var(--wf-glass-blur));
+    -webkit-backdrop-filter: blur(var(--wf-glass-blur));
+    border: 1px solid var(--wf-glass-border);
+    border-radius: var(--wf-radius-md);
+    box-shadow: var(--wf-glass-shadow);
+    color: var(--wf-color-text);
     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;
+    color: var(--wf-color-text-muted);
+    font-weight: var(--wf-font-weight-input);
   }
 
   .wf-input:focus {
-    border-color: var(--wf-color-primary, #8040f0);
-    box-shadow: 0 0 0 3px rgba(128, 64, 240, 0.2);
+    border-color: var(--wf-color-primary);
+    box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-focus-ring-primary);
   }
 
   .wf-input:disabled {
@@ -3580,40 +3660,40 @@ const formInputBaseStyles = i$3`
   }
 
   .wf-input.wf-input-error {
-    border-color: var(--wf-color-error, #dc3545);
+    border-color: var(--wf-color-error);
   }
 
   .wf-input.wf-input-error:focus {
-    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
+    box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-focus-ring-error);
   }
 
   /* Textarea-specific styles */
   .wf-textarea {
     width: 100%;
-    padding: var(--wf-spacing-4, 16px);
-    font-size: var(--wf-font-size-base, 1rem);
+    padding: var(--wf-spacing-4);
+    font-size: var(--wf-font-size-base);
     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);
+    background: var(--wf-glass-bg);
+    backdrop-filter: blur(var(--wf-glass-blur));
+    -webkit-backdrop-filter: blur(var(--wf-glass-blur));
+    border: 1px solid var(--wf-glass-border);
+    border-radius: var(--wf-radius-lg);
+    box-shadow: var(--wf-glass-shadow);
+    color: var(--wf-color-text);
     transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
     outline: none;
     box-sizing: border-box;
     resize: vertical;
-    min-height: 100px;
+    min-height: var(--wf-textarea-min-height);
   }
 
   .wf-textarea::placeholder {
-    color: var(--wf-color-text-muted, #6c757d);
+    color: var(--wf-color-text-muted);
   }
 
   .wf-textarea:focus {
-    border-color: var(--wf-color-primary, #8b5cf6);
-    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
+    border-color: var(--wf-color-primary);
+    box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-focus-ring-primary);
   }
 
   .wf-textarea:disabled {
@@ -3622,21 +3702,21 @@ const formInputBaseStyles = i$3`
   }
 
   .wf-textarea.wf-textarea-error {
-    border-color: var(--wf-color-error, #dc3545);
+    border-color: var(--wf-color-error);
   }
 
   .wf-textarea.wf-textarea-error:focus {
-    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
+    box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-focus-ring-error);
   }
 
   .wf-char-count {
-    font-size: var(--wf-font-size-sm, 0.875rem);
-    color: var(--wf-color-text-muted, #6c757d);
+    font-size: var(--wf-font-size-sm);
+    color: var(--wf-color-text-muted);
     text-align: right;
   }
 
   .wf-char-count.wf-char-limit {
-    color: var(--wf-color-error, #dc3545);
+    color: var(--wf-color-error);
   }
 
   /* wf-field slotted input styles */
@@ -4719,33 +4799,38 @@ function init(config) {
   return instance;
 }
 const init_default = { init };
-const wfProgressStyles = i$3`
-  :host {
-    display: block;
-  }
+const wfProgressStyles = [
+  hostTokens,
+  i$3`
+    :host {
+      display: block;
+    }
 
-  :host([hidden]) {
-    display: none;
-  }
+    :host([hidden]) {
+      display: none;
+    }
 
-  .wf-progress {
-    display: flex;
-    gap: var(--wf-spacing-4, 16px);
-  }
+    .wf-progress {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      justify-content: center;
+    }
 
-  .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 {
+      width: 32px;
+      height: 8px;
+      background-color: white;
+      border-radius: 100vw;
+      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));
-  }
-`;
+    .wf-progress-segment.completed,
+    .wf-progress-segment.active {
+      background-color: rgb(136 66 240);
+    }
+  `
+];
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
 var __decorateClass$3 = (decorators, target, key, kind) => {
@@ -4955,8 +5040,8 @@ const wfNextBtnStyles = [
     .wf-btn-next {
       width: 100%;
       flex: 1;
-      background-color: var(--wf-color-primary, #8040f0);
-      border: 1px solid var(--wf-color-primary-border, #602cbb);
+      background-color: var(--wf-color-primary);
+      border: 1px solid var(--wf-color-primary-border);
       color: white;
       position: relative;
     }
@@ -4966,17 +5051,15 @@ const wfNextBtnStyles = [
     }
 
     .wf-btn-shortcut {
-      position: absolute;
-      right: var(--wf-spacing-4, 16px);
       display: inline-flex;
       align-items: center;
-      gap: 2px;
+      gap: var(--wf-spacing-05);
     }
 
     .wf-loading {
       display: inline-block;
-      width: 20px;
-      height: 20px;
+      width: var(--wf-spinner-size);
+      height: var(--wf-spinner-size);
       border: 2px solid rgba(0, 0, 0, 0.1);
       border-radius: 50%;
       border-top-color: white;
@@ -4990,14 +5073,12 @@ const wfNextBtnStyles = [
     }
 
     :host([inline]) .wf-btn {
-      min-height: var(--wf-input-min-height, 56px);
+      min-height: 16px;
       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);
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-left: 12px;
+      padding-right: 8px;
     }
   `
 ];
@@ -5061,7 +5142,7 @@ let WfNextBtn = class extends NavigationButtonBase {
               ${buttonLabel}
               ${this.showShortcut ? b`
                     <span class="wf-btn-shortcut ${this.inline ? "wf-btn-shortcut-inline" : ""}">
-                      <wf-badge variant="button" shortcut="↵"></wf-badge>
+                      <wf-badge variant="button" shortcut="Enter ↵"></wf-badge>
                     </span>
                   ` : A}
             `}
@@ -5100,22 +5181,22 @@ const wfBackBtnStyles = [
     }
 
     .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);
+      background: var(--wf-glass-bg);
+      backdrop-filter: blur(var(--wf-glass-blur));
+      -webkit-backdrop-filter: blur(var(--wf-glass-blur));
+      border: 1px solid var(--wf-glass-border);
+      box-shadow: var(--wf-glass-shadow);
+      color: var(--wf-color-text);
     }
 
     .wf-btn-back:hover:not(:disabled) {
-      background: var(--wf-glass-bg-hover, rgba(255, 255, 255, 0.85));
+      background: var(--wf-glass-bg-hover);
     }
 
     .wf-btn-shortcut {
       display: inline-flex;
       align-items: center;
-      gap: 2px;
+      gap: var(--wf-spacing-05);
     }
   `
 ];