aw-wizard-forms 4.10.0 → 4.11.0

package/dist/wizard-form.esm.js

@@ -1442,14 +1442,14 @@ const wfBadgeStyles = i$3`
     color: var(--wf-color-text-muted);
   }
 `;
-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;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(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$f(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 let WfBadge = class extends i {
@@ -1471,23 +1471,23 @@ let WfBadge = class extends i {
   }
 };
 WfBadge.styles = wfBadgeStyles;
-__decorateClass$f([
+__decorateClass$h([
   n2({ type: String })
 ], WfBadge.prototype, "shortcut", 2);
-__decorateClass$f([
+__decorateClass$h([
   n2({ type: String })
 ], WfBadge.prototype, "variant", 2);
-WfBadge = __decorateClass$f([
+WfBadge = __decorateClass$h([
   t("wf-badge")
 ], WfBadge);
-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;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(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$e(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let WizardForm = class extends i {
@@ -1560,6 +1560,17 @@ let WizardForm = class extends i {
       e2.stopPropagation();
       this._goBack();
     };
+    this._handleNavSkip = (e2) => {
+      e2.stopPropagation();
+      if (this._submitting) {
+        return;
+      }
+      if (this._currentStep >= this._totalSteps) {
+        this._submit();
+      } else {
+        this._navigateToStep(this._currentStep + 1, "forward");
+      }
+    };
     this._handleNavStateRequest = () => {
       this._broadcastNavState();
     };
@@ -1577,6 +1588,7 @@ let WizardForm = class extends i {
     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-skip", this._handleNavSkip);
     this.addEventListener("wf:nav-state-request", this._handleNavStateRequest);
   }
   disconnectedCallback() {
@@ -1585,6 +1597,7 @@ let WizardForm = class extends i {
     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-skip", this._handleNavSkip);
     this.removeEventListener("wf:nav-state-request", this._handleNavStateRequest);
   }
   firstUpdated() {
@@ -2072,58 +2085,58 @@ let WizardForm = class extends i {
   }
 };
 WizardForm.styles = wizardFormStyles;
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: String, attribute: "hubspot-portal" })
 ], WizardForm.prototype, "hubspotPortal", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: String, attribute: "hubspot-form" })
 ], WizardForm.prototype, "hubspotForm", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: String, reflect: true })
 ], WizardForm.prototype, "theme", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: Boolean })
 ], WizardForm.prototype, "mock", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: Boolean, attribute: "show-progress" })
 ], WizardForm.prototype, "showProgress", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: Boolean, attribute: "auto-advance" })
 ], WizardForm.prototype, "autoAdvance", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: Boolean, attribute: "hide-back" })
 ], WizardForm.prototype, "hideBack", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ attribute: false })
 ], WizardForm.prototype, "serialize", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: Boolean, attribute: "submit-on-step" })
 ], WizardForm.prototype, "submitOnStep", 2);
