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

package/dist/examples.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as q, createElementBlock as i, openBlock as t, normalizeClass as g, createCommentVNode as n, createElementVNode as a, createBlock as _, unref as W, withCtx as k, withDirectives as B, vModelText as G, vModelCheckbox as z, Fragment as V, renderList as A, toDisplayString as o, vModelSelect as j, renderSlot as C, createTextVNode as w, createVNode as E, vShow as H, computed as L, ref as P, withModifiers as K, markRaw as Q, h as Y } from "vue";
-import { e as Z, f as X, u as M, m as ee, _ as te, i as ie } from "./mapEachMetadataItem-Dvf3R5jd.js";
-const ae = {
+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 ae = {
   "stroke-width": "1.5",
   stroke: "currentColor",
   class: "size-3"
-}, le = {
+}, de = {
   key: 1,
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -16,30 +16,30 @@ const ae = {
   "stroke-width": "1.5",
   stroke: "currentColor",
   class: "size-3"
-}, S = /* @__PURE__ */ q({
+}, S = /* @__PURE__ */ E({
   __name: "IconButton",
   props: {
     icon: {},
     color: { default: "blue" }
   },
   emits: ["click"],
-  setup(p) {
-    return (f, c) => (t(), i("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": p.color === "blue",
-        "bg-red-200 hover:bg-red-300": p.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] = (u) => f.$emit("click"))
+      onClick: d[0] || (d[0] = (c) => h.$emit("click"))
     }, [
-      p.icon === "plus" ? (t(), i("svg", ae, [...c[1] || (c[1] = [
+      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)
       ])])) : n("", !0),
-      p.icon === "minus" ? (t(), i("svg", le, [...c[2] || (c[2] = [
+      u.icon === "minus" ? (t(), i("svg", de, [...d[2] || (d[2] = [
         a("path", {
           "stroke-linecap": "round",
           "stroke-linejoin": "round",
@@ -48,598 +48,598 @@ const ae = {
       ])])) : n("", !0)
     ], 2));
   }
-}), ne = ["data-testid", "onClick"], se = { class: "text-sm whitespace-pre-wrap" }, oe = ["data-testid"], de = { class: "grid grid-cols-1 md:grid-cols-2 gap-6" }, re = {
+}), 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"
-}, ce = {
+}, he = {
   key: 1,
   class: "text-sm text-gray-400"
-}, ue = ["data-testid"], pe = {
+}, be = ["data-testid"], fe = {
   key: 0,
   class: "flex gap-2 flex-wrap"
-}, me = ["disabled", "data-testid", "onClick"], he = ["data-testid", "onClick"], be = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, fe = { class: "text-sm whitespace-pre-wrap" }, Oe = ["data-testid"], ge = {
+}, 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"
-}, ye = {
+}, ke = {
   key: 1,
   class: "text-sm text-gray-400"
-}, xe = ["data-testid"], ve = {
+}, Ce = ["data-testid"], Te = {
   key: 0,
   class: "flex gap-2 flex-wrap"
-}, we = ["disabled", "data-testid", "onClick"], ke = ["data-testid", "onClick"], Ce = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, Te = { class: "text-sm whitespace-pre-wrap" }, Se = ["data-testid"], _e = { class: "flex gap-2 items-center" }, Ve = ["data-testid"], We = ["data-testid"], Ae = ["data-testid"], Fe = { class: "grid grid-cols-1 md:grid-cols-2 gap-6" }, $e = { class: "flex flex-col gap-2" }, Be = { class: "flex gap-2 flex-wrap" }, Ne = ["data-testid", "onClick"], Pe = { class: "flex gap-2" }, qe = ["data-testid", "onClick"], Le = ["data-testid", "onClick"], Ee = ["data-testid"], Ie = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, ze = ["data-testid"], Re = ["data-testid"], Ue = ["data-testid"], De = ["data-testid"], Je = ["data-testid"], Ge = ["data-testid"], je = ["data-testid"], He = ["data-testid", "data-current"], Ke = ["data-testid", "data-current"], Qe = ["for"], Ye = {
+}, 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"
-}, Ze = {
+}, tt = {
   key: 1,
   class: "text-sm text-gray-400"
-}, Xe = { class: "text-sm whitespace-pre-wrap" }, Me = ["data-testid"], et = ["for"], tt = {
+}, it = { class: "text-sm whitespace-pre-wrap" }, at = ["data-testid"], lt = ["for"], nt = {
   key: 0,
   class: "text-red-500 dark:text-rose-400"
-}, it = {
+}, st = {
   key: 1,
   class: "text-sm text-gray-400"
-}, at = { class: "flex gap-2 items-center" }, lt = { class: "flex flex-col grow" }, nt = { class: "text-sm whitespace-pre-wrap" }, st = ["data-testid"], ot = {
+}, 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"
-}, dt = {
+}, pt = {
   key: 1,
   class: "text-sm text-gray-400"
-}, rt = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, ct = { class: "text-sm whitespace-pre-wrap" }, ut = ["data-testid"], pt = {
+}, 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"
-}, mt = {
+}, Ot = {
   key: 1,
   class: "text-sm text-gray-400"
-}, ht = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, bt = { class: "text-sm whitespace-pre-wrap" }, ft = ["data-testid"], Ot = ["id", "value", "disabled", "onChange", "onBlur"], gt = ["value"], yt = ["id", "onUpdate:modelValue", "disabled", "onBlur"], xt = ["value"], vt = ["id", "checked", "disabled", "onChange", "onBlur"], wt = ["id", "onUpdate:modelValue", "disabled", "onBlur"], kt = ["id", "onUpdate:modelValue", "disabled", "onBlur"], Ct = ["id", "value", "disabled", "onInput", "onBlur"], $ = "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", Tt = "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", St = /* @__PURE__ */ q({
+}, 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(p) {
-    const f = X();
-    return (c, u) => (t(), _(Z, { "metadata-configuration": W(f) }, {
-      heading: k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: s }, disabled: r, canAddItems: d, addItem: b, canRemoveItems: x, removeItem: y, slotProps: m }) => [
+  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 }])
         }, [
-          s ? (t(), i("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 || r }])
+            class: O(["flex text-xl font-bold gap-2 items-center mb-2", { "text-gray-500": e.disabled || p }])
           }, [
-            w(o(s) + " ", 1),
-            d ? (t(), _(S, {
+            x(o(r) + " ", 1),
+            s ? (t(), W(S, {
               key: 0,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: b
+              onClick: f
             }, null, 8, ["data-testid", "onClick"])) : n("", !0),
-            x ? (t(), _(S, {
+            y ? (t(), W(S, {
               key: 1,
               icon: "minus",
               tabindex: "-1",
               color: "red",
               "data-testid": `${e.path}-remove-button`,
-              onClick: y
+              onClick: b
             }, null, 8, ["data-testid", "onClick"])) : n("", !0),
-            m?.gotoStep ? (t(), i("button", {
+            v?.gotoStep ? (t(), i("button", {
               key: 2,
               type: "button",
               "data-testid": `${e.path}-goto-first-step-button`,
-              onClick: (v) => m.gotoStep(0)
-            }, " back to start ", 8, ne)) : n("", !0)
+              onClick: (V) => v.gotoStep(0)
+            }, " back to start ", 8, re)) : n("", !0)
           ], 2)) : n("", !0),
-          a("pre", se, o(e.description), 1),
+          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`
-          }, o(l.value), 9, oe)) : n("", !0),
-          a("div", de, [
-            C(c.$slots, "default", {
-              level: (m?.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": k(({ fieldMetadata: e, fieldContext: { label: l }, disabled: s, canAddItems: r, addItem: d, slotProps: b }) => [
+      "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: g(["mt-4 flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+          class: O(["mt-4 flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
           l ? (t(), i("h3", {
             key: 0,
-            class: g(["flex text-xl font-bold gap-2 items-center", { "text-gray-500": e.disabled || s }])
+            class: O(["flex text-xl font-bold gap-2 items-center", { "text-gray-500": e.disabled || r }])
           }, [
-            w(o(l) + " ", 1),
-            r ? (t(), _(S, {
+            x(o(l) + " ", 1),
+            p ? (t(), W(S, {
               key: 0,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: d
+              onClick: s
             }, null, 8, ["data-testid", "onClick"])) : n("", !0)
           ], 2)) : n("", !0),
-          C(c.$slots, "default", {
+          T(d.$slots, "default", {
             hideLabel: !0,
-            level: (b?.level ?? 0) + 1
+            level: (f?.level ?? 0) + 1
           })
         ], 2))
       ]),
-      "default-choice": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: s }, disabled: r, required: d, slotProps: b, settings: { showOptionalInsteadOfRequired: x }, addChoiceOccurrence: y, removeChoiceOccurrence: m, canAddChoiceOccurrence: v, usedChoiceOccurrences: T }) => [
+      "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 }])
         }, [
           a("span", {
-            class: g(["flex gap-2 items-center", { "text-gray-500": r }])
+            class: O(["flex gap-2 items-center", { "text-gray-500": p }])
           }, [
-            w(o(s) + " ", 1),
-            d && !x ? (t(), i("span", re, "*")) : n("", !0),
-            !d && x ? (t(), i("span", ce, "(optional)")) : n("", !0)
+            x(o(r) + " ", 1),
+            s && !y ? (t(), i("span", me, "*")) : n("", !0),
+            !s && y ? (t(), i("span", he, "(optional)")) : n("", !0)
           ], 2),
           a("div", null, [
-            u[0] || (u[0] = w("Used choice occurrences: ", -1)),
+            c[0] || (c[0] = x("Used choice occurrences: ", -1)),
             a("span", {
               "data-testid": `${e.path}-used-choice-occurrences`
-            }, o(T), 9, ue)
+            }, o(_), 9, be)
           ]),
-          e.choice?.length ? (t(), i("div", pe, [
-            (t(!0), i(V, null, A(e.choice, (O) => (t(), i("button", {
-              key: `${O.name}-add`,
+          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: g($),
-              disabled: !v(O.name),
-              "data-testid": `${e.path}.${O.name}-add-choice-button`,
-              onClick: (F) => y(O.name)
-            }, " Add " + o(O.name), 9, me))), 128)),
-            (t(!0), i(V, null, A(e.choice, (O) => (t(), i("button", {
-              key: `${O.name}-remove`,
+              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: g($),
-              "data-testid": `${e.path}.${O.name}-remove-choice-button`,
-              onClick: (F) => m(O.name)
-            }, " Remove " + o(O.name), 9, he))), 128))
+              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", be, [
-            C(c.$slots, "default", {
-              level: (b?.level ?? 0) + 1,
+          a("div", ye, [
+            T(d.$slots, "default", {
+              level: (f?.level ?? 0) + 1,
               belowChoiceField: !0
             })
           ]),
-          a("pre", fe, o(e.description), 1),
+          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, Oe)) : n("", !0)
+          }, o(l.value), 9, ve)) : n("", !0)
         ], 2))
       ]),
-      "default-choice-array": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: s }, disabled: r, required: d, slotProps: b, settings: { showOptionalInsteadOfRequired: x }, addChoiceOccurrence: y, removeChoiceOccurrence: m, canAddChoiceOccurrence: v, usedChoiceOccurrences: T }) => [
+      "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: 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 }])
         }, [
           a("span", {
-            class: g(["flex gap-2 items-center", { "text-gray-500": r }])
+            class: O(["flex gap-2 items-center", { "text-gray-500": p }])
           }, [
-            w(o(s) + " ", 1),
-            d && !x ? (t(), i("span", ge, "*")) : n("", !0),
-            !d && x ? (t(), i("span", ye, "(optional)")) : n("", !0)
+            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, [
-            u[1] || (u[1] = w("Used choice occurrences: ", -1)),
+            c[1] || (c[1] = x("Used choice occurrences: ", -1)),
             a("span", {
               "data-testid": `${e.path}-used-choice-occurrences`
-            }, o(T), 9, xe)
+            }, o(_), 9, Ce)
           ]),
-          e.choice?.length ? (t(), i("div", ve, [
-            (t(!0), i(V, null, A(e.choice, (O) => (t(), i("button", {
-              key: `${O.name}-add`,
+          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: g($),
-              disabled: !v(O.name),
-              "data-testid": `${e.path}.${O.name}-add-choice-button`,
-              onClick: (F) => y(O.name)
-            }, " Add " + o(O.name), 9, we))), 128)),
-            (t(!0), i(V, null, A(e.choice, (O) => (t(), i("button", {
-              key: `${O.name}-remove`,
+              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: g($),
-              "data-testid": `${e.path}.${O.name}-remove-choice-button`,
-              onClick: (F) => m(O.name)
-            }, " Remove " + o(O.name), 9, ke))), 128))
+              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", Ce, [
-            C(c.$slots, "default", {
-              level: (b?.level ?? 0) + 1,
+          a("div", Se, [
+            T(d.$slots, "default", {
+              level: (f?.level ?? 0) + 1,
               belowChoiceField: !0
             })
           ]),
-          a("pre", Te, o(e.description), 1),
+          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`
-          }, o(l.value), 9, Se)) : n("", !0)
+          }, o(l.value), 9, Fe)) : n("", !0)
         ], 2))
       ]),
