bank20baht-ui 0.0.2 → 0.0.6

package/dist/components/baht-form.d.ts

@@ -19,6 +19,12 @@ export declare class BahtForm extends BahtElement {
     /** Edits the user made since the host last set `value` (controlled overlay). */
     private edits;
     private errors;
+    /**
+     * One control element per field key, reused across renders. Recreating them
+     * every render (the naive approach) replaces the DOM node on each keystroke,
+     * which drops focus and makes continuous typing impossible.
+     */
+    private controls;
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     private get sortedFields();
     private stateFor;

package/dist/custom-elements.json

@@ -70,6 +70,13 @@
               "privacy": "private",
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "controls",
+              "privacy": "private",
+              "default": "new Map<string, HTMLElement & Record<string, unknown>>()",
+              "description": "One control element per field key, reused across renders. Recreating them\nevery render (the naive approach) replaces the DOM node on each keystroke,\nwhich drops focus and makes continuous typing impossible."
+            },
             {
               "kind": "field",
               "name": "sortedFields",

package/dist/index.js

@@ -1,14 +1,15 @@
-import { defaultValue as Rt, validateField as At, evaluate as Mt } from "./engine.js";
-import { approvalFields as Ps, evalCondition as Ds, evalValueExpr as Cs, readRef as Bs } from "./engine.js";
+import { defaultValue as At, validateField as Tt, evaluate as Kt } from "./engine.js";
+import { approvalFields as Bs, evalCondition as js, evalValueExpr as Es, readRef as ks } from "./engine.js";
 import { B as d, a as dt, b as O, r as W } from "./chunks/baht-toast-1frNyH2A.js";
-import { c as Es, d as Is, e as Ns, i as ks } from "./chunks/baht-toast-1frNyH2A.js";
-import { nothing as h, html as n, svg as Tt } from "lit";
+import { c as Is, d as Ss, e as qs, i as Fs } from "./chunks/baht-toast-1frNyH2A.js";
+import { nothing as h, html as n, svg as Ut } from "lit";
 import { property as l, customElement as p, query as ct, state as f } from "lit/decorators.js";
-import { ifDefined as g } from "lit/directives/if-defined.js";
-var Kt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, ut = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ut(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { live as ut } from "lit/directives/live.js";
+var Vt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, bt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? zt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Kt(e, r, s), s;
+  return a && s && Vt(e, r, s), s;
 };
 let Y = class extends d {
   constructor() {
@@ -24,22 +25,22 @@ let Y = class extends d {
     </span>`;
   }
 };
-ut([
+bt([
   l()
 ], Y.prototype, "tone", 2);
-ut([
+bt([
   l()
 ], Y.prototype, "label", 2);
-ut([
+bt([
   l({ attribute: !1 })
 ], Y.prototype, "dot", 2);
-Y = ut([
+Y = bt([
   p("baht-badge")
 ], Y);
-var Vt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, _t = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? zt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var Ht = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, xt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Jt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Vt(e, r, s), s;
+  return a && s && Ht(e, r, s), s;
 };
 let nt = class extends d {
   constructor() {
@@ -53,21 +54,21 @@ let nt = class extends d {
     return this.variant === "block" ? n`<pre class="baht-code baht-code--block" tabindex="0">${this.code}</pre>` : n`<code class="baht-code">${this.code}</code>`;
   }
 };
-_t([
+xt([
   l()
 ], nt.prototype, "variant", 2);
-_t([
+xt([
   l()
 ], nt.prototype, "code", 2);
-nt = _t([
+nt = xt([
   p("baht-code")
 ], nt);
-var Ht = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, st = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Jt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var Gt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, st = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Wt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Ht(e, r, s), s;
+  return a && s && Gt(e, r, s), s;
 };
-let A = class extends d {
+let M = class extends d {
   constructor() {
     super(...arguments), this.page = 1, this.totalPages = 1, this.variant = "numbered", this.siblings = 1;
   }
@@ -109,23 +110,23 @@ let A = class extends d {
 };
 st([
   l({ type: Number })
-], A.prototype, "page", 2);
+], M.prototype, "page", 2);
 st([
   l({ type: Number, attribute: "total-pages" })
-], A.prototype, "totalPages", 2);
+], M.prototype, "totalPages", 2);
 st([
   l()
-], A.prototype, "variant", 2);
+], M.prototype, "variant", 2);
 st([
   l({ type: Number })
-], A.prototype, "siblings", 2);
-A = st([
+], M.prototype, "siblings", 2);
+M = st([
   p("baht-pagination")
-], A);
-var Gt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, $ = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Wt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], M);
+var Yt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, $ = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Qt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Gt(e, r, s), s;
+  return a && s && Yt(e, r, s), s;
 };
 let m = class extends d {
   constructor() {
@@ -243,10 +244,10 @@ $([
 m = $([
   p("baht-table")
 ], m);
-var Yt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, E = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Qt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var Xt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, E = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Zt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Yt(e, r, s), s;
+  return a && s && Xt(e, r, s), s;
 };
 let P = class extends d {
   constructor() {
@@ -317,10 +318,10 @@ E([
 P = E([
   p("baht-list")
 ], P);
-var Xt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, rt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Zt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, rt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ee(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Xt(e, r, s), s;
+  return a && s && te(e, r, s), s;
 };
 let B = class extends d {
   constructor() {
@@ -377,12 +378,12 @@ rt([
 B = rt([
   p("baht-tooltip")
 ], B);
-var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, V = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ee(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var se = Object.defineProperty, re = Object.getOwnPropertyDescriptor, V = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? re(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && te(e, r, s), s;
+  return a && s && se(e, r, s), s;
 };
-let k = class extends d {
+let I = class extends d {
   constructor() {
     super(...arguments), this.tone = "info", this.heading = "", this.message = "", this.dismissible = !1, this.hidden = !1;
   }
@@ -401,26 +402,26 @@ let k = class extends d {
 };
 V([
   l()
-], k.prototype, "tone", 2);
+], I.prototype, "tone", 2);
 V([
   l()
-], k.prototype, "heading", 2);
+], I.prototype, "heading", 2);
 V([
   l()
-], k.prototype, "message", 2);
+], I.prototype, "message", 2);
 V([
   l({ type: Boolean })
-], k.prototype, "dismissible", 2);
+], I.prototype, "dismissible", 2);
 V([
   l({ type: Boolean, reflect: !0 })
-], k.prototype, "hidden", 2);
-k = V([
+], I.prototype, "hidden", 2);
+I = V([
   p("baht-alert")
-], k);
-var se = Object.defineProperty, re = Object.getOwnPropertyDescriptor, z = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? re(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], I);
+var ae = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, z = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ie(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && se(e, r, s), s;
+  return a && s && ae(e, r, s), s;
 };
 let S = class extends d {
   constructor() {
@@ -493,10 +494,10 @@ z([
 S = z([
   p("baht-rating")
 ], S);
-var ae = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, I = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ie(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var oe = Object.defineProperty, le = Object.getOwnPropertyDescriptor, k = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? le(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && ae(e, r, s), s;
+  return a && s && oe(e, r, s), s;
 };
 let x = class extends d {
   constructor() {
@@ -532,34 +533,34 @@ let x = class extends d {
   }
 };
 x.instances = 0;
-I([
+k([
   l({ type: Number })
 ], x.prototype, "value", 2);
-I([
+k([
   l({ type: Number })
 ], x.prototype, "min", 2);
-I([
+k([
   l({ type: Number })
 ], x.prototype, "max", 2);
-I([
+k([
   l({ type: Number })
 ], x.prototype, "step", 2);
-I([
+k([
   l()
 ], x.prototype, "label", 2);
-I([
+k([
   l({ type: Boolean })
 ], x.prototype, "disabled", 2);
-I([
+k([
   l({ type: Boolean, attribute: "show-value" })
 ], x.prototype, "showValue", 2);
-x = I([
+x = k([
   p("baht-range")
 ], x);
-var oe = Object.defineProperty, le = Object.getOwnPropertyDescriptor, H = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? le(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var ne = Object.defineProperty, he = Object.getOwnPropertyDescriptor, H = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? he(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && oe(e, r, s), s;
+  return a && s && ne(e, r, s), s;
 };
 let q = class extends d {
   constructor() {
@@ -645,10 +646,10 @@ H([
 q = H([
   p("baht-otp")
 ], q);
-var ne = Object.defineProperty, he = Object.getOwnPropertyDescriptor, J = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? he(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var pe = Object.defineProperty, de = Object.getOwnPropertyDescriptor, J = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? de(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && ne(e, r, s), s;
+  return a && s && pe(e, r, s), s;
 };
 let F = class extends d {
   constructor() {
@@ -692,10 +693,10 @@ J([
 F = J([
   p("baht-filter")
 ], F);
-var pe = Object.defineProperty, de = Object.getOwnPropertyDescriptor, bt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? de(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var ce = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, vt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ue(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && pe(e, r, s), s;
+  return a && s && ce(e, r, s), s;
 };
 let Q = class extends d {
   constructor() {
@@ -710,24 +711,24 @@ let Q = class extends d {
     ></span>`;
   }
 };
-bt([
+vt([
   l()
 ], Q.prototype, "variant", 2);
-bt([
+vt([
   l()
 ], Q.prototype, "width", 2);
-bt([
+vt([
   l()
 ], Q.prototype, "height", 2);
-Q = bt([
+Q = vt([
   p("baht-skeleton")
 ], Q);
-var ce = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, at = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ue(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var be = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, at = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ve(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && ce(e, r, s), s;
+  return a && s && be(e, r, s), s;
 };
-let M = class extends d {
+let A = class extends d {
   constructor() {
     super(...arguments), this.value = null, this.tone = "primary", this.showLabel = !1, this.label = "Progress";
   }
@@ -750,23 +751,23 @@ let M = class extends d {
 };
 at([
   l({ type: Number })
-], M.prototype, "value", 2);
+], A.prototype, "value", 2);
 at([
   l()
-], M.prototype, "tone", 2);
+], A.prototype, "tone", 2);
 at([
   l({ type: Boolean, attribute: "show-label" })
-], M.prototype, "showLabel", 2);
+], A.prototype, "showLabel", 2);
 at([
   l()
-], M.prototype, "label", 2);
-M = at([
+], A.prototype, "label", 2);
+A = at([
   p("baht-progress")
-], M);
-var be = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, xt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ve(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], A);
+var me = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, Ot = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? fe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && be(e, r, s), s;
+  return a && s && me(e, r, s), s;
 };
 let ht = class extends d {
   constructor() {
@@ -777,19 +778,19 @@ let ht = class extends d {
     return n`<span class="baht-spinner${t}" role="status" aria-label=${this.label}></span>`;
   }
 };
-xt([
+Ot([
   l()
 ], ht.prototype, "size", 2);
-xt([
+Ot([
   l()
 ], ht.prototype, "label", 2);
-ht = xt([
+ht = Ot([
   p("baht-spinner")
 ], ht);
-var me = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, it = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? fe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var $e = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, it = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ye(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && me(e, r, s), s;
+  return a && s && $e(e, r, s), s;
 };
 let T = class extends d {
   constructor() {
@@ -821,10 +822,10 @@ it([
 T = it([
   p("baht-card")
 ], T);
-var $e = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, vt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ye(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var ge = Object.defineProperty, we = Object.getOwnPropertyDescriptor, mt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? we(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && $e(e, r, s), s;
+  return a && s && ge(e, r, s), s;
 };
 let X = class extends d {
   constructor() {
@@ -840,24 +841,24 @@ let X = class extends d {
     </fieldset>`;
   }
 };
-vt([
+mt([
   l()
 ], X.prototype, "legend", 2);
-vt([
+mt([
   l({ type: Boolean })
 ], X.prototype, "disabled", 2);
-vt([
+mt([
   ct(".baht-fieldset-body")
 ], X.prototype, "bodyEl", 2);
-X = vt([
+X = mt([
   p("baht-fieldset")
 ], X);
-var ge = Object.defineProperty, we = Object.getOwnPropertyDescriptor, qt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? we(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var _e = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, Ft = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? xe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && ge(e, r, s), s;
+  return a && s && _e(e, r, s), s;
 };
-let gt = class extends d {
+let wt = class extends d {
   constructor() {
     super(...arguments), this.items = [];
   }
@@ -881,16 +882,16 @@ let gt = class extends d {
     </div>`;
   }
 };
-qt([
+Ft([
   l({ attribute: !1 })
-], gt.prototype, "items", 2);
-gt = qt([
+], wt.prototype, "items", 2);
+wt = Ft([
   p("baht-timeline")
-], gt);
-var _e = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, mt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? xe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], wt);
+var Oe = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, ft = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Pe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && _e(e, r, s), s;
+  return a && s && Oe(e, r, s), s;
 };
 let L = class extends d {
   constructor() {
@@ -928,22 +929,22 @@ let L = class extends d {
   }
 };
 L.instances = 0;
-mt([
+ft([
   l({ attribute: !1 })
 ], L.prototype, "items", 2);
-mt([
+ft([
   l({ type: Boolean })
 ], L.prototype, "multiple", 2);
-mt([
+ft([
   f()
 ], L.prototype, "openSet", 2);
-L = mt([
+L = ft([
   p("baht-accordion")
 ], L);
-var Oe = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, ot = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Pe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var De = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, ot = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ce(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Oe(e, r, s), s;
+  return a && s && De(e, r, s), s;
 };
 let K = class extends d {
   constructor() {
@@ -973,10 +974,10 @@ ot([
 K = ot([
   p("baht-link")
 ], K);
-var De = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, Ot = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ce(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var Be = Object.defineProperty, je = Object.getOwnPropertyDescriptor, Pt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? je(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && De(e, r, s), s;
+  return a && s && Be(e, r, s), s;
 };
 let pt = class extends d {
   constructor() {
@@ -1003,30 +1004,30 @@ let pt = class extends d {
     </nav>`;
   }
 };
-Ot([
+Pt([
   l({ attribute: !1 })
 ], pt.prototype, "items", 2);
-Ot([
+Pt([
   l()
 ], pt.prototype, "separator", 2);
-pt = Ot([
+pt = Pt([
   p("baht-breadcrumbs")
 ], pt);
-var Be = Object.getOwnPropertyDescriptor, je = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Be(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var Ee = Object.getOwnPropertyDescriptor, ke = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ee(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let Pt = class extends O {
+let Dt = class extends O {
   renderControl() {
     return n`<input
       class="baht-control baht-control--text"
       id=${this.controlId}
       type=${this.field.type === "email" ? "email" : "text"}
-      .value=${this.value == null ? "" : String(this.value)}
-      placeholder=${g(this.field.placeholder)}
-      maxlength=${g(this.field.maxLength)}
-      autocomplete=${g(this.field.autocomplete)}
+      .value=${ut(this.value == null ? "" : String(this.value))}
+      placeholder=${w(this.field.placeholder)}
+      maxlength=${w(this.field.maxLength)}
+      autocomplete=${w(this.field.autocomplete)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1036,24 +1037,24 @@ let Pt = class extends O {
     />`;
   }
 };
-Pt = je([
+Dt = ke([
   p("baht-input")
-], Pt);
-var Ee = Object.getOwnPropertyDescriptor, Ie = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ee(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], Dt);
+var Ne = Object.getOwnPropertyDescriptor, Ie = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ne(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let Dt = class extends O {
+let Ct = class extends O {
   renderControl() {
     return n`<textarea
       class="baht-control baht-control--textarea"
       id=${this.controlId}
-      .value=${this.value == null ? "" : String(this.value)}
-      placeholder=${g(this.field.placeholder)}
-      maxlength=${g(this.field.maxLength)}
+      .value=${ut(this.value == null ? "" : String(this.value))}
+      placeholder=${w(this.field.placeholder)}
+      maxlength=${w(this.field.maxLength)}
       rows=${this.field.rows ?? 3}
-      autocomplete=${g(this.field.autocomplete)}
+      autocomplete=${w(this.field.autocomplete)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1063,25 +1064,25 @@ let Dt = class extends O {
     ></textarea>`;
   }
 };
-Dt = Ie([
+Ct = Ie([
   p("baht-textarea")
-], Dt);
-var Ne = Object.getOwnPropertyDescriptor, ke = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ne(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], Ct);
+var Se = Object.getOwnPropertyDescriptor, qe = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Se(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let Ct = class extends O {
+let Bt = class extends O {
   renderControl() {
     return n`<input
       class="baht-control baht-control--number"
       id=${this.controlId}
       type="number"
-      .value=${this.value == null ? "" : String(this.value)}
-      placeholder=${g(this.field.placeholder)}
-      min=${g(this.field.min)}
-      max=${g(this.field.max)}
-      step=${g(this.field.step)}
+      .value=${ut(this.value == null ? "" : String(this.value))}
+      placeholder=${w(this.field.placeholder)}
+      min=${w(this.field.min)}
+      max=${w(this.field.max)}
+      step=${w(this.field.step)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1094,15 +1095,15 @@ let Ct = class extends O {
     />`;
   }
 };
-Ct = ke([
+Bt = qe([
   p("baht-number")
-], Ct);
-var Se = Object.getOwnPropertyDescriptor, qe = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Se(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], Bt);
+var Fe = Object.getOwnPropertyDescriptor, Le = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Fe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let Bt = class extends O {
+let jt = class extends O {
   renderControl() {
     const t = this.value == null ? "" : String(this.value);
     return n`<select
@@ -1125,15 +1126,15 @@ let Bt = class extends O {
     </select>`;
   }
 };
-Bt = qe([
+jt = Le([
   p("baht-select")
-], Bt);
-var Fe = Object.getOwnPropertyDescriptor, Le = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Fe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], jt);
+var Re = Object.getOwnPropertyDescriptor, Me = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Re(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let jt = class extends O {
+let Et = class extends O {
   get selected() {
     return Array.isArray(this.value) ? this.value : [];
   }
@@ -1163,15 +1164,15 @@ let jt = class extends O {
     </div>`;
   }
 };
-jt = Le([
+Et = Me([
   p("baht-multiselect")
-], jt);
-var Re = Object.getOwnPropertyDescriptor, Ae = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Re(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], Et);
+var Ae = Object.getOwnPropertyDescriptor, Te = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ae(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let Et = class extends O {
+let kt = class extends O {
   /** Label sits beside the box, so suppress the block label. */
   renderLabel() {
     return h;
@@ -1194,15 +1195,15 @@ let Et = class extends O {
     </label>`;
   }
 };
-Et = Ae([
+kt = Te([
   p("baht-checkbox")
-], Et);
-var Me = Object.getOwnPropertyDescriptor, Te = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Me(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], kt);
+var Ke = Object.getOwnPropertyDescriptor, Ue = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ke(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let It = class extends O {
+let Nt = class extends O {
   renderControl() {
     return n`<div
       class="baht-control baht-control--radio"
@@ -1228,15 +1229,15 @@ let It = class extends O {
     </div>`;
   }
 };
-It = Te([
+Nt = Ue([
   p("baht-radio")
-], It);
-var Ke = Object.getOwnPropertyDescriptor, Ue = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ke(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], Nt);
+var Ve = Object.getOwnPropertyDescriptor, ze = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ve(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let Nt = class extends O {
+let It = class extends O {
   renderLabel() {
     return h;
   }
@@ -1261,23 +1262,23 @@ let Nt = class extends O {
     </label>`;
   }
 };
-Nt = Ue([
+It = ze([
   p("baht-toggle")
-], Nt);
-var Ve = Object.getOwnPropertyDescriptor, ze = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ve(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], It);
+var He = Object.getOwnPropertyDescriptor, Je = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? He(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let kt = class extends O {
+let St = class extends O {
   renderControl() {
     return n`<input
       class="baht-control baht-control--date"
       id=${this.controlId}
       type="date"
-      .value=${this.value == null ? "" : String(this.value)}
-      min=${g(this.field.min)}
-      max=${g(this.field.max)}
+      .value=${ut(this.value == null ? "" : String(this.value))}
+      min=${w(this.field.min)}
+      max=${w(this.field.max)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1290,21 +1291,21 @@ let kt = class extends O {
     />`;
   }
 };
-kt = ze([
+St = Je([
   p("baht-datepicker")
-], kt);
-var He = Object.getOwnPropertyDescriptor, Je = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? He(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], St);
+var Ge = Object.getOwnPropertyDescriptor, We = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ge(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let St = class extends O {
+let qt = class extends O {
   renderControl() {
     return n`<input
       class="baht-control baht-control--file"
       id=${this.controlId}
       type="file"
-      accept=${g(this.field.accept)}
+      accept=${w(this.field.accept)}
       ?multiple=${this.field.multiple}
       ?disabled=${this.disabled || this.readonly}
       ?required=${this.required}
@@ -1317,30 +1318,30 @@ let St = class extends O {
     />`;
   }
 };
-St = Je([
+qt = We([
   p("baht-file")
-], St);
-var Ge = Object.defineProperty, We = Object.getOwnPropertyDescriptor, Ft = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? We(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], qt);
+var Ye = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, Lt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Qe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Ge(e, r, s), s;
+  return a && s && Ye(e, r, s), s;
 };
-let wt = class extends d {
+let _t = class extends d {
   render() {
     const t = this.field.variant ?? "body";
     return n`<div class="baht-text baht-text--${t}">${this.field.text ?? this.field.label ?? ""}</div>`;
   }
 };
-Ft([
+Lt([
   l({ attribute: !1 })
-], wt.prototype, "field", 2);
-wt = Ft([
+], _t.prototype, "field", 2);
+_t = Lt([
   p("baht-text")
-], wt);
-var Ye = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, ft = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Qe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+], _t);
+var Xe = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, $t = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ze(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Ye(e, r, s), s;
+  return a && s && Xe(e, r, s), s;
 };
 let Z = class extends d {
   constructor() {
@@ -1356,26 +1357,26 @@ let Z = class extends d {
     </div>`;
   }
 };
-ft([
+$t([
   l({ type: Number })
 ], Z.prototype, "total", 2);
-ft([
+$t([
   l()
 ], Z.prototype, "label", 2);
-ft([
+$t([
   l()
 ], Z.prototype, "color", 2);
-Z = ft([
+Z = $t([
   p("baht-stat-chart")
 ], Z);
-const Xe = 10;
-function Lt(t, e) {
-  return e && t === 0 ? e : `var(--baht-chart-${t % Xe + 1})`;
+const ts = 10;
+function Rt(t, e) {
+  return e && t === 0 ? e : `var(--baht-chart-${t % ts + 1})`;
 }
-var Ze = Object.defineProperty, ts = Object.getOwnPropertyDescriptor, G = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ts(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var es = Object.defineProperty, ss = Object.getOwnPropertyDescriptor, G = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ss(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && Ze(e, r, s), s;
+  return a && s && es(e, r, s), s;
 };
 let D = class extends d {
   constructor() {
@@ -1387,20 +1388,20 @@ let D = class extends d {
     const t = this.groups.reduce((o, c) => o + c.count, 0) || 1, e = this.total ?? this.groups.reduce((o, c) => o + c.count, 0), r = D.R, a = 2 * Math.PI * r;
     let s = 0;
     const i = this.groups.map((o, c) => {
-      const u = o.count / t, _ = {
+      const u = o.count / t, y = {
         ...o,
         frac: u,
         dash: `${u * a} ${a - u * a}`,
         offset: -s * a,
-        color: Lt(c, this.color || void 0)
+        color: Rt(c, this.color || void 0)
       };
-      return s += u, _;
+      return s += u, y;
     });
     return n`<div class="baht-donut-chart">
       <svg width="160" height="160" viewBox="0 0 160 160" role="img" aria-label="Donut chart">
         <g transform="translate(80,80) rotate(-90)">
           ${i.map(
-      (o) => Tt`<circle r=${r} cx="0" cy="0" fill="none" stroke=${o.color}
+      (o) => Ut`<circle r=${r} cx="0" cy="0" fill="none" stroke=${o.color}
                 stroke-width="22" stroke-dasharray=${o.dash} stroke-dashoffset=${o.offset}/>`
     )}
         </g>
@@ -1439,10 +1440,10 @@ G([
 D = G([
   p("baht-donut-chart")
 ], D);
-var es = Object.defineProperty, ss = Object.getOwnPropertyDescriptor, $t = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ss(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var rs = Object.defineProperty, as = Object.getOwnPropertyDescriptor, yt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? as(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && es(e, r, s), s;
+  return a && s && rs(e, r, s), s;
 };
 let tt = class extends d {
   constructor() {
@@ -1459,7 +1460,7 @@ let tt = class extends d {
           <div class="baht-bar-chart-track">
             <div
               class="baht-bar-chart-bar"
-              style="width:${Math.max(2, e.count / t * 100)}%;background:${this.color || Lt(r)}"
+              style="width:${Math.max(2, e.count / t * 100)}%;background:${this.color || Rt(r)}"
             ></div>
           </div>
           <span class="baht-bar-chart-count">${e.count}</span>
@@ -1468,22 +1469,22 @@ let tt = class extends d {
     </div>`;
   }
 };
-$t([
+yt([
   l({ attribute: !1 })
 ], tt.prototype, "groups", 2);
-$t([
+yt([
   l()
 ], tt.prototype, "color", 2);
-$t([
+yt([
   l({ attribute: "empty-message" })
 ], tt.prototype, "emptyMessage", 2);
-tt = $t([
+tt = yt([
   p("baht-bar-chart")
 ], tt);
-var rs = Object.defineProperty, as = Object.getOwnPropertyDescriptor, yt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? as(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var is = Object.defineProperty, os = Object.getOwnPropertyDescriptor, gt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? os(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && rs(e, r, s), s;
+  return a && s && is(e, r, s), s;
 };
 let et = class extends d {
   constructor() {
@@ -1497,22 +1498,22 @@ let et = class extends d {
     </div>`;
   }
 };
-yt([
+gt([
   l()
 ], et.prototype, "icon", 2);
-yt([
+gt([
   l()
 ], et.prototype, "message", 2);
-yt([
+gt([
   l()
 ], et.prototype, "hint", 2);
-et = yt([
+et = gt([
   p("baht-empty-state")
 ], et);
-var is = Object.defineProperty, os = Object.getOwnPropertyDescriptor, lt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? os(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var ls = Object.defineProperty, ns = Object.getOwnPropertyDescriptor, lt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ns(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && is(e, r, s), s;
+  return a && s && ls(e, r, s), s;
 };
 let U = class extends d {
   constructor() {
@@ -1545,10 +1546,10 @@ lt([
 U = lt([
   p("baht-error-state")
 ], U);
-var ls = Object.defineProperty, ns = Object.getOwnPropertyDescriptor, R = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ns(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var hs = Object.defineProperty, ps = Object.getOwnPropertyDescriptor, R = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ps(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && ls(e, r, s), s;
+  return a && s && hs(e, r, s), s;
 };
 let j = class extends d {
   constructor() {
@@ -1638,14 +1639,14 @@ R([
 j = R([
   p("baht-keyvalue-editor")
 ], j);
-var hs = Object.defineProperty, ps = Object.getOwnPropertyDescriptor, v = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? ps(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var ds = Object.defineProperty, cs = Object.getOwnPropertyDescriptor, v = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? cs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && hs(e, r, s), s;
+  return a && s && ds(e, r, s), s;
 };
-let ds = 0, b = class extends d {
+let us = 0, b = class extends d {
   constructor() {
-    super(...arguments), this.label = "Reference", this.value = "", this.display = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.href = "", this.lookupLabel = "Look up records", this.debounce = 200, this.fetcher = null, this.open = !1, this.term = "", this.options = [], this.loading = !1, this.activeIndex = -1, this.listboxId = `baht-refpicker-list-${++ds}`, this.fetchSeq = 0, this.onDocMousedown = (t) => {
+    super(...arguments), this.label = "Reference", this.value = "", this.display = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.href = "", this.lookupLabel = "Look up records", this.debounce = 200, this.fetcher = null, this.open = !1, this.term = "", this.options = [], this.loading = !1, this.activeIndex = -1, this.listboxId = `baht-refpicker-list-${++us}`, this.fetchSeq = 0, this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
     };
   }
@@ -1826,7 +1827,7 @@ v([
 b = v([
   p("baht-reference-picker")
 ], b);
-const cs = {
+const bs = {
   text: "baht-input",
   email: "baht-input",
   textarea: "baht-textarea",
@@ -1840,12 +1841,12 @@ const cs = {
   file: "baht-file",
   label: "baht-text"
 };
-var us = Object.defineProperty, bs = Object.getOwnPropertyDescriptor, N = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? bs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var vs = Object.defineProperty, ms = Object.getOwnPropertyDescriptor, N = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ms(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && us(e, r, s), s;
+  return a && s && vs(e, r, s), s;
 };
-const vs = {
+const fs = {
   "1/4": "baht-field--w-1-4",
   "1/2": "baht-field--w-1-2",
   "3/4": "baht-field--w-3-4",
@@ -1853,10 +1854,10 @@ const vs = {
 };
 let C = class extends d {
   constructor() {
-    super(...arguments), this.value = {}, this.registry = {}, this.options = {}, this.fieldStates = {}, this.edits = {}, this.errors = [];
+    super(...arguments), this.value = {}, this.registry = {}, this.options = {}, this.fieldStates = {}, this.edits = {}, this.errors = [], this.controls = /* @__PURE__ */ new Map();
   }
   willUpdate(t) {
-    t.has("value") && (this.edits = {});
+    t.has("value") && (this.edits = {}), t.has("form") && this.controls.clear();
   }
   get sortedFields() {
     var t;
@@ -1872,7 +1873,7 @@ let C = class extends d {
     };
   }
   valueFor(t) {
-    return t.key in this.edits ? this.edits[t.key] : t.key in this.value ? this.value[t.key] : Rt(t);
+    return t.key in this.edits ? this.edits[t.key] : t.key in this.value ? this.value[t.key] : At(t);
   }
   // ---- public API (spec 01 §6) ----
   getData() {
@@ -1891,7 +1892,7 @@ let C = class extends d {
       const a = this.stateFor(r);
       if (!a.visible) continue;
       const s = a.required === !!r.required ? r : { ...r, required: a.required };
-      t.push(...At(s, this.valueFor(r), this.registry));
+      t.push(...Tt(s, this.valueFor(r), this.registry));
     }
     this.errors = t;
     const e = { valid: t.length === 0, errors: t };
@@ -1918,11 +1919,16 @@ let C = class extends d {
   }
   renderField(t) {
     var o;
-    const e = cs[t.type];
+    const e = bs[t.type];
     if (!e)
       return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), h;
-    const r = this.stateFor(t), a = vs[t.width ?? "full"] ?? "baht-field--w-full", s = ((o = this.errors.find((c) => c.key === t.key)) == null ? void 0 : o.message) ?? null, i = document.createElement(e);
-    return i.field = t, i.value = this.valueFor(t), i.disabled = !r.enabled, i.readonly = r.readonly, i.required = r.required, i.error = s, i.addEventListener("baht-input", (c) => this.onFieldInput(t, c)), n`<div
+    const r = this.stateFor(t), a = fs[t.width ?? "full"] ?? "baht-field--w-full", s = ((o = this.errors.find((c) => c.key === t.key)) == null ? void 0 : o.message) ?? null;
+    let i = this.controls.get(t.key);
+    return (!i || i.tagName.toLowerCase() !== e) && (i = document.createElement(e), i.addEventListener("baht-input", (c) => {
+      var y;
+      const u = (y = this.form) == null ? void 0 : y.field_data.find((Mt) => Mt.key === t.key);
+      u && this.onFieldInput(u, c);
+    }), this.controls.set(t.key, i)), i.field = t, i.value = this.valueFor(t), i.disabled = !r.enabled, i.readonly = r.readonly, i.required = r.required, i.error = s, n`<div
       class="baht-field ${a} ${r.visible ? "" : "baht-field--hidden"}"
       data-key=${t.key}
       data-type=${t.type}
@@ -1958,12 +1964,12 @@ N([
 C = N([
   p("baht-form")
 ], C);
-var ms = Object.defineProperty, fs = Object.getOwnPropertyDescriptor, w = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? fs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var $s = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, _ = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ys(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && ms(e, r, s), s;
+  return a && s && $s(e, r, s), s;
 };
-let y = class extends d {
+let g = class extends d {
   constructor() {
     super(...arguments), this.value = {}, this.registry = {}, this.validateGate = !0, this.nextLabel = "Next", this.submitLabel = "Submit", this.backLabel = "Back", this.showBack = !0, this.data = {}, this.derived = null, this.current = null, this.approvalError = null, this.history = [];
   }
@@ -1975,7 +1981,7 @@ let y = class extends d {
     (t.has("workflow") || t.has("value")) && (this.data = structuredClone(this.value ?? {}), this.reevaluate(), this.history = [], this.current = ((e = this.visibleForms[0]) == null ? void 0 : e.formName) ?? null, this.approvalError = null);
   }
   reevaluate() {
-    this.derived = Mt(this.workflow, this.data), this.data = this.derived.data;
+    this.derived = Kt(this.workflow, this.data), this.data = this.derived.data;
   }
   /** Forms in ascending order whose derived visibility is true. */
   get visibleForms() {
@@ -2062,7 +2068,7 @@ let y = class extends d {
     }
     this.emit("baht-reject", o);
     const c = r.onReject ?? { action: "end" };
-    c.action === "goto" && this.visibleForms.some((_) => _.formName === c.form) ? this.gotoForm(c.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
+    c.action === "goto" && this.visibleForms.some((y) => y.formName === c.form) ? this.gotoForm(c.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
   }
   /** Jump back to a visible form, truncating the history to that point. */
   gotoForm(t) {
@@ -2118,19 +2124,19 @@ let y = class extends d {
     return n`<div class="baht-approval">
       <div class="baht-approval-summary">
         ${r.length === 0 ? n`<p class="baht-approval-empty">Nothing to review.</p>` : r.map((i) => {
-      const o = this.fieldStatesFor(i.formName), c = [...i.field_data].sort((u, _) => u.order - _.order).filter((u) => {
-        var _;
-        return u.type !== "label" && ((_ = o[u.key]) == null ? void 0 : _.visible) !== !1;
+      const o = this.fieldStatesFor(i.formName), c = [...i.field_data].sort((u, y) => u.order - y.order).filter((u) => {
+        var y;
+        return u.type !== "label" && ((y = o[u.key]) == null ? void 0 : y.visible) !== !1;
       });
       return n`<section class="baht-approval-group">
                   <h4 class="baht-approval-group-title">${i.formName}</h4>
                   <dl class="baht-approval-rows">
                     ${c.map(
         (u) => {
-          var _;
+          var y;
           return n`<div class="baht-approval-row">
                         <dt>${u.label ?? u.key}</dt>
-                        <dd>${this.displayValue(u, (_ = this.data[i.formName]) == null ? void 0 : _[u.key])}</dd>
+                        <dd>${this.displayValue(u, (y = this.data[i.formName]) == null ? void 0 : y[u.key])}</dd>
                       </div>`;
         }
       )}
@@ -2193,101 +2199,101 @@ let y = class extends d {
     </div>`;
   }
 };
-w([
+_([
   l({ attribute: !1 })
-], y.prototype, "workflow", 2);
-w([
+], g.prototype, "workflow", 2);
+_([
   l({ attribute: !1 })
-], y.prototype, "value", 2);
-w([
+], g.prototype, "value", 2);
+_([
   l({ attribute: !1 })
-], y.prototype, "registry", 2);
-w([
+], g.prototype, "registry", 2);
+_([
   l({ type: Boolean, attribute: "validate-gate" })
-], y.prototype, "validateGate", 2);
-w([
+], g.prototype, "validateGate", 2);
+_([
   l({ attribute: "next-label" })
-], y.prototype, "nextLabel", 2);
-w([
+], g.prototype, "nextLabel", 2);
+_([
   l({ attribute: "submit-label" })
-], y.prototype, "submitLabel", 2);
-w([
+], g.prototype, "submitLabel", 2);
+_([
   l({ attribute: "back-label" })
-], y.prototype, "backLabel", 2);
-w([
+], g.prototype, "backLabel", 2);
+_([
   l({ type: Boolean, attribute: "show-back" })
-], y.prototype, "showBack", 2);
-w([
+], g.prototype, "showBack", 2);
+_([
   f()
-], y.prototype, "data", 2);
-w([
+], g.prototype, "data", 2);
+_([
   f()
-], y.prototype, "derived", 2);
-w([
+], g.prototype, "derived", 2);
+_([
   f()
-], y.prototype, "current", 2);
-w([
+], g.prototype, "current", 2);
+_([
   f()
-], y.prototype, "approvalError", 2);
-y = w([
+], g.prototype, "approvalError", 2);
+g = _([
   p("baht-workflow")
-], y);
+], g);
 export {
   L as BahtAccordion,
-  k as BahtAlert,
+  I as BahtAlert,
   Y as BahtBadge,
   tt as BahtBarChart,
   pt as BahtBreadcrumbs,
-  Es as BahtButton,
+  Is as BahtButton,
   T as BahtCard,
-  Et as BahtCheckbox,
+  kt as BahtCheckbox,
   nt as BahtCode,
-  kt as BahtDatepicker,
+  St as BahtDatepicker,
   D as BahtDonutChart,
   d as BahtElement,
   et as BahtEmptyState,
   U as BahtErrorState,
   O as BahtFieldBase,
   X as BahtFieldset,
-  St as BahtFile,
+  qt as BahtFile,
   F as BahtFilter,
   C as BahtForm,
-  Pt as BahtInput,
+  Dt as BahtInput,
   j as BahtKeyvalueEditor,
   K as BahtLink,
   P as BahtList,
-  Is as BahtModal,
-  jt as BahtMultiselect,
-  Ct as BahtNumber,
+  Ss as BahtModal,
+  Et as BahtMultiselect,
+  Bt as BahtNumber,
   q as BahtOtp,
-  A as BahtPagination,
-  M as BahtProgress,
-  It as BahtRadio,
+  M as BahtPagination,
+  A as BahtProgress,
+  Nt as BahtRadio,
   x as BahtRange,
   S as BahtRating,
   b as BahtReferencePicker,
-  Bt as BahtSelect,
+  jt as BahtSelect,
   Q as BahtSkeleton,
   ht as BahtSpinner,
   Z as BahtStatChart,
   m as BahtTable,
-  wt as BahtText,
-  Dt as BahtTextarea,
-  gt as BahtTimeline,
-  Ns as BahtToast,
-  Nt as BahtToggle,
+  _t as BahtText,
+  Ct as BahtTextarea,
+  wt as BahtTimeline,
+  qs as BahtToast,
+  It as BahtToggle,
   B as BahtTooltip,
-  y as BahtWorkflow,
-  cs as TAG_FOR_TYPE,
+  g as BahtWorkflow,
+  bs as TAG_FOR_TYPE,
   dt as adoptLightChildren,
-  Ps as approvalFields,
-  Lt as chartColor,
-  Rt as defaultValue,
-  Ds as evalCondition,
-  Cs as evalValueExpr,
-  Mt as evaluate,
-  ks as isIconName,
-  Bs as readRef,
+  Bs as approvalFields,
+  Rt as chartColor,
+  At as defaultValue,
+  js as evalCondition,
+  Es as evalValueExpr,
+  Kt as evaluate,
+  Fs as isIconName,
+  ks as readRef,
   W as renderIcon,
-  At as validateField
+  Tt as validateField
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "bank20baht-ui",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bank20baht-ui",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "type": "module",
   "description": "JSON-driven form + workflow engine. Send JSON in, get an interactive form out.",
   "license": "MIT",