bank20baht-ui 0.4.1 → 0.4.2

package/dist/chunks/{baht-workflow-CkbvfwES.js → baht-workflow-Dy8HZQ_f.js}

@@ -1,20 +1,20 @@
-import { nothing as h, html as n, svg as A } from "lit";
-import { property as l, customElement as b, state as $, query as Bt } from "lit/decorators.js";
-import { B as y, b as ne, h as S, a as J } from "./base-CajA2aCO.js";
+import { nothing as h, html as n, svg as L } from "lit";
+import { property as l, customElement as b, state as y, query as It } from "lit/decorators.js";
+import { B as g, b as he, h as S, a as Y } from "./base-CajA2aCO.js";
 import { t as m } from "./i18n-BcPL9_Jh.js";
-import { n as $e, k as Lt, o as ds, i as Rt, p as us, d as se, a as rs, m as Ae, v as Le, c as bs, g as fs, l as ms } from "./display-DQRcvsn7.js";
+import { n as $e, k as Nt, o as ds, i as zt, p as us, d as ae, a as rs, m as Ae, v as Le, c as bs, g as fs, l as ms } from "./display-DQRcvsn7.js";
 import { repeat as Ce } from "lit/directives/repeat.js";
-import { html as ee, unsafeStatic as os } from "lit/static-html.js";
-import { c as vs, r as H } from "./baht-toast-CD1WrOYr.js";
-import { live as ot } from "lit/directives/live.js";
-import { ifDefined as L } from "lit/directives/if-defined.js";
+import { html as se, unsafeStatic as os } from "lit/static-html.js";
+import { c as vs, r as W } from "./baht-toast-CD1WrOYr.js";
+import { live as lt } from "lit/directives/live.js";
+import { ifDefined as N } from "lit/directives/if-defined.js";
 import $s from "flatpickr";
-var ys = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, he = (t, e, i, a) => {
+var ys = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, ce = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? gs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ys(e, i, s), s;
 };