-      "default-choice-array-item": k(({ fieldMetadata: e, slotProps: l, branchKey: s, globalIndex: r, insertionOrder: d, canAddItems: b, addItem: x, removeItem: y }) => [
+      "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: g(["flex flex-col gap-2 border-s-2 ps-2", { "md:col-span-2": e.fullWidth }])
+          class: O(["flex flex-col gap-2 border-s-2 ps-2", { "md:col-span-2": e.fullWidth }])
         }, [
-          a("div", _e, [
+          a("div", $e, [
             a("span", {
               "data-testid": `${e.path}-kind-badge`
-            }, o(s), 9, Ve),
-            u[2] || (u[2] = w(" globalIndex: ", -1)),
+            }, o(r), 9, Ae),
+            c[2] || (c[2] = x(" globalIndex: ", -1)),
             a("span", {
               "data-testid": `${e.path}-global-index`
-            }, o(r), 9, We),
-            u[3] || (u[3] = w(" insertionOrder: ", -1)),
-            d !== void 0 ? (t(), i("span", {
+            }, 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(d), 9, Ae)) : n("", !0),
-            b ? (t(), _(S, {
+            }, o(s), 9, Ne)) : n("", !0),
+            f ? (t(), W(S, {
               key: 1,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-choice-button`,
-              onClick: x
+              onClick: y
             }, null, 8, ["data-testid", "onClick"])) : n("", !0),
-            E(S, {
+            R(S, {
               icon: "minus",
               tabindex: "-1",
               color: "red",
               "data-testid": `${e.path}-remove-choice-button`,
-              onClick: y
+              onClick: b
             }, null, 8, ["data-testid", "onClick"])
           ]),
-          a("div", Fe, [
-            C(c.$slots, "default", {
+          a("div", Pe, [
+            T(d.$slots, "default", {
               level: (l?.level ?? 0) + 1
             })
           ])
         ], 2))
       ]),
-      "default-wizard": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: s }, pages: r, currentStepIndex: d, pageCount: b, isFirst: x, isLast: y, isValidating: m, wizardConfig: v, next: T, prev: O, gotoStep: F, slotProps: J }) => [
-        a("div", $e, [
-          a("span", null, o(s), 1),
-          a("div", Be, [
-            (t(!0), i(V, null, A(r, (R, U) => (t(), i("button", {
-              key: R.path,
+      "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: g($),
-              "data-testid": `${e.path}-goto-${U}-button`,
-              onClick: (Et) => F(U)
-            }, o(R.name), 9, Ne))), 128))
+              class: O(q),
+              "data-testid": `${e.path}-goto-${C}-button`,
+              onClick: (z) => B(C)
+            }, o(w.name), 9, Ee))), 128))
           ]),
-          a("div", Pe, [
+          a("div", Ie, [
             a("button", {
               type: "button",
-              class: g($),
+              class: O(q),
               "data-testid": `${e.path}-prev-button`,
-              onClick: O
-            }, " Previous ", 8, qe),
+              onClick: g
+            }, " Previous ", 8, ze),
             a("button", {
               type: "button",
-              class: g(Tt),
+              class: O(Wt),
               "data-testid": `${e.path}-next-button`,
-              onClick: T
-            }, " Next ", 8, Le)
+              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, Ee)) : n("", !0),
-          a("div", Ie, [
-            C(c.$slots, "default", {
-              level: (J?.level ?? 0) + 1
+          }, o(l.value), 9, Ue)) : n("", !0),
+          a("div", De, [
+            T(d.$slots, "default", {
+              level: (P?.level ?? 0) + 1
             })
           ]),
           a("div", null, [
-            u[4] || (u[4] = w("currentStepIndex: ", -1)),
+            c[4] || (c[4] = x("currentStepIndex: ", -1)),
             a("span", {
               "data-testid": `${e.path}-currentStepIndex`
-            }, o(d), 9, ze)
+            }, o(s), 9, Je)
           ]),
           a("div", null, [
-            u[5] || (u[5] = w("pageCount: ", -1)),
+            c[5] || (c[5] = x("pageCount: ", -1)),
             a("span", {
               "data-testid": `${e.path}-pageCount`
-            }, o(b), 9, Re)
+            }, o(f), 9, Ge)
           ]),
           a("div", null, [
-            u[6] || (u[6] = w("isFirst: ", -1)),
+            c[6] || (c[6] = x("isFirst: ", -1)),
             a("span", {
               "data-testid": `${e.path}-isFirst`
-            }, o(x), 9, Ue)
+            }, o(y), 9, je)
           ]),
           a("div", null, [
-            u[7] || (u[7] = w("isLast: ", -1)),
+            c[7] || (c[7] = x("isLast: ", -1)),
             a("span", {
               "data-testid": `${e.path}-isLast`
-            }, o(y), 9, De)
+            }, o(b), 9, He)
           ]),
           a("div", null, [
-            u[8] || (u[8] = w("isValidating: ", -1)),
+            c[8] || (c[8] = x("isValidating: ", -1)),
             a("span", {
               "data-testid": `${e.path}-isValidating`
-            }, o(m), 9, Je)
+            }, o(v), 9, Ke)
           ]),
           a("div", null, [
-            u[9] || (u[9] = w("allowForwardJump: ", -1)),
+            c[9] || (c[9] = x("allowForwardJump: ", -1)),
             a("span", {
               "data-testid": `${e.path}-wizardConfig-allowForwardJump`
-            }, o(v.allowForwardJump), 9, Ge)
+            }, o(V.allowForwardJump), 9, Qe)
           ]),
           a("div", null, [
-            u[10] || (u[10] = w("validateOnJump: ", -1)),
+            c[10] || (c[10] = x("validateOnJump: ", -1)),
             a("span", {
               "data-testid": `${e.path}-wizardConfig-validateOnJump`
-            }, o(v.validateOnJump), 9, je)
+            }, o(V.validateOnJump), 9, Ye)
           ])
         ])
       ]),
-      "default-wizard-page": k(({ fieldMetadata: e, isCurrent: l, gotoStep: s, slotProps: r, settings: { wizardPageUseVIf: d } }) => [
-        d ? l ? (t(), i("div", {
+      "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
         }, [
-          C(c.$slots, "default", {
-            gotoStep: s,
-            level: r?.level
+          T(d.$slots, "default", {
+            gotoStep: r,
+            level: p?.level
           })
-        ], 8, Ke)) : n("", !0) : B((t(), i("div", {
+        ], 8, Xe)) : n("", !0) : N((t(), i("div", {
           key: 0,
           "data-testid": `${e.path}-page`,
           "data-current": l
         }, [
-          C(c.$slots, "default", {
-            gotoStep: s,
-            level: r?.level
+          T(d.$slots, "default", {
+            gotoStep: r,
+            level: p?.level
           })
-        ], 8, He)), [
-          [H, l]
+        ], 8, Ze)), [
+          [Y, l]
         ])
       ]),
-      "default-array": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: s }, disabled: r, required: d, canAddItems: b, addItem: x, settings: { showOptionalInsteadOfRequired: y } }) => [
+      "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: 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 }])
         }, [
           a("label", {
             for: `${e.path}[0]`,
-            class: g([{ "text-gray-500": e.disabled || r }, "flex gap-2 items-center"])
+            class: O([{ "text-gray-500": e.disabled || p }, "flex gap-2 items-center"])
           }, [
-            w(o(s) + " ", 1),
-            d && !y ? (t(), i("span", Ye, "*")) : n("", !0),
-            !d && y ? (t(), i("span", Ze, "(optional)")) : n("", !0),
-            b ? (t(), _(S, {
+            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: x
+              onClick: y
             }, null, 8, ["data-testid", "onClick"])) : n("", !0)
-          ], 10, Qe),
-          C(c.$slots, "default", { hideLabel: !0 }),
-          a("pre", Xe, o(e.description), 1),
+          ], 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`
-          }, o(l.value), 9, Me)) : n("", !0)
+          }, o(l.value), 9, at)) : n("", !0)
         ], 2))
       ]),