-__decorateClass$e([
+__decorateClass$g([
   r()
 ], WizardForm.prototype, "_steps", 2);
-__decorateClass$e([
+__decorateClass$g([
   r()
 ], WizardForm.prototype, "_currentStep", 2);
-__decorateClass$e([
+__decorateClass$g([
   r()
 ], WizardForm.prototype, "_totalSteps", 2);
-__decorateClass$e([
+__decorateClass$g([
   r()
 ], WizardForm.prototype, "_formData", 2);
-__decorateClass$e([
+__decorateClass$g([
   r()
 ], WizardForm.prototype, "_submitting", 2);
-__decorateClass$e([
+__decorateClass$g([
   n2({ type: Boolean, reflect: true })
 ], WizardForm.prototype, "submitted", 2);
-__decorateClass$e([
+__decorateClass$g([
   r()
 ], WizardForm.prototype, "_error", 2);
-__decorateClass$e([
+__decorateClass$g([
   r()
 ], WizardForm.prototype, "_otherInputActive", 2);
-WizardForm = __decorateClass$e([
+WizardForm = __decorateClass$g([
   t("wizard-form")
 ], WizardForm);
 let WfSuccess = class extends i {
@@ -2140,7 +2153,7 @@ WfSuccess.styles = i$3`
       display: none;
     }
   `;
-WfSuccess = __decorateClass$e([
+WfSuccess = __decorateClass$g([
   t("wf-success")
 ], WfSuccess);
 const wfStepStyles = [
@@ -2199,14 +2212,14 @@ const wfStepStyles = [
   }
 `
 ];
-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;
+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 WfStep = class extends i {
@@ -2241,7 +2254,7 @@ let WfStep = class extends i {
    * Discover field elements within this step
    */
   _discoverFields() {
-    const fieldElements = ["wf-options", "wf-field", "wf-email", "wf-input", "wf-textarea", "wf-number"];
+    const fieldElements = ["wf-options", "wf-field", "wf-email", "wf-input", "wf-textarea", "wf-number", "wf-select"];
     const fields = [];
     const findFields = (el) => {
       if (fieldElements.includes(el.tagName.toLowerCase())) {
@@ -2271,7 +2284,7 @@ let WfStep = class extends i {
   }
   _findFocusable(el) {
     if (el instanceof HTMLElement && typeof el.focus === "function") {
-      const fieldElements = ["wf-field", "wf-email", "wf-input", "wf-textarea"];
+      const fieldElements = ["wf-field", "wf-email", "wf-input", "wf-textarea", "wf-select"];
       if (fieldElements.includes(el.tagName.toLowerCase())) {
         return el;
       }
@@ -2392,25 +2405,25 @@ let WfStep = class extends i {
   }
 };
 WfStep.styles = wfStepStyles;
-__decorateClass$d([
+__decorateClass$f([
   n2({ type: Number, attribute: "data-step" })
 ], WfStep.prototype, "step", 2);
-__decorateClass$d([
+__decorateClass$f([
   n2({ type: Boolean, reflect: true })
 ], WfStep.prototype, "active", 2);
-__decorateClass$d([
+__decorateClass$f([
   n2({ type: String, reflect: true })
 ], WfStep.prototype, "direction", 2);
-__decorateClass$d([
+__decorateClass$f([
   n2({ type: Boolean, reflect: true })
 ], WfStep.prototype, "leaving", 2);
-__decorateClass$d([
+__decorateClass$f([
   n2({ type: String, attribute: "data-skip-if" })
 ], WfStep.prototype, "skipIf", 2);
-__decorateClass$d([
+__decorateClass$f([
   r()
 ], WfStep.prototype, "_fields", 2);
-WfStep = __decorateClass$d([
+WfStep = __decorateClass$f([
   t("wf-step")
 ], WfStep);
 const wfLayoutStyles = i$3`
@@ -2436,14 +2449,14 @@ const wfLayoutStyles = i$3`
     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;
+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;
 };
 const SPACING_SCALE = {
@@ -2617,52 +2630,52 @@ let WfLayout = class extends i {
   }
 };
 WfLayout.styles = wfLayoutStyles;
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String })
 ], WfLayout.prototype, "mode", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String })
 ], WfLayout.prototype, "direction", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String })
 ], WfLayout.prototype, "gap", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String, attribute: "gap-x" })
 ], WfLayout.prototype, "gapX", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String, attribute: "gap-y" })
 ], WfLayout.prototype, "gapY", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String })
 ], WfLayout.prototype, "align", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String })
 ], WfLayout.prototype, "justify", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String })
 ], WfLayout.prototype, "padding", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String, attribute: "padding-x" })
 ], WfLayout.prototype, "paddingX", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String, attribute: "padding-y" })
 ], WfLayout.prototype, "paddingY", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: Boolean })
 ], WfLayout.prototype, "wrap", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String })
 ], WfLayout.prototype, "width", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String })
 ], WfLayout.prototype, "columns", 2);
-__decorateClass$c([
+__decorateClass$e([
   n2({ type: String, attribute: "min-item-width" })
 ], WfLayout.prototype, "minItemWidth", 2);
-__decorateClass$c([
+__decorateClass$e([
   e("slot")
 ], WfLayout.prototype, "_slot", 2);
-WfLayout = __decorateClass$c([
+WfLayout = __decorateClass$e([
   t("wf-layout")
 ], WfLayout);
 const wfOptionsStyles = i$3`
@@ -2810,14 +2823,14 @@ const wfOtherStyles = i$3`
     width: auto;
   }
 `;
-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;
+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 WfOther = class extends i {
@@ -2910,44 +2923,44 @@ let WfOther = class extends i {
   }
 };
 WfOther.styles = wfOtherStyles;
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: String })
 ], WfOther.prototype, "label", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: String, attribute: "label-hint" })
 ], WfOther.prototype, "labelHint", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: String })
 ], WfOther.prototype, "placeholder", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: String })
 ], WfOther.prototype, "name", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: String, attribute: "parent-value" })
 ], WfOther.prototype, "parentValue", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: Boolean })
 ], WfOther.prototype, "required", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: Boolean })
 ], WfOther.prototype, "disabled", 2);
