@bach.software/vue-dynamic-form 0.5.0 → 0.7.0

package/dist/examples.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as B, createElementBlock as l, openBlock as t, normalizeClass as g, createCommentVNode as s, createElementVNode as r, createBlock as O, unref as v, withCtx as x, withDirectives as W, vModelText as D, vModelCheckbox as I, Fragment as F, renderList as T, toDisplayString as u, vModelSelect as R, renderSlot as y, createTextVNode as w, createVNode as L, ref as V, computed as E, withModifiers as A, markRaw as U, h as j } from "vue";
-import { d as P, e as z, u as G, m as H, _ as J, h as Y } from "./mapEachMetadataItem-B4xJvJDj.js";
-const Q = {
+import { defineComponent as E, createElementBlock as i, openBlock as t, normalizeClass as O, createCommentVNode as n, createElementVNode as a, createBlock as W, unref as F, withCtx as k, withDirectives as N, vModelText as K, vModelCheckbox as D, Fragment as $, renderList as A, toDisplayString as o, vModelSelect as Q, renderSlot as T, createTextVNode as x, createVNode as R, vShow as Y, computed as U, ref as L, withModifiers as Z, markRaw as X, h as M, useTemplateRef as ee } from "vue";
+import { e as te, f as ie, u as ae, m as le, _ as ne, i as se } from "./mapEachMetadataItem-DxEO1PDs.js";
+const oe = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -8,7 +8,7 @@ const Q = {
   "stroke-width": "1.5",
   stroke: "currentColor",
   class: "size-3"
-}, X = {
+}, de = {
   key: 1,
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -16,376 +16,630 @@ const Q = {
   "stroke-width": "1.5",
   stroke: "currentColor",
   class: "size-3"
-}, C = /* @__PURE__ */ B({
+}, S = /* @__PURE__ */ E({
   __name: "IconButton",
   props: {
     icon: {},
     color: { default: "blue" }
   },
   emits: ["click"],
-  setup(b) {
-    return (k, c) => (t(), l("button", {
+  setup(u) {
+    return (h, d) => (t(), i("button", {
       type: "button",
-      class: g(["cursor-pointer inline-flex items-center justify-center rounded-full size-5 text-white-800 cursor-pointer", {
-        "bg-blue-200 hover:bg-blue-300": b.color === "blue",
-        "bg-red-200 hover:bg-red-300": b.color === "red"
+      class: O(["cursor-pointer inline-flex items-center justify-center rounded-full size-5 text-white-800 cursor-pointer", {
+        "bg-blue-200 hover:bg-blue-300": u.color === "blue",
+        "bg-red-200 hover:bg-red-300": u.color === "red"
       }]),
-      onClick: c[0] || (c[0] = (N) => k.$emit("click"))
+      onClick: d[0] || (d[0] = (c) => h.$emit("click"))
     }, [
-      b.icon === "plus" ? (t(), l("svg", Q, [...c[1] || (c[1] = [
-        r("path", {
+      u.icon === "plus" ? (t(), i("svg", oe, [...d[1] || (d[1] = [
+        a("path", {
           "stroke-linecap": "round",
           "stroke-linejoin": "round",
           d: "M12 4.5v15m7.5-7.5h-15"
         }, null, -1)
-      ])])) : s("", !0),
-      b.icon === "minus" ? (t(), l("svg", X, [...c[2] || (c[2] = [
-        r("path", {
+      ])])) : n("", !0),
+      u.icon === "minus" ? (t(), i("svg", de, [...d[2] || (d[2] = [
+        a("path", {
           "stroke-linecap": "round",
           "stroke-linejoin": "round",
           d: "M5 12h14"
         }, null, -1)
-      ])])) : s("", !0)
+      ])])) : n("", !0)
     ], 2));
   }
-}), Z = { class: "text-sm whitespace-pre-wrap" }, K = ["data-testid"], M = { class: "grid grid-cols-1 md:grid-cols-2 gap-6" }, ee = {
+}), re = ["data-testid", "onClick"], ce = { class: "text-sm whitespace-pre-wrap" }, ue = ["data-testid"], pe = { class: "grid grid-cols-1 md:grid-cols-2 gap-6" }, me = {
   key: 0,
   class: "text-red-500 dark:text-rose-400"
-}, te = {
+}, he = {
   key: 1,
   class: "text-sm text-gray-400"
-}, le = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, se = { class: "text-sm whitespace-pre-wrap" }, ie = ["data-testid"], ne = ["for"], de = {
+}, be = ["data-testid"], fe = {
+  key: 0,
+  class: "flex gap-2 flex-wrap"
+}, Oe = ["disabled", "data-testid", "onClick"], ge = ["data-testid", "onClick"], ye = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, xe = { class: "text-sm whitespace-pre-wrap" }, ve = ["data-testid"], we = {
+  key: 0,
+  class: "text-red-500 dark:text-rose-400"
+}, ke = {
+  key: 1,
+  class: "text-sm text-gray-400"
+}, Ce = ["data-testid"], Te = {
+  key: 0,
+  class: "flex gap-2 flex-wrap"
+}, Ve = ["disabled", "data-testid", "onClick"], _e = ["data-testid", "onClick"], Se = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, We = { class: "text-sm whitespace-pre-wrap" }, Fe = ["data-testid"], $e = { class: "flex gap-2 items-center" }, Ae = ["data-testid"], Be = ["data-testid"], Ne = ["data-testid"], Pe = { class: "grid grid-cols-1 md:grid-cols-2 gap-6" }, qe = { class: "flex flex-col gap-2" }, Le = { class: "flex gap-2 flex-wrap" }, Ee = ["data-testid", "onClick"], Ie = { class: "flex gap-2" }, ze = ["data-testid", "onClick"], Re = ["data-testid", "onClick"], Ue = ["data-testid"], De = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, Je = ["data-testid"], Ge = ["data-testid"], je = ["data-testid"], He = ["data-testid"], Ke = ["data-testid"], Qe = ["data-testid"], Ye = ["data-testid"], Ze = ["data-testid", "data-current"], Xe = ["data-testid", "data-current"], Me = ["for"], et = {
   key: 0,
   class: "text-red-500 dark:text-rose-400"
-}, oe = {
+}, tt = {
   key: 1,
   class: "text-sm text-gray-400"
-}, ae = { class: "text-sm whitespace-pre-wrap" }, re = ["data-testid"], ue = ["for"], ce = {
+}, it = { class: "text-sm whitespace-pre-wrap" }, at = ["data-testid"], lt = ["for"], nt = {
   key: 0,
   class: "text-red-500 dark:text-rose-400"
-}, pe = {
+}, st = {
   key: 1,
   class: "text-sm text-gray-400"
-}, he = { class: "flex gap-2 items-center" }, me = { class: "flex flex-col grow" }, be = { class: "text-sm whitespace-pre-wrap" }, fe = ["data-testid"], ge = {
+}, ot = { class: "flex gap-2 items-center" }, dt = { class: "flex flex-col grow" }, rt = { class: "text-sm whitespace-pre-wrap" }, ct = ["data-testid"], ut = {
   key: 0,
   class: "text-red-500 dark:text-rose-400"
-}, xe = {
+}, pt = {
   key: 1,
   class: "text-sm text-gray-400"
-}, ye = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, ve = { class: "text-sm whitespace-pre-wrap" }, ke = ["data-testid"], _e = {
+}, mt = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, ht = { class: "text-sm whitespace-pre-wrap" }, bt = ["data-testid"], ft = {
   key: 0,
   class: "text-red-500 dark:text-rose-400"
-}, Oe = {
+}, Ot = {
   key: 1,
   class: "text-sm text-gray-400"
-}, Ce = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, we = { class: "text-sm whitespace-pre-wrap" }, $e = ["data-testid"], Ne = ["id", "value", "disabled", "onChange", "onBlur"], Fe = ["value"], Be = ["id", "onUpdate:modelValue", "disabled", "onBlur"], We = ["value"], Ve = ["id", "checked", "disabled", "onChange", "onBlur"], Te = ["id", "onUpdate:modelValue", "disabled", "onBlur"], Se = ["id", "onUpdate:modelValue", "disabled", "onBlur"], Ee = ["id", "value", "disabled", "onInput", "onBlur"], Le = /* @__PURE__ */ B({
+}, gt = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, yt = { class: "text-sm whitespace-pre-wrap" }, xt = ["data-testid"], vt = ["id", "value", "disabled", "onChange", "onBlur"], wt = ["value"], kt = ["id", "onUpdate:modelValue", "disabled", "onBlur"], Ct = ["value"], Tt = ["id", "checked", "disabled", "onChange", "onBlur"], Vt = ["id", "onUpdate:modelValue", "disabled", "onBlur"], _t = ["id", "onUpdate:modelValue", "disabled", "onBlur"], St = ["id", "value", "disabled", "onInput", "onBlur"], q = "inline-flex items-center h-9 px-3 text-sm border border-gray-300 rounded bg-gray-100 text-gray-900 cursor-pointer hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed", Wt = "inline-flex items-center h-9 px-3 text-sm border border-blue-600 rounded bg-blue-600 text-white cursor-pointer hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed", Ft = /* @__PURE__ */ E({
   __name: "TestFormTemplate",
-  setup(b) {
-    const k = z();
-    return (c, N) => (t(), O(P, { "metadata-configuration": v(k) }, {
-      heading: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, canAddItems: d, addItem: p, canRemoveItems: h, removeItem: m, slotProps: a }) => [
-        e.hidden ? s("", !0) : (t(), l("div", {
+  setup(u) {
+    const h = ie();
+    return (d, c) => (t(), W(te, { "metadata-configuration": F(h) }, {
+      heading: k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: r }, disabled: p, canAddItems: s, addItem: f, canRemoveItems: y, removeItem: b, slotProps: v }) => [
+        e.hidden ? n("", !0) : (t(), i("div", {
           key: 0,
-          class: g(["mt-4", { "md:col-span-2": e.fullWidth }])
+          class: O(["mt-4", { "md:col-span-2": e.fullWidth }])
         }, [
-          n ? (t(), l("h3", {
+          r ? (t(), i("h3", {
             key: 0,
-            class: g(["flex text-xl font-bold gap-2 items-center mb-2", { "text-gray-500": e.disabled || o }])
+            class: O(["flex text-xl font-bold gap-2 items-center mb-2", { "text-gray-500": e.disabled || p }])
           }, [
-            w(u(n) + " ", 1),
-            d ? (t(), O(C, {
+            x(o(r) + " ", 1),
+            s ? (t(), W(S, {
               key: 0,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: p
-            }, null, 8, ["data-testid", "onClick"])) : s("", !0),
-            h ? (t(), O(C, {
+              onClick: f
+            }, null, 8, ["data-testid", "onClick"])) : n("", !0),
+            y ? (t(), W(S, {
               key: 1,
               icon: "minus",
               tabindex: "-1",
               color: "red",
               "data-testid": `${e.path}-remove-button`,
-              onClick: m
-            }, null, 8, ["data-testid", "onClick"])) : s("", !0)
-          ], 2)) : s("", !0),
-          r("pre", Z, u(e.description), 1),
-          i.value ? (t(), l("span", {
+              onClick: b
+            }, null, 8, ["data-testid", "onClick"])) : n("", !0),
+            v?.gotoStep ? (t(), i("button", {
+              key: 2,
+              type: "button",
+              "data-testid": `${e.path}-goto-first-step-button`,
+              onClick: (V) => v.gotoStep(0)
+            }, " back to start ", 8, re)) : n("", !0)
+          ], 2)) : n("", !0),
+          a("pre", ce, o(e.description), 1),
+          l.value ? (t(), i("span", {
             key: 1,
             class: "text-red-600 text-sm",
             "data-testid": `${e.path}-error-message`
-          }, u(i.value), 9, K)) : s("", !0),
-          r("div", M, [
-            y(c.$slots, "default", {
-              level: (a?.level ?? 0) + 1
+          }, o(l.value), 9, ue)) : n("", !0),
+          a("div", pe, [
+            T(d.$slots, "default", {
+              level: (v?.level ?? 0) + 1
             })
           ])
         ], 2))
       ]),
-      "heading-array": x(() => [
-        y(c.$slots, "default")
+      "heading-array": k(({ fieldMetadata: e, fieldContext: { label: l }, disabled: r, canAddItems: p, addItem: s, slotProps: f }) => [
+        e.hidden ? n("", !0) : (t(), i("div", {
+          key: 0,
+          class: O(["mt-4 flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+        }, [
+          l ? (t(), i("h3", {
+            key: 0,
+            class: O(["flex text-xl font-bold gap-2 items-center", { "text-gray-500": e.disabled || r }])
+          }, [
+            x(o(l) + " ", 1),
+            p ? (t(), W(S, {
+              key: 0,
+              icon: "plus",
+              tabindex: "-1",
+              "data-testid": `${e.path}-add-button`,
+              onClick: s
+            }, null, 8, ["data-testid", "onClick"])) : n("", !0)
+          ], 2)) : n("", !0),
+          T(d.$slots, "default", {
+            hideLabel: !0,
+            level: (f?.level ?? 0) + 1
+          })
+        ], 2))
       ]),
-      "default-choice": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, slotProps: p, settings: { showOptionalInsteadOfRequired: h } }) => [
-        e.hidden ? s("", !0) : (t(), l("div", {
+      "default-choice": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: r }, disabled: p, required: s, slotProps: f, settings: { showOptionalInsteadOfRequired: y }, addChoiceOccurrence: b, removeChoiceOccurrence: v, canAddChoiceOccurrence: V, usedChoiceOccurrences: _ }) => [
+        e.hidden ? n("", !0) : (t(), i("div", {
           key: 0,
-          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+          class: O(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
-          r("span", {
-            class: g(["flex gap-2 items-center", { "text-gray-500": o }])
+          a("span", {
+            class: O(["flex gap-2 items-center", { "text-gray-500": p }])
           }, [
-            w(u(n) + " ", 1),
-            d && !h ? (t(), l("span", ee, "*")) : s("", !0),
-            !d && h ? (t(), l("span", te, "(optional)")) : s("", !0)
+            x(o(r) + " ", 1),
+            s && !y ? (t(), i("span", me, "*")) : n("", !0),
+            !s && y ? (t(), i("span", he, "(optional)")) : n("", !0)
           ], 2),
-          r("div", le, [
-            y(c.$slots, "default", {
-              level: (p?.level ?? 0) + 1,
+          a("div", null, [
+            c[0] || (c[0] = x("Used choice occurrences: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-used-choice-occurrences`
+            }, o(_), 9, be)
+          ]),
+          e.choice?.length ? (t(), i("div", fe, [
+            (t(!0), i($, null, A(e.choice, (g) => (t(), i("button", {
+              key: `${g.name}-add`,
+              type: "button",
+              class: O(q),
+              disabled: !V(g.name),
+              "data-testid": `${e.path}.${g.name}-add-choice-button`,
+              onClick: (B) => b(g.name)
+            }, " Add " + o(g.name), 9, Oe))), 128)),
+            (t(!0), i($, null, A(e.choice, (g) => (t(), i("button", {
+              key: `${g.name}-remove`,
+              type: "button",
+              class: O(q),
+              "data-testid": `${e.path}.${g.name}-remove-choice-button`,
+              onClick: (B) => v(g.name)
+            }, " Remove " + o(g.name), 9, ge))), 128))
+          ])) : n("", !0),
+          a("div", ye, [
+            T(d.$slots, "default", {
+              level: (f?.level ?? 0) + 1,
               belowChoiceField: !0
             })
           ]),
-          r("pre", se, u(e.description), 1),
-          i.value ? (t(), l("span", {
-            key: 0,
+          a("pre", xe, o(e.description), 1),
+          l.value ? (t(), i("span", {
+            key: 1,
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, o(l.value), 9, ve)) : n("", !0)
+        ], 2))
+      ]),
+      "default-choice-array": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: r }, disabled: p, required: s, slotProps: f, settings: { showOptionalInsteadOfRequired: y }, addChoiceOccurrence: b, removeChoiceOccurrence: v, canAddChoiceOccurrence: V, usedChoiceOccurrences: _ }) => [
+        e.hidden ? n("", !0) : (t(), i("div", {
+          key: 0,
+          class: O(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+        }, [
+          a("span", {
+            class: O(["flex gap-2 items-center", { "text-gray-500": p }])
+          }, [
+            x(o(r) + " ", 1),
+            s && !y ? (t(), i("span", we, "*")) : n("", !0),
+            !s && y ? (t(), i("span", ke, "(optional)")) : n("", !0)
+          ], 2),
+          a("div", null, [
+            c[1] || (c[1] = x("Used choice occurrences: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-used-choice-occurrences`
+            }, o(_), 9, Ce)
+          ]),
+          e.choice?.length ? (t(), i("div", Te, [
+            (t(!0), i($, null, A(e.choice, (g) => (t(), i("button", {
+              key: `${g.name}-add`,
+              type: "button",
+              class: O(q),
+              disabled: !V(g.name),
+              "data-testid": `${e.path}.${g.name}-add-choice-button`,
+              onClick: (B) => b(g.name)
+            }, " Add " + o(g.name), 9, Ve))), 128)),
+            (t(!0), i($, null, A(e.choice, (g) => (t(), i("button", {
+              key: `${g.name}-remove`,
+              type: "button",
+              class: O(q),
+              "data-testid": `${e.path}.${g.name}-remove-choice-button`,
+              onClick: (B) => v(g.name)
+            }, " Remove " + o(g.name), 9, _e))), 128))
+          ])) : n("", !0),
+          a("div", Se, [
+            T(d.$slots, "default", {
+              level: (f?.level ?? 0) + 1,
+              belowChoiceField: !0
+            })
+          ]),
+          a("pre", We, o(e.description), 1),
+          l.value ? (t(), i("span", {
+            key: 1,
             class: "text-red-600 text-sm",
             "data-testid": `${e.path}-error-message`
-          }, u(i.value), 9, ie)) : s("", !0)
+          }, o(l.value), 9, Fe)) : n("", !0)
+        ], 2))
+      ]),
+      "default-choice-array-item": k(({ fieldMetadata: e, slotProps: l, branchKey: r, globalIndex: p, insertionOrder: s, canAddItems: f, addItem: y, removeItem: b }) => [
+        e.hidden ? n("", !0) : (t(), i("div", {
+          key: 0,
+          class: O(["flex flex-col gap-2 border-s-2 ps-2", { "md:col-span-2": e.fullWidth }])
+        }, [
+          a("div", $e, [
+            a("span", {
+              "data-testid": `${e.path}-kind-badge`
+            }, o(r), 9, Ae),
+            c[2] || (c[2] = x(" globalIndex: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-global-index`
+            }, o(p), 9, Be),
+            c[3] || (c[3] = x(" insertionOrder: ", -1)),
+            s !== void 0 ? (t(), i("span", {
+              key: 0,
+              "data-testid": `${e.path}-insertion-order`
+            }, o(s), 9, Ne)) : n("", !0),
+            f ? (t(), W(S, {
+              key: 1,
+              icon: "plus",
+              tabindex: "-1",
+              "data-testid": `${e.path}-add-choice-button`,
+              onClick: y
+            }, null, 8, ["data-testid", "onClick"])) : n("", !0),
+            R(S, {
+              icon: "minus",
+              tabindex: "-1",
+              color: "red",
+              "data-testid": `${e.path}-remove-choice-button`,
+              onClick: b
+            }, null, 8, ["data-testid", "onClick"])
+          ]),
+          a("div", Pe, [
+            T(d.$slots, "default", {
+              level: (l?.level ?? 0) + 1
+            })
+          ])
         ], 2))
       ]),
-      "default-array": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, canAddItems: p, addItem: h, settings: { showOptionalInsteadOfRequired: m } }) => [
-        e.hidden ? s("", !0) : (t(), l("div", {
+      "default-wizard": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: r }, pages: p, currentStepIndex: s, pageCount: f, isFirst: y, isLast: b, isValidating: v, wizardConfig: V, next: _, prev: g, gotoStep: B, slotProps: P }) => [
+        a("div", qe, [
+          a("span", null, o(r), 1),
+          a("div", Le, [
+            (t(!0), i($, null, A(p, (w, C) => (t(), i("button", {
+              key: w.path,
+              type: "button",
+              class: O(q),
+              "data-testid": `${e.path}-goto-${C}-button`,
+              onClick: (z) => B(C)
+            }, o(w.name), 9, Ee))), 128))
+          ]),
+          a("div", Ie, [
+            a("button", {
+              type: "button",
+              class: O(q),
+              "data-testid": `${e.path}-prev-button`,
+              onClick: g
+            }, " Previous ", 8, ze),
+            a("button", {
+              type: "button",
+              class: O(Wt),
+              "data-testid": `${e.path}-next-button`,
+              onClick: _
+            }, " Next ", 8, Re)
+          ]),
+          l.value ? (t(), i("span", {
+            key: 0,
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, o(l.value), 9, Ue)) : n("", !0),
+          a("div", De, [
+            T(d.$slots, "default", {
+              level: (P?.level ?? 0) + 1
+            })
+          ]),
+          a("div", null, [
+            c[4] || (c[4] = x("currentStepIndex: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-currentStepIndex`
+            }, o(s), 9, Je)
+          ]),
+          a("div", null, [
+            c[5] || (c[5] = x("pageCount: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-pageCount`
+            }, o(f), 9, Ge)
+          ]),
+          a("div", null, [
+            c[6] || (c[6] = x("isFirst: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-isFirst`
+            }, o(y), 9, je)
+          ]),
+          a("div", null, [
+            c[7] || (c[7] = x("isLast: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-isLast`
+            }, o(b), 9, He)
+          ]),
+          a("div", null, [
+            c[8] || (c[8] = x("isValidating: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-isValidating`
+            }, o(v), 9, Ke)
+          ]),
+          a("div", null, [
+            c[9] || (c[9] = x("allowForwardJump: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-wizardConfig-allowForwardJump`
+            }, o(V.allowForwardJump), 9, Qe)
+          ]),
+          a("div", null, [
+            c[10] || (c[10] = x("validateOnJump: ", -1)),
+            a("span", {
+              "data-testid": `${e.path}-wizardConfig-validateOnJump`
+            }, o(V.validateOnJump), 9, Ye)
+          ])
+        ])
+      ]),
+      "default-wizard-page": k(({ fieldMetadata: e, isCurrent: l, gotoStep: r, slotProps: p, settings: { wizardPageUseVIf: s } }) => [
+        s ? l ? (t(), i("div", {
+          key: 1,
+          "data-testid": `${e.path}-page`,
+          "data-current": l
+        }, [
+          T(d.$slots, "default", {
+            gotoStep: r,
+            level: p?.level
+          })
+        ], 8, Xe)) : n("", !0) : N((t(), i("div", {
           key: 0,
-          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+          "data-testid": `${e.path}-page`,
+          "data-current": l
         }, [
-          r("label", {
+          T(d.$slots, "default", {
+            gotoStep: r,
+            level: p?.level
+          })
+        ], 8, Ze)), [
+          [Y, l]
+        ])
+      ]),
+      "default-array": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: r }, disabled: p, required: s, canAddItems: f, addItem: y, settings: { showOptionalInsteadOfRequired: b } }) => [
+        e.hidden ? n("", !0) : (t(), i("div", {
+          key: 0,
+          class: O(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+        }, [
+          a("label", {
             for: `${e.path}[0]`,
-            class: g([{ "text-gray-500": e.disabled || o }, "flex gap-2 items-center"])
+            class: O([{ "text-gray-500": e.disabled || p }, "flex gap-2 items-center"])
           }, [
-            w(u(n) + " ", 1),
-            d && !m ? (t(), l("span", de, "*")) : s("", !0),
-            !d && m ? (t(), l("span", oe, "(optional)")) : s("", !0),
-            p ? (t(), O(C, {
+            x(o(r) + " ", 1),
+            s && !b ? (t(), i("span", et, "*")) : n("", !0),
+            !s && b ? (t(), i("span", tt, "(optional)")) : n("", !0),
+            f ? (t(), W(S, {
               key: 2,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: h
-            }, null, 8, ["data-testid", "onClick"])) : s("", !0)
-          ], 10, ne),
-          y(c.$slots, "default", { hideLabel: !0 }),
-          r("pre", ae, u(e.description), 1),
-          i.value ? (t(), l("span", {
+              onClick: y
+            }, null, 8, ["data-testid", "onClick"])) : n("", !0)
+          ], 10, Me),
+          T(d.$slots, "default", { hideLabel: !0 }),
+          a("pre", it, o(e.description), 1),
+          l.value ? (t(), i("span", {
             key: 0,
             class: "text-red-600 text-sm",
             "data-testid": `${e.path}-error-message`
-          }, u(i.value), 9, re)) : s("", !0)
+          }, o(l.value), 9, at)) : n("", !0)
         ], 2))
       ]),
-      default: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, canRemoveItems: p, removeItem: h, slotProps: m, settings: { showOptionalInsteadOfRequired: a } }) => [
-        e.hidden ? s("", !0) : (t(), l("div", {
+      default: k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: r }, disabled: p, required: s, canRemoveItems: f, removeItem: y, slotProps: b, settings: { showOptionalInsteadOfRequired: v } }) => [
+        e.hidden ? n("", !0) : (t(), i("div", {
           key: 0,
-          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+          class: O(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
-          m?.hideLabel ? s("", !0) : (t(), l("label", {
+          b?.hideLabel ? n("", !0) : (t(), i("label", {
             key: 0,
             for: e.path,
-            class: g([{ "text-gray-500": e.disabled || o }, "flex gap-1 items-center"])
+            class: O([{ "text-gray-500": e.disabled || p }, "flex gap-1 items-center"])
           }, [
-            w(u(n) + " ", 1),
-            d && !a ? (t(), l("span", ce, "*")) : s("", !0),
-            !d && a ? (t(), l("span", pe, "(optional)")) : s("", !0)
-          ], 10, ue)),
-          r("div", he, [
-            r("div", me, [
-              y(c.$slots, "default")
+            x(o(r) + " ", 1),
+            s && !v ? (t(), i("span", nt, "*")) : n("", !0),
+            !s && v ? (t(), i("span", st, "(optional)")) : n("", !0)
+          ], 10, lt)),
+          a("div", ot, [
+            a("div", dt, [
+              T(d.$slots, "default")
             ]),
-            L(C, {
-              class: g({ invisible: !p }),
+            R(S, {
+              class: O({ invisible: !f }),
               icon: "minus",
               tabindex: "-1",
               color: "red",
               "data-testid": `${e.path}-remove-button`,
-              onClick: h
+              onClick: y
             }, null, 8, ["class", "data-testid", "onClick"])
           ]),
-          r("pre", be, u(e.description), 1),
-          i.value ? (t(), l("span", {
+          a("pre", rt, o(e.description), 1),
+          l.value ? (t(), i("span", {
             key: 1,
             class: "text-red-600 text-sm",
             "data-testid": `${e.path}-error-message`
-          }, u(i.value), 9, fe)) : s("", !0)
+          }, o(l.value), 9, ct)) : n("", !0)
         ], 2)),
-        y(c.$slots, "attributes")
+        T(d.$slots, "attributes")
       ]),
-      "group-array": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, canAddItems: p, addItem: h, slotProps: m, settings: { showOptionalInsteadOfRequired: a } }) => [
-        e.hidden ? (t(), l(F, { key: 0 }, [], 64)) : m?.belowChoiceField ? (t(), l("div", {
+      "group-array": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: r }, disabled: p, required: s, canAddItems: f, addItem: y, slotProps: b, settings: { showOptionalInsteadOfRequired: v } }) => [
+        e.hidden ? (t(), i($, { key: 0 }, [], 64)) : b?.belowChoiceField ? (t(), i("div", {
           key: 1,
-          class: g({ "md:col-span-2": e.fullWidth })
+          class: O({ "md:col-span-2": e.fullWidth })
         }, [
-          r("span", {
-            class: g(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || o }])
+          a("span", {
+            class: O(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || p }])
           }, [
-            w(u(n) + " ", 1),
-            d && !a ? (t(), l("span", ge, "*")) : s("", !0),
-            !d && a ? (t(), l("span", xe, "(optional)")) : s("", !0),
-            p ? (t(), O(C, {
+            x(o(r) + " ", 1),
+            s && !v ? (t(), i("span", ut, "*")) : n("", !0),
+            !s && v ? (t(), i("span", pt, "(optional)")) : n("", !0),
+            f ? (t(), W(S, {
               key: 2,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: h
-            }, null, 8, ["data-testid", "onClick"])) : s("", !0)
+              onClick: y
+            }, null, 8, ["data-testid", "onClick"])) : n("", !0)
           ], 2),
-          r("div", ye, [
-            y(c.$slots, "default", {
-              level: (m?.level ?? 0) + 1
+          a("div", mt, [
+            T(d.$slots, "default", {
+              level: (b?.level ?? 0) + 1
             })
           ]),
-          r("pre", ve, u(e.description), 1),
-          i.value ? (t(), l("span", {
+          a("pre", ht, o(e.description), 1),
+          l.value ? (t(), i("span", {
             key: 0,
             class: "text-red-600 text-sm",
             "data-testid": `${e.path}-error-message`
-          }, u(i.value), 9, ke)) : s("", !0)
-        ], 2)) : y(c.$slots, "default", { key: 2 })
+          }, o(l.value), 9, bt)) : n("", !0)
+        ], 2)) : T(d.$slots, "default", {}, void 0, void 0, 2)
       ]),
-      group: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, canAddItems: p, canRemoveItems: h, addItem: m, removeItem: a, slotProps: f, settings: { showOptionalInsteadOfRequired: _ } }) => [
-        e.hidden ? s("", !0) : (t(), l("div", {
+      group: k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: r }, disabled: p, required: s, canAddItems: f, canRemoveItems: y, addItem: b, removeItem: v, slotProps: V, settings: { showOptionalInsteadOfRequired: _ } }) => [
+        e.hidden ? n("", !0) : (t(), i("div", {
           key: 0,
-          class: g({ "md:col-span-2": e.fullWidth })
+          class: O({ "md:col-span-2": e.fullWidth })
         }, [
-          f?.hideLabel ? s("", !0) : (t(), l("span", {
+          V?.hideLabel ? n("", !0) : (t(), i("span", {
             key: 0,
-            class: g(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || o }])
+            class: O(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || p }])
           }, [
-            w(u(n) + " ", 1),
-            d && !_ ? (t(), l("span", _e, "*")) : s("", !0),
-            !d && _ ? (t(), l("span", Oe, "(optional)")) : s("", !0),
-            p ? (t(), O(C, {
+            x(o(r) + " ", 1),
+            s && !_ ? (t(), i("span", ft, "*")) : n("", !0),
+            !s && _ ? (t(), i("span", Ot, "(optional)")) : n("", !0),
+            f ? (t(), W(S, {
               key: 2,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: m
-            }, null, 8, ["data-testid", "onClick"])) : s("", !0),
-            h ? (t(), O(C, {
+              onClick: b
+            }, null, 8, ["data-testid", "onClick"])) : n("", !0),
+            y ? (t(), W(S, {
               key: 3,
               icon: "minus",
               tabindex: "-1",
               "data-testid": `${e.path}-remove-button`,
               color: "red",
-              onClick: a
-            }, null, 8, ["data-testid", "onClick"])) : s("", !0)
+              onClick: v
+            }, null, 8, ["data-testid", "onClick"])) : n("", !0)
           ], 2)),
-          r("div", Ce, [
-            y(c.$slots, "default", {
-              level: (f?.level ?? 0) + 1
+          a("div", gt, [
+            T(d.$slots, "default", {
+              level: (V?.level ?? 0) + 1
             })
           ]),
-          r("pre", we, u(e.description), 1),
-          i.value ? (t(), l("span", {
+          a("pre", yt, o(e.description), 1),
+          l.value ? (t(), i("span", {
             key: 1,
             class: "text-red-600 text-sm",
             "data-testid": `${e.path}-error-message`
-          }, u(i.value), 9, $e)) : s("", !0)
+          }, o(l.value), 9, xt)) : n("", !0)
         ], 2)),
-        y(c.$slots, "attributes")
+        T(d.$slots, "attributes")
       ]),
-      "select-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: o }, disabled: d }) => [
-        r("select", {
+      "select-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r, handleChange: p }, disabled: s }) => [
+        a("select", {
           id: e.path,
-          value: i.value,
-          disabled: e.disabled || d,
+          value: l.value,
+          disabled: e.disabled || s,
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onChange: o,
-          onBlur: n
+          onChange: p,
+          onBlur: r
         }, [
-          (t(!0), l(F, null, T(e.options, ({ key: p, value: h }) => (t(), l("option", {
-            key: p,
-            value: p
-          }, u(h), 9, Fe))), 128))
-        ], 40, Ne)
+          (t(!0), i($, null, A(e.options, ({ key: f, value: y }) => (t(), i("option", {
+            key: f,
+            value: f
+          }, o(y), 9, wt))), 128))
+        ], 40, vt)
       ]),
-      "selectBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: o }) => [
-        W(r("select", {
+      "selectBoundByVModel-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r }, disabled: p }) => [
+        N(a("select", {
           id: e.path,
-          "onUpdate:modelValue": (d) => i.value = d,
-          disabled: e.disabled || o,
+          "onUpdate:modelValue": (s) => l.value = s,
+          disabled: e.disabled || p,
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onBlur: n
+          onBlur: r
         }, [
-          (t(!0), l(F, null, T(e.options, ({ key: d, value: p }) => (t(), l("option", {
-            key: d,
-            value: d
-          }, u(p), 9, We))), 128))
-        ], 40, Be), [
-          [R, i.value]
+          (t(!0), i($, null, A(e.options, ({ key: s, value: f }) => (t(), i("option", {
+            key: s,
+            value: s
+          }, o(f), 9, Ct))), 128))
+        ], 40, kt), [
+          [Q, l.value]
         ])
       ]),
-      "checkbox-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: o }, disabled: d }) => [
-        r("input", {
+      "checkbox-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r, handleChange: p }, disabled: s }) => [
+        a("input", {
           id: e.path,
-          checked: i.value,
-          disabled: e.disabled || d,
+          checked: l.value,
+          disabled: e.disabled || s,
           type: "checkbox",
           class: "h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onChange: (p) => o(p.target.checked),
-          onBlur: n
-        }, null, 40, Ve)
+          onChange: (f) => p(f.target.checked),
+          onBlur: r
+        }, null, 40, Tt)
       ]),
-      "checkboxBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: o }) => [
-        W(r("input", {
+      "checkboxBoundByVModel-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r }, disabled: p }) => [
+        N(a("input", {
           id: e.path,
-          "onUpdate:modelValue": (d) => i.value = d,
-          disabled: e.disabled || o,
+          "onUpdate:modelValue": (s) => l.value = s,
+          disabled: e.disabled || p,
           type: "checkbox",
           class: "h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onBlur: n
-        }, null, 40, Te), [
-          [I, i.value]
+          onBlur: r
+        }, null, 40, Vt), [
+          [D, l.value]
         ])
       ]),
-      "textBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: o }) => [
-        W(r("input", {
+      "textBoundByVModel-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r }, disabled: p }) => [
+        N(a("input", {
           id: e.path,
-          "onUpdate:modelValue": (d) => i.value = d,
-          disabled: e.disabled || o,
+          "onUpdate:modelValue": (s) => l.value = s,
+          disabled: e.disabled || p,
           type: "text",
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onBlur: n
-        }, null, 40, Se), [
-          [D, i.value]
+          onBlur: r
+        }, null, 40, _t), [
+          [K, l.value]
         ])
       ]),
-      "default-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: o }, disabled: d }) => [
-        r("input", {
+      "default-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r, handleChange: p }, disabled: s }) => [
+        a("input", {
           id: e.path,
-          value: i.value,
-          disabled: e.disabled || d,
+          value: l.value,
+          disabled: e.disabled || s,
           type: "text",
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onInput: o,
-          onBlur: n
-        }, null, 40, Ee)
+          onInput: p,
+          onBlur: r
+        }, null, 40, St)
       ]),
       _: 3
     }, 8, ["metadata-configuration"]));
   }
-}), qe = { class: "flex justify-end gap-2" }, De = {
+}), $t = { class: "flex justify-end gap-2" }, At = {
   key: 1,
   type: "submit",
   class: "cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded",
   "data-testid": "submit"
-}, Ie = {
+}, Bt = {
   key: 0,
   "data-testid": "errors",
   class: "col-12 text-red-600"
-}, Re = ["innerHTML"], Ae = {
+}, Nt = ["innerHTML"], Pt = {
   key: 1,
   "data-testid": "isSubmitted"
-}, Ue = {
+}, qt = {
   key: 2,
   class: "bg-gray-100 p-4 rounded-lg text-sm overflow-auto"
-}, je = /* @__PURE__ */ B({
+}, G = /* @__PURE__ */ E({
   __name: "TestForm",
   props: {
     metadata: {},
@@ -393,23 +647,30 @@ const Q = {
     showDebugState: { type: Boolean, default: !1 },
     initialEdit: { type: Boolean, default: !0 },
     hideFieldsWithoutValue: { type: Boolean, default: !1 },
-    initialValues: {}
+    initialValues: {},
+    keepValuesOnUnmount: { type: Boolean }
   },
-  setup(b) {
-    const { values: k, handleSubmit: c, errors: N, meta: e } = G({
-      initialValues: b.initialValues
-    }), i = V(), n = V(b.initialEdit), o = V(!1), d = E(() => b.metadata?.map((m) => H(m, (a) => (a.computedProps = a.computedProps ?? [], a.computedProps.push((f) => {
-      n.value || (f.disabled = !0);
-    }), b.hideFieldsWithoutValue && (a.computedProps.push((f, _) => {
-      !n.value && !Y(_.value) && (f.hidden = !0);
-    }), a.computedProps.push((f, _, S) => {
-      !n.value && S.value.length > 0 && S.value.every((q) => q.hidden) && (f.hidden = !0);
-    })), a)))), p = E(() => ({
+  setup(u, { expose: h }) {
+    const { values: d, handleSubmit: c, errors: e, meta: l, resetForm: r, resetField: p, setFieldValue: s, setValues: f } = ae({
+      initialValues: u.initialValues,
+      // Passed as a computed ref (not the destructured value directly) so a live toggle of the prop
+      // after mount keeps affecting unmount behaviour, instead of freezing whatever it was at setup time.
+      keepValuesOnUnmount: U(() => u.keepValuesOnUnmount)
+    }), y = L(), b = L(u.initialEdit), v = L(!1), V = U(() => u.metadata?.map((P) => le(P, (w) => (w.computedProps = w.computedProps ?? [], w.computedProps.push((C) => {
+      b.value || (C.disabled = !0);
+    }), u.hideFieldsWithoutValue && (w.computedProps.push((C, z) => {
+      !b.value && !se(z.value) && (C.hidden = !0);
+    }), w.computedProps.push((C, z, j) => {
+      !b.value && j.value.length > 0 && j.value.every((H) => H.hidden) && (C.hidden = !0);
+    })), w)))), _ = U(() => ({
       analytics: !0,
       messages: {
         required: "{field} is required",
         minOccurs: "At least {min} items required",
+        maxOccurs: "At most {max} items allowed",
         choiceMinOccurs: "The following fields need to occur at least {min} time(s): {field}",
+        choiceMaxOccurs: "The following fields may occur at most {max} time(s): {field}",
+        maxOccursTotal: "This branch may occur at most {max} time(s) in total: {field}",
         minLength: "The minimum length of {field} is {length}",
         maxLength: "The maximum length of {field} is {length}",
         length: "{field} must be exactly {length} characters",
@@ -423,153 +684,212 @@ const Q = {
         fractionDigits: "{field} may have at most {digits} decimal place(s)",
         totalDigits: "{field} may have at most {digits} significant digit(s)"
       },
-      ...b.settings ?? {}
+      ...u.settings ?? {}
     }));
-    function h(m) {
+    function g() {
+      p(u.metadata[0].name);
+    }
+    h({ setFieldValue: s, setValues: f });
+    function B(P) {
       c(
-        (a) => {
-          o.value = !0, n.value = !1;
+        (w) => {
+          v.value = !0, b.value = !1;
         },
-        ({ errors: a }) => {
-          o.value = !1;
+        ({ errors: w }) => {
+          v.value = !1;
         }
-      )(m);
+      )(P);
     }
-    return (m, a) => (t(), l("form", {
-      onSubmit: A(h, ["prevent"])
+    return (P, w) => (t(), i("form", {
+      onSubmit: Z(B, ["prevent"])
     }, [
-      r("div", qe, [
-        n.value ? s("", !0) : (t(), l("button", {
+      a("div", $t, [
+        b.value ? n("", !0) : (t(), i("button", {
           key: 0,
           type: "button",
           class: "cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded",
           "data-testid": "submit",
-          onClick: a[0] || (a[0] = (f) => n.value = !0)
+          onClick: w[0] || (w[0] = (C) => b.value = !0)
         }, " Edit ")),
-        n.value ? (t(), l("button", De, " Submit ")) : s("", !0),
-        n.value ? (t(), l("button", {
+        b.value ? (t(), i("button", At, " Submit ")) : n("", !0),
+        b.value ? (t(), i("button", {
           key: 2,
           type: "button",
           class: "cursor-pointer mt-4 bg-gray-200 text-black px-4 py-2 rounded",
           "data-testid": "cancel",
-          onClick: a[1] || (a[1] = (f) => n.value = !1)
-        }, " Cancel ")) : s("", !0)
+          onClick: w[1] || (w[1] = (C) => b.value = !1)
+        }, " Cancel ")) : n("", !0),
+        b.value ? (t(), i("button", {
+          key: 3,
+          type: "button",
+          class: "cursor-pointer mt-4 bg-gray-200 text-black px-4 py-2 rounded",
+          "data-testid": "reset",
+          onClick: w[2] || (w[2] = (C) => F(r)())
+        }, " Reset ")) : n("", !0),
+        b.value ? (t(), i("button", {
+          key: 4,
+          type: "button",
+          class: "cursor-pointer mt-4 bg-gray-200 text-black px-4 py-2 rounded",
+          "data-testid": "resetField",
+          onClick: g
+        }, " Reset field ")) : n("", !0)
       ]),
-      Object.values(v(N)).length ? (t(), l("div", Ie, [
-        a[3] || (a[3] = w(" Errors: ", -1)),
-        r("ul", null, [
-          (t(!0), l(F, null, T(v(N), (f, _) => (t(), l("li", { key: _ }, [
-            r("span", { innerHTML: f }, null, 8, Re)
+      Object.values(F(e)).length ? (t(), i("div", Bt, [
+        w[4] || (w[4] = x(" Errors: ", -1)),
+        a("ul", null, [
+          (t(!0), i($, null, A(F(e), (C, z) => (t(), i("li", { key: z }, [
+            a("span", { innerHTML: C }, null, 8, Nt)
           ]))), 128))
         ])
-      ])) : s("", !0),
-      L(J, {
-        template: Le,
-        metadata: d.value,
-        settings: p.value,
-        "onUpdate:modelValue": a[2] || (a[2] = (f) => i.value = f)
+      ])) : n("", !0),
+      R(ne, {
+        template: Ft,
+        metadata: V.value,
+        settings: _.value,
+        "onUpdate:modelValue": w[3] || (w[3] = (C) => y.value = C)
       }, null, 8, ["metadata", "settings"]),
-      o.value ? (t(), l("span", Ae)) : s("", !0),
-      b.showDebugState ? (t(), l("pre", Ue, "IsDirty: " + u(v(e).dirty) + `
-Pending: ` + u(v(e).pending) + `
-Touched: ` + u(v(e).touched) + `
-Valid: ` + u(v(e).valid) + `
-Submitted: ` + u(o.value) + `
+      v.value ? (t(), i("span", Pt)) : n("", !0),
+      u.showDebugState ? (t(), i("pre", qt, "IsDirty: " + o(F(l).dirty) + `
+Pending: ` + o(F(l).pending) + `
+Touched: ` + o(F(l).touched) + `
+Valid: ` + o(F(l).valid) + `
+Submitted: ` + o(v.value) + `
 
 // form values:
-` + u(JSON.stringify(v(k), null, 2)) + `
-    `, 1)) : s("", !0)
+` + o(JSON.stringify(F(d), null, 2)) + `
+    `, 1)) : n("", !0)
     ], 32));
   }
-}), Ge = $([{
+}), Ht = m([{
   name: "text",
   type: "text",
   fieldOptions: { label: "Text Input" },
   path: "with.custom.structure",
   restriction: { maxLength: 10 }
-}]), He = $([{
+}]), Kt = {
+  with: { custom: { structure: "Order A204" } }
+}, Qt = m([{
+  name: "arrays",
   fieldOptions: { label: "Array Fields" },
   type: "heading",
   children: [
-    { fieldOptions: { label: "Optional field (max 3)" }, minOccurs: 0, maxOccurs: 3 },
-    { fieldOptions: { label: "Required field (max 3)" }, maxOccurs: 3 },
-    { fieldOptions: { label: "2 Fields required" }, minOccurs: 2, maxOccurs: 4 },
-    { fieldOptions: { label: "Section (2 sections required)" }, type: "heading", minOccurs: 2, maxOccurs: 4, fullWidth: !0, children: [
-      { fieldOptions: { label: "Nested field 1" } },
-      { fieldOptions: { label: "Required Nested field 2" }, type: "select", options: [
+    { name: "optionalItems", fieldOptions: { label: "Optional field (max 3)" }, minOccurs: 0, maxOccurs: 3 },
+    { name: "requiredItems", fieldOptions: { label: "Required field (max 3)" }, maxOccurs: 3 },
+    { name: "twoRequired", fieldOptions: { label: "2 Fields required" }, minOccurs: 2, maxOccurs: 4 },
+    { name: "sections", fieldOptions: { label: "Section (2 sections required)" }, type: "heading", minOccurs: 2, maxOccurs: 4, fullWidth: !0, children: [
+      { name: "note", fieldOptions: { label: "Nested field 1" } },
+      { name: "category", fieldOptions: { label: "Required Nested field 2" }, type: "select", options: [
         { key: "option1", value: "Option 1" },
         { key: "option2", value: "Option 2" },
         { key: "option3", value: "Option 3" }
       ] },
-      { fieldOptions: { label: "Nested field 3" }, type: "checkbox" }
+      { name: "flag", fieldOptions: { label: "Nested field 3" }, type: "checkbox" }
     ] }
   ]
-}]), Je = $([{
+}]), Yt = {
+  arrays: {
+    optionalItems: ["First note"],
+    requiredItems: ["Alpha", "Beta"],
+    twoRequired: ["One", "Two"],
+    sections: [
+      { note: "Section one", category: "option2", flag: !0 },
+      { note: "Section two", category: "option1", flag: !1 }
+    ]
+  }
+}, Zt = m([{
+  name: "groups",
   fieldOptions: { label: "Grouped Fields" },
   type: "heading",
   children: [
-    { fieldOptions: { label: "Required group" }, type: "group", children: [
-      { fieldOptions: { label: "Required Nested field 1" }, fullWidth: !0 },
-      { fieldOptions: { label: "Required Nested field 2" }, fullWidth: !0 }
+    { name: "requiredGroup", fieldOptions: { label: "Required group" }, type: "group", children: [
+      { name: "first", fieldOptions: { label: "Required Nested field 1" }, fullWidth: !0 },
+      { name: "second", fieldOptions: { label: "Required Nested field 2" }, fullWidth: !0 }
     ] },
-    { fieldOptions: { label: "Optional group" }, type: "group", minOccurs: 0, description: `The group is optional, therefore the children will only be required once 1 value is filled in.
-      
+    { name: "optionalGroup", fieldOptions: { label: "Optional group" }, type: "group", minOccurs: 0, description: `The group is optional, therefore the children will only be required once 1 value is filled in.
+
 You can test it by filling in one of the fields.`, children: [
-      { fieldOptions: { label: "Required Nested field 1" }, fullWidth: !0 },
-      { fieldOptions: { label: "Required Nested field 2" }, fullWidth: !0 }
+      { name: "first", fieldOptions: { label: "Required Nested field 1" }, fullWidth: !0 },
+      { name: "second", fieldOptions: { label: "Required Nested field 2" }, fullWidth: !0 }
     ] }
   ]
 }, {
+  name: "groupArrays",
   fieldOptions: { label: "Grouped Array Fields" },
   type: "heading",
   children: [
-    { fieldOptions: { label: "Required group" }, type: "group", maxOccurs: 5, fullWidth: !0, children: [
-      { fieldOptions: { label: "Required Nested field 1" } },
-      { fieldOptions: { label: "Required Nested field 2" } }
+    { name: "requiredGroups", fieldOptions: { label: "Required group" }, type: "group", maxOccurs: 5, fullWidth: !0, children: [
+      { name: "first", fieldOptions: { label: "Required Nested field 1" } },
+      { name: "second", fieldOptions: { label: "Required Nested field 2" } }
     ] },
-    { fieldOptions: { label: "Optional group" }, type: "group", minOccurs: 0, maxOccurs: 5, fullWidth: !0, children: [
-      { fieldOptions: { label: "Required Nested field 1" } },
-      { fieldOptions: { label: "Required Nested field 2" } }
+    { name: "optionalGroups", fieldOptions: { label: "Optional group" }, type: "group", minOccurs: 0, maxOccurs: 5, fullWidth: !0, children: [
+      { name: "first", fieldOptions: { label: "Required Nested field 1" } },
+      { name: "second", fieldOptions: { label: "Required Nested field 2" } }
     ] }
   ]
-}]), Ye = $([
+}]), Xt = {
+  groups: {
+    requiredGroup: { first: "Ada", second: "Lovelace" },
+    optionalGroup: { first: "Grace", second: "Hopper" }
+  },
+  groupArrays: {
+    requiredGroups: [
+      { first: "Alan", second: "Turing" },
+      { first: "Edsger", second: "Dijkstra" }
+    ],
+    optionalGroups: [
+      { first: "Barbara", second: "Liskov" }
+    ]
+  }
+}, Mt = m([
   {
+    name: "simpleChoiceSection",
     fieldOptions: { label: "Choice Fields (minOccurs 1, maxOccurs 1)" },
     type: "heading",
     children: [
-      { fieldOptions: { label: "Simple Choice Field" }, fullWidth: !0, description: "In a choice field, only 1 of the fields can be filled in.", choice: [
-        { fieldOptions: { label: "Nested Field 1" } },
-        { fieldOptions: { label: "Nested Field 2" } }
+      { name: "contactMethod", fieldOptions: { label: "Simple Choice Field" }, fullWidth: !0, description: "In a choice field, only 1 of the fields can be filled in.", choice: [
+        { name: "primary", fieldOptions: { label: "Nested Field 1" } },
+        { name: "secondary", fieldOptions: { label: "Nested Field 2" } }
       ] }
     ]
   },
   {
+    name: "groupedChoiceSection",
     fieldOptions: { label: "Choice Grouped Fields (minOccurs 1, maxOccurs 3)" },
     type: "heading",
     children: [
-      { fieldOptions: { label: "Array Choice Field" }, type: "group", maxOccurs: 3, fullWidth: !0, description: "In a choice field, only 1 of the fields can be filled in.", choice: [
-        { fieldOptions: { label: "Nested Field 1" }, type: "group", children: [
-          { fieldOptions: { label: "Nested Child Field 1" }, fullWidth: !0 },
-          { fieldOptions: { label: "Nested Child Field 2" }, fullWidth: !0 }
+      { name: "pick", fieldOptions: { label: "Array Choice Field" }, type: "group", maxOccurs: 3, fullWidth: !0, description: "In a choice field, only 1 of the fields can be filled in.", choice: [
+        { name: "optionA", fieldOptions: { label: "Nested Field 1" }, type: "group", children: [
+          { name: "detail1", fieldOptions: { label: "Nested Child Field 1" }, fullWidth: !0 },
+          { name: "detail2", fieldOptions: { label: "Nested Child Field 2" }, fullWidth: !0 }
         ] },
-        { fieldOptions: { label: "Nested Field 2" }, type: "group", children: [
-          { fieldOptions: { label: "Nested Child Field 1" }, fullWidth: !0 },
-          { fieldOptions: { label: "Nested Child Field 2" }, fullWidth: !0 }
+        { name: "optionB", fieldOptions: { label: "Nested Field 2" }, type: "group", children: [
+          { name: "detail1", fieldOptions: { label: "Nested Child Field 1" }, fullWidth: !0 },
+          { name: "detail2", fieldOptions: { label: "Nested Child Field 2" }, fullWidth: !0 }
         ] }
       ] }
     ]
   },
   {
+    name: "arrayChoiceSection",
     fieldOptions: { label: "Choice Array Fields (minOccurs 1, maxOccurs 3)" },
     type: "heading",
     children: [
-      { fieldOptions: { label: "Array Choice Field" }, type: "group", maxOccurs: 3, fullWidth: !0, description: "In a choice field, only 1 of the fields can be filled in.", choice: [
-        { fieldOptions: { label: "Nested Field 1" }, maxOccurs: 3 },
-        { fieldOptions: { label: "Nested Field 2" }, maxOccurs: 3 }
+      { name: "pick", fieldOptions: { label: "Array Choice Field" }, type: "group", maxOccurs: 3, fullWidth: !0, description: "In a choice field, only 1 of the fields can be filled in.", choice: [
+        { name: "optionA", fieldOptions: { label: "Nested Field 1" }, maxOccurs: 3 },
+        { name: "optionB", fieldOptions: { label: "Nested Field 2" }, maxOccurs: 3 }
       ] }
     ]
   }
-]), Qe = $([
+]), ei = {
+  // Only one branch per choice carries a value, honouring the mutually exclusive rule.
+  simpleChoiceSection: { contactMethod: { primary: "Picked the first branch" } },
+  groupedChoiceSection: {
+    pick: { optionA: [{ detail1: "Group A, item 1a", detail2: "Group A, item 1b" }] }
+  },
+  arrayChoiceSection: {
+    pick: { optionA: ["First entry", "Second entry"] }
+  }
+}, ti = m([
   {
     fieldOptions: { label: "Personal Info" },
     type: "heading",
@@ -602,7 +922,611 @@ You can test it by filling in one of the fields.`, children: [
       lastName: "Smit"
     }
   }
-}), Xe = $(
+}), ii = {
+  person: {
+    firstName: "Ada",
+    lastName: "Lovelace",
+    email: "ada@example.com"
+  },
+  address: {
+    street: "Baker Street 221B",
+    city: "London",
+    country: "United Kingdom"
+  }
+}, ai = m([
+  {
+    name: "inputs",
+    fieldOptions: { label: "All Input Types" },
+    type: "heading",
+    description: "Every dedicated input slot plus the default fallback, in both handleChange and v-model binding styles.",
+    children: [
+      { name: "text", type: "text", fieldOptions: { label: "Text" } },
+      { name: "textBoundByVModel", type: "textBoundByVModel", fieldOptions: { label: "Text (v-model)" } },
+      { name: "select", type: "select", fieldOptions: { label: "Select" }, options: [
+        { key: "option1", value: "Option 1" },
+        { key: "option2", value: "Option 2" },
+        { key: "option3", value: "Option 3" }
+      ] },
+      { name: "selectBoundByVModel", type: "selectBoundByVModel", fieldOptions: { label: "Select (v-model)" }, options: [
+        { key: "option1", value: "Option 1" },
+        { key: "option2", value: "Option 2" },
+        { key: "option3", value: "Option 3" }
+      ] },
+      { name: "checkbox", type: "checkbox", minOccurs: 0, fieldOptions: { label: "Checkbox" } },
+      { name: "checkboxBoundByVModel", type: "checkboxBoundByVModel", minOccurs: 0, fieldOptions: { label: "Checkbox (v-model)" } },
+      { name: "noType", fieldOptions: { label: "No type (default-input fallback)" } }
+    ]
+  },
+  {
+    name: "staticProps",
+    fieldOptions: { label: "Static Field Props" },
+    type: "heading",
+    description: "One field here has hidden: true and should not render at all.",
+    children: [
+      { name: "optionalField", minOccurs: 0, fieldOptions: { label: "Optional field (minOccurs 0)" } },
+      { name: "disabledField", minOccurs: 0, disabled: !0, fieldOptions: { label: "Disabled field" } },
+      { name: "hiddenField", minOccurs: 0, hidden: !0, fieldOptions: { label: "Hidden field (should not be visible)" } },
+      { name: "fullWidthField", minOccurs: 0, fullWidth: !0, fieldOptions: { label: "Full width field" } },
+      { name: "describedField", minOccurs: 0, description: "A per-field description rendered below the input.", fieldOptions: { label: "Field with description" } }
+    ]
+  }
+]), li = {
+  inputs: {
+    text: "Hello world",
+    textBoundByVModel: "Two-way bound",
+    select: "option2",
+    selectBoundByVModel: "option3",
+    checkbox: !0,
+    checkboxBoundByVModel: !1,
+    noType: "Fallback input"
+  },
+  staticProps: {
+    optionalField: "Filled optional",
+    disabledField: "Preset while disabled",
+    fullWidthField: "Spans the full width",
+    describedField: "Described value"
+  }
+}, ni = m([
+  {
+    name: "strings",
+    fieldOptions: { label: "String Restrictions" },
+    type: "heading",
+    description: "All fields are optional so only the restriction errors surface.",
+    children: [
+      { name: "minLength", minOccurs: 0, restriction: { minLength: 3 }, fieldOptions: { label: "minLength 3" } },
+      { name: "maxLength", minOccurs: 0, restriction: { maxLength: 5 }, fieldOptions: { label: "maxLength 5" } },
+      { name: "length", minOccurs: 0, restriction: { length: 4 }, fieldOptions: { label: "length 4 (exact)" } },
+      { name: "pattern", minOccurs: 0, restriction: { pattern: "^[A-Z]{2}-\\d{3}$" }, description: "Two uppercase letters, a dash, three digits (e.g. AB-123).", fieldOptions: { label: "pattern" } },
+      { name: "enumeration", minOccurs: 0, restriction: { enumeration: ["red", "green", "blue"] }, description: "Only red, green or blue are allowed.", fieldOptions: { label: "enumeration" } },
+      { name: "whiteSpace", minOccurs: 0, restriction: { whiteSpace: "collapse" }, description: "Leading, trailing or double spaces are invalid.", fieldOptions: { label: "whiteSpace collapse" } }
+    ]
+  },
+  {
+    name: "numbers",
+    fieldOptions: { label: "Numeric Restrictions" },
+    type: "heading",
+    children: [
+      { name: "minInclusive", minOccurs: 0, restriction: { minInclusive: 5 }, fieldOptions: { label: "minInclusive 5 (value >= 5)" } },
+      { name: "maxInclusive", minOccurs: 0, restriction: { maxInclusive: 10 }, fieldOptions: { label: "maxInclusive 10 (value <= 10)" } },
+      { name: "minExclusive", minOccurs: 0, restriction: { minExclusive: 0 }, fieldOptions: { label: "minExclusive 0 (value > 0)" } },
+      { name: "maxExclusive", minOccurs: 0, restriction: { maxExclusive: 100 }, fieldOptions: { label: "maxExclusive 100 (value < 100)" } },
+      { name: "fractionDigits", minOccurs: 0, restriction: { fractionDigits: 2 }, fieldOptions: { label: "fractionDigits 2 (max 2 decimals)" } },
+      { name: "totalDigits", minOccurs: 0, restriction: { totalDigits: 5 }, fieldOptions: { label: "totalDigits 5" } }
+    ]
+  },
+  {
+    name: "mixed",
+    fieldOptions: { label: "Combined & Custom" },
+    type: "heading",
+    children: [
+      { name: "combined", minOccurs: 0, restriction: { minLength: 2, maxLength: 6, pattern: "^[a-z]+$" }, description: "minLength 2, maxLength 6 and lowercase-only pattern combined.", fieldOptions: { label: "Combined restrictions" } },
+      { name: "requiredWithRestriction", restriction: { minLength: 3 }, fieldOptions: { label: "Required + minLength 3" } },
+      { name: "customValidation", minOccurs: 0, validation: (u) => !u || String(u).startsWith("A") || 'Value must start with "A"', description: "Custom vee-validate function via the validation property.", fieldOptions: { label: "Custom validation function" } }
+    ]
+  }
+]), si = {
+  // Every value here satisfies its restriction, so loading the sample form validates cleanly.
+  strings: {
+    minLength: "abcd",
+    maxLength: "abc",
+    length: "code",
+    pattern: "AB-123",
+    enumeration: "green",
+    whiteSpace: "clean text"
+  },
+  numbers: {
+    minInclusive: "7",
+    maxInclusive: "9",
+    minExclusive: "3",
+    maxExclusive: "42",
+    fractionDigits: "3.14",
+    totalDigits: "12345"
+  },
+  mixed: {
+    combined: "hello",
+    requiredWithRestriction: "valid",
+    customValidation: "Apple"
+  }
+}, oi = m([
+  {
+    name: "occurrences",
+    fieldOptions: { label: "Occurrence Variants" },
+    type: "heading",
+    children: [
+      { name: "manualFirstItem", minOccurs: 1, maxOccurs: 3, autoAddMinOccurs: !1, description: "Starts empty even though 1 item is required (autoAddMinOccurs: false). Add the first item yourself; submitting while empty shows the minOccurs error.", fieldOptions: { label: "No auto first item" } },
+      { name: "prefilledToMin", minOccurs: 2, maxOccurs: 4, description: "Auto-fills 2 empty items on first render (the default behaviour).", fieldOptions: { label: "Pre-filled to minOccurs 2" } },
+      { name: "manyAllowed", minOccurs: 0, maxOccurs: 10, fieldOptions: { label: "Optional, up to 10 items" } }
+    ]
+  },
+  {
+    name: "typedArrays",
+    fieldOptions: { label: "Arrays of Other Input Types" },
+    type: "heading",
+    children: [
+      { name: "selects", type: "select", minOccurs: 0, maxOccurs: 3, fieldOptions: { label: "Select array (max 3)" }, options: [
+        { key: "option1", value: "Option 1" },
+        { key: "option2", value: "Option 2" }
+      ] },
+      { name: "checkboxes", type: "checkbox", minOccurs: 0, maxOccurs: 3, fieldOptions: { label: "Checkbox array (max 3)" } },
+      { name: "vModelTexts", type: "textBoundByVModel", minOccurs: 0, maxOccurs: 3, fieldOptions: { label: "v-model text array (max 3)" } }
+    ]
+  }
+]), di = {
+  occurrences: {
+    manualFirstItem: ["Added by hand"],
+    prefilledToMin: ["First", "Second"],
+    manyAllowed: ["One", "Two", "Three"]
+  },
+  typedArrays: {
+    selects: ["option1", "option2"],
+    checkboxes: [!0, !1],
+    vModelTexts: ["Alpha", "Beta"]
+  }
+}, ri = m([
+  {
+    name: "overLimit",
+    fieldOptions: { label: "Over-limit Arrays (loaded from initialValues)" },
+    type: "heading",
+    children: [
+      { name: "requiredItems", minOccurs: 1, maxOccurs: 2, fieldOptions: { label: "Required (max 2)" }, description: "Loaded with 3 items, one over the maximum. Submit to see the xsd_maxOccurs error; the Add button is already disabled." },
+      { name: "optionalItems", minOccurs: 0, maxOccurs: 2, fieldOptions: { label: "Optional (max 2)" }, description: "A non-required array carried no occurrence rule before; loaded with 3 items it now fails xsd_maxOccurs on submit too." }
+    ]
+  }
+]), ci = {
+  overLimit: {
+    requiredItems: ["First", "Second", "Third"],
+    optionalItems: ["One", "Two", "Three"]
+  }
+}, ui = m([
+  {
+    name: "optionalChoice",
+    fieldOptions: { label: "Optional Choice (minOccurs 0)" },
+    type: "heading",
+    children: [
+      { name: "contact", fieldOptions: { label: "Optional choice" }, minOccurs: 0, fullWidth: !0, description: "Valid when left completely empty; still only one branch may hold a value.", choice: [
+        { name: "email", fieldOptions: { label: "Email" } },
+        { name: "phone", fieldOptions: { label: "Phone" } }
+      ] }
+    ]
+  },
+  {
+    name: "twoOccurrence",
+    fieldOptions: { label: "Choice Requiring 2 Occurrences (minOccurs 2, maxOccurs 4)" },
+    type: "heading",
+    children: [
+      { name: "contact", fieldOptions: { label: "At least 2 occurrences" }, minOccurs: 2, maxOccurs: 4, fullWidth: !0, description: "Submit with fewer than 2 filled occurrences to see the choiceMinOccurs error.", choice: [
+        { name: "email", fieldOptions: { label: "Email" } },
+        { name: "phone", fieldOptions: { label: "Phone" } }
+      ] }
+    ]
+  },
+  {
+    name: "differentLimits",
+    fieldOptions: { label: "Branches With Different Limits (maxOccurs 3)" },
+    type: "heading",
+    children: [
+      { name: "entries", fieldOptions: { label: "Per-iteration branch limits" }, maxOccurs: 3, fullWidth: !0, description: "Branch A allows 2 items per choice iteration, branch B only 1; the choice itself may repeat 3 times.", choice: [
+        { name: "branchA", maxOccurs: 2, fieldOptions: { label: "Branch A (maxOccurs 2)" } },
+        { name: "branchB", maxOccurs: 1, fieldOptions: { label: "Branch B (maxOccurs 1)" } }
+      ] }
+    ]
+  },
+  {
+    name: "totalCap",
+    fieldOptions: { label: "Branch Total Cap (maxOccursTotal, maxOccurs 4)" },
+    type: "heading",
+    children: [
+      { name: "entries", fieldOptions: { label: "Capped branch totals" }, maxOccurs: 4, fullWidth: !0, description: "The capped branch may reach at most 3 items in total across the whole choice, even though the shared budget would allow more.", choice: [
+        { name: "capped", maxOccurs: 2, maxOccursTotal: 3, fieldOptions: { label: "Capped (maxOccurs 2, maxOccursTotal 3)" } },
+        { name: "uncapped", maxOccurs: 2, fieldOptions: { label: "Uncapped (maxOccurs 2)" } }
+      ] }
+    ]
+  },
+  {
+    name: "singleBranchCap",
+    fieldOptions: { label: "Single-Branch Total Cap (maxOccursTotal 2)" },
+    type: "heading",
+    children: [
+      { name: "tags", fieldOptions: { label: "Capped single branch" }, fullWidth: !0, description: "A one-branch choice renders its branch directly, with no occurrence budget to share. The branch declares maxOccurs 3 but maxOccursTotal 2, so the add button disables after 2 items.", choice: [
+        { name: "tag", maxOccurs: 3, maxOccursTotal: 2, fieldOptions: { label: "Tag (maxOccurs 3, maxOccursTotal 2)" } }
+      ] },
+      { name: "clamped", fieldOptions: { label: "Cap above maxOccurs has no effect" }, fullWidth: !0, description: "maxOccursTotal can only tighten: this branch declares maxOccurs 2 with maxOccursTotal 5, and still stops at 2 items.", choice: [
+        { name: "item", maxOccurs: 2, maxOccursTotal: 5, fieldOptions: { label: "Item (maxOccurs 2, maxOccursTotal 5)" } }
+      ] }
+    ]
+  }
+]), pi = {
+  optionalChoice: { contact: { email: "ada@example.com" } },
+  // Two filled email occurrences satisfy the minOccurs 2 requirement.
+  twoOccurrence: { contact: { email: ["ada@example.com", "grace@example.com"] } },
+  differentLimits: { entries: { branchA: ["A-one", "A-two"] } },
+  totalCap: { entries: { capped: ["C-one", "C-two"] } },
+  // Both single branches filled exactly to their effective cap, so every add button is disabled.
+  singleBranchCap: { tags: { tag: ["T-one", "T-two"] }, clamped: { item: ["I-one", "I-two"] } }
+}, mi = m([
+  {
+    name: "tooManyBranches",
+    fieldOptions: { label: "Choice Over maxOccurs (auto mode, maxOccurs 1)" },
+    type: "heading",
+    children: [
+      { name: "contact", fieldOptions: { label: "Only one branch allowed" }, maxOccurs: 1, fullWidth: !0, description: "Loaded with both email and phone filled at once. Two occupied branches exceed maxOccurs 1, so submit shows the xsd_choiceMaxOccurs error.", choice: [
+        { name: "email", fieldOptions: { label: "Email" } },
+        { name: "phone", fieldOptions: { label: "Phone" } }
+      ] }
+    ]
+  },
+  {
+    name: "branchOverTotal",
+    fieldOptions: { label: "Branch Over maxOccursTotal (maxOccurs 4)" },
+    type: "heading",
+    children: [
+      { name: "entries", fieldOptions: { label: "Capped branch over its total" }, maxOccurs: 4, fullWidth: !0, description: "The capped branch allows at most 2 items in total across the whole choice (maxOccursTotal 2) but is loaded with 3. Submit shows the maxOccursTotal error.", choice: [
+        { name: "capped", maxOccurs: 3, maxOccursTotal: 2, fieldOptions: { label: "Capped (maxOccursTotal 2)" } },
+        { name: "uncapped", maxOccurs: 3, fieldOptions: { label: "Uncapped" } }
+      ] }
+    ]
+  },
+  {
+    name: "singleBranchOverTotal",
+    fieldOptions: { label: "Single Branch Over maxOccursTotal" },
+    type: "heading",
+    children: [
+      { name: "tags", fieldOptions: { label: "Capped single branch over its total" }, fullWidth: !0, description: "A one-branch choice skips choice-level validation, so a breach surfaces as the branch's own maxOccurs error instead: the branch is capped at 2 items (maxOccursTotal 2) but loaded with 3. Submit to see it.", choice: [
+        { name: "tag", maxOccurs: 3, maxOccursTotal: 2, fieldOptions: { label: "Tag (maxOccursTotal 2)" } }
+      ] }
+    ]
+  }
+]), hi = {
+  tooManyBranches: { contact: { email: "ada@example.com", phone: "555-0100" } },
+  branchOverTotal: { entries: { capped: ["C-one", "C-two", "C-three"] } },
+  singleBranchOverTotal: { tags: { tag: ["T-one", "T-two", "T-three"] } }
+}, bi = m([
+  {
+    name: "explicitSection",
+    fieldOptions: { label: "Explicit Choice (selection-first)" },
+    type: "heading",
+    children: [
+      { name: "contact", fieldOptions: { label: "Contact method" }, fullWidth: !0, explicitChoiceSelection: !0, description: "No branch renders until one is chosen via the add buttons; switching to the other branch clears the current one.", choice: [
+        { name: "email", type: "group", fieldOptions: { label: "Email" }, children: [
+          { name: "address", fullWidth: !0, fieldOptions: { label: "Email address" } }
+        ] },
+        { name: "phone", type: "group", fieldOptions: { label: "Phone" }, children: [
+          { name: "number", fullWidth: !0, fieldOptions: { label: "Phone number" } },
+          { name: "allowSms", type: "checkbox", minOccurs: 0, fieldOptions: { label: "Allow SMS" } }
+        ] }
+      ] }
+    ]
+  }
+]), fi = {
+  // A loaded value auto-selects its branch, even though nothing was clicked.
+  explicitSection: { contact: { email: { address: "jane@example.com" } } }
+}, Oi = m([
+  {
+    name: "preserveSection",
+    fieldOptions: { label: "Explicit Choice With preserveOnSwitch" },
+    type: "heading",
+    children: [
+      { name: "contact", fieldOptions: { label: "Contact method" }, fullWidth: !0, explicitChoiceSelection: !0, preserveOnSwitch: !0, description: "Fill in Email, switch to Phone and back: the Email value is restored from the stash, with fresh touched/validation state.", choice: [
+        { name: "email", type: "group", fieldOptions: { label: "Email" }, children: [
+          { name: "address", fullWidth: !0, fieldOptions: { label: "Email address" } }
+        ] },
+        { name: "phone", type: "group", fieldOptions: { label: "Phone" }, children: [
+          { name: "number", fullWidth: !0, fieldOptions: { label: "Phone number" } }
+        ] }
+      ] }
+    ]
+  }
+]), gi = {
+  preserveSection: { contact: { email: { address: "restore@example.com" } } }
+}, yi = m([
+  {
+    name: "integrationsSection",
+    fieldOptions: { label: "Explicit Repeatable Choice (maxOccurs 5)" },
+    type: "heading",
+    children: [
+      { name: "integrations", fieldOptions: { label: "Integrations" }, fullWidth: !0, maxOccurs: 5, explicitChoiceSelection: !0, description: "Add up to 5 occurrences in any mix; each kind is additionally capped at 3 in total (maxOccursTotal), so its add button disables independently.", choice: [
+        { name: "crmExport", maxOccurs: 1, maxOccursTotal: 3, fullWidth: !0, fieldOptions: { label: "CRM export" }, children: [
+          { name: "crmSystem", fieldOptions: { label: "CRM system" } },
+          { name: "exportSchedule", fieldOptions: { label: "Export schedule" } }
+        ] },
+        { name: "apiEndpoint", maxOccurs: 1, maxOccursTotal: 3, fullWidth: !0, fieldOptions: { label: "API endpoint" }, children: [
+          { name: "url", fieldOptions: { label: "Endpoint URL" } },
+          { name: "apiKey", fieldOptions: { label: "API key" } }
+        ] }
+      ] }
+    ]
+  }
+]), xi = {
+  // A mix of both kinds; each branch is its own array of occurrences.
+  integrationsSection: {
+    integrations: {
+      crmExport: [
+        { crmSystem: "Salesforce", exportSchedule: "Nightly" }
+      ],
+      apiEndpoint: [
+        { url: "https://api.example.com/orders", apiKey: "key-1234" },
+        { url: "https://api.example.com/customers", apiKey: "key-5678" }
+      ]
+    }
+  }
+}, vi = m([
+  {
+    name: "timelineSection",
+    fieldOptions: { label: "Repeatable Explicit Choice (displayOrder: added)" },
+    type: "heading",
+    children: [
+      { name: "events", fieldOptions: { label: "Timeline entries" }, fullWidth: !0, maxOccurs: 6, explicitChoiceSelection: !0, displayOrder: "added", description: "Occurrences render in the order their add button was pressed, interleaved across both kinds, instead of grouped by kind. The global-index badge follows the rendered order; the insertion-order badge appears only on occurrences added this session. Pre-loaded occurrences have no add-order, so they sort first in grouped order; reloading drops the add-order entirely.", choice: [
+        { name: "note", maxOccurs: 6, fullWidth: !0, fieldOptions: { label: "Note" }, children: [
+          { name: "text", fullWidth: !0, fieldOptions: { label: "Note text" } }
+        ] },
+        { name: "milestone", maxOccurs: 6, fullWidth: !0, fieldOptions: { label: "Milestone" }, children: [
+          { name: "title", fieldOptions: { label: "Milestone title" } },
+          { name: "owner", fieldOptions: { label: "Owner" } }
+        ] }
+      ] }
+    ]
+  }
+]), wi = {
+  // Both pre-loaded occurrences lack an add-order, so they render first in grouped order;
+  // anything added afterwards appends below them in add-press order.
+  timelineSection: {
+    events: {
+      note: [{ text: "Loaded note (sorts first, grouped)" }],
+      milestone: [{ title: "Loaded milestone", owner: "Ada" }]
+    }
+  }
+}, ki = m([
+  {
+    name: "stepsSection",
+    fieldOptions: { label: "Repeatable Explicit Choice (preserveOrder + displayOrder: added)" },
+    type: "heading",
+    children: [
+      { name: "steps", fieldOptions: { label: "Workflow steps" }, fullWidth: !0, maxOccurs: 6, explicitChoiceSelection: !0, displayOrder: "added", preserveOrder: !0, description: 'Each added occurrence writes a 1-based "order" field into its own values (watch the debug output below), counted across both kinds. Removing one compacts the survivors back to a contiguous 1..N. Unlike the ephemeral displayOrder-only case, this order is real submitted data and survives a reload. The pre-loaded occurrences arrive without "order" and are backfilled once from their grouped position.', choice: [
+        { name: "manual", maxOccurs: 6, fullWidth: !0, fieldOptions: { label: "Manual step" }, children: [
+          { name: "instruction", fullWidth: !0, fieldOptions: { label: "Instruction" } }
+        ] },
+        { name: "automated", maxOccurs: 6, fullWidth: !0, fieldOptions: { label: "Automated step" }, children: [
+          { name: "script", fullWidth: !0, fieldOptions: { label: "Script" } }
+        ] }
+      ] }
+    ]
+  }
+]), Ci = {
+  // Neither pre-loaded occurrence carries "order"; the mount-time backfill assigns 1 and 2 from
+  // their grouped position before any add-press can occur.
+  stepsSection: {
+    steps: {
+      manual: [{ instruction: "Backfilled order 1" }],
+      automated: [{ script: "deploy.sh" }]
+    }
+  }
+}, Ti = m([
+  {
+    name: "labelsSection",
+    fieldOptions: { label: "preserveOrder With a Scalar-Leaf Branch (per-branch no-op)" },
+    type: "heading",
+    children: [
+      { name: "items", fieldOptions: { label: "Mixed branches" }, fullWidth: !0, maxOccurs: 6, explicitChoiceSelection: !0, displayOrder: "added", preserveOrder: !1, description: 'The object branch (with children) gets an "order" field written into its values; the scalar-leaf branch (plain text, no children) has nowhere to attach "order", so preserveOrder is a no-op for it and logs a console.warn in development. Adding a scalar item still works, it just carries no persisted order.', choice: [
+        { name: "labelled", maxOccurs: 6, fullWidth: !0, fieldOptions: { label: "Labelled item (object branch)" }, children: [
+          { name: "label", fullWidth: !0, fieldOptions: { label: "Label" } }
+        ] },
+        { name: "tag", maxOccurs: 6, type: "text", fullWidth: !0, fieldOptions: { label: "Tag (scalar branch, no order)" } }
+      ] }
+    ]
+  }
+]), Vi = {
+  labelsSection: {
+    items: {
+      labelled: [{ label: "Has an order field" }],
+      tag: ["plain-tag-no-order"]
+    }
+  }
+}, _i = m([
+  {
+    name: "ownValue",
+    fieldOptions: { label: "Reacting to Own Value" },
+    type: "heading",
+    children: [
+      { name: "charCounter", minOccurs: 0, restriction: { maxLength: 10 }, fieldOptions: { label: "Character counter" }, computedProps: [
+        (u, h) => {
+          const d = typeof h.value == "string" ? h.value.length : 0;
+          u.description = `${10 - d} character(s) remaining`;
+        }
+      ] },
+      { name: "selfHiding", minOccurs: 0, fieldOptions: { label: 'Type "hide" to hide me' }, computedProps: [
+        (u, h) => {
+          h.value === "hide" && (u.hidden = !0);
+        }
+      ] },
+      { name: "selfDisabling", minOccurs: 0, fieldOptions: { label: 'Type "lock" to disable me' }, computedProps: [
+        (u, h) => {
+          h.value === "lock" && (u.disabled = !0);
+        }
+      ] }
+    ]
+  },
+  {
+    name: "progress",
+    fieldOptions: { label: "Parent Reacting to Child Values (computeOnChildValueChange)" },
+    type: "heading",
+    computeOnChildValueChange: !0,
+    computedProps: [
+      (u, h) => {
+        const c = Object.values(h.value ?? {}).filter((e) => e != null && e !== "").length;
+        u.description = `${c} of 3 fields filled in`;
+      }
+    ],
+    children: [
+      { name: "first", minOccurs: 0, fieldOptions: { label: "First" } },
+      { name: "second", minOccurs: 0, fieldOptions: { label: "Second" } },
+      { name: "third", minOccurs: 0, fieldOptions: { label: "Third" } }
+    ]
+  },
+  {
+    name: "childFieldsDemo",
+    fieldOptions: { label: "Parent Reacting to Child Computed State (childFields)" },
+    type: "heading",
+    description: 'Each child hides itself when its value is "hide"; once every child is hidden the parent heading hides too.',
+    computedProps: [
+      (u, h, d) => {
+        d.value.length > 0 && d.value.every((c) => c.hidden) && (u.hidden = !0);
+      }
+    ],
+    children: [
+      { name: "childA", minOccurs: 0, fieldOptions: { label: 'Child A (type "hide")' }, computedProps: [
+        (u, h) => {
+          h.value === "hide" && (u.hidden = !0);
+        }
+      ] },
+      { name: "childB", minOccurs: 0, fieldOptions: { label: 'Child B (type "hide")' }, computedProps: [
+        (u, h) => {
+          h.value === "hide" && (u.hidden = !0);
+        }
+      ] }
+    ]
+  }
+]), Si = {
+  // Values that stay visible/enabled (typing "hide"/"lock" would trigger the self-hiding demos).
+  ownValue: { charCounter: "Counting", selfHiding: "still shown", selfDisabling: "still on" },
+  progress: { first: "Filled one", second: "Filled two" },
+  childFieldsDemo: { childA: "kept visible" }
+}, Wi = m([
+  {
+    name: "attributes",
+    fieldOptions: { label: "Attributes" },
+    type: "heading",
+    description: "Attributes render once the parent field has a value; the value becomes an object like { value, ...attributes }. Check the debug output below.",
+    children: [
+      { name: "nickname", minOccurs: 0, fullWidth: !0, fieldOptions: { label: "Optional attribute (lang)" }, attributes: [
+        { name: "lang", minOccurs: 0, fieldOptions: { label: "Language" } }
+      ] },
+      { name: "verifiedPhone", fullWidth: !0, fieldOptions: { label: "Required attribute (certainty)" }, attributes: [
+        { name: "certainty", type: "select", fieldOptions: { label: "Certainty" }, options: [
+          { key: "verified", value: "Verified" },
+          { key: "unverified", value: "Unverified" }
+        ] }
+      ] }
+    ]
+  },
+  {
+    name: "complexTypes",
+    fieldOptions: { label: "Complex Types" },
+    type: "heading",
+    children: [
+      { name: "complexValue", minOccurs: 0, fullWidth: !0, isComplexType: !0, description: "isComplexType without attributes: the value is stored as { value: ... }.", fieldOptions: { label: "isComplexType" } }
+    ]
+  }
+]), Fi = {
+  attributes: {
+    // A complex type stores its value plus each attribute under one object.
+    nickname: { value: "Ace", lang: "en" },
+    verifiedPhone: { value: "+31 6 1234 5678", certainty: "verified" }
+  },
+  complexTypes: {
+    complexValue: { value: "Wrapped in { value }" }
+  }
+}, $i = m([
+  {
+    name: "customValueProp",
+    fieldOptions: { label: "Custom complexTypeValueProperty" },
+    type: "heading",
+    description: 'The settings rename the complex type value property to "val", so the debug output shows { val: ..., lang: ... }.',
+    children: [
+      { name: "title", minOccurs: 0, fullWidth: !0, fieldOptions: { label: "Title with lang attribute" }, attributes: [
+        { name: "lang", minOccurs: 0, fieldOptions: { label: "Language" } }
+      ] }
+    ]
+  }
+], {
+  complexTypeValueProperty: "val"
+}), Ai = {
+  // The value lives under "val" (not "value") because of the complexTypeValueProperty setting.
+  customValueProp: { title: { val: "Hello world", lang: "en" } }
+};
+function J(u, h) {
+  return m([
+    {
+      name: "timing",
+      fieldOptions: { label: "Validation Timing" },
+      type: "heading",
+      description: u,
+      children: [
+        { name: "requiredField", fieldOptions: { label: "Required field" } },
+        { name: "maxLengthField", minOccurs: 0, restriction: { maxLength: 5 }, fieldOptions: { label: "maxLength 5" } }
+      ]
+    }
+  ], h);
+}
+const Bi = {
+  timing: { requiredField: "Filled in", maxLengthField: "abc" }
+}, Ni = J(
+  "validateOnValueUpdate: false, validateWhenInError: false. Errors only appear on submit and stay unchanged while typing until the next submit.",
+  { validateOnValueUpdate: !1, validateWhenInError: !1 }
+), Pi = J(
+  "validateOnBlur: true, validateOnValueUpdate: false. Errors appear when leaving a field, not while typing.",
+  { validateOnBlur: !0, validateOnValueUpdate: !1 }
+), qi = J(
+  "validateOnValueUpdateAfterSubmit: true, validateOnValueUpdate: false. Typing does not validate until the first submit; after that every change validates.",
+  { validateOnValueUpdateAfterSubmit: !0, validateOnValueUpdate: !1 }
+), Li = J(
+  "validateOnValueUpdate: false, validateWhenInError: true. A field only starts live-validating once it is in error (after a submit).",
+  { validateOnValueUpdate: !1, validateWhenInError: !0 }
+), Ei = m([
+  {
+    name: "optionalMarkers",
+    fieldOptions: { label: 'Show "(optional)" Instead of "*"' },
+    type: "heading",
+    description: "With showOptionalInsteadOfRequired the required markers disappear and optional fields are marked instead.",
+    children: [
+      { name: "requiredField", fieldOptions: { label: "Required field" } },
+      { name: "optionalField", minOccurs: 0, fieldOptions: { label: "Optional field" } }
+    ]
+  }
+], {
+  showOptionalInsteadOfRequired: !0
+}), Ii = {
+  optionalMarkers: { requiredField: "Required value", optionalField: "Optional value" }
+}, zi = m([
+  {
+    name: "messages",
+    fieldOptions: { label: "Custom Validation Messages" },
+    type: "heading",
+    description: "The settings override the required, maxLength and minInclusive messages; rules without an override fall back to the library defaults.",
+    children: [
+      { name: "requiredField", fieldOptions: { label: "Required field" } },
+      { name: "maxLengthField", minOccurs: 0, restriction: { maxLength: 5 }, fieldOptions: { label: "maxLength 5" } },
+      { name: "minInclusiveField", minOccurs: 0, restriction: { minInclusive: 10 }, fieldOptions: { label: "minInclusive 10" } }
+    ]
+  }
+], {
+  messages: {
+    required: "Custom message: please fill in {field}",
+    maxLength: "Custom message: {field} must stay under {length} characters",
+    minInclusive: "Custom message: {field} must be {min} or higher"
+  }
+}), Ri = {
+  messages: { requiredField: "Filled in", maxLengthField: "abcd", minInclusiveField: "15" }
+}, Ui = m(
   [{
     name: "items",
     type: "text",
@@ -616,20 +1540,529 @@ You can test it by filling in one of the fields.`, children: [
     // validateWhenInError: true,
     // validateOnBlur: true,
   }
-);
-function $(b, k, c = {}) {
-  return U(B({
-    render: () => j(je, { ...c, metadata: b, settings: k, showDebugState: !0 })
+), Di = {
+  // Each repeatable item is a complex type: its text under "value" plus the lang attribute.
+  items: [
+    { value: "First item", lang: "en" },
+    { value: "Second item", lang: "nl" }
+  ]
+}, I = [
+  { key: "starter", value: "Starter" },
+  { key: "growth", value: "Growth" },
+  { key: "enterprise", value: "Enterprise" }
+], Ji = m([{
+  name: "onboarding",
+  wizard: !0,
+  fieldOptions: { label: "Onboarding wizard (backward-only)" },
+  children: [
+    {
+      name: "company",
+      type: "heading",
+      fieldOptions: { label: "Company" },
+      children: [
+        { name: "companyName", fieldOptions: { label: "Company name (required)" }, fullWidth: !0 },
+        { name: "website", minOccurs: 0, fieldOptions: { label: "Website (optional)" }, fullWidth: !0 }
+      ]
+    },
+    {
+      name: "plan",
+      type: "heading",
+      fieldOptions: { label: "Plan" },
+      children: [
+        { name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: I },
+        { name: "seats", minOccurs: 0, fieldOptions: { label: "Seats (optional)" } }
+      ]
+    },
+    {
+      name: "review",
+      type: "heading",
+      fieldOptions: { label: "Review" },
+      children: [
+        { name: "termsAccepted", type: "checkbox", fieldOptions: { label: "I accept the terms (required)" } }
+      ]
+    }
+  ]
+}]), Gi = {
+  onboarding: {
+    company: { companyName: "Acme Corp", website: "https://acme.example" },
+    plan: { planName: "growth", seats: "25" },
+    review: { termsAccepted: !0 }
+  }
+}, ji = m([{
+  name: "onboarding",
+  wizard: { allowForwardJump: !0, validateOnJump: !1 },
+  fieldOptions: { label: "Wizard with forward jumping" },
+  children: [
+    {
+      name: "company",
+      type: "heading",
+      fieldOptions: { label: "Company" },
+      children: [{ name: "companyName", fieldOptions: { label: "Company name (required)" }, fullWidth: !0 }]
+    },
+    {
+      name: "plan",
+      type: "heading",
+      fieldOptions: { label: "Plan" },
+      children: [{ name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: I }]
+    },
+    {
+      name: "review",
+      type: "heading",
+      fieldOptions: { label: "Review" },
+      children: [{ name: "termsAccepted", type: "checkbox", fieldOptions: { label: "I accept the terms (required)" } }]
+    }
+  ]
+}]), Lt = {
+  onboarding: {
+    company: { companyName: "Acme Corp" },
+    plan: { planName: "enterprise" },
+    review: { termsAccepted: !0 }
+  }
+}, Hi = m([{
+  name: "onboarding",
+  wizard: { allowForwardJump: !0, validateOnJump: !0 },
+  fieldOptions: { label: "Wizard with validate-on-jump" },
+  children: [
+    {
+      name: "company",
+      type: "heading",
+      fieldOptions: { label: "Company" },
+      children: [{ name: "companyName", fieldOptions: { label: "Company name (required)" }, fullWidth: !0 }]
+    },
+    {
+      name: "plan",
+      type: "heading",
+      fieldOptions: { label: "Plan" },
+      children: [{ name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: I }]
+    },
+    {
+      name: "review",
+      type: "heading",
+      fieldOptions: { label: "Review" },
+      children: [{ name: "termsAccepted", type: "checkbox", fieldOptions: { label: "I accept the terms (required)" } }]
+    }
+  ]
+}]), Ki = Lt, Qi = m([{
+  name: "onboarding",
+  wizard: { allowForwardJump: !0 },
+  fieldOptions: { label: "Wizard with group / array / choice / summary pages" },
+  children: [
+    {
+      name: "company",
+      type: "heading",
+      fieldOptions: { label: "Company (group page)" },
+      children: [
+        { name: "companyName", fieldOptions: { label: "Company name (required)" }, fullWidth: !0 }
+      ]
+    },
+    {
+      name: "contacts",
+      type: "heading",
+      maxOccurs: 4,
+      minOccurs: 1,
+      fullWidth: !0,
+      fieldOptions: { label: "Contacts (repeatable array page)" },
+      children: [
+        { name: "fullName", fieldOptions: { label: "Full name" } },
+        { name: "email", minOccurs: 0, fieldOptions: { label: "Email (optional)" } }
+      ]
+    },
+    {
+      name: "launchApproach",
+      type: "heading",
+      fullWidth: !0,
+      fieldOptions: { label: "Launch approach (choice page)" },
+      choice: [
+        { name: "selfServe", type: "group", fieldOptions: { label: "Self serve" }, children: [
+          { name: "startDate", fieldOptions: { label: "Start date" } }
+        ] },
+        { name: "guidedRollout", type: "group", fieldOptions: { label: "Guided rollout" }, children: [
+          { name: "accountManager", fieldOptions: { label: "Account manager" } }
+        ] }
+      ]
+    },
+    {
+      name: "summary",
+      type: "heading",
+      fieldOptions: { label: "Summary (field-less page)" }
+    }
+  ]
+}]), Yi = {
+  onboarding: {
+    company: { companyName: "Acme Corp" },
+    contacts: [
+      { fullName: "Ada Lovelace", email: "ada@acme.example" },
+      { fullName: "Grace Hopper" }
+    ],
+    launchApproach: { guidedRollout: { accountManager: "Alan Turing" } }
+  }
+}, Zi = m([{
+  name: "setupPath",
+  explicitChoiceSelection: !0,
+  fullWidth: !0,
+  fieldOptions: { label: "Pick a setup path (choice of wizards)" },
+  choice: [
+    {
+      name: "quickStart",
+      wizard: { allowForwardJump: !0 },
+      fieldOptions: { label: "Quick start wizard" },
+      children: [
+        { name: "basics", type: "heading", fieldOptions: { label: "Basics" }, children: [
+          { name: "projectName", fieldOptions: { label: "Project name (required)" }, fullWidth: !0 }
+        ] },
+        { name: "done", type: "heading", fieldOptions: { label: "Done" }, children: [
+          { name: "confirm", type: "checkbox", fieldOptions: { label: "Looks good (required)" } }
+        ] }
+      ]
+    },
+    {
+      name: "guidedSetup",
+      wizard: { allowForwardJump: !0 },
+      fieldOptions: { label: "Guided setup wizard" },
+      children: [
+        { name: "company", type: "heading", fieldOptions: { label: "Company" }, children: [
+          { name: "companyName", fieldOptions: { label: "Company name (required)" }, fullWidth: !0 }
+        ] },
+        { name: "plan", type: "heading", fieldOptions: { label: "Plan" }, children: [
+          { name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: I }
+        ] },
+        { name: "review", type: "heading", fieldOptions: { label: "Review" }, children: [
+          { name: "termsAccepted", type: "checkbox", fieldOptions: { label: "Accept terms (required)" } }
+        ] }
+      ]
+    }
+  ]
+}]), Xi = {
+  setupPath: {
+    guidedSetup: {
+      company: { companyName: "Acme Corp" },
+      plan: { planName: "growth" },
+      review: { termsAccepted: !0 }
+    }
+  }
+}, Mi = m([{
+  name: "teams",
+  type: "heading",
+  maxOccurs: 3,
+  minOccurs: 1,
+  fullWidth: !0,
+  fieldOptions: { label: "Teams (each team runs its own wizard)" },
+  children: [{
+    name: "setup",
+    wizard: { allowForwardJump: !0 },
+    fieldOptions: { label: "Team setup wizard" },
+    children: [
+      { name: "team", type: "heading", fieldOptions: { label: "Team" }, children: [
+        { name: "teamName", fieldOptions: { label: "Team name (required)" }, fullWidth: !0 }
+      ] },
+      { name: "lead", type: "heading", fieldOptions: { label: "Lead" }, children: [
+        { name: "leadName", fieldOptions: { label: "Lead name (required)" }, fullWidth: !0 }
+      ] }
+    ]
+  }]
+}]), ea = {
+  teams: [
+    { setup: { team: { teamName: "Platform" }, lead: { leadName: "Ada Lovelace" } } },
+    { setup: { team: { teamName: "Growth" }, lead: { leadName: "Grace Hopper" } } }
+  ]
+}, ta = m([{
+  name: "onboarding",
+  wizard: { allowForwardJump: !0 },
+  fieldOptions: { label: "Wizard: v-show vs v-if and keepValuesOnUnmount" },
+  children: [
+    {
+      name: "company",
+      type: "heading",
+      fieldOptions: { label: "Company" },
+      children: [{ name: "companyName", minOccurs: 1, fieldOptions: { label: "Company name (type something, then navigate away and back)" }, fullWidth: !0 }]
+    },
+    {
+      name: "plan",
+      type: "heading",
+      fieldOptions: { label: "Plan" },
+      children: [{ name: "planName", minOccurs: 1, fieldOptions: { label: "Plan name" }, fullWidth: !0 }]
+    }
+  ]
+}]), ia = {
+  onboarding: {
+    company: { companyName: "Acme Corp" },
+    plan: { planName: "Growth" }
+  }
+}, aa = m([{
+  name: "registration",
+  type: "heading",
+  minOccurs: 0,
+  fieldOptions: { label: "Optional section containing a wizard" },
+  description: "While this section is empty, nothing in the wizard is required: Submit passes right away. Type into any field and the required fields gate again.",
+  children: [{
+    name: "onboarding",
+    wizard: !0,
+    fieldOptions: { label: "Onboarding wizard" },
+    children: [
+      {
+        name: "company",
+        type: "heading",
+        fieldOptions: { label: "Company" },
+        children: [
+          { name: "companyName", fieldOptions: { label: "Company name (required once the section has a value)" }, fullWidth: !0 },
+          { name: "website", minOccurs: 0, fieldOptions: { label: "Website (optional)" }, fullWidth: !0 }
+        ]
+      },
+      {
+        name: "plan",
+        type: "heading",
+        fieldOptions: { label: "Plan" },
+        children: [
+          { name: "planName", type: "select", fieldOptions: { label: "Plan (required once the section has a value)" }, options: I }
+        ]
+      }
+    ]
+  }]
+}]), la = {
+  registration: {
+    onboarding: {
+      company: { companyName: "Acme Corp" }
+    }
+  }
+}, na = m([{
+  name: "archived",
+  type: "heading",
+  maxOccurs: 0,
+  fieldOptions: { label: "Disabled section containing a wizard" },
+  description: "The whole section is disabled via maxOccurs: 0. Navigate the wizard: every page field is disabled and Submit passes without validating them.",
+  children: [{
+    name: "onboarding",
+    wizard: { allowForwardJump: !0 },
+    fieldOptions: { label: "Onboarding wizard" },
+    children: [
+      {
+        name: "company",
+        type: "heading",
+        fieldOptions: { label: "Company" },
+        children: [
+          { name: "companyName", fieldOptions: { label: "Company name" }, fullWidth: !0 },
+          { name: "website", minOccurs: 0, fieldOptions: { label: "Website" }, fullWidth: !0 }
+        ]
+      },
+      {
+        name: "plan",
+        type: "heading",
+        fieldOptions: { label: "Plan" },
+        children: [
+          { name: "planName", type: "select", fieldOptions: { label: "Plan" }, options: I }
+        ]
+      }
+    ]
+  }]
+}]), sa = {
+  archived: {
+    onboarding: {
+      company: { companyName: "Acme Corp", website: "https://acme.example" },
+      plan: { planName: "growth" }
+    }
+  }
+};
+function m(u, h, d = {}) {
+  return X(E({
+    // Overridable at runtime so a Storybook control can flip a case between empty and pre-filled
+    // without a second component; an unset prop falls back to the baked testCaseConfig/settings.
+    props: {
+      initialValues: { type: Object, default: void 0 },
+      initialEdit: { type: Boolean, default: void 0 },
+      hideFieldsWithoutValue: { type: Boolean, default: void 0 },
+      settings: { type: Object, default: void 0 },
+      keepValuesOnUnmount: { type: Boolean, default: void 0 }
+    },
+    setup: (c) => () => M(G, {
+      metadata: u,
+      settings: c.settings ?? h,
+      showDebugState: !0,
+      initialValues: c.initialValues ?? d.initialValues,
+      initialEdit: c.initialEdit ?? d.initialEdit,
+      hideFieldsWithoutValue: c.hideFieldsWithoutValue ?? d.hideFieldsWithoutValue,
+      keepValuesOnUnmount: c.keepValuesOnUnmount
+    })
   }));
 }
+const Et = { class: "flex flex-col gap-4" }, It = { class: "flex gap-6 flex-wrap" }, zt = { class: "flex items-center gap-2" }, Rt = { class: "flex items-center gap-2" }, oa = /* @__PURE__ */ E({
+  __name: "KeepValuesOnUnmountTestCase",
+  setup(u) {
+    const h = L(!0), d = L(!1), c = U(() => [
+      ...h.value ? [{
+        name: "contact",
+        fieldOptions: { label: "Contact (complex field with an attribute)" },
+        minOccurs: 0,
+        fullWidth: !0,
+        attributes: [
+          {
+            name: "certainty",
+            type: "select",
+            minOccurs: 0,
+            fieldOptions: { label: "Certainty" },
+            options: [
+              { key: "verified", value: "Verified" },
+              { key: "unverified", value: "Unverified" }
+            ]
+          }
+        ]
+      }] : [],
+      { name: "note", fieldOptions: { label: "Sibling field (always mounted)" }, minOccurs: 0, fullWidth: !0 }
+    ]);
+    return (e, l) => (t(), i("div", Et, [
+      a("div", It, [
+        a("label", zt, [
+          N(a("input", {
+            "onUpdate:modelValue": l[0] || (l[0] = (r) => h.value = r),
+            type: "checkbox",
+            "data-testid": "toggle-show-contact"
+          }, null, 512), [
+            [D, h.value]
+          ]),
+          l[2] || (l[2] = x(" Show contact field (v-if unmount) ", -1))
+        ]),
+        a("label", Rt, [
+          N(a("input", {
+            "onUpdate:modelValue": l[1] || (l[1] = (r) => d.value = r),
+            type: "checkbox",
+            "data-testid": "toggle-keep-values-on-unmount"
+          }, null, 512), [
+            [D, d.value]
+          ]),
+          l[3] || (l[3] = x(" keepValuesOnUnmount ", -1))
+        ])
+      ]),
+      R(G, {
+        metadata: c.value,
+        "keep-values-on-unmount": d.value,
+        "show-debug-state": ""
+      }, null, 8, ["metadata", "keep-values-on-unmount"])
+    ]));
+  }
+}), Ut = { class: "flex flex-col gap-4" }, Dt = { class: "flex items-center gap-4 flex-wrap" }, Jt = { class: "flex items-center gap-2" }, da = /* @__PURE__ */ E({
+  __name: "ProgrammaticWritesTestCase",
+  setup(u) {
+    const h = ee("form"), d = L(!1), c = [
+      { name: "code", fieldOptions: { label: "Code (required, maxLength 5)" }, restriction: { maxLength: 5 }, fullWidth: !0 },
+      { name: "quantity", fieldOptions: { label: "Quantity (at most 10)" }, minOccurs: 0, restriction: { maxInclusive: 10 }, fullWidth: !0 },
+      { name: "tags", fieldOptions: { label: "Tags (at least 2 items)" }, minOccurs: 2, maxOccurs: 4, fullWidth: !0 }
+    ], e = {
+      code: "far too long for five",
+      quantity: "42",
+      tags: ["only one"]
+    };
+    function l() {
+      h.value?.setFieldValue("code", e.code, d.value);
+    }
+    function r() {
+      h.value?.setValues({ ...e }, d.value);
+    }
+    return (p, s) => (t(), i("div", Ut, [
+      a("div", Dt, [
+        a("button", {
+          type: "button",
+          class: "cursor-pointer bg-gray-200 text-black px-4 py-2 rounded",
+          "data-testid": "set-field-value",
+          onClick: l
+        }, " setFieldValue('code', ...) "),
+        a("button", {
+          type: "button",
+          class: "cursor-pointer bg-gray-200 text-black px-4 py-2 rounded",
+          "data-testid": "set-values",
+          onClick: r
+        }, " setValues({ ... }) "),
+        a("label", Jt, [
+          N(a("input", {
+            "onUpdate:modelValue": s[0] || (s[0] = (f) => d.value = f),
+            type: "checkbox",
+            "data-testid": "toggle-should-validate"
+          }, null, 512), [
+            [D, d.value]
+          ]),
+          s[1] || (s[1] = x(" shouldValidate ", -1))
+        ])
+      ]),
+      R(G, {
+        ref_key: "form",
+        ref: h,
+        metadata: c,
+        "show-debug-state": ""
+      }, null, 512)
+    ]));
+  }
+});
 export {
-  Le as TestFormTemplate,
-  He as arrayTestCase,
-  Qe as childFieldsTestCase,
-  Ye as choiceTestCase,
-  $ as createTestCase,
-  Ge as defaultTestCase,
-  Je as groupTestCase,
-  Xe as individualTestCase
+  oa as KeepValuesOnUnmountTestCase,
+  da as ProgrammaticWritesTestCase,
+  Ft as TestFormTemplate,
+  ci as arrayMaxOccursSampleValues,
+  ri as arrayMaxOccursTestCase,
+  di as arrayOccurrenceSampleValues,
+  oi as arrayOccurrenceTestCase,
+  Yt as arraySampleValues,
+  Qt as arrayTestCase,
+  Fi as attributesSampleValues,
+  Wi as attributesTestCase,
+  ii as childFieldsSampleValues,
+  ti as childFieldsTestCase,
+  wi as choiceDisplayOrderAddedSampleValues,
+  vi as choiceDisplayOrderAddedTestCase,
+  hi as choiceMaxOccursSampleValues,
+  mi as choiceMaxOccursTestCase,
+  pi as choiceOccurrenceSampleValues,
+  ui as choiceOccurrenceTestCase,
+  Xi as choiceOfWizardsSampleValues,
+  Zi as choiceOfWizardsTestCase,
+  Ci as choicePreserveOrderSampleValues,
+  Vi as choicePreserveOrderScalarBranchSampleValues,
+  Ti as choicePreserveOrderScalarBranchTestCase,
+  ki as choicePreserveOrderTestCase,
+  ei as choiceSampleValues,
+  Mt as choiceTestCase,
+  Ai as complexTypeValuePropertySampleValues,
+  $i as complexTypeValuePropertyTestCase,
+  Si as computedPropsSampleValues,
+  _i as computedPropsTestCase,
+  m as createTestCase,
+  Ri as customMessagesSampleValues,
+  zi as customMessagesTestCase,
+  Kt as defaultSampleValues,
+  Ht as defaultTestCase,
+  fi as explicitChoiceSampleValues,
+  bi as explicitChoiceTestCase,
+  xi as explicitRepeatableChoiceSampleValues,
+  yi as explicitRepeatableChoiceTestCase,
+  Xt as groupSampleValues,
+  Zt as groupTestCase,
+  Di as individualSampleValues,
+  Ui as individualTestCase,
+  li as inputTypesSampleValues,
+  ai as inputTypesTestCase,
+  gi as preserveOnSwitchSampleValues,
+  Oi as preserveOnSwitchTestCase,
+  ea as repeatedWizardSampleValues,
+  Mi as repeatedWizardTestCase,
+  si as restrictionsSampleValues,
+  ni as restrictionsTestCase,
+  Ii as showOptionalInsteadOfRequiredSampleValues,
+  Ei as showOptionalInsteadOfRequiredTestCase,
+  qi as validateAfterSubmitTestCase,
+  Pi as validateOnBlurTestCase,
+  Ni as validateOnSubmitOnlyTestCase,
+  Li as validateWhenInErrorTestCase,
+  Bi as validationTimingSampleValues,
+  Yi as wizardCompositePagesSampleValues,
+  Qi as wizardCompositePagesTestCase,
+  sa as wizardDisabledAncestorSampleValues,
+  na as wizardDisabledAncestorTestCase,
+  Lt as wizardForwardJumpSampleValues,
+  ji as wizardForwardJumpTestCase,
+  ia as wizardKeepValuesSampleValues,
+  ta as wizardKeepValuesTestCase,
+  la as wizardOptionalAncestorSampleValues,
+  aa as wizardOptionalAncestorTestCase,
+  Gi as wizardSampleValues,
+  Ji as wizardTestCase,
+  Ki as wizardValidateOnJumpSampleValues,
+  Hi as wizardValidateOnJumpTestCase
 };
 //# sourceMappingURL=examples.es.js.map