-      default: k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: s }, disabled: r, required: d, canRemoveItems: b, removeItem: x, slotProps: y, settings: { showOptionalInsteadOfRequired: m } }) => [
+      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 }])
         }, [
-          y?.hideLabel ? n("", !0) : (t(), i("label", {
+          b?.hideLabel ? n("", !0) : (t(), i("label", {
             key: 0,
             for: e.path,
-            class: g([{ "text-gray-500": e.disabled || r }, "flex gap-1 items-center"])
+            class: O([{ "text-gray-500": e.disabled || p }, "flex gap-1 items-center"])
           }, [
-            w(o(s) + " ", 1),
-            d && !m ? (t(), i("span", tt, "*")) : n("", !0),
-            !d && m ? (t(), i("span", it, "(optional)")) : n("", !0)
-          ], 10, et)),
-          a("div", at, [
-            a("div", lt, [
-              C(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")
             ]),
-            E(S, {
-              class: g({ invisible: !b }),
+            R(S, {
+              class: O({ invisible: !f }),
               icon: "minus",
               tabindex: "-1",
               color: "red",
               "data-testid": `${e.path}-remove-button`,
-              onClick: x
+              onClick: y
             }, null, 8, ["class", "data-testid", "onClick"])
           ]),
-          a("pre", nt, o(e.description), 1),
+          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`
-          }, o(l.value), 9, st)) : n("", !0)
+          }, o(l.value), 9, ct)) : n("", !0)
         ], 2)),
-        C(c.$slots, "attributes")
+        T(d.$slots, "attributes")
       ]),
-      "group-array": k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: s }, disabled: r, required: d, canAddItems: b, addItem: x, slotProps: y, settings: { showOptionalInsteadOfRequired: m } }) => [
-        e.hidden ? (t(), i(V, { key: 0 }, [], 64)) : y?.belowChoiceField ? (t(), i("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 })
         }, [
           a("span", {
-            class: g(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || r }])
+            class: O(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || p }])
           }, [
-            w(o(s) + " ", 1),
-            d && !m ? (t(), i("span", ot, "*")) : n("", !0),
-            !d && m ? (t(), i("span", dt, "(optional)")) : n("", !0),
-            b ? (t(), _(S, {
+            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: x
+              onClick: y
             }, null, 8, ["data-testid", "onClick"])) : n("", !0)
           ], 2),
-          a("div", rt, [
-            C(c.$slots, "default", {
-              level: (y?.level ?? 0) + 1
+          a("div", mt, [
+            T(d.$slots, "default", {
+              level: (b?.level ?? 0) + 1
             })
           ]),
-          a("pre", ct, o(e.description), 1),
+          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`
-          }, o(l.value), 9, ut)) : n("", !0)
-        ], 2)) : C(c.$slots, "default", { key: 2 })
+          }, o(l.value), 9, bt)) : n("", !0)
+        ], 2)) : T(d.$slots, "default", {}, void 0, void 0, 2)
       ]),