-let zt = class extends y {
+let Vt = class extends g {
   constructor() {
     super(...arguments), this.tone = "neutral", this.label = "", this.dot = null;
   }
@@ -28,50 +28,50 @@ let zt = class extends y {
     </span>`;
   }
 };
-he([
+ce([
   l()
-], zt.prototype, "tone", 2);
-he([
+], Vt.prototype, "tone", 2);
+ce([
   l()
-], zt.prototype, "label", 2);
-he([
+], Vt.prototype, "label", 2);
+ce([
   l({ attribute: !1 })
-], zt.prototype, "dot", 2);
-zt = he([
+], Vt.prototype, "dot", 2);
+Vt = ce([
   b("baht-badge")
-], zt);
-var ws = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, je = (t, e, i, a) => {
+], Vt);
+var ws = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Me = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? xs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ws(e, i, s), s;
 };
-let ae = class extends y {
+let ie = class extends g {
   constructor() {
     super(...arguments), this.variant = "inline", this.code = "";
   }
   firstUpdated() {
     const t = this.renderRoot.querySelector(this.variant === "block" ? "pre" : "code");
-    t && ne(this, t);
+    t && he(this, t);
   }
   render() {
     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>`;
   }
 };
-je([
+Me([
   l()
-], ae.prototype, "variant", 2);
-je([
+], ie.prototype, "variant", 2);
+Me([
   l()
-], ae.prototype, "code", 2);
-ae = je([
+], ie.prototype, "code", 2);
+ie = Me([
   b("baht-code")
-], ae);
-var _s = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, yt = (t, e, i, a) => {
+], ie);
+var _s = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, gt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ks(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && _s(e, i, s), s;
 };
-let ht = class extends y {
+let ht = class extends g {
   constructor() {
     super(...arguments), this.page = 1, this.totalPages = 1, this.variant = "numbered", this.siblings = 1, this.hasNext = !1, this.hasPrev = !1;
   }
@@ -126,25 +126,25 @@ let ht = class extends y {
     </nav>`;
   }
 };
-yt([
+gt([
   l({ type: Number })
 ], ht.prototype, "page", 2);
-yt([
+gt([
   l({ type: Number, attribute: "total-pages" })
 ], ht.prototype, "totalPages", 2);
-yt([
+gt([
   l()
 ], ht.prototype, "variant", 2);
-yt([
+gt([
   l({ type: Number })
 ], ht.prototype, "siblings", 2);
-yt([
+gt([
   l({ type: Boolean, attribute: "has-next" })
 ], ht.prototype, "hasNext", 2);
-yt([
+gt([
   l({ type: Boolean, attribute: "has-prev" })
 ], ht.prototype, "hasPrev", 2);
-ht = yt([
+ht = gt([
   b("baht-pagination")
 ], ht);
 var Ps = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, O = (t, e, i, a) => {
@@ -152,8 +152,8 @@ var Ps = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, O = (t, e,
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ps(e, i, s), s;
 };
-const Cs = " › ", ye = (t) => t !== null && typeof t == "object" && !Array.isArray(t) && !(t instanceof Date), te = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
-let k = class extends y {
+const Cs = " › ", ye = (t) => t !== null && typeof t == "object" && !Array.isArray(t) && !(t instanceof Date), ee = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
+let k = class extends g {
   constructor() {
     super(...arguments), this.items = [], this.columns = {}, this.loading = !1, this.error = !1, this.errorMessage = "Couldn't load data. Try again.", this.emptyMessage = "No records yet.", this.showIndex = !0, this.indexOffset = 0, this.skeletonRows = 10, this.rowKey = "", this.clickable = !0, this.renderers = {}, this.visibleColumns = [], this.columnPicker = !0, this.page = 1, this.totalPages = 1, this.cursorMode = !1, this.hasNext = !1, this.hasPrev = !1, this.pickerOpen = !1, this.pickedColumns = null, this.draftColumns = [], this.pickAvail = [], this.pickSel = [], this.expanded = [], this.pickerPreviousFocus = null, this.onPickerKeydown = (t) => {
       t.key === "Escape" ? this.closePicker() : t.key === "Tab" && this.trapPickerFocus(t);
@@ -192,9 +192,9 @@ let k = class extends y {
     const e = {};
     for (const [i, a] of Object.entries(t))
       e[i] = ye(a) ? {
-        label: te(i),
-        fields: Object.fromEntries(Object.keys(a).map((s) => [s, te(s)]))
-      } : te(i);
+        label: ee(i),
+        fields: Object.fromEntries(Object.keys(a).map((s) => [s, ee(s)]))
+      } : ee(i);
     return e;
   }
   /** Walk a dotted key through the spec; undefined when no such column exists. */
@@ -233,7 +233,7 @@ let k = class extends y {
     for (const a of t.split(".")) {
       const s = i == null ? void 0 : i[a];
       if (s === void 0) {
-        e.push(te(a)), i = void 0;
+        e.push(ee(a)), i = void 0;
         continue;
       }
       e.push(typeof s == "string" ? s : s.label), i = typeof s == "string" ? void 0 : s.fields;
@@ -514,22 +514,22 @@ O([
   l({ type: Boolean, attribute: "has-prev" })
 ], k.prototype, "hasPrev", 2);
 O([
-  $()
+  y()
 ], k.prototype, "pickerOpen", 2);
 O([
-  $()
+  y()
 ], k.prototype, "pickedColumns", 2);
 O([
-  $()
+  y()
 ], k.prototype, "draftColumns", 2);
 O([
-  $()
+  y()
 ], k.prototype, "pickAvail", 2);
 O([
-  $()
+  y()
 ], k.prototype, "pickSel", 2);
 O([
-  $()
+  y()
 ], k.prototype, "expanded", 2);
 k = O([
   b("baht-table")
@@ -539,7 +539,7 @@ var Ds = Object.defineProperty, Fs = Object.getOwnPropertyDescriptor, ut = (t, e
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ds(e, i, s), s;
 };
-let it = class extends y {
+let rt = class extends g {
   constructor() {
     super(...arguments), this.items = [], this.loading = !1, this.error = !1, this.errorMessage = "Couldn't load data. Try again.", this.emptyMessage = "Nothing here yet.", this.skeletonRows = 5, this.clickable = !0;
   }
@@ -587,34 +587,34 @@ let it = class extends y {
 };
 ut([
   l({ attribute: !1 })
-], it.prototype, "items", 2);
+], rt.prototype, "items", 2);
 ut([
   l({ type: Boolean })
-], it.prototype, "loading", 2);
+], rt.prototype, "loading", 2);
 ut([
   l({ type: Boolean })
-], it.prototype, "error", 2);
+], rt.prototype, "error", 2);
 ut([
   l({ attribute: "error-message" })
-], it.prototype, "errorMessage", 2);
+], rt.prototype, "errorMessage", 2);
 ut([
   l({ attribute: "empty-message" })
-], it.prototype, "emptyMessage", 2);
+], rt.prototype, "emptyMessage", 2);
 ut([
   l({ type: Number, attribute: "skeleton-rows" })
-], it.prototype, "skeletonRows", 2);
+], rt.prototype, "skeletonRows", 2);
 ut([
   l({ type: Boolean })
-], it.prototype, "clickable", 2);
-it = ut([
+], rt.prototype, "clickable", 2);
+rt = ut([
   b("baht-list")
-], it);
-var Es = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, Wt = (t, e, i, a) => {
+], rt);
+var Es = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, Jt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Bs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Es(e, i, s), s;
 };
-let kt = class extends y {
+let Pt = class extends g {
   constructor() {
     super(...arguments), this.text = "", this.position = "top", this.dismissed = !1;
   }
@@ -633,7 +633,7 @@ let kt = class extends y {
     t ? (t.setAttribute("aria-describedby", this.tooltipId), this.anchorEl.removeAttribute("tabindex"), this.anchorEl.removeAttribute("aria-describedby")) : (this.anchorEl.setAttribute("tabindex", "0"), this.anchorEl.setAttribute("aria-describedby", this.tooltipId));
   }
   firstUpdated() {
-    ne(this, this.anchorEl), this.wireDescribedBy(), setTimeout(() => this.isConnected && this.wireDescribedBy(), 0);
+    he(this, this.anchorEl), this.wireDescribedBy(), setTimeout(() => this.isConnected && this.wireDescribedBy(), 0);
   }
   onKeydown(t) {
     t.key === "Escape" && (this.dismissed = !0);
@@ -653,27 +653,27 @@ let kt = class extends y {
     </span>`;
   }
 };
-Wt([
+Jt([
   l()
-], kt.prototype, "text", 2);
-Wt([
+], Pt.prototype, "text", 2);
+Jt([
   l()
-], kt.prototype, "position", 2);
-Wt([
-  Bt(".baht-tooltip-anchor")
-], kt.prototype, "anchorEl", 2);
-Wt([
-  $()
-], kt.prototype, "dismissed", 2);
-kt = Wt([
+], Pt.prototype, "position", 2);
+Jt([
+  It(".baht-tooltip-anchor")
+], Pt.prototype, "anchorEl", 2);
+Jt([
+  y()
+], Pt.prototype, "dismissed", 2);
+Pt = Jt([
   b("baht-tooltip")
-], kt);
-var Is = Object.defineProperty, js = Object.getOwnPropertyDescriptor, It = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? js(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+], Pt);
+var Is = Object.defineProperty, Ms = Object.getOwnPropertyDescriptor, Mt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ms(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Is(e, i, s), s;
 };
-let ft = class extends y {
+let mt = class extends g {
   constructor() {
     super(...arguments), this.tone = "info", this.heading = "", this.message = "", this.dismissible = !1, this.dismissed = !1, this.generation = 0;
   }
@@ -701,30 +701,30 @@ let ft = class extends y {
     </div>`;
   }
 };
-It([
+Mt([
   l()
-], ft.prototype, "tone", 2);
-It([
+], mt.prototype, "tone", 2);
+Mt([
   l()
-], ft.prototype, "heading", 2);
-It([
+], mt.prototype, "heading", 2);
+Mt([
   l()
-], ft.prototype, "message", 2);
-It([
+], mt.prototype, "message", 2);
+Mt([
   l({ type: Boolean })
-], ft.prototype, "dismissible", 2);
-It([
-  $()
-], ft.prototype, "dismissed", 2);
-ft = It([
+], mt.prototype, "dismissible", 2);
+Mt([
+  y()
+], mt.prototype, "dismissed", 2);
+mt = Mt([
   b("baht-alert")
-], ft);
-var Ss = Object.defineProperty, Ms = Object.getOwnPropertyDescriptor, jt = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ms(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+], mt);
+var js = Object.defineProperty, Ss = Object.getOwnPropertyDescriptor, jt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ss(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
-  return a && s && Ss(e, i, s), s;
+  return a && s && js(e, i, s), s;
 };
-let mt = class extends y {
+let vt = class extends g {
   constructor() {
     super(...arguments), this.value = 0, this.max = 5, this.readonly = !1, this.label = "Rating", this.hover = 0;
   }
@@ -779,28 +779,28 @@ let mt = class extends y {
 };
 jt([
   l({ type: Number })
-], mt.prototype, "value", 2);
+], vt.prototype, "value", 2);
 jt([
   l({ type: Number })
-], mt.prototype, "max", 2);
+], vt.prototype, "max", 2);
 jt([
   l({ type: Boolean })
-], mt.prototype, "readonly", 2);
+], vt.prototype, "readonly", 2);
 jt([
   l()
-], mt.prototype, "label", 2);
+], vt.prototype, "label", 2);
 jt([
-  $()
-], mt.prototype, "hover", 2);
-mt = jt([
+  y()
+], vt.prototype, "hover", 2);
+vt = jt([
   b("baht-rating")
-], mt);
+], vt);
 var Ts = Object.defineProperty, As = Object.getOwnPropertyDescriptor, bt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? As(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ts(e, i, s), s;
 };
-let rt = class extends y {
+let ot = class extends g {
   constructor() {
     super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.label = "", this.disabled = !1, this.showValue = !0;
   }
@@ -821,7 +821,7 @@ let rt = class extends y {
           type="range"
           id=${this.inputId}
           aria-label=${this.label ? h : "Value"}
-          .value=${ot(String(this.value))}
+          .value=${lt(String(this.value))}
           min=${this.min}
           max=${this.max}
           step=${this.step}
@@ -835,34 +835,34 @@ let rt = class extends y {
 };
 bt([
   l({ type: Number })
-], rt.prototype, "value", 2);
+], ot.prototype, "value", 2);
 bt([
   l({ type: Number })
-], rt.prototype, "min", 2);
+], ot.prototype, "min", 2);
 bt([
   l({ type: Number })
-], rt.prototype, "max", 2);
+], ot.prototype, "max", 2);
 bt([
   l({ type: Number })
-], rt.prototype, "step", 2);
+], ot.prototype, "step", 2);
 bt([
   l()
-], rt.prototype, "label", 2);
+], ot.prototype, "label", 2);
 bt([
   l({ type: Boolean })
-], rt.prototype, "disabled", 2);
+], ot.prototype, "disabled", 2);
 bt([
   l({ type: Boolean, attribute: "show-value" })
-], rt.prototype, "showValue", 2);
-rt = bt([
+], ot.prototype, "showValue", 2);
+ot = bt([
   b("baht-range")
-], rt);
+], ot);
 var Ls = Object.defineProperty, Ns = Object.getOwnPropertyDescriptor, St = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Ns(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ls(e, i, s), s;
 };
-let vt = class extends y {
+let $t = class extends g {
   constructor() {
     super(...arguments), this.length = 6, this.value = "", this.disabled = !1, this.mode = "numeric", this.label = "One-time code", this._chars = [], this._lastValue = "", this._wasFull = !1;
   }
@@ -948,28 +948,28 @@ let vt = class extends y {
 };
 St([
   l({ type: Number })
-], vt.prototype, "length", 2);
+], $t.prototype, "length", 2);
 St([
   l()
-], vt.prototype, "value", 2);
+], $t.prototype, "value", 2);
 St([
   l({ type: Boolean })
-], vt.prototype, "disabled", 2);
+], $t.prototype, "disabled", 2);
 St([
   l()
-], vt.prototype, "mode", 2);
+], $t.prototype, "mode", 2);
 St([
   l()
-], vt.prototype, "label", 2);
-vt = St([
+], $t.prototype, "label", 2);
+$t = St([
   b("baht-otp")
-], vt);
-var qs = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, Mt = (t, e, i, a) => {
+], $t);
+var qs = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, Tt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Rs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && qs(e, i, s), s;
 };
-let $t = class extends y {
+let yt = class extends g {
   constructor() {
     super(...arguments), this.options = [], this.selected = [], this.multiple = !0, this.disabled = !1, this.label = "Filters";
   }
@@ -993,30 +993,30 @@ let $t = class extends y {
     </div>`;
   }
 };
-Mt([
+Tt([
   l({ attribute: !1 })
-], $t.prototype, "options", 2);
-Mt([
+], yt.prototype, "options", 2);
+Tt([
   l({ attribute: !1 })
-], $t.prototype, "selected", 2);
-Mt([
+], yt.prototype, "selected", 2);
+Tt([
   l({ type: Boolean })
-], $t.prototype, "multiple", 2);
-Mt([
+], yt.prototype, "multiple", 2);
+Tt([
   l({ type: Boolean })
-], $t.prototype, "disabled", 2);
-Mt([
+], yt.prototype, "disabled", 2);
+Tt([
   l()
-], $t.prototype, "label", 2);
-$t = Mt([
+], yt.prototype, "label", 2);
+yt = Tt([
   b("baht-filter")
-], $t);
-var zs = Object.defineProperty, Vs = Object.getOwnPropertyDescriptor, ce = (t, e, i, a) => {
+], yt);
+var zs = Object.defineProperty, Vs = Object.getOwnPropertyDescriptor, pe = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Vs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && zs(e, i, s), s;
 };
-let Vt = class extends y {
+let Kt = class extends g {
   constructor() {
     super(...arguments), this.variant = "rect", this.width = "100%", this.height = "";
   }
@@ -1029,24 +1029,24 @@ let Vt = class extends y {
     ></span>`;
   }
 };
-ce([
+pe([
   l()
-], Vt.prototype, "variant", 2);
-ce([
+], Kt.prototype, "variant", 2);
+pe([
   l()
-], Vt.prototype, "width", 2);
-ce([
+], Kt.prototype, "width", 2);
+pe([
   l()
-], Vt.prototype, "height", 2);
-Vt = ce([
+], Kt.prototype, "height", 2);
+Kt = pe([
   b("baht-skeleton")
-], Vt);
-var Ks = Object.defineProperty, Us = Object.getOwnPropertyDescriptor, Jt = (t, e, i, a) => {
+], Kt);
+var Ks = Object.defineProperty, Us = Object.getOwnPropertyDescriptor, Yt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Us(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ks(e, i, s), s;
 };
-let Pt = class extends y {
+let Ot = class extends g {
   constructor() {
     super(...arguments), this.value = null, this.tone = "primary", this.showLabel = !1, this.label = "Progress";
   }
@@ -1067,27 +1067,27 @@ let Pt = class extends y {
     </div>`;
   }
 };
-Jt([
+Yt([
   l({ type: Number })
-], Pt.prototype, "value", 2);
-Jt([
+], Ot.prototype, "value", 2);
+Yt([
   l()
-], Pt.prototype, "tone", 2);
-Jt([
+], Ot.prototype, "tone", 2);
+Yt([
   l({ type: Boolean, attribute: "show-label" })
-], Pt.prototype, "showLabel", 2);
-Jt([
+], Ot.prototype, "showLabel", 2);
+Yt([
   l()
-], Pt.prototype, "label", 2);
-Pt = Jt([
+], Ot.prototype, "label", 2);
+Ot = Yt([
   b("baht-progress")
-], Pt);
-var Hs = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, Se = (t, e, i, a) => {
+], Ot);
+var Hs = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, je = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Gs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Hs(e, i, s), s;
 };
-let ie = class extends y {
+let re = class extends g {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
@@ -1096,26 +1096,26 @@ let ie = class extends y {
     return n`<span class="baht-spinner${t}" role="status" aria-label=${this.label}></span>`;
   }
 };
-Se([
+je([
   l()
-], ie.prototype, "size", 2);
-Se([
+], re.prototype, "size", 2);
+je([
   l()
-], ie.prototype, "label", 2);
-ie = Se([
+], re.prototype, "label", 2);
+re = je([
   b("baht-spinner")
-], ie);
-var Ws = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, Yt = (t, e, i, a) => {
+], re);
+var Ws = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, Xt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Js(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ws(e, i, s), s;
 };
-let Ot = class extends y {
+let Ct = class extends g {
   constructor() {
     super(...arguments), this.heading = "", this.subtitle = "", this.hero = !1;
   }
   firstUpdated() {
-    ne(this, this.bodyEl);
+    he(this, this.bodyEl);
   }
   render() {
     return n`<div class="baht-card${this.hero ? " baht-card--hero" : ""}">
@@ -1125,32 +1125,32 @@ let Ot = class extends y {
     </div>`;
   }
 };
-Yt([
+Xt([
   l()
-], Ot.prototype, "heading", 2);
-Yt([
+], Ct.prototype, "heading", 2);
+Xt([
   l()
-], Ot.prototype, "subtitle", 2);
-Yt([
+], Ct.prototype, "subtitle", 2);
+Xt([
   l({ type: Boolean })
-], Ot.prototype, "hero", 2);
-Yt([
-  Bt(".baht-card-body")
-], Ot.prototype, "bodyEl", 2);
-Ot = Yt([
+], Ct.prototype, "hero", 2);
+Xt([
+  It(".baht-card-body")
+], Ct.prototype, "bodyEl", 2);
+Ct = Xt([
   b("baht-card")
-], Ot);
-var Ys = Object.defineProperty, Xs = Object.getOwnPropertyDescriptor, pe = (t, e, i, a) => {
+], Ct);
+var Ys = Object.defineProperty, Xs = Object.getOwnPropertyDescriptor, de = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Xs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ys(e, i, s), s;
 };
-let Kt = class extends y {
+let Ut = class extends g {
   constructor() {
     super(...arguments), this.legend = "", this.disabled = !1;
   }
   firstUpdated() {
-    ne(this, this.bodyEl);
+    he(this, this.bodyEl);
   }
   render() {
     return n`<fieldset class="baht-fieldset" ?disabled=${this.disabled}>
@@ -1159,24 +1159,24 @@ let Kt = class extends y {
     </fieldset>`;
   }
 };
-pe([
+de([
   l()
-], Kt.prototype, "legend", 2);
-pe([
+], Ut.prototype, "legend", 2);
+de([
   l({ type: Boolean })
-], Kt.prototype, "disabled", 2);
-pe([
-  Bt(".baht-fieldset-body")
-], Kt.prototype, "bodyEl", 2);
-Kt = pe([
+], Ut.prototype, "disabled", 2);
+de([
+  It(".baht-fieldset-body")
+], Ut.prototype, "bodyEl", 2);
+Ut = de([
   b("baht-fieldset")
-], Kt);
+], Ut);
 var Zs = Object.defineProperty, Qs = Object.getOwnPropertyDescriptor, ls = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Qs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Zs(e, i, s), s;
 };
-let De = class extends y {
+let De = class extends g {
   constructor() {
     super(...arguments), this.items = [];
   }
@@ -1206,12 +1206,12 @@ ls([
 De = ls([
   b("baht-timeline")
 ], De);
-var ta = Object.defineProperty, ea = Object.getOwnPropertyDescriptor, de = (t, e, i, a) => {
+var ta = Object.defineProperty, ea = Object.getOwnPropertyDescriptor, ue = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ea(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ta(e, i, s), s;
 };
-let Ct = class extends y {
+let Dt = class extends g {
   constructor() {
     super(...arguments), this.items = [], this.multiple = !1, this.openSet = /* @__PURE__ */ new Set(), this.itemsFingerprint = "";
   }
@@ -1220,7 +1220,7 @@ let Ct = class extends y {
   }
   willUpdate(t) {
     if (t.has("items")) {
-      const e = Ct.fingerprint(this.items);
+      const e = Dt.fingerprint(this.items);
       e !== this.itemsFingerprint && (this.itemsFingerprint = e, this.openSet = new Set(this.items.flatMap((i, a) => i.open ? [a] : [])));
     }
   }
@@ -1252,24 +1252,24 @@ let Ct = class extends y {
     </div>`;
   }
 };
-de([
+ue([
   l({ attribute: !1 })
-], Ct.prototype, "items", 2);
-de([
+], Dt.prototype, "items", 2);
+ue([
   l({ type: Boolean })
-], Ct.prototype, "multiple", 2);
-de([
-  $()
-], Ct.prototype, "openSet", 2);
-Ct = de([
+], Dt.prototype, "multiple", 2);
+ue([
+  y()
+], Dt.prototype, "openSet", 2);
+Dt = ue([
   b("baht-accordion")
-], Ct);
-var sa = Object.defineProperty, aa = Object.getOwnPropertyDescriptor, Xt = (t, e, i, a) => {
+], Dt);
+var sa = Object.defineProperty, aa = Object.getOwnPropertyDescriptor, Zt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? aa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && sa(e, i, s), s;
 };
-let Dt = class extends y {
+let Ft = class extends g {
   constructor() {
     super(...arguments), this.href = "", this.label = "", this.external = !1, this.externalHint = "opens in new tab";
   }
@@ -1282,27 +1282,27 @@ let Dt = class extends y {
     >${this.label}${this.external ? n` <span class="baht-link-external" aria-hidden="true">↗</span><span class="baht-visually-hidden"> (${this.externalHint})</span>` : h}</a>`;
   }
 };
-Xt([
+Zt([
   l()
-], Dt.prototype, "href", 2);
-Xt([
+], Ft.prototype, "href", 2);
+Zt([
   l()
-], Dt.prototype, "label", 2);
-Xt([
+], Ft.prototype, "label", 2);
+Zt([
   l({ type: Boolean })
-], Dt.prototype, "external", 2);
-Xt([
+], Ft.prototype, "external", 2);
+Zt([
   l({ attribute: "external-hint" })
-], Dt.prototype, "externalHint", 2);
-Dt = Xt([
+], Ft.prototype, "externalHint", 2);
+Ft = Zt([
   b("baht-link")
-], Dt);
-var ia = Object.defineProperty, ra = Object.getOwnPropertyDescriptor, Me = (t, e, i, a) => {
+], Ft);
+var ia = Object.defineProperty, ra = Object.getOwnPropertyDescriptor, Se = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ra(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ia(e, i, s), s;
 };
-let re = class extends y {
+let oe = class extends g {
   constructor() {
     super(...arguments), this.items = [], this.separator = "›";
   }
@@ -1327,30 +1327,30 @@ let re = class extends y {
     </nav>`;
   }
 };
-Me([
+Se([
   l({ attribute: !1 })
-], re.prototype, "items", 2);
-Me([
+], oe.prototype, "items", 2);
+Se([
   l()
-], re.prototype, "separator", 2);
-re = Me([
+], oe.prototype, "separator", 2);
+oe = Se([
   b("baht-breadcrumbs")
-], re);
+], oe);
 var oa = Object.getOwnPropertyDescriptor, la = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? oa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Ne = class extends J {
+let Ne = class extends Y {
   renderControl() {
     return n`<input
       class="baht-control baht-control--text"
       id=${this.controlId}
       type=${this.field.type === "email" ? "email" : this.field.type === "password" ? "password" : "text"}
-      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
-      placeholder=${L(this.field.placeholder)}
-      maxlength=${L(this.field.max_length)}
-      autocomplete=${L(this.field.autocomplete)}
+      .value=${lt(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${N(this.field.placeholder)}
+      maxlength=${N(this.field.max_length)}
+      autocomplete=${N(this.field.autocomplete)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1368,16 +1368,16 @@ var na = Object.getOwnPropertyDescriptor, ha = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let qe = class extends J {
+let qe = class extends Y {
   renderControl() {
     return n`<textarea
       class="baht-control baht-control--textarea"
       id=${this.controlId}
-      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
-      placeholder=${L(this.field.placeholder)}
-      maxlength=${L(this.field.max_length)}
+      .value=${lt(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${N(this.field.placeholder)}
+      maxlength=${N(this.field.max_length)}
       rows=${this.field.rows ?? 3}
-      autocomplete=${L(this.field.autocomplete)}
+      autocomplete=${N(this.field.autocomplete)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1395,17 +1395,17 @@ var ca = Object.getOwnPropertyDescriptor, pa = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Re = class extends J {
+let Re = class extends Y {
   renderControl() {
     return n`<input
       class="baht-control baht-control--number"
       id=${this.controlId}
       type="number"
-      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
-      placeholder=${L(this.field.placeholder)}
-      min=${L(this.field.min)}
-      max=${L(this.field.max)}
-      step=${L(this.field.step)}
+      .value=${lt(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${N(this.field.placeholder)}
+      min=${N(this.field.min)}
+      max=${N(this.field.max)}
+      step=${N(this.field.step)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1427,7 +1427,7 @@ var da = Object.defineProperty, ua = Object.getOwnPropertyDescriptor, Te = (t, e
   return a && s && da(e, i, s), s;
 };
 const ba = 500;
-let oe = class extends J {
+let le = class extends Y {
   constructor() {
     super(...arguments), this.open = !1, this.active = 0, this.typeBuffer = "", this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
@@ -1585,20 +1585,20 @@ let oe = class extends J {
   }
 };
 Te([
-  $()
-], oe.prototype, "open", 2);
+  y()
+], le.prototype, "open", 2);
 Te([
-  $()
-], oe.prototype, "active", 2);
-oe = Te([
+  y()
+], le.prototype, "active", 2);
+le = Te([
   b("baht-select")
-], oe);
+], le);
 var fa = Object.getOwnPropertyDescriptor, ma = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? fa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let ze = class extends J {
+let ze = class extends Y {
   get selected() {
     return Array.isArray(this.value) ? this.value : [];
   }
@@ -1618,7 +1618,7 @@ let ze = class extends J {
           <input
             type="checkbox"
             value=${t.key}
-            .checked=${ot(this.selected.includes(t.key))}
+            .checked=${lt(this.selected.includes(t.key))}
             ?disabled=${this.disabled || this.readonly}
             @change=${(e) => this.toggle(t.key, e.target.checked)}
           />
@@ -1636,7 +1636,7 @@ var va = Object.getOwnPropertyDescriptor, $a = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Ve = class extends J {
+let Ve = class extends Y {
   /** Label sits beside the box, so suppress the block label. */
   renderLabel() {
     return h;
@@ -1646,7 +1646,7 @@ let Ve = class extends J {
       <input
         type="checkbox"
         id=${this.controlId}
-        .checked=${ot(this.value === !0)}
+        .checked=${lt(this.value === !0)}
         ?disabled=${this.disabled || this.readonly}
         ?required=${this.required}
         aria-invalid=${this.invalid}
@@ -1667,7 +1667,7 @@ var ya = Object.getOwnPropertyDescriptor, ga = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Ke = class extends J {
+let Ke = class extends Y {
   renderControl() {
     return n`<div
       class="baht-control baht-control--radio"
@@ -1683,7 +1683,7 @@ let Ke = class extends J {
             type="radio"
             name=${this.controlId}
             value=${t.key}
-            .checked=${ot(this.value === t.key)}
+            .checked=${lt(this.value === t.key)}
             ?disabled=${this.disabled || this.readonly}
             @change=${() => this.emitInput(t.key)}
           />
@@ -1701,7 +1701,7 @@ var wa = Object.getOwnPropertyDescriptor, xa = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Ue = class extends J {
+let Ue = class extends Y {
   renderLabel() {
     return h;
   }
@@ -1712,7 +1712,7 @@ let Ue = class extends J {
         role="switch"
         id=${this.controlId}
         aria-checked=${this.value === !0 ? "true" : "false"}
-        .checked=${ot(this.value === !0)}
+        .checked=${lt(this.value === !0)}
         ?disabled=${this.disabled || this.readonly}
         ?required=${this.required}
         aria-invalid=${this.invalid}
@@ -1734,7 +1734,7 @@ var _a = Object.getOwnPropertyDescriptor, ka = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let He = class extends J {
+let He = class extends Y {
   constructor() {
     super(...arguments), this.lastEmitted = null;
   }
@@ -1744,7 +1744,7 @@ let He = class extends J {
       id=${this.controlId}
       type="text"
       autocomplete="off"
-      placeholder=${L(this.field.placeholder)}
+      placeholder=${N(this.field.placeholder)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1781,7 +1781,7 @@ let He = class extends J {
     We(this.fp.selectedDates, t) || (t.length === 0 ? this.fp.clear(!1) : this.fp.setDate(t, !1));
   }
   options() {
-    const t = this.field, e = $e(t), i = Lt(t.min), a = Lt(t.max);
+    const t = this.field, e = $e(t), i = Nt(t.min), a = Nt(t.max);
     return {
       static: !0,
       disableMobile: !0,
@@ -1824,15 +1824,15 @@ let He = class extends J {
     t && (this.todayBtn && (this.todayBtn.disabled = !this.todayAllowed()), this.clearBtn && (this.clearBtn.disabled = t.selectedDates.length === 0));
   }
   todayAllowed() {
-    const t = _t(/* @__PURE__ */ new Date()), e = Lt(this.field.min), i = Lt(this.field.max);
-    if (e && t < _t(e) || i && t > _t(i)) return !1;
+    const t = kt(/* @__PURE__ */ new Date()), e = Nt(this.field.min), i = Nt(this.field.max);
+    if (e && t < kt(e) || i && t > kt(i)) return !1;
     for (const a of Je(this.field) ?? [])
       if (a instanceof Date) {
         if (Ge(a, t)) return !1;
       } else if (typeof a == "function") {
         if (a(t)) return !1;
       } else if (typeof a == "object" && "from" in a) {
-        const s = _t(new Date(a.from)), r = _t(new Date(a.to));
+        const s = kt(new Date(a.from)), r = kt(new Date(a.to));
         if (t >= s && t <= r) return !1;
       }
     return !0;
@@ -1840,7 +1840,7 @@ let He = class extends J {
   pickToday() {
     const t = this.fp;
     if (!t || !this.todayAllowed()) return;
-    const e = _t(/* @__PURE__ */ new Date());
+    const e = kt(/* @__PURE__ */ new Date());
     switch ($e(this.field)) {
       case "range":
         t.setDate([e, e], !0);
@@ -1860,11 +1860,11 @@ let He = class extends J {
   }
   /** Host value (any mode) -> the Date list flatpickr works with. */
   datesOf(t) {
-    return ds(t).map(Lt).filter((e) => e !== null);
+    return ds(t).map(Nt).filter((e) => e !== null);
   }
   /** flatpickr's selection -> the value shape of the field's mode. */
   toValue(t) {
-    const e = t.map(Rt);
+    const e = t.map(zt);
     switch ($e(this.field)) {
       case "range":
         return e.length === 2 ? [e[0], e[1]] : null;
@@ -1878,14 +1878,14 @@ let He = class extends J {
 He = ka([
   b("baht-datepicker")
 ], He);
-function _t(t) {
+function kt(t) {
   return new Date(t.getFullYear(), t.getMonth(), t.getDate());
 }
 function Ge(t, e) {
-  return Rt(t) === Rt(e);
+  return zt(t) === zt(e);
 }
 function We(t, e) {
-  return t.length !== e.length ? !1 : t.every((i, a) => Rt(i) === Rt(e[a]));
+  return t.length !== e.length ? !1 : t.every((i, a) => zt(i) === zt(e[a]));
 }
 function Je(t) {
   const e = [];
@@ -1896,7 +1896,7 @@ function Je(t) {
   const i = t.disabled_weekdays;
   return i != null && i.length && e.push((a) => i.includes(a.getDay())), e;
 }
-var Pa = Object.defineProperty, Oa = Object.getOwnPropertyDescriptor, Zt = (t, e, i, a) => {
+var Pa = Object.defineProperty, Oa = Object.getOwnPropertyDescriptor, Qt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Oa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Pa(e, i, s), s;
@@ -1907,7 +1907,7 @@ function Ye(t) {
 function ge(t) {
   return t >= 1024 * 1024 ? `${(t / 1024 / 1024).toFixed(1)} MB` : t >= 1024 ? `${Math.round(t / 1024)} KB` : `${t} B`;
 }
-let Ft = class extends J {
+let Et = class extends Y {
   constructor() {
     super(...arguments), this.uploadingCount = 0, this.uploadError = null, this.rejectedNames = [];
   }
@@ -1973,7 +1973,7 @@ let Ft = class extends J {
           class="baht-control baht-control--file baht-dropzone-input"
           id=${this.controlId}
           type="file"
-          accept=${L(this.field.accept)}
+          accept=${N(this.field.accept)}
           ?multiple=${this.field.multiple}
           ?disabled=${t}
           ?required=${this.required}
@@ -1981,7 +1981,7 @@ let Ft = class extends J {
           aria-describedby=${this.describedBy}
           @change=${(a) => this.onPick(a)}
         />
-        <span class="baht-dropzone-icon" aria-hidden="true">${H("upload")}</span>
+        <span class="baht-dropzone-icon" aria-hidden="true">${W("upload")}</span>
         <span class="baht-dropzone-text">
           <label class="baht-dropzone-action" for=${this.controlId}
             >${this.field.multiple ? m("chooseFiles") : m("chooseFile")}</label
@@ -2014,28 +2014,28 @@ let Ft = class extends J {
                 title=${m("removeFile")}
                 @click=${() => this.emitRefs(this.refs.filter((s) => s !== a))}
               >
-                ${H("close")}
+                ${W("close")}
               </button>`}
         </span>`
     )}`;
   }
 };
-Zt([
+Qt([
   l({ attribute: !1 })
-], Ft.prototype, "uploader", 2);
-Zt([
-  $()
-], Ft.prototype, "uploadingCount", 2);
-Zt([
-  $()
-], Ft.prototype, "uploadError", 2);
-Zt([
-  $()
-], Ft.prototype, "rejectedNames", 2);
-Ft = Zt([
+], Et.prototype, "uploader", 2);
+Qt([
+  y()
+], Et.prototype, "uploadingCount", 2);
+Qt([
+  y()
+], Et.prototype, "uploadError", 2);
+Qt([
+  y()
+], Et.prototype, "rejectedNames", 2);
+Et = Qt([
   b("baht-file")
-], Ft);
-var Ca = Object.defineProperty, Da = Object.getOwnPropertyDescriptor, B = (t, e, i, a) => {
+], Et);
+var Ca = Object.defineProperty, Da = Object.getOwnPropertyDescriptor, I = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Da(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ca(e, i, s), s;
@@ -2068,7 +2068,7 @@ function Ba(t) {
 function we(t) {
   return t >= 1024 * 1024 ? `${(t / 1024 / 1024).toFixed(1)} MB` : t >= 1024 ? `${Math.round(t / 1024)} KB` : `${t} B`;
 }
-let D = class extends y {
+let F = class extends g {
   constructor() {
     super(...arguments), this.url = "", this.method = "POST", this.fieldName = "file", this.responseKey = "url", this.headers = {}, this.withCredentials = !1, this.value = null, this.label = "", this.hint = "", this.multiple = !1, this.disabled = !1, this.required = !1, this.error = null, this.pending = [], this.rejectedNames = [], this.dragging = !1, this.known = /* @__PURE__ */ new Map(), this.seq = 0;
   }
@@ -2194,22 +2194,22 @@ let D = class extends y {
           class="baht-dropzone-input"
           id=${this.inputId}
           type="file"
-          accept=${L(this.accept)}
+          accept=${N(this.accept)}
           ?multiple=${this.multiple}
           ?disabled=${this.disabled}
           ?required=${this.required}
           aria-invalid=${e ? "true" : "false"}
-          aria-describedby=${L(r)}
+          aria-describedby=${N(r)}
           @change=${(c) => this.onPick(c)}
         />
-        <span class="baht-dropzone-icon" aria-hidden="true">${H("upload")}</span>
+        <span class="baht-dropzone-icon" aria-hidden="true">${W("upload")}</span>
         <span class="baht-dropzone-text">
           <label class="baht-dropzone-action" for=${this.inputId}
             >${this.multiple ? m("chooseFiles") : m("chooseFile")}</label
           >
           <span class="baht-dropzone-or">${m("orDropHere")}</span>
         </span>
-        ${i ? n`<span class="baht-dropzone-hint" id=${L(a)}>${i}</span>` : h}
+        ${i ? n`<span class="baht-dropzone-hint" id=${N(a)}>${i}</span>` : h}
       </div>
 
       ${this.pending.length > 0 || this.urls.length > 0 ? n`<ul class="baht-upload-list" aria-live="polite" aria-busy=${t ? "true" : "false"}>
@@ -2219,13 +2219,13 @@ let D = class extends y {
       ${this.rejectedNames.length > 0 ? n`<p class="baht-error" role="alert">
               ${m("fileRejectedTooLarge", { names: this.rejectedNames.join(", ") })}
             </p>` : h}
-      ${this.error ? n`<p class="baht-error" id=${L(s)} role="alert">${this.error}</p>` : h}
+      ${this.error ? n`<p class="baht-error" id=${N(s)} role="alert">${this.error}</p>` : h}
     </div>`;
   }
   renderStored(t) {
     const e = this.fileFor(t);
     return n`<li class="baht-file-chip baht-file-chip--done">
-      <span class="baht-file-chip-icon" aria-hidden="true">${H("check")}</span>
+      <span class="baht-file-chip-icon" aria-hidden="true">${W("check")}</span>
       <a class="baht-file-name" href=${t} target="_blank" rel="noreferrer"
         >${e.name}<span class="baht-visually-hidden"> (${m("opensInNewTab")})</span></a
       >
@@ -2237,7 +2237,7 @@ let D = class extends y {
               title=${m("removeFile")}
               @click=${() => this.emitValue(this.urls.filter((i) => i !== t))}
             >
-              ${H("close")}
+              ${W("close")}
             </button>`}
     </li>`;
   }
@@ -2256,7 +2256,7 @@ let D = class extends y {
                 title=${m("removeFile")}
                 @click=${() => this.dismiss(t)}
               >
-                ${H("close")}
+                ${W("close")}
               </button>` : n`<span
               class="baht-upload-bar"
               role="progressbar"
@@ -2269,69 +2269,69 @@ let D = class extends y {
     </li>`;
   }
 };
-B([
+I([
   l()
-], D.prototype, "url", 2);
-B([
+], F.prototype, "url", 2);
+I([
   l()
-], D.prototype, "method", 2);
-B([
+], F.prototype, "method", 2);
+I([
   l({ attribute: "field-name" })
-], D.prototype, "fieldName", 2);
-B([
+], F.prototype, "fieldName", 2);
+I([
   l({ attribute: "response-key" })
-], D.prototype, "responseKey", 2);
-B([
+], F.prototype, "responseKey", 2);
+I([
   l({ attribute: !1 })
-], D.prototype, "headers", 2);
-B([
+], F.prototype, "headers", 2);
+I([
   l({ type: Boolean, attribute: "with-credentials" })
-], D.prototype, "withCredentials", 2);
-B([
+], F.prototype, "withCredentials", 2);
+I([
   l({ attribute: !1 })
-], D.prototype, "value", 2);
-B([
+], F.prototype, "value", 2);
+I([
   l()
-], D.prototype, "label", 2);
-B([
+], F.prototype, "label", 2);
+I([
   l()
-], D.prototype, "hint", 2);
-B([
+], F.prototype, "hint", 2);
+I([
   l()
-], D.prototype, "accept", 2);
-B([
+], F.prototype, "accept", 2);
+I([
   l({ type: Boolean })
-], D.prototype, "multiple", 2);
-B([
+], F.prototype, "multiple", 2);
+I([
   l({ type: Number, attribute: "max-size" })
-], D.prototype, "maxSize", 2);
-B([
+], F.prototype, "maxSize", 2);
+I([
   l({ type: Boolean })
-], D.prototype, "disabled", 2);
-B([
+], F.prototype, "disabled", 2);
+I([
   l({ type: Boolean })
-], D.prototype, "required", 2);
-B([
+], F.prototype, "required", 2);
+I([
   l()
-], D.prototype, "error", 2);
-B([
-  $()
-], D.prototype, "pending", 2);
-B([
-  $()
-], D.prototype, "rejectedNames", 2);
-B([
-  $()
-], D.prototype, "dragging", 2);
-D = B([
+], F.prototype, "error", 2);
+I([
+  y()
+], F.prototype, "pending", 2);
+I([
+  y()
+], F.prototype, "rejectedNames", 2);
+I([
+  y()
+], F.prototype, "dragging", 2);
+F = I([
   b("baht-upload")
-], D);
-var Ia = Object.defineProperty, ja = Object.getOwnPropertyDescriptor, ns = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? ja(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+], F);
+var Ia = Object.defineProperty, Ma = Object.getOwnPropertyDescriptor, ns = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ma(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ia(e, i, s), s;
 };
-let Fe = class extends y {
+let Fe = class extends g {
   render() {
     if (!this.field) return h;
     const t = this.field.variant ?? "body";
@@ -2344,12 +2344,12 @@ ns([
 Fe = ns([
   b("baht-text")
 ], Fe);
-var Sa = Object.defineProperty, Ma = Object.getOwnPropertyDescriptor, hs = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ma(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+var ja = Object.defineProperty, Sa = Object.getOwnPropertyDescriptor, hs = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Sa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
-  return a && s && Sa(e, i, s), s;
+  return a && s && ja(e, i, s), s;
 };
-let Ee = class extends y {
+let Ee = class extends g {
   render() {
     return this.field ? n`<div class="baht-section">
       <span class="baht-section-label">${this.field.text ?? this.field.label ?? ""}</span>
@@ -2362,12 +2362,12 @@ hs([
 Ee = hs([
   b("baht-section")
 ], Ee);
-var Ta = Object.defineProperty, Aa = Object.getOwnPropertyDescriptor, ue = (t, e, i, a) => {
+var Ta = Object.defineProperty, Aa = Object.getOwnPropertyDescriptor, be = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Aa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ta(e, i, s), s;
 };
-let Ut = class extends y {
+let Ht = class extends g {
   constructor() {
     super(...arguments), this.total = 0, this.label = "", this.color = "";
   }
@@ -2381,31 +2381,31 @@ let Ut = class extends y {
     </div>`;
   }
 };
-ue([
+be([
   l({ type: Number })
-], Ut.prototype, "total", 2);
-ue([
+], Ht.prototype, "total", 2);
+be([
   l()
-], Ut.prototype, "label", 2);
-ue([
+], Ht.prototype, "label", 2);
+be([
   l()
-], Ut.prototype, "color", 2);
-Ut = ue([
+], Ht.prototype, "color", 2);
+Ht = be([
   b("baht-stat-chart")
-], Ut);
-var La = Object.defineProperty, Tt = (t, e, i, a) => {
+], Ht);
+var La = Object.defineProperty, At = (t, e, i, a) => {
   for (var s = void 0, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = o(e, i, s) || s);
   return s && La(e, i, s), s;
 };
 const Na = 10;
-function nt(t, e) {
+function ft(t, e) {
   return e && t === 0 ? e : `var(--baht-chart-${t % Na + 1})`;
 }
 function Xe(t, e = 5) {
   return `var(--baht-chart-seq-${Math.min(e - 1, Math.max(0, t)) + 1})`;
 }
-function qt(t, e = "number", i = "THB") {
+function Rt(t, e = "number", i = "THB") {
   if (!Number.isFinite(t)) return "—";
   switch (e) {
     case "currency":
@@ -2435,7 +2435,7 @@ function Be(t, e = 4) {
   for (let c = 0; c <= r + s / 1e3; c += s) o.push(Number(c.toFixed(10)));
   return o;
 }
-function le(t, e) {
+function ne(t, e) {
   const [i, a] = t, [s, r] = e, o = a - i;
   return !Number.isFinite(o) || o === 0 ? () => s : (c) => s + (c - i) / o * (r - s);
 }
@@ -2444,7 +2444,7 @@ function qa(t, e, i = "Other") {
   const a = t.slice(0, e - 1), s = t.slice(e - 1).reduce((r, o) => r + o.count, 0);
   return [...a, { label: i, count: s }];
 }
-function be(t, e, i, a = "View as table") {
+function fe(t, e, i, a = "View as table") {
   return n`<details class="baht-chart-table">
     <summary>${a}</summary>
     <table>
@@ -2466,13 +2466,13 @@ function be(t, e, i, a = "View as table") {
     </table>
   </details>`;
 }
-class tt extends y {
+class st extends g {
   constructor() {
     super(...arguments), this.emptyMessage = "No data to chart", this.loading = !1, this.showTable = !0, this.format = "number", this.currency = "THB", this.held = null;
   }
   /** Value → display text using this chart's `format` / `currency`. */
   fmt(e) {
-    return qt(e, this.format, this.currency);
+    return Rt(e, this.format, this.currency);
   }
   /**
    * The snapshot to draw. While `loading` is set the previous one is returned,
@@ -2495,7 +2495,7 @@ class tt extends y {
    * untrusted data (interaction.md).
    */
   showTip(e, i) {
-    var g;
+    var $;
     const a = this.tipEl;
     if (!a) return;
     a.textContent = i, a.hidden = !1;
@@ -2506,7 +2506,7 @@ class tt extends y {
     if (typeof o.clientX == "number" && (o.clientX !== 0 || o.clientY !== 0))
       c = o.clientX - r.left, f = o.clientY - r.top;
     else {
-      const _ = e.currentTarget, p = (g = _ == null ? void 0 : _.getBoundingClientRect) == null ? void 0 : g.call(_);
+      const w = e.currentTarget, p = ($ = w == null ? void 0 : w.getBoundingClientRect) == null ? void 0 : $.call(w);
       c = p ? p.left + p.width / 2 - r.left : 0, f = p ? p.top - r.top : 0;
     }
     a.style.left = `${Math.round(c)}px`, a.style.top = `${Math.round(f)}px`;
@@ -2538,78 +2538,78 @@ class tt extends y {
     </div>`;
   }
 }
-Tt([
+At([
   l({ attribute: "empty-message" })
-], tt.prototype, "emptyMessage");
-Tt([
+], st.prototype, "emptyMessage");
+At([
   l({ type: Boolean, reflect: !0 })
-], tt.prototype, "loading");
-Tt([
+], st.prototype, "loading");
+At([
   l({ type: Boolean, attribute: "show-table" })
-], tt.prototype, "showTable");
-Tt([
+], st.prototype, "showTable");
+At([
   l()
-], tt.prototype, "format");
-Tt([
+], st.prototype, "format");
+At([
   l()
-], tt.prototype, "currency");
-Tt([
-  Bt(".baht-chart-tooltip")
-], tt.prototype, "tipEl");
-var Ra = Object.defineProperty, za = Object.getOwnPropertyDescriptor, gt = (t, e, i, a) => {
+], st.prototype, "currency");
+At([
+  It(".baht-chart-tooltip")
+], st.prototype, "tipEl");
+var Ra = Object.defineProperty, za = Object.getOwnPropertyDescriptor, wt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? za(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ra(e, i, s), s;
 };
-let ct = class extends y {
+let ct = class extends g {
   constructor() {
     super(...arguments), this.values = [], this.width = 96, this.height = 24, this.accentLast = !0, this.color = "", this.label = "";
   }
   render() {
-    const t = (this.values ?? []).filter((C) => Number.isFinite(C));
+    const t = (this.values ?? []).filter((x) => Number.isFinite(x));
     if (t.length < 2) return h;
-    const e = Math.max(16, this.width), i = Math.max(8, this.height), a = 3, s = Math.min(...t), r = Math.max(...t), o = le([0, t.length - 1], [a, e - a]), c = le([s, r === s ? s + 1 : r], [i - a, a]), f = t.map((C, d) => `${o(d).toFixed(2)},${c(C).toFixed(2)}`).join(" "), g = o(t.length - 1), _ = c(t[t.length - 1]), p = this.color || "var(--baht-chart-muted)", w = this.label || `Trend of ${t.length} points`;
+    const e = Math.max(16, this.width), i = Math.max(8, this.height), a = 3, s = Math.min(...t), r = Math.max(...t), o = ne([0, t.length - 1], [a, e - a]), c = ne([s, r === s ? s + 1 : r], [i - a, a]), f = t.map((x, u) => `${o(u).toFixed(2)},${c(x).toFixed(2)}`).join(" "), $ = o(t.length - 1), w = c(t[t.length - 1]), p = this.color || "var(--baht-chart-muted)", P = this.label || `Trend of ${t.length} points`;
     return n`<svg
       class="baht-sparkline"
       width=${e}
       height=${i}
       viewBox="0 0 ${e} ${i}"
       role="img"
-      aria-label=${w}
+      aria-label=${P}
     >
-      ${A`<polyline class="baht-sparkline-line" points=${f} fill="none" stroke=${p}/>`}
-      ${this.accentLast ? A`<circle class="baht-sparkline-dot" cx=${g.toFixed(2)} cy=${_.toFixed(2)} r="3"
+      ${L`<polyline class="baht-sparkline-line" points=${f} fill="none" stroke=${p}/>`}
+      ${this.accentLast ? L`<circle class="baht-sparkline-dot" cx=${$.toFixed(2)} cy=${w.toFixed(2)} r="3"
               fill="var(--baht-chart-1)"/>` : h}
     </svg>`;
   }
 };
-gt([
+wt([
   l({ type: Array })
 ], ct.prototype, "values", 2);
-gt([
+wt([
   l({ type: Number })
 ], ct.prototype, "width", 2);
-gt([
+wt([
   l({ type: Number })
 ], ct.prototype, "height", 2);
-gt([
+wt([
   l({ type: Boolean, attribute: "accent-last" })
 ], ct.prototype, "accentLast", 2);
-gt([
+wt([
   l()
 ], ct.prototype, "color", 2);
-gt([
+wt([
   l()
 ], ct.prototype, "label", 2);
-ct = gt([
+ct = wt([
   b("baht-sparkline")
 ], ct);
-var Va = Object.defineProperty, Ka = Object.getOwnPropertyDescriptor, Y = (t, e, i, a) => {
+var Va = Object.defineProperty, Ka = Object.getOwnPropertyDescriptor, X = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Ka(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Va(e, i, s), s;
 };
-let K = class extends y {
+let K = class extends g {
   constructor() {
     super(...arguments), this.label = "", this.value = 0, this.format = "number", this.currency = "THB", this.delta = null, this.deltaKind = "pct", this.deltaLabel = "", this.upIsGood = !0, this.trend = [], this.size = "md";
   }
@@ -2624,19 +2624,20 @@ let K = class extends y {
   }
   get deltaText() {
     const t = this.delta ?? 0, e = Math.abs(t);
-    return this.deltaKind === "pct" ? `${qt(e / 100, "percent")}` : qt(e, this.format, this.currency);
+    return this.deltaKind === "pct" ? `${Rt(e / 100, "percent")}` : Rt(e, this.format, this.currency);
   }
   render() {
     const t = this.delta != null && Number.isFinite(this.delta), e = this.tone, i = (this.delta ?? 0) > 0 ? "up" : (this.delta ?? 0) < 0 ? "down" : "flat";
     return n`<div class="baht-stat${this.size === "hero" ? " baht-stat--hero" : ""}">
       ${this.label ? n`<div class="baht-stat-label">${this.label}</div>` : h}
-      <div class="baht-stat-value">${qt(this.value, this.format, this.currency)}</div>
+      <div class="baht-stat-value">${Rt(this.value, this.format, this.currency)}</div>
       ${t ? n`<div class="baht-stat-delta baht-stat-delta--${e}">
               <span class="baht-stat-arrow" aria-hidden="true">${this.arrow}</span>
               <span class="baht-stat-delta-value">${this.deltaText}</span>
               <span class="baht-visually-hidden">${i}</span>
               ${this.deltaLabel ? n`<span class="baht-stat-delta-label">${this.deltaLabel}</span>` : h}
             </div>` : h}
+      ${!t && this.deltaLabel ? n`<div class="baht-stat-caption">${this.deltaLabel}</div>` : h}
       ${this.trend.length > 1 ? n`<baht-sparkline
               class="baht-stat-trend"
               .values=${this.trend}
@@ -2645,46 +2646,46 @@ let K = class extends y {
     </div>`;
   }
 };
-Y([
+X([
   l()
 ], K.prototype, "label", 2);
-Y([
+X([
   l({ type: Number })
 ], K.prototype, "value", 2);
-Y([
+X([
   l()
 ], K.prototype, "format", 2);
-Y([
+X([
   l()
 ], K.prototype, "currency", 2);
-Y([
+X([
   l({ type: Number })
 ], K.prototype, "delta", 2);
-Y([
+X([
   l({ attribute: "delta-kind" })
 ], K.prototype, "deltaKind", 2);
-Y([
+X([
   l({ attribute: "delta-label" })
 ], K.prototype, "deltaLabel", 2);
-Y([
+X([
   l({ type: Boolean, attribute: "up-is-good" })
 ], K.prototype, "upIsGood", 2);
-Y([
+X([
   l({ type: Array })
 ], K.prototype, "trend", 2);
-Y([
+X([
   l()
 ], K.prototype, "size", 2);
-K = Y([
+K = X([
   b("baht-stat")
 ], K);
-var Ua = Object.defineProperty, Ha = Object.getOwnPropertyDescriptor, At = (t, e, i, a) => {
+var Ua = Object.defineProperty, Ha = Object.getOwnPropertyDescriptor, Lt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Ha(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ua(e, i, s), s;
 };
 const Ze = 6;
-let G = class extends tt {
+let J = class extends st {
   constructor() {
     super(...arguments), this.groups = [], this.total = null, this.color = "", this.centerLabel = "records", this.otherLabel = "Other";
   }
@@ -2692,24 +2693,24 @@ let G = class extends tt {
     const t = this.hold(this.groups ?? []);
     if (t.length === 0)
       return n`<div class=${this.rootClass("baht-donut-chart")}>${this.renderEmpty()}</div>`;
-    const e = qa(t, Ze, this.otherLabel), i = e.reduce((p, w) => p + w.count, 0) || 1, a = this.total ?? t.reduce((p, w) => p + w.count, 0), s = G.R, r = 2 * Math.PI * s, o = e.length > 1 ? G.GAP : 0, c = t.length > Ze;
+    const e = qa(t, Ze, this.otherLabel), i = e.reduce((p, P) => p + P.count, 0) || 1, a = this.total ?? t.reduce((p, P) => p + P.count, 0), s = J.R, r = 2 * Math.PI * s, o = e.length > 1 ? J.GAP : 0, c = t.length > Ze;
     let f = 0;
-    const g = e.map((p, w) => {
-      const C = p.count / i, d = Math.max(0, C * r - o), v = {
+    const $ = e.map((p, P) => {
+      const x = p.count / i, u = Math.max(0, x * r - o), v = {
         ...p,
-        frac: C,
-        dash: `${d} ${r - d}`,
+        frac: x,
+        dash: `${u} ${r - u}`,
         offset: -f * r,
         // the folded tail is grey — never a generated ninth hue
-        color: c && w === e.length - 1 ? "var(--baht-chart-muted)" : nt(w, this.color || void 0)
+        color: c && P === e.length - 1 ? "var(--baht-chart-muted)" : ft(P, this.color || void 0)
       };
-      return f += C, v;
-    }), _ = `${a} ${this.centerLabel}: ${g.map((p) => `${p.label || "(empty)"} ${p.count} (${Math.round(p.frac * 100)}%)`).join(", ")}`;
+      return f += x, v;
+    }), w = `${a} ${this.centerLabel}: ${$.map((p) => `${p.label || "(empty)"} ${p.count} (${Math.round(p.frac * 100)}%)`).join(", ")}`;
     return n`<div class=${this.rootClass("baht-donut-chart")}>
-      <svg width="160" height="160" viewBox="0 0 160 160" role="img" aria-label=${_}>
+      <svg width="160" height="160" viewBox="0 0 160 160" role="img" aria-label=${w}>
         <g transform="translate(80,80) rotate(-90)">
-          ${g.map(
-      (p) => A`<circle r=${s} cx="0" cy="0" fill="none" stroke=${p.color}
+          ${$.map(
+      (p) => L`<circle r=${s} cx="0" cy="0" fill="none" stroke=${p.color}
                 stroke-width="22" stroke-dasharray=${p.dash} stroke-dashoffset=${p.offset}/>`
     )}
         </g>
@@ -2717,7 +2718,7 @@ let G = class extends tt {
         <text x="80" y="94" text-anchor="middle" class="baht-donut-chart-sub">${this.centerLabel}</text>
       </svg>
       <div class="baht-chart-legend">
-        ${g.map(
+        ${$.map(
       (p) => n`<div class="baht-chart-legend-row">
             <span class="baht-chart-swatch" style="background:${p.color}" aria-hidden="true"></span>
             <span class="baht-chart-legend-label">${p.label || "(empty)"}</span>
@@ -2726,10 +2727,10 @@ let G = class extends tt {
           </div>`
     )}
       </div>
-      ${this.showTable ? be(
+      ${this.showTable ? fe(
       `${a} ${this.centerLabel}`,
       ["Slice", "Value", "Share"],
-      g.map((p) => [
+      $.map((p) => [
         p.label || "(empty)",
         this.fmt(p.count),
         `${Math.round(p.frac * 100)}%`
@@ -2738,35 +2739,35 @@ let G = class extends tt {
     </div>`;
   }
 };
-G.R = 54;
-G.GAP = 2;
-At([
+J.R = 54;
+J.GAP = 2;
+Lt([
   l({ attribute: !1 })
-], G.prototype, "groups", 2);
-At([
+], J.prototype, "groups", 2);
+Lt([
   l({ type: Number })
-], G.prototype, "total", 2);
-At([
+], J.prototype, "total", 2);
+Lt([
   l()
-], G.prototype, "color", 2);
-At([
+], J.prototype, "color", 2);
+Lt([
   l({ attribute: "center-label" })
-], G.prototype, "centerLabel", 2);
-At([
+], J.prototype, "centerLabel", 2);
+Lt([
   l({ attribute: "other-label" })
-], G.prototype, "otherLabel", 2);
-G = At([
+], J.prototype, "otherLabel", 2);
+J = Lt([
   b("baht-donut-chart")
-], G);
+], J);
 var Ga = Object.defineProperty, Wa = Object.getOwnPropertyDescriptor, V = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Wa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ga(e, i, s), s;
 };
 const Qe = 24, ts = 2, Ja = 56, Ya = 26;
-let R = class extends tt {
+let z = class extends st {
   constructor() {
-    super(...arguments), this.groups = [], this.series = [], this.categories = [], this.orientation = "horizontal", this.stacked = !1, this.compare = [], this.markers = [], this.labelValues = "ends", this.emphasis = null, this.color = "", this.label = "", this.band = 0;
+    super(...arguments), this.groups = [], this.series = [], this.categories = [], this.orientation = "horizontal", this.stacked = !1, this.compare = [], this.compareLabel = "Previous period", this.markers = [], this.labelValues = "ends", this.emphasis = null, this.color = "", this.label = "", this.band = 0;
   }
   connectedCallback() {
     super.connectedCallback(), !(!S() || typeof ResizeObserver > "u") && (this.resizeObserver = new ResizeObserver(() => this.measure()), this.resizeObserver.observe(this));
@@ -2807,7 +2808,7 @@ let R = class extends tt {
   }
   colorFor(t, e, i) {
     const a = this.model.series[t];
-    return this.emphasis != null && !(i ? t === this.emphasis : e === this.emphasis) ? "var(--baht-chart-muted)" : nt(i ? t : 0, this.color || (a == null ? void 0 : a.color) || void 0);
+    return this.emphasis != null && !(i ? t === this.emphasis : e === this.emphasis) ? "var(--baht-chart-muted)" : ft(i ? t : 0, this.color || (a == null ? void 0 : a.color) || void 0);
   }
   render() {
     const t = this.hold(this.model);
@@ -2817,7 +2818,7 @@ let R = class extends tt {
   domainMax(t, e, i) {
     const a = Math.max(...t.map((c) => c.values.length)), s = Array.from(
       { length: a },
-      (c, f) => e ? t.reduce((g, _) => g + (_.values[f] ?? 0), 0) : Math.max(...t.map((g) => g.values[f] ?? 0))
+      (c, f) => e ? t.reduce(($, w) => $ + (w.values[f] ?? 0), 0) : Math.max(...t.map(($) => $.values[f] ?? 0))
     ), r = Math.max(
       1,
       ...s,
@@ -2829,284 +2830,341 @@ let R = class extends tt {
     return o[o.length - 1] ?? r;
   }
   tableTwin(t, e, i) {
-    var s;
+    var r;
     if (!this.showTable) return h;
-    const a = ["Category", ...t.map((r) => r.name || "Value")];
-    return (s = this.compare) != null && s.length && a.push("Previous"), be(
-      this.label || "Bar chart data",
-      a,
-      Array.from({ length: i }, (r, o) => {
-        var f;
-        const c = [
-          e[o] || "(empty)",
-          ...t.map((g) => this.fmt(g.values[o] ?? 0))
-        ];
-        return (f = this.compare) != null && f.length && c.push(this.fmt(this.compare[o] ?? 0)), c;
-      })
-    );
+    const a = ["Category", ...t.map((o) => o.name || "Value")];
+    (r = this.compare) != null && r.length && a.push(this.compareLabel);
+    const s = Array.from({ length: i }, (o, c) => {
+      var $;
+      const f = [
+        e[c] || "(empty)",
+        ...t.map((w) => this.fmt(w.values[c] ?? 0))
+      ];
+      return ($ = this.compare) != null && $.length && f.push(this.fmt(this.compare[c] ?? 0)), f;
+    });
+    for (const o of this.markers ?? [])
+      s.push([
+        `${o.label ?? "Target"}${o.category ? ` (${o.category})` : ""}`,
+        this.fmt(o.value),
+        ...Array.from({ length: a.length - 2 }, () => "—")
+      ]);
+    return fe(this.label || "Bar chart data", a, s);
   }
   /** Markers with no `category` span the chart; the rest ride their own row. */
   markersFor(t) {
     return (this.markers ?? []).filter((e) => !e.category || e.category === t);
   }
+  /** Markers that apply to every row / column. */
+  get chartMarkers() {
+    return (this.markers ?? []).filter((t) => !t.category);
+  }
+  /** What a marker reads as: its own label, else its formatted value. */
+  markerText(t) {
+    return t.label ? `${t.label} ${this.fmt(t.value)}` : this.fmt(t.value);
+  }
+  /**
+   * Marker lines, positioned along the value axis. The label is drawn separately
+   * (`markerLabels`) as real text — a `title` attribute alone never reaches AT.
+   */
   markerOverlay(t, e) {
     return this.markersFor(e).map(
       (i) => n`<span
         class="baht-bar-chart-marker"
         style=${`left:${Math.min(100, i.value / t * 100).toFixed(2)}%`}
-        title=${i.label ?? this.fmt(i.value)}
         aria-hidden="true"
       ></span>`
     );
   }
+  /**
+   * Marker labels, sorted along the axis and thinned so neighbours never collide:
+   * a dropped label keeps its line, and its value still reads in the table twin.
+   */
+  placedMarkers(t) {
+    const e = [], i = [...this.chartMarkers].sort((a, s) => a.value - s.value);
+    for (const a of i) {
+      const s = Math.min(100, Math.max(0, a.value / t * 100)), r = e[e.length - 1];
+      r && s - r.pct < 12 || e.push({ m: a, pct: s });
+    }
+    return e;
+  }
+  /** Legend rows: one per series, plus the muted `compare` key when it is set. */
+  legendEntries(t) {
+    const e = t.map((i, a) => ({
+      label: i.name || "Value",
+      color: ft(a, i.color)
+    }));
+    return (this.compare ?? []).length > 0 && e.push({ label: this.compareLabel, color: "var(--baht-chart-muted)" }), e;
+  }
   renderHorizontal(t) {
-    const { series: e, categories: i, legacy: a } = t, s = e.length > 1, r = Math.max(...e.map((p) => p.values.length)), o = this.domainMax(e, this.stacked, a), c = (this.compare ?? []).length > 0, f = (this.stacked ? 1 : e.length) + (c ? 1 : 0), g = Math.min(Qe, Math.max(6, Math.floor(48 / f))), _ = Array.from({ length: r }, (p, w) => {
-      const C = i[w] || "(empty)", d = e.reduce((P, q) => P + (q.values[w] ?? 0), 0), v = `${C}: ${e.map((P) => `${P.name ? `${P.name} ` : ""}${this.fmt(P.values[w] ?? 0)}`).join(", ")}${c ? `, previous ${this.fmt(this.compare[w] ?? 0)}` : ""}`, z = e.map((P, q) => ({
-        value: P.values[w] ?? 0,
-        color: this.colorFor(q, w, s),
-        name: P.name
+    const { series: e, categories: i, legacy: a } = t, s = e.length > 1, r = Math.max(...e.map((P) => P.values.length)), o = this.domainMax(e, this.stacked, a), c = (this.compare ?? []).length > 0, f = (this.stacked ? 1 : e.length) + (c ? 1 : 0), $ = Math.min(Qe, Math.max(6, Math.floor(48 / f))), w = Array.from({ length: r }, (P, x) => {
+      const u = i[x] || "(empty)", v = e.reduce((C, R) => C + (R.values[x] ?? 0), 0), D = `${u}: ${e.map((C) => `${C.name ? `${C.name} ` : ""}${this.fmt(C.values[x] ?? 0)}`).join(", ")}${c ? `, previous ${this.fmt(this.compare[x] ?? 0)}` : ""}`, G = e.map((C, R) => ({
+        value: C.values[x] ?? 0,
+        color: this.colorFor(R, x, s),
+        name: C.name
       }));
       return n`<div class="baht-bar-chart-row">
-        <span class="baht-bar-chart-label" title=${C}>${C}</span>
+        <span class="baht-bar-chart-label" title=${u}>${u}</span>
         <div
           class="baht-bar-chart-track${this.stacked ? " baht-bar-chart-track--stacked" : ""}"
           tabindex="0"
           role="button"
-          aria-label=${v}
-          @pointermove=${(P) => this.showTip(P, v)}
+          aria-label=${D}
+          @pointermove=${(C) => this.showTip(C, D)}
           @pointerleave=${() => this.hideTip()}
-          @focus=${(P) => this.showTip(P, v)}
+          @focus=${(C) => this.showTip(C, D)}
           @blur=${() => this.hideTip()}
         >
-          ${this.markerOverlay(o, C)}
+          ${this.markerOverlay(o, u)}
           <div class="baht-bar-chart-bars">
-            ${this.stacked ? n`<div class="baht-bar-chart-stack" style=${`height:${g}px`}>
-                    ${z.map(
-        (P) => n`<div
+            ${this.stacked ? n`<div class="baht-bar-chart-stack" style=${`height:${$}px`}>
+                    ${G.map(
+        (C) => n`<div
                         class="baht-bar-chart-bar baht-bar-chart-bar--segment"
-                        style=${`width:${Math.max(0, P.value / o * 100)}%;background:${P.color}`}
+                        style=${`width:${Math.max(0, C.value / o * 100)}%;background:${C.color}`}
                       ></div>`
       )}
-                  </div>` : z.map(
-        (P) => n`<div
+                  </div>` : G.map(
+        (C) => n`<div
                       class="baht-bar-chart-bar"
-                      style=${`width:${Math.max(2, P.value / o * 100)}%;height:${g}px;background:${P.color}`}
+                      style=${`width:${Math.max(2, C.value / o * 100)}%;height:${$}px;background:${C.color}`}
                     ></div>`
       )}
             ${c ? n`<div
                     class="baht-bar-chart-bar baht-bar-chart-bar--compare"
-                    style=${`width:${Math.max(2, (this.compare[w] ?? 0) / o * 100)}%;height:${Math.min(8, g)}px`}
+                    style=${`width:${Math.max(2, (this.compare[x] ?? 0) / o * 100)}%;height:${Math.min(8, $)}px`}
                   ></div>` : h}
           </div>
         </div>
         ${this.labelValues === "ends" ? n`<span class="baht-bar-chart-count"
-                >${a ? e[0].values[w] ?? 0 : this.fmt(this.stacked ? d : e[0].values[w] ?? 0)}</span
+                >${a ? e[0].values[x] ?? 0 : this.fmt(this.stacked ? v : e[0].values[x] ?? 0)}</span
               >` : h}
       </div>`;
-    });
+    }), p = this.placedMarkers(o);
     return n`<div class=${this.rootClass("baht-bar-chart")}>
-      ${_}
+      ${p.length > 0 ? n`<div class="baht-bar-chart-row baht-bar-chart-row--markers">
+              <span class="baht-bar-chart-label"></span>
+              <div class="baht-bar-chart-markbar">
+                ${p.map(
+      ({ m: P, pct: x }) => n`<span
+                    class="baht-bar-chart-marker-label"
+                    style=${`left:${x.toFixed(2)}%;transform:translateX(${x > 88 ? "-100%" : x < 12 ? "0" : "-50%"})`}
+                    >${this.markerText(P)}</span
+                  >`
+    )}
+              </div>
+              ${this.labelValues === "ends" ? n`<span class="baht-bar-chart-count"></span>` : h}
+            </div>` : h}
+      ${w}
       ${this.renderTooltip()}
-      ${this.renderLegend(e.map((p, w) => ({ label: p.name, color: nt(w, p.color) })))}
+      ${this.renderLegend(this.legendEntries(e))}
       ${this.tableTwin(e, i, r)}
     </div>`;
   }
   renderVertical(t) {
-    const { series: e, categories: i, legacy: a } = t, s = e.length > 1, r = Math.max(...e.map((d) => d.values.length)), o = this.domainMax(e, this.stacked, a), c = Be(o, 4), f = (this.compare ?? []).length > 0, g = (this.stacked ? 1 : e.length) + (f ? 1 : 0), _ = this.band > 0 ? (this.band - ts) / g : 48 / g, p = Math.min(Qe, Math.max(2, Math.floor(_))), w = this.band > 0 ? Math.max(1, Math.ceil(Ya / Math.max(1, this.band))) : Math.max(1, Math.ceil(r / 12)), C = this.label || `Column chart, ${r} categories. ${i.map((d, v) => `${d} ${this.fmt(e[0].values[v] ?? 0)}`).join(", ")}`;
+    const { series: e, categories: i, legacy: a } = t, s = e.length > 1, r = Math.max(...e.map((v) => v.values.length)), o = this.domainMax(e, this.stacked, a), c = Be(o, 4), f = (this.compare ?? []).length > 0, $ = (this.stacked ? 1 : e.length) + (f ? 1 : 0), w = this.band > 0 ? (this.band - ts) / $ : 48 / $, p = Math.min(Qe, Math.max(2, Math.floor(w))), P = this.band > 0 ? Math.max(1, Math.ceil(Ya / Math.max(1, this.band))) : Math.max(1, Math.ceil(r / 12)), x = this.chartMarkers.map((v) => this.markerText(v)), u = this.label || `Column chart, ${r} categories. ${i.map((v, D) => `${v} ${this.fmt(e[0].values[D] ?? 0)}`).join(", ")}${x.length ? `. Reference lines: ${x.join(", ")}` : ""}`;
     return n`<div class=${this.rootClass("baht-bar-chart baht-bar-chart--vertical")}>
-      <div class="baht-bar-chart-plot" role="img" aria-label=${C}>
+      <div class="baht-bar-chart-plot" role="img" aria-label=${u}>
         <div class="baht-bar-chart-yaxis" aria-hidden="true">
-          ${[...c].reverse().map((d) => n`<span class="baht-chart-tick-text">${this.fmt(d)}</span>`)}
+          ${[...c].reverse().map((v) => n`<span class="baht-chart-tick-text">${this.fmt(v)}</span>`)}
         </div>
         <div class="baht-bar-chart-grid">
-          ${(this.markers ?? []).filter((d) => !d.category).map(
-      (d) => n`<span
-                class="baht-bar-chart-marker baht-bar-chart-marker--horizontal"
-                style=${`bottom:${Math.min(100, d.value / o * 100).toFixed(2)}%`}
-                title=${d.label ?? this.fmt(d.value)}
-                aria-hidden="true"
-              ></span>`
+          ${this.chartMarkers.map(
+      (v) => n`<span
+              class="baht-bar-chart-marker baht-bar-chart-marker--horizontal"
+              style=${`bottom:${Math.min(100, v.value / o * 100).toFixed(2)}%`}
+              aria-hidden="true"
+            ></span>`
+    )}
+          ${this.placedMarkers(o).map(
+      ({ m: v, pct: D }) => n`<span
+              class="baht-bar-chart-marker-label baht-bar-chart-marker-label--end"
+              style=${`bottom:${D.toFixed(2)}%`}
+              >${this.markerText(v)}</span
+            >`
     )}
           ${[...c].reverse().map(() => n`<span class="baht-chart-grid-rule" aria-hidden="true"></span>`)}
           <div class="baht-bar-chart-columns">
-            ${Array.from({ length: r }, (d, v) => {
-      const z = i[v] || "(empty)", P = `${z}: ${e.map((q) => `${q.name ? `${q.name} ` : ""}${this.fmt(q.values[v] ?? 0)}`).join(", ")}`;
+            ${Array.from({ length: r }, (v, D) => {
+      const G = i[D] || "(empty)", C = `${G}: ${e.map((R) => `${R.name ? `${R.name} ` : ""}${this.fmt(R.values[D] ?? 0)}`).join(", ")}`;
       return n`<div
                 class="baht-bar-chart-column"
                 style=${this.band > 0 ? `flex:0 0 auto;width:${this.band}px` : h}
                 tabindex="0"
                 role="button"
-                aria-label=${P}
-                @pointermove=${(q) => this.showTip(q, P)}
+                aria-label=${C}
+                @pointermove=${(R) => this.showTip(R, C)}
                 @pointerleave=${() => this.hideTip()}
-                @focus=${(q) => this.showTip(q, P)}
+                @focus=${(R) => this.showTip(R, C)}
                 @blur=${() => this.hideTip()}
               >
                 <div class="baht-bar-chart-column-bars">
                   ${e.map(
-        (q, ve) => n`<div
+        (R, d) => n`<div
                       class="baht-bar-chart-col"
-                      style=${`height:${Math.max(1, (q.values[v] ?? 0) / o * 100)}%;width:${p}px;background:${this.colorFor(ve, v, s)}`}
+                      style=${`height:${Math.max(1, (R.values[D] ?? 0) / o * 100)}%;width:${p}px;background:${this.colorFor(d, D, s)}`}
                     ></div>`
       )}
                   ${f ? n`<div
                           class="baht-bar-chart-col baht-bar-chart-col--compare"
-                          style=${`height:${Math.max(1, (this.compare[v] ?? 0) / o * 100)}%;width:${Math.min(8, p)}px`}
+                          style=${`height:${Math.max(1, (this.compare[D] ?? 0) / o * 100)}%;width:${Math.min(8, p)}px`}
                         ></div>` : h}
                 </div>
-                ${v % w === 0 ? n`<span class="baht-bar-chart-xlabel">${z}</span>` : h}
+                ${D % P === 0 ? n`<span class="baht-bar-chart-xlabel">${G}</span>` : h}
               </div>`;
     })}
           </div>
         </div>
       </div>
       ${this.renderTooltip()}
-      ${this.renderLegend(e.map((d, v) => ({ label: d.name, color: nt(v, d.color) })))}
+      ${this.renderLegend(this.legendEntries(e))}
       ${this.tableTwin(e, i, r)}
     </div>`;
   }
 };
 V([
   l({ attribute: !1 })
-], R.prototype, "groups", 2);
+], z.prototype, "groups", 2);
 V([
   l({ attribute: !1 })
-], R.prototype, "series", 2);
+], z.prototype, "series", 2);
 V([
   l({ attribute: !1 })
-], R.prototype, "categories", 2);
+], z.prototype, "categories", 2);
 V([
   l()
-], R.prototype, "orientation", 2);
+], z.prototype, "orientation", 2);
 V([
   l({ type: Boolean })
-], R.prototype, "stacked", 2);
+], z.prototype, "stacked", 2);
 V([
   l({ attribute: !1 })
-], R.prototype, "compare", 2);
+], z.prototype, "compare", 2);
+V([
+  l({ attribute: "compare-label" })
+], z.prototype, "compareLabel", 2);
 V([
   l({ attribute: !1 })
-], R.prototype, "markers", 2);
+], z.prototype, "markers", 2);
 V([
   l({ attribute: "label-values" })
-], R.prototype, "labelValues", 2);
+], z.prototype, "labelValues", 2);
 V([
   l({ type: Number })
-], R.prototype, "emphasis", 2);
+], z.prototype, "emphasis", 2);
 V([
   l()
-], R.prototype, "color", 2);
+], z.prototype, "color", 2);
 V([
   l()
-], R.prototype, "label", 2);
+], z.prototype, "label", 2);
 V([
-  $()
-], R.prototype, "band", 2);
-R = V([
+  y()
+], z.prototype, "band", 2);
+z = V([
   b("baht-bar-chart")
-], R);
-var Xa = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, lt = (t, e, i, a) => {
+], z);
+var Xa = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, nt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Za(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Xa(e, i, s), s;
 };
-const es = 640, xe = 260, E = { top: 14, right: 72, bottom: 30, left: 60 };
-let Q = class extends tt {
+const es = 640, xe = 260, B = { top: 14, right: 72, bottom: 30, left: 60 };
+let et = class extends st {
   constructor() {
     super(...arguments), this.series = [], this.categories = [], this.area = !1, this.markers = [], this.forecast = 0, this.baseline = null, this.labelValues = "ends", this.label = "", this.crosshairAt = null;
   }
   get plot() {
-    return { w: es - E.left - E.right, h: xe - E.top - E.bottom };
+    return { w: es - B.left - B.right, h: xe - B.top - B.bottom };
   }
   render() {
     const t = this.hold({
-      series: (this.series ?? []).filter((u) => {
-        var x;
-        return u && ((x = u.values) == null ? void 0 : x.length);
+      series: (this.series ?? []).filter((d) => {
+        var _;
+        return d && ((_ = d.values) == null ? void 0 : _.length);
       }),
       categories: this.categories ?? []
     }), { series: e, categories: i } = t;
     if (e.length === 0)
       return n`<div class=${this.rootClass("baht-line-chart")}>${this.renderEmpty()}</div>`;
-    const a = Math.max(...e.map((u) => u.values.length)), s = e.flatMap((u) => u.values).filter((u) => Number.isFinite(u)), r = Math.max(0, ...s, ...(this.markers ?? []).map((u) => u.value)), o = Be(r, 4), c = o[o.length - 1] ?? 1, { w: f, h: g } = this.plot, _ = le([0, Math.max(1, a - 1)], [E.left, E.left + f]), p = le([0, c], [E.top + g, E.top]), w = Math.max(0, a - 1 - Math.max(0, this.forecast)), C = (u, x, Z) => u.slice(x, Z + 1).map((st, at) => `${at === 0 ? "M" : "L"}${_(x + at).toFixed(2)},${p(st).toFixed(2)}`).join(" "), d = e.map((u, x) => ({
-      i: x,
-      name: u.name,
-      value: u.values[u.values.length - 1] ?? 0,
-      yPos: p(u.values[u.values.length - 1] ?? 0),
-      color: nt(x, u.color)
-    })), v = [...d].sort((u, x) => u.yPos - x.yPos), z = v.some((u, x) => x > 0 && u.yPos - v[x - 1].yPos < 15), P = this.labelValues === "ends" && !z, q = Math.max(1, Math.ceil(a / 8)), ve = this.label || `Line chart, ${e.length} series over ${a} points. ${e.map((u, x) => `${u.name}: ${this.fmt(d[x].value)} at the end`).join(". ")}`;
+    const a = Math.max(...e.map((d) => d.values.length)), s = e.flatMap((d) => d.values).filter((d) => Number.isFinite(d)), r = Math.max(0, ...s, ...(this.markers ?? []).map((d) => d.value)), o = Be(r, 4), c = o[o.length - 1] ?? 1, { w: f, h: $ } = this.plot, w = ne([0, Math.max(1, a - 1)], [B.left, B.left + f]), p = ne([0, c], [B.top + $, B.top]), P = Math.max(0, a - 1 - Math.max(0, this.forecast)), x = (d, _, tt) => d.slice(_, tt + 1).map((at, it) => `${it === 0 ? "M" : "L"}${w(_ + it).toFixed(2)},${p(at).toFixed(2)}`).join(" "), u = e.map((d, _) => ({
+      i: _,
+      name: d.name,
+      value: d.values[d.values.length - 1] ?? 0,
+      yPos: p(d.values[d.values.length - 1] ?? 0),
+      color: ft(_, d.color)
+    })), v = [...u].sort((d, _) => d.yPos - _.yPos), D = v.some((d, _) => _ > 0 && d.yPos - v[_ - 1].yPos < 15), G = this.labelValues === "ends" && !D, C = Math.max(1, Math.ceil(a / 8)), R = this.label || `Line chart, ${e.length} series over ${a} points. ${e.map((d, _) => `${d.name}: ${this.fmt(u[_].value)} at the end`).join(". ")}`;
     return n`<div class=${this.rootClass("baht-line-chart")}>
       <svg
         class="baht-chart-svg"
         viewBox="0 0 ${es} ${xe}"
         preserveAspectRatio="xMidYMid meet"
         role="img"
-        aria-label=${ve}
+        aria-label=${R}
       >
         ${o.map(
-      (u) => A`
-            <line class="baht-chart-grid-line" x1=${E.left} x2=${E.left + f}
-              y1=${p(u).toFixed(2)} y2=${p(u).toFixed(2)}/>
-            <text class="baht-chart-tick" x=${E.left - 8} y=${(p(u) + 4).toFixed(2)}
-              text-anchor="end">${this.fmt(u)}</text>`
+      (d) => L`
+            <line class="baht-chart-grid-line" x1=${B.left} x2=${B.left + f}
+              y1=${p(d).toFixed(2)} y2=${p(d).toFixed(2)}/>
+            <text class="baht-chart-tick" x=${B.left - 8} y=${(p(d) + 4).toFixed(2)}
+              text-anchor="end">${this.fmt(d)}</text>`
     )}
         ${this.baseline != null ? [
-      A`<line class="baht-chart-baseline" x1=${E.left} x2=${E.left + f}
+      L`<line class="baht-chart-baseline" x1=${B.left} x2=${B.left + f}
               y1=${p(this.baseline).toFixed(2)} y2=${p(this.baseline).toFixed(2)}/>`
     ] : []}
         ${(this.markers ?? []).map(
-      (u) => A`
-            <line class="baht-chart-marker-line" x1=${E.left} x2=${E.left + f}
-              y1=${p(u.value).toFixed(2)} y2=${p(u.value).toFixed(2)}/>
-            <text class="baht-chart-marker-label" x=${E.left + f} y=${(p(u.value) - 5).toFixed(2)}
-              text-anchor="end">${u.label ?? this.fmt(u.value)}</text>`
+      (d) => L`
+            <line class="baht-chart-marker-line" x1=${B.left} x2=${B.left + f}
+              y1=${p(d.value).toFixed(2)} y2=${p(d.value).toFixed(2)}/>
+            <text class="baht-chart-marker-label" x=${B.left + f} y=${(p(d.value) - 5).toFixed(2)}
+              text-anchor="end">${d.label ?? this.fmt(d.value)}</text>`
     )}
-        ${this.area && e.length === 1 ? A`<path class="baht-chart-area" fill=${nt(0, e[0].color)}
-                d=${`${C(e[0].values, 0, a - 1)} L${_(a - 1).toFixed(2)},${p(0).toFixed(2)} L${_(0).toFixed(2)},${p(0).toFixed(2)} Z`}/>` : h}
-        ${e.map((u, x) => {
-      const Z = nt(x, u.color), st = [
-        A`<path class="baht-chart-line" d=${C(u.values, 0, w)} stroke=${Z} fill="none"/>`
+        ${this.area && e.length === 1 ? L`<path class="baht-chart-area" fill=${ft(0, e[0].color)}
+                d=${`${x(e[0].values, 0, a - 1)} L${w(a - 1).toFixed(2)},${p(0).toFixed(2)} L${w(0).toFixed(2)},${p(0).toFixed(2)} Z`}/>` : h}
+        ${e.map((d, _) => {
+      const tt = ft(_, d.color), at = [
+        L`<path class="baht-chart-line" d=${x(d.values, 0, P)} stroke=${tt} fill="none"/>`
       ];
-      return w < a - 1 && st.push(
-        A`<path class="baht-chart-line baht-chart-line--forecast" d=${C(u.values, w, a - 1)}
-                stroke=${Z} fill="none"/>`
-      ), st.push(
-        A`<circle class="baht-chart-end-dot" cx=${_(a - 1).toFixed(2)}
-              cy=${p(u.values[u.values.length - 1] ?? 0).toFixed(2)} r="4" fill=${Z}/>`
-      ), st;
+      return P < a - 1 && at.push(
+        L`<path class="baht-chart-line baht-chart-line--forecast" d=${x(d.values, P, a - 1)}
+                stroke=${tt} fill="none"/>`
+      ), at.push(
+        L`<circle class="baht-chart-end-dot" cx=${w(a - 1).toFixed(2)}
+              cy=${p(d.values[d.values.length - 1] ?? 0).toFixed(2)} r="4" fill=${tt}/>`
+      ), at;
     })}
-        ${P ? d.map(
-      (u) => A`
-                  <text class="baht-chart-end-label" x=${_(a - 1) + 10} y=${(u.yPos + 4).toFixed(2)}
-                    text-anchor="start">${this.fmt(u.value)}</text>`
+        ${G ? u.map(
+      (d) => L`
+                  <text class="baht-chart-end-label" x=${w(a - 1) + 10} y=${(d.yPos + 4).toFixed(2)}
+                    text-anchor="start">${this.fmt(d.value)}</text>`
     ) : h}
         ${i.map(
-      (u, x) => x % q === 0 ? A`<text class="baht-chart-tick" x=${_(x).toFixed(2)} y=${xe - 10} text-anchor="middle">${u}</text>` : h
+      (d, _) => _ % C === 0 ? L`<text class="baht-chart-tick" x=${w(_).toFixed(2)} y=${xe - 10} text-anchor="middle">${d}</text>` : h
     )}
-        ${Array.from({ length: a }, (u, x) => {
-      const Z = f / Math.max(1, a - 1), st = `${i[x] ?? `Point ${x + 1}`}: ${e.map((at) => `${at.name} ${this.fmt(at.values[x] ?? 0)}`).join(", ")}`;
-      return A`<rect class="baht-chart-hit" x=${(_(x) - Z / 2).toFixed(2)} y=${E.top}
-            width=${Math.max(24, Z).toFixed(2)} height=${g} tabindex="0" role="button"
-            aria-label=${st}
-            @pointermove=${(at) => this.onHover(at, x, st)}
+        ${Array.from({ length: a }, (d, _) => {
+      const tt = f / Math.max(1, a - 1), at = `${i[_] ?? `Point ${_ + 1}`}: ${e.map((it) => `${it.name} ${this.fmt(it.values[_] ?? 0)}`).join(", ")}`;
+      return L`<rect class="baht-chart-hit" x=${(w(_) - tt / 2).toFixed(2)} y=${B.top}
+            width=${Math.max(24, tt).toFixed(2)} height=${$} tabindex="0" role="button"
+            aria-label=${at}
+            @pointermove=${(it) => this.onHover(it, _, at)}
             @pointerleave=${() => this.onLeave()}
-            @focus=${(at) => this.onHover(at, x, st)}
+            @focus=${(it) => this.onHover(it, _, at)}
             @blur=${() => this.onLeave()}/>`;
     })}
-        ${this.crosshairAt != null ? A`<line class="baht-chart-crosshair" x1=${_(this.crosshairAt).toFixed(2)}
-                x2=${_(this.crosshairAt).toFixed(2)} y1=${E.top} y2=${E.top + g}/>` : h}
+        ${this.crosshairAt != null ? L`<line class="baht-chart-crosshair" x1=${w(this.crosshairAt).toFixed(2)}
+                x2=${w(this.crosshairAt).toFixed(2)} y1=${B.top} y2=${B.top + $}/>` : h}
       </svg>
       ${this.renderTooltip()}
       ${this.renderLegend(
-      e.map((u, x) => ({ label: u.name, color: nt(x, u.color) })),
+      e.map((d, _) => ({ label: d.name, color: ft(_, d.color) })),
       "line"
     )}
-      ${this.showTable ? be(
+      ${this.showTable ? fe(
       this.label || "Line chart data",
-      ["Point", ...e.map((u) => u.name)],
-      Array.from({ length: a }, (u, x) => [
-        i[x] ?? `Point ${x + 1}`,
-        ...e.map((Z) => this.fmt(Z.values[x] ?? 0))
+      ["Point", ...e.map((d) => d.name)],
+      Array.from({ length: a }, (d, _) => [
+        i[_] ?? `Point ${_ + 1}`,
+        ...e.map((tt) => this.fmt(tt.values[_] ?? 0))
       ])
     ) : h}
     </div>`;
@@ -3118,39 +3176,39 @@ let Q = class extends tt {
     this.crosshairAt = null, this.requestUpdate(), this.hideTip();
   }
 };
-lt([
+nt([
   l({ attribute: !1 })
-], Q.prototype, "series", 2);
-lt([
+], et.prototype, "series", 2);
+nt([
   l({ attribute: !1 })
-], Q.prototype, "categories", 2);
-lt([
+], et.prototype, "categories", 2);
+nt([
   l({ type: Boolean })
-], Q.prototype, "area", 2);
-lt([
+], et.prototype, "area", 2);
+nt([
   l({ attribute: !1 })
-], Q.prototype, "markers", 2);
-lt([
+], et.prototype, "markers", 2);
+nt([
   l({ type: Number })
-], Q.prototype, "forecast", 2);
-lt([
+], et.prototype, "forecast", 2);
+nt([
   l({ type: Number })
-], Q.prototype, "baseline", 2);
-lt([
+], et.prototype, "baseline", 2);
+nt([
   l({ attribute: "label-values" })
-], Q.prototype, "labelValues", 2);
-lt([
+], et.prototype, "labelValues", 2);
+nt([
   l()
-], Q.prototype, "label", 2);
-Q = lt([
+], et.prototype, "label", 2);
+et = nt([
   b("baht-line-chart")
-], Q);
-var Qa = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, wt = (t, e, i, a) => {
+], et);
+var Qa = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, xt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ti(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Qa(e, i, s), s;
 };
-const _e = 22, Nt = 24, ss = 34, ke = 18, ei = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const _e = 22, qt = 24, ss = 34, ke = 18, ei = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 function Pe(t) {
   const e = /^(\d{4})-(\d{2})-(\d{2})/.exec(t ?? "");
   return e ? new Date(Date.UTC(+e[1], +e[2] - 1, +e[3])) : null;
@@ -3158,7 +3216,7 @@ function Pe(t) {
 function Oe(t) {
   return t.toISOString().slice(0, 10);
 }
-let pt = class extends tt {
+let pt = class extends st {
   constructor() {
     super(...arguments), this.values = [], this.from = "", this.to = "", this.lessLabel = "Less", this.moreLabel = "More", this.label = "";
   }
@@ -3170,33 +3228,33 @@ let pt = class extends tt {
     const t = this.hold({ values: this.values ?? [], range: this.range }), e = t.range;
     if (!e || t.values.length === 0)
       return n`<div class=${this.rootClass("baht-heatmap")}>${this.renderEmpty()}</div>`;
-    const i = new Map(t.values.map((d) => [d.date.slice(0, 10), d.value])), a = [], s = new Date(e.start), r = (e.start.getUTCDay() + 6) % 7;
+    const i = new Map(t.values.map((u) => [u.date.slice(0, 10), u.value])), a = [], s = new Date(e.start), r = (e.start.getUTCDay() + 6) % 7;
     let o = 0;
     for (; +s <= +e.end; ) {
-      const d = Oe(s), v = (s.getUTCDay() + 6) % 7, z = Math.floor((r + o) / 7);
-      a.push({ iso: d, value: i.has(d) ? i.get(d) : null, col: z, row: v }), s.setUTCDate(s.getUTCDate() + 1), o += 1;
+      const u = Oe(s), v = (s.getUTCDay() + 6) % 7, D = Math.floor((r + o) / 7);
+      a.push({ iso: u, value: i.has(u) ? i.get(u) : null, col: D, row: v }), s.setUTCDate(s.getUTCDate() + 1), o += 1;
     }
-    const c = Math.max(1, ...a.map((d) => d.col + 1)), f = ss + c * Nt, g = ke + 7 * Nt + 4, _ = Math.max(1, ...a.map((d) => d.value ?? 0)), p = (d) => Math.min(4, Math.max(0, Math.ceil(d / _ * 5) - 1)), w = a.reduce((d, v) => d + (v.value ?? 0), 0), C = this.label || `Calendar heatmap, ${a.length} days from ${Oe(e.start)} to ${Oe(e.end)}, total ${this.fmt(w)}`;
+    const c = Math.max(1, ...a.map((u) => u.col + 1)), f = ss + c * qt, $ = ke + 7 * qt + 4, w = Math.max(1, ...a.map((u) => u.value ?? 0)), p = (u) => Math.min(4, Math.max(0, Math.ceil(u / w * 5) - 1)), P = a.reduce((u, v) => u + (v.value ?? 0), 0), x = this.label || `Calendar heatmap, ${a.length} days from ${Oe(e.start)} to ${Oe(e.end)}, total ${this.fmt(P)}`;
     return n`<div class=${this.rootClass("baht-heatmap")}>
       <svg
         class="baht-chart-svg baht-heatmap-svg"
         width=${f}
-        height=${g}
-        viewBox="0 0 ${f} ${g}"
+        height=${$}
+        viewBox="0 0 ${f} ${$}"
         preserveAspectRatio="xMinYMin meet"
         role="img"
-        aria-label=${C}
+        aria-label=${x}
       >
         ${ei.map(
-      (d, v) => v % 2 === 0 ? A`<text class="baht-chart-tick" x="0" y=${ke + v * Nt + _e / 2 + 4}>${d}</text>` : h
+      (u, v) => v % 2 === 0 ? L`<text class="baht-chart-tick" x="0" y=${ke + v * qt + _e / 2 + 4}>${u}</text>` : h
     )}
-        ${a.map((d) => {
-      const v = d.value == null ? `${d.iso}: no activity` : `${d.iso}: ${this.fmt(d.value)}`, z = d.value == null || d.value <= 0 ? "var(--baht-chart-grid)" : Xe(p(d.value));
-      return A`<rect class="baht-heatmap-cell" x=${ss + d.col * Nt} y=${ke + d.row * Nt}
-            width=${_e} height=${_e} rx="3" fill=${z} tabindex="0" role="button" aria-label=${v}
-            @pointermove=${(P) => this.showTip(P, v)}
+        ${a.map((u) => {
+      const v = u.value == null ? `${u.iso}: no activity` : `${u.iso}: ${this.fmt(u.value)}`, D = u.value == null || u.value <= 0 ? "var(--baht-chart-grid)" : Xe(p(u.value));
+      return L`<rect class="baht-heatmap-cell" x=${ss + u.col * qt} y=${ke + u.row * qt}
+            width=${_e} height=${_e} rx="3" fill=${D} tabindex="0" role="button" aria-label=${v}
+            @pointermove=${(G) => this.showTip(G, v)}
             @pointerleave=${() => this.hideTip()}
-            @focus=${(P) => this.showTip(P, v)}
+            @focus=${(G) => this.showTip(G, v)}
             @blur=${() => this.hideTip()}/>`;
     })}
       </svg>
@@ -3204,73 +3262,79 @@ let pt = class extends tt {
       <div class="baht-heatmap-scale">
         <span class="baht-heatmap-scale-label">${this.lessLabel}</span>
         ${[0, 1, 2, 3, 4].map(
-      (d) => n`<span
+      (u) => n`<span
               class="baht-chart-swatch"
-              style=${`background:${Xe(d)}`}
+              style=${`background:${Xe(u)}`}
               aria-hidden="true"
             ></span>`
     )}
         <span class="baht-heatmap-scale-label">${this.moreLabel}</span>
       </div>
-      ${this.showTable ? be(
+      ${this.showTable ? fe(
       this.label || "Calendar heatmap data",
       ["Date", "Value"],
-      a.map((d) => [d.iso, d.value == null ? "—" : this.fmt(d.value)])
+      a.map((u) => [u.iso, u.value == null ? "—" : this.fmt(u.value)])
     ) : h}
     </div>`;
   }
 };
-wt([
+xt([
   l({ attribute: !1 })
 ], pt.prototype, "values", 2);
-wt([
+xt([
   l()
 ], pt.prototype, "from", 2);
-wt([
+xt([
   l()
 ], pt.prototype, "to", 2);
-wt([
+xt([
   l({ attribute: "less-label" })
 ], pt.prototype, "lessLabel", 2);
-wt([
+xt([
   l({ attribute: "more-label" })
 ], pt.prototype, "moreLabel", 2);
-wt([
+xt([
   l()
 ], pt.prototype, "label", 2);
-pt = wt([
+pt = xt([
   b("baht-heatmap")
 ], pt);
-var si = Object.defineProperty, ai = Object.getOwnPropertyDescriptor, et = (t, e, i, a) => {
+var si = Object.defineProperty, ai = Object.getOwnPropertyDescriptor, Z = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ai(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && si(e, i, s), s;
 };
-let W = class extends y {
+let U = class extends g {
   constructor() {
-    super(...arguments), this.value = 0, this.max = 100, this.label = "", this.format = "number", this.currency = "THB", this.thresholds = { warning: 0.8, danger: 1 }, this.expected = null, this.overLabel = "Over budget", this.nearLabel = "Near limit";
+    super(...arguments), this.value = 0, this.max = 100, this.label = "", this.format = "number", this.currency = "THB", this.thresholds = { warning: 0.8, danger: 1 }, this.expected = null, this.overLabel = "Over budget", this.atLabel = "At budget", this.nearLabel = "Near limit";
   }
   get fraction() {
     const t = this.max || 1, e = this.value / t;
     return Number.isFinite(e) ? Math.max(0, e) : 0;
   }
-  /** `ok` | `warning` | `danger`, from the fraction and the thresholds. */
+  /**
+   * `ok` | `warning` | `danger`, from the fraction and the thresholds. `danger` is
+   * strictly **above** its threshold: spending exactly the budget is not
+   * overspending, so it reads as the warning tone with an "At budget" status.
+   * `warning` stays inclusive (`>=`).
+   */
   get severity() {
     const { warning: t, danger: e } = this.thresholds ?? { warning: 0.8, danger: 1 }, i = this.fraction;
-    return i >= e ? "danger" : i >= t ? "warning" : "ok";
+    return i > e ? "danger" : i >= t ? "warning" : "ok";
   }
   get statusText() {
-    const t = this.severity;
-    return t === "danger" ? this.overLabel : t === "warning" ? this.nearLabel : "";
+    const { danger: t } = this.thresholds ?? { danger: 1 }, e = this.severity;
+    return e === "danger" ? this.overLabel : e === "warning" ? this.fraction >= t ? this.atLabel : this.nearLabel : "";
   }
   render() {
-    const t = this.severity, e = Math.min(100, this.fraction * 100), i = (o) => qt(o, this.format, this.currency), a = this.expected != null && Number.isFinite(this.expected) && this.max ? Math.min(100, Math.max(0, this.expected / this.max * 100)) : null, s = `${i(this.value)} of ${i(this.max)}`, r = t === "danger" ? "!" : t === "warning" ? "△" : "";
+    var c;
+    const t = this.severity, e = Math.min(100, this.fraction * 100), i = (f) => Rt(f, this.format, this.currency), a = this.expected != null && Number.isFinite(this.expected) && this.max ? Math.min(100, Math.max(0, this.expected / this.max * 100)) : null, s = `${i(this.value)} of ${i(this.max)}`, r = t === "warning" && this.fraction >= (((c = this.thresholds) == null ? void 0 : c.danger) ?? 1), o = t === "danger" ? "!" : r ? "=" : t === "warning" ? "△" : "";
     return n`<div class="baht-meter baht-meter--${t}">
       <div class="baht-meter-head">
         ${this.label ? n`<span class="baht-meter-label">${this.label}</span>` : h}
         <span class="baht-meter-value">${s}</span>
         ${this.statusText ? n`<span class="baht-meter-status"
-                ><span class="baht-meter-icon" aria-hidden="true">${r}</span
+                ><span class="baht-meter-icon" aria-hidden="true">${o}</span
                 >${this.statusText}</span
               >` : h}
       </div>
@@ -3294,42 +3358,45 @@ let W = class extends y {
     </div>`;
   }
 };
-et([
+Z([
   l({ type: Number })
-], W.prototype, "value", 2);
-et([
+], U.prototype, "value", 2);
+Z([
   l({ type: Number })
-], W.prototype, "max", 2);
-et([
+], U.prototype, "max", 2);
+Z([
   l()
-], W.prototype, "label", 2);
-et([
+], U.prototype, "label", 2);
+Z([
   l()
-], W.prototype, "format", 2);
-et([
+], U.prototype, "format", 2);
+Z([
   l()
-], W.prototype, "currency", 2);
-et([
+], U.prototype, "currency", 2);
+Z([
   l({ attribute: !1 })
-], W.prototype, "thresholds", 2);
-et([
+], U.prototype, "thresholds", 2);
+Z([
   l({ type: Number })
-], W.prototype, "expected", 2);
-et([
+], U.prototype, "expected", 2);
+Z([
   l({ attribute: "over-label" })
-], W.prototype, "overLabel", 2);
-et([
+], U.prototype, "overLabel", 2);
+Z([
+  l({ attribute: "at-label" })
+], U.prototype, "atLabel", 2);
+Z([
   l({ attribute: "near-label" })
-], W.prototype, "nearLabel", 2);
-W = et([
+], U.prototype, "nearLabel", 2);
+U = Z([
   b("baht-meter")
-], W);
-var ii = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, fe = (t, e, i, a) => {
+], U);
+var ii = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, me = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ri(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ii(e, i, s), s;
 };
-let Ht = class extends y {
+let Gt = class extends g {
   constructor() {
     super(...arguments), this.icon = "🗂️", this.message = "Nothing to display", this.hint = "";
   }
@@ -3341,24 +3408,24 @@ let Ht = class extends y {
     </div>`;
   }
 };
-fe([
+me([
   l()
-], Ht.prototype, "icon", 2);
-fe([
+], Gt.prototype, "icon", 2);
+me([
   l()
-], Ht.prototype, "message", 2);
-fe([
+], Gt.prototype, "message", 2);
+me([
   l()
-], Ht.prototype, "hint", 2);
-Ht = fe([
+], Gt.prototype, "hint", 2);
+Gt = me([
   b("baht-empty-state")
-], Ht);
-var oi = Object.defineProperty, li = Object.getOwnPropertyDescriptor, Qt = (t, e, i, a) => {
+], Gt);
+var oi = Object.defineProperty, li = Object.getOwnPropertyDescriptor, te = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? li(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && oi(e, i, s), s;
 };
-let Et = class extends y {
+let Bt = class extends g {
   constructor() {
     super(...arguments), this.icon = "⚠️", this.heading = "Something went wrong", this.message = "", this.retryLabel = "";
   }
@@ -3374,27 +3441,27 @@ let Et = class extends y {
     </div>`;
   }
 };
-Qt([
+te([
   l()
-], Et.prototype, "icon", 2);
-Qt([
+], Bt.prototype, "icon", 2);
+te([
   l()
-], Et.prototype, "heading", 2);
-Qt([
+], Bt.prototype, "heading", 2);
+te([
   l()
-], Et.prototype, "message", 2);
-Qt([
+], Bt.prototype, "message", 2);
+te([
   l({ attribute: "retry-label" })
-], Et.prototype, "retryLabel", 2);
-Et = Qt([
+], Bt.prototype, "retryLabel", 2);
+Bt = te([
   b("baht-error-state")
-], Et);
-var ni = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, xt = (t, e, i, a) => {
+], Bt);
+var ni = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, _t = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? hi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ni(e, i, s), s;
 };
-let dt = class extends y {
+let dt = class extends g {
   constructor() {
     super(...arguments), this.value = {}, this.keyPlaceholder = "key", this.valuePlaceholder = "value", this.add_label = "Add row", this.disabled = !1, this.rows = [{ k: "", v: "" }], this.syncedJson = "";
   }
@@ -3451,7 +3518,7 @@ let dt = class extends y {
             aria-label="Remove row ${e + 1}"
             ?disabled=${this.disabled}
             @click=${() => this.commit(this.rows.filter((i, a) => a !== e))}
-          >${H("close")}</button>
+          >${W("close")}</button>
         </div>`
     )}
       <button
@@ -3459,37 +3526,37 @@ let dt = class extends y {
         class="baht-keyvalue-add"
         ?disabled=${this.disabled}
         @click=${this.addRow}
-      >${H("plus")}${this.add_label}</button>
+      >${W("plus")}${this.add_label}</button>
     </div>`;
   }
 };
-xt([
+_t([
   l({ attribute: !1 })
 ], dt.prototype, "value", 2);
-xt([
+_t([
   l({ attribute: "key-placeholder" })
 ], dt.prototype, "keyPlaceholder", 2);
-xt([
+_t([
   l({ attribute: "value-placeholder" })
 ], dt.prototype, "valuePlaceholder", 2);
-xt([
+_t([
   l({ attribute: "add-label" })
 ], dt.prototype, "add_label", 2);
-xt([
+_t([
   l({ type: Boolean })
 ], dt.prototype, "disabled", 2);
-xt([
-  $()
+_t([
+  y()
 ], dt.prototype, "rows", 2);
-dt = xt([
+dt = _t([
   b("baht-keyvalue-editor")
 ], dt);
-var ci = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, T = (t, e, i, a) => {
+var ci = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, A = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? pi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ci(e, i, s), s;
 };
-let j = class extends y {
+let j = class extends g {
   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.fetchSeq = 0, this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
@@ -3583,7 +3650,7 @@ let j = class extends y {
               aria-label="Clear"
               @mousedown=${(e) => e.preventDefault()}
               @click=${() => this.clear()}
-            >${H("close")}</button>` : h}
+            >${W("close")}</button>` : h}
       </div>
       <button
         type="button"
@@ -3592,13 +3659,13 @@ let j = class extends y {
         title=${this.lookupLabel}
         ?disabled=${this.disabled}
         @click=${() => this.open ? this.close() : this.openLookup()}
-      >${H("search")}</button>
+      >${W("search")}</button>
       ${this.value && this.href ? n`<a
             class="baht-refpicker-open"
             href=${this.href}
             aria-label="Open record"
             title="Open record"
-          >${H("external")}</a>` : h}
+          >${W("external")}</a>` : h}
       <div
         class="baht-refpicker-list"
         id=${this.listboxId}
@@ -3625,63 +3692,63 @@ let j = class extends y {
     </div>`;
   }
 };
-T([
+A([
   l()
 ], j.prototype, "label", 2);
-T([
+A([
   l()
 ], j.prototype, "value", 2);
-T([
+A([
   l()
 ], j.prototype, "display", 2);
-T([
+A([
   l()
 ], j.prototype, "placeholder", 2);
-T([
+A([
   l({ type: Boolean })
 ], j.prototype, "disabled", 2);
-T([
+A([
   l({ type: Boolean })
 ], j.prototype, "invalid", 2);
-T([
+A([
   l()
 ], j.prototype, "href", 2);
-T([
+A([
   l({ attribute: "lookup-label" })
 ], j.prototype, "lookupLabel", 2);
-T([
+A([
   l({ type: Number })
 ], j.prototype, "debounce", 2);
-T([
+A([
   l({ attribute: !1 })
 ], j.prototype, "fetcher", 2);
-T([
-  $()
+A([
+  y()
 ], j.prototype, "open", 2);
-T([
-  $()
+A([
+  y()
 ], j.prototype, "term", 2);
-T([
-  $()
+A([
+  y()
 ], j.prototype, "options", 2);
-T([
-  $()
+A([
+  y()
 ], j.prototype, "loading", 2);
-T([
-  $()
+A([
+  y()
 ], j.prototype, "activeIndex", 2);
-T([
-  Bt("input")
+A([
+  It("input")
 ], j.prototype, "inputEl", 2);
-j = T([
+j = A([
   b("baht-reference-picker")
 ], j);
-var di = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, I = (t, e, i, a) => {
+var di = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, M = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ui(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && di(e, i, s), s;
 };
-let F = class extends y {
+let E = class extends g {
   constructor() {
     super(...arguments), this.label = "Search", this.value = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.options = [], this.fetcher = null, this.debounce = 150, this.minChars = 1, this.maxItems = 8, this.freeText = !0, this.autocomplete = "off", this.term = "", this.open = !1, this.results = [], this.loading = !1, this.activeIndex = -1, this.fetchSeq = 0, this.picked = null, this.lastPicked = null, this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
@@ -3827,7 +3894,7 @@ let F = class extends y {
         aria-invalid=${this.invalid ? "true" : h}
         autocomplete=${this.autocomplete}
         placeholder=${this.placeholder || h}
-        .value=${ot(this.term)}
+        .value=${lt(this.term)}
         ?disabled=${this.disabled}
         @input=${(i) => this.onInput(i)}
         @keydown=${(i) => this.onKeydown(i)}
@@ -3864,63 +3931,63 @@ let F = class extends y {
     </div>`;
   }
 };
-I([
+M([
   l()
-], F.prototype, "label", 2);
-I([
+], E.prototype, "label", 2);
+M([
   l()
-], F.prototype, "value", 2);
-I([
+], E.prototype, "value", 2);
+M([
   l()
-], F.prototype, "placeholder", 2);
-I([
+], E.prototype, "placeholder", 2);
+M([
   l({ type: Boolean })
-], F.prototype, "disabled", 2);
-I([
+], E.prototype, "disabled", 2);
+M([
   l({ type: Boolean })
-], F.prototype, "invalid", 2);
-I([
+], E.prototype, "invalid", 2);
+M([
   l({ attribute: !1 })
-], F.prototype, "options", 2);
-I([
+], E.prototype, "options", 2);
+M([
   l({ attribute: !1 })
-], F.prototype, "fetcher", 2);
-I([
+], E.prototype, "fetcher", 2);
+M([
   l({ type: Number })
-], F.prototype, "debounce", 2);
-I([
+], E.prototype, "debounce", 2);
+M([
   l({ type: Number, attribute: "min-chars" })
-], F.prototype, "minChars", 2);
-I([
+], E.prototype, "minChars", 2);
+M([
   l({ type: Number, attribute: "max-items" })
-], F.prototype, "maxItems", 2);
-I([
+], E.prototype, "maxItems", 2);
+M([
   l({ attribute: "free-text", converter: (t) => t !== "false" })
-], F.prototype, "freeText", 2);
-I([
+], E.prototype, "freeText", 2);
+M([
   l()
-], F.prototype, "autocomplete", 2);
-I([
-  $()
-], F.prototype, "term", 2);
-I([
-  $()
-], F.prototype, "open", 2);
-I([
-  $()
-], F.prototype, "results", 2);
-I([
-  $()
-], F.prototype, "loading", 2);
-I([
-  $()
-], F.prototype, "activeIndex", 2);
-I([
-  Bt("input")
-], F.prototype, "inputEl", 2);
-F = I([
+], E.prototype, "autocomplete", 2);
+M([
+  y()
+], E.prototype, "term", 2);
+M([
+  y()
+], E.prototype, "open", 2);
+M([
+  y()
+], E.prototype, "results", 2);
+M([
+  y()
+], E.prototype, "loading", 2);
+M([
+  y()
+], E.prototype, "activeIndex", 2);
+M([
+  It("input")
+], E.prototype, "inputEl", 2);
+E = M([
   b("baht-typeahead")
-], F);
+], E);
 const cs = {
   text: "baht-input",
   email: "baht-input",
@@ -3953,7 +4020,7 @@ function vi(t) {
   let e = as.get(t);
   return e || (e = os(t), as.set(t, e)), e;
 }
-let Ie = class extends J {
+let Ie = class extends Y {
   constructor() {
     super(...arguments), this.rowErrors = [];
   }
@@ -3973,7 +4040,7 @@ let Ie = class extends J {
   addRow() {
     const t = {};
     for (const e of this.subFields)
-      e.type === "label" || e.type === "section" || (t[e.key] = se(e));
+      e.type === "label" || e.type === "section" || (t[e.key] = ae(e));
     this.emitInput([...this.rows, t]);
   }
   removeRow(t) {
@@ -4006,9 +4073,9 @@ let Ie = class extends J {
       this.patchRow(e, i.key, f);
     };
     return n`<div class="baht-field ${r}" data-key=${i.key} data-type=${i.type}>
-      ${ee`<${s}
+      ${se`<${s}
         .field=${i}
-        .value=${Object.hasOwn(t, i.key) ? t[i.key] : se(i)}
+        .value=${Object.hasOwn(t, i.key) ? t[i.key] : ae(i)}
         .disabled=${this.disabled}
         .readonly=${this.readonly}
         .required=${!!i.required}
@@ -4069,12 +4136,12 @@ ps([
 Ie = ps([
   b("baht-repeater")
 ], Ie);
-var $i = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, me = (t, e, i, a) => {
+var $i = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, ve = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? yi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && $i(e, i, s), s;
 };
-let Gt = class extends y {
+let Wt = class extends g {
   constructor() {
     super(...arguments), this.steps = [], this.current = 0, this.variant = "default";
   }
@@ -4098,19 +4165,19 @@ let Gt = class extends y {
     </ol>`;
   }
 };
-me([
+ve([
   l({ attribute: !1 })
-], Gt.prototype, "steps", 2);
-me([
+], Wt.prototype, "steps", 2);
+ve([
   l({ type: Number })
-], Gt.prototype, "current", 2);
-me([
+], Wt.prototype, "current", 2);
+ve([
   l()
-], Gt.prototype, "variant", 2);
-Gt = me([
+], Wt.prototype, "variant", 2);
+Wt = ve([
   b("baht-steps")
-], Gt);
-var gi = Object.defineProperty, wi = Object.getOwnPropertyDescriptor, X = (t, e, i, a) => {
+], Wt);
+var gi = Object.defineProperty, wi = Object.getOwnPropertyDescriptor, Q = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? wi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && gi(e, i, s), s;
@@ -4125,7 +4192,7 @@ function _i(t) {
   let e = is.get(t);
   return e || (e = os(t), is.set(t, e)), e;
 }
-let U = class extends y {
+let H = class extends g {
   constructor() {
     super(...arguments), this.value = {}, this.registry = {}, this.options = {}, this.fieldStates = {}, this.flags = {}, this.readonly = !1, this.edits = {}, this.errors = [], this.dynamicOptions = /* @__PURE__ */ new Map(), this.optionsSnapshots = /* @__PURE__ */ new Map(), this.optionsEpoch = /* @__PURE__ */ new Map(), this.warnedViews = /* @__PURE__ */ new Set(), this.flagCache = {};
   }
@@ -4178,7 +4245,7 @@ let U = class extends y {
     for (; e.length > 0; ) {
       const r = e.shift();
       for (const o of ((a = this.effectiveForm) == null ? void 0 : a.fields) ?? [])
-        !((s = o.options_deps) != null && s.includes(r)) || i.has(o.key) || (i.add(o.key), this.edits = { ...this.edits, [o.key]: se(o) }, e.push(o.key));
+        !((s = o.options_deps) != null && s.includes(r)) || i.has(o.key) || (i.add(o.key), this.edits = { ...this.edits, [o.key]: ae(o) }, e.push(o.key));
     }
   }
   get sortedFields() {
@@ -4196,7 +4263,7 @@ let U = class extends y {
     };
   }
   valueFor(t) {
-    return Object.hasOwn(this.edits, t.key) ? this.edits[t.key] : Object.hasOwn(this.value, t.key) ? this.value[t.key] : se(t);
+    return Object.hasOwn(this.edits, t.key) ? this.edits[t.key] : Object.hasOwn(this.value, t.key) ? this.value[t.key] : ae(t);
   }
   // ---- public API (spec 01 §6) ----
   /** Debounced keystrokes still in a control land in `edits` before anyone reads them. */
@@ -4265,51 +4332,51 @@ let U = class extends y {
     this.errors = [...i, ...e];
   }
   renderField(t) {
-    var C, d;
+    var x, u;
     const e = cs[t.type];
     if (!e)
       return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), h;
-    const i = this.stateFor(t), a = xi[t.width ?? "full"] ?? "baht-field--w-full", s = ((C = this.errors.find((v) => v.key === t.key)) == null ? void 0 : C.message) ?? null;
+    const i = this.stateFor(t), a = xi[t.width ?? "full"] ?? "baht-field--w-full", s = ((x = this.errors.find((v) => v.key === t.key)) == null ? void 0 : x.message) ?? null;
     if (this.readonly && t.type !== "label" && t.type !== "section")
       return this.renderReadonlyField(t, a, i.visible);
-    const r = t.options_from ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, o = this.valueFor(t), c = !i.enabled, f = this.readonly || i.readonly, g = this.options.inputDebounce, _ = (v) => this.onControlInput(t.key, v), p = _i(e);
-    let w;
+    const r = t.options_from ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, o = this.valueFor(t), c = !i.enabled, f = this.readonly || i.readonly, $ = this.options.inputDebounce, w = (v) => this.onControlInput(t.key, v), p = _i(e);
+    let P;
     if (t.type === "repeater") {
-      const v = this.errors.filter((z) => z.key.startsWith(`${t.key}[`));
-      w = ee`<${p}
+      const v = this.errors.filter((D) => D.key.startsWith(`${t.key}[`));
+      P = se`<${p}
         .field=${r}
         .value=${o}
         .disabled=${c}
         .readonly=${f}
         .required=${i.required}
         .error=${s}
-        .debounce=${g}
+        .debounce=${$}
         .rowErrors=${v}
-        @baht-input=${_}
+        @baht-input=${w}
       ></${p}>`;
     } else if (t.type === "file") {
       let v;
-      t.uploader && (v = (d = this.registry.uploaders) == null ? void 0 : d[t.uploader], v || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`)), w = ee`<${p}
+      t.uploader && (v = (u = this.registry.uploaders) == null ? void 0 : u[t.uploader], v || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`)), P = se`<${p}
         .field=${r}
         .value=${o}
         .disabled=${c}
         .readonly=${f}
         .required=${i.required}
         .error=${s}
-        .debounce=${g}
+        .debounce=${$}
         .uploader=${v}
-        @baht-input=${_}
+        @baht-input=${w}
       ></${p}>`;
     } else
-      w = ee`<${p}
+      P = se`<${p}
         .field=${r}
         .value=${o}
         .disabled=${c}
         .readonly=${f}
         .required=${i.required}
         .error=${s}
-        .debounce=${g}
-        @baht-input=${_}
+        .debounce=${$}
+        @baht-input=${w}
       ></${p}>`;
     return n`<div
       class="baht-field ${a} ${i.visible ? "" : "baht-field--hidden"}"
@@ -4318,7 +4385,7 @@ let U = class extends y {
       data-testid="${this.form.form_id}.${t.key}"
       @focusout=${() => this.onFieldBlur(t)}
     >
-      ${w}
+      ${P}
     </div>`;
   }
   /**
@@ -4365,45 +4432,45 @@ let U = class extends y {
     </div>`;
   }
 };
-X([
+Q([
   l({ attribute: !1 })
-], U.prototype, "form", 2);
-X([
+], H.prototype, "form", 2);
+Q([
   l({ attribute: !1 })
-], U.prototype, "value", 2);
-X([
+], H.prototype, "value", 2);
+Q([
   l({ attribute: !1 })
-], U.prototype, "registry", 2);
-X([
+], H.prototype, "registry", 2);
+Q([
   l({ attribute: !1 })
-], U.prototype, "options", 2);
-X([
+], H.prototype, "options", 2);
+Q([
   l({ attribute: !1 })
-], U.prototype, "fieldStates", 2);
-X([
+], H.prototype, "fieldStates", 2);
+Q([
   l({ type: String })
-], U.prototype, "view", 2);
-X([
+], H.prototype, "view", 2);
+Q([
   l({ attribute: !1 })
-], U.prototype, "flags", 2);
-X([
+], H.prototype, "flags", 2);
+Q([
   l({ type: Boolean })
-], U.prototype, "readonly", 2);
-X([
-  $()
-], U.prototype, "edits", 2);
-X([
-  $()
-], U.prototype, "errors", 2);
-U = X([
+], H.prototype, "readonly", 2);
+Q([
+  y()
+], H.prototype, "edits", 2);
+Q([
+  y()
+], H.prototype, "errors", 2);
+H = Q([
   b("baht-form")
-], U);
-var ki = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, N = (t, e, i, a) => {
+], H);
+var ki = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, q = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Pi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ki(e, i, s), s;
 };
-let M = class extends y {
+let T = class extends g {
   constructor() {
     super(...arguments), this.value = {}, this.registry = {}, this.validateGate = !0, this.showBack = !0, this.flags = {}, this.showSteps = !1, this.stepsVariant = "default", this.data = {}, this.derived = null, this.current = null, this.approvalError = null, this.history = [], this.flagCache = {};
   }
@@ -4538,7 +4605,7 @@ let M = class extends y {
     }
     this.emit("baht-reject", o);
     const c = i.on_reject ?? { action: "end" };
-    c.action === "goto" && this.visibleForms.some((g) => g.form_name === c.form) ? this.gotoForm(c.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
+    c.action === "goto" && this.visibleForms.some(($) => $.form_name === 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) {
@@ -4672,112 +4739,112 @@ let M = class extends y {
     </div>`;
   }
 };
-N([
+q([
   l({ attribute: !1 })
-], M.prototype, "workflow", 2);
-N([
+], T.prototype, "workflow", 2);
+q([
   l({ attribute: !1 })
-], M.prototype, "value", 2);
-N([
+], T.prototype, "value", 2);
+q([
   l({ attribute: !1 })
-], M.prototype, "registry", 2);
-N([
+], T.prototype, "registry", 2);
+q([
   l({ type: Boolean, attribute: "validate-gate" })
-], M.prototype, "validateGate", 2);
-N([
+], T.prototype, "validateGate", 2);
+q([
   l({ attribute: "next-label" })
-], M.prototype, "nextLabel", 2);
-N([
+], T.prototype, "nextLabel", 2);
+q([
   l({ attribute: "submit-label" })
-], M.prototype, "submitLabel", 2);
-N([
+], T.prototype, "submitLabel", 2);
+q([
   l({ attribute: "back-label" })
-], M.prototype, "backLabel", 2);
-N([
+], T.prototype, "backLabel", 2);
+q([
   l({ type: Boolean, attribute: "show-back" })
-], M.prototype, "showBack", 2);
-N([
+], T.prototype, "showBack", 2);
+q([
   l({ attribute: !1 })
-], M.prototype, "flags", 2);
-N([
+], T.prototype, "flags", 2);
+q([
   l({ type: Boolean, attribute: "show-steps" })
-], M.prototype, "showSteps", 2);
-N([
+], T.prototype, "showSteps", 2);
+q([
   l({ attribute: "steps-variant" })
-], M.prototype, "stepsVariant", 2);
-N([
-  $()
-], M.prototype, "data", 2);
-N([
-  $()
-], M.prototype, "derived", 2);
-N([
-  $()
-], M.prototype, "current", 2);
-N([
-  $()
-], M.prototype, "approvalError", 2);
-M = N([
+], T.prototype, "stepsVariant", 2);
+q([
+  y()
+], T.prototype, "data", 2);
+q([
+  y()
+], T.prototype, "derived", 2);
+q([
+  y()
+], T.prototype, "current", 2);
+q([
+  y()
+], T.prototype, "approvalError", 2);
+T = q([
   b("baht-workflow")
-], M);
+], T);
 export {
   Xe as $,
   ht as A,
-  Ct as B,
-  Pt as C,
+  Dt as B,
+  Ot as C,
   Ke as D,
-  rt as E,
-  mt as F,
+  ot as E,
+  vt as F,
   j as G,
   Ie as H,
   Ee as I,
-  oe as J,
-  Vt as K,
+  le as J,
+  Kt as K,
   ct as L,
-  ie as M,
+  re as M,
   K as N,
-  Ut as O,
-  Gt as P,
+  Ht as O,
+  Wt as P,
   k as Q,
   Fe as R,
   qe as S,
   De as T,
   Ue as U,
-  kt as V,
-  F as W,
-  D as X,
-  M as Y,
+  Pt as V,
+  E as W,
+  F as X,
+  T as Y,
   cs as Z,
-  nt as _,
-  ft as a,
+  ft as _,
+  mt as a,
   qa as a0,
-  qt as a1,
-  le as a2,
+  Rt as a1,
+  ne as a2,
   Be as a3,
-  be as a4,
-  zt as b,
-  R as c,
-  re as d,
-  Ot as e,
-  tt as f,
+  fe as a4,
+  Vt as b,
+  z as c,
+  oe as d,
+  Ct as e,
+  st as f,
   Ve as g,
-  ae as h,
+  ie as h,
   He as i,
-  G as j,
-  Ht as k,
-  Et as l,
-  Kt as m,
-  Ft as n,
-  $t as o,
-  U as p,
+  J as j,
+  Gt as k,
+  Bt as l,
+  Ut as m,
+  Et as n,
+  yt as o,
+  H as p,
   pt as q,
   Ne as r,
   dt as s,
-  Q as t,
-  Dt as u,
-  it as v,
-  W as w,
+  et as t,
+  Ft as u,
+  rt as v,
+  U as w,
   ze as x,
   Re as y,
-  vt as z
+  $t as z
 };