-__decorateClass$b([
+__decorateClass$d([
   n2({ type: String })
 ], WfOther.prototype, "shortcut", 2);
-__decorateClass$b([
+__decorateClass$d([
   r()
 ], WfOther.prototype, "_value", 2);
-WfOther = __decorateClass$b([
+WfOther = __decorateClass$d([
   t("wf-other")
 ], WfOther);
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+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;
 };
 let WfOptions = class extends WfLayout {
@@ -3322,43 +3335,43 @@ let WfOptions = class extends WfLayout {
   }
 };
 WfOptions.styles = [WfLayout.styles, wfOptionsStyles];
-__decorateClass$a([
+__decorateClass$c([
   e("slot:not([name])")
 ], WfOptions.prototype, "_defaultSlot", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfOptions.prototype, "mode", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfOptions.prototype, "gap", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String })
 ], WfOptions.prototype, "name", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: Boolean })
 ], WfOptions.prototype, "multi", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: Boolean })
 ], WfOptions.prototype, "required", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: Number })
 ], WfOptions.prototype, "min", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: Number })
 ], WfOptions.prototype, "max", 2);
-__decorateClass$a([
+__decorateClass$c([
   n2({ type: String, reflect: true })
 ], WfOptions.prototype, "columns", 2);
-__decorateClass$a([
+__decorateClass$c([
   r()
 ], WfOptions.prototype, "_selected", 2);
-__decorateClass$a([
+__decorateClass$c([
   r()
 ], WfOptions.prototype, "_otherValue", 2);
-__decorateClass$a([
+__decorateClass$c([
   r()
 ], WfOptions.prototype, "_errorMessage", 2);
-WfOptions = __decorateClass$a([
+WfOptions = __decorateClass$c([
   t("wf-options")
 ], WfOptions);
 const wfOptionStyles = i$3`
@@ -3453,14 +3466,14 @@ const wfOptionStyles = i$3`
     margin: var(--wf-spacing-1) 0 0 0;
   }
 `;
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+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$9(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let WfOption = class extends i {
@@ -3540,22 +3553,22 @@ let WfOption = class extends i {
   }
 };
 WfOption.styles = wfOptionStyles;
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: String })
 ], WfOption.prototype, "value", 2);
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: Boolean, reflect: true })
 ], WfOption.prototype, "selected", 2);
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: Boolean, reflect: true })
 ], WfOption.prototype, "disabled", 2);
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: String })
 ], WfOption.prototype, "shortcut", 2);
-__decorateClass$9([
+__decorateClass$b([
   r()
 ], WfOption.prototype, "_selecting", 2);
-WfOption = __decorateClass$9([
+WfOption = __decorateClass$b([
   t("wf-option")
 ], WfOption);
 const formInputBaseStyles = i$3`
@@ -3727,13 +3740,13 @@ const formInputBaseStyles = i$3`
     -moz-appearance: textfield;
   }
 `;
-var __defProp$8 = Object.defineProperty;
-var __decorateClass$8 = (decorators, target, key, kind) => {
+var __defProp$a = Object.defineProperty;
+var __decorateClass$a = (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$8(target, key, result);
+  if (result) __defProp$a(target, key, result);
   return result;
 };
 const DEFAULT_DEBOUNCE_MS = 600;
@@ -3951,22 +3964,22 @@ const _FormInputBase = class _FormInputBase extends i {
 };
 _FormInputBase.styles = formInputBaseStyles;
 let FormInputBase = _FormInputBase;
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: String })
 ], FormInputBase.prototype, "name");
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: String })
 ], FormInputBase.prototype, "label");
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: Boolean })
 ], FormInputBase.prototype, "required");
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: String })
 ], FormInputBase.prototype, "hint");