-      group: k(({ fieldMetadata: e, fieldContext: { errorMessage: l, label: s }, disabled: r, required: d, canAddItems: b, canRemoveItems: x, addItem: y, removeItem: m, slotProps: v, settings: { showOptionalInsteadOfRequired: T } }) => [
+      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 })
         }, [
-          v?.hideLabel ? n("", !0) : (t(), i("span", {
+          V?.hideLabel ? n("", !0) : (t(), i("span", {
             key: 0,
-            class: g(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || r }])
+            class: O(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || p }])
           }, [
-            w(o(s) + " ", 1),
-            d && !T ? (t(), i("span", pt, "*")) : n("", !0),
-            !d && T ? (t(), i("span", mt, "(optional)")) : n("", !0),
-            b ? (t(), _(S, {
+            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: y
+              onClick: b
             }, null, 8, ["data-testid", "onClick"])) : n("", !0),
-            x ? (t(), _(S, {
+            y ? (t(), W(S, {
               key: 3,
               icon: "minus",
               tabindex: "-1",
               "data-testid": `${e.path}-remove-button`,
               color: "red",
-              onClick: m
+              onClick: v
             }, null, 8, ["data-testid", "onClick"])) : n("", !0)
           ], 2)),
-          a("div", ht, [
-            C(c.$slots, "default", {
-              level: (v?.level ?? 0) + 1
+          a("div", gt, [
+            T(d.$slots, "default", {
+              level: (V?.level ?? 0) + 1
             })
           ]),
-          a("pre", bt, o(e.description), 1),
+          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`
-          }, o(l.value), 9, ft)) : n("", !0)
+          }, o(l.value), 9, xt)) : n("", !0)
         ], 2)),
-        C(c.$slots, "attributes")
+        T(d.$slots, "attributes")
       ]),
-      "select-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: s, handleChange: r }, disabled: d }) => [
+      "select-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r, handleChange: p }, disabled: s }) => [
         a("select", {
           id: e.path,
           value: l.value,
-          disabled: e.disabled || d,
+          disabled: e.disabled || s,
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onChange: r,
-          onBlur: s
+          onChange: p,
+          onBlur: r
         }, [
-          (t(!0), i(V, null, A(e.options, ({ key: b, value: x }) => (t(), i("option", {
-            key: b,
-            value: b
-          }, o(x), 9, gt))), 128))
-        ], 40, Ot)
+          (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": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: s }, disabled: r }) => [
-        B(a("select", {
+      "selectBoundByVModel-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r }, disabled: p }) => [
+        N(a("select", {
           id: e.path,
-          "onUpdate:modelValue": (d) => l.value = d,
-          disabled: e.disabled || r,
+          "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: s
+          onBlur: r
         }, [
-          (t(!0), i(V, null, A(e.options, ({ key: d, value: b }) => (t(), i("option", {
-            key: d,
-            value: d
-          }, o(b), 9, xt))), 128))
-        ], 40, yt), [
-          [j, l.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": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: s, handleChange: r }, disabled: d }) => [
+      "checkbox-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r, handleChange: p }, disabled: s }) => [
         a("input", {
           id: e.path,
           checked: l.value,
-          disabled: e.disabled || d,
+          disabled: e.disabled || s,
           type: "checkbox",
           class: "h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onChange: (b) => r(b.target.checked),
-          onBlur: s
-        }, null, 40, vt)
+          onChange: (f) => p(f.target.checked),
+          onBlur: r
+        }, null, 40, Tt)
       ]),
-      "checkboxBoundByVModel-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: s }, disabled: r }) => [
-        B(a("input", {
+      "checkboxBoundByVModel-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r }, disabled: p }) => [
+        N(a("input", {
           id: e.path,
-          "onUpdate:modelValue": (d) => l.value = d,
-          disabled: e.disabled || r,
+          "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: s
-        }, null, 40, wt), [
-          [z, l.value]
+          onBlur: r
+        }, null, 40, Vt), [
+          [D, l.value]
         ])
       ]),
-      "textBoundByVModel-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: s }, disabled: r }) => [
-        B(a("input", {
+      "textBoundByVModel-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r }, disabled: p }) => [
+        N(a("input", {
           id: e.path,
-          "onUpdate:modelValue": (d) => l.value = d,
-          disabled: e.disabled || r,
+          "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: s
-        }, null, 40, kt), [
-          [G, l.value]
+          onBlur: r
+        }, null, 40, _t), [
+          [K, l.value]
         ])
       ]),
-      "default-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: s, handleChange: r }, disabled: d }) => [
+      "default-input": k(({ fieldMetadata: e, fieldContext: { value: l, handleBlur: r, handleChange: p }, disabled: s }) => [
         a("input", {
           id: e.path,
           value: l.value,
-          disabled: e.disabled || d,
+          disabled: e.disabled || s,
           type: "text",
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onInput: r,
-          onBlur: s
-        }, null, 40, Ct)
+          onInput: p,
+          onBlur: r
+        }, null, 40, St)
       ]),
       _: 3
     }, 8, ["metadata-configuration"]));
   }
-}), _t = { class: "flex justify-end gap-2" }, Vt = {
+}), $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"
-}, Wt = {
+}, Bt = {
   key: 0,
   "data-testid": "errors",
   class: "col-12 text-red-600"
-}, At = ["innerHTML"], Ft = {
+}, Nt = ["innerHTML"], Pt = {
   key: 1,
   "data-testid": "isSubmitted"
-}, $t = {
+}, qt = {
   key: 2,
   class: "bg-gray-100 p-4 rounded-lg text-sm overflow-auto"
-}, D = /* @__PURE__ */ q({
+}, G = /* @__PURE__ */ E({
   __name: "TestForm",
   props: {
     metadata: {},
@@ -650,19 +650,19 @@ const ae = {
     initialValues: {},
     keepValuesOnUnmount: { type: Boolean }
   },
-  setup(p) {
-    const { values: f, handleSubmit: c, errors: u, meta: e } = M({
-      initialValues: p.initialValues,
+  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: L(() => p.keepValuesOnUnmount)
-    }), l = P(), s = P(p.initialEdit), r = P(!1), d = L(() => p.metadata?.map((y) => ee(y, (m) => (m.computedProps = m.computedProps ?? [], m.computedProps.push((v) => {
-      s.value || (v.disabled = !0);
-    }), p.hideFieldsWithoutValue && (m.computedProps.push((v, T) => {
-      !s.value && !ie(T.value) && (v.hidden = !0);
-    }), m.computedProps.push((v, T, O) => {
-      !s.value && O.value.length > 0 && O.value.every((F) => F.hidden) && (v.hidden = !0);
-    })), m)))), b = L(() => ({
+      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",
@@ -684,73 +684,91 @@ const ae = {
         fractionDigits: "{field} may have at most {digits} decimal place(s)",
         totalDigits: "{field} may have at most {digits} significant digit(s)"
       },
-      ...p.settings ?? {}
+      ...u.settings ?? {}
     }));
-    function x(y) {
+    function g() {
+      p(u.metadata[0].name);
+    }
+    h({ setFieldValue: s, setValues: f });
+    function B(P) {
       c(
-        (m) => {
-          r.value = !0, s.value = !1;
+        (w) => {
+          v.value = !0, b.value = !1;
         },
-        ({ errors: m }) => {
-          r.value = !1;
+        ({ errors: w }) => {
+          v.value = !1;
         }
-      )(y);
+      )(P);
     }
-    return (y, m) => (t(), i("form", {
-      onSubmit: K(x, ["prevent"])
+    return (P, w) => (t(), i("form", {
+      onSubmit: Z(B, ["prevent"])
     }, [
-      a("div", _t, [
-        s.value ? n("", !0) : (t(), i("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: m[0] || (m[0] = (v) => s.value = !0)
+          onClick: w[0] || (w[0] = (C) => b.value = !0)
         }, " Edit ")),
-        s.value ? (t(), i("button", Vt, " Submit ")) : n("", !0),
-        s.value ? (t(), i("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: m[1] || (m[1] = (v) => s.value = !1)
-        }, " Cancel ")) : n("", !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(W(u)).length ? (t(), i("div", Wt, [
-        m[3] || (m[3] = w(" Errors: ", -1)),
+      Object.values(F(e)).length ? (t(), i("div", Bt, [
+        w[4] || (w[4] = x(" Errors: ", -1)),
         a("ul", null, [
-          (t(!0), i(V, null, A(W(u), (v, T) => (t(), i("li", { key: T }, [
-            a("span", { innerHTML: v }, null, 8, At)
+          (t(!0), i($, null, A(F(e), (C, z) => (t(), i("li", { key: z }, [
+            a("span", { innerHTML: C }, null, 8, Nt)
           ]))), 128))
         ])
       ])) : n("", !0),
-      E(te, {
-        template: St,
-        metadata: d.value,
-        settings: b.value,
-        "onUpdate:modelValue": m[2] || (m[2] = (v) => l.value = v)
+      R(ne, {
+        template: Ft,
+        metadata: V.value,
+        settings: _.value,
+        "onUpdate:modelValue": w[3] || (w[3] = (C) => y.value = C)
       }, null, 8, ["metadata", "settings"]),
-      r.value ? (t(), i("span", Ft)) : n("", !0),
-      p.showDebugState ? (t(), i("pre", $t, "IsDirty: " + o(W(e).dirty) + `
-Pending: ` + o(W(e).pending) + `
-Touched: ` + o(W(e).touched) + `
-Valid: ` + o(W(e).valid) + `
-Submitted: ` + o(r.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:
-` + o(JSON.stringify(W(f), null, 2)) + `
+` + o(JSON.stringify(F(d), null, 2)) + `
     `, 1)) : n("", !0)
     ], 32));
   }
-}), Rt = h([{
+}), Ht = m([{
   name: "text",
   type: "text",
   fieldOptions: { label: "Text Input" },
   path: "with.custom.structure",
   restriction: { maxLength: 10 }
-}]), Ut = {
+}]), Kt = {
   with: { custom: { structure: "Order A204" } }
-}, Dt = h([{
+}, Qt = m([{
   name: "arrays",
   fieldOptions: { label: "Array Fields" },
   type: "heading",
@@ -768,7 +786,7 @@ Submitted: ` + o(r.value) + `
       { name: "flag", fieldOptions: { label: "Nested field 3" }, type: "checkbox" }
     ] }
   ]
-}]), Jt = {
+}]), Yt = {
   arrays: {
     optionalItems: ["First note"],
     requiredItems: ["Alpha", "Beta"],
@@ -778,7 +796,7 @@ Submitted: ` + o(r.value) + `
       { note: "Section two", category: "option1", flag: !1 }
     ]
   }
