bank20baht-ui 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,31 +1,31 @@
-import { t as m, defaultValue as _t, applyFlags as ee, resolveViewFields as Vt, validateField as Ut, evaluate as pe, resolveNext as ce } from "./engine.js";
-import { approvalFields as dr, evalCondition as ur, evalValueExpr as br, flagEnabled as vr, getCatalog as fr, readRef as mr, setCatalog as yr, setLocale as $r, walkPath as gr } from "./engine.js";
-import { LitElement as de, nothing as h, html as n, svg as D } from "lit";
-import { property as l, query as tt, customElement as p, state as v } from "lit/decorators.js";
+import { t as m, defaultValue as _t, applyFlags as ee, resolveViewFields as Vt, validateField as Ut, displayValue as pe, evaluate as ce, resolveNext as de } from "./engine.js";
+import { approvalFields as ua, evalCondition as ba, evalValueExpr as va, flagEnabled as fa, getCatalog as ma, readRef as ya, setCatalog as $a, setLocale as ga, walkPath as wa } from "./engine.js";
+import { LitElement as ue, nothing as h, html as l, svg as D } from "lit";
+import { property as n, query as tt, customElement as p, state as v } from "lit/decorators.js";
 import { live as B } from "lit/directives/live.js";
 import { ifDefined as O } from "lit/directives/if-defined.js";