-__decorateClass$8([
+__decorateClass$a([
   r()
 ], FormInputBase.prototype, "_errorMessage");
-__decorateClass$8([
+__decorateClass$a([
   r()
 ], FormInputBase.prototype, "_value");
 const DEFAULT_BLOCKED_DOMAINS = [
@@ -4204,14 +4217,14 @@ class ValidationController {
     };
   }
 }
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let WfEmail = class extends FormInputBase {
@@ -4278,32 +4291,32 @@ let WfEmail = class extends FormInputBase {
     `;
   }
 };
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String })
 ], WfEmail.prototype, "placeholder", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Boolean, attribute: "work-email" })
 ], WfEmail.prototype, "workEmail", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String, attribute: "blocked-domains" })
 ], WfEmail.prototype, "blockedDomains", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String, attribute: "work-email-message" })
 ], WfEmail.prototype, "workEmailMessage", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Boolean })
 ], WfEmail.prototype, "disabled", 2);
-WfEmail = __decorateClass$7([
+WfEmail = __decorateClass$9([
   t("wf-email")
 ], WfEmail);
-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;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (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$6(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let WfInput = class extends FormInputBase {
@@ -4366,41 +4379,41 @@ let WfInput = class extends FormInputBase {
     `;
   }
 };
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], WfInput.prototype, "placeholder", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], WfInput.prototype, "type", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: Number })
 ], WfInput.prototype, "minlength", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: Number })
 ], WfInput.prototype, "maxlength", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], WfInput.prototype, "pattern", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String, attribute: "pattern-message" })
 ], WfInput.prototype, "patternMessage", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: Boolean })
 ], WfInput.prototype, "disabled", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], WfInput.prototype, "autocomplete", 2);
-WfInput = __decorateClass$6([
+WfInput = __decorateClass$8([
   t("wf-input")
 ], WfInput);
-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;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+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$5(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let WfNumber = class extends WfInput {
@@ -4478,26 +4491,26 @@ let WfNumber = class extends WfInput {
     this._value = String(val);
   }
 };
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Number })
 ], WfNumber.prototype, "min", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Number })
 ], WfNumber.prototype, "max", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Number })
 ], WfNumber.prototype, "step", 2);