-}, Gt = h([{
+}, Zt = m([{
   name: "groups",
   fieldOptions: { label: "Grouped Fields" },
   type: "heading",
@@ -808,7 +826,7 @@ You can test it by filling in one of the fields.`, children: [
       { name: "second", fieldOptions: { label: "Required Nested field 2" } }
     ] }
   ]
-}]), jt = {
+}]), Xt = {
   groups: {
     requiredGroup: { first: "Ada", second: "Lovelace" },
     optionalGroup: { first: "Grace", second: "Hopper" }
@@ -822,7 +840,7 @@ You can test it by filling in one of the fields.`, children: [
       { first: "Barbara", second: "Liskov" }
     ]
   }
-}, Ht = h([
+}, Mt = m([
   {
     name: "simpleChoiceSection",
     fieldOptions: { label: "Choice Fields (minOccurs 1, maxOccurs 1)" },
@@ -862,7 +880,7 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), Kt = {
+]), ei = {
   // Only one branch per choice carries a value, honouring the mutually exclusive rule.
   simpleChoiceSection: { contactMethod: { primary: "Picked the first branch" } },
   groupedChoiceSection: {
@@ -871,7 +889,7 @@ You can test it by filling in one of the fields.`, children: [
   arrayChoiceSection: {
     pick: { optionA: ["First entry", "Second entry"] }
   }
-}, Qt = h([
+}, ti = m([
   {
     fieldOptions: { label: "Personal Info" },
     type: "heading",
@@ -904,7 +922,7 @@ You can test it by filling in one of the fields.`, children: [
       lastName: "Smit"
     }
   }
-}), Yt = {
+}), ii = {
   person: {
     firstName: "Ada",
     lastName: "Lovelace",
@@ -915,7 +933,7 @@ You can test it by filling in one of the fields.`, children: [
     city: "London",
     country: "United Kingdom"
   }
-}, Zt = h([
+}, ai = m([
   {
     name: "inputs",
     fieldOptions: { label: "All Input Types" },
@@ -952,7 +970,7 @@ You can test it by filling in one of the fields.`, children: [
       { name: "describedField", minOccurs: 0, description: "A per-field description rendered below the input.", fieldOptions: { label: "Field with description" } }
     ]
   }
-]), Xt = {
+]), li = {
   inputs: {
     text: "Hello world",
     textBoundByVModel: "Two-way bound",
@@ -968,7 +986,7 @@ You can test it by filling in one of the fields.`, children: [
     fullWidthField: "Spans the full width",
     describedField: "Described value"
   }
-}, Mt = h([
+}, ni = m([
   {
     name: "strings",
     fieldOptions: { label: "String Restrictions" },
@@ -1003,10 +1021,10 @@ You can test it by filling in one of the fields.`, children: [
     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: (p) => !p || String(p).startsWith("A") || 'Value must start with "A"', description: "Custom vee-validate function via the validation property.", fieldOptions: { label: "Custom validation function" } }
+      { 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" } }
     ]
   }
-]), ei = {
+]), si = {
   // Every value here satisfies its restriction, so loading the sample form validates cleanly.
   strings: {
     minLength: "abcd",
@@ -1029,7 +1047,7 @@ You can test it by filling in one of the fields.`, children: [
     requiredWithRestriction: "valid",
     customValidation: "Apple"
   }
-}, ti = h([
+}, oi = m([
   {
     name: "occurrences",
     fieldOptions: { label: "Occurrence Variants" },
@@ -1053,7 +1071,7 @@ You can test it by filling in one of the fields.`, children: [
       { name: "vModelTexts", type: "textBoundByVModel", minOccurs: 0, maxOccurs: 3, fieldOptions: { label: "v-model text array (max 3)" } }
     ]
   }
-]), ii = {
+]), di = {
   occurrences: {
     manualFirstItem: ["Added by hand"],
     prefilledToMin: ["First", "Second"],
@@ -1064,7 +1082,7 @@ You can test it by filling in one of the fields.`, children: [
     checkboxes: [!0, !1],
     vModelTexts: ["Alpha", "Beta"]
   }
-}, ai = h([
+}, ri = m([
   {
     name: "overLimit",
     fieldOptions: { label: "Over-limit Arrays (loaded from initialValues)" },
@@ -1074,12 +1092,12 @@ You can test it by filling in one of the fields.`, children: [
       { 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." }
     ]
   }
-]), li = {
+]), ci = {
   overLimit: {
     requiredItems: ["First", "Second", "Third"],
     optionalItems: ["One", "Two", "Three"]
   }
-}, ni = h([
+}, ui = m([
   {
     name: "optionalChoice",
     fieldOptions: { label: "Optional Choice (minOccurs 0)" },
@@ -1137,7 +1155,7 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), si = {
+]), 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"] } },
@@ -1145,7 +1163,7 @@ You can test it by filling in one of the fields.`, children: [
   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"] } }
-}, oi = h([
+}, mi = m([
   {
     name: "tooManyBranches",
     fieldOptions: { label: "Choice Over maxOccurs (auto mode, maxOccurs 1)" },
@@ -1178,11 +1196,11 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), di = {
+]), 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"] } }
-}, ri = h([
+}, bi = m([
   {
     name: "explicitSection",
     fieldOptions: { label: "Explicit Choice (selection-first)" },
@@ -1199,10 +1217,10 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), ci = {
+]), fi = {
   // A loaded value auto-selects its branch, even though nothing was clicked.
   explicitSection: { contact: { email: { address: "jane@example.com" } } }
-}, ui = h([
+}, Oi = m([
   {
     name: "preserveSection",
     fieldOptions: { label: "Explicit Choice With preserveOnSwitch" },
@@ -1218,9 +1236,9 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), pi = {
+]), gi = {
   preserveSection: { contact: { email: { address: "restore@example.com" } } }
-}, mi = h([
+}, yi = m([
   {
     name: "integrationsSection",
     fieldOptions: { label: "Explicit Repeatable Choice (maxOccurs 5)" },
@@ -1238,7 +1256,7 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), hi = {
+]), xi = {
   // A mix of both kinds; each branch is its own array of occurrences.
   integrationsSection: {
     integrations: {
@@ -1251,7 +1269,7 @@ You can test it by filling in one of the fields.`, children: [
       ]
     }
   }