-var ue = Object.defineProperty, et = (t, e, a, r) => {
+var be = Object.defineProperty, et = (t, e, r, a) => {
   for (var s = void 0, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = o(e, a, s) || s);
-  return s && ue(e, a, s), s;
+    (o = t[i]) && (s = o(e, r, s) || s);
+  return s && be(e, r, s), s;
 };
-class c extends de {
+class d extends ue {
   createRenderRoot() {
     return this;
   }
 }
 function st(t, e) {
-  let a = e;
-  for (; a.parentNode && a.parentNode !== t; ) a = a.parentNode;
-  const r = Array.from(t.childNodes).filter(
-    (s) => s !== a && s.nodeType !== Node.COMMENT_NODE
+  let r = e;
+  for (; r.parentNode && r.parentNode !== t; ) r = r.parentNode;
+  const a = Array.from(t.childNodes).filter(
+    (s) => s !== r && s.nodeType !== Node.COMMENT_NODE
   );
-  r.length > 0 && e.append(...r);
+  a.length > 0 && e.append(...a);
 }
-let be = 0;
-class g extends c {
+let ve = 0;
+class g extends d {
   constructor() {
-    super(...arguments), this.uid = ++be, this.value = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.error = null;
+    super(...arguments), this.uid = ++ve, this.value = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.error = null;
   }
   /** Emit the user's edit upward (composed so it crosses any boundary). */
   emitInput(e) {
@@ -38,8 +38,8 @@ class g extends c {
     );
   }
   renderLabel() {
-    return this.field.label ? n`<label class="baht-label" id=${this.labelId} for=${this.controlId}>
-      ${this.field.label}${this.required ? n`<span class="baht-required-mark" aria-hidden="true">*</span>` : h}
+    return this.field.label ? l`<label class="baht-label" id=${this.labelId} for=${this.controlId}>
+      ${this.field.label}${this.required ? l`<span class="baht-required-mark" aria-hidden="true">*</span>` : h}
     </label>` : h;
   }
   get controlId() {
@@ -66,31 +66,31 @@ class g extends c {
     return this.error ? "true" : h;
   }
   render() {
-    return n`
+    return this.field ? l`
       ${this.renderLabel()}
       ${this.renderControl()}
-      ${this.field.help ? n`<div class="baht-help" id=${this.helpId}>${this.field.help}</div>` : h}
-      ${this.error ? n`<div class="baht-error" id=${this.errorId} role="alert">${this.error}</div>` : h}
-    `;
+      ${this.field.help ? l`<div class="baht-help" id=${this.helpId}>${this.field.help}</div>` : h}
+      ${this.error ? l`<div class="baht-error" id=${this.errorId} role="alert">${this.error}</div>` : h}
+    ` : h;
   }
 }
 et([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], g.prototype, "field");
 et([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], g.prototype, "value");
 et([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], g.prototype, "disabled");
 et([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], g.prototype, "readonly");
 et([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], g.prototype, "required");
 et([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], g.prototype, "error");
 const se = {
   copy: D`<rect x="6" y="6" width="8" height="8" rx="1.5"/><path d="M10 6V4.5A1.5 1.5 0 0 0 8.5 3H4.5A1.5 1.5 0 0 0 3 4.5v4A1.5 1.5 0 0 0 4.5 10H6"/>`,
@@ -104,7 +104,7 @@ const se = {
   search: D`<circle cx="7" cy="7" r="4"/><path d="m13 13-3.2-3.2"/>`
 };
 function J(t) {
-  return n`<svg
+  return l`<svg
     class="baht-icon"
     width="16"
     height="16"
@@ -117,15 +117,15 @@ function J(t) {
     aria-hidden="true"
   >${se[t]}</svg>`;
 }
-function ve(t) {
+function fe(t) {
   return t in se;
 }
-var fe = Object.defineProperty, me = Object.getOwnPropertyDescriptor, N = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? me(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && fe(e, a, s), s;
+var me = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, F = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ye(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && me(e, r, s), s;
 };
-let E = class extends c {
+let E = class extends d {
   constructor() {
     super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button", this.label = "", this.icon = "", this.iconOnly = !1;
   }
@@ -133,48 +133,48 @@ let E = class extends c {
     this.iconOnly || st(this, this.buttonEl);
   }
   render() {
-    const t = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, e = this.size === "md" ? "" : ` baht-button--${this.size}`, a = this.iconOnly ? " baht-button--icon" : "", r = this.icon && ve(this.icon) ? J(this.icon) : h;
-    return n`<button
-      class="baht-button${t}${e}${a}"
+    const t = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, e = this.size === "md" ? "" : ` baht-button--${this.size}`, r = this.iconOnly ? " baht-button--icon" : "", a = this.icon && fe(this.icon) ? J(this.icon) : h;
+    return l`<button
+      class="baht-button${t}${e}${r}"
       type=${this.type}
       aria-label=${this.iconOnly && this.label ? this.label : h}
       ?disabled=${this.disabled}
-    >${r}${this.iconOnly ? h : this.label}</button>`;
+    >${a}${this.iconOnly ? h : this.label}</button>`;
   }
 };
-N([
-  l()
+F([
+  n()
 ], E.prototype, "variant", 2);
-N([
-  l()
+F([
+  n()
 ], E.prototype, "size", 2);
-N([
-  l({ type: Boolean })
+F([
+  n({ type: Boolean })
 ], E.prototype, "disabled", 2);
-N([
-  l()
+F([
+  n()
 ], E.prototype, "type", 2);
-N([
-  l()
+F([
+  n()
 ], E.prototype, "label", 2);
-N([
-  l()
+F([
+  n()
 ], E.prototype, "icon", 2);
-N([
-  l({ type: Boolean, attribute: "icon-only" })
+F([
+  n({ type: Boolean, attribute: "icon-only" })
 ], E.prototype, "iconOnly", 2);
-N([
+F([
   tt("button")
 ], E.prototype, "buttonEl", 2);
-E = N([
+E = F([
   p("baht-button")
 ], E);
-var ye = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, kt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? $e(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && ye(e, a, s), s;
+var $e = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, kt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ge(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && $e(e, r, s), s;
 };
-let ht = class extends c {
+let ht = class extends d {
   constructor() {
     super(...arguments), this.tone = "neutral", this.label = "", this.dot = null;
   }
@@ -183,29 +183,29 @@ let ht = class extends c {
   }
   render() {
     const t = this.tone === "neutral" ? "" : ` baht-badge--${this.tone}`;
-    return n`<span class="baht-badge${t}">
-      ${this.showDot ? n`<span class="baht-badge-dot" aria-hidden="true"></span>` : h}${this.label}
+    return l`<span class="baht-badge${t}">
+      ${this.showDot ? l`<span class="baht-badge-dot" aria-hidden="true"></span>` : h}${this.label}
     </span>`;
   }
 };
 kt([
-  l()
+  n()
 ], ht.prototype, "tone", 2);
 kt([
-  l()
+  n()
 ], ht.prototype, "label", 2);
 kt([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], ht.prototype, "dot", 2);
 ht = kt([
   p("baht-badge")
 ], ht);
-var ge = Object.defineProperty, we = Object.getOwnPropertyDescriptor, Lt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? we(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && ge(e, a, s), s;
+var we = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, Rt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? _e(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && we(e, r, s), s;
 };
-let xt = class extends c {
+let xt = class extends d {
   constructor() {
     super(...arguments), this.variant = "inline", this.code = "";
   }
@@ -214,24 +214,24 @@ let xt = class extends c {
     t && st(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>`;
+    return this.variant === "block" ? l`<pre class="baht-code baht-code--block" tabindex="0">${this.code}</pre>` : l`<code class="baht-code">${this.code}</code>`;
   }
 };
-Lt([
-  l()
+Rt([
+  n()
 ], xt.prototype, "variant", 2);
-Lt([
-  l()
+Rt([
+  n()
 ], xt.prototype, "code", 2);
-xt = Lt([
+xt = Rt([
   p("baht-code")
 ], xt);
-var _e = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, U = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? xe(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && _e(e, a, s), s;
+var xe = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, U = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Oe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && xe(e, r, s), s;
 };
-let F = class extends c {
+let N = class extends d {
   constructor() {
     super(...arguments), this.page = 1, this.totalPages = 1, this.variant = "numbered", this.siblings = 1, this.hasNext = !1, this.hasPrev = !1;
   }
@@ -256,62 +256,62 @@ let F = class extends c {
   }
   /** Visible page numbers with `null` marking an ellipsis gap. */
   get pageItems() {
-    const { page: t, totalPages: e, siblings: a } = this, r = /* @__PURE__ */ new Set([1, e]);
-    for (let d = t - a; d <= t + a; d++)
-      d >= 1 && d <= e && r.add(d);
-    const s = [...r].sort((d, b) => d - b), i = [];
+    const { page: t, totalPages: e, siblings: r } = this, a = /* @__PURE__ */ new Set([1, e]);
+    for (let c = t - r; c <= t + r; c++)
+      c >= 1 && c <= e && a.add(c);
+    const s = [...a].sort((c, b) => c - b), i = [];
     let o = 0;
-    for (const d of s)
-      o && d - o === 2 ? i.push(o + 1) : o && d - o > 2 && i.push(null), i.push(d), o = d;
+    for (const c of s)
+      o && c - o === 2 ? i.push(o + 1) : o && c - o > 2 && i.push(null), i.push(c), o = c;
     return i;
   }
   render() {
     if (this.variant === "cursor")
-      return n`<nav class="baht-pagination baht-pagination--cursor" aria-label="Pagination">
+      return l`<nav class="baht-pagination baht-pagination--cursor" aria-label="Pagination">
         <button type="button" ?disabled=${!this.hasPrev} @click=${() => this.goCursor("prev")}>« Prev</button>
         <button type="button" ?disabled=${!this.hasNext} @click=${() => this.goCursor("next")}>Next »</button>
       </nav>`;
     const t = this.page <= 1, e = this.page >= this.totalPages;
-    return n`<nav class="baht-pagination" aria-label="Pagination">
+    return l`<nav class="baht-pagination" aria-label="Pagination">
       <button type="button" aria-label="Previous page" ?disabled=${t} @click=${() => this.go(this.page - 1)}>«</button>
-      ${this.variant === "compact" ? n`<span class="baht-pagination-label">Page ${this.page} of ${this.totalPages}</span>` : this.pageItems.map(
-      (a) => a === null ? n`<span class="baht-pagination-ellipsis">…</span>` : n`<button
+      ${this.variant === "compact" ? l`<span class="baht-pagination-label">Page ${this.page} of ${this.totalPages}</span>` : this.pageItems.map(
+      (r) => r === null ? l`<span class="baht-pagination-ellipsis">…</span>` : l`<button
                   type="button"
-                  aria-current=${a === this.page ? "page" : h}
-                  @click=${() => this.go(a)}
-                >${a}</button>`
+                  aria-current=${r === this.page ? "page" : h}
+                  @click=${() => this.go(r)}
+                >${r}</button>`
     )}
       <button type="button" aria-label="Next page" ?disabled=${e} @click=${() => this.go(this.page + 1)}>»</button>
     </nav>`;
   }
 };
 U([
-  l({ type: Number })
-], F.prototype, "page", 2);
+  n({ type: Number })
+], N.prototype, "page", 2);
 U([
-  l({ type: Number, attribute: "total-pages" })
-], F.prototype, "totalPages", 2);
+  n({ type: Number, attribute: "total-pages" })
+], N.prototype, "totalPages", 2);
 U([
-  l()
-], F.prototype, "variant", 2);
+  n()
+], N.prototype, "variant", 2);
 U([
-  l({ type: Number })
-], F.prototype, "siblings", 2);
+  n({ type: Number })
+], N.prototype, "siblings", 2);
 U([
-  l({ type: Boolean, attribute: "has-next" })
-], F.prototype, "hasNext", 2);
+  n({ type: Boolean, attribute: "has-next" })
+], N.prototype, "hasNext", 2);
 U([
-  l({ type: Boolean, attribute: "has-prev" })
-], F.prototype, "hasPrev", 2);
-F = U([
+  n({ type: Boolean, attribute: "has-prev" })
+], N.prototype, "hasPrev", 2);
+N = U([
   p("baht-pagination")
-], F);
-var Oe = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, f = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Pe(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Oe(e, a, s), s;
+], N);
+var Pe = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, f = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ke(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Pe(e, r, s), s;
 };
-let u = class extends c {
+let u = class extends d {
   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.onPickerKeydown = (t) => {
       t.key === "Escape" && this.closePicker();
@@ -326,7 +326,7 @@ let u = class extends c {
   }
   get columnKeys() {
     const t = this.allColumnKeys;
-    return (this.pickedColumns ?? (this.visibleColumns.length > 0 ? this.visibleColumns : t)).filter((a) => t.includes(a));
+    return (this.pickedColumns ?? (this.visibleColumns.length > 0 ? this.visibleColumns : t)).filter((r) => t.includes(r));
   }
   openPicker() {
     this.draftColumns = this.columnKeys.slice(), this.pickAvail = [], this.pickSel = [], this.pickerOpen = !0, document.addEventListener("keydown", this.onPickerKeydown);
@@ -347,10 +347,10 @@ let u = class extends c {
     this.draftColumns = this.draftColumns.filter((t) => !this.pickSel.includes(t)), this.pickSel = [];
   }
   moveSelected(t) {
-    const e = [...this.draftColumns], a = this.pickSel.map((r) => e.indexOf(r)).filter((r) => r >= 0).sort((r, s) => t === -1 ? r - s : s - r);
-    for (const r of a) {
-      const s = r + t;
-      s < 0 || s >= e.length || ([e[r], e[s]] = [e[s], e[r]]);
+    const e = [...this.draftColumns], r = this.pickSel.map((a) => e.indexOf(a)).filter((a) => a >= 0).sort((a, s) => t === -1 ? a - s : s - a);
+    for (const a of r) {
+      const s = a + t;
+      s < 0 || s >= e.length || ([e[a], e[s]] = [e[s], e[a]]);
     }
     this.draftColumns = e;
   }
@@ -376,32 +376,32 @@ let u = class extends c {
     );
   }
   cell(t, e) {
-    const a = this.renderers[e], r = t[e];
-    return a ? a(r, t) : r == null ? "" : String(r);
+    const r = this.renderers[e], a = t[e];
+    return r ? r(a, t) : a == null ? "" : String(a);
   }
   renderBody(t) {
     const e = t.length + (this.showIndex ? 1 : 0);
-    return this.loading ? n`${Array.from(
+    return this.loading ? l`${Array.from(
       { length: this.skeletonRows },
-      (a, r) => n`<tr>
-          ${this.showIndex ? n`<td class="baht-table-index">${this.indexOffset + r + 1}</td>` : h}
-          ${t.map(() => n`<td><span class="baht-skeleton" style="height:16px;"></span></td>`)}
+      (r, a) => l`<tr>
+          ${this.showIndex ? l`<td class="baht-table-index">${this.indexOffset + a + 1}</td>` : h}
+          ${t.map(() => l`<td><span class="baht-skeleton" style="height:16px;"></span></td>`)}
         </tr>`
-    )}` : this.error ? n`<tr><td colspan=${e}><div class="baht-table-state baht-table-state--error">${this.errorMessage}</div></td></tr>` : this.items.length === 0 ? n`<tr><td colspan=${e}><div class="baht-table-state">${this.emptyMessage}</div></td></tr>` : n`${this.items.map(
-      (a, r) => n`<tr
+    )}` : this.error ? l`<tr><td colspan=${e}><div class="baht-table-state baht-table-state--error">${this.errorMessage}</div></td></tr>` : this.items.length === 0 ? l`<tr><td colspan=${e}><div class="baht-table-state">${this.emptyMessage}</div></td></tr>` : l`${this.items.map(
+      (r, a) => l`<tr
         tabindex=${this.clickable ? "0" : h}
-        @click=${() => this.emitRow(a, r)}
+        @click=${() => this.emitRow(r, a)}
         @keydown=${(s) => {
-        s.key !== "Enter" && s.key !== " " || (s.preventDefault(), this.emitRow(a, r));
+        s.key !== "Enter" && s.key !== " " || (s.preventDefault(), this.emitRow(r, a));
       }}
       >
-        ${this.showIndex ? n`<td class="baht-table-index">${this.indexOffset + r + 1}</td>` : h}
-        ${t.map((s) => n`<td data-col=${s}>${this.cell(a, s)}</td>`)}
+        ${this.showIndex ? l`<td class="baht-table-index">${this.indexOffset + a + 1}</td>` : h}
+        ${t.map((s) => l`<td data-col=${s}>${this.cell(r, s)}</td>`)}
       </tr>`
     )}`;
   }
   renderColumnToggle() {
-    return n`<div class="baht-table-picker">
+    return l`<div class="baht-table-picker">
       <button
         type="button"
         class="baht-table-picker-toggle"
@@ -412,10 +412,10 @@ let u = class extends c {
     </div>`;
   }
   renderColumnModal() {
-    const t = this.allColumnKeys, e = t.filter((r) => !this.draftColumns.includes(r)), a = (r) => (s) => r(u.selectedValues(s));
-    return n`<div
+    const t = this.allColumnKeys, e = t.filter((a) => !this.draftColumns.includes(a)), r = (a) => (s) => a(u.selectedValues(s));
+    return l`<div
       class="baht-table-picker-scrim"
-      @click=${(r) => r.target === r.currentTarget && this.closePicker()}
+      @click=${(a) => a.target === a.currentTarget && this.closePicker()}
     >
       <div class="baht-table-picker-modal" role="dialog" aria-modal="true" aria-label="Choose columns">
         <div class="baht-table-picker-modal-head">
@@ -425,9 +425,9 @@ let u = class extends c {
         <div class="baht-table-picker-grid">
           <div>
             <div class="baht-table-picker-collabel">Available (${e.length})</div>
-            <select multiple size="10" class="baht-table-picker-select" @change=${a((r) => this.pickAvail = r)}>
+            <select multiple size="10" class="baht-table-picker-select" @change=${r((a) => this.pickAvail = a)}>
               ${e.map(
-      (r) => n`<option value=${r} ?selected=${this.pickAvail.includes(r)}>${this.labelFor(r)}</option>`
+      (a) => l`<option value=${a} ?selected=${this.pickAvail.includes(a)}>${this.labelFor(a)}</option>`
     )}
             </select>
           </div>
@@ -439,9 +439,9 @@ let u = class extends c {
           </div>
           <div>
             <div class="baht-table-picker-collabel">Selected (${this.draftColumns.length})</div>
-            <select multiple size="10" class="baht-table-picker-select" @change=${a((r) => this.pickSel = r)}>
+            <select multiple size="10" class="baht-table-picker-select" @change=${r((a) => this.pickSel = a)}>
               ${this.draftColumns.map(
-      (r) => n`<option value=${r} ?selected=${this.pickSel.includes(r)}>${this.labelFor(r)}</option>`
+      (a) => l`<option value=${a} ?selected=${this.pickSel.includes(a)}>${this.labelFor(a)}</option>`
     )}
             </select>
           </div>
@@ -458,7 +458,7 @@ let u = class extends c {
   }
   render() {
     const t = this.columnKeys;
-    return n`<div
+    return l`<div
       class="baht-table-wrap"
       tabindex=${this.clickable ? h : "0"}
       aria-busy=${this.loading ? "true" : h}
@@ -468,19 +468,19 @@ let u = class extends c {
       <table class="baht-table">
         <thead>
           <tr>
-            ${this.showIndex ? n`<th scope="col" class="baht-table-index">No.</th>` : h}
-            ${t.map((e) => n`<th scope="col" data-col=${e}>${this.labelFor(e)}</th>`)}
+            ${this.showIndex ? l`<th scope="col" class="baht-table-index">No.</th>` : h}
+            ${t.map((e) => l`<th scope="col" data-col=${e}>${this.labelFor(e)}</th>`)}
           </tr>
         </thead>
         <tbody>${this.renderBody(t)}</tbody>
       </table>
-      ${this.cursorMode ? n`<div class="baht-table-footer">
+      ${this.cursorMode ? l`<div class="baht-table-footer">
             <baht-pagination
               variant="cursor"
               ?has-next=${this.hasNext}
               ?has-prev=${this.hasPrev}
             ></baht-pagination>
-          </div>` : this.totalPages > 1 ? n`<div class="baht-table-footer">
+          </div>` : this.totalPages > 1 ? l`<div class="baht-table-footer">
               <baht-pagination
                 variant="compact"
                 page=${this.page}
@@ -491,61 +491,61 @@ let u = class extends c {
   }
 };
 f([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], u.prototype, "items", 2);
 f([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], u.prototype, "columns", 2);
 f([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], u.prototype, "loading", 2);
 f([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], u.prototype, "error", 2);
 f([
-  l({ attribute: "error-message" })
+  n({ attribute: "error-message" })
 ], u.prototype, "errorMessage", 2);
 f([
-  l({ attribute: "empty-message" })
+  n({ attribute: "empty-message" })
 ], u.prototype, "emptyMessage", 2);
 f([
-  l({ type: Boolean, attribute: "show-index" })
+  n({ type: Boolean, attribute: "show-index" })
 ], u.prototype, "showIndex", 2);
 f([
-  l({ type: Number, attribute: "index-offset" })
+  n({ type: Number, attribute: "index-offset" })
 ], u.prototype, "indexOffset", 2);
 f([
-  l({ type: Number, attribute: "skeleton-rows" })
+  n({ type: Number, attribute: "skeleton-rows" })
 ], u.prototype, "skeletonRows", 2);
 f([
-  l({ attribute: "row-key" })
+  n({ attribute: "row-key" })
 ], u.prototype, "rowKey", 2);
 f([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], u.prototype, "clickable", 2);
 f([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], u.prototype, "renderers", 2);
 f([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], u.prototype, "visibleColumns", 2);
 f([
-  l({ type: Boolean, attribute: "column-picker" })
+  n({ type: Boolean, attribute: "column-picker" })
 ], u.prototype, "columnPicker", 2);
 f([
-  l({ type: Number })
+  n({ type: Number })
 ], u.prototype, "page", 2);
 f([
-  l({ type: Number, attribute: "total-pages" })
+  n({ type: Number, attribute: "total-pages" })
 ], u.prototype, "totalPages", 2);
 f([
-  l({ type: Boolean, attribute: "cursor-mode" })
+  n({ type: Boolean, attribute: "cursor-mode" })
 ], u.prototype, "cursorMode", 2);
 f([
-  l({ type: Boolean, attribute: "has-next" })
+  n({ type: Boolean, attribute: "has-next" })
 ], u.prototype, "hasNext", 2);
 f([
-  l({ type: Boolean, attribute: "has-prev" })
+  n({ type: Boolean, attribute: "has-prev" })
 ], u.prototype, "hasPrev", 2);
 f([
   v()
@@ -565,12 +565,12 @@ f([
 u = f([
   p("baht-table")
 ], u);
-var ke = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, L = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ce(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && ke(e, a, s), s;
+var Ce = Object.defineProperty, De = Object.getOwnPropertyDescriptor, R = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? De(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ce(e, r, s), s;
 };
-let j = class extends c {
+let j = class extends d {
   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;
   }
@@ -584,67 +584,67 @@ let j = class extends c {
     );
   }
   renderRows() {
-    return this.loading ? n`${Array.from(
+    return this.loading ? l`${Array.from(
       { length: this.skeletonRows },
-      () => n`<div class="baht-list-item">
+      () => l`<div class="baht-list-item">
           <div class="baht-list-main">
             <span class="baht-skeleton baht-skeleton--text" style="width:40%; margin-bottom:6px;"></span>
             <span class="baht-skeleton baht-skeleton--text" style="width:65%;"></span>
           </div>
         </div>`
-    )}` : this.error ? n`<div class="baht-list-state baht-list-state--error">${this.errorMessage}</div>` : this.items.length === 0 ? n`<div class="baht-list-state">${this.emptyMessage}</div>` : n`${this.items.map(
-      (t, e) => n`<div
+    )}` : this.error ? l`<div class="baht-list-state baht-list-state--error">${this.errorMessage}</div>` : this.items.length === 0 ? l`<div class="baht-list-state">${this.emptyMessage}</div>` : l`${this.items.map(
+      (t, e) => l`<div
         class="baht-list-item"
         role="listitem"
         tabindex=${this.clickable ? "0" : h}
         @click=${() => this.emitItem(t, e)}
-        @keydown=${(a) => {
-        a.key !== "Enter" && a.key !== " " || (a.preventDefault(), this.emitItem(t, e));
+        @keydown=${(r) => {
+        r.key !== "Enter" && r.key !== " " || (r.preventDefault(), this.emitItem(t, e));
       }}
       >
         <div class="baht-list-main">
           <div class="baht-list-title">${t.title}</div>
-          ${t.subtitle ? n`<div class="baht-list-subtitle">${t.subtitle}</div>` : h}
+          ${t.subtitle ? l`<div class="baht-list-subtitle">${t.subtitle}</div>` : h}
         </div>
-        ${t.badge ? n`<baht-badge tone=${t.badgeTone ?? "neutral"} label=${t.badge}></baht-badge>` : h}
-        ${t.meta ? n`<span class="baht-list-meta">${t.meta}</span>` : h}
+        ${t.badge ? l`<baht-badge tone=${t.badgeTone ?? "neutral"} label=${t.badge}></baht-badge>` : h}
+        ${t.meta ? l`<span class="baht-list-meta">${t.meta}</span>` : h}
       </div>`
     )}`;
   }
   render() {
-    return n`<div class="baht-list" role="list">${this.renderRows()}</div>`;
+    return l`<div class="baht-list" role="list">${this.renderRows()}</div>`;
   }
 };
-L([
-  l({ attribute: !1 })
+R([
+  n({ attribute: !1 })
 ], j.prototype, "items", 2);
-L([
-  l({ type: Boolean })
+R([
+  n({ type: Boolean })
 ], j.prototype, "loading", 2);
-L([
-  l({ type: Boolean })
+R([
+  n({ type: Boolean })
 ], j.prototype, "error", 2);
-L([
-  l({ attribute: "error-message" })
+R([
+  n({ attribute: "error-message" })
 ], j.prototype, "errorMessage", 2);
-L([
-  l({ attribute: "empty-message" })
+R([
+  n({ attribute: "empty-message" })
 ], j.prototype, "emptyMessage", 2);
-L([
-  l({ type: Number, attribute: "skeleton-rows" })
+R([
+  n({ type: Number, attribute: "skeleton-rows" })
 ], j.prototype, "skeletonRows", 2);
-L([
-  l({ type: Boolean })
+R([
+  n({ type: Boolean })
 ], j.prototype, "clickable", 2);
-j = L([
+j = R([
   p("baht-list")
 ], j);
-var De = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, rt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ee(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && De(e, a, s), s;
+var Ee = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, at = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Be(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ee(e, r, s), s;
 };
-let x = class extends c {
+let x = class extends d {
   constructor() {
     super(...arguments), this.open = !1, this.heading = "", this.showClose = !0, this.closeOnScrim = !0, this.previousFocus = null, this.onKeydown = (t) => {
       !this.open || x.openStack.at(-1) !== this || (t.key === "Escape" ? this.requestClose("escape") : t.key === "Tab" && this.trapFocus(t));
@@ -660,17 +660,17 @@ let x = class extends c {
   }
   /** Keep Tab cycling inside the dialog (no keyboard escape to the page behind). */
   trapFocus(t) {
-    const e = this.focusables(), a = this.querySelector(".baht-modal");
+    const e = this.focusables(), r = this.querySelector(".baht-modal");
     if (e.length === 0) {
-      a == null || a.focus(), t.preventDefault();
+      r == null || r.focus(), t.preventDefault();
       return;
     }
-    const r = e[0], s = e[e.length - 1], i = document.activeElement;
+    const a = e[0], s = e[e.length - 1], i = document.activeElement;
     if (!this.contains(i)) {
-      r.focus(), t.preventDefault();
+      a.focus(), t.preventDefault();
       return;
     }
-    t.shiftKey && (i === r || i === a) ? (s.focus(), t.preventDefault()) : !t.shiftKey && i === s && (r.focus(), t.preventDefault());
+    t.shiftKey && (i === a || i === r) ? (s.focus(), t.preventDefault()) : !t.shiftKey && i === s && (a.focus(), t.preventDefault());
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this.onKeydown);
@@ -682,10 +682,10 @@ let x = class extends c {
     st(this, this.bodyEl);
   }
   updated(t) {
-    var e, a;
-    if (t.has("open") && (x.openStack = x.openStack.filter((r) => r !== this), this.open && x.openStack.push(this)), t.has("open") && this.open && (this.previousFocus = document.activeElement, (e = this.querySelector(".baht-modal")) == null || e.focus()), t.has("open") && !this.open && t.get("open") === !0) {
-      const r = this.previousFocus;
-      this.previousFocus = null, r != null && r.isConnected && (!document.activeElement || document.activeElement === document.body || this.contains(document.activeElement)) && ((a = r.focus) == null || a.call(r));
+    var e, r;
+    if (t.has("open") && (x.openStack = x.openStack.filter((a) => a !== this), this.open && x.openStack.push(this)), t.has("open") && this.open && (this.previousFocus = document.activeElement, (e = this.querySelector(".baht-modal")) == null || e.focus()), t.has("open") && !this.open && t.get("open") === !0) {
+      const a = this.previousFocus;
+      this.previousFocus = null, a != null && a.isConnected && (!document.activeElement || document.activeElement === document.body || this.contains(document.activeElement)) && ((r = a.focus) == null || r.call(a));
     }
   }
   /** Ask the host to close (the host owns `open`). */
@@ -695,15 +695,15 @@ let x = class extends c {
     );
   }
   render() {
-    return n`<div
+    return l`<div
       class="baht-modal-scrim"
       style=${this.open ? h : "display:none"}
       @click=${(t) => this.closeOnScrim && t.target === t.currentTarget && this.requestClose("scrim")}
     >
       <div class="baht-modal" role="dialog" aria-modal="true" aria-label=${this.heading || "Dialog"} tabindex="-1">
-        ${this.heading || this.showClose ? n`<header class="baht-modal-header">
+        ${this.heading || this.showClose ? l`<header class="baht-modal-header">
               <div class="baht-modal-title">${this.heading}</div>
-              ${this.showClose ? n`<button type="button" class="baht-modal-close" aria-label="Close" @click=${() => this.requestClose("button")}>×</button>` : h}
+              ${this.showClose ? l`<button type="button" class="baht-modal-close" aria-label="Close" @click=${() => this.requestClose("button")}>×</button>` : h}
             </header>` : h}
         <div class="baht-modal-body"></div>
       </div>
@@ -711,30 +711,30 @@ let x = class extends c {
   }
 };
 x.openStack = [];
-rt([
-  l({ type: Boolean, reflect: !0 })
+at([
+  n({ type: Boolean, reflect: !0 })
 ], x.prototype, "open", 2);
-rt([
-  l()
+at([
+  n()
 ], x.prototype, "heading", 2);
-rt([
-  l({ type: Boolean, attribute: "show-close" })
+at([
+  n({ type: Boolean, attribute: "show-close" })
 ], x.prototype, "showClose", 2);
-rt([
-  l({ type: Boolean, attribute: "close-on-scrim" })
+at([
+  n({ type: Boolean, attribute: "close-on-scrim" })
 ], x.prototype, "closeOnScrim", 2);
-rt([
+at([
   tt(".baht-modal-body")
 ], x.prototype, "bodyEl", 2);
-x = rt([
+x = at([
   p("baht-modal")
 ], x);
-var Be = Object.defineProperty, je = Object.getOwnPropertyDescriptor, Rt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? je(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Be(e, a, s), s;
+var je = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, Lt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Se(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && je(e, r, s), s;
 };
-let W = class extends c {
+let W = class extends d {
   constructor() {
     super(...arguments), this.duration = 4e3, this.entries = [], this.timers = /* @__PURE__ */ new Map();
   }
@@ -751,8 +751,8 @@ let W = class extends c {
     ), e.id;
   }
   dismiss(t) {
-    const e = this.entries.find((a) => a.id === t);
-    e && (clearTimeout(this.timers.get(t)), this.timers.delete(t), this.entries = this.entries.filter((a) => a.id !== t), this.dispatchEvent(
+    const e = this.entries.find((r) => r.id === t);
+    e && (clearTimeout(this.timers.get(t)), this.timers.delete(t), this.entries = this.entries.filter((r) => r.id !== t), this.dispatchEvent(
       new CustomEvent("baht-dismiss", {
         detail: { id: t, message: e.message },
         bubbles: !0,
@@ -764,10 +764,10 @@ let W = class extends c {
     this.timers.forEach((t) => clearTimeout(t)), this.timers.clear(), super.disconnectedCallback();
   }
   render() {
-    return n`<div class="baht-toaster" role="status" aria-live="polite">
+    return l`<div class="baht-toaster" role="status" aria-live="polite">
       ${this.entries.map(
       // Danger/warning interrupt (role=alert); the rest ride the polite container.
-      (t) => n`<div
+      (t) => l`<div
           class="baht-toast ${t.tone === "neutral" ? "" : `baht-toast--${t.tone}`}"
           role=${t.tone === "danger" || t.tone === "warning" ? "alert" : h}
         >
@@ -779,21 +779,21 @@ let W = class extends c {
   }
 };
 W.counter = 0;
-Rt([
-  l({ type: Number })
+Lt([
+  n({ type: Number })
 ], W.prototype, "duration", 2);
-Rt([
+Lt([
   v()
 ], W.prototype, "entries", 2);
-W = Rt([
+W = Lt([
   p("baht-toast")
 ], W);
-var Se = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, ft = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ne(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Se(e, a, s), s;
+var Fe = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, ft = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ne(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Fe(e, r, s), s;
 };
-let I = class extends c {
+let I = class extends d {
   constructor() {
     super(...arguments), this.text = "", this.position = "top", this.dismissed = !1, this.uid = ++I.instances;
   }
@@ -821,7 +821,7 @@ let I = class extends c {
     this.dismissed = !1;
   }
   render() {
-    return n`<span
+    return l`<span
       class="baht-tooltip-host${this.dismissed ? " baht-tooltip-host--dismissed" : ""}"
       @keydown=${this.onKeydown}
       @mouseleave=${this.rearm}
@@ -834,10 +834,10 @@ let I = class extends c {
 };
 I.instances = 0;
 ft([
-  l()
+  n()
 ], I.prototype, "text", 2);
 ft([
-  l()
+  n()
 ], I.prototype, "position", 2);
 ft([
   tt(".baht-tooltip-anchor")
@@ -848,12 +848,12 @@ ft([
 I = ft([
   p("baht-tooltip")
 ], I);
-var Fe = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, at = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ie(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Fe(e, a, s), s;
+var Ie = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, rt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? qe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ie(e, r, s), s;
 };
-let A = class extends c {
+let A = class extends d {
   constructor() {
     super(...arguments), this.tone = "info", this.heading = "", this.message = "", this.dismissible = !1, this.dismissed = !1;
   }
@@ -864,39 +864,39 @@ let A = class extends c {
     this.dismissed = !0, this.dispatchEvent(new CustomEvent("baht-dismiss", { bubbles: !0, composed: !0 }));
   }
   render() {
-    return this.dismissed ? h : n`<div class="baht-alert baht-alert--${this.tone}" role="alert">
+    return this.dismissed ? h : l`<div class="baht-alert baht-alert--${this.tone}" role="alert">
       <div class="baht-alert-main">
-        ${this.heading ? n`<div class="baht-alert-title">${this.heading}</div>` : h}
-        ${this.message ? n`<div class="baht-alert-message">${this.message}</div>` : h}
+        ${this.heading ? l`<div class="baht-alert-title">${this.heading}</div>` : h}
+        ${this.message ? l`<div class="baht-alert-message">${this.message}</div>` : h}
       </div>
-      ${this.dismissible ? n`<button type="button" class="baht-alert-dismiss" aria-label="Dismiss" @click=${() => this.dismiss()}>×</button>` : h}
+      ${this.dismissible ? l`<button type="button" class="baht-alert-dismiss" aria-label="Dismiss" @click=${() => this.dismiss()}>×</button>` : h}
     </div>`;
   }
 };
-at([
-  l()
+rt([
+  n()
 ], A.prototype, "tone", 2);
-at([
-  l()
+rt([
+  n()
 ], A.prototype, "heading", 2);
-at([
-  l()
+rt([
+  n()
 ], A.prototype, "message", 2);
-at([
-  l({ type: Boolean })
+rt([
+  n({ type: Boolean })
 ], A.prototype, "dismissible", 2);
-at([
+rt([
   v()
 ], A.prototype, "dismissed", 2);
-A = at([
+A = rt([
   p("baht-alert")
 ], A);
-var qe = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, it = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Me(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && qe(e, a, s), s;
+var Me = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, it = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Re(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Me(e, r, s), s;
 };
-let T = class extends c {
+let T = class extends d {
   constructor() {
     super(...arguments), this.value = 0, this.max = 5, this.readonly = !1, this.label = "Rating", this.hover = 0;
   }
@@ -910,56 +910,56 @@ let T = class extends c {
   }
   /** APG radio-group keys: arrows move the value, Home/End jump the ends. */
   onKeydown(t, e) {
-    var r;
+    var a;
     if (this.readonly) return;
-    let a;
-    if (t.key === "ArrowRight" || t.key === "ArrowUp") a = Math.min(e + 1, this.max);
-    else if (t.key === "ArrowLeft" || t.key === "ArrowDown") a = Math.max(e - 1, 1);
-    else if (t.key === "Home") a = 1;
-    else if (t.key === "End") a = this.max;
+    let r;
+    if (t.key === "ArrowRight" || t.key === "ArrowUp") r = Math.min(e + 1, this.max);
+    else if (t.key === "ArrowLeft" || t.key === "ArrowDown") r = Math.max(e - 1, 1);
+    else if (t.key === "Home") r = 1;
+    else if (t.key === "End") r = this.max;
     else return;
-    t.preventDefault(), this.emitValue(a), (r = this.querySelectorAll("button")[a - 1]) == null || r.focus();
+    t.preventDefault(), this.emitValue(r), (a = this.querySelectorAll("button")[r - 1]) == null || a.focus();
   }
   setHover(t) {
     this.readonly || (this.hover = t);
   }
   render() {
     const t = this.hover || this.value;
-    return n`<div
+    return l`<div
       class="baht-rating"
       role="radiogroup"
       aria-label=${this.label}
       @mouseleave=${() => this.setHover(0)}
     >
-      ${Array.from({ length: this.max }, (e, a) => {
-      const r = a + 1, s = this.value || 1;
-      return n`<button
+      ${Array.from({ length: this.max }, (e, r) => {
+      const a = r + 1, s = this.value || 1;
+      return l`<button
           type="button"
-          class=${r <= t ? "baht-rating--on" : ""}
+          class=${a <= t ? "baht-rating--on" : ""}
           role="radio"
-          aria-checked=${r === this.value}
-          aria-label="${r} of ${this.max}"
-          tabindex=${r === s ? "0" : "-1"}
+          aria-checked=${a === this.value}
+          aria-label="${a} of ${this.max}"
+          tabindex=${a === s ? "0" : "-1"}
           ?disabled=${this.readonly}
-          @mouseenter=${() => this.setHover(r)}
-          @click=${() => this.pick(r)}
-          @keydown=${(i) => this.onKeydown(i, r)}
+          @mouseenter=${() => this.setHover(a)}
+          @click=${() => this.pick(a)}
+          @keydown=${(i) => this.onKeydown(i, a)}
         >★</button>`;
     })}
     </div>`;
   }
 };
 it([
-  l({ type: Number })
+  n({ type: Number })
 ], T.prototype, "value", 2);
 it([
-  l({ type: Number })
+  n({ type: Number })
 ], T.prototype, "max", 2);
 it([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], T.prototype, "readonly", 2);
 it([
-  l()
+  n()
 ], T.prototype, "label", 2);
 it([
   v()
@@ -967,12 +967,12 @@ it([
 T = it([
   p("baht-rating")
 ], T);
-var Le = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, R = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Re(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Le(e, a, s), s;
+var Le = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, L = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ae(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Le(e, r, s), s;
 };
-let k = class extends c {
+let k = class extends d {
   constructor() {
     super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.label = "", this.disabled = !1, this.showValue = !0, this.uid = ++k.instances;
   }
@@ -986,8 +986,8 @@ let k = class extends c {
     );
   }
   render() {
-    return n`<div class="baht-range">
-      ${this.label ? n`<label class="baht-label" for=${this.inputId}>${this.label}</label>` : h}
+    return l`<div class="baht-range">
+      ${this.label ? l`<label class="baht-label" for=${this.inputId}>${this.label}</label>` : h}
       <div class="baht-range-row">
         <input
           type="range"
@@ -1000,42 +1000,42 @@ let k = class extends c {
           ?disabled=${this.disabled}
           @input=${(t) => this.onInput(t)}
         />
-        ${this.showValue ? n`<span class="baht-range-value">${this.value}</span>` : h}
+        ${this.showValue ? l`<span class="baht-range-value">${this.value}</span>` : h}
       </div>
     </div>`;
   }
 };
 k.instances = 0;
-R([
-  l({ type: Number })
+L([
+  n({ type: Number })
 ], k.prototype, "value", 2);
-R([
-  l({ type: Number })
+L([
+  n({ type: Number })
 ], k.prototype, "min", 2);
-R([
-  l({ type: Number })
+L([
+  n({ type: Number })
 ], k.prototype, "max", 2);
-R([
-  l({ type: Number })
+L([
+  n({ type: Number })
 ], k.prototype, "step", 2);
-R([
-  l()
+L([
+  n()
 ], k.prototype, "label", 2);
-R([
-  l({ type: Boolean })
+L([
+  n({ type: Boolean })
 ], k.prototype, "disabled", 2);
-R([
-  l({ type: Boolean, attribute: "show-value" })
+L([
+  n({ type: Boolean, attribute: "show-value" })
 ], k.prototype, "showValue", 2);
-k = R([
+k = L([
   p("baht-range")
 ], k);
-var Ae = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, ot = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Te(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Ae(e, a, s), s;
+var Te = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, ot = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ke(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Te(e, r, s), s;
 };
-let K = class extends c {
+let K = class extends d {
   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;
   }
@@ -1048,17 +1048,17 @@ let K = class extends c {
   willUpdate(t) {
     super.willUpdate(t);
     const e = t.has("value") && this.value !== this._lastValue;
-    !this.hasUpdated || e ? (this._chars = Array.from({ length: this.length }, (a, r) => this.value[r] ?? ""), this._lastValue = this.value, this._wasFull = this._chars.length > 0 && this._chars.every((a) => a !== "")) : this._chars.length !== this.length && (this._chars = Array.from({ length: this.length }, (a, r) => this._chars[r] ?? ""));
+    !this.hasUpdated || e ? (this._chars = Array.from({ length: this.length }, (r, a) => this.value[a] ?? ""), this._lastValue = this.value, this._wasFull = this._chars.length > 0 && this._chars.every((r) => r !== "")) : this._chars.length !== this.length && (this._chars = Array.from({ length: this.length }, (r, a) => this._chars[a] ?? ""));
   }
   /** Writes `text` into `_chars` starting at `start`. Returns the index just
    *  past the last box written (may equal `this.length`). */
   fill(t, e) {
-    let a = t;
-    for (const r of e) {
-      if (a >= this.length) break;
-      this._chars[a] = r, a += 1;
+    let r = t;
+    for (const a of e) {
+      if (r >= this.length) break;
+      this._chars[r] = a, r += 1;
     }
-    return a;
+    return r;
   }
   commit() {
     const t = this._chars.join("").slice(0, this.length);
@@ -1069,7 +1069,7 @@ let K = class extends c {
         composed: !0
       })
     );
-    const e = this._chars.length > 0 && this._chars.every((a) => a !== "");
+    const e = this._chars.length > 0 && this._chars.every((r) => r !== "");
     e && !this._wasFull && this.dispatchEvent(
       new CustomEvent("baht-otp-complete", {
         detail: { value: this.value },
@@ -1080,31 +1080,31 @@ let K = class extends c {
   }
   onInput(t, e) {
     var i, o;
-    const a = e.target, r = this.clean(a.value);
-    if (r.length > 1) {
-      const d = this.fill(t, r);
-      a.value = this._chars[t] ?? "", this.commit(), (i = this.inputs()[Math.min(d, this.length - 1)]) == null || i.focus();
+    const r = e.target, a = this.clean(r.value);
+    if (a.length > 1) {
+      const c = this.fill(t, a);
+      r.value = this._chars[t] ?? "", this.commit(), (i = this.inputs()[Math.min(c, this.length - 1)]) == null || i.focus();
       return;
     }
-    const s = r.slice(-1);
-    a.value = s, this._chars[t] = s, this.commit(), s && t < this.length - 1 && ((o = this.inputs()[t + 1]) == null || o.focus());
+    const s = a.slice(-1);
+    r.value = s, this._chars[t] = s, this.commit(), s && t < this.length - 1 && ((o = this.inputs()[t + 1]) == null || o.focus());
   }
   onKeydown(t, e) {
-    var a;
-    e.key === "Backspace" && !this._chars[t] && t > 0 && (this._chars[t - 1] = "", this.commit(), (a = this.inputs()[t - 1]) == null || a.focus(), e.preventDefault());
+    var r;
+    e.key === "Backspace" && !this._chars[t] && t > 0 && (this._chars[t - 1] = "", this.commit(), (r = this.inputs()[t - 1]) == null || r.focus(), e.preventDefault());
   }
   onPaste(t) {
-    var r, s;
+    var a, s;
     t.preventDefault();
-    const e = this.clean(((r = t.clipboardData) == null ? void 0 : r.getData("text")) ?? "").slice(0, this.length);
+    const e = this.clean(((a = t.clipboardData) == null ? void 0 : a.getData("text")) ?? "").slice(0, this.length);
     if (!e) return;
-    const a = this.fill(0, e);
-    this.commit(), (s = this.inputs()[Math.min(a, this.length - 1)]) == null || s.focus();
+    const r = this.fill(0, e);
+    this.commit(), (s = this.inputs()[Math.min(r, this.length - 1)]) == null || s.focus();
   }
   render() {
-    return n`<div class="baht-otp" role="group" aria-label=${this.label} @paste=${(t) => this.onPaste(t)}>
+    return l`<div class="baht-otp" role="group" aria-label=${this.label} @paste=${(t) => this.onPaste(t)}>
       ${this._chars.map(
-      (t, e) => n`<input
+      (t, e) => l`<input
           type="text"
           inputmode=${this.mode === "numeric" ? "numeric" : "text"}
           maxlength="1"
@@ -1112,51 +1112,51 @@ let K = class extends c {
           aria-label="Character ${e + 1} of ${this.length}"
           .value=${t}
           ?disabled=${this.disabled}
-          @input=${(a) => this.onInput(e, a)}
-          @keydown=${(a) => this.onKeydown(e, a)}
+          @input=${(r) => this.onInput(e, r)}
+          @keydown=${(r) => this.onKeydown(e, r)}
         />`
     )}
     </div>`;
   }
 };
 ot([
-  l({ type: Number })
+  n({ type: Number })
 ], K.prototype, "length", 2);
 ot([
-  l()
+  n()
 ], K.prototype, "value", 2);
 ot([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], K.prototype, "disabled", 2);
 ot([
-  l()
+  n()
 ], K.prototype, "mode", 2);
 ot([
-  l()
+  n()
 ], K.prototype, "label", 2);
 K = ot([
   p("baht-otp")
 ], K);
-var Ke = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, lt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ve(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Ke(e, a, s), s;
+var Ve = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, lt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ue(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ve(e, r, s), s;
 };
-let V = class extends c {
+let V = class extends d {
   constructor() {
     super(...arguments), this.options = [], this.selected = [], this.multiple = !0, this.disabled = !1, this.label = "Filters";
   }
   toggle(t) {
     const e = this.selected.includes(t);
-    let a;
-    this.multiple ? (a = e ? this.selected.filter((s) => s !== t) : [...this.selected, t], a = this.options.map((s) => s.key).filter((s) => a.includes(s))) : a = e ? [] : [t], this.dispatchEvent(
-      new CustomEvent("baht-change", { detail: { selected: a }, bubbles: !0, composed: !0 })
+    let r;
+    this.multiple ? (r = e ? this.selected.filter((s) => s !== t) : [...this.selected, t], r = this.options.map((s) => s.key).filter((s) => r.includes(s))) : r = e ? [] : [t], this.dispatchEvent(
+      new CustomEvent("baht-change", { detail: { selected: r }, bubbles: !0, composed: !0 })
     );
   }
   render() {
-    return n`<div class="baht-filter" role="group" aria-label=${this.label}>
+    return l`<div class="baht-filter" role="group" aria-label=${this.label}>
       ${this.options.map(
-      (t) => n`<button
+      (t) => l`<button
           type="button"
           aria-pressed=${this.selected.includes(t.key)}
           ?disabled=${this.disabled}
@@ -1167,35 +1167,35 @@ let V = class extends c {
   }
 };
 lt([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], V.prototype, "options", 2);
 lt([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], V.prototype, "selected", 2);
 lt([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], V.prototype, "multiple", 2);
 lt([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], V.prototype, "disabled", 2);
 lt([
-  l()
+  n()
 ], V.prototype, "label", 2);
 V = lt([
   p("baht-filter")
 ], V);
-var Ue = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, Ct = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? ze(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Ue(e, a, s), s;
+var ze = Object.defineProperty, He = Object.getOwnPropertyDescriptor, Ct = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? He(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && ze(e, r, s), s;
 };
-let pt = class extends c {
+let pt = class extends d {
   constructor() {
     super(...arguments), this.variant = "rect", this.width = "100%", this.height = "";
   }
   render() {
     const t = this.height || (this.variant === "text" ? "1em" : "20px"), e = this.variant === "rect" ? "" : ` baht-skeleton--${this.variant}`;
-    return n`<span
+    return l`<span
       class="baht-skeleton${e}"
       style="width:${this.width}; height:${t};"
       aria-hidden="true"
@@ -1203,31 +1203,31 @@ let pt = class extends c {
   }
 };
 Ct([
-  l()
+  n()
 ], pt.prototype, "variant", 2);
 Ct([
-  l()
+  n()
 ], pt.prototype, "width", 2);
 Ct([
-  l()
+  n()
 ], pt.prototype, "height", 2);
 pt = Ct([
   p("baht-skeleton")
 ], pt);
-var He = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, mt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Je(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && He(e, a, s), s;
+var Je = Object.defineProperty, We = Object.getOwnPropertyDescriptor, mt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? We(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Je(e, r, s), s;
 };
-let G = class extends c {
+let G = class extends d {
   constructor() {
     super(...arguments), this.value = null, this.tone = "primary", this.showLabel = !1, this.label = "Progress";
   }
   render() {
-    const t = this.value == null || Number.isNaN(this.value), e = t ? 0 : Math.min(100, Math.max(0, this.value)), a = this.tone === "primary" ? "" : ` baht-progress--${this.tone}`;
-    return n`<div>
+    const t = this.value == null || Number.isNaN(this.value), e = t ? 0 : Math.min(100, Math.max(0, this.value)), r = this.tone === "primary" ? "" : ` baht-progress--${this.tone}`;
+    return l`<div>
       <div
-        class="baht-progress${a}${t ? " baht-progress--indeterminate" : ""}"
+        class="baht-progress${r}${t ? " baht-progress--indeterminate" : ""}"
         role="progressbar"
         aria-label=${this.label}
         aria-valuemin="0"
@@ -1236,54 +1236,54 @@ let G = class extends c {
       >
         <div class="baht-progress-bar" style=${t ? h : `width:${e}%`}></div>
       </div>
-      ${this.showLabel && !t ? n`<div class="baht-progress-label">${e}%</div>` : h}
+      ${this.showLabel && !t ? l`<div class="baht-progress-label">${e}%</div>` : h}
     </div>`;
   }
 };
 mt([
-  l({ type: Number })
+  n({ type: Number })
 ], G.prototype, "value", 2);
 mt([
-  l()
+  n()
 ], G.prototype, "tone", 2);
 mt([
-  l({ type: Boolean, attribute: "show-label" })
+  n({ type: Boolean, attribute: "show-label" })
 ], G.prototype, "showLabel", 2);
 mt([
-  l()
+  n()
 ], G.prototype, "label", 2);
 G = mt([
   p("baht-progress")
 ], G);
-var We = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, At = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ge(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && We(e, a, s), s;
+var Ge = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, At = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ye(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ge(e, r, s), s;
 };
-let Ot = class extends c {
+let Ot = class extends d {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
   render() {
     const t = this.size === "md" ? "" : ` baht-spinner--${this.size}`;
-    return n`<span class="baht-spinner${t}" role="status" aria-label=${this.label}></span>`;
+    return l`<span class="baht-spinner${t}" role="status" aria-label=${this.label}></span>`;
   }
 };
 At([
-  l()
+  n()
 ], Ot.prototype, "size", 2);
 At([
-  l()
+  n()
 ], Ot.prototype, "label", 2);
 Ot = At([
   p("baht-spinner")
 ], Ot);
-var Ye = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, yt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Qe(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Ye(e, a, s), s;
+var Qe = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, yt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Xe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Qe(e, r, s), s;
 };
-let Y = class extends c {
+let Y = class extends d {
   constructor() {
     super(...arguments), this.heading = "", this.subtitle = "", this.hero = !1;
   }
@@ -1291,21 +1291,21 @@ let Y = class extends c {
     st(this, this.bodyEl);
   }
   render() {
-    return n`<div class="baht-card${this.hero ? " baht-card--hero" : ""}">
-      ${this.heading ? n`<div class="baht-card-title">${this.heading}</div>` : h}
-      ${this.subtitle ? n`<div class="baht-card-subtitle">${this.subtitle}</div>` : h}
+    return l`<div class="baht-card${this.hero ? " baht-card--hero" : ""}">
+      ${this.heading ? l`<div class="baht-card-title">${this.heading}</div>` : h}
+      ${this.subtitle ? l`<div class="baht-card-subtitle">${this.subtitle}</div>` : h}
       <div class="baht-card-body"></div>
     </div>`;
   }
 };
 yt([
-  l()
+  n()
 ], Y.prototype, "heading", 2);
 yt([
-  l()
+  n()
 ], Y.prototype, "subtitle", 2);
 yt([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], Y.prototype, "hero", 2);
 yt([
   tt(".baht-card-body")
@@ -1313,12 +1313,12 @@ yt([
 Y = yt([
   p("baht-card")
 ], Y);
-var Xe = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, Dt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ze(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Xe(e, a, s), s;
+var Ze = Object.defineProperty, ts = Object.getOwnPropertyDescriptor, Dt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ts(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ze(e, r, s), s;
 };
-let ct = class extends c {
+let ct = class extends d {
   constructor() {
     super(...arguments), this.legend = "", this.disabled = !1;
   }
@@ -1326,17 +1326,17 @@ let ct = class extends c {
     st(this, this.bodyEl);
   }
   render() {
-    return n`<fieldset class="baht-fieldset" ?disabled=${this.disabled}>
-      ${this.legend ? n`<legend>${this.legend}</legend>` : h}
+    return l`<fieldset class="baht-fieldset" ?disabled=${this.disabled}>
+      ${this.legend ? l`<legend>${this.legend}</legend>` : h}
       <div class="baht-fieldset-body"></div>
     </fieldset>`;
   }
 };
 Dt([
-  l()
+  n()
 ], ct.prototype, "legend", 2);
 Dt([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], ct.prototype, "disabled", 2);
 Dt([
   tt(".baht-fieldset-body")
@@ -1344,47 +1344,47 @@ Dt([
 ct = Dt([
   p("baht-fieldset")
 ], ct);
-var ts = Object.defineProperty, es = Object.getOwnPropertyDescriptor, re = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? es(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && ts(e, a, s), s;
+var es = Object.defineProperty, ss = Object.getOwnPropertyDescriptor, ae = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ss(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && es(e, r, s), s;
 };
-let Ft = class extends c {
+let Nt = class extends d {
   constructor() {
     super(...arguments), this.items = [];
   }
   render() {
-    return n`<div class="baht-timeline" role="list">
+    return l`<div class="baht-timeline" role="list">
       ${this.items.map(
-      (t, e) => n`<div class="baht-timeline-item" role="listitem">
+      (t, e) => l`<div class="baht-timeline-item" role="listitem">
           <div class="baht-timeline-rail">
             <span class="baht-timeline-dot${t.tone && t.tone !== "primary" ? ` baht-timeline-dot--${t.tone}` : ""}"></span>
-            ${e < this.items.length - 1 ? n`<span class="baht-timeline-line"></span>` : h}
+            ${e < this.items.length - 1 ? l`<span class="baht-timeline-line"></span>` : h}
           </div>
           <div class="baht-timeline-main">
             <div class="baht-timeline-title">
               ${t.title}
-              ${t.time ? n`<span class="baht-timeline-time"> · ${t.time}</span>` : h}
+              ${t.time ? l`<span class="baht-timeline-time"> · ${t.time}</span>` : h}
             </div>
-            ${t.description ? n`<div class="baht-timeline-desc">${t.description}</div>` : h}
+            ${t.description ? l`<div class="baht-timeline-desc">${t.description}</div>` : h}
           </div>
         </div>`
     )}
     </div>`;
   }
 };
-re([
-  l({ attribute: !1 })
-], Ft.prototype, "items", 2);
-Ft = re([
+ae([
+  n({ attribute: !1 })
+], Nt.prototype, "items", 2);
+Nt = ae([
   p("baht-timeline")
-], Ft);
-var ss = Object.defineProperty, rs = Object.getOwnPropertyDescriptor, Et = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? rs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && ss(e, a, s), s;
+], Nt);
+var as = Object.defineProperty, rs = Object.getOwnPropertyDescriptor, Et = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? rs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && as(e, r, s), s;
 };
-let q = class extends c {
+let q = class extends d {
   constructor() {
     super(...arguments), this.items = [], this.multiple = !1, this.openSet = /* @__PURE__ */ new Set(), this.uid = ++q.instances, this.itemsFingerprint = "";
   }
@@ -1394,32 +1394,32 @@ let q = class extends c {
   willUpdate(t) {
     if (t.has("items")) {
       const e = q.fingerprint(this.items);
-      e !== this.itemsFingerprint && (this.itemsFingerprint = e, this.openSet = new Set(this.items.flatMap((a, r) => a.open ? [r] : [])));
+      e !== this.itemsFingerprint && (this.itemsFingerprint = e, this.openSet = new Set(this.items.flatMap((r, a) => r.open ? [a] : [])));
     }
   }
   toggle(t) {
-    const e = !this.openSet.has(t), a = this.multiple ? new Set(this.openSet) : /* @__PURE__ */ new Set();
-    e ? a.add(t) : a.delete(t), this.openSet = a, this.dispatchEvent(
+    const e = !this.openSet.has(t), r = this.multiple ? new Set(this.openSet) : /* @__PURE__ */ new Set();
+    e ? r.add(t) : r.delete(t), this.openSet = r, this.dispatchEvent(
       new CustomEvent("baht-toggle", { detail: { index: t, open: e }, bubbles: !0, composed: !0 })
     );
   }
   render() {
-    return n`<div class="baht-accordion">
+    return l`<div class="baht-accordion">
       ${this.items.map((t, e) => {
-      const a = this.openSet.has(e), r = `baht-acc-${this.uid}-t-${e}`, s = `baht-acc-${this.uid}-p-${e}`;
-      return n`<div class="baht-accordion-item${a ? " baht-accordion-item--open" : ""}">
+      const r = this.openSet.has(e), a = `baht-acc-${this.uid}-t-${e}`, s = `baht-acc-${this.uid}-p-${e}`;
+      return l`<div class="baht-accordion-item${r ? " baht-accordion-item--open" : ""}">
           <button
             type="button"
             class="baht-accordion-trigger"
-            id=${r}
-            aria-expanded=${a}
-            aria-controls=${a ? s : h}
+            id=${a}
+            aria-expanded=${r}
+            aria-controls=${r ? s : h}
             @click=${() => this.toggle(e)}
           >
             <span>${t.title}</span>
             <span class="baht-accordion-chevron" aria-hidden="true">▾</span>
           </button>
-          ${a ? n`<div class="baht-accordion-content" id=${s} role="region" aria-labelledby=${r}>${t.content}</div>` : h}
+          ${r ? l`<div class="baht-accordion-content" id=${s} role="region" aria-labelledby=${a}>${t.content}</div>` : h}
         </div>`;
     })}
     </div>`;
@@ -1427,10 +1427,10 @@ let q = class extends c {
 };
 q.instances = 0;
 Et([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], q.prototype, "items", 2);
 Et([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], q.prototype, "multiple", 2);
 Et([
   v()
@@ -1438,45 +1438,45 @@ Et([
 q = Et([
   p("baht-accordion")
 ], q);
-var as = Object.defineProperty, is = Object.getOwnPropertyDescriptor, $t = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? is(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && as(e, a, s), s;
+var is = Object.defineProperty, os = Object.getOwnPropertyDescriptor, $t = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? os(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && is(e, r, s), s;
 };
-let Q = class extends c {
+let Q = class extends d {
   constructor() {
     super(...arguments), this.href = "", this.label = "", this.external = !1, this.externalHint = "opens in new tab";
   }
   render() {
-    return n`<a
+    return l`<a
       class="baht-link"
       href=${this.href || h}
       target=${this.external ? "_blank" : h}
       rel=${this.external ? "noopener noreferrer" : h}
-    >${this.label}${this.external ? n` <span class="baht-link-external" aria-hidden="true">↗</span><span class="baht-visually-hidden"> (${this.externalHint})</span>` : h}</a>`;
+    >${this.label}${this.external ? l` <span class="baht-link-external" aria-hidden="true">↗</span><span class="baht-visually-hidden"> (${this.externalHint})</span>` : h}</a>`;
   }
 };
 $t([
-  l()
+  n()
 ], Q.prototype, "href", 2);
 $t([
-  l()
+  n()
 ], Q.prototype, "label", 2);
 $t([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], Q.prototype, "external", 2);
 $t([
-  l({ attribute: "external-hint" })
+  n({ attribute: "external-hint" })
 ], Q.prototype, "externalHint", 2);
 Q = $t([
   p("baht-link")
 ], Q);
-var os = Object.defineProperty, ls = Object.getOwnPropertyDescriptor, Tt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? ls(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && os(e, a, s), s;
+var ls = Object.defineProperty, ns = Object.getOwnPropertyDescriptor, Tt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ns(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && ls(e, r, s), s;
 };
-let Pt = class extends c {
+let Pt = class extends d {
   constructor() {
     super(...arguments), this.items = [], this.separator = "›";
   }
@@ -1487,37 +1487,37 @@ let Pt = class extends c {
   }
   render() {
     const t = this.items.length - 1;
-    return n`<nav class="baht-breadcrumbs" aria-label="Breadcrumb">
-      ${this.items.map((e, a) => {
-      const r = a < t ? n`<span class="baht-breadcrumbs-sep" aria-hidden="true">${this.separator}</span>` : h;
-      return a === t ? n`<span class="baht-breadcrumbs-current" aria-current="page">${e.label}</span>${r}` : e.href ? n`<a class="baht-link" href=${e.href}>${e.label}</a>${r}` : n`<a
+    return l`<nav class="baht-breadcrumbs" aria-label="Breadcrumb">
+      ${this.items.map((e, r) => {
+      const a = r < t ? l`<span class="baht-breadcrumbs-sep" aria-hidden="true">${this.separator}</span>` : h;
+      return r === t ? l`<span class="baht-breadcrumbs-current" aria-current="page">${e.label}</span>${a}` : e.href ? l`<a class="baht-link" href=${e.href}>${e.label}</a>${a}` : l`<a
           class="baht-link"
           href="#"
           @click=${(s) => {
-        s.preventDefault(), this.navigate(e, a);
+        s.preventDefault(), this.navigate(e, r);
       }}
-        >${e.label}</a>${r}`;
+        >${e.label}</a>${a}`;
     })}
     </nav>`;
   }
 };
 Tt([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], Pt.prototype, "items", 2);
 Tt([
-  l()
+  n()
 ], Pt.prototype, "separator", 2);
 Pt = Tt([
   p("baht-breadcrumbs")
 ], Pt);
-var ns = Object.getOwnPropertyDescriptor, hs = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? ns(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var hs = Object.getOwnPropertyDescriptor, ps = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? hs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
 let zt = class extends g {
   renderControl() {
-    return n`<input
+    return l`<input
       class="baht-control baht-control--text"
       id=${this.controlId}
       type=${this.field.type === "email" ? "email" : this.field.type === "password" ? "password" : "text"}
@@ -1534,17 +1534,17 @@ let zt = class extends g {
     />`;
   }
 };
-zt = hs([
+zt = ps([
   p("baht-input")
 ], zt);
-var ps = Object.getOwnPropertyDescriptor, cs = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? ps(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var cs = Object.getOwnPropertyDescriptor, ds = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? cs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
 let Ht = class extends g {
   renderControl() {
-    return n`<textarea
+    return l`<textarea
       class="baht-control baht-control--textarea"
       id=${this.controlId}
       .value=${B(this.value == null ? "" : String(this.value))}
@@ -1561,17 +1561,17 @@ let Ht = class extends g {
     ></textarea>`;
   }
 };
-Ht = cs([
+Ht = ds([
   p("baht-textarea")
 ], Ht);
-var ds = Object.getOwnPropertyDescriptor, us = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? ds(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var us = Object.getOwnPropertyDescriptor, bs = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? us(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
 let Jt = class extends g {
   renderControl() {
-    return n`<input
+    return l`<input
       class="baht-control baht-control--number"
       id=${this.controlId}
       type="number"
@@ -1592,18 +1592,18 @@ let Jt = class extends g {
     />`;
   }
 };
-Jt = us([
+Jt = bs([
   p("baht-number")
 ], Jt);
-var bs = Object.getOwnPropertyDescriptor, vs = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? bs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var vs = Object.getOwnPropertyDescriptor, fs = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? vs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
 let Wt = class extends g {
   renderControl() {
     const t = this.value == null ? "" : String(this.value);
-    return n`<select
+    return l`<select
       class="baht-control baht-control--select"
       id=${this.controlId}
       .value=${B(t)}
@@ -1612,22 +1612,22 @@ let Wt = class extends g {
       aria-invalid=${this.invalid}
       aria-describedby=${this.describedBy}
       @change=${(e) => {
-      const a = e.target.value;
-      this.emitInput(a === "" ? null : a);
+      const r = e.target.value;
+      this.emitInput(r === "" ? null : r);
     }}
     >
-      <option value="" ?selected=${t === ""}>${this.field.placeholder ?? "—"}</option>
+      <option value="" ?selected=${t === ""}>${this.field.placeholder ?? m("choose")}</option>
       ${(this.field.options ?? []).map(
-      (e) => n`<option value=${e.key} ?selected=${t === e.key}>${e.label}</option>`
+      (e) => l`<option value=${e.key} ?selected=${t === e.key}>${e.label}</option>`
     )}
     </select>`;
   }
 };
-Wt = vs([
+Wt = fs([
   p("baht-select")
 ], Wt);
-var fs = Object.getOwnPropertyDescriptor, ms = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? fs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var ms = Object.getOwnPropertyDescriptor, ys = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ms(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
@@ -1636,18 +1636,18 @@ let Gt = class extends g {
     return Array.isArray(this.value) ? this.value : [];
   }
   toggle(t, e) {
-    const a = e ? [...this.selected, t] : this.selected.filter((s) => s !== t), r = (this.field.options ?? []).map((s) => s.key);
-    this.emitInput(r.filter((s) => a.includes(s)));
+    const r = e ? [...this.selected, t] : this.selected.filter((s) => s !== t), a = (this.field.options ?? []).map((s) => s.key);
+    this.emitInput(a.filter((s) => r.includes(s)));
   }
   renderControl() {
-    return n`<div
+    return l`<div
       class="baht-control baht-control--multiselect"
       role="group"
       aria-labelledby=${this.field.label ? this.labelId : h}
       aria-describedby=${this.describedBy}
     >
       ${(this.field.options ?? []).map(
-      (t) => n`<label class="baht-option">
+      (t) => l`<label class="baht-option">
           <input
             type="checkbox"
             value=${t.key}
@@ -1661,11 +1661,11 @@ let Gt = class extends g {
     </div>`;
   }
 };
-Gt = ms([
+Gt = ys([
   p("baht-multiselect")
 ], Gt);
-var ys = Object.getOwnPropertyDescriptor, $s = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? ys(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var $s = Object.getOwnPropertyDescriptor, gs = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? $s(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
@@ -1675,7 +1675,7 @@ let Yt = class extends g {
     return h;
   }
   renderControl() {
-    return n`<label class="baht-control baht-control--checkbox baht-option">
+    return l`<label class="baht-control baht-control--checkbox baht-option">
       <input
         type="checkbox"
         id=${this.controlId}
@@ -1687,22 +1687,22 @@ let Yt = class extends g {
         @change=${(t) => this.emitInput(t.target.checked)}
       />
       <span class="baht-label"
-        >${this.field.label}${this.required ? n`<span class="baht-required-mark">*</span>` : h}</span
+        >${this.field.label}${this.required ? l`<span class="baht-required-mark">*</span>` : h}</span
       >
     </label>`;
   }
 };
-Yt = $s([
+Yt = gs([
   p("baht-checkbox")
 ], Yt);
-var gs = Object.getOwnPropertyDescriptor, ws = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? gs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var ws = Object.getOwnPropertyDescriptor, _s = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ws(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
 let Qt = class extends g {
   renderControl() {
-    return n`<div
+    return l`<div
       class="baht-control baht-control--radio"
       role="radiogroup"
       aria-labelledby=${this.field.label ? this.labelId : h}
@@ -1711,7 +1711,7 @@ let Qt = class extends g {
       aria-describedby=${this.describedBy}
     >
       ${(this.field.options ?? []).map(
-      (t) => n`<label class="baht-option">
+      (t) => l`<label class="baht-option">
           <input
             type="radio"
             name=${this.controlId}
@@ -1726,11 +1726,11 @@ let Qt = class extends g {
     </div>`;
   }
 };
-Qt = ws([
+Qt = _s([
   p("baht-radio")
 ], Qt);
-var _s = Object.getOwnPropertyDescriptor, xs = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? _s(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var xs = Object.getOwnPropertyDescriptor, Os = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? xs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
@@ -1739,7 +1739,7 @@ let Xt = class extends g {
     return h;
   }
   renderControl() {
-    return n`<label class="baht-control baht-control--toggle baht-option">
+    return l`<label class="baht-control baht-control--toggle baht-option">
       <input
         type="checkbox"
         role="switch"
@@ -1754,22 +1754,22 @@ let Xt = class extends g {
       />
       <span class="baht-toggle-track"><span class="baht-toggle-thumb"></span></span>
       <span class="baht-label"
-        >${this.field.label}${this.required ? n`<span class="baht-required-mark">*</span>` : h}</span
+        >${this.field.label}${this.required ? l`<span class="baht-required-mark">*</span>` : h}</span
       >
     </label>`;
   }
 };
-Xt = xs([
+Xt = Os([
   p("baht-toggle")
 ], Xt);
-var Os = Object.getOwnPropertyDescriptor, Ps = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Os(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+var Ps = Object.getOwnPropertyDescriptor, ks = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ps(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
 let Zt = class extends g {
   renderControl() {
-    return n`<input
+    return l`<input
       class="baht-control baht-control--date"
       id=${this.controlId}
       type="date"
@@ -1788,18 +1788,18 @@ let Zt = class extends g {
     />`;
   }
 };
-Zt = Ps([
+Zt = ks([
   p("baht-datepicker")
 ], Zt);
-var ks = Object.defineProperty, Cs = Object.getOwnPropertyDescriptor, gt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Cs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && ks(e, a, s), s;
+var Cs = Object.defineProperty, Ds = Object.getOwnPropertyDescriptor, gt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ds(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Cs(e, r, s), s;
 };
 function te(t) {
   return t !== null && typeof t == "object" && typeof t.url == "string";
 }
-function Ds(t) {
+function Es(t) {
   return t >= 1024 * 1024 ? `${(t / 1024 / 1024).toFixed(1)} MB` : t >= 1024 ? `${Math.round(t / 1024)} KB` : `${t} B`;
 }
 let X = class extends g {
@@ -1816,9 +1816,9 @@ let X = class extends g {
     if (!this.uploader) return;
     this.uploadError = null, this.uploadingCount += t.length;
     const e = this.field.multiple ? [...this.refs] : [];
-    for (const a of t)
+    for (const r of t)
       try {
-        e.push(await this.uploader(a));
+        e.push(await this.uploader(r));
       } catch {
         this.uploadError = m("uploadFailed");
       } finally {
@@ -1827,7 +1827,7 @@ let X = class extends g {
     this.emitRefs(e);
   }
   onPick(t) {
-    const e = t.target, a = Array.from(e.files ?? []), r = this.field.maxSize, s = r ? a.filter((o) => o.size <= r) : a, i = r ? a.filter((o) => o.size > r) : [];
+    const e = t.target, r = Array.from(e.files ?? []), a = this.field.maxSize, s = a ? r.filter((o) => o.size <= a) : r, i = a ? r.filter((o) => o.size > a) : [];
     if (this.rejectedNames = i.map((o) => o.name), this.uploader) {
       e.value = "", this.uploadAll(s);
       return;
@@ -1835,7 +1835,7 @@ let X = class extends g {
     this.emitInput(this.field.multiple ? s : s[0] ?? null);
   }
   renderControl() {
-    return n`<input
+    return l`<input
         class="baht-control baht-control--file"
         id=${this.controlId}
         type="file"
@@ -1847,16 +1847,16 @@ let X = class extends g {
         aria-describedby=${this.describedBy}
         @change=${(t) => this.onPick(t)}
       />
-      ${this.uploadingCount > 0 ? n`<p class="baht-file-status" role="status">${m("uploading")}</p>` : h}
-      ${this.uploadError ? n`<p class="baht-error" role="alert">${this.uploadError}</p>` : h}
-      ${this.rejectedNames.length > 0 ? n`<p class="baht-error baht-file-rejected" role="alert">
+      ${this.uploadingCount > 0 ? l`<p class="baht-file-status" role="status">${m("uploading")}</p>` : h}
+      ${this.uploadError ? l`<p class="baht-error" role="alert">${this.uploadError}</p>` : h}
+      ${this.rejectedNames.length > 0 ? l`<p class="baht-error baht-file-rejected" role="alert">
               ${m("fileRejectedTooLarge", { names: this.rejectedNames.join(", ") })}
             </p>` : h}
       ${this.refs.map(
-      (t) => n`<span class="baht-file-chip">
+      (t) => l`<span class="baht-file-chip">
           <a href=${t.url} target="_blank" rel="noreferrer">${t.name}</a>
-          <span class="baht-file-size">${Ds(t.size)}</span>
-          ${this.disabled || this.readonly ? h : n`<button
+          <span class="baht-file-size">${Es(t.size)}</span>
+          ${this.disabled || this.readonly ? h : l`<button
                 type="button"
                 class="baht-file-remove"
                 aria-label=${m("removeFile")}
@@ -1870,7 +1870,7 @@ let X = class extends g {
   }
 };
 gt([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], X.prototype, "uploader", 2);
 gt([
   v()
@@ -1884,105 +1884,106 @@ gt([
 X = gt([
   p("baht-file")
 ], X);
-var Es = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, ae = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Bs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Es(e, a, s), s;
+var Bs = Object.defineProperty, js = Object.getOwnPropertyDescriptor, re = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? js(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Bs(e, r, s), s;
 };
-let It = class extends c {
+let It = class extends d {
   render() {
+    if (!this.field) return h;
     const t = this.field.variant ?? "body";
-    return n`<div class="baht-text baht-text--${t}">${this.field.text ?? this.field.label ?? ""}</div>`;
+    return l`<div class="baht-text baht-text--${t}">${this.field.text ?? this.field.label ?? ""}</div>`;
   }
 };
-ae([
-  l({ attribute: !1 })
+re([
+  n({ attribute: !1 })
 ], It.prototype, "field", 2);
-It = ae([
+It = re([
   p("baht-text")
 ], It);
-var js = Object.defineProperty, Ss = Object.getOwnPropertyDescriptor, ie = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ss(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && js(e, a, s), s;
+var Ss = Object.defineProperty, Fs = Object.getOwnPropertyDescriptor, ie = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Fs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ss(e, r, s), s;
 };
-let qt = class extends c {
+let qt = class extends d {
   render() {
-    return n`<div class="baht-section">
+    return this.field ? l`<div class="baht-section">
       <span class="baht-section-label">${this.field.text ?? this.field.label ?? ""}</span>
-    </div>`;
+    </div>` : h;
   }
 };
 ie([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], qt.prototype, "field", 2);
 qt = ie([
   p("baht-section")
 ], qt);
-var Ns = Object.defineProperty, Fs = Object.getOwnPropertyDescriptor, Bt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Fs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Ns(e, a, s), s;
+var Ns = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, Bt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Is(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ns(e, r, s), s;
 };
-let dt = class extends c {
+let dt = class extends d {
   constructor() {
     super(...arguments), this.total = 0, this.label = "", this.color = "";
   }
   render() {
-    return n`<div class="baht-stat-chart">
+    return l`<div class="baht-stat-chart">
       <div
         class="baht-stat-chart-total"
         style=${this.color ? `color:${this.color}` : h}
       >${this.total.toLocaleString("en-US")}</div>
-      ${this.label ? n`<div class="baht-stat-chart-label">${this.label}</div>` : h}
+      ${this.label ? l`<div class="baht-stat-chart-label">${this.label}</div>` : h}
     </div>`;
   }
 };
 Bt([
-  l({ type: Number })
+  n({ type: Number })
 ], dt.prototype, "total", 2);
 Bt([
-  l()
+  n()
 ], dt.prototype, "label", 2);
 Bt([
-  l()
+  n()
 ], dt.prototype, "color", 2);
 dt = Bt([
   p("baht-stat-chart")
 ], dt);
-const Is = 10;
+const qs = 10;
 function oe(t, e) {
-  return e && t === 0 ? e : `var(--baht-chart-${t % Is + 1})`;
+  return e && t === 0 ? e : `var(--baht-chart-${t % qs + 1})`;
 }
-var qs = Object.defineProperty, Ms = Object.getOwnPropertyDescriptor, nt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ms(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && qs(e, a, s), s;
+var Ms = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, nt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Rs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ms(e, r, s), s;
 };
-let S = class extends c {
+let S = class extends d {
   constructor() {
     super(...arguments), this.groups = [], this.total = null, this.color = "", this.centerLabel = "records", this.emptyMessage = "No data to chart";
   }
   render() {
     if (this.groups.length === 0)
-      return n`<div class="baht-chart-empty">${this.emptyMessage}</div>`;
-    const t = this.groups.reduce((o, d) => o + d.count, 0) || 1, e = this.total ?? this.groups.reduce((o, d) => o + d.count, 0), a = S.R, r = 2 * Math.PI * a;
+      return l`<div class="baht-chart-empty">${this.emptyMessage}</div>`;
+    const t = this.groups.reduce((o, c) => o + c.count, 0) || 1, e = this.total ?? this.groups.reduce((o, c) => o + c.count, 0), r = S.R, a = 2 * Math.PI * r;
     let s = 0;
-    const i = this.groups.map((o, d) => {
+    const i = this.groups.map((o, c) => {
       const b = o.count / t, H = {
         ...o,
         frac: b,
-        dash: `${b * r} ${r - b * r}`,
-        offset: -s * r,
-        color: oe(d, this.color || void 0)
+        dash: `${b * a} ${a - b * a}`,
+        offset: -s * a,
+        color: oe(c, this.color || void 0)
       };
       return s += b, H;
     });
-    return n`<div class="baht-donut-chart">
+    return l`<div class="baht-donut-chart">
       <svg width="160" height="160" viewBox="0 0 160 160" role="img" aria-label="Donut chart">
         <g transform="translate(80,80) rotate(-90)">
           ${i.map(
-      (o) => D`<circle r=${a} cx="0" cy="0" fill="none" stroke=${o.color}
+      (o) => D`<circle r=${r} cx="0" cy="0" fill="none" stroke=${o.color}
                 stroke-width="22" stroke-dasharray=${o.dash} stroke-dashoffset=${o.offset}/>`
     )}
         </g>
@@ -1991,7 +1992,7 @@ let S = class extends c {
       </svg>
       <div class="baht-chart-legend">
         ${i.map(
-      (o) => n`<div class="baht-chart-legend-row">
+      (o) => l`<div class="baht-chart-legend-row">
             <span class="baht-chart-swatch" style="background:${o.color}" aria-hidden="true"></span>
             <span class="baht-chart-legend-label">${o.label || "(empty)"}</span>
             <span class="baht-chart-legend-count">${o.count}</span>
@@ -2004,44 +2005,44 @@ let S = class extends c {
 };
 S.R = 54;
 nt([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], S.prototype, "groups", 2);
 nt([
-  l({ type: Number })
+  n({ type: Number })
 ], S.prototype, "total", 2);
 nt([
-  l()
+  n()
 ], S.prototype, "color", 2);
 nt([
-  l({ attribute: "center-label" })
+  n({ attribute: "center-label" })
 ], S.prototype, "centerLabel", 2);
 nt([
-  l({ attribute: "empty-message" })
+  n({ attribute: "empty-message" })
 ], S.prototype, "emptyMessage", 2);
 S = nt([
   p("baht-donut-chart")
 ], S);
-var Ls = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, jt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Rs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Ls(e, a, s), s;
+var Ls = Object.defineProperty, As = Object.getOwnPropertyDescriptor, jt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? As(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ls(e, r, s), s;
 };
-let ut = class extends c {
+let ut = class extends d {
   constructor() {
     super(...arguments), this.groups = [], this.color = "", this.emptyMessage = "No data to chart";
   }
   render() {
     if (this.groups.length === 0)
-      return n`<div class="baht-chart-empty">${this.emptyMessage}</div>`;
+      return l`<div class="baht-chart-empty">${this.emptyMessage}</div>`;
     const t = Math.max(1, ...this.groups.map((e) => e.count));
-    return n`<div class="baht-bar-chart">
+    return l`<div class="baht-bar-chart">
       ${this.groups.map(
-      (e, a) => n`<div class="baht-bar-chart-row">
+      (e, r) => l`<div class="baht-bar-chart-row">
           <span class="baht-bar-chart-label" title=${e.label}>${e.label || "(empty)"}</span>
           <div class="baht-bar-chart-track">
             <div
               class="baht-bar-chart-bar"
-              style="width:${Math.max(2, e.count / t * 100)}%;background:${this.color || oe(a)}"
+              style="width:${Math.max(2, e.count / t * 100)}%;background:${this.color || oe(r)}"
             ></div>
           </div>
           <span class="baht-bar-chart-count">${e.count}</span>
@@ -2051,52 +2052,52 @@ let ut = class extends c {
   }
 };
 jt([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], ut.prototype, "groups", 2);
 jt([
-  l()
+  n()
 ], ut.prototype, "color", 2);
 jt([
-  l({ attribute: "empty-message" })
+  n({ attribute: "empty-message" })
 ], ut.prototype, "emptyMessage", 2);
 ut = jt([
   p("baht-bar-chart")
 ], ut);
-var As = Object.defineProperty, Ts = Object.getOwnPropertyDescriptor, St = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ts(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && As(e, a, s), s;
+var Ts = Object.defineProperty, Ks = Object.getOwnPropertyDescriptor, St = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ks(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ts(e, r, s), s;
 };
-let bt = class extends c {
+let bt = class extends d {
   constructor() {
     super(...arguments), this.icon = "🗂️", this.message = "Nothing to display", this.hint = "";
   }
   render() {
-    return n`<div class="baht-empty-state">
-      ${this.icon ? n`<div class="baht-empty-state-icon" aria-hidden="true">${this.icon}</div>` : h}
+    return l`<div class="baht-empty-state">
+      ${this.icon ? l`<div class="baht-empty-state-icon" aria-hidden="true">${this.icon}</div>` : h}
       <div class="baht-empty-state-message">${this.message}</div>
-      ${this.hint ? n`<div class="baht-empty-state-hint">${this.hint}</div>` : h}
+      ${this.hint ? l`<div class="baht-empty-state-hint">${this.hint}</div>` : h}
     </div>`;
   }
 };
 St([
-  l()
+  n()
 ], bt.prototype, "icon", 2);
 St([
-  l()
+  n()
 ], bt.prototype, "message", 2);
 St([
-  l()
+  n()
 ], bt.prototype, "hint", 2);
 bt = St([
   p("baht-empty-state")
 ], bt);
-var Ks = Object.defineProperty, Vs = Object.getOwnPropertyDescriptor, wt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Vs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Ks(e, a, s), s;
+var Vs = Object.defineProperty, Us = Object.getOwnPropertyDescriptor, wt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Us(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Vs(e, r, s), s;
 };
-let Z = class extends c {
+let Z = class extends d {
   constructor() {
     super(...arguments), this.icon = "⚠️", this.heading = "Something went wrong", this.message = "", this.retryLabel = "";
   }
@@ -2104,35 +2105,35 @@ let Z = class extends c {
     this.dispatchEvent(new CustomEvent("baht-retry", { bubbles: !0, composed: !0 }));
   }
   render() {
-    return n`<div class="baht-error-state" role="alert">
-      ${this.icon ? n`<div class="baht-error-state-icon" aria-hidden="true">${this.icon}</div>` : h}
+    return l`<div class="baht-error-state" role="alert">
+      ${this.icon ? l`<div class="baht-error-state-icon" aria-hidden="true">${this.icon}</div>` : h}
       <div class="baht-error-state-heading">${this.heading}</div>
-      ${this.message ? n`<div class="baht-error-state-message">${this.message}</div>` : h}
-      ${this.retryLabel ? n`<baht-button size="sm" label=${this.retryLabel} @click=${this.onRetry}></baht-button>` : h}
+      ${this.message ? l`<div class="baht-error-state-message">${this.message}</div>` : h}
+      ${this.retryLabel ? l`<baht-button size="sm" label=${this.retryLabel} @click=${this.onRetry}></baht-button>` : h}
     </div>`;
   }
 };
 wt([
-  l()
+  n()
 ], Z.prototype, "icon", 2);
 wt([
-  l()
+  n()
 ], Z.prototype, "heading", 2);
 wt([
-  l()
+  n()
 ], Z.prototype, "message", 2);
 wt([
-  l({ attribute: "retry-label" })
+  n({ attribute: "retry-label" })
 ], Z.prototype, "retryLabel", 2);
 Z = wt([
   p("baht-error-state")
 ], Z);
-var Us = Object.defineProperty, zs = Object.getOwnPropertyDescriptor, z = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? zs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Us(e, a, s), s;
+var zs = Object.defineProperty, Hs = Object.getOwnPropertyDescriptor, z = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Hs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && zs(e, r, s), s;
 };
-let M = class extends c {
+let M = class extends d {
   constructor() {
     super(...arguments), this.value = {}, this.keyPlaceholder = "key", this.valuePlaceholder = "value", this.addLabel = "Add row", this.disabled = !1, this.rows = [{ k: "", v: "" }], this.syncedJson = "";
   }
@@ -2142,36 +2143,36 @@ let M = class extends c {
     e !== this.syncedJson && (this.syncedJson = e, this.rows = this.toRows(this.value));
   }
   toRows(t) {
-    const e = Object.entries(t ?? {}).map(([a, r]) => ({
-      k: a,
-      v: typeof r == "string" ? r : JSON.stringify(r)
+    const e = Object.entries(t ?? {}).map(([r, a]) => ({
+      k: r,
+      v: typeof a == "string" ? a : JSON.stringify(a)
     }));
     return e.length > 0 ? e : [{ k: "", v: "" }];
   }
   commit(t) {
     this.rows = t.length > 0 ? t : [{ k: "", v: "" }];
     const e = {};
-    for (const a of t) a.k.trim() && (e[a.k.trim()] = a.v);
+    for (const r of t) r.k.trim() && (e[r.k.trim()] = r.v);
     this.syncedJson = JSON.stringify(e), this.dispatchEvent(
       new CustomEvent("baht-change", { detail: { value: e }, bubbles: !0, composed: !0 })
     );
   }
   edit(t, e) {
-    this.commit(this.rows.map((a, r) => r === t ? { ...a, ...e } : a));
+    this.commit(this.rows.map((r, a) => a === t ? { ...r, ...e } : r));
   }
   addRow() {
     this.rows = [...this.rows, { k: "", v: "" }];
   }
   render() {
-    return n`<div class="baht-keyvalue">
+    return l`<div class="baht-keyvalue">
       ${this.rows.map(
-      (t, e) => n`<div class="baht-keyvalue-row">
+      (t, e) => l`<div class="baht-keyvalue-row">
           <input
             class="baht-control baht-keyvalue-key"
             placeholder=${this.keyPlaceholder}
             .value=${t.k}
             ?disabled=${this.disabled}
-            @input=${(a) => this.edit(e, { k: a.target.value })}
+            @input=${(r) => this.edit(e, { k: r.target.value })}
           />
           <span class="baht-keyvalue-eq" aria-hidden="true">=</span>
           <input
@@ -2179,14 +2180,14 @@ let M = class extends c {
             placeholder=${this.valuePlaceholder}
             .value=${t.v}
             ?disabled=${this.disabled}
-            @input=${(a) => this.edit(e, { v: a.target.value })}
+            @input=${(r) => this.edit(e, { v: r.target.value })}
           />
           <button
             type="button"
             class="baht-keyvalue-remove"
             aria-label="Remove row"
             ?disabled=${this.disabled}
-            @click=${() => this.commit(this.rows.filter((a, r) => r !== e))}
+            @click=${() => this.commit(this.rows.filter((r, a) => a !== e))}
           >${J("close")}</button>
         </div>`
     )}
@@ -2200,19 +2201,19 @@ let M = class extends c {
   }
 };
 z([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], M.prototype, "value", 2);
 z([
-  l({ attribute: "key-placeholder" })
+  n({ attribute: "key-placeholder" })
 ], M.prototype, "keyPlaceholder", 2);
 z([
-  l({ attribute: "value-placeholder" })
+  n({ attribute: "value-placeholder" })
 ], M.prototype, "valuePlaceholder", 2);
 z([
-  l({ attribute: "add-label" })
+  n({ attribute: "add-label" })
 ], M.prototype, "addLabel", 2);
 z([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], M.prototype, "disabled", 2);
 z([
   v()
@@ -2220,14 +2221,14 @@ z([
 M = z([
   p("baht-keyvalue-editor")
 ], M);
-var Hs = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, w = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Js(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Hs(e, a, s), s;
+var Js = Object.defineProperty, Ws = Object.getOwnPropertyDescriptor, w = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ws(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Js(e, r, s), s;
 };
-let Ws = 0, y = class extends c {
+let Gs = 0, y = class extends d {
   constructor() {
-    super(...arguments), this.label = "Reference", this.value = "", this.display = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.href = "", this.lookupLabel = "Look up records", this.debounce = 200, this.fetcher = null, this.open = !1, this.term = "", this.options = [], this.loading = !1, this.activeIndex = -1, this.listboxId = `baht-refpicker-list-${++Ws}`, this.fetchSeq = 0, this.onDocMousedown = (t) => {
+    super(...arguments), this.label = "Reference", this.value = "", this.display = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.href = "", this.lookupLabel = "Look up records", this.debounce = 200, this.fetcher = null, this.open = !1, this.term = "", this.options = [], this.loading = !1, this.activeIndex = -1, this.listboxId = `baht-refpicker-list-${++Gs}`, this.fetchSeq = 0, this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
     };
   }
@@ -2249,8 +2250,8 @@ let Ws = 0, y = class extends c {
       const e = ++this.fetchSeq;
       this.loading = !0;
       try {
-        const a = await this.fetcher(t);
-        e === this.fetchSeq && (this.options = a);
+        const r = await this.fetcher(t);
+        e === this.fetchSeq && (this.options = r);
       } catch {
         e === this.fetchSeq && (this.options = []);
       } finally {
@@ -2280,8 +2281,8 @@ let Ws = 0, y = class extends c {
     if (this.open)
       if (t.key === "ArrowDown" || t.key === "ArrowUp") {
         t.preventDefault();
-        const e = t.key === "ArrowDown" ? 1 : -1, a = this.options.length;
-        a > 0 && (this.activeIndex = (this.activeIndex + e + a) % a);
+        const e = t.key === "ArrowDown" ? 1 : -1, r = this.options.length;
+        r > 0 && (this.activeIndex = (this.activeIndex + e + r) % r);
       } else if (t.key === "Enter") {
         t.preventDefault();
         const e = this.options[this.activeIndex];
@@ -2290,7 +2291,7 @@ let Ws = 0, y = class extends c {
   }
   render() {
     const t = this.open ? this.term : this.display || this.value;
-    return n`<div class="baht-refpicker${this.open ? " baht-refpicker--open" : ""}">
+    return l`<div class="baht-refpicker${this.open ? " baht-refpicker--open" : ""}">
       <div class="baht-refpicker-field">
         <input
           class="baht-control baht-refpicker-input"
@@ -2310,7 +2311,7 @@ let Ws = 0, y = class extends c {
           @input=${this.onInput}
           @keydown=${this.onKeydown}
         />
-        ${this.value && !this.disabled ? n`<button
+        ${this.value && !this.disabled ? l`<button
               type="button"
               class="baht-refpicker-clear"
               aria-label="Clear"
@@ -2326,7 +2327,7 @@ let Ws = 0, y = class extends c {
         ?disabled=${this.disabled}
         @click=${() => this.open ? this.close() : this.openLookup()}
       >${J("search")}</button>
-      ${this.value && this.href ? n`<a
+      ${this.value && this.href ? l`<a
             class="baht-refpicker-open"
             href=${this.href}
             aria-label="Open record"
@@ -2339,18 +2340,18 @@ let Ws = 0, y = class extends c {
         aria-label=${this.label}
         ?hidden=${!this.open}
       >
-        ${this.loading ? n`<div class="baht-refpicker-note">Searching…</div>` : this.options.length === 0 ? n`<div class="baht-refpicker-note">No matches</div>` : this.options.map(
-      (e, a) => n`<button
+        ${this.loading ? l`<div class="baht-refpicker-note">Searching…</div>` : this.options.length === 0 ? l`<div class="baht-refpicker-note">No matches</div>` : this.options.map(
+      (e, r) => l`<button
                   type="button"
-                  class="baht-refpicker-option${a === this.activeIndex ? " baht-refpicker-option--active" : ""}"
-                  id="${this.listboxId}-${a}"
+                  class="baht-refpicker-option${r === this.activeIndex ? " baht-refpicker-option--active" : ""}"
+                  id="${this.listboxId}-${r}"
                   role="option"
                   aria-selected=${e.key === this.value ? "true" : "false"}
-                  @mousedown=${(r) => r.preventDefault()}
+                  @mousedown=${(a) => a.preventDefault()}
                   @click=${() => this.pick(e)}
                 >
                   <span class="baht-refpicker-option-label">${e.label}</span>
-                  ${e.sub ? n`<span class="baht-refpicker-option-sub">${e.sub}</span>` : h}
+                  ${e.sub ? l`<span class="baht-refpicker-option-sub">${e.sub}</span>` : h}
                 </button>`
     )}
       </div>
@@ -2358,34 +2359,34 @@ let Ws = 0, y = class extends c {
   }
 };
 w([
-  l()
+  n()
 ], y.prototype, "label", 2);
 w([
-  l()
+  n()
 ], y.prototype, "value", 2);
 w([
-  l()
+  n()
 ], y.prototype, "display", 2);
 w([
-  l()
+  n()
 ], y.prototype, "placeholder", 2);
 w([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], y.prototype, "disabled", 2);
 w([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], y.prototype, "invalid", 2);
 w([
-  l()
+  n()
 ], y.prototype, "href", 2);
 w([
-  l({ attribute: "lookup-label" })
+  n({ attribute: "lookup-label" })
 ], y.prototype, "lookupLabel", 2);
 w([
-  l({ type: Number })
+  n({ type: Number })
 ], y.prototype, "debounce", 2);
 w([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], y.prototype, "fetcher", 2);
 w([
   v()
@@ -2425,12 +2426,12 @@ const le = {
   section: "baht-section",
   repeater: "baht-repeater"
 };
-var Gs = Object.defineProperty, Ys = Object.getOwnPropertyDescriptor, ne = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Ys(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Gs(e, a, s), s;
+var Ys = Object.defineProperty, Qs = Object.getOwnPropertyDescriptor, ne = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Qs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ys(e, r, s), s;
 };
-const Qs = {
+const Xs = {
   "1/4": "baht-field--w-1-4",
   "1/2": "baht-field--w-1-2",
   "3/4": "baht-field--w-3-4",
@@ -2443,8 +2444,8 @@ let Mt = class extends g {
   willUpdate(t) {
     if (t.has("field") && this.controls.clear(), t.has("value")) {
       const e = this.rows.length;
-      for (const a of this.controls.keys())
-        Number(a.slice(0, a.indexOf(":"))) >= e && this.controls.delete(a);
+      for (const r of this.controls.keys())
+        Number(r.slice(0, r.indexOf(":"))) >= e && this.controls.delete(r);
     }
   }
   get rows() {
@@ -2453,9 +2454,9 @@ let Mt = class extends g {
   get subFields() {
     return [...this.field.fields ?? []].sort((t, e) => t.order - e.order).filter((t) => t.type !== "repeater");
   }
-  patchRow(t, e, a) {
-    const r = [...this.rows];
-    r[t] = { ...r[t], [e]: a }, this.emitInput(r);
+  patchRow(t, e, r) {
+    const a = [...this.rows];
+    a[t] = { ...a[t], [e]: r }, this.emitInput(a);
   }
   addRow() {
     const t = {};
@@ -2464,40 +2465,40 @@ let Mt = class extends g {
     this.emitInput([...this.rows, t]);
   }
   removeRow(t) {
-    this.controls.clear(), this.emitInput(this.rows.filter((e, a) => a !== t));
+    this.controls.clear(), this.emitInput(this.rows.filter((e, r) => r !== t));
   }
   errorFor(t, e) {
-    var r;
-    const a = `${this.field.key}[${t}].${e}`;
-    return ((r = this.rowErrors.find((s) => s.key === a)) == null ? void 0 : r.message) ?? null;
+    var a;
+    const r = `${this.field.key}[${t}].${e}`;
+    return ((a = this.rowErrors.find((s) => s.key === r)) == null ? void 0 : a.message) ?? null;
   }
-  renderSub(t, e, a) {
-    const r = le[a.type];
-    if (!r) return h;
-    const s = `${e}:${a.key}`;
+  renderSub(t, e, r) {
+    const a = le[r.type];
+    if (!a) return h;
+    const s = `${e}:${r.key}`;
     let i = this.controls.get(s);
-    (!i || i.tagName.toLowerCase() !== r) && (i = document.createElement(r), i.addEventListener("baht-input", (d) => {
-      d.stopPropagation();
-      const { value: b } = d.detail;
-      this.patchRow(e, a.key, b);
-    }), this.controls.set(s, i)), i.field = a, i.value = Object.hasOwn(t, a.key) ? t[a.key] : _t(a), i.disabled = this.disabled, i.readonly = this.readonly, i.required = !!a.required, i.error = this.errorFor(e, a.key);
-    const o = Qs[a.width ?? "full"] ?? "baht-field--w-full";
-    return n`<div class="baht-field ${o}" data-key=${a.key} data-type=${a.type}>
+    (!i || i.tagName.toLowerCase() !== a) && (i = document.createElement(a), i.addEventListener("baht-input", (c) => {
+      c.stopPropagation();
+      const { value: b } = c.detail;
+      this.patchRow(e, r.key, b);
+    }), this.controls.set(s, i)), i.field = r, i.value = Object.hasOwn(t, r.key) ? t[r.key] : _t(r), i.disabled = this.disabled, i.readonly = this.readonly, i.required = !!r.required, i.error = this.errorFor(e, r.key);
+    const o = Xs[r.width ?? "full"] ?? "baht-field--w-full";
+    return l`<div class="baht-field ${o}" data-key=${r.key} data-type=${r.type}>
       ${i}
     </div>`;
   }
   renderControl() {
-    const t = this.rows, e = !this.disabled && !this.readonly, a = this.field.maxRows !== void 0 && t.length >= this.field.maxRows;
-    return n`<div
+    const t = this.rows, e = !this.disabled && !this.readonly, r = this.field.maxRows !== void 0 && t.length >= this.field.maxRows;
+    return l`<div
       class="baht-repeater"
       id=${this.controlId}
       role="group"
       aria-describedby=${this.describedBy}
     >
       ${t.map(
-      (r, s) => n`<div class="baht-repeater-row" data-row=${s}>
-          ${this.subFields.map((i) => this.renderSub(r, s, i))}
-          ${e ? n`<button
+      (a, s) => l`<div class="baht-repeater-row" data-row=${s}>
+          ${this.subFields.map((i) => this.renderSub(a, s, i))}
+          ${e ? l`<button
                 type="button"
                 class="baht-repeater-remove"
                 aria-label=${m("removeRow")}
@@ -2508,10 +2509,10 @@ let Mt = class extends g {
               </button>` : h}
         </div>`
     )}
-      ${this.readonly ? h : n`<button
+      ${this.readonly ? h : l`<button
             type="button"
             class="baht-repeater-add"
-            ?disabled=${this.disabled || a}
+            ?disabled=${this.disabled || r}
             @click=${() => this.addRow()}
           >
             + ${this.field.addLabel ?? m("addRow")}
@@ -2520,63 +2521,63 @@ let Mt = class extends g {
   }
 };
 ne([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], Mt.prototype, "rowErrors", 2);
 Mt = ne([
   p("baht-repeater")
 ], Mt);
-var Xs = Object.defineProperty, Zs = Object.getOwnPropertyDescriptor, Nt = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? Zs(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && Xs(e, a, s), s;
+var Zs = Object.defineProperty, ta = Object.getOwnPropertyDescriptor, Ft = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ta(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Zs(e, r, s), s;
 };
-let vt = class extends c {
+let vt = class extends d {
   constructor() {
     super(...arguments), this.steps = [], this.current = 0, this.variant = "default";
   }
   render() {
     const t = this.variant === "sidebar";
-    return n`<ol
+    return l`<ol
       class="baht-steps ${t ? "baht-steps--sidebar" : ""}"
       aria-label=${m("step", { current: this.current + 1, total: this.steps.length })}
     >
-      ${this.steps.map((e, a) => {
-      const r = a < this.current ? "done" : a === this.current ? "current" : "todo";
-      return n`<li
-          class="baht-step baht-step--${r} ${t ? "baht-step--sidebar" : ""}"
-          aria-current=${r === "current" ? "step" : "false"}
+      ${this.steps.map((e, r) => {
+      const a = r < this.current ? "done" : r === this.current ? "current" : "todo";
+      return l`<li
+          class="baht-step baht-step--${a} ${t ? "baht-step--sidebar" : ""}"
+          aria-current=${a === "current" ? "step" : "false"}
         >
-          ${t ? h : n`<span class="baht-step-marker">${r === "done" ? "✓" : a + 1}</span>`}
+          ${t ? h : l`<span class="baht-step-marker">${a === "done" ? "✓" : r + 1}</span>`}
           <span class="baht-step-label">${e}</span>
         </li>`;
     })}
     </ol>`;
   }
 };
-Nt([
-  l({ attribute: !1 })
+Ft([
+  n({ attribute: !1 })
 ], vt.prototype, "steps", 2);
-Nt([
-  l({ type: Number })
+Ft([
+  n({ type: Number })
 ], vt.prototype, "current", 2);
-Nt([
-  l()
+Ft([
+  n()
 ], vt.prototype, "variant", 2);
-vt = Nt([
+vt = Ft([
   p("baht-steps")
 ], vt);
-var tr = Object.defineProperty, er = Object.getOwnPropertyDescriptor, C = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? er(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && tr(e, a, s), s;
+var ea = Object.defineProperty, sa = Object.getOwnPropertyDescriptor, C = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? sa(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && ea(e, r, s), s;
 };
-const sr = {
+const aa = {
   "1/4": "baht-field--w-1-4",
   "1/2": "baht-field--w-1-2",
   "3/4": "baht-field--w-3-4",
   full: "baht-field--w-full"
 };
-let P = class extends c {
+let P = class extends d {
   constructor() {
     super(...arguments), this.value = {}, this.registry = {}, this.options = {}, this.fieldStates = {}, this.flags = {}, this.readonly = !1, this.edits = {}, this.errors = [], this.controls = /* @__PURE__ */ new Map(), this.dynamicOptions = /* @__PURE__ */ new Map(), this.optionsSnapshots = /* @__PURE__ */ new Map(), this.optionsEpoch = /* @__PURE__ */ new Map(), this.warnedViews = /* @__PURE__ */ new Set(), this.flagCache = {};
   }
@@ -2596,26 +2597,26 @@ let P = class extends c {
    * dropped by epoch).
    */
   syncDynamicOptions() {
-    var e, a;
+    var e, r;
     const t = this.getData();
-    for (const r of ((e = this.effectiveForm) == null ? void 0 : e.field_data) ?? []) {
-      if (!r.optionsFrom) continue;
-      const s = JSON.stringify((r.optionsDeps ?? []).map((b) => t[b] ?? null));
-      if (this.optionsSnapshots.get(r.key) === s) continue;
-      this.optionsSnapshots.set(r.key, s);
-      const i = (this.optionsEpoch.get(r.key) ?? 0) + 1;
-      this.optionsEpoch.set(r.key, i);
-      const o = (a = this.registry.options) == null ? void 0 : a[r.optionsFrom];
+    for (const a of ((e = this.effectiveForm) == null ? void 0 : e.field_data) ?? []) {
+      if (!a.optionsFrom) continue;
+      const s = JSON.stringify((a.optionsDeps ?? []).map((b) => t[b] ?? null));
+      if (this.optionsSnapshots.get(a.key) === s) continue;
+      this.optionsSnapshots.set(a.key, s);
+      const i = (this.optionsEpoch.get(a.key) ?? 0) + 1;
+      this.optionsEpoch.set(a.key, i);
+      const o = (r = this.registry.options) == null ? void 0 : r[a.optionsFrom];
       if (!o) {
-        console.warn(`[bahtui] unknown options fetcher "${r.optionsFrom}" — skipped`), this.dynamicOptions.set(r.key, []);
+        console.warn(`[bahtui] unknown options fetcher "${a.optionsFrom}" — skipped`), this.dynamicOptions.set(a.key, []);
         continue;
       }
-      const d = o(t);
-      d instanceof Promise ? d.then((b) => {
-        this.optionsEpoch.get(r.key) === i && (this.dynamicOptions.set(r.key, b), this.requestUpdate());
+      const c = o(t);
+      c instanceof Promise ? c.then((b) => {
+        this.optionsEpoch.get(a.key) === i && (this.dynamicOptions.set(a.key, b), this.requestUpdate());
       }).catch((b) => {
-        console.warn(`[bahtui] options fetcher "${r.optionsFrom}" failed`, b), this.optionsEpoch.get(r.key) === i && this.optionsSnapshots.delete(r.key);
-      }) : this.dynamicOptions.set(r.key, d);
+        console.warn(`[bahtui] options fetcher "${a.optionsFrom}" failed`, b), this.optionsEpoch.get(a.key) === i && this.optionsSnapshots.delete(a.key);
+      }) : this.dynamicOptions.set(a.key, c);
     }
   }
   /**
@@ -2624,12 +2625,12 @@ let P = class extends c {
    * (province -> district -> subdistrict).
    */
   clearDependents(t) {
-    var r, s;
-    const e = [t], a = /* @__PURE__ */ new Set();
+    var a, s;
+    const e = [t], r = /* @__PURE__ */ new Set();
     for (; e.length > 0; ) {
       const i = e.shift();
-      for (const o of ((r = this.effectiveForm) == null ? void 0 : r.field_data) ?? [])
-        !((s = o.optionsDeps) != null && s.includes(i)) || a.has(o.key) || (a.add(o.key), this.edits = { ...this.edits, [o.key]: _t(o) }, e.push(o.key));
+      for (const o of ((a = this.effectiveForm) == null ? void 0 : a.field_data) ?? [])
+        !((s = o.optionsDeps) != null && s.includes(i)) || r.has(o.key) || (r.add(o.key), this.edits = { ...this.edits, [o.key]: _t(o) }, e.push(o.key));
     }
   }
   get sortedFields() {
@@ -2653,8 +2654,8 @@ let P = class extends c {
   getData() {
     var e;
     const t = {};
-    for (const a of ((e = this.effectiveForm) == null ? void 0 : e.field_data) ?? [])
-      a.type === "label" || a.type === "section" || (t[a.key] = this.valueFor(a));
+    for (const r of ((e = this.effectiveForm) == null ? void 0 : e.field_data) ?? [])
+      r.type === "label" || r.type === "section" || (t[r.key] = this.valueFor(r));
     return t;
   }
   setValue(t) {
@@ -2662,18 +2663,18 @@ let P = class extends c {
   }
   validate() {
     const t = [], e = this.getData();
-    for (const r of this.sortedFields) {
-      if (r.type === "label" || r.type === "section") continue;
-      const s = this.stateFor(r);
+    for (const a of this.sortedFields) {
+      if (a.type === "label" || a.type === "section") continue;
+      const s = this.stateFor(a);
       if (!s.visible) continue;
-      const i = s.required === !!r.required ? r : { ...r, required: s.required };
-      t.push(...Ut(i, this.valueFor(r), this.registry, e));
+      const i = s.required === !!a.required ? a : { ...a, required: s.required };
+      t.push(...Ut(i, this.valueFor(a), this.registry, e));
     }
     this.errors = t;
-    const a = { valid: t.length === 0, errors: t };
+    const r = { valid: t.length === 0, errors: t };
     return this.dispatchEvent(
-      new CustomEvent("baht-validity", { detail: a, bubbles: !0, composed: !0 })
-    ), a;
+      new CustomEvent("baht-validity", { detail: r, bubbles: !0, composed: !0 })
+    ), r;
   }
   reset() {
     this.edits = {}, this.value = {}, this.errors = [], this.requestUpdate();
@@ -2682,11 +2683,11 @@ let P = class extends c {
   onFieldInput(t, e) {
     var s;
     e.stopPropagation();
-    let { value: a } = e.detail;
-    const r = t.formatter ? (s = this.registry.formatters) == null ? void 0 : s[t.formatter] : void 0;
-    t.formatter && !r && console.warn(`[bahtui] unknown formatter "${t.formatter}" — skipped`), r && (a = r(a)), this.edits = { ...this.edits, [t.key]: a }, this.clearDependents(t.key), this.syncDynamicOptions(), (this.options.validateOn ?? "change") === "change" && this.errors.length > 0 && this.validate(), this.dispatchEvent(
+    let { value: r } = e.detail;
+    const a = t.formatter ? (s = this.registry.formatters) == null ? void 0 : s[t.formatter] : void 0;
+    t.formatter && !a && console.warn(`[bahtui] unknown formatter "${t.formatter}" — skipped`), a && (r = a(r)), this.edits = { ...this.edits, [t.key]: r }, this.clearDependents(t.key), this.syncDynamicOptions(), (this.options.validateOn ?? "change") === "change" && this.errors.length > 0 && this.validate(), this.dispatchEvent(
       new CustomEvent("baht-change", {
-        detail: { formName: this.form.formName, key: t.key, value: a, data: this.getData() },
+        detail: { formName: this.form.formName, key: t.key, value: r, data: this.getData() },
         bubbles: !0,
         composed: !0
       })
@@ -2696,34 +2697,36 @@ let P = class extends c {
   validateOneField(t) {
     const e = this.stateFor(t);
     if (!e.visible) return [];
-    const a = this.getData(), r = e.required === !!t.required ? t : { ...t, required: e.required };
-    return Ut(r, this.valueFor(t), this.registry, a);
+    const r = this.getData(), a = e.required === !!t.required ? t : { ...t, required: e.required };
+    return Ut(a, this.valueFor(t), this.registry, r);
   }
   /** `validateOn: 'blur'` — validate just the field the user left, same as
    * how errors are shown elsewhere (merged into `this.errors`, painted by
    * `renderField`/`.baht-error`). No-op for 'change'/'submit' modes. */
   onFieldBlur(t) {
     if ((this.options.validateOn ?? "change") !== "blur") return;
-    const e = this.validateOneField(t), a = this.errors.filter((r) => r.key !== t.key);
-    this.errors = [...a, ...e];
+    const e = this.validateOneField(t), r = this.errors.filter((a) => a.key !== t.key);
+    this.errors = [...r, ...e];
   }
   renderField(t) {
-    var o, d;
+    var o, c;
     const e = le[t.type];
     if (!e)
       return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), h;
-    const a = this.stateFor(t), r = sr[t.width ?? "full"] ?? "baht-field--w-full", s = ((o = this.errors.find((b) => b.key === t.key)) == null ? void 0 : o.message) ?? null;
+    const r = this.stateFor(t), a = aa[t.width ?? "full"] ?? "baht-field--w-full", s = ((o = this.errors.find((b) => b.key === t.key)) == null ? void 0 : o.message) ?? null;
+    if (this.readonly && t.type !== "label" && t.type !== "section")
+      return this.renderReadonlyField(t, a, r.visible);
     let i = this.controls.get(t.key);
     if ((!i || i.tagName.toLowerCase() !== e) && (i = document.createElement(e), i.addEventListener("baht-input", (b) => {
       var Kt;
       const H = (Kt = this.effectiveForm) == null ? void 0 : Kt.field_data.find((he) => he.key === t.key);
       H && this.onFieldInput(H, b);
-    }), this.controls.set(t.key, i)), i.field = t.optionsFrom ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, i.value = this.valueFor(t), i.disabled = !a.enabled, i.readonly = this.readonly || a.readonly, i.required = a.required, i.error = s, t.type === "repeater" && (i.rowErrors = this.errors.filter((b) => b.key.startsWith(`${t.key}[`))), t.type === "file" && t.uploader) {
-      const b = (d = this.registry.uploaders) == null ? void 0 : d[t.uploader];
+    }), this.controls.set(t.key, i)), i.field = t.optionsFrom ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, i.value = this.valueFor(t), i.disabled = !r.enabled, i.readonly = this.readonly || r.readonly, i.required = r.required, i.error = s, t.type === "repeater" && (i.rowErrors = this.errors.filter((b) => b.key.startsWith(`${t.key}[`))), t.type === "file" && t.uploader) {
+      const b = (c = this.registry.uploaders) == null ? void 0 : c[t.uploader];
       b || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`), i.uploader = b;
     }
-    return n`<div
-      class="baht-field ${r} ${a.visible ? "" : "baht-field--hidden"}"
+    return l`<div
+      class="baht-field ${a} ${r.visible ? "" : "baht-field--hidden"}"
       data-key=${t.key}
       data-type=${t.type}
       @focusout=${() => this.onFieldBlur(t)}
@@ -2731,35 +2734,59 @@ let P = class extends c {
       ${i}
     </div>`;
   }
+  renderReadonlyField(t, e, r) {
+    const a = t.optionsFrom ? this.dynamicOptions.get(t.key) ?? t.options ?? [] : t.options, s = pe(t, this.valueFor(t), a), i = s.kind === "empty" ? l`<span class="baht-readonly-value baht-readonly-value--empty">${m("emptyValue")}</span>` : s.kind === "text" ? l`<span class="baht-readonly-value">${s.text}</span>` : s.kind === "chips" ? l`<span class="baht-readonly-value baht-readonly-chips"
+                >${s.items.map((o) => l`<span class="baht-readonly-chip">${o}</span>`)}</span
+              >` : l`<div class="baht-readonly-rows">
+                ${s.rows.map(
+      (o) => l`<div class="baht-readonly-row">
+                    ${o.map(
+        (c) => l`<span class="baht-readonly-cell"
+                        ><span class="baht-readonly-cell-label">${c.label}</span
+                        ><span class="baht-readonly-cell-value">${c.text}</span></span
+                      >`
+      )}
+                  </div>`
+    )}
+              </div>`;
+    return l`<div
+      class="baht-field ${e} baht-field--readonly ${r ? "" : "baht-field--hidden"}"
+      data-key=${t.key}
+      data-type=${t.type}
+    >
+      ${t.label ? l`<span class="baht-label">${t.label}</span>` : h}
+      ${i}
+    </div>`;
+  }
   render() {
-    return n`<div class="baht-form ${this.readonly ? "baht-form--readonly" : ""}">
+    return l`<div class="baht-form ${this.readonly ? "baht-form--readonly" : ""}">
       ${this.sortedFields.map((t) => this.renderField(t))}
     </div>`;
   }
 };
 C([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], P.prototype, "form", 2);
 C([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], P.prototype, "value", 2);
 C([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], P.prototype, "registry", 2);
 C([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], P.prototype, "options", 2);
 C([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], P.prototype, "fieldStates", 2);
 C([
-  l({ type: String })
+  n({ type: String })
 ], P.prototype, "view", 2);
 C([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], P.prototype, "flags", 2);
 C([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], P.prototype, "readonly", 2);
 C([
   v()
@@ -2770,12 +2797,12 @@ C([
 P = C([
   p("baht-form")
 ], P);
-var rr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, _ = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? ar(e, a) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
-  return r && s && rr(e, a, s), s;
+var ra = Object.defineProperty, ia = Object.getOwnPropertyDescriptor, _ = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ia(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && ra(e, r, s), s;
 };
-let $ = class extends c {
+let $ = class extends d {
   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 = {};
   }
@@ -2790,19 +2817,19 @@ let $ = class extends c {
     }), this.flagCache.out) : this.workflow;
   }
   willUpdate(t) {
-    var e, a;
-    t.has("workflow") || t.has("value") ? (this.data = structuredClone(this.value ?? {}), this.reevaluate(), this.history = [], this.current = ((e = this.visibleForms[0]) == null ? void 0 : e.formName) ?? null, this.approvalError = null) : t.has("flags") && (this.reevaluate(), this.current && !this.visibleForms.some((r) => r.formName === this.current) && (this.current = ((a = this.visibleForms[0]) == null ? void 0 : a.formName) ?? null));
+    var e, r;
+    t.has("workflow") || t.has("value") ? (this.data = structuredClone(this.value ?? {}), this.reevaluate(), this.history = [], this.current = ((e = this.visibleForms[0]) == null ? void 0 : e.formName) ?? null, this.approvalError = null) : t.has("flags") && (this.reevaluate(), this.current && !this.visibleForms.some((a) => a.formName === this.current) && (this.current = ((r = this.visibleForms[0]) == null ? void 0 : r.formName) ?? null));
   }
   reevaluate() {
-    this.derived = pe(this.effectiveWorkflow, this.data), this.data = this.derived.data;
+    this.derived = ce(this.effectiveWorkflow, this.data), this.data = this.derived.data;
   }
   /** Forms in ascending order whose derived visibility is true. */
   get visibleForms() {
     var e;
-    const t = [...((e = this.effectiveWorkflow) == null ? void 0 : e.forms) ?? []].sort((a, r) => a.order - r.order);
-    return this.derived ? t.filter((a) => {
-      var r;
-      return ((r = this.derived.forms[a.formName]) == null ? void 0 : r.visible) !== !1;
+    const t = [...((e = this.effectiveWorkflow) == null ? void 0 : e.forms) ?? []].sort((r, a) => r.order - a.order);
+    return this.derived ? t.filter((r) => {
+      var a;
+      return ((a = this.derived.forms[r.formName]) == null ? void 0 : a.visible) !== !1;
     }) : t;
   }
   get currentForm() {
@@ -2810,13 +2837,13 @@ let $ = class extends c {
   }
   /** Where next() would go from here: a formName or 'end' (spec 03 §6). */
   get navTarget() {
-    var r;
+    var a;
     if (!this.current) return "end";
     const t = this.effectiveWorkflow;
     if (t.transitions && t.transitions.length > 0)
-      return ce(t, this.current, this.data);
-    const e = this.visibleForms, a = e.findIndex((s) => s.formName === this.current);
-    return ((r = e[a + 1]) == null ? void 0 : r.formName) ?? "end";
+      return de(t, this.current, this.data);
+    const e = this.visibleForms, r = e.findIndex((s) => s.formName === this.current);
+    return ((a = e[r + 1]) == null ? void 0 : a.formName) ?? "end";
   }
   get isLast() {
     return this.current !== null && this.navTarget === "end";
@@ -2824,9 +2851,9 @@ let $ = class extends c {
   fieldStatesFor(t) {
     const e = {};
     if (!this.derived) return e;
-    const a = `${t}.`;
-    for (const [r, s] of Object.entries(this.derived.fields))
-      r.startsWith(a) && (e[r.slice(a.length)] = s);
+    const r = `${t}.`;
+    for (const [a, s] of Object.entries(this.derived.fields))
+      a.startsWith(r) && (e[a.slice(r.length)] = s);
     return e;
   }
   get formEl() {
@@ -2843,8 +2870,8 @@ let $ = class extends c {
    * that re-feeding the `value` prop causes.
    */
   setValue(t, e) {
-    var a;
-    this.data = { ...this.data, [t]: { ...this.data[t], ...e } }, this.reevaluate(), this.current && !this.visibleForms.some((r) => r.formName === this.current) && (this.current = ((a = this.visibleForms[0]) == null ? void 0 : a.formName) ?? null), this.emit("baht-data-change", { data: this.getData() });
+    var r;
+    this.data = { ...this.data, [t]: { ...this.data[t], ...e } }, this.reevaluate(), this.current && !this.visibleForms.some((a) => a.formName === this.current) && (this.current = ((r = this.visibleForms[0]) == null ? void 0 : r.formName) ?? null), this.emit("baht-data-change", { data: this.getData() });
   }
   next() {
     const t = this.currentForm;
@@ -2858,27 +2885,27 @@ let $ = class extends c {
   }
   /** Advance past the current form: submit+complete at 'end', else step to navTarget. */
   advance(t = {}) {
-    const e = { ...t, data: this.getData() }, a = this.navTarget;
-    if (a === "end") {
+    const e = { ...t, data: this.getData() }, r = this.navTarget;
+    if (r === "end") {
       this.emit("baht-submit", e), this.emit("baht-complete", { data: this.getData(), status: "completed" });
       return;
     }
-    const r = this.visibleForms.find((s) => s.formName === a);
-    if (!r || r.formName === this.current) {
-      const s = r ? "self-transition" : "target-hidden";
+    const a = this.visibleForms.find((s) => s.formName === r);
+    if (!a || a.formName === this.current) {
+      const s = a ? "self-transition" : "target-hidden";
       console.warn(
-        `[bahtui] cannot advance from "${this.current}": target "${a}" is ` + (r ? "the current form (self-transition)" : "not visible")
+        `[bahtui] cannot advance from "${this.current}": target "${r}" is ` + (a ? "the current form (self-transition)" : "not visible")
       ), this.emit("baht-nav-blocked", {
         formName: this.current,
-        target: a,
+        target: r,
         reason: s,
         data: this.getData()
       });
       return;
     }
-    this.history.push(this.current), this.current = r.formName, this.emit("baht-next", { formName: r.formName, order: r.order, ...e }), this.emit("baht-step-change", {
-      formName: r.formName,
-      order: r.order,
+    this.history.push(this.current), this.current = a.formName, this.emit("baht-next", { formName: a.formName, order: a.order, ...e }), this.emit("baht-step-change", {
+      formName: a.formName,
+      order: a.order,
       direction: "forward"
     });
   }
@@ -2894,38 +2921,38 @@ let $ = class extends c {
     var b;
     const e = this.currentForm;
     if (!e || e.kind !== "approval") return;
-    const a = e.approval ?? {}, r = String(((b = this.data[e.formName]) == null ? void 0 : b.comment) ?? ""), s = a.comment ?? "optional";
-    if ((s === "required" || s === "requireOnReject" && t === "rejected") && r.trim() === "") {
+    const r = e.approval ?? {}, a = String(((b = this.data[e.formName]) == null ? void 0 : b.comment) ?? ""), s = r.comment ?? "optional";
+    if ((s === "required" || s === "requireOnReject" && t === "rejected") && a.trim() === "") {
       this.approvalError = m("commentRequired");
       return;
     }
     this.approvalError = null, this.data = {
       ...this.data,
-      [e.formName]: { ...this.data[e.formName], decision: t, comment: r }
+      [e.formName]: { ...this.data[e.formName], decision: t, comment: a }
     }, this.reevaluate();
-    const o = { formName: e.formName, decision: t, comment: r, data: this.getData() };
+    const o = { formName: e.formName, decision: t, comment: a, data: this.getData() };
     if (t === "approved") {
-      this.emit("baht-approve", o), this.advance({ decision: t, comment: r });
+      this.emit("baht-approve", o), this.advance({ decision: t, comment: a });
       return;
     }
     this.emit("baht-reject", o);
-    const d = a.onReject ?? { action: "end" };
-    d.action === "goto" && this.visibleForms.some((H) => H.formName === d.form) ? this.gotoForm(d.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
+    const c = r.onReject ?? { action: "end" };
+    c.action === "goto" && this.visibleForms.some((H) => H.formName === c.form) ? this.gotoForm(c.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
   }
   /** Jump back to a visible form, truncating the history to that point. */
   gotoForm(t) {
     const e = this.history.indexOf(t);
     this.history = e >= 0 ? this.history.slice(0, e) : [], this.current = t;
-    const a = this.effectiveWorkflow.forms.find((r) => r.formName === t);
-    this.emit("baht-step-change", { formName: t, order: (a == null ? void 0 : a.order) ?? 0, direction: "back" });
+    const r = this.effectiveWorkflow.forms.find((a) => a.formName === t);
+    this.emit("baht-step-change", { formName: t, order: (r == null ? void 0 : r.order) ?? 0, direction: "back" });
   }
   back() {
     let t = this.history.pop();
-    for (; t !== void 0 && !this.visibleForms.some((a) => a.formName === t); )
+    for (; t !== void 0 && !this.visibleForms.some((r) => r.formName === t); )
       t = this.history.pop();
     if (!t) return;
     this.current = t, this.approvalError = null;
-    const e = this.effectiveWorkflow.forms.find((a) => a.formName === t);
+    const e = this.effectiveWorkflow.forms.find((r) => r.formName === t);
     this.emit("baht-step-change", { formName: t, order: (e == null ? void 0 : e.order) ?? 0, direction: "back" });
   }
   gotoStart() {
@@ -2936,8 +2963,8 @@ let $ = class extends c {
   onFormChange(t) {
     var s;
     t.stopPropagation();
-    const { formName: e, key: a, value: r } = t.detail;
-    this.data = { ...this.data, [e]: { ...this.data[e], [a]: r } }, this.reevaluate(), this.current && !this.visibleForms.some((i) => i.formName === this.current) && (this.current = ((s = this.visibleForms[0]) == null ? void 0 : s.formName) ?? null), this.emit("baht-data-change", { data: this.getData() });
+    const { formName: e, key: r, value: a } = t.detail;
+    this.data = { ...this.data, [e]: { ...this.data[e], [r]: a } }, this.reevaluate(), this.current && !this.visibleForms.some((i) => i.formName === this.current) && (this.current = ((s = this.visibleForms[0]) == null ? void 0 : s.formName) ?? null), this.emit("baht-data-change", { data: this.getData() });
   }
   onCommentInput(t, e) {
     this.data = { ...this.data, [t]: { ...this.data[t], comment: e } }, this.reevaluate(), e.trim() !== "" && (this.approvalError = null), this.emit("baht-data-change", { data: this.getData() });
@@ -2948,19 +2975,19 @@ let $ = class extends c {
   // ---- approval summary (spec 03 §4) ----
   /** Forms the approval step summarizes: configured list, else every earlier plain form. */
   summaryForms(t) {
-    var r;
-    const e = (r = t.approval) == null ? void 0 : r.summaryForms, a = this.visibleForms.filter(
+    var a;
+    const e = (a = t.approval) == null ? void 0 : a.summaryForms, r = this.visibleForms.filter(
       (s) => s.formName !== t.formName && s.kind !== "approval"
     );
-    return e ? a.filter((s) => e.includes(s.formName)) : a.filter((s) => s.order < t.order);
+    return e ? r.filter((s) => e.includes(s.formName)) : r.filter((s) => s.order < t.order);
   }
   renderApproval(t) {
-    var r, s;
-    const e = ((r = t.approval) == null ? void 0 : r.comment) ?? "optional", a = this.summaryForms(t);
-    return n`<div class="baht-approval">
+    var a, s;
+    const e = ((a = t.approval) == null ? void 0 : a.comment) ?? "optional", r = this.summaryForms(t);
+    return l`<div class="baht-approval">
       <div class="baht-approval-summary">
-        ${a.length === 0 ? n`<p class="baht-approval-empty">${m("nothingToReview")}</p>` : a.map(
-      (i) => n`<section class="baht-approval-group">
+        ${r.length === 0 ? l`<p class="baht-approval-empty">${m("nothingToReview")}</p>` : r.map(
+      (i) => l`<section class="baht-approval-group">
                   <h4 class="baht-approval-group-title">${i.formName}</h4>
                   <baht-form
                     readonly
@@ -2971,7 +2998,7 @@ let $ = class extends c {
                 </section>`
     )}
       </div>
-      ${e !== "hidden" ? n`<label class="baht-approval-comment">
+      ${e !== "hidden" ? l`<label class="baht-approval-comment">
             <span class="baht-approval-comment-label">
               ${m("comment")}${e === "required" ? m("commentRequiredSuffix") : ""}
             </span>
@@ -2983,24 +3010,24 @@ let $ = class extends c {
               @input=${(i) => this.onCommentInput(t.formName, i.target.value)}
             ></textarea>
           </label>` : h}
-      ${this.approvalError ? n`<p class="baht-error" role="alert">${this.approvalError}</p>` : h}
+      ${this.approvalError ? l`<p class="baht-error" role="alert">${this.approvalError}</p>` : h}
     </div>`;
   }
   render() {
     var s, i;
     const t = this.currentForm;
-    if (!t) return n`<div class="baht-workflow"></div>`;
-    const e = t.kind === "approval", a = this.visibleForms, r = a.findIndex((o) => o.formName === t.formName);
-    return n`<div class="baht-workflow" data-step=${t.formName}>
+    if (!t) return l`<div class="baht-workflow"></div>`;
+    const e = t.kind === "approval", r = this.visibleForms, a = r.findIndex((o) => o.formName === t.formName);
+    return l`<div class="baht-workflow" data-step=${t.formName}>
       <div class="baht-visually-hidden" role="status">
-        ${m("step", { current: r + 1, total: a.length })}
+        ${m("step", { current: a + 1, total: r.length })}
       </div>
-      ${this.showSteps ? n`<baht-steps
-              .steps=${a.map((o) => o.formName)}
-              .current=${r}
+      ${this.showSteps ? l`<baht-steps
+              .steps=${r.map((o) => o.formName)}
+              .current=${a}
               .variant=${this.stepsVariant}
             ></baht-steps>` : h}
-      ${e ? this.renderApproval(t) : n`<baht-form
+      ${e ? this.renderApproval(t) : l`<baht-form
             .form=${t}
             .value=${this.data[t.formName] ?? {}}
             .registry=${this.registry}
@@ -3009,10 +3036,10 @@ let $ = class extends c {
             @baht-change=${(o) => this.onFormChange(o)}
           ></baht-form>`}
       <div class="baht-workflow-nav">
-        ${this.showBack && this.history.length > 0 ? n`<button type="button" class="baht-button baht-button--back" @click=${() => this.back()}>
+        ${this.showBack && this.history.length > 0 ? l`<button type="button" class="baht-button baht-button--back" @click=${() => this.back()}>
               ${this.backLabel ?? m("back")}
             </button>` : h}
-        ${e ? n`<button
+        ${e ? l`<button
                 type="button"
                 class="baht-button baht-button--reject"
                 @click=${() => this.decide("rejected")}
@@ -3025,7 +3052,7 @@ let $ = class extends c {
                 @click=${() => this.decide("approved")}
               >
                 ${((i = t.approval) == null ? void 0 : i.approveLabel) ?? m("approve")}
-              </button>` : n`<button type="button" class="baht-button baht-button--next" @click=${() => this.next()}>
+              </button>` : l`<button type="button" class="baht-button baht-button--next" @click=${() => this.next()}>
               ${this.isLast ? this.submitLabel ?? m("submit") : this.nextLabel ?? m("next")}
             </button>`}
       </div>
@@ -3033,37 +3060,37 @@ let $ = class extends c {
   }
 };
 _([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], $.prototype, "workflow", 2);
 _([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], $.prototype, "value", 2);
 _([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], $.prototype, "registry", 2);
 _([
-  l({ type: Boolean, attribute: "validate-gate" })
+  n({ type: Boolean, attribute: "validate-gate" })
 ], $.prototype, "validateGate", 2);
 _([
-  l({ attribute: "next-label" })
+  n({ attribute: "next-label" })
 ], $.prototype, "nextLabel", 2);
 _([
-  l({ attribute: "submit-label" })
+  n({ attribute: "submit-label" })
 ], $.prototype, "submitLabel", 2);
 _([
-  l({ attribute: "back-label" })
+  n({ attribute: "back-label" })
 ], $.prototype, "backLabel", 2);
 _([
-  l({ type: Boolean, attribute: "show-back" })
+  n({ type: Boolean, attribute: "show-back" })
 ], $.prototype, "showBack", 2);
 _([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], $.prototype, "flags", 2);
 _([
-  l({ type: Boolean, attribute: "show-steps" })
+  n({ type: Boolean, attribute: "show-steps" })
 ], $.prototype, "showSteps", 2);
 _([
-  l({ attribute: "steps-variant" })
+  n({ attribute: "steps-variant" })
 ], $.prototype, "stepsVariant", 2);
 _([
   v()
@@ -3092,7 +3119,7 @@ export {
   xt as BahtCode,
   Zt as BahtDatepicker,
   S as BahtDonutChart,
-  c as BahtElement,
+  d as BahtElement,
   bt as BahtEmptyState,
   Z as BahtErrorState,
   g as BahtFieldBase,
@@ -3108,7 +3135,7 @@ export {
   Gt as BahtMultiselect,
   Jt as BahtNumber,
   K as BahtOtp,
-  F as BahtPagination,
+  N as BahtPagination,
   G as BahtProgress,
   Qt as BahtRadio,
   k as BahtRange,
@@ -3124,7 +3151,7 @@ export {
   u as BahtTable,
   It as BahtText,
   Ht as BahtTextarea,
-  Ft as BahtTimeline,
+  Nt as BahtTimeline,
   W as BahtToast,
   Xt as BahtToggle,
   I as BahtTooltip,
@@ -3132,22 +3159,23 @@ export {
   le as TAG_FOR_TYPE,
   st as adoptLightChildren,
   ee as applyFlags,
-  dr as approvalFields,
+  ua as approvalFields,
   oe as chartColor,
   _t as defaultValue,
-  ur as evalCondition,
-  br as evalValueExpr,
-  pe as evaluate,
-  vr as flagEnabled,
-  fr as getCatalog,
-  ve as isIconName,
-  mr as readRef,
+  pe as displayValue,
+  ba as evalCondition,
+  va as evalValueExpr,
+  ce as evaluate,
+  fa as flagEnabled,
+  ma as getCatalog,
+  fe as isIconName,
+  ya as readRef,
   J as renderIcon,
-  ce as resolveNext,
+  de as resolveNext,
   Vt as resolveViewFields,
-  yr as setCatalog,
-  $r as setLocale,
+  $a as setCatalog,
+  ga as setLocale,
   m as t,
   Ut as validateField,
-  gr as walkPath
+  wa as walkPath
 };