-WfNumber = __decorateClass$5([
+WfNumber = __decorateClass$7([
   t("wf-number")
 ], WfNumber);
-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;
+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 WfTextarea = class extends FormInputBase {
@@ -4568,25 +4581,25 @@ let WfTextarea = class extends FormInputBase {
     `;
   }
 };
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], WfTextarea.prototype, "placeholder", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Number })
 ], WfTextarea.prototype, "rows", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Number })
 ], WfTextarea.prototype, "minlength", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Number })
 ], WfTextarea.prototype, "maxlength", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Boolean })
 ], WfTextarea.prototype, "disabled", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Boolean, attribute: "show-count" })
 ], WfTextarea.prototype, "showCount", 2);
-WfTextarea = __decorateClass$4([
+WfTextarea = __decorateClass$6([
   t("wf-textarea")
 ], WfTextarea);
 function init(config) {
@@ -4824,14 +4837,14 @@ const wfProgressStyles = [
     }
   `
 ];
-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;
+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 WfProgress = class extends i {
@@ -4934,28 +4947,28 @@ let WfProgress = class extends i {
   }
 };
 WfProgress.styles = wfProgressStyles;
-__decorateClass$3([
+__decorateClass$5([
   n2({ type: String })
 ], WfProgress.prototype, "for", 2);
-__decorateClass$3([
+__decorateClass$5([
   r()
 ], WfProgress.prototype, "_currentStep", 2);
-__decorateClass$3([
+__decorateClass$5([
   r()
 ], WfProgress.prototype, "_totalSteps", 2);
-__decorateClass$3([
+__decorateClass$5([
   r()
 ], WfProgress.prototype, "_isComplete", 2);
-WfProgress = __decorateClass$3([
+WfProgress = __decorateClass$5([
   t("wf-progress")
 ], WfProgress);
-var __defProp$2 = Object.defineProperty;
-var __decorateClass$2 = (decorators, target, key, kind) => {
+var __defProp$4 = Object.defineProperty;
+var __decorateClass$4 = (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);
+  if (result) __defProp$4(target, key, result);
   return result;
 };
 class NavigationButtonBase extends i {
@@ -5008,13 +5021,13 @@ class NavigationButtonBase extends i {
     );
   }
 }
-__decorateClass$2([
+__decorateClass$4([
   r()
 ], NavigationButtonBase.prototype, "_isFirstStep");
-__decorateClass$2([
+__decorateClass$4([
   r()
 ], NavigationButtonBase.prototype, "_isLastStep");
-__decorateClass$2([
+__decorateClass$4([
   r()
 ], NavigationButtonBase.prototype, "_isSubmitting");
 const wfNextBtnStyles = [
@@ -5033,7 +5046,7 @@ const wfNextBtnStyles = [
     .wf-btn-next {
       width: 100%;
       flex: 1;
-      background-color: var(--wf-color-primary);
+      background: var(--wf-btn-background, var(--wf-color-primary));
       border: 1px solid var(--wf-color-primary-border);
       color: white;
       position: relative;
@@ -5075,14 +5088,14 @@ const wfNextBtnStyles = [
     }
   `
 ];
-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;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 let WfNextBtn = class extends NavigationButtonBase {
@@ -5144,22 +5157,22 @@ let WfNextBtn = class extends NavigationButtonBase {
   }
 };
 WfNextBtn.styles = wfNextBtnStyles;
-__decorateClass$1([
+__decorateClass$3([
   n2({ type: String })
 ], WfNextBtn.prototype, "label", 2);
-__decorateClass$1([
+__decorateClass$3([
   n2({ type: String })
 ], WfNextBtn.prototype, "action", 2);
-__decorateClass$1([
+__decorateClass$3([
   n2({ type: Boolean, attribute: "show-shortcut" })
 ], WfNextBtn.prototype, "showShortcut", 2);
-__decorateClass$1([
+__decorateClass$3([
   n2({ type: Boolean })
 ], WfNextBtn.prototype, "inline", 2);
-__decorateClass$1([
+__decorateClass$3([
   n2({ type: Boolean })
 ], WfNextBtn.prototype, "disabled", 2);
-WfNextBtn = __decorateClass$1([
+WfNextBtn = __decorateClass$3([
   t("wf-next-btn")
 ], WfNextBtn);
 const wfBackBtnStyles = [
@@ -5193,14 +5206,14 @@ const wfBackBtnStyles = [
     }
   `
 ];
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 let WfBackBtn = class extends NavigationButtonBase {
@@ -5249,21 +5262,465 @@ let WfBackBtn = class extends NavigationButtonBase {
   }
 };
 WfBackBtn.styles = wfBackBtnStyles;
-__decorateClass([
+__decorateClass$2([
   n2({ type: String })
 ], WfBackBtn.prototype, "label", 2);
-__decorateClass([
+__decorateClass$2([
   n2({ type: Boolean, attribute: "show-shortcut" })
 ], WfBackBtn.prototype, "showShortcut", 2);
-__decorateClass([
+__decorateClass$2([
   n2({ type: Boolean })
 ], WfBackBtn.prototype, "disabled", 2);
-__decorateClass([
+__decorateClass$2([
   n2({ type: Boolean, attribute: "hide-on-first" })
 ], WfBackBtn.prototype, "hideOnFirst", 2);
-WfBackBtn = __decorateClass([
+WfBackBtn = __decorateClass$2([
   t("wf-back-btn")
 ], WfBackBtn);
+const wfSelectStyles = [
+  formInputBaseStyles,
+  i$3`
+    :host {
+      position: relative;
+    }
+
+    .wf-select-trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      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);
+      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;
+      cursor: pointer;
+      text-align: left;
+    }
+
+    .wf-select-trigger:focus {
+      border-color: var(--wf-color-primary);
+      box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-focus-ring-primary);
+    }
+
+    .wf-select-trigger:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .wf-select-trigger.wf-select-error {
+      border-color: var(--wf-color-error);
+    }
+
+    .wf-select-trigger.wf-select-error:focus {
+      box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-focus-ring-error);
+    }
+
+    .wf-select-placeholder {
+      color: var(--wf-color-text-muted);
+      font-weight: var(--wf-font-weight-input);
+    }
+
+    .wf-select-chevron {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      margin-left: var(--wf-spacing-2);
+      color: var(--wf-color-text-muted);
+      transition: transform 150ms ease;
+    }
+
+    .wf-select-chevron.wf-open {
+      transform: rotate(180deg);
+    }
+
+    /* Dropdown panel */
+    .wf-select-panel {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      z-index: 100;
+      margin-top: var(--wf-spacing-1);
+      padding: var(--wf-spacing-1) 0;
+      background: var(--wf-color-text);
+      border-radius: var(--wf-radius-md);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+      max-height: 240px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      opacity: 0;
+      transform: translateY(-4px);
+      transition: opacity 150ms ease, transform 150ms ease;
+      pointer-events: none;
+    }
+
+    .wf-select-panel.wf-open {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    .wf-select-option {
+      display: block;
+      width: 100%;
+      padding: var(--wf-spacing-3) var(--wf-spacing-4);
+      font-size: var(--wf-font-size-base);
+      font-family: inherit;
+      color: white;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      text-align: left;
+      outline: none;
+      transition: background 100ms ease;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      box-sizing: border-box;
+    }
+
+    .wf-select-option:hover,
+    .wf-select-option.wf-active {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .wf-select-option.wf-selected {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    /* Hidden slot for slotted <option> elements */
+    .wf-options-slot {
+      display: none;
+    }
+  `
+];
+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 WfSelect = class extends FormInputBase {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "";
+    this.disabled = false;
+    this._open = false;
+    this._options = [];
+    this._activeIndex = -1;
+    this._selectedLabel = "";
+    this._boundClickOutside = this._handleClickOutside.bind(this);
+  }
+  // ============================================
+  // Lifecycle
+  // ============================================
+  connectedCallback() {
+    super.connectedCallback();
+    this._collectOptions();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._boundClickOutside);
+  }
+  firstUpdated() {
+    this._collectOptions();
+  }
+  // ============================================
+  // Abstract Implementations
+  // ============================================
+  _getValidationTriggerProperties() {
+    return ["required"];
+  }
+  _setupValidators() {
+    this._validators = [];
+    if (this.required) {
+      this._validators.push(ValidationController.required());
+    }
+  }
+  _getFocusableSelector() {
+    return ".wf-select-trigger";
+  }
+  reset() {
+    super.reset();
+    this._selectedLabel = "";
+    this._open = false;
+    this._activeIndex = -1;
+  }
+  // ============================================
+  // Option Collection
+  // ============================================
+  _collectOptions() {
+    const optionEls = this.querySelectorAll("option");
+    this._options = Array.from(optionEls).map((opt) => ({
+      value: opt.value,
+      label: opt.textContent?.trim() || opt.value
+    }));
+  }
+  // ============================================
+  // Open / Close
+  // ============================================
+  _toggle() {
+    if (this.disabled) {
+      return;
+    }
+    if (this._open) {
+      this._close();
+    } else {
+      this._openPanel();
+    }
+  }
+  _openPanel() {
+    this._open = true;
+    const selectedIdx = this._options.findIndex((o2) => o2.value === this._value);
+    this._activeIndex = selectedIdx >= 0 ? selectedIdx : 0;
+    document.addEventListener("click", this._boundClickOutside);
+  }
+  _close() {
+    this._open = false;
+    this._activeIndex = -1;
+    document.removeEventListener("click", this._boundClickOutside);
+  }
+  _handleClickOutside(e2) {
+    if (!this.contains(e2.target) && !this.shadowRoot?.contains(e2.target)) {
+      this._close();
+    }
+  }
+  // ============================================
+  // Selection
+  // ============================================
+  _selectOption(option) {
+    this._value = option.value;
+    this._selectedLabel = option.label;
+    this._close();
+    if (this._validationActivated) {
+      this.validate();
+    }
+    this.dispatchEvent(
+      new CustomEvent("wf-change", {
+        detail: { name: this.name, value: this._value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ============================================
+  // Keyboard Navigation
+  // ============================================
+  _handleKeyDown(e2) {
+    switch (e2.key) {
+      case "ArrowDown":
+        e2.preventDefault();
+        if (!this._open) {
+          this._openPanel();
+        } else {
+          this._activeIndex = Math.min(this._activeIndex + 1, this._options.length - 1);
+        }
+        break;
+      case "ArrowUp":
+        e2.preventDefault();
+        if (this._open) {
+          this._activeIndex = Math.max(this._activeIndex - 1, 0);
+        }
+        break;
+      case "Enter":
+      case " ":
+        e2.preventDefault();
+        if (this._open && this._activeIndex >= 0) {
+          this._selectOption(this._options[this._activeIndex]);
+        } else if (!this._open) {
+          this._openPanel();
+        }
+        break;
+      case "Escape":
+        e2.preventDefault();
+        if (this._open) {
+          this._close();
+          this.shadowRoot?.querySelector(".wf-select-trigger")?.focus();
+        }
+        break;
+      case "Tab":
+        if (this._open) {
+          this._close();
+        }
+        break;
+    }
+  }
+  // ============================================
+  // Render
+  // ============================================
+  render() {
+    const activeDescendant = this._activeIndex >= 0 ? `wf-select-opt-${this._activeIndex}` : "";
+    return b`
+      <div class="wf-field-container">
+        ${this._renderLabel()}
+
+        <button
+          type="button"
+          class="wf-select-trigger ${this._errorMessage ? "wf-select-error" : ""}"
+          role="combobox"
+          aria-expanded="${this._open}"
+          aria-haspopup="listbox"
+          aria-activedescendant="${activeDescendant || A}"
+          aria-controls="wf-select-listbox"
+          ?disabled="${this.disabled}"
+          data-testid="wf-select-trigger"
+          @click="${this._toggle}"
+          @keydown="${this._handleKeyDown}"
+        >
+          ${this._selectedLabel ? b`<span>${this._selectedLabel}</span>` : b`<span class="wf-select-placeholder">${this.placeholder}</span>`}
+          <svg class="wf-select-chevron ${this._open ? "wf-open" : ""}" viewBox="0 0 16 16" fill="none">
+            <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+
+        <div
+          class="wf-select-panel ${this._open ? "wf-open" : ""}"
+          role="listbox"
+          id="wf-select-listbox"
+          data-testid="wf-select-panel"
+        >
+          ${this._options.map(
+      (opt, i2) => b`
+              <div
+                class="wf-select-option ${i2 === this._activeIndex ? "wf-active" : ""} ${opt.value === this._value ? "wf-selected" : ""}"
+                role="option"
+                id="wf-select-opt-${i2}"
+                aria-selected="${opt.value === this._value}"
+                data-testid="wf-select-option"
+                @click="${() => this._selectOption(opt)}"
+                @mouseenter="${() => {
+        this._activeIndex = i2;
+      }}"
+              >
+                ${opt.label}
+              </div>
+            `
+    )}
+        </div>
+
+        <div class="wf-options-slot">
+          <slot @slotchange="${this._collectOptions}"></slot>
+        </div>
+
+        ${this._renderHint()}
+        ${this._renderError()}
+      </div>
+    `;
+  }
+};
+WfSelect.styles = wfSelectStyles;
+__decorateClass$1([
+  n2({ type: String })
+], WfSelect.prototype, "placeholder", 2);
+__decorateClass$1([
+  n2({ type: Boolean })
+], WfSelect.prototype, "disabled", 2);
+__decorateClass$1([
+  r()
+], WfSelect.prototype, "_open", 2);
+__decorateClass$1([
+  r()
+], WfSelect.prototype, "_options", 2);
+__decorateClass$1([
+  r()
+], WfSelect.prototype, "_activeIndex", 2);
+__decorateClass$1([
+  r()
+], WfSelect.prototype, "_selectedLabel", 2);
+WfSelect = __decorateClass$1([
+  t("wf-select")
+], WfSelect);
+const wfSkipBtnStyles = i$3`
+  :host {
+    display: block;
+    text-align: center;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .wf-skip-link {
+    display: inline-block;
+    padding: var(--wf-spacing-3, 12px) var(--wf-spacing-4, 16px);
+    font-size: var(--wf-font-size-sm, 0.875rem);
+    font-family: inherit;
+    color: var(--wf-color-text-muted, #646464);
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 150ms ease;
+    outline: none;
+  }
+
+  .wf-skip-link:hover {
+    color: var(--wf-color-text, #0a0a0a);
+  }
+
+  .wf-skip-link:focus-visible {
+    border-radius: var(--wf-radius-sm, 4px);
+    box-shadow: 0 0 0 var(--wf-focus-ring-width, 3px) var(--wf-focus-ring-primary, rgba(128, 64, 240, 0.2));
+  }
+`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+let WfSkipBtn = class extends i {
+  constructor() {
+    super(...arguments);
+    this.label = "Skip this step";
+    this._handleClick = () => {
+      this.dispatchEvent(
+        new CustomEvent("wf:nav-skip", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  render() {
+    return b`
+      <button
+        type="button"
+        class="wf-skip-link"
+        data-testid="wf-skip-btn"
+        @click="${this._handleClick}"
+      >
+        ${this.label}
+      </button>
+    `;
+  }
+};
+WfSkipBtn.styles = wfSkipBtnStyles;
+__decorateClass([
+  n2({ type: String })
+], WfSkipBtn.prototype, "label", 2);
+WfSkipBtn = __decorateClass([
+  t("wf-skip-btn")
+], WfSkipBtn);
 export {
   DEFAULT_BLOCKED_DOMAINS,
   FormStateController,
@@ -5280,6 +5737,8 @@ export {
   WfOptions,
   WfOther,
   WfProgress,
+  WfSelect,
+  WfSkipBtn,
   WfStep,
   WfSuccess,
   WfTextarea,