-}, bi = h([
+}, vi = m([
   {
     name: "timelineSection",
     fieldOptions: { label: "Repeatable Explicit Choice (displayOrder: added)" },
@@ -1268,7 +1286,7 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), fi = {
+]), 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: {
@@ -1277,7 +1295,7 @@ You can test it by filling in one of the fields.`, children: [
       milestone: [{ title: "Loaded milestone", owner: "Ada" }]
     }
   }
-}, Oi = h([
+}, ki = m([
   {
     name: "stepsSection",
     fieldOptions: { label: "Repeatable Explicit Choice (preserveOrder + displayOrder: added)" },
@@ -1293,7 +1311,7 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), gi = {
+]), 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: {
@@ -1302,7 +1320,7 @@ You can test it by filling in one of the fields.`, children: [
       automated: [{ script: "deploy.sh" }]
     }
   }
-}, yi = h([
+}, Ti = m([
   {
     name: "labelsSection",
     fieldOptions: { label: "preserveOrder With a Scalar-Leaf Branch (per-branch no-op)" },
@@ -1316,33 +1334,33 @@ You can test it by filling in one of the fields.`, children: [
       ] }
     ]
   }
-]), xi = {
+]), Vi = {
   labelsSection: {
     items: {
       labelled: [{ label: "Has an order field" }],
       tag: ["plain-tag-no-order"]
     }
   }
-}, vi = h([
+}, _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: [
-        (p, f) => {
-          const c = typeof f.value == "string" ? f.value.length : 0;
-          p.description = `${10 - c} character(s) remaining`;
+        (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: [
-        (p, f) => {
-          f.value === "hide" && (p.hidden = !0);
+        (u, h) => {
+          h.value === "hide" && (u.hidden = !0);
         }
       ] },
       { name: "selfDisabling", minOccurs: 0, fieldOptions: { label: 'Type "lock" to disable me' }, computedProps: [
-        (p, f) => {
-          f.value === "lock" && (p.disabled = !0);
+        (u, h) => {
+          h.value === "lock" && (u.disabled = !0);
         }
       ] }
     ]
@@ -1353,9 +1371,9 @@ You can test it by filling in one of the fields.`, children: [
     type: "heading",
     computeOnChildValueChange: !0,
     computedProps: [
-      (p, f) => {
-        const u = Object.values(f.value ?? {}).filter((e) => e != null && e !== "").length;
-        p.description = `${u} of 3 fields filled in`;
+      (u, h) => {
+        const c = Object.values(h.value ?? {}).filter((e) => e != null && e !== "").length;
+        u.description = `${c} of 3 fields filled in`;
       }
     ],
     children: [
@@ -1370,29 +1388,29 @@ You can test it by filling in one of the fields.`, children: [
     type: "heading",
     description: 'Each child hides itself when its value is "hide"; once every child is hidden the parent heading hides too.',
     computedProps: [
-      (p, f, c) => {
-        c.value.length > 0 && c.value.every((u) => u.hidden) && (p.hidden = !0);
+      (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: [
-        (p, f) => {
-          f.value === "hide" && (p.hidden = !0);
+        (u, h) => {
+          h.value === "hide" && (u.hidden = !0);
         }
       ] },
       { name: "childB", minOccurs: 0, fieldOptions: { label: 'Child B (type "hide")' }, computedProps: [
-        (p, f) => {
-          f.value === "hide" && (p.hidden = !0);
+        (u, h) => {
+          h.value === "hide" && (u.hidden = !0);
         }
       ] }
     ]
   }
-]), wi = {
+]), 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" }
-}, ki = h([
+}, Wi = m([
   {
     name: "attributes",
     fieldOptions: { label: "Attributes" },
@@ -1418,7 +1436,7 @@ You can test it by filling in one of the fields.`, children: [
       { name: "complexValue", minOccurs: 0, fullWidth: !0, isComplexType: !0, description: "isComplexType without attributes: the value is stored as { value: ... }.", fieldOptions: { label: "isComplexType" } }
     ]
   }
-]), Ci = {
+]), Fi = {
   attributes: {
     // A complex type stores its value plus each attribute under one object.
     nickname: { value: "Ace", lang: "en" },
@@ -1427,7 +1445,7 @@ You can test it by filling in one of the fields.`, children: [
   complexTypes: {
     complexValue: { value: "Wrapped in { value }" }
   }
-}, Ti = h([
+}, $i = m([
   {
     name: "customValueProp",
     fieldOptions: { label: "Custom complexTypeValueProperty" },
@@ -1441,39 +1459,39 @@ You can test it by filling in one of the fields.`, children: [
   }
 ], {
   complexTypeValueProperty: "val"
-}), Si = {
+}), Ai = {
   // The value lives under "val" (not "value") because of the complexTypeValueProperty setting.
   customValueProp: { title: { val: "Hello world", lang: "en" } }
 };
-function I(p, f) {
-  return h([
+function J(u, h) {
+  return m([
     {
       name: "timing",
       fieldOptions: { label: "Validation Timing" },
       type: "heading",
-      description: p,
+      description: u,
       children: [
         { name: "requiredField", fieldOptions: { label: "Required field" } },
         { name: "maxLengthField", minOccurs: 0, restriction: { maxLength: 5 }, fieldOptions: { label: "maxLength 5" } }
       ]
     }
-  ], f);
+  ], h);
 }
-const _i = {
+const Bi = {
   timing: { requiredField: "Filled in", maxLengthField: "abc" }
-}, Vi = I(
+}, Ni = J(
   "validateOnValueUpdate: false, validateWhenInError: false. Errors only appear on submit and stay unchanged while typing until the next submit.",
   { validateOnValueUpdate: !1, validateWhenInError: !1 }
-), Wi = I(
+), Pi = J(
   "validateOnBlur: true, validateOnValueUpdate: false. Errors appear when leaving a field, not while typing.",
   { validateOnBlur: !0, validateOnValueUpdate: !1 }
-), Ai = I(
+), qi = J(
   "validateOnValueUpdateAfterSubmit: true, validateOnValueUpdate: false. Typing does not validate until the first submit; after that every change validates.",
   { validateOnValueUpdateAfterSubmit: !0, validateOnValueUpdate: !1 }
-), Fi = I(
+), Li = J(
   "validateOnValueUpdate: false, validateWhenInError: true. A field only starts live-validating once it is in error (after a submit).",
   { validateOnValueUpdate: !1, validateWhenInError: !0 }
-), $i = h([
+), Ei = m([
   {
     name: "optionalMarkers",
     fieldOptions: { label: 'Show "(optional)" Instead of "*"' },
@@ -1486,9 +1504,9 @@ const _i = {
   }
 ], {
   showOptionalInsteadOfRequired: !0
-}), Bi = {
+}), Ii = {
   optionalMarkers: { requiredField: "Required value", optionalField: "Optional value" }
-}, Ni = h([
+}, zi = m([
   {
     name: "messages",
     fieldOptions: { label: "Custom Validation Messages" },
@@ -1506,9 +1524,9 @@ const _i = {
     maxLength: "Custom message: {field} must stay under {length} characters",
     minInclusive: "Custom message: {field} must be {min} or higher"
   }
-}), Pi = {
+}), Ri = {
   messages: { requiredField: "Filled in", maxLengthField: "abcd", minInclusiveField: "15" }
-}, qi = h(
+}, Ui = m(
   [{
     name: "items",
     type: "text",
@@ -1522,17 +1540,17 @@ const _i = {
     // validateWhenInError: true,
     // validateOnBlur: true,
   }
-), Li = {
+), 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" }
   ]
-}, N = [
+}, I = [
   { key: "starter", value: "Starter" },
   { key: "growth", value: "Growth" },
   { key: "enterprise", value: "Enterprise" }
-], Ei = h([{
+], Ji = m([{
   name: "onboarding",
   wizard: !0,
   fieldOptions: { label: "Onboarding wizard (backward-only)" },
@@ -1551,7 +1569,7 @@ const _i = {
       type: "heading",
       fieldOptions: { label: "Plan" },
       children: [
-        { name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: N },
+        { name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: I },
         { name: "seats", minOccurs: 0, fieldOptions: { label: "Seats (optional)" } }
       ]
     },
@@ -1564,13 +1582,13 @@ const _i = {
       ]
     }
   ]
-}]), Ii = {
+}]), Gi = {
   onboarding: {
     company: { companyName: "Acme Corp", website: "https://acme.example" },
     plan: { planName: "growth", seats: "25" },
     review: { termsAccepted: !0 }
   }
-}, zi = h([{
+}, ji = m([{
   name: "onboarding",
   wizard: { allowForwardJump: !0, validateOnJump: !1 },
   fieldOptions: { label: "Wizard with forward jumping" },
@@ -1585,7 +1603,7 @@ const _i = {
       name: "plan",
       type: "heading",
       fieldOptions: { label: "Plan" },
-      children: [{ name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: N }]
+      children: [{ name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: I }]
     },
     {
       name: "review",
@@ -1594,13 +1612,13 @@ const _i = {
       children: [{ name: "termsAccepted", type: "checkbox", fieldOptions: { label: "I accept the terms (required)" } }]
     }
   ]
-}]), Bt = {
+}]), Lt = {
   onboarding: {
     company: { companyName: "Acme Corp" },
     plan: { planName: "enterprise" },
     review: { termsAccepted: !0 }
   }
-}, Ri = h([{
+}, Hi = m([{
   name: "onboarding",
   wizard: { allowForwardJump: !0, validateOnJump: !0 },
   fieldOptions: { label: "Wizard with validate-on-jump" },
@@ -1615,7 +1633,7 @@ const _i = {
       name: "plan",
       type: "heading",
       fieldOptions: { label: "Plan" },
-      children: [{ name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: N }]
+      children: [{ name: "planName", type: "select", fieldOptions: { label: "Plan (required)" }, options: I }]
     },
     {
       name: "review",
@@ -1624,7 +1642,7 @@ const _i = {
       children: [{ name: "termsAccepted", type: "checkbox", fieldOptions: { label: "I accept the terms (required)" } }]
     }
   ]
-}]), Ui = Bt, Di = h([{
+}]), Ki = Lt, Qi = m([{
   name: "onboarding",
   wizard: { allowForwardJump: !0 },
   fieldOptions: { label: "Wizard with group / array / choice / summary pages" },
@@ -1669,7 +1687,7 @@ const _i = {
       fieldOptions: { label: "Summary (field-less page)" }
     }
   ]
-}]), Ji = {
+}]), Yi = {
   onboarding: {
     company: { companyName: "Acme Corp" },
     contacts: [
@@ -1678,7 +1696,7 @@ const _i = {
     ],
     launchApproach: { guidedRollout: { accountManager: "Alan Turing" } }
   }
-}, Gi = h([{
+}, Zi = m([{
   name: "setupPath",
   explicitChoiceSelection: !0,
   fullWidth: !0,
@@ -1706,7 +1724,7 @@ const _i = {
           { 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: N }
+          { 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)" } }
@@ -1714,7 +1732,7 @@ const _i = {
       ]
     }
   ]
-}]), ji = {
+}]), Xi = {
   setupPath: {
     guidedSetup: {
       company: { companyName: "Acme Corp" },
@@ -1722,7 +1740,7 @@ const _i = {
       review: { termsAccepted: !0 }
     }
   }
-}, Hi = h([{
+}, Mi = m([{
   name: "teams",
   type: "heading",
   maxOccurs: 3,
@@ -1742,12 +1760,12 @@ const _i = {
       ] }
     ]
   }]
-}]), Ki = {
+}]), ea = {
   teams: [
     { setup: { team: { teamName: "Platform" }, lead: { leadName: "Ada Lovelace" } } },
     { setup: { team: { teamName: "Growth" }, lead: { leadName: "Grace Hopper" } } }
   ]
-}, Qi = h([{
+}, ta = m([{
   name: "onboarding",
   wizard: { allowForwardJump: !0 },
   fieldOptions: { label: "Wizard: v-show vs v-if and keepValuesOnUnmount" },
@@ -1765,12 +1783,12 @@ const _i = {
       children: [{ name: "planName", minOccurs: 1, fieldOptions: { label: "Plan name" }, fullWidth: !0 }]
     }
   ]
-}]), Yi = {
+}]), ia = {
   onboarding: {
     company: { companyName: "Acme Corp" },
     plan: { planName: "Growth" }
   }
-}, Zi = h([{
+}, aa = m([{
   name: "registration",
   type: "heading",
   minOccurs: 0,
@@ -1795,18 +1813,18 @@ const _i = {
         type: "heading",
         fieldOptions: { label: "Plan" },
         children: [
-          { name: "planName", type: "select", fieldOptions: { label: "Plan (required once the section has a value)" }, options: N }
+          { name: "planName", type: "select", fieldOptions: { label: "Plan (required once the section has a value)" }, options: I }
         ]
       }
     ]
   }]
-}]), Xi = {
+}]), la = {
   registration: {
     onboarding: {
       company: { companyName: "Acme Corp" }
     }
   }
-}, Mi = h([{
+}, na = m([{
   name: "archived",
   type: "heading",
   maxOccurs: 0,
@@ -1831,12 +1849,12 @@ const _i = {
         type: "heading",
         fieldOptions: { label: "Plan" },
         children: [
-          { name: "planName", type: "select", fieldOptions: { label: "Plan" }, options: N }
+          { name: "planName", type: "select", fieldOptions: { label: "Plan" }, options: I }
         ]
       }
     ]
   }]
-}]), ea = {
+}]), sa = {
   archived: {
     onboarding: {
       company: { companyName: "Acme Corp", website: "https://acme.example" },
@@ -1844,8 +1862,8 @@ const _i = {
     }
   }
 };
-function h(p, f, c = {}) {
-  return Q(q({
+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: {
@@ -1855,22 +1873,22 @@ function h(p, f, c = {}) {
       settings: { type: Object, default: void 0 },
       keepValuesOnUnmount: { type: Boolean, default: void 0 }
     },
-    setup: (u) => () => Y(D, {
-      metadata: p,
-      settings: u.settings ?? f,
+    setup: (c) => () => M(G, {
+      metadata: u,
+      settings: c.settings ?? h,
       showDebugState: !0,
-      initialValues: u.initialValues ?? c.initialValues,
-      initialEdit: u.initialEdit ?? c.initialEdit,
-      hideFieldsWithoutValue: u.hideFieldsWithoutValue ?? c.hideFieldsWithoutValue,
-      keepValuesOnUnmount: u.keepValuesOnUnmount
+      initialValues: c.initialValues ?? d.initialValues,
+      initialEdit: c.initialEdit ?? d.initialEdit,
+      hideFieldsWithoutValue: c.hideFieldsWithoutValue ?? d.hideFieldsWithoutValue,
+      keepValuesOnUnmount: c.keepValuesOnUnmount
     })
   }));
 }
-const Nt = { class: "flex flex-col gap-4" }, Pt = { class: "flex gap-6 flex-wrap" }, qt = { class: "flex items-center gap-2" }, Lt = { class: "flex items-center gap-2" }, ta = /* @__PURE__ */ q({
+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(p) {
-    const f = P(!0), c = P(!1), u = L(() => [
-      ...f.value ? [{
+  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,
@@ -1890,109 +1908,161 @@ const Nt = { class: "flex flex-col gap-4" }, Pt = { class: "flex gap-6 flex-wrap
       }] : [],
       { name: "note", fieldOptions: { label: "Sibling field (always mounted)" }, minOccurs: 0, fullWidth: !0 }
     ]);
-    return (e, l) => (t(), i("div", Nt, [
-      a("div", Pt, [
-        a("label", qt, [
-          B(a("input", {
-            "onUpdate:modelValue": l[0] || (l[0] = (s) => f.value = s),
+    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), [
-            [z, f.value]
+            [D, h.value]
           ]),
-          l[2] || (l[2] = w(" Show contact field (v-if unmount) ", -1))
+          l[2] || (l[2] = x(" Show contact field (v-if unmount) ", -1))
         ]),
-        a("label", Lt, [
-          B(a("input", {
-            "onUpdate:modelValue": l[1] || (l[1] = (s) => c.value = s),
+        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), [
-            [z, c.value]
+            [D, d.value]
           ]),
-          l[3] || (l[3] = w(" keepValuesOnUnmount ", -1))
+          l[3] || (l[3] = x(" keepValuesOnUnmount ", -1))
         ])
       ]),
-      E(D, {
-        metadata: u.value,
-        "keep-values-on-unmount": c.value,
+      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 {
-  ta as KeepValuesOnUnmountTestCase,
-  St as TestFormTemplate,
-  li as arrayMaxOccursSampleValues,
-  ai as arrayMaxOccursTestCase,
-  ii as arrayOccurrenceSampleValues,
-  ti as arrayOccurrenceTestCase,
-  Jt as arraySampleValues,
-  Dt as arrayTestCase,
-  Ci as attributesSampleValues,
-  ki as attributesTestCase,
-  Yt as childFieldsSampleValues,
-  Qt as childFieldsTestCase,
-  fi as choiceDisplayOrderAddedSampleValues,
-  bi as choiceDisplayOrderAddedTestCase,
-  di as choiceMaxOccursSampleValues,
-  oi as choiceMaxOccursTestCase,
-  si as choiceOccurrenceSampleValues,
-  ni as choiceOccurrenceTestCase,
-  ji as choiceOfWizardsSampleValues,
-  Gi as choiceOfWizardsTestCase,
-  gi as choicePreserveOrderSampleValues,
-  xi as choicePreserveOrderScalarBranchSampleValues,
-  yi as choicePreserveOrderScalarBranchTestCase,
-  Oi as choicePreserveOrderTestCase,
-  Kt as choiceSampleValues,
-  Ht as choiceTestCase,
-  Si as complexTypeValuePropertySampleValues,
-  Ti as complexTypeValuePropertyTestCase,
-  wi as computedPropsSampleValues,
-  vi as computedPropsTestCase,
-  h as createTestCase,
-  Pi as customMessagesSampleValues,
-  Ni as customMessagesTestCase,
-  Ut as defaultSampleValues,
-  Rt as defaultTestCase,
-  ci as explicitChoiceSampleValues,
-  ri as explicitChoiceTestCase,
-  hi as explicitRepeatableChoiceSampleValues,
-  mi as explicitRepeatableChoiceTestCase,
-  jt as groupSampleValues,
-  Gt as groupTestCase,
-  Li as individualSampleValues,
-  qi as individualTestCase,
-  Xt as inputTypesSampleValues,
-  Zt as inputTypesTestCase,
-  pi as preserveOnSwitchSampleValues,
-  ui as preserveOnSwitchTestCase,
-  Ki as repeatedWizardSampleValues,
-  Hi as repeatedWizardTestCase,
-  ei as restrictionsSampleValues,
-  Mt as restrictionsTestCase,
-  Bi as showOptionalInsteadOfRequiredSampleValues,
-  $i as showOptionalInsteadOfRequiredTestCase,
-  Ai as validateAfterSubmitTestCase,
-  Wi as validateOnBlurTestCase,
-  Vi as validateOnSubmitOnlyTestCase,
-  Fi as validateWhenInErrorTestCase,
-  _i as validationTimingSampleValues,
-  Ji as wizardCompositePagesSampleValues,
-  Di as wizardCompositePagesTestCase,
-  ea as wizardDisabledAncestorSampleValues,
-  Mi as wizardDisabledAncestorTestCase,
-  Bt as wizardForwardJumpSampleValues,
-  zi as wizardForwardJumpTestCase,
-  Yi as wizardKeepValuesSampleValues,
-  Qi as wizardKeepValuesTestCase,
-  Xi as wizardOptionalAncestorSampleValues,
-  Zi as wizardOptionalAncestorTestCase,
-  Ii as wizardSampleValues,
-  Ei as wizardTestCase,
-  Ui as wizardValidateOnJumpSampleValues,
-  Ri as wizardValidateOnJumpTestCase
+  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