bank20baht-ui 0.4.1 → 0.4.3

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

@@ -1,20 +1,20 @@
-import { nothing as h, html as n, svg as A } from "lit";
-import { property as l, customElement as b, state as $, query as Bt } from "lit/decorators.js";
-import { B as y, b as ne, h as S, a as J } from "./base-CajA2aCO.js";
+import { nothing as h, html as l, svg as N } from "lit";
+import { property as n, customElement as b, state as y, query as Mt } from "lit/decorators.js";
+import { B as g, b as he, h as T, a as X } from "./base-CajA2aCO.js";
 import { t as m } from "./i18n-BcPL9_Jh.js";
-import { n as $e, k as Lt, o as ds, i as Rt, p as us, d as se, a as rs, m as Ae, v as Le, c as bs, g as fs, l as ms } from "./display-DQRcvsn7.js";
+import { n as $e, k as Nt, o as ds, i as zt, p as us, d as ae, a as rs, m as Ae, v as Le, c as bs, g as fs, l as ms } from "./display-DQRcvsn7.js";
 import { repeat as Ce } from "lit/directives/repeat.js";
-import { html as ee, unsafeStatic as os } from "lit/static-html.js";
-import { c as vs, r as H } from "./baht-toast-CD1WrOYr.js";
-import { live as ot } from "lit/directives/live.js";
-import { ifDefined as L } from "lit/directives/if-defined.js";
+import { html as se, unsafeStatic as os } from "lit/static-html.js";
+import { c as vs, r as W } from "./baht-toast-CD1WrOYr.js";
+import { live as lt } from "lit/directives/live.js";
+import { ifDefined as q } from "lit/directives/if-defined.js";
 import $s from "flatpickr";
-var ys = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, he = (t, e, i, a) => {
+var ys = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, ce = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? gs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ys(e, i, s), s;
 };
-let zt = class extends y {
+let Vt = class extends g {
   constructor() {
     super(...arguments), this.tone = "neutral", this.label = "", this.dot = null;
   }
@@ -23,55 +23,55 @@ let zt = class extends y {
   }
   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>`;
   }
 };
-he([
-  l()
-], zt.prototype, "tone", 2);
-he([
-  l()
-], zt.prototype, "label", 2);
-he([
-  l({ attribute: !1 })
-], zt.prototype, "dot", 2);
-zt = he([
+ce([
+  n()
+], Vt.prototype, "tone", 2);
+ce([
+  n()
+], Vt.prototype, "label", 2);
+ce([
+  n({ attribute: !1 })
+], Vt.prototype, "dot", 2);
+Vt = ce([
   b("baht-badge")
-], zt);
-var ws = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, je = (t, e, i, a) => {
+], Vt);
+var ws = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Ie = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? xs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ws(e, i, s), s;
 };
-let ae = class extends y {
+let ie = class extends g {
   constructor() {
     super(...arguments), this.variant = "inline", this.code = "";
   }
   firstUpdated() {
     const t = this.renderRoot.querySelector(this.variant === "block" ? "pre" : "code");
-    t && ne(this, t);
+    t && he(this, t);
   }
   render() {
-    return this.variant === "block" ? n`<pre class="baht-code baht-code--block" tabindex="0">${this.code}</pre>` : n`<code class="baht-code">${this.code}</code>`;
+    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>`;
   }
 };
-je([
-  l()
-], ae.prototype, "variant", 2);
-je([
-  l()
-], ae.prototype, "code", 2);
-ae = je([
+Ie([
+  n()
+], ie.prototype, "variant", 2);
+Ie([
+  n()
+], ie.prototype, "code", 2);
+ie = Ie([
   b("baht-code")
-], ae);
-var _s = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, yt = (t, e, i, a) => {
+], ie);
+var _s = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, gt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ks(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && _s(e, i, s), s;
 };
-let ht = class extends y {
+let ht = class extends g {
   constructor() {
     super(...arguments), this.page = 1, this.totalPages = 1, this.variant = "numbered", this.siblings = 1, this.hasNext = !1, this.hasPrev = !1;
   }
@@ -107,15 +107,15 @@ let ht = class extends y {
   }
   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")}><span aria-hidden="true">« </span>Prev</button>
         <button type="button" ?disabled=${!this.hasNext} @click=${() => this.goCursor("next")}>Next<span aria-hidden="true"> »</span></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)}><span aria-hidden="true">«</span></button>
-      ${this.variant === "compact" ? n`<span class="baht-pagination-label">Page ${this.page} of ${this.totalPages}</span>` : this.pageItems.map(
-      (i) => i === null ? n`<span class="baht-pagination-ellipsis" aria-hidden="true">…</span>` : n`<button
+      ${this.variant === "compact" ? l`<span class="baht-pagination-label">Page ${this.page} of ${this.totalPages}</span>` : this.pageItems.map(
+      (i) => i === null ? l`<span class="baht-pagination-ellipsis" aria-hidden="true">…</span>` : l`<button
                   type="button"
                   aria-current=${i === this.page ? "page" : h}
                   aria-label="Page ${i}"
@@ -126,25 +126,25 @@ let ht = class extends y {
     </nav>`;
   }
 };
-yt([
-  l({ type: Number })
+gt([
+  n({ type: Number })
 ], ht.prototype, "page", 2);
-yt([
-  l({ type: Number, attribute: "total-pages" })
+gt([
+  n({ type: Number, attribute: "total-pages" })
 ], ht.prototype, "totalPages", 2);
-yt([
-  l()
+gt([
+  n()
 ], ht.prototype, "variant", 2);
-yt([
-  l({ type: Number })
+gt([
+  n({ type: Number })
 ], ht.prototype, "siblings", 2);
-yt([
-  l({ type: Boolean, attribute: "has-next" })
+gt([
+  n({ type: Boolean, attribute: "has-next" })
 ], ht.prototype, "hasNext", 2);
-yt([
-  l({ type: Boolean, attribute: "has-prev" })
+gt([
+  n({ type: Boolean, attribute: "has-prev" })
 ], ht.prototype, "hasPrev", 2);
-ht = yt([
+ht = gt([
   b("baht-pagination")
 ], ht);
 var Ps = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, O = (t, e, i, a) => {
@@ -152,8 +152,8 @@ var Ps = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, O = (t, e,
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ps(e, i, s), s;
 };
-const Cs = " › ", ye = (t) => t !== null && typeof t == "object" && !Array.isArray(t) && !(t instanceof Date), te = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
-let k = class extends y {
+const Cs = " › ", ye = (t) => t !== null && typeof t == "object" && !Array.isArray(t) && !(t instanceof Date), ee = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
+let k = class extends g {
   constructor() {
     super(...arguments), this.items = [], this.columns = {}, this.loading = !1, this.error = !1, this.errorMessage = "Couldn't load data. Try again.", this.emptyMessage = "No records yet.", this.showIndex = !0, this.indexOffset = 0, this.skeletonRows = 10, this.rowKey = "", this.clickable = !0, this.renderers = {}, this.visibleColumns = [], this.columnPicker = !0, this.page = 1, this.totalPages = 1, this.cursorMode = !1, this.hasNext = !1, this.hasPrev = !1, this.pickerOpen = !1, this.pickedColumns = null, this.draftColumns = [], this.pickAvail = [], this.pickSel = [], this.expanded = [], this.pickerPreviousFocus = null, this.onPickerKeydown = (t) => {
       t.key === "Escape" ? this.closePicker() : t.key === "Tab" && this.trapPickerFocus(t);
@@ -178,7 +178,7 @@ let k = class extends y {
     r != null && r.contains(s) ? t.shiftKey && s === i ? (a.focus(), t.preventDefault()) : !t.shiftKey && s === a && (i.focus(), t.preventDefault()) : (i.focus(), t.preventDefault());
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), S() && document.removeEventListener("keydown", this.onPickerKeydown);
+    super.disconnectedCallback(), T() && document.removeEventListener("keydown", this.onPickerKeydown);
   }
   willUpdate(t) {
     t.has("visibleColumns") && !t.has("columns") && (this.pickedColumns = null);
@@ -192,9 +192,9 @@ let k = class extends y {
     const e = {};
     for (const [i, a] of Object.entries(t))
       e[i] = ye(a) ? {
-        label: te(i),
-        fields: Object.fromEntries(Object.keys(a).map((s) => [s, te(s)]))
-      } : te(i);
+        label: ee(i),
+        fields: Object.fromEntries(Object.keys(a).map((s) => [s, ee(s)]))
+      } : ee(i);
     return e;
   }
   /** Walk a dotted key through the spec; undefined when no such column exists. */
@@ -233,7 +233,7 @@ let k = class extends y {
     for (const a of t.split(".")) {
       const s = i == null ? void 0 : i[a];
       if (s === void 0) {
-        e.push(te(a)), i = void 0;
+        e.push(ee(a)), i = void 0;
         continue;
       }
       e.push(typeof s == "string" ? s : s.label), i = typeof s == "string" ? void 0 : s.fields;
@@ -251,7 +251,7 @@ let k = class extends y {
   }
   // ---- picker -----------------------------------------------------------
   openPicker() {
-    this.draftColumns = this.columnKeys.slice(), this.pickAvail = [], this.pickSel = [], this.pickerOpen = !0, this.pickerPreviousFocus = document.activeElement, S() && document.addEventListener("keydown", this.onPickerKeydown), this.updateComplete.then(() => {
+    this.draftColumns = this.columnKeys.slice(), this.pickAvail = [], this.pickSel = [], this.pickerOpen = !0, this.pickerPreviousFocus = document.activeElement, T() && document.addEventListener("keydown", this.onPickerKeydown), this.updateComplete.then(() => {
       var t;
       this.pickerOpen && ((t = this.pickerFocusables()[0]) == null || t.focus());
     });
@@ -259,7 +259,7 @@ let k = class extends y {
   closePicker() {
     var e;
     if (!this.pickerOpen) return;
-    this.pickerOpen = !1, S() && document.removeEventListener("keydown", this.onPickerKeydown);
+    this.pickerOpen = !1, T() && document.removeEventListener("keydown", this.onPickerKeydown);
     const t = this.pickerPreviousFocus;
     this.pickerPreviousFocus = null, t != null && t.isConnected && ((e = t.focus) == null || e.call(t));
   }
@@ -319,27 +319,27 @@ let k = class extends y {
   }
   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 },
-      (i, a) => n`<tr>
-          ${this.showIndex ? n`<td class="baht-table-index">${this.indexOffset + a + 1}</td>` : h}
-          ${t.map(() => n`<td><span class="baht-skeleton" style="height:16px;"></span></td>`)}
+      (i, 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" role="alert">${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(
-      (i, a) => n`<tr
+    )}` : this.error ? l`<tr><td colspan=${e}><div class="baht-table-state baht-table-state--error" role="alert">${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(
+      (i, a) => l`<tr
         tabindex=${this.clickable ? "0" : h}
         @click=${() => this.emitRow(i, a)}
         @keydown=${(s) => {
         s.key !== "Enter" && s.key !== " " || (s.preventDefault(), this.emitRow(i, a));
       }}
       >
-        ${this.showIndex ? n`<td class="baht-table-index">${this.indexOffset + a + 1}</td>` : h}
-        ${t.map((s) => n`<td data-col=${s}>${this.cell(i, 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(i, 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"
@@ -356,15 +356,15 @@ let k = class extends y {
    */
   renderAvailRow(t, e) {
     const i = this.specAt(t), a = (i == null ? void 0 : i.fields) !== void 0, s = this.expanded.includes(t), r = this.draftColumns.includes(t);
-    return n`<li class="baht-table-picker-node" style="--baht-picker-depth:${e}">
+    return l`<li class="baht-table-picker-node" style="--baht-picker-depth:${e}">
       <div class="baht-table-picker-row">
-        ${a ? n`<button
+        ${a ? l`<button
                 type="button"
                 class="baht-table-picker-expand"
                 aria-label=${s ? `Collapse ${i == null ? void 0 : i.label}` : `Expand ${i == null ? void 0 : i.label}`}
                 aria-expanded=${s ? "true" : "false"}
                 @click=${() => this.toggleExpanded(t)}
-              >${s ? "▾" : "▸"}</button>` : n`<span class="baht-table-picker-expand baht-table-picker-expand--leaf"></span>`}
+              >${s ? "▾" : "▸"}</button>` : l`<span class="baht-table-picker-expand baht-table-picker-expand--leaf"></span>`}
         <button
           type="button"
           class="baht-table-picker-option"
@@ -374,14 +374,14 @@ let k = class extends y {
           @click=${() => this.toggleAvail(t)}
         >${e === 0 ? this.labelFor(t) : (i == null ? void 0 : i.label) ?? t}</button>
       </div>
-      ${a && s ? n`<ul class="baht-table-picker-tree">
+      ${a && s ? l`<ul class="baht-table-picker-tree">
               ${this.childrenOf(t).map((o) => this.renderAvailRow(o, e + 1))}
             </ul>` : h}
     </li>`;
   }
   renderColumnModal() {
     const t = this.allColumnKeys, e = this.allPaths().filter((a) => !this.draftColumns.includes(a)).length, i = (a) => (s) => a(k.selectedValues(s));
-    return n`<div
+    return l`<div
       class="baht-table-picker-scrim"
       @click=${(a) => a.target === a.currentTarget && this.closePicker()}
     >
@@ -407,7 +407,7 @@ let k = class extends y {
             <div class="baht-table-picker-collabel">Selected (${this.draftColumns.length})</div>
             <select multiple size="10" class="baht-table-picker-select" aria-label="Selected columns" @change=${i((a) => this.pickSel = a)}>
               ${this.draftColumns.map(
-      (a) => n`<option value=${a} ?selected=${this.pickSel.includes(a)}>${this.labelFor(a)}</option>`
+      (a) => l`<option value=${a} ?selected=${this.pickSel.includes(a)}>${this.labelFor(a)}</option>`
     )}
             </select>
           </div>
@@ -424,7 +424,7 @@ let k = class extends y {
   }
   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}
@@ -434,19 +434,19 @@ let k = class extends y {
       <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}
@@ -457,79 +457,79 @@ let k = class extends y {
   }
 };
 O([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], k.prototype, "items", 2);
 O([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], k.prototype, "columns", 2);
 O([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], k.prototype, "loading", 2);
 O([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], k.prototype, "error", 2);
 O([
-  l({ attribute: "error-message" })
+  n({ attribute: "error-message" })
 ], k.prototype, "errorMessage", 2);
 O([
-  l({ attribute: "empty-message" })
+  n({ attribute: "empty-message" })
 ], k.prototype, "emptyMessage", 2);
 O([
-  l({ type: Boolean, attribute: "show-index" })
+  n({ type: Boolean, attribute: "show-index" })
 ], k.prototype, "showIndex", 2);
 O([
-  l({ type: Number, attribute: "index-offset" })
+  n({ type: Number, attribute: "index-offset" })
 ], k.prototype, "indexOffset", 2);
 O([
-  l({ type: Number, attribute: "skeleton-rows" })
+  n({ type: Number, attribute: "skeleton-rows" })
 ], k.prototype, "skeletonRows", 2);
 O([
-  l({ attribute: "row-key" })
+  n({ attribute: "row-key" })
 ], k.prototype, "rowKey", 2);
 O([
-  l({ type: Boolean })
+  n({ type: Boolean })
 ], k.prototype, "clickable", 2);
 O([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], k.prototype, "renderers", 2);
 O([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], k.prototype, "visibleColumns", 2);
 O([
-  l({ type: Boolean, attribute: "column-picker" })
+  n({ type: Boolean, attribute: "column-picker" })
 ], k.prototype, "columnPicker", 2);
 O([
-  l({ type: Number })
+  n({ type: Number })
 ], k.prototype, "page", 2);
 O([
-  l({ type: Number, attribute: "total-pages" })
+  n({ type: Number, attribute: "total-pages" })
 ], k.prototype, "totalPages", 2);
 O([
-  l({ type: Boolean, attribute: "cursor-mode" })
+  n({ type: Boolean, attribute: "cursor-mode" })
 ], k.prototype, "cursorMode", 2);
 O([
-  l({ type: Boolean, attribute: "has-next" })
+  n({ type: Boolean, attribute: "has-next" })
 ], k.prototype, "hasNext", 2);
 O([
-  l({ type: Boolean, attribute: "has-prev" })
+  n({ type: Boolean, attribute: "has-prev" })
 ], k.prototype, "hasPrev", 2);
 O([
-  $()
+  y()
 ], k.prototype, "pickerOpen", 2);
 O([
-  $()
+  y()
 ], k.prototype, "pickedColumns", 2);
 O([
-  $()
+  y()
 ], k.prototype, "draftColumns", 2);
 O([
-  $()
+  y()
 ], k.prototype, "pickAvail", 2);
 O([
-  $()
+  y()
 ], k.prototype, "pickSel", 2);
 O([
-  $()
+  y()
 ], k.prototype, "expanded", 2);
 k = O([
   b("baht-table")
@@ -539,7 +539,7 @@ var Ds = Object.defineProperty, Fs = Object.getOwnPropertyDescriptor, ut = (t, e
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ds(e, i, s), s;
 };
-let it = class extends y {
+let rt = class extends g {
   constructor() {
     super(...arguments), this.items = [], this.loading = !1, this.error = !1, this.errorMessage = "Couldn't load data. Try again.", this.emptyMessage = "Nothing here yet.", this.skeletonRows = 5, this.clickable = !0;
   }
@@ -553,16 +553,16 @@ let it = class extends y {
     );
   }
   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" role="alert">${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" role="alert">${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}
@@ -573,48 +573,48 @@ let it = class extends y {
       >
         <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() {
     const t = !this.loading && !this.error && this.items.length > 0;
-    return n`<div class="baht-list" role=${t ? "list" : h}>${this.renderRows()}</div>`;
+    return l`<div class="baht-list" role=${t ? "list" : h}>${this.renderRows()}</div>`;
   }
 };
 ut([
-  l({ attribute: !1 })
-], it.prototype, "items", 2);
+  n({ attribute: !1 })
+], rt.prototype, "items", 2);
 ut([
-  l({ type: Boolean })
-], it.prototype, "loading", 2);
+  n({ type: Boolean })
+], rt.prototype, "loading", 2);
 ut([
-  l({ type: Boolean })
-], it.prototype, "error", 2);
+  n({ type: Boolean })
+], rt.prototype, "error", 2);
 ut([
-  l({ attribute: "error-message" })
-], it.prototype, "errorMessage", 2);
+  n({ attribute: "error-message" })
+], rt.prototype, "errorMessage", 2);
 ut([
-  l({ attribute: "empty-message" })
-], it.prototype, "emptyMessage", 2);
+  n({ attribute: "empty-message" })
+], rt.prototype, "emptyMessage", 2);
 ut([
-  l({ type: Number, attribute: "skeleton-rows" })
-], it.prototype, "skeletonRows", 2);
+  n({ type: Number, attribute: "skeleton-rows" })
+], rt.prototype, "skeletonRows", 2);
 ut([
-  l({ type: Boolean })
-], it.prototype, "clickable", 2);
-it = ut([
+  n({ type: Boolean })
+], rt.prototype, "clickable", 2);
+rt = ut([
   b("baht-list")
-], it);
-var Es = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, Wt = (t, e, i, a) => {
+], rt);
+var Es = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, Jt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Bs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Es(e, i, s), s;
 };
-let kt = class extends y {
+let Pt = class extends g {
   constructor() {
     super(...arguments), this.text = "", this.position = "top", this.dismissed = !1;
   }
@@ -633,7 +633,7 @@ let kt = class extends y {
     t ? (t.setAttribute("aria-describedby", this.tooltipId), this.anchorEl.removeAttribute("tabindex"), this.anchorEl.removeAttribute("aria-describedby")) : (this.anchorEl.setAttribute("tabindex", "0"), this.anchorEl.setAttribute("aria-describedby", this.tooltipId));
   }
   firstUpdated() {
-    ne(this, this.anchorEl), this.wireDescribedBy(), setTimeout(() => this.isConnected && this.wireDescribedBy(), 0);
+    he(this, this.anchorEl), this.wireDescribedBy(), setTimeout(() => this.isConnected && this.wireDescribedBy(), 0);
   }
   onKeydown(t) {
     t.key === "Escape" && (this.dismissed = !0);
@@ -642,7 +642,7 @@ let kt = class extends y {
     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}
@@ -653,27 +653,27 @@ let kt = class extends y {
     </span>`;
   }
 };
-Wt([
-  l()
-], kt.prototype, "text", 2);
-Wt([
-  l()
-], kt.prototype, "position", 2);
-Wt([
-  Bt(".baht-tooltip-anchor")
-], kt.prototype, "anchorEl", 2);
-Wt([
-  $()
-], kt.prototype, "dismissed", 2);
-kt = Wt([
+Jt([
+  n()
+], Pt.prototype, "text", 2);
+Jt([
+  n()
+], Pt.prototype, "position", 2);
+Jt([
+  Mt(".baht-tooltip-anchor")
+], Pt.prototype, "anchorEl", 2);
+Jt([
+  y()
+], Pt.prototype, "dismissed", 2);
+Pt = Jt([
   b("baht-tooltip")
-], kt);
-var Is = Object.defineProperty, js = Object.getOwnPropertyDescriptor, It = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? js(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+], Pt);
+var Ms = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, It = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Is(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
-  return a && s && Is(e, i, s), s;
+  return a && s && Ms(e, i, s), s;
 };
-let ft = class extends y {
+let mt = class extends g {
   constructor() {
     super(...arguments), this.tone = "info", this.heading = "", this.message = "", this.dismissible = !1, this.dismissed = !1, this.generation = 0;
   }
@@ -692,39 +692,39 @@ let ft = class extends y {
     i.classList.add("baht-alert--leaving"), vs(i, e);
   }
   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=${m("dismiss")} @click=${() => this.dismiss()}>×</button>` : h}
+      ${this.dismissible ? l`<button type="button" class="baht-alert-dismiss" aria-label=${m("dismiss")} @click=${() => this.dismiss()}>×</button>` : h}
     </div>`;
   }
 };
 It([
-  l()
-], ft.prototype, "tone", 2);
+  n()
+], mt.prototype, "tone", 2);
 It([
-  l()
-], ft.prototype, "heading", 2);
+  n()
+], mt.prototype, "heading", 2);
 It([
-  l()
-], ft.prototype, "message", 2);
+  n()
+], mt.prototype, "message", 2);
 It([
-  l({ type: Boolean })
-], ft.prototype, "dismissible", 2);
+  n({ type: Boolean })
+], mt.prototype, "dismissible", 2);
 It([
-  $()
-], ft.prototype, "dismissed", 2);
-ft = It([
+  y()
+], mt.prototype, "dismissed", 2);
+mt = It([
   b("baht-alert")
-], ft);
-var Ss = Object.defineProperty, Ms = Object.getOwnPropertyDescriptor, jt = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ms(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+], mt);
+var js = Object.defineProperty, Ss = Object.getOwnPropertyDescriptor, jt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ss(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
-  return a && s && Ss(e, i, s), s;
+  return a && s && js(e, i, s), s;
 };
-let mt = class extends y {
+let vt = class extends g {
   constructor() {
     super(...arguments), this.value = 0, this.max = 5, this.readonly = !1, this.label = "Rating", this.hover = 0;
   }
@@ -753,7 +753,7 @@ let mt = class extends y {
   }
   render() {
     const t = this.hover || this.value;
-    return n`<div
+    return l`<div
       class="baht-rating"
       role="radiogroup"
       aria-label=${this.label}
@@ -761,7 +761,7 @@ let mt = class extends y {
     >
       ${Array.from({ length: this.max }, (e, i) => {
       const a = i + 1, s = this.value || 1;
-      return n`<button
+      return l`<button
           type="button"
           class=${a <= t ? "baht-rating--on" : ""}
           role="radio"
@@ -778,29 +778,29 @@ let mt = class extends y {
   }
 };
 jt([
-  l({ type: Number })
-], mt.prototype, "value", 2);
+  n({ type: Number })
+], vt.prototype, "value", 2);
 jt([
-  l({ type: Number })
-], mt.prototype, "max", 2);
+  n({ type: Number })
+], vt.prototype, "max", 2);
 jt([
-  l({ type: Boolean })
-], mt.prototype, "readonly", 2);
+  n({ type: Boolean })
+], vt.prototype, "readonly", 2);
 jt([
-  l()
-], mt.prototype, "label", 2);
+  n()
+], vt.prototype, "label", 2);
 jt([
-  $()
-], mt.prototype, "hover", 2);
-mt = jt([
+  y()
+], vt.prototype, "hover", 2);
+vt = jt([
   b("baht-rating")
-], mt);
+], vt);
 var Ts = Object.defineProperty, As = Object.getOwnPropertyDescriptor, bt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? As(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ts(e, i, s), s;
 };
-let rt = class extends y {
+let ot = class extends g {
   constructor() {
     super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.label = "", this.disabled = !1, this.showValue = !0;
   }
@@ -814,55 +814,55 @@ let rt = class extends y {
     );
   }
   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"
           id=${this.inputId}
           aria-label=${this.label ? h : "Value"}
-          .value=${ot(String(this.value))}
+          .value=${lt(String(this.value))}
           min=${this.min}
           max=${this.max}
           step=${this.step}
           ?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>`;
   }
 };
 bt([
-  l({ type: Number })
-], rt.prototype, "value", 2);
+  n({ type: Number })
+], ot.prototype, "value", 2);
 bt([
-  l({ type: Number })
-], rt.prototype, "min", 2);
+  n({ type: Number })
+], ot.prototype, "min", 2);
 bt([
-  l({ type: Number })
-], rt.prototype, "max", 2);
+  n({ type: Number })
+], ot.prototype, "max", 2);
 bt([
-  l({ type: Number })
-], rt.prototype, "step", 2);
+  n({ type: Number })
+], ot.prototype, "step", 2);
 bt([
-  l()
-], rt.prototype, "label", 2);
+  n()
+], ot.prototype, "label", 2);
 bt([
-  l({ type: Boolean })
-], rt.prototype, "disabled", 2);
+  n({ type: Boolean })
+], ot.prototype, "disabled", 2);
 bt([
-  l({ type: Boolean, attribute: "show-value" })
-], rt.prototype, "showValue", 2);
-rt = bt([
+  n({ type: Boolean, attribute: "show-value" })
+], ot.prototype, "showValue", 2);
+ot = bt([
   b("baht-range")
-], rt);
+], ot);
 var Ls = Object.defineProperty, Ns = Object.getOwnPropertyDescriptor, St = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Ns(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ls(e, i, s), s;
 };
-let vt = class extends y {
+let $t = class extends g {
   constructor() {
     super(...arguments), this.length = 6, this.value = "", this.disabled = !1, this.mode = "numeric", this.label = "One-time code", this._chars = [], this._lastValue = "", this._wasFull = !1;
   }
@@ -929,9 +929,9 @@ let vt = class extends y {
     this.commit(), (s = this.inputs()[Math.min(i, 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"
@@ -947,29 +947,29 @@ let vt = class extends y {
   }
 };
 St([
-  l({ type: Number })
-], vt.prototype, "length", 2);
+  n({ type: Number })
+], $t.prototype, "length", 2);
 St([
-  l()
-], vt.prototype, "value", 2);
+  n()
+], $t.prototype, "value", 2);
 St([
-  l({ type: Boolean })
-], vt.prototype, "disabled", 2);
+  n({ type: Boolean })
+], $t.prototype, "disabled", 2);
 St([
-  l()
-], vt.prototype, "mode", 2);
+  n()
+], $t.prototype, "mode", 2);
 St([
-  l()
-], vt.prototype, "label", 2);
-vt = St([
+  n()
+], $t.prototype, "label", 2);
+$t = St([
   b("baht-otp")
-], vt);
-var qs = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, Mt = (t, e, i, a) => {
+], $t);
+var qs = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, Tt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Rs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && qs(e, i, s), s;
 };
-let $t = class extends y {
+let yt = class extends g {
   constructor() {
     super(...arguments), this.options = [], this.selected = [], this.multiple = !0, this.disabled = !1, this.label = "Filters";
   }
@@ -981,9 +981,9 @@ let $t = class extends y {
     );
   }
   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}
@@ -993,66 +993,66 @@ let $t = class extends y {
     </div>`;
   }
 };
-Mt([
-  l({ attribute: !1 })
-], $t.prototype, "options", 2);
-Mt([
-  l({ attribute: !1 })
-], $t.prototype, "selected", 2);
-Mt([
-  l({ type: Boolean })
-], $t.prototype, "multiple", 2);
-Mt([
-  l({ type: Boolean })
-], $t.prototype, "disabled", 2);
-Mt([
-  l()
-], $t.prototype, "label", 2);
-$t = Mt([
+Tt([
+  n({ attribute: !1 })
+], yt.prototype, "options", 2);
+Tt([
+  n({ attribute: !1 })
+], yt.prototype, "selected", 2);
+Tt([
+  n({ type: Boolean })
+], yt.prototype, "multiple", 2);
+Tt([
+  n({ type: Boolean })
+], yt.prototype, "disabled", 2);
+Tt([
+  n()
+], yt.prototype, "label", 2);
+yt = Tt([
   b("baht-filter")
-], $t);
-var zs = Object.defineProperty, Vs = Object.getOwnPropertyDescriptor, ce = (t, e, i, a) => {
+], yt);
+var zs = Object.defineProperty, Vs = Object.getOwnPropertyDescriptor, pe = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Vs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && zs(e, i, s), s;
 };
-let Vt = class extends y {
+let Kt = class extends g {
   constructor() {
     super(...arguments), this.variant = "rect", this.width = "100%", this.height = "";
   }
   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"
     ></span>`;
   }
 };
-ce([
-  l()
-], Vt.prototype, "variant", 2);
-ce([
-  l()
-], Vt.prototype, "width", 2);
-ce([
-  l()
-], Vt.prototype, "height", 2);
-Vt = ce([
+pe([
+  n()
+], Kt.prototype, "variant", 2);
+pe([
+  n()
+], Kt.prototype, "width", 2);
+pe([
+  n()
+], Kt.prototype, "height", 2);
+Kt = pe([
   b("baht-skeleton")
-], Vt);
-var Ks = Object.defineProperty, Us = Object.getOwnPropertyDescriptor, Jt = (t, e, i, a) => {
+], Kt);
+var Ks = Object.defineProperty, Us = Object.getOwnPropertyDescriptor, Xt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Us(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ks(e, i, s), s;
 };
-let Pt = class extends y {
+let Ot = class extends g {
   constructor() {
     super(...arguments), this.value = null, this.tone = "primary", this.showLabel = !1, this.label = "Progress";
   }
   render() {
     const t = this.value == null || Number.isNaN(this.value), e = t ? 0 : Math.min(100, Math.max(0, this.value)), i = this.tone === "primary" ? "" : ` baht-progress--${this.tone}`;
-    return n`<div>
+    return l`<div>
       <div
         class="baht-progress${i}${t ? " baht-progress--indeterminate" : ""}"
         role="progressbar"
@@ -1063,137 +1063,137 @@ let Pt = class extends y {
       >
         <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>`;
   }
 };
-Jt([
-  l({ type: Number })
-], Pt.prototype, "value", 2);
-Jt([
-  l()
-], Pt.prototype, "tone", 2);
-Jt([
-  l({ type: Boolean, attribute: "show-label" })
-], Pt.prototype, "showLabel", 2);
-Jt([
-  l()
-], Pt.prototype, "label", 2);
-Pt = Jt([
+Xt([
+  n({ type: Number })
+], Ot.prototype, "value", 2);
+Xt([
+  n()
+], Ot.prototype, "tone", 2);
+Xt([
+  n({ type: Boolean, attribute: "show-label" })
+], Ot.prototype, "showLabel", 2);
+Xt([
+  n()
+], Ot.prototype, "label", 2);
+Ot = Xt([
   b("baht-progress")
-], Pt);
-var Hs = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, Se = (t, e, i, a) => {
+], Ot);
+var Hs = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, je = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Gs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Hs(e, i, s), s;
 };
-let ie = class extends y {
+let re = class extends g {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
   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>`;
   }
 };
-Se([
-  l()
-], ie.prototype, "size", 2);
-Se([
-  l()
-], ie.prototype, "label", 2);
-ie = Se([
+je([
+  n()
+], re.prototype, "size", 2);
+je([
+  n()
+], re.prototype, "label", 2);
+re = je([
   b("baht-spinner")
-], ie);
+], re);
 var Ws = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, Yt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Js(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ws(e, i, s), s;
 };
-let Ot = class extends y {
+let Ct = class extends g {
   constructor() {
     super(...arguments), this.heading = "", this.subtitle = "", this.hero = !1;
   }
   firstUpdated() {
-    ne(this, this.bodyEl);
+    he(this, this.bodyEl);
   }
   render() {
-    return n`<div class="baht-card${this.hero ? " baht-card--hero" : ""}">
-      ${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()
-], Ot.prototype, "heading", 2);
+  n()
+], Ct.prototype, "heading", 2);
 Yt([
-  l()
-], Ot.prototype, "subtitle", 2);
+  n()
+], Ct.prototype, "subtitle", 2);
 Yt([
-  l({ type: Boolean })
-], Ot.prototype, "hero", 2);
+  n({ type: Boolean })
+], Ct.prototype, "hero", 2);
 Yt([
-  Bt(".baht-card-body")
-], Ot.prototype, "bodyEl", 2);
-Ot = Yt([
+  Mt(".baht-card-body")
+], Ct.prototype, "bodyEl", 2);
+Ct = Yt([
   b("baht-card")
-], Ot);
-var Ys = Object.defineProperty, Xs = Object.getOwnPropertyDescriptor, pe = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Xs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+], Ct);
+var Xs = Object.defineProperty, Ys = Object.getOwnPropertyDescriptor, de = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ys(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
-  return a && s && Ys(e, i, s), s;
+  return a && s && Xs(e, i, s), s;
 };
-let Kt = class extends y {
+let Ut = class extends g {
   constructor() {
     super(...arguments), this.legend = "", this.disabled = !1;
   }
   firstUpdated() {
-    ne(this, this.bodyEl);
+    he(this, this.bodyEl);
   }
   render() {
-    return n`<fieldset class="baht-fieldset" ?disabled=${this.disabled}>
-      ${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>`;
   }
 };
-pe([
-  l()
-], Kt.prototype, "legend", 2);
-pe([
-  l({ type: Boolean })
-], Kt.prototype, "disabled", 2);
-pe([
-  Bt(".baht-fieldset-body")
-], Kt.prototype, "bodyEl", 2);
-Kt = pe([
+de([
+  n()
+], Ut.prototype, "legend", 2);
+de([
+  n({ type: Boolean })
+], Ut.prototype, "disabled", 2);
+de([
+  Mt(".baht-fieldset-body")
+], Ut.prototype, "bodyEl", 2);
+Ut = de([
   b("baht-fieldset")
-], Kt);
+], Ut);
 var Zs = Object.defineProperty, Qs = Object.getOwnPropertyDescriptor, ls = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Qs(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Zs(e, i, s), s;
 };
-let De = class extends y {
+let De = class extends g {
   constructor() {
     super(...arguments), this.items = [];
   }
   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>`
     )}
@@ -1201,17 +1201,17 @@ let De = class extends y {
   }
 };
 ls([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], De.prototype, "items", 2);
 De = ls([
   b("baht-timeline")
 ], De);
-var ta = Object.defineProperty, ea = Object.getOwnPropertyDescriptor, de = (t, e, i, a) => {
+var ta = Object.defineProperty, ea = Object.getOwnPropertyDescriptor, ue = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ea(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ta(e, i, s), s;
 };
-let Ct = class extends y {
+let Dt = class extends g {
   constructor() {
     super(...arguments), this.items = [], this.multiple = !1, this.openSet = /* @__PURE__ */ new Set(), this.itemsFingerprint = "";
   }
@@ -1220,7 +1220,7 @@ let Ct = class extends y {
   }
   willUpdate(t) {
     if (t.has("items")) {
-      const e = Ct.fingerprint(this.items);
+      const e = Dt.fingerprint(this.items);
       e !== this.itemsFingerprint && (this.itemsFingerprint = e, this.openSet = new Set(this.items.flatMap((i, a) => i.open ? [a] : [])));
     }
   }
@@ -1231,10 +1231,10 @@ let Ct = class extends y {
     );
   }
   render() {
-    return n`<div class="baht-accordion">
+    return l`<div class="baht-accordion">
       ${this.items.map((t, e) => {
       const i = this.openSet.has(e), a = `baht-acc-${this.uid}-t-${e}`, s = `baht-acc-${this.uid}-p-${e}`;
-      return n`<div class="baht-accordion-item${i ? " baht-accordion-item--open" : ""}">
+      return l`<div class="baht-accordion-item${i ? " baht-accordion-item--open" : ""}">
           <button
             type="button"
             class="baht-accordion-trigger"
@@ -1246,63 +1246,63 @@ let Ct = class extends y {
             <span>${t.title}</span>
             <span class="baht-accordion-chevron" aria-hidden="true">▾</span>
           </button>
-          ${i ? n`<div class="baht-accordion-content" id=${s} role="region" aria-labelledby=${a}>${t.content}</div>` : h}
+          ${i ? l`<div class="baht-accordion-content" id=${s} role="region" aria-labelledby=${a}>${t.content}</div>` : h}
         </div>`;
     })}
     </div>`;
   }
 };
-de([
-  l({ attribute: !1 })
-], Ct.prototype, "items", 2);
-de([
-  l({ type: Boolean })
-], Ct.prototype, "multiple", 2);
-de([
-  $()
-], Ct.prototype, "openSet", 2);
-Ct = de([
+ue([
+  n({ attribute: !1 })
+], Dt.prototype, "items", 2);
+ue([
+  n({ type: Boolean })
+], Dt.prototype, "multiple", 2);
+ue([
+  y()
+], Dt.prototype, "openSet", 2);
+Dt = ue([
   b("baht-accordion")
-], Ct);
-var sa = Object.defineProperty, aa = Object.getOwnPropertyDescriptor, Xt = (t, e, i, a) => {
+], Dt);
+var sa = Object.defineProperty, aa = Object.getOwnPropertyDescriptor, Zt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? aa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && sa(e, i, s), s;
 };
-let Dt = class extends y {
+let Ft = class extends g {
   constructor() {
     super(...arguments), this.href = "", this.label = "", this.external = !1, this.externalHint = "opens in new tab";
   }
   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>`;
   }
 };
-Xt([
-  l()
-], Dt.prototype, "href", 2);
-Xt([
-  l()
-], Dt.prototype, "label", 2);
-Xt([
-  l({ type: Boolean })
-], Dt.prototype, "external", 2);
-Xt([
-  l({ attribute: "external-hint" })
-], Dt.prototype, "externalHint", 2);
-Dt = Xt([
+Zt([
+  n()
+], Ft.prototype, "href", 2);
+Zt([
+  n()
+], Ft.prototype, "label", 2);
+Zt([
+  n({ type: Boolean })
+], Ft.prototype, "external", 2);
+Zt([
+  n({ attribute: "external-hint" })
+], Ft.prototype, "externalHint", 2);
+Ft = Zt([
   b("baht-link")
-], Dt);
-var ia = Object.defineProperty, ra = Object.getOwnPropertyDescriptor, Me = (t, e, i, a) => {
+], Ft);
+var ia = Object.defineProperty, ra = Object.getOwnPropertyDescriptor, Se = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ra(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ia(e, i, s), s;
 };
-let re = class extends y {
+let oe = class extends g {
   constructor() {
     super(...arguments), this.items = [], this.separator = "›";
   }
@@ -1313,10 +1313,10 @@ let re = class extends y {
   }
   render() {
     const t = this.items.length - 1;
-    return n`<nav class="baht-breadcrumbs" aria-label="Breadcrumb">
+    return l`<nav class="baht-breadcrumbs" aria-label="Breadcrumb">
       ${this.items.map((e, i) => {
-      const a = i < t ? n`<span class="baht-breadcrumbs-sep" aria-hidden="true">${this.separator}</span>` : h;
-      return i === t ? n`<span class="baht-breadcrumbs-current" aria-current="page">${e.label}</span>${a}` : e.href ? n`<a class="baht-link" href=${e.href}>${e.label}</a>${a}` : n`<a
+      const a = i < t ? l`<span class="baht-breadcrumbs-sep" aria-hidden="true">${this.separator}</span>` : h;
+      return i === 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) => {
@@ -1327,30 +1327,30 @@ let re = class extends y {
     </nav>`;
   }
 };
-Me([
-  l({ attribute: !1 })
-], re.prototype, "items", 2);
-Me([
-  l()
-], re.prototype, "separator", 2);
-re = Me([
+Se([
+  n({ attribute: !1 })
+], oe.prototype, "items", 2);
+Se([
+  n()
+], oe.prototype, "separator", 2);
+oe = Se([
   b("baht-breadcrumbs")
-], re);
+], oe);
 var oa = Object.getOwnPropertyDescriptor, la = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? oa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Ne = class extends J {
+let Ne = class extends X {
   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"}
-      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
-      placeholder=${L(this.field.placeholder)}
-      maxlength=${L(this.field.max_length)}
-      autocomplete=${L(this.field.autocomplete)}
+      .value=${lt(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${q(this.field.placeholder)}
+      maxlength=${q(this.field.max_length)}
+      autocomplete=${q(this.field.autocomplete)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1368,16 +1368,16 @@ var na = Object.getOwnPropertyDescriptor, ha = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let qe = class extends J {
+let qe = class extends X {
   renderControl() {
-    return n`<textarea
+    return l`<textarea
       class="baht-control baht-control--textarea"
       id=${this.controlId}
-      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
-      placeholder=${L(this.field.placeholder)}
-      maxlength=${L(this.field.max_length)}
+      .value=${lt(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${q(this.field.placeholder)}
+      maxlength=${q(this.field.max_length)}
       rows=${this.field.rows ?? 3}
-      autocomplete=${L(this.field.autocomplete)}
+      autocomplete=${q(this.field.autocomplete)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1395,17 +1395,17 @@ var ca = Object.getOwnPropertyDescriptor, pa = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Re = class extends J {
+let Re = class extends X {
   renderControl() {
-    return n`<input
+    return l`<input
       class="baht-control baht-control--number"
       id=${this.controlId}
       type="number"
-      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
-      placeholder=${L(this.field.placeholder)}
-      min=${L(this.field.min)}
-      max=${L(this.field.max)}
-      step=${L(this.field.step)}
+      .value=${lt(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${q(this.field.placeholder)}
+      min=${q(this.field.min)}
+      max=${q(this.field.max)}
+      step=${q(this.field.step)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1427,14 +1427,14 @@ var da = Object.defineProperty, ua = Object.getOwnPropertyDescriptor, Te = (t, e
   return a && s && da(e, i, s), s;
 };
 const ba = 500;
-let oe = class extends J {
+let le = class extends X {
   constructor() {
     super(...arguments), this.open = !1, this.active = 0, this.typeBuffer = "", this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
     };
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), clearTimeout(this.typeTimer), S() && document.removeEventListener("mousedown", this.onDocMousedown);
+    super.disconnectedCallback(), clearTimeout(this.typeTimer), T() && document.removeEventListener("mousedown", this.onDocMousedown);
   }
   get listId() {
     return `${this.controlId}-list`;
@@ -1469,10 +1469,10 @@ let oe = class extends J {
     (e = t == null ? void 0 : t.scrollIntoView) == null || e.call(t, { block: "nearest" });
   }
   openList() {
-    !this.interactive || this.open || (this.active = this.selectedIndex, this.open = !0, S() && document.addEventListener("mousedown", this.onDocMousedown));
+    !this.interactive || this.open || (this.active = this.selectedIndex, this.open = !0, T() && document.addEventListener("mousedown", this.onDocMousedown));
   }
   close() {
-    this.open && (this.open = !1, S() && document.removeEventListener("mousedown", this.onDocMousedown));
+    this.open && (this.open = !1, T() && document.removeEventListener("mousedown", this.onDocMousedown));
   }
   toggle() {
     this.open ? this.close() : this.openList();
@@ -1536,7 +1536,7 @@ let oe = class extends J {
   }
   renderControl() {
     const t = this.rows, e = this.selectedIndex, i = e === 0;
-    return n`<div class="baht-select${this.open ? " baht-select--open" : ""}">
+    return l`<div class="baht-select${this.open ? " baht-select--open" : ""}">
       <button
         type="button"
         class="baht-control baht-control--select baht-select-trigger${i ? " baht-select-trigger--placeholder" : ""}"
@@ -1567,7 +1567,7 @@ let oe = class extends J {
       >
         ${t.map(
       // eslint-disable-next-line lit-a11y/click-events-have-key-events -- keyboard lives on the combobox (aria-activedescendant pattern); options are never focused
-      (a, s) => n`<div
+      (a, s) => l`<div
             class="baht-listbox-option${s === this.active ? " baht-listbox-option--active" : ""}${s === 0 ? " baht-listbox-option--placeholder" : ""}"
             id=${this.optionId(s)}
             role="option"
@@ -1585,20 +1585,20 @@ let oe = class extends J {
   }
 };
 Te([
-  $()
-], oe.prototype, "open", 2);
+  y()
+], le.prototype, "open", 2);
 Te([
-  $()
-], oe.prototype, "active", 2);
-oe = Te([
+  y()
+], le.prototype, "active", 2);
+le = Te([
   b("baht-select")
-], oe);
+], le);
 var fa = Object.getOwnPropertyDescriptor, ma = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? fa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let ze = class extends J {
+let ze = class extends X {
   get selected() {
     return Array.isArray(this.value) ? this.value : [];
   }
@@ -1607,18 +1607,18 @@ let ze = class extends J {
     this.emitInput(a.filter((s) => i.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}
-            .checked=${ot(this.selected.includes(t.key))}
+            .checked=${lt(this.selected.includes(t.key))}
             ?disabled=${this.disabled || this.readonly}
             @change=${(e) => this.toggle(t.key, e.target.checked)}
           />
@@ -1636,17 +1636,17 @@ var va = Object.getOwnPropertyDescriptor, $a = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Ve = class extends J {
+let Ve = class extends X {
   /** Label sits beside the box, so suppress the block label. */
   renderLabel() {
     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}
-        .checked=${ot(this.value === !0)}
+        .checked=${lt(this.value === !0)}
         ?disabled=${this.disabled || this.readonly}
         ?required=${this.required}
         aria-invalid=${this.invalid}
@@ -1654,7 +1654,7 @@ let Ve = class extends J {
         @change=${(t) => this.emitInput(t.target.checked)}
       />
       <span class="baht-label"
-        >${this.field.label}${this.required ? n`<span class="baht-required-mark" aria-hidden="true">*</span>` : h}</span
+        >${this.field.label}${this.required ? l`<span class="baht-required-mark" aria-hidden="true">*</span>` : h}</span
       >
     </label>`;
   }
@@ -1667,9 +1667,9 @@ var ya = Object.getOwnPropertyDescriptor, ga = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Ke = class extends J {
+let Ke = class extends X {
   renderControl() {
-    return n`<div
+    return l`<div
       class="baht-control baht-control--radio"
       role="radiogroup"
       aria-labelledby=${this.field.label ? this.labelId : h}
@@ -1678,12 +1678,12 @@ let Ke = class extends J {
       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}
             value=${t.key}
-            .checked=${ot(this.value === t.key)}
+            .checked=${lt(this.value === t.key)}
             ?disabled=${this.disabled || this.readonly}
             @change=${() => this.emitInput(t.key)}
           />
@@ -1701,18 +1701,18 @@ var wa = Object.getOwnPropertyDescriptor, xa = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let Ue = class extends J {
+let Ue = class extends X {
   renderLabel() {
     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"
         id=${this.controlId}
         aria-checked=${this.value === !0 ? "true" : "false"}
-        .checked=${ot(this.value === !0)}
+        .checked=${lt(this.value === !0)}
         ?disabled=${this.disabled || this.readonly}
         ?required=${this.required}
         aria-invalid=${this.invalid}
@@ -1721,7 +1721,7 @@ let Ue = class extends J {
       />
       <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" aria-hidden="true">*</span>` : h}</span
+        >${this.field.label}${this.required ? l`<span class="baht-required-mark" aria-hidden="true">*</span>` : h}</span
       >
     </label>`;
   }
@@ -1734,17 +1734,17 @@ var _a = Object.getOwnPropertyDescriptor, ka = (t, e, i, a) => {
     (o = t[r]) && (s = o(s) || s);
   return s;
 };
-let He = class extends J {
+let He = class extends X {
   constructor() {
     super(...arguments), this.lastEmitted = null;
   }
   renderControl() {
-    return n`<input
+    return l`<input
       class="baht-control baht-control--date"
       id=${this.controlId}
       type="text"
       autocomplete="off"
-      placeholder=${L(this.field.placeholder)}
+      placeholder=${q(this.field.placeholder)}
       ?disabled=${this.disabled}
       ?readonly=${this.readonly}
       ?required=${this.required}
@@ -1781,7 +1781,7 @@ let He = class extends J {
     We(this.fp.selectedDates, t) || (t.length === 0 ? this.fp.clear(!1) : this.fp.setDate(t, !1));
   }
   options() {
-    const t = this.field, e = $e(t), i = Lt(t.min), a = Lt(t.max);
+    const t = this.field, e = $e(t), i = Nt(t.min), a = Nt(t.max);
     return {
       static: !0,
       disableMobile: !0,
@@ -1824,15 +1824,15 @@ let He = class extends J {
     t && (this.todayBtn && (this.todayBtn.disabled = !this.todayAllowed()), this.clearBtn && (this.clearBtn.disabled = t.selectedDates.length === 0));
   }
   todayAllowed() {
-    const t = _t(/* @__PURE__ */ new Date()), e = Lt(this.field.min), i = Lt(this.field.max);
-    if (e && t < _t(e) || i && t > _t(i)) return !1;
+    const t = kt(/* @__PURE__ */ new Date()), e = Nt(this.field.min), i = Nt(this.field.max);
+    if (e && t < kt(e) || i && t > kt(i)) return !1;
     for (const a of Je(this.field) ?? [])
       if (a instanceof Date) {
         if (Ge(a, t)) return !1;
       } else if (typeof a == "function") {
         if (a(t)) return !1;
       } else if (typeof a == "object" && "from" in a) {
-        const s = _t(new Date(a.from)), r = _t(new Date(a.to));
+        const s = kt(new Date(a.from)), r = kt(new Date(a.to));
         if (t >= s && t <= r) return !1;
       }
     return !0;
@@ -1840,7 +1840,7 @@ let He = class extends J {
   pickToday() {
     const t = this.fp;
     if (!t || !this.todayAllowed()) return;
-    const e = _t(/* @__PURE__ */ new Date());
+    const e = kt(/* @__PURE__ */ new Date());
     switch ($e(this.field)) {
       case "range":
         t.setDate([e, e], !0);
@@ -1860,11 +1860,11 @@ let He = class extends J {
   }
   /** Host value (any mode) -> the Date list flatpickr works with. */
   datesOf(t) {
-    return ds(t).map(Lt).filter((e) => e !== null);
+    return ds(t).map(Nt).filter((e) => e !== null);
   }
   /** flatpickr's selection -> the value shape of the field's mode. */
   toValue(t) {
-    const e = t.map(Rt);
+    const e = t.map(zt);
     switch ($e(this.field)) {
       case "range":
         return e.length === 2 ? [e[0], e[1]] : null;
@@ -1878,14 +1878,14 @@ let He = class extends J {
 He = ka([
   b("baht-datepicker")
 ], He);
-function _t(t) {
+function kt(t) {
   return new Date(t.getFullYear(), t.getMonth(), t.getDate());
 }
 function Ge(t, e) {
-  return Rt(t) === Rt(e);
+  return zt(t) === zt(e);
 }
 function We(t, e) {
-  return t.length !== e.length ? !1 : t.every((i, a) => Rt(i) === Rt(e[a]));
+  return t.length !== e.length ? !1 : t.every((i, a) => zt(i) === zt(e[a]));
 }
 function Je(t) {
   const e = [];
@@ -1896,23 +1896,23 @@ function Je(t) {
   const i = t.disabled_weekdays;
   return i != null && i.length && e.push((a) => i.includes(a.getDay())), e;
 }
-var Pa = Object.defineProperty, Oa = Object.getOwnPropertyDescriptor, Zt = (t, e, i, a) => {
+var Pa = Object.defineProperty, Oa = Object.getOwnPropertyDescriptor, Qt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Oa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Pa(e, i, s), s;
 };
-function Ye(t) {
+function Xe(t) {
   return t !== null && typeof t == "object" && typeof t.url == "string";
 }
 function ge(t) {
   return t >= 1024 * 1024 ? `${(t / 1024 / 1024).toFixed(1)} MB` : t >= 1024 ? `${Math.round(t / 1024)} KB` : `${t} B`;
 }
-let Ft = class extends J {
+let Et = class extends X {
   constructor() {
     super(...arguments), this.uploadingCount = 0, this.uploadError = null, this.rejectedNames = [];
   }
   get refs() {
-    return Array.isArray(this.value) ? this.value.filter(Ye) : Ye(this.value) ? [this.value] : [];
+    return Array.isArray(this.value) ? this.value.filter(Xe) : Xe(this.value) ? [this.value] : [];
   }
   emitRefs(t) {
     this.emitInput(this.field.multiple ? t : t[0] ?? null);
@@ -1958,7 +1958,7 @@ let Ft = class extends J {
       t ? "baht-dropzone--disabled" : "",
       this.invalid === "true" ? "baht-dropzone--invalid" : ""
     ].filter(Boolean).join(" ");
-    return n`<div
+    return l`<div
         class=${i}
         @dragover=${(a) => {
       t || (a.preventDefault(), a.currentTarget.classList.add("baht-dropzone--over"));
@@ -1973,7 +1973,7 @@ let Ft = class extends J {
           class="baht-control baht-control--file baht-dropzone-input"
           id=${this.controlId}
           type="file"
-          accept=${L(this.field.accept)}
+          accept=${q(this.field.accept)}
           ?multiple=${this.field.multiple}
           ?disabled=${t}
           ?required=${this.required}
@@ -1981,61 +1981,61 @@ let Ft = class extends J {
           aria-describedby=${this.describedBy}
           @change=${(a) => this.onPick(a)}
         />
-        <span class="baht-dropzone-icon" aria-hidden="true">${H("upload")}</span>
+        <span class="baht-dropzone-icon" aria-hidden="true">${W("upload")}</span>
         <span class="baht-dropzone-text">
           <label class="baht-dropzone-action" for=${this.controlId}
             >${this.field.multiple ? m("chooseFiles") : m("chooseFile")}</label
           >
           <span class="baht-dropzone-or">${m("orDropHere")}</span>
         </span>
-        ${e ? n`<span class="baht-dropzone-hint">${e}</span>` : h}
+        ${e ? l`<span class="baht-dropzone-hint">${e}</span>` : h}
       </div>
-      ${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.captured.map(
-      (a) => n`<span class="baht-file-chip">
+      (a) => l`<span class="baht-file-chip">
           <span class="baht-file-name">${a.name}</span>
           <span class="baht-file-size">${ge(a.size)}</span>
         </span>`
     )}
       ${this.refs.map(
-      (a) => n`<span class="baht-file-chip">
+      (a) => l`<span class="baht-file-chip">
           <a href=${a.url} target="_blank" rel="noreferrer"
             >${a.name}<span class="baht-visually-hidden"> (${m("opensInNewTab")})</span></a
           >
           <span class="baht-file-size">${ge(a.size)}</span>
-          ${this.disabled || this.readonly ? h : n`<button
+          ${this.disabled || this.readonly ? h : l`<button
                 type="button"
                 class="baht-file-remove"
                 aria-label=${m("removeFile")}
                 title=${m("removeFile")}
                 @click=${() => this.emitRefs(this.refs.filter((s) => s !== a))}
               >
-                ${H("close")}
+                ${W("close")}
               </button>`}
         </span>`
     )}`;
   }
 };
-Zt([
-  l({ attribute: !1 })
-], Ft.prototype, "uploader", 2);
-Zt([
-  $()
-], Ft.prototype, "uploadingCount", 2);
-Zt([
-  $()
-], Ft.prototype, "uploadError", 2);
-Zt([
-  $()
-], Ft.prototype, "rejectedNames", 2);
-Ft = Zt([
+Qt([
+  n({ attribute: !1 })
+], Et.prototype, "uploader", 2);
+Qt([
+  y()
+], Et.prototype, "uploadingCount", 2);
+Qt([
+  y()
+], Et.prototype, "uploadError", 2);
+Qt([
+  y()
+], Et.prototype, "rejectedNames", 2);
+Et = Qt([
   b("baht-file")
-], Ft);
-var Ca = Object.defineProperty, Da = Object.getOwnPropertyDescriptor, B = (t, e, i, a) => {
+], Et);
+var Ca = Object.defineProperty, Da = Object.getOwnPropertyDescriptor, M = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Da(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ca(e, i, s), s;
@@ -2068,7 +2068,7 @@ function Ba(t) {
 function we(t) {
   return t >= 1024 * 1024 ? `${(t / 1024 / 1024).toFixed(1)} MB` : t >= 1024 ? `${Math.round(t / 1024)} KB` : `${t} B`;
 }
-let D = class extends y {
+let F = class extends g {
   constructor() {
     super(...arguments), this.url = "", this.method = "POST", this.fieldName = "file", this.responseKey = "url", this.headers = {}, this.withCredentials = !1, this.value = null, this.label = "", this.hint = "", this.multiple = !1, this.disabled = !1, this.required = !1, this.error = null, this.pending = [], this.rejectedNames = [], this.dragging = !1, this.known = /* @__PURE__ */ new Map(), this.seq = 0;
   }
@@ -2180,9 +2180,9 @@ let D = class extends y {
       this.disabled ? "baht-dropzone--disabled" : "",
       e ? "baht-dropzone--invalid" : ""
     ].filter(Boolean).join(" ");
-    return n`<div class="baht-field baht-field--upload">
-      ${this.label ? n`<label class="baht-label" for=${this.inputId}
-              >${this.label}${this.required ? n`<span class="baht-required-mark" aria-hidden="true">*</span>` : h}</label
+    return l`<div class="baht-field baht-field--upload">
+      ${this.label ? l`<label class="baht-label" for=${this.inputId}
+              >${this.label}${this.required ? l`<span class="baht-required-mark" aria-hidden="true">*</span>` : h}</label
             >` : h}
       <div
         class=${o}
@@ -2194,58 +2194,58 @@ let D = class extends y {
           class="baht-dropzone-input"
           id=${this.inputId}
           type="file"
-          accept=${L(this.accept)}
+          accept=${q(this.accept)}
           ?multiple=${this.multiple}
           ?disabled=${this.disabled}
           ?required=${this.required}
           aria-invalid=${e ? "true" : "false"}
-          aria-describedby=${L(r)}
+          aria-describedby=${q(r)}
           @change=${(c) => this.onPick(c)}
         />
-        <span class="baht-dropzone-icon" aria-hidden="true">${H("upload")}</span>
+        <span class="baht-dropzone-icon" aria-hidden="true">${W("upload")}</span>
         <span class="baht-dropzone-text">
           <label class="baht-dropzone-action" for=${this.inputId}
             >${this.multiple ? m("chooseFiles") : m("chooseFile")}</label
           >
           <span class="baht-dropzone-or">${m("orDropHere")}</span>
         </span>
-        ${i ? n`<span class="baht-dropzone-hint" id=${L(a)}>${i}</span>` : h}
+        ${i ? l`<span class="baht-dropzone-hint" id=${q(a)}>${i}</span>` : h}
       </div>
 
-      ${this.pending.length > 0 || this.urls.length > 0 ? n`<ul class="baht-upload-list" aria-live="polite" aria-busy=${t ? "true" : "false"}>
+      ${this.pending.length > 0 || this.urls.length > 0 ? l`<ul class="baht-upload-list" aria-live="polite" aria-busy=${t ? "true" : "false"}>
               ${this.urls.map((c) => this.renderStored(c))}
               ${this.pending.map((c) => this.renderPending(c))}
             </ul>` : h}
-      ${this.rejectedNames.length > 0 ? n`<p class="baht-error" role="alert">
+      ${this.rejectedNames.length > 0 ? l`<p class="baht-error" role="alert">
               ${m("fileRejectedTooLarge", { names: this.rejectedNames.join(", ") })}
             </p>` : h}
-      ${this.error ? n`<p class="baht-error" id=${L(s)} role="alert">${this.error}</p>` : h}
+      ${this.error ? l`<p class="baht-error" id=${q(s)} role="alert">${this.error}</p>` : h}
     </div>`;
   }
   renderStored(t) {
     const e = this.fileFor(t);
-    return n`<li class="baht-file-chip baht-file-chip--done">
-      <span class="baht-file-chip-icon" aria-hidden="true">${H("check")}</span>
+    return l`<li class="baht-file-chip baht-file-chip--done">
+      <span class="baht-file-chip-icon" aria-hidden="true">${W("check")}</span>
       <a class="baht-file-name" href=${t} target="_blank" rel="noreferrer"
         >${e.name}<span class="baht-visually-hidden"> (${m("opensInNewTab")})</span></a
       >
-      ${e.size > 0 ? n`<span class="baht-file-size">${we(e.size)}</span>` : h}
-      ${this.disabled ? h : n`<button
+      ${e.size > 0 ? l`<span class="baht-file-size">${we(e.size)}</span>` : h}
+      ${this.disabled ? h : l`<button
               type="button"
               class="baht-file-remove"
               aria-label=${m("removeFile")}
               title=${m("removeFile")}
               @click=${() => this.emitValue(this.urls.filter((i) => i !== t))}
             >
-              ${H("close")}
+              ${W("close")}
             </button>`}
     </li>`;
   }
   renderPending(t) {
-    return n`<li class="baht-file-chip ${t.error ? "baht-file-chip--error" : "baht-file-chip--busy"}">
+    return l`<li class="baht-file-chip ${t.error ? "baht-file-chip--error" : "baht-file-chip--busy"}">
       <span class="baht-file-name">${t.file.name}</span>
       <span class="baht-file-size">${we(t.file.size)}</span>
-      ${t.error ? n`<span class="baht-file-status baht-file-status--error" role="alert">${t.error}</span>
+      ${t.error ? l`<span class="baht-file-status baht-file-status--error" role="alert">${t.error}</span>
               <button type="button" class="baht-upload-retry" @click=${() => this.retry(t)}>
                 ${m("retry")}
               </button>
@@ -2256,8 +2256,8 @@ let D = class extends y {
                 title=${m("removeFile")}
                 @click=${() => this.dismiss(t)}
               >
-                ${H("close")}
-              </button>` : n`<span
+                ${W("close")}
+              </button>` : l`<span
               class="baht-upload-bar"
               role="progressbar"
               aria-label=${m("uploading")}
@@ -2269,143 +2269,143 @@ let D = class extends y {
     </li>`;
   }
 };
-B([
-  l()
-], D.prototype, "url", 2);
-B([
-  l()
-], D.prototype, "method", 2);
-B([
-  l({ attribute: "field-name" })
-], D.prototype, "fieldName", 2);
-B([
-  l({ attribute: "response-key" })
-], D.prototype, "responseKey", 2);
-B([
-  l({ attribute: !1 })
-], D.prototype, "headers", 2);
-B([
-  l({ type: Boolean, attribute: "with-credentials" })
-], D.prototype, "withCredentials", 2);
-B([
-  l({ attribute: !1 })
-], D.prototype, "value", 2);
-B([
-  l()
-], D.prototype, "label", 2);
-B([
-  l()
-], D.prototype, "hint", 2);
-B([
-  l()
-], D.prototype, "accept", 2);
-B([
-  l({ type: Boolean })
-], D.prototype, "multiple", 2);
-B([
-  l({ type: Number, attribute: "max-size" })
-], D.prototype, "maxSize", 2);
-B([
-  l({ type: Boolean })
-], D.prototype, "disabled", 2);
-B([
-  l({ type: Boolean })
-], D.prototype, "required", 2);
-B([
-  l()
-], D.prototype, "error", 2);
-B([
-  $()
-], D.prototype, "pending", 2);
-B([
-  $()
-], D.prototype, "rejectedNames", 2);
-B([
-  $()
-], D.prototype, "dragging", 2);
-D = B([
+M([
+  n()
+], F.prototype, "url", 2);
+M([
+  n()
+], F.prototype, "method", 2);
+M([
+  n({ attribute: "field-name" })
+], F.prototype, "fieldName", 2);
+M([
+  n({ attribute: "response-key" })
+], F.prototype, "responseKey", 2);
+M([
+  n({ attribute: !1 })
+], F.prototype, "headers", 2);
+M([
+  n({ type: Boolean, attribute: "with-credentials" })
+], F.prototype, "withCredentials", 2);
+M([
+  n({ attribute: !1 })
+], F.prototype, "value", 2);
+M([
+  n()
+], F.prototype, "label", 2);
+M([
+  n()
+], F.prototype, "hint", 2);
+M([
+  n()
+], F.prototype, "accept", 2);
+M([
+  n({ type: Boolean })
+], F.prototype, "multiple", 2);
+M([
+  n({ type: Number, attribute: "max-size" })
+], F.prototype, "maxSize", 2);
+M([
+  n({ type: Boolean })
+], F.prototype, "disabled", 2);
+M([
+  n({ type: Boolean })
+], F.prototype, "required", 2);
+M([
+  n()
+], F.prototype, "error", 2);
+M([
+  y()
+], F.prototype, "pending", 2);
+M([
+  y()
+], F.prototype, "rejectedNames", 2);
+M([
+  y()
+], F.prototype, "dragging", 2);
+F = M([
   b("baht-upload")
-], D);
-var Ia = Object.defineProperty, ja = Object.getOwnPropertyDescriptor, ns = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? ja(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+], F);
+var Ma = Object.defineProperty, Ia = Object.getOwnPropertyDescriptor, ns = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ia(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
-  return a && s && Ia(e, i, s), s;
+  return a && s && Ma(e, i, s), s;
 };
-let Fe = class extends y {
+let Fe = class extends g {
   render() {
     if (!this.field) return h;
     const t = this.field.variant ?? "body";
-    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>`;
   }
 };
 ns([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], Fe.prototype, "field", 2);
 Fe = ns([
   b("baht-text")
 ], Fe);
-var Sa = Object.defineProperty, Ma = Object.getOwnPropertyDescriptor, hs = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ma(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+var ja = Object.defineProperty, Sa = Object.getOwnPropertyDescriptor, hs = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Sa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
-  return a && s && Sa(e, i, s), s;
+  return a && s && ja(e, i, s), s;
 };
-let Ee = class extends y {
+let Ee = class extends g {
   render() {
-    return this.field ? n`<div class="baht-section">
+    return this.field ? l`<div class="baht-section">
       <span class="baht-section-label">${this.field.text ?? this.field.label ?? ""}</span>
     </div>` : h;
   }
 };
 hs([
-  l({ attribute: !1 })
+  n({ attribute: !1 })
 ], Ee.prototype, "field", 2);
 Ee = hs([
   b("baht-section")
 ], Ee);
-var Ta = Object.defineProperty, Aa = Object.getOwnPropertyDescriptor, ue = (t, e, i, a) => {
+var Ta = Object.defineProperty, Aa = Object.getOwnPropertyDescriptor, be = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Aa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ta(e, i, s), s;
 };
-let Ut = class extends y {
+let Ht = class extends g {
   constructor() {
     super(...arguments), this.total = 0, this.label = "", this.color = "";
   }
   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>`;
   }
 };
-ue([
-  l({ type: Number })
-], Ut.prototype, "total", 2);
-ue([
-  l()
-], Ut.prototype, "label", 2);
-ue([
-  l()
-], Ut.prototype, "color", 2);
-Ut = ue([
+be([
+  n({ type: Number })
+], Ht.prototype, "total", 2);
+be([
+  n()
+], Ht.prototype, "label", 2);
+be([
+  n()
+], Ht.prototype, "color", 2);
+Ht = be([
   b("baht-stat-chart")
-], Ut);
-var La = Object.defineProperty, Tt = (t, e, i, a) => {
+], Ht);
+var La = Object.defineProperty, At = (t, e, i, a) => {
   for (var s = void 0, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = o(e, i, s) || s);
   return s && La(e, i, s), s;
 };
 const Na = 10;
-function nt(t, e) {
+function ft(t, e) {
   return e && t === 0 ? e : `var(--baht-chart-${t % Na + 1})`;
 }
-function Xe(t, e = 5) {
+function Ye(t, e = 5) {
   return `var(--baht-chart-seq-${Math.min(e - 1, Math.max(0, t)) + 1})`;
 }
-function qt(t, e = "number", i = "THB") {
+function Rt(t, e = "number", i = "THB") {
   if (!Number.isFinite(t)) return "—";
   switch (e) {
     case "currency":
@@ -2435,7 +2435,7 @@ function Be(t, e = 4) {
   for (let c = 0; c <= r + s / 1e3; c += s) o.push(Number(c.toFixed(10)));
   return o;
 }
-function le(t, e) {
+function ne(t, e) {
   const [i, a] = t, [s, r] = e, o = a - i;
   return !Number.isFinite(o) || o === 0 ? () => s : (c) => s + (c - i) / o * (r - s);
 }
@@ -2444,21 +2444,21 @@ function qa(t, e, i = "Other") {
   const a = t.slice(0, e - 1), s = t.slice(e - 1).reduce((r, o) => r + o.count, 0);
   return [...a, { label: i, count: s }];
 }
-function be(t, e, i, a = "View as table") {
-  return n`<details class="baht-chart-table">
+function fe(t, e, i, a = "View as table") {
+  return l`<details class="baht-chart-table">
     <summary>${a}</summary>
     <table>
       <caption>${t}</caption>
       <thead>
         <tr>
-          ${e.map((s) => n`<th scope="col">${s}</th>`)}
+          ${e.map((s) => l`<th scope="col">${s}</th>`)}
         </tr>
       </thead>
       <tbody>
         ${i.map(
-    (s) => n`<tr>
+    (s) => l`<tr>
             ${s.map(
-      (r, o) => o === 0 ? n`<th scope="row">${r}</th>` : n`<td class="baht-chart-num">${r}</td>`
+      (r, o) => o === 0 ? l`<th scope="row">${r}</th>` : l`<td class="baht-chart-num">${r}</td>`
     )}
           </tr>`
   )}
@@ -2466,13 +2466,13 @@ function be(t, e, i, a = "View as table") {
     </table>
   </details>`;
 }
-class tt extends y {
+class st extends g {
   constructor() {
     super(...arguments), this.emptyMessage = "No data to chart", this.loading = !1, this.showTable = !0, this.format = "number", this.currency = "THB", this.held = null;
   }
   /** Value → display text using this chart's `format` / `currency`. */
   fmt(e) {
-    return qt(e, this.format, this.currency);
+    return Rt(e, this.format, this.currency);
   }
   /**
    * The snapshot to draw. While `loading` is set the previous one is returned,
@@ -2487,7 +2487,7 @@ class tt extends y {
   }
   /** The single floating tooltip node; rendered by the template, never appended. */
   renderTooltip() {
-    return n`<div class="baht-chart-tooltip" role="status" aria-live="polite" hidden></div>`;
+    return l`<div class="baht-chart-tooltip" role="status" aria-live="polite" hidden></div>`;
   }
   /**
    * Show `text` near the pointer (or, on keyboard focus, near the mark).
@@ -2495,7 +2495,7 @@ class tt extends y {
    * untrusted data (interaction.md).
    */
   showTip(e, i) {
-    var g;
+    var $;
     const a = this.tipEl;
     if (!a) return;
     a.textContent = i, a.hidden = !1;
@@ -2506,7 +2506,7 @@ class tt extends y {
     if (typeof o.clientX == "number" && (o.clientX !== 0 || o.clientY !== 0))
       c = o.clientX - r.left, f = o.clientY - r.top;
     else {
-      const _ = e.currentTarget, p = (g = _ == null ? void 0 : _.getBoundingClientRect) == null ? void 0 : g.call(_);
+      const w = e.currentTarget, p = ($ = w == null ? void 0 : w.getBoundingClientRect) == null ? void 0 : $.call(w);
       c = p ? p.left + p.width / 2 - r.left : 0, f = p ? p.top - r.top : 0;
     }
     a.style.left = `${Math.round(c)}px`, a.style.top = `${Math.round(f)}px`;
@@ -2518,90 +2518,90 @@ class tt extends y {
   }
   /** The empty placeholder, or `nothing` when there is data. */
   renderEmpty() {
-    return n`<div class="baht-chart-empty">${this.emptyMessage}</div>`;
+    return l`<div class="baht-chart-empty">${this.emptyMessage}</div>`;
   }
   /** Legend rows — only ever rendered for 2+ series (marks-and-anatomy.md). */
   renderLegend(e, i = "rect") {
-    return e.length < 2 ? h : n`<div class="baht-chart-legend">
+    return e.length < 2 ? h : l`<div class="baht-chart-legend">
       ${e.map(
-      (a) => n`<div class="baht-chart-legend-row">
+      (a) => l`<div class="baht-chart-legend-row">
           <span
             class="baht-chart-swatch${i === "line" ? " baht-chart-swatch--line" : ""}"
             style="background:${a.color}"
             aria-hidden="true"
           ></span>
           <span class="baht-chart-legend-label">${a.label}</span>
-          ${a.value ? n`<span class="baht-chart-legend-count">${a.value}</span>` : h}
-          ${a.share ? n`<span class="baht-chart-legend-pct">${a.share}</span>` : h}
+          ${a.value ? l`<span class="baht-chart-legend-count">${a.value}</span>` : h}
+          ${a.share ? l`<span class="baht-chart-legend-pct">${a.share}</span>` : h}
         </div>`
     )}
     </div>`;
   }
 }
-Tt([
-  l({ attribute: "empty-message" })
-], tt.prototype, "emptyMessage");
-Tt([
-  l({ type: Boolean, reflect: !0 })
-], tt.prototype, "loading");
-Tt([
-  l({ type: Boolean, attribute: "show-table" })
-], tt.prototype, "showTable");
-Tt([
-  l()
-], tt.prototype, "format");
-Tt([
-  l()
-], tt.prototype, "currency");
-Tt([
-  Bt(".baht-chart-tooltip")
-], tt.prototype, "tipEl");
-var Ra = Object.defineProperty, za = Object.getOwnPropertyDescriptor, gt = (t, e, i, a) => {
+At([
+  n({ attribute: "empty-message" })
+], st.prototype, "emptyMessage");
+At([
+  n({ type: Boolean, reflect: !0 })
+], st.prototype, "loading");
+At([
+  n({ type: Boolean, attribute: "show-table" })
+], st.prototype, "showTable");
+At([
+  n()
+], st.prototype, "format");
+At([
+  n()
+], st.prototype, "currency");
+At([
+  Mt(".baht-chart-tooltip")
+], st.prototype, "tipEl");
+var Ra = Object.defineProperty, za = Object.getOwnPropertyDescriptor, wt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? za(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ra(e, i, s), s;
 };
-let ct = class extends y {
+let ct = class extends g {
   constructor() {
     super(...arguments), this.values = [], this.width = 96, this.height = 24, this.accentLast = !0, this.color = "", this.label = "";
   }
   render() {
-    const t = (this.values ?? []).filter((C) => Number.isFinite(C));
+    const t = (this.values ?? []).filter((x) => Number.isFinite(x));
     if (t.length < 2) return h;
-    const e = Math.max(16, this.width), i = Math.max(8, this.height), a = 3, s = Math.min(...t), r = Math.max(...t), o = le([0, t.length - 1], [a, e - a]), c = le([s, r === s ? s + 1 : r], [i - a, a]), f = t.map((C, d) => `${o(d).toFixed(2)},${c(C).toFixed(2)}`).join(" "), g = o(t.length - 1), _ = c(t[t.length - 1]), p = this.color || "var(--baht-chart-muted)", w = this.label || `Trend of ${t.length} points`;
-    return n`<svg
+    const e = Math.max(16, this.width), i = Math.max(8, this.height), a = 3, s = Math.min(...t), r = Math.max(...t), o = ne([0, t.length - 1], [a, e - a]), c = ne([s, r === s ? s + 1 : r], [i - a, a]), f = t.map((x, u) => `${o(u).toFixed(2)},${c(x).toFixed(2)}`).join(" "), $ = o(t.length - 1), w = c(t[t.length - 1]), p = this.color || "var(--baht-chart-muted)", P = this.label || `Trend of ${t.length} points`;
+    return l`<svg
       class="baht-sparkline"
       width=${e}
       height=${i}
       viewBox="0 0 ${e} ${i}"
       role="img"
-      aria-label=${w}
+      aria-label=${P}
     >
-      ${A`<polyline class="baht-sparkline-line" points=${f} fill="none" stroke=${p}/>`}
-      ${this.accentLast ? A`<circle class="baht-sparkline-dot" cx=${g.toFixed(2)} cy=${_.toFixed(2)} r="3"
+      ${N`<polyline class="baht-sparkline-line" points=${f} fill="none" stroke=${p}/>`}
+      ${this.accentLast ? N`<circle class="baht-sparkline-dot" cx=${$.toFixed(2)} cy=${w.toFixed(2)} r="3"
               fill="var(--baht-chart-1)"/>` : h}
     </svg>`;
   }
 };
-gt([
-  l({ type: Array })
+wt([
+  n({ type: Array })
 ], ct.prototype, "values", 2);
-gt([
-  l({ type: Number })
+wt([
+  n({ type: Number })
 ], ct.prototype, "width", 2);
-gt([
-  l({ type: Number })
+wt([
+  n({ type: Number })
 ], ct.prototype, "height", 2);
-gt([
-  l({ type: Boolean, attribute: "accent-last" })
+wt([
+  n({ type: Boolean, attribute: "accent-last" })
 ], ct.prototype, "accentLast", 2);
-gt([
-  l()
+wt([
+  n()
 ], ct.prototype, "color", 2);
-gt([
-  l()
+wt([
+  n()
 ], ct.prototype, "label", 2);
-ct = gt([
+ct = wt([
   b("baht-sparkline")
 ], ct);
 var Va = Object.defineProperty, Ka = Object.getOwnPropertyDescriptor, Y = (t, e, i, a) => {
@@ -2609,7 +2609,7 @@ var Va = Object.defineProperty, Ka = Object.getOwnPropertyDescriptor, Y = (t, e,
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Va(e, i, s), s;
 };
-let K = class extends y {
+let U = class extends g {
   constructor() {
     super(...arguments), this.label = "", this.value = 0, this.format = "number", this.currency = "THB", this.delta = null, this.deltaKind = "pct", this.deltaLabel = "", this.upIsGood = !0, this.trend = [], this.size = "md";
   }
@@ -2624,20 +2624,21 @@ let K = class extends y {
   }
   get deltaText() {
     const t = this.delta ?? 0, e = Math.abs(t);
-    return this.deltaKind === "pct" ? `${qt(e / 100, "percent")}` : qt(e, this.format, this.currency);
+    return this.deltaKind === "pct" ? `${Rt(e / 100, "percent")}` : Rt(e, this.format, this.currency);
   }
   render() {
     const t = this.delta != null && Number.isFinite(this.delta), e = this.tone, i = (this.delta ?? 0) > 0 ? "up" : (this.delta ?? 0) < 0 ? "down" : "flat";
-    return n`<div class="baht-stat${this.size === "hero" ? " baht-stat--hero" : ""}">
-      ${this.label ? n`<div class="baht-stat-label">${this.label}</div>` : h}
-      <div class="baht-stat-value">${qt(this.value, this.format, this.currency)}</div>
-      ${t ? n`<div class="baht-stat-delta baht-stat-delta--${e}">
+    return l`<div class="baht-stat${this.size === "hero" ? " baht-stat--hero" : ""}">
+      ${this.label ? l`<div class="baht-stat-label">${this.label}</div>` : h}
+      <div class="baht-stat-value">${Rt(this.value, this.format, this.currency)}</div>
+      ${t ? l`<div class="baht-stat-delta baht-stat-delta--${e}">
               <span class="baht-stat-arrow" aria-hidden="true">${this.arrow}</span>
               <span class="baht-stat-delta-value">${this.deltaText}</span>
               <span class="baht-visually-hidden">${i}</span>
-              ${this.deltaLabel ? n`<span class="baht-stat-delta-label">${this.deltaLabel}</span>` : h}
+              ${this.deltaLabel ? l`<span class="baht-stat-delta-label">${this.deltaLabel}</span>` : h}
             </div>` : h}
-      ${this.trend.length > 1 ? n`<baht-sparkline
+      ${!t && this.deltaLabel ? l`<div class="baht-stat-caption">${this.deltaLabel}</div>` : h}
+      ${this.trend.length > 1 ? l`<baht-sparkline
               class="baht-stat-trend"
               .values=${this.trend}
               label=${`${this.label || "Value"} trend, ${this.trend.length} points`}
@@ -2646,70 +2647,70 @@ let K = class extends y {
   }
 };
 Y([
-  l()
-], K.prototype, "label", 2);
+  n()
+], U.prototype, "label", 2);
 Y([
-  l({ type: Number })
-], K.prototype, "value", 2);
+  n({ type: Number })
+], U.prototype, "value", 2);
 Y([
-  l()
-], K.prototype, "format", 2);
+  n()
+], U.prototype, "format", 2);
 Y([
-  l()
-], K.prototype, "currency", 2);
+  n()
+], U.prototype, "currency", 2);
 Y([
-  l({ type: Number })
-], K.prototype, "delta", 2);
+  n({ type: Number })
+], U.prototype, "delta", 2);
 Y([
-  l({ attribute: "delta-kind" })
-], K.prototype, "deltaKind", 2);
+  n({ attribute: "delta-kind" })
+], U.prototype, "deltaKind", 2);
 Y([
-  l({ attribute: "delta-label" })
-], K.prototype, "deltaLabel", 2);
+  n({ attribute: "delta-label" })
+], U.prototype, "deltaLabel", 2);
 Y([
-  l({ type: Boolean, attribute: "up-is-good" })
-], K.prototype, "upIsGood", 2);
+  n({ type: Boolean, attribute: "up-is-good" })
+], U.prototype, "upIsGood", 2);
 Y([
-  l({ type: Array })
-], K.prototype, "trend", 2);
+  n({ type: Array })
+], U.prototype, "trend", 2);
 Y([
-  l()
-], K.prototype, "size", 2);
-K = Y([
+  n()
+], U.prototype, "size", 2);
+U = Y([
   b("baht-stat")
-], K);
-var Ua = Object.defineProperty, Ha = Object.getOwnPropertyDescriptor, At = (t, e, i, a) => {
+], U);
+var Ua = Object.defineProperty, Ha = Object.getOwnPropertyDescriptor, Lt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Ha(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ua(e, i, s), s;
 };
 const Ze = 6;
-let G = class extends tt {
+let J = class extends st {
   constructor() {
     super(...arguments), this.groups = [], this.total = null, this.color = "", this.centerLabel = "records", this.otherLabel = "Other";
   }
   render() {
     const t = this.hold(this.groups ?? []);
     if (t.length === 0)
-      return n`<div class=${this.rootClass("baht-donut-chart")}>${this.renderEmpty()}</div>`;
-    const e = qa(t, Ze, this.otherLabel), i = e.reduce((p, w) => p + w.count, 0) || 1, a = this.total ?? t.reduce((p, w) => p + w.count, 0), s = G.R, r = 2 * Math.PI * s, o = e.length > 1 ? G.GAP : 0, c = t.length > Ze;
+      return l`<div class=${this.rootClass("baht-donut-chart")}>${this.renderEmpty()}</div>`;
+    const e = qa(t, Ze, this.otherLabel), i = e.reduce((p, P) => p + P.count, 0) || 1, a = this.total ?? t.reduce((p, P) => p + P.count, 0), s = J.R, r = 2 * Math.PI * s, o = e.length > 1 ? J.GAP : 0, c = t.length > Ze;
     let f = 0;
-    const g = e.map((p, w) => {
-      const C = p.count / i, d = Math.max(0, C * r - o), v = {
+    const $ = e.map((p, P) => {
+      const x = p.count / i, u = Math.max(0, x * r - o), v = {
         ...p,
-        frac: C,
-        dash: `${d} ${r - d}`,
+        frac: x,
+        dash: `${u} ${r - u}`,
         offset: -f * r,
         // the folded tail is grey — never a generated ninth hue
-        color: c && w === e.length - 1 ? "var(--baht-chart-muted)" : nt(w, this.color || void 0)
+        color: c && P === e.length - 1 ? "var(--baht-chart-muted)" : ft(P, this.color || void 0)
       };
-      return f += C, v;
-    }), _ = `${a} ${this.centerLabel}: ${g.map((p) => `${p.label || "(empty)"} ${p.count} (${Math.round(p.frac * 100)}%)`).join(", ")}`;
-    return n`<div class=${this.rootClass("baht-donut-chart")}>
-      <svg width="160" height="160" viewBox="0 0 160 160" role="img" aria-label=${_}>
+      return f += x, v;
+    }), w = `${a} ${this.centerLabel}: ${$.map((p) => `${p.label || "(empty)"} ${p.count} (${Math.round(p.frac * 100)}%)`).join(", ")}`;
+    return l`<div class=${this.rootClass("baht-donut-chart")}>
+      <svg width="160" height="160" viewBox="0 0 160 160" role="img" aria-label=${w}>
         <g transform="translate(80,80) rotate(-90)">
-          ${g.map(
-      (p) => A`<circle r=${s} cx="0" cy="0" fill="none" stroke=${p.color}
+          ${$.map(
+      (p) => N`<circle r=${s} cx="0" cy="0" fill="none" stroke=${p.color}
                 stroke-width="22" stroke-dasharray=${p.dash} stroke-dashoffset=${p.offset}/>`
     )}
         </g>
@@ -2717,8 +2718,8 @@ let G = class extends tt {
         <text x="80" y="94" text-anchor="middle" class="baht-donut-chart-sub">${this.centerLabel}</text>
       </svg>
       <div class="baht-chart-legend">
-        ${g.map(
-      (p) => n`<div class="baht-chart-legend-row">
+        ${$.map(
+      (p) => l`<div class="baht-chart-legend-row">
             <span class="baht-chart-swatch" style="background:${p.color}" aria-hidden="true"></span>
             <span class="baht-chart-legend-label">${p.label || "(empty)"}</span>
             <span class="baht-chart-legend-count">${this.fmt(p.count)}</span>
@@ -2726,10 +2727,10 @@ let G = class extends tt {
           </div>`
     )}
       </div>
-      ${this.showTable ? be(
+      ${this.showTable ? fe(
       `${a} ${this.centerLabel}`,
       ["Slice", "Value", "Share"],
-      g.map((p) => [
+      $.map((p) => [
         p.label || "(empty)",
         this.fmt(p.count),
         `${Math.round(p.frac * 100)}%`
@@ -2738,50 +2739,50 @@ let G = class extends tt {
     </div>`;
   }
 };
-G.R = 54;
-G.GAP = 2;
-At([
-  l({ attribute: !1 })
-], G.prototype, "groups", 2);
-At([
-  l({ type: Number })
-], G.prototype, "total", 2);
-At([
-  l()
-], G.prototype, "color", 2);
-At([
-  l({ attribute: "center-label" })
-], G.prototype, "centerLabel", 2);
-At([
-  l({ attribute: "other-label" })
-], G.prototype, "otherLabel", 2);
-G = At([
+J.R = 54;
+J.GAP = 2;
+Lt([
+  n({ attribute: !1 })
+], J.prototype, "groups", 2);
+Lt([
+  n({ type: Number })
+], J.prototype, "total", 2);
+Lt([
+  n()
+], J.prototype, "color", 2);
+Lt([
+  n({ attribute: "center-label" })
+], J.prototype, "centerLabel", 2);
+Lt([
+  n({ attribute: "other-label" })
+], J.prototype, "otherLabel", 2);
+J = Lt([
   b("baht-donut-chart")
-], G);
+], J);
 var Ga = Object.defineProperty, Wa = Object.getOwnPropertyDescriptor, V = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Wa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Ga(e, i, s), s;
 };
-const Qe = 24, ts = 2, Ja = 56, Ya = 26;
-let R = class extends tt {
+const Qe = 24, ts = 2, Ja = 56, Xa = 26;
+let z = class extends st {
   constructor() {
-    super(...arguments), this.groups = [], this.series = [], this.categories = [], this.orientation = "horizontal", this.stacked = !1, this.compare = [], this.markers = [], this.labelValues = "ends", this.emphasis = null, this.color = "", this.label = "", this.band = 0;
+    super(...arguments), this.groups = [], this.series = [], this.categories = [], this.orientation = "horizontal", this.stacked = !1, this.compare = [], this.compareLabel = "Previous period", this.markers = [], this.labelValues = "ends", this.emphasis = null, this.color = "", this.label = "", this.band = 0;
   }
   connectedCallback() {
-    super.connectedCallback(), !(!S() || typeof ResizeObserver > "u") && (this.resizeObserver = new ResizeObserver(() => this.measure()), this.resizeObserver.observe(this));
+    super.connectedCallback(), !(!T() || typeof ResizeObserver > "u") && (this.resizeObserver = new ResizeObserver(() => this.measure()), this.resizeObserver.observe(this));
   }
   disconnectedCallback() {
     var t;
     (t = this.resizeObserver) == null || t.disconnect(), this.resizeObserver = void 0, super.disconnectedCallback();
   }
   firstUpdated() {
-    S() && queueMicrotask(() => this.measure());
+    T() && queueMicrotask(() => this.measure());
   }
   /** Host width → px per category. Never runs on the server (`hasDom` guard). */
   measure() {
     var r;
-    if (!S() || !this.isConnected || this.orientation !== "vertical") return;
+    if (!T() || !this.isConnected || this.orientation !== "vertical") return;
     const t = this.columnCount;
     if (t === 0) return;
     const e = ((r = this.getBoundingClientRect) == null ? void 0 : r.call(this).width) ?? 0;
@@ -2807,17 +2808,17 @@ let R = class extends tt {
   }
   colorFor(t, e, i) {
     const a = this.model.series[t];
-    return this.emphasis != null && !(i ? t === this.emphasis : e === this.emphasis) ? "var(--baht-chart-muted)" : nt(i ? t : 0, this.color || (a == null ? void 0 : a.color) || void 0);
+    return this.emphasis != null && !(i ? t === this.emphasis : e === this.emphasis) ? "var(--baht-chart-muted)" : ft(i ? t : 0, this.color || (a == null ? void 0 : a.color) || void 0);
   }
   render() {
     const t = this.hold(this.model);
-    return t.series.length === 0 ? n`<div class=${this.rootClass("baht-bar-chart")}>${this.renderEmpty()}</div>` : this.orientation === "vertical" ? this.renderVertical(t) : this.renderHorizontal(t);
+    return t.series.length === 0 ? l`<div class=${this.rootClass("baht-bar-chart")}>${this.renderEmpty()}</div>` : this.orientation === "vertical" ? this.renderVertical(t) : this.renderHorizontal(t);
   }
   /** Largest value a bar can reach: the raw max for `groups`, a clean tick otherwise. */
   domainMax(t, e, i) {
     const a = Math.max(...t.map((c) => c.values.length)), s = Array.from(
       { length: a },
-      (c, f) => e ? t.reduce((g, _) => g + (_.values[f] ?? 0), 0) : Math.max(...t.map((g) => g.values[f] ?? 0))
+      (c, f) => e ? t.reduce(($, w) => $ + (w.values[f] ?? 0), 0) : Math.max(...t.map(($) => $.values[f] ?? 0))
     ), r = Math.max(
       1,
       ...s,
@@ -2829,284 +2830,375 @@ let R = class extends tt {
     return o[o.length - 1] ?? r;
   }
   tableTwin(t, e, i) {
-    var s;
+    var r;
     if (!this.showTable) return h;
-    const a = ["Category", ...t.map((r) => r.name || "Value")];
-    return (s = this.compare) != null && s.length && a.push("Previous"), be(
-      this.label || "Bar chart data",
-      a,
-      Array.from({ length: i }, (r, o) => {
-        var f;
-        const c = [
-          e[o] || "(empty)",
-          ...t.map((g) => this.fmt(g.values[o] ?? 0))
-        ];
-        return (f = this.compare) != null && f.length && c.push(this.fmt(this.compare[o] ?? 0)), c;
-      })
-    );
+    const a = ["Category", ...t.map((o) => o.name || "Value")];
+    (r = this.compare) != null && r.length && a.push(this.compareLabel);
+    const s = Array.from({ length: i }, (o, c) => {
+      var $;
+      const f = [
+        e[c] || "(empty)",
+        ...t.map((w) => this.fmt(w.values[c] ?? 0))
+      ];
+      return ($ = this.compare) != null && $.length && f.push(this.fmt(this.compare[c] ?? 0)), f;
+    });
+    for (const o of this.markers ?? [])
+      s.push([
+        `${o.label ?? "Target"}${o.category ? ` (${o.category})` : ""}`,
+        this.fmt(o.value),
+        ...Array.from({ length: a.length - 2 }, () => "—")
+      ]);
+    return fe(this.label || "Bar chart data", a, s);
   }
   /** Markers with no `category` span the chart; the rest ride their own row. */
   markersFor(t) {
     return (this.markers ?? []).filter((e) => !e.category || e.category === t);
   }
+  /** Markers that apply to every row / column. */
+  get chartMarkers() {
+    return (this.markers ?? []).filter((t) => !t.category);
+  }
+  /** Markers pinned to one category — they ride that row / column, not the chart. */
+  categoryMarkers(t) {
+    return (this.markers ?? []).filter((e) => e.category === t);
+  }
+  /** What a marker reads as: its own label, else its formatted value. */
+  markerText(t) {
+    return t.label ? `${t.label} ${this.fmt(t.value)}` : this.fmt(t.value);
+  }
+  /**
+   * Marker lines, positioned along the value axis. The label is drawn separately
+   * (`markerLabels`) as real text — a `title` attribute alone never reaches AT.
+   */
   markerOverlay(t, e) {
     return this.markersFor(e).map(
-      (i) => n`<span
+      (i) => l`<span
         class="baht-bar-chart-marker"
         style=${`left:${Math.min(100, i.value / t * 100).toFixed(2)}%`}
-        title=${i.label ?? this.fmt(i.value)}
         aria-hidden="true"
       ></span>`
     );
   }
+  /**
+   * Marker labels, sorted along the axis and thinned so neighbours never collide:
+   * a dropped label keeps its line, and its value still reads in the table twin.
+   * Thinning is scoped to the list it is given — chart-wide markers compete with
+   * each other, a row's own markers only with that row's.
+   */
+  place(t, e) {
+    const i = [], a = [...t].sort((s, r) => s.value - r.value);
+    for (const s of a) {
+      const r = Math.min(100, Math.max(0, s.value / e * 100)), o = i[i.length - 1];
+      o && r - o.pct < 12 || i.push({ m: s, pct: r });
+    }
+    return i;
+  }
+  /** Chart-wide marker labels — the strip above the rows / the end of the line. */
+  placedMarkers(t) {
+    return this.place(this.chartMarkers, t);
+  }
+  /** A row's own marker labels, drawn beside their line inside that row. */
+  rowMarkerLabels(t, e) {
+    return this.place(this.categoryMarkers(t), e).map(
+      ({ m: i, pct: a }) => l`<span
+        class="baht-bar-chart-marker-label baht-bar-chart-marker-label--row"
+        style=${`left:${a.toFixed(2)}%;transform:translateX(${a > 70 ? "calc(-100% - 4px)" : "4px"})`}
+        >${this.markerText(i)}</span
+      >`
+    );
+  }
+  /** Legend rows: one per series, plus the muted `compare` key when it is set. */
+  legendEntries(t) {
+    const e = t.map((i, a) => ({
+      label: i.name || "Value",
+      color: ft(a, i.color)
+    }));
+    return (this.compare ?? []).length > 0 && e.push({ label: this.compareLabel, color: "var(--baht-chart-muted)" }), e;
+  }
   renderHorizontal(t) {
-    const { series: e, categories: i, legacy: a } = t, s = e.length > 1, r = Math.max(...e.map((p) => p.values.length)), o = this.domainMax(e, this.stacked, a), c = (this.compare ?? []).length > 0, f = (this.stacked ? 1 : e.length) + (c ? 1 : 0), g = Math.min(Qe, Math.max(6, Math.floor(48 / f))), _ = Array.from({ length: r }, (p, w) => {
-      const C = i[w] || "(empty)", d = e.reduce((P, q) => P + (q.values[w] ?? 0), 0), v = `${C}: ${e.map((P) => `${P.name ? `${P.name} ` : ""}${this.fmt(P.values[w] ?? 0)}`).join(", ")}${c ? `, previous ${this.fmt(this.compare[w] ?? 0)}` : ""}`, z = e.map((P, q) => ({
-        value: P.values[w] ?? 0,
-        color: this.colorFor(q, w, s),
-        name: P.name
+    const { series: e, categories: i, legacy: a } = t, s = e.length > 1, r = Math.max(...e.map((P) => P.values.length)), o = this.domainMax(e, this.stacked, a), c = (this.compare ?? []).length > 0, f = (this.stacked ? 1 : e.length) + (c ? 1 : 0), $ = Math.min(Qe, Math.max(6, Math.floor(48 / f))), w = Array.from({ length: r }, (P, x) => {
+      const u = i[x] || "(empty)", v = e.reduce((C, S) => C + (S.values[x] ?? 0), 0), D = `${u}: ${e.map((C) => `${C.name ? `${C.name} ` : ""}${this.fmt(C.values[x] ?? 0)}`).join(", ")}${c ? `, previous ${this.fmt(this.compare[x] ?? 0)}` : ""}`, K = e.map((C, S) => ({
+        value: C.values[x] ?? 0,
+        color: this.colorFor(S, x, s),
+        name: C.name
       }));
-      return n`<div class="baht-bar-chart-row">
-        <span class="baht-bar-chart-label" title=${C}>${C}</span>
+      return l`<div class="baht-bar-chart-row">
+        <span class="baht-bar-chart-label" title=${u}>${u}</span>
         <div
           class="baht-bar-chart-track${this.stacked ? " baht-bar-chart-track--stacked" : ""}"
           tabindex="0"
           role="button"
-          aria-label=${v}
-          @pointermove=${(P) => this.showTip(P, v)}
+          aria-label=${D}
+          @pointermove=${(C) => this.showTip(C, D)}
           @pointerleave=${() => this.hideTip()}
-          @focus=${(P) => this.showTip(P, v)}
+          @focus=${(C) => this.showTip(C, D)}
           @blur=${() => this.hideTip()}
         >
-          ${this.markerOverlay(o, C)}
+          ${this.markerOverlay(o, u)}
+          ${this.rowMarkerLabels(u, o)}
           <div class="baht-bar-chart-bars">
-            ${this.stacked ? n`<div class="baht-bar-chart-stack" style=${`height:${g}px`}>
-                    ${z.map(
-        (P) => n`<div
+            ${this.stacked ? l`<div class="baht-bar-chart-stack" style=${`height:${$}px`}>
+                    ${K.map(
+        (C) => l`<div
                         class="baht-bar-chart-bar baht-bar-chart-bar--segment"
-                        style=${`width:${Math.max(0, P.value / o * 100)}%;background:${P.color}`}
+                        style=${`width:${Math.max(0, C.value / o * 100)}%;background:${C.color}`}
                       ></div>`
       )}
-                  </div>` : z.map(
-        (P) => n`<div
+                  </div>` : K.map(
+        (C) => l`<div
                       class="baht-bar-chart-bar"
-                      style=${`width:${Math.max(2, P.value / o * 100)}%;height:${g}px;background:${P.color}`}
+                      style=${`width:${Math.max(2, C.value / o * 100)}%;height:${$}px;background:${C.color}`}
                     ></div>`
       )}
-            ${c ? n`<div
+            ${c ? l`<div
                     class="baht-bar-chart-bar baht-bar-chart-bar--compare"
-                    style=${`width:${Math.max(2, (this.compare[w] ?? 0) / o * 100)}%;height:${Math.min(8, g)}px`}
+                    style=${`width:${Math.max(2, (this.compare[x] ?? 0) / o * 100)}%;height:${Math.min(8, $)}px`}
                   ></div>` : h}
           </div>
         </div>
-        ${this.labelValues === "ends" ? n`<span class="baht-bar-chart-count"
-                >${a ? e[0].values[w] ?? 0 : this.fmt(this.stacked ? d : e[0].values[w] ?? 0)}</span
+        ${this.labelValues === "ends" ? l`<span class="baht-bar-chart-count"
+                >${a ? e[0].values[x] ?? 0 : this.fmt(this.stacked ? v : e[0].values[x] ?? 0)}</span
               >` : h}
       </div>`;
-    });
-    return n`<div class=${this.rootClass("baht-bar-chart")}>
-      ${_}
+    }), p = this.placedMarkers(o);
+    return l`<div class=${this.rootClass("baht-bar-chart")}>
+      ${p.length > 0 ? l`<div class="baht-bar-chart-row baht-bar-chart-row--markers">
+              <span class="baht-bar-chart-label"></span>
+              <div class="baht-bar-chart-markbar">
+                ${p.map(
+      ({ m: P, pct: x }) => l`<span
+                    class="baht-bar-chart-marker-label"
+                    style=${`left:${x.toFixed(2)}%;transform:translateX(${x > 88 ? "-100%" : x < 12 ? "0" : "-50%"})`}
+                    >${this.markerText(P)}</span
+                  >`
+    )}
+              </div>
+              ${this.labelValues === "ends" ? l`<span class="baht-bar-chart-count"></span>` : h}
+            </div>` : h}
+      ${w}
       ${this.renderTooltip()}
-      ${this.renderLegend(e.map((p, w) => ({ label: p.name, color: nt(w, p.color) })))}
+      ${this.renderLegend(this.legendEntries(e))}
       ${this.tableTwin(e, i, r)}
     </div>`;
   }
   renderVertical(t) {
-    const { series: e, categories: i, legacy: a } = t, s = e.length > 1, r = Math.max(...e.map((d) => d.values.length)), o = this.domainMax(e, this.stacked, a), c = Be(o, 4), f = (this.compare ?? []).length > 0, g = (this.stacked ? 1 : e.length) + (f ? 1 : 0), _ = this.band > 0 ? (this.band - ts) / g : 48 / g, p = Math.min(Qe, Math.max(2, Math.floor(_))), w = this.band > 0 ? Math.max(1, Math.ceil(Ya / Math.max(1, this.band))) : Math.max(1, Math.ceil(r / 12)), C = this.label || `Column chart, ${r} categories. ${i.map((d, v) => `${d} ${this.fmt(e[0].values[v] ?? 0)}`).join(", ")}`;
-    return n`<div class=${this.rootClass("baht-bar-chart baht-bar-chart--vertical")}>
-      <div class="baht-bar-chart-plot" role="img" aria-label=${C}>
+    const { series: e, categories: i, legacy: a } = t, s = e.length > 1, r = Math.max(...e.map((v) => v.values.length)), o = this.domainMax(e, this.stacked, a), c = Be(o, 4), f = (this.compare ?? []).length > 0, $ = (this.stacked ? 1 : e.length) + (f ? 1 : 0), w = this.band > 0 ? (this.band - ts) / $ : 48 / $, p = Math.min(Qe, Math.max(2, Math.floor(w))), P = this.band > 0 ? Math.max(1, Math.ceil(Xa / Math.max(1, this.band))) : Math.max(1, Math.ceil(r / 12)), x = (this.markers ?? []).map(
+      (v) => `${this.markerText(v)}${v.category ? ` on ${v.category}` : ""}`
+    ), u = this.label || `Column chart, ${r} categories. ${i.map((v, D) => `${v} ${this.fmt(e[0].values[D] ?? 0)}`).join(", ")}${x.length ? `. Reference lines: ${x.join(", ")}` : ""}`;
+    return l`<div class=${this.rootClass("baht-bar-chart baht-bar-chart--vertical")}>
+      <div class="baht-bar-chart-plot" role="img" aria-label=${u}>
         <div class="baht-bar-chart-yaxis" aria-hidden="true">
-          ${[...c].reverse().map((d) => n`<span class="baht-chart-tick-text">${this.fmt(d)}</span>`)}
+          ${[...c].reverse().map((v) => l`<span class="baht-chart-tick-text">${this.fmt(v)}</span>`)}
         </div>
         <div class="baht-bar-chart-grid">
-          ${(this.markers ?? []).filter((d) => !d.category).map(
-      (d) => n`<span
-                class="baht-bar-chart-marker baht-bar-chart-marker--horizontal"
-                style=${`bottom:${Math.min(100, d.value / o * 100).toFixed(2)}%`}
-                title=${d.label ?? this.fmt(d.value)}
-                aria-hidden="true"
-              ></span>`
+          ${this.chartMarkers.map(
+      (v) => l`<span
+              class="baht-bar-chart-marker baht-bar-chart-marker--horizontal"
+              style=${`bottom:${Math.min(100, v.value / o * 100).toFixed(2)}%`}
+              aria-hidden="true"
+            ></span>`
+    )}
+          ${this.placedMarkers(o).map(
+      ({ m: v, pct: D }) => l`<span
+              class="baht-bar-chart-marker-label baht-bar-chart-marker-label--end"
+              style=${`bottom:${D.toFixed(2)}%`}
+              >${this.markerText(v)}</span
+            >`
     )}
-          ${[...c].reverse().map(() => n`<span class="baht-chart-grid-rule" aria-hidden="true"></span>`)}
+          ${[...c].reverse().map(() => l`<span class="baht-chart-grid-rule" aria-hidden="true"></span>`)}
           <div class="baht-bar-chart-columns">
-            ${Array.from({ length: r }, (d, v) => {
-      const z = i[v] || "(empty)", P = `${z}: ${e.map((q) => `${q.name ? `${q.name} ` : ""}${this.fmt(q.values[v] ?? 0)}`).join(", ")}`;
-      return n`<div
+            ${Array.from({ length: r }, (v, D) => {
+      const K = i[D] || "(empty)", C = `${K}: ${e.map((S) => `${S.name ? `${S.name} ` : ""}${this.fmt(S.values[D] ?? 0)}`).join(", ")}`;
+      return l`<div
                 class="baht-bar-chart-column"
                 style=${this.band > 0 ? `flex:0 0 auto;width:${this.band}px` : h}
                 tabindex="0"
                 role="button"
-                aria-label=${P}
-                @pointermove=${(q) => this.showTip(q, P)}
+                aria-label=${C}
+                @pointermove=${(S) => this.showTip(S, C)}
                 @pointerleave=${() => this.hideTip()}
-                @focus=${(q) => this.showTip(q, P)}
+                @focus=${(S) => this.showTip(S, C)}
                 @blur=${() => this.hideTip()}
               >
+                ${this.place(this.categoryMarkers(K), o).map(
+        ({ m: S, pct: d }) => l`<span
+                    class="baht-bar-chart-marker baht-bar-chart-marker--horizontal"
+                    style=${`bottom:${d.toFixed(2)}%`}
+                    aria-hidden="true"
+                  ></span>${this.band === 0 || this.band >= 40 ? l`<span
+                          class="baht-bar-chart-marker-label baht-bar-chart-marker-label--column"
+                          style=${`bottom:${d.toFixed(2)}%`}
+                          >${this.markerText(S)}</span
+                        >` : h}`
+      )}
                 <div class="baht-bar-chart-column-bars">
                   ${e.map(
-        (q, ve) => n`<div
+        (S, d) => l`<div
                       class="baht-bar-chart-col"
-                      style=${`height:${Math.max(1, (q.values[v] ?? 0) / o * 100)}%;width:${p}px;background:${this.colorFor(ve, v, s)}`}
+                      style=${`height:${Math.max(1, (S.values[D] ?? 0) / o * 100)}%;width:${p}px;background:${this.colorFor(d, D, s)}`}
                     ></div>`
       )}
-                  ${f ? n`<div
+                  ${f ? l`<div
                           class="baht-bar-chart-col baht-bar-chart-col--compare"
-                          style=${`height:${Math.max(1, (this.compare[v] ?? 0) / o * 100)}%;width:${Math.min(8, p)}px`}
+                          style=${`height:${Math.max(1, (this.compare[D] ?? 0) / o * 100)}%;width:${Math.min(8, p)}px`}
                         ></div>` : h}
                 </div>
-                ${v % w === 0 ? n`<span class="baht-bar-chart-xlabel">${z}</span>` : h}
+                ${D % P === 0 ? l`<span class="baht-bar-chart-xlabel">${K}</span>` : h}
               </div>`;
     })}
           </div>
         </div>
       </div>
       ${this.renderTooltip()}
-      ${this.renderLegend(e.map((d, v) => ({ label: d.name, color: nt(v, d.color) })))}
+      ${this.renderLegend(this.legendEntries(e))}
       ${this.tableTwin(e, i, r)}
     </div>`;
   }
 };
 V([
-  l({ attribute: !1 })
-], R.prototype, "groups", 2);
+  n({ attribute: !1 })
+], z.prototype, "groups", 2);
+V([
+  n({ attribute: !1 })
+], z.prototype, "series", 2);
 V([
-  l({ attribute: !1 })
-], R.prototype, "series", 2);
+  n({ attribute: !1 })
+], z.prototype, "categories", 2);
 V([
-  l({ attribute: !1 })
-], R.prototype, "categories", 2);
+  n()
+], z.prototype, "orientation", 2);
 V([
-  l()
-], R.prototype, "orientation", 2);
+  n({ type: Boolean })
+], z.prototype, "stacked", 2);
 V([
-  l({ type: Boolean })
-], R.prototype, "stacked", 2);
+  n({ attribute: !1 })
+], z.prototype, "compare", 2);
 V([
-  l({ attribute: !1 })
-], R.prototype, "compare", 2);
+  n({ attribute: "compare-label" })
+], z.prototype, "compareLabel", 2);
 V([
-  l({ attribute: !1 })
-], R.prototype, "markers", 2);
+  n({ attribute: !1 })
+], z.prototype, "markers", 2);
 V([
-  l({ attribute: "label-values" })
-], R.prototype, "labelValues", 2);
+  n({ attribute: "label-values" })
+], z.prototype, "labelValues", 2);
 V([
-  l({ type: Number })
-], R.prototype, "emphasis", 2);
+  n({ type: Number })
+], z.prototype, "emphasis", 2);
 V([
-  l()
-], R.prototype, "color", 2);
+  n()
+], z.prototype, "color", 2);
 V([
-  l()
-], R.prototype, "label", 2);
+  n()
+], z.prototype, "label", 2);
 V([
-  $()
-], R.prototype, "band", 2);
-R = V([
+  y()
+], z.prototype, "band", 2);
+z = V([
   b("baht-bar-chart")
-], R);
-var Xa = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, lt = (t, e, i, a) => {
+], z);
+var Ya = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, nt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Za(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
-  return a && s && Xa(e, i, s), s;
+  return a && s && Ya(e, i, s), s;
 };
-const es = 640, xe = 260, E = { top: 14, right: 72, bottom: 30, left: 60 };
-let Q = class extends tt {
+const es = 640, xe = 260, B = { top: 14, right: 72, bottom: 30, left: 60 };
+let et = class extends st {
   constructor() {
     super(...arguments), this.series = [], this.categories = [], this.area = !1, this.markers = [], this.forecast = 0, this.baseline = null, this.labelValues = "ends", this.label = "", this.crosshairAt = null;
   }
   get plot() {
-    return { w: es - E.left - E.right, h: xe - E.top - E.bottom };
+    return { w: es - B.left - B.right, h: xe - B.top - B.bottom };
   }
   render() {
     const t = this.hold({
-      series: (this.series ?? []).filter((u) => {
-        var x;
-        return u && ((x = u.values) == null ? void 0 : x.length);
+      series: (this.series ?? []).filter((d) => {
+        var _;
+        return d && ((_ = d.values) == null ? void 0 : _.length);
       }),
       categories: this.categories ?? []
     }), { series: e, categories: i } = t;
     if (e.length === 0)
-      return n`<div class=${this.rootClass("baht-line-chart")}>${this.renderEmpty()}</div>`;
-    const a = Math.max(...e.map((u) => u.values.length)), s = e.flatMap((u) => u.values).filter((u) => Number.isFinite(u)), r = Math.max(0, ...s, ...(this.markers ?? []).map((u) => u.value)), o = Be(r, 4), c = o[o.length - 1] ?? 1, { w: f, h: g } = this.plot, _ = le([0, Math.max(1, a - 1)], [E.left, E.left + f]), p = le([0, c], [E.top + g, E.top]), w = Math.max(0, a - 1 - Math.max(0, this.forecast)), C = (u, x, Z) => u.slice(x, Z + 1).map((st, at) => `${at === 0 ? "M" : "L"}${_(x + at).toFixed(2)},${p(st).toFixed(2)}`).join(" "), d = e.map((u, x) => ({
-      i: x,
-      name: u.name,
-      value: u.values[u.values.length - 1] ?? 0,
-      yPos: p(u.values[u.values.length - 1] ?? 0),
-      color: nt(x, u.color)
-    })), v = [...d].sort((u, x) => u.yPos - x.yPos), z = v.some((u, x) => x > 0 && u.yPos - v[x - 1].yPos < 15), P = this.labelValues === "ends" && !z, q = Math.max(1, Math.ceil(a / 8)), ve = this.label || `Line chart, ${e.length} series over ${a} points. ${e.map((u, x) => `${u.name}: ${this.fmt(d[x].value)} at the end`).join(". ")}`;
-    return n`<div class=${this.rootClass("baht-line-chart")}>
+      return l`<div class=${this.rootClass("baht-line-chart")}>${this.renderEmpty()}</div>`;
+    const a = Math.max(...e.map((d) => d.values.length)), s = e.flatMap((d) => d.values).filter((d) => Number.isFinite(d)), r = Math.max(0, ...s, ...(this.markers ?? []).map((d) => d.value)), o = Be(r, 4), c = o[o.length - 1] ?? 1, { w: f, h: $ } = this.plot, w = ne([0, Math.max(1, a - 1)], [B.left, B.left + f]), p = ne([0, c], [B.top + $, B.top]), P = Math.max(0, a - 1 - Math.max(0, this.forecast)), x = (d, _, tt) => d.slice(_, tt + 1).map((at, it) => `${it === 0 ? "M" : "L"}${w(_ + it).toFixed(2)},${p(at).toFixed(2)}`).join(" "), u = e.map((d, _) => ({
+      i: _,
+      name: d.name,
+      value: d.values[d.values.length - 1] ?? 0,
+      yPos: p(d.values[d.values.length - 1] ?? 0),
+      color: ft(_, d.color)
+    })), v = [...u].sort((d, _) => d.yPos - _.yPos), D = v.some((d, _) => _ > 0 && d.yPos - v[_ - 1].yPos < 15), K = this.labelValues === "ends" && !D, C = Math.max(1, Math.ceil(a / 8)), S = this.label || `Line chart, ${e.length} series over ${a} points. ${e.map((d, _) => `${d.name}: ${this.fmt(u[_].value)} at the end`).join(". ")}`;
+    return l`<div class=${this.rootClass("baht-line-chart")}>
       <svg
         class="baht-chart-svg"
         viewBox="0 0 ${es} ${xe}"
         preserveAspectRatio="xMidYMid meet"
         role="img"
-        aria-label=${ve}
+        aria-label=${S}
       >
         ${o.map(
-      (u) => A`
-            <line class="baht-chart-grid-line" x1=${E.left} x2=${E.left + f}
-              y1=${p(u).toFixed(2)} y2=${p(u).toFixed(2)}/>
-            <text class="baht-chart-tick" x=${E.left - 8} y=${(p(u) + 4).toFixed(2)}
-              text-anchor="end">${this.fmt(u)}</text>`
+      (d) => N`
+            <line class="baht-chart-grid-line" x1=${B.left} x2=${B.left + f}
+              y1=${p(d).toFixed(2)} y2=${p(d).toFixed(2)}/>
+            <text class="baht-chart-tick" x=${B.left - 8} y=${(p(d) + 4).toFixed(2)}
+              text-anchor="end">${this.fmt(d)}</text>`
     )}
         ${this.baseline != null ? [
-      A`<line class="baht-chart-baseline" x1=${E.left} x2=${E.left + f}
+      N`<line class="baht-chart-baseline" x1=${B.left} x2=${B.left + f}
               y1=${p(this.baseline).toFixed(2)} y2=${p(this.baseline).toFixed(2)}/>`
     ] : []}
         ${(this.markers ?? []).map(
-      (u) => A`
-            <line class="baht-chart-marker-line" x1=${E.left} x2=${E.left + f}
-              y1=${p(u.value).toFixed(2)} y2=${p(u.value).toFixed(2)}/>
-            <text class="baht-chart-marker-label" x=${E.left + f} y=${(p(u.value) - 5).toFixed(2)}
-              text-anchor="end">${u.label ?? this.fmt(u.value)}</text>`
+      (d) => N`
+            <line class="baht-chart-marker-line" x1=${B.left} x2=${B.left + f}
+              y1=${p(d.value).toFixed(2)} y2=${p(d.value).toFixed(2)}/>
+            <text class="baht-chart-marker-label" x=${B.left + f} y=${(p(d.value) - 5).toFixed(2)}
+              text-anchor="end">${d.label ?? this.fmt(d.value)}</text>`
     )}
-        ${this.area && e.length === 1 ? A`<path class="baht-chart-area" fill=${nt(0, e[0].color)}
-                d=${`${C(e[0].values, 0, a - 1)} L${_(a - 1).toFixed(2)},${p(0).toFixed(2)} L${_(0).toFixed(2)},${p(0).toFixed(2)} Z`}/>` : h}
-        ${e.map((u, x) => {
-      const Z = nt(x, u.color), st = [
-        A`<path class="baht-chart-line" d=${C(u.values, 0, w)} stroke=${Z} fill="none"/>`
+        ${this.area && e.length === 1 ? N`<path class="baht-chart-area" fill=${ft(0, e[0].color)}
+                d=${`${x(e[0].values, 0, a - 1)} L${w(a - 1).toFixed(2)},${p(0).toFixed(2)} L${w(0).toFixed(2)},${p(0).toFixed(2)} Z`}/>` : h}
+        ${e.map((d, _) => {
+      const tt = ft(_, d.color), at = [
+        N`<path class="baht-chart-line" d=${x(d.values, 0, P)} stroke=${tt} fill="none"/>`
       ];
-      return w < a - 1 && st.push(
-        A`<path class="baht-chart-line baht-chart-line--forecast" d=${C(u.values, w, a - 1)}
-                stroke=${Z} fill="none"/>`
-      ), st.push(
-        A`<circle class="baht-chart-end-dot" cx=${_(a - 1).toFixed(2)}
-              cy=${p(u.values[u.values.length - 1] ?? 0).toFixed(2)} r="4" fill=${Z}/>`
-      ), st;
+      return P < a - 1 && at.push(
+        N`<path class="baht-chart-line baht-chart-line--forecast" d=${x(d.values, P, a - 1)}
+                stroke=${tt} fill="none"/>`
+      ), at.push(
+        N`<circle class="baht-chart-end-dot" cx=${w(a - 1).toFixed(2)}
+              cy=${p(d.values[d.values.length - 1] ?? 0).toFixed(2)} r="4" fill=${tt}/>`
+      ), at;
     })}
-        ${P ? d.map(
-      (u) => A`
-                  <text class="baht-chart-end-label" x=${_(a - 1) + 10} y=${(u.yPos + 4).toFixed(2)}
-                    text-anchor="start">${this.fmt(u.value)}</text>`
+        ${K ? u.map(
+      (d) => N`
+                  <text class="baht-chart-end-label" x=${w(a - 1) + 10} y=${(d.yPos + 4).toFixed(2)}
+                    text-anchor="start">${this.fmt(d.value)}</text>`
     ) : h}
         ${i.map(
-      (u, x) => x % q === 0 ? A`<text class="baht-chart-tick" x=${_(x).toFixed(2)} y=${xe - 10} text-anchor="middle">${u}</text>` : h
+      (d, _) => _ % C === 0 ? N`<text class="baht-chart-tick" x=${w(_).toFixed(2)} y=${xe - 10} text-anchor="middle">${d}</text>` : h
     )}
-        ${Array.from({ length: a }, (u, x) => {
-      const Z = f / Math.max(1, a - 1), st = `${i[x] ?? `Point ${x + 1}`}: ${e.map((at) => `${at.name} ${this.fmt(at.values[x] ?? 0)}`).join(", ")}`;
-      return A`<rect class="baht-chart-hit" x=${(_(x) - Z / 2).toFixed(2)} y=${E.top}
-            width=${Math.max(24, Z).toFixed(2)} height=${g} tabindex="0" role="button"
-            aria-label=${st}
-            @pointermove=${(at) => this.onHover(at, x, st)}
+        ${Array.from({ length: a }, (d, _) => {
+      const tt = f / Math.max(1, a - 1), at = `${i[_] ?? `Point ${_ + 1}`}: ${e.map((it) => `${it.name} ${this.fmt(it.values[_] ?? 0)}`).join(", ")}`;
+      return N`<rect class="baht-chart-hit" x=${(w(_) - tt / 2).toFixed(2)} y=${B.top}
+            width=${Math.max(24, tt).toFixed(2)} height=${$} tabindex="0" role="button"
+            aria-label=${at}
+            @pointermove=${(it) => this.onHover(it, _, at)}
             @pointerleave=${() => this.onLeave()}
-            @focus=${(at) => this.onHover(at, x, st)}
+            @focus=${(it) => this.onHover(it, _, at)}
             @blur=${() => this.onLeave()}/>`;
     })}
-        ${this.crosshairAt != null ? A`<line class="baht-chart-crosshair" x1=${_(this.crosshairAt).toFixed(2)}
-                x2=${_(this.crosshairAt).toFixed(2)} y1=${E.top} y2=${E.top + g}/>` : h}
+        ${this.crosshairAt != null ? N`<line class="baht-chart-crosshair" x1=${w(this.crosshairAt).toFixed(2)}
+                x2=${w(this.crosshairAt).toFixed(2)} y1=${B.top} y2=${B.top + $}/>` : h}
       </svg>
       ${this.renderTooltip()}
       ${this.renderLegend(
-      e.map((u, x) => ({ label: u.name, color: nt(x, u.color) })),
+      e.map((d, _) => ({ label: d.name, color: ft(_, d.color) })),
       "line"
     )}
-      ${this.showTable ? be(
+      ${this.showTable ? fe(
       this.label || "Line chart data",
-      ["Point", ...e.map((u) => u.name)],
-      Array.from({ length: a }, (u, x) => [
-        i[x] ?? `Point ${x + 1}`,
-        ...e.map((Z) => this.fmt(Z.values[x] ?? 0))
+      ["Point", ...e.map((d) => d.name)],
+      Array.from({ length: a }, (d, _) => [
+        i[_] ?? `Point ${_ + 1}`,
+        ...e.map((tt) => this.fmt(tt.values[_] ?? 0))
       ])
     ) : h}
     </div>`;
@@ -3118,39 +3210,39 @@ let Q = class extends tt {
     this.crosshairAt = null, this.requestUpdate(), this.hideTip();
   }
 };
-lt([
-  l({ attribute: !1 })
-], Q.prototype, "series", 2);
-lt([
-  l({ attribute: !1 })
-], Q.prototype, "categories", 2);
-lt([
-  l({ type: Boolean })
-], Q.prototype, "area", 2);
-lt([
-  l({ attribute: !1 })
-], Q.prototype, "markers", 2);
-lt([
-  l({ type: Number })
-], Q.prototype, "forecast", 2);
-lt([
-  l({ type: Number })
-], Q.prototype, "baseline", 2);
-lt([
-  l({ attribute: "label-values" })
-], Q.prototype, "labelValues", 2);
-lt([
-  l()
-], Q.prototype, "label", 2);
-Q = lt([
+nt([
+  n({ attribute: !1 })
+], et.prototype, "series", 2);
+nt([
+  n({ attribute: !1 })
+], et.prototype, "categories", 2);
+nt([
+  n({ type: Boolean })
+], et.prototype, "area", 2);
+nt([
+  n({ attribute: !1 })
+], et.prototype, "markers", 2);
+nt([
+  n({ type: Number })
+], et.prototype, "forecast", 2);
+nt([
+  n({ type: Number })
+], et.prototype, "baseline", 2);
+nt([
+  n({ attribute: "label-values" })
+], et.prototype, "labelValues", 2);
+nt([
+  n()
+], et.prototype, "label", 2);
+et = nt([
   b("baht-line-chart")
-], Q);
-var Qa = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, wt = (t, e, i, a) => {
+], et);
+var Qa = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, xt = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ti(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && Qa(e, i, s), s;
 };
-const _e = 22, Nt = 24, ss = 34, ke = 18, ei = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const _e = 22, qt = 24, ss = 34, ke = 18, ei = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 function Pe(t) {
   const e = /^(\d{4})-(\d{2})-(\d{2})/.exec(t ?? "");
   return e ? new Date(Date.UTC(+e[1], +e[2] - 1, +e[3])) : null;
@@ -3158,7 +3250,7 @@ function Pe(t) {
 function Oe(t) {
   return t.toISOString().slice(0, 10);
 }
-let pt = class extends tt {
+let pt = class extends st {
   constructor() {
     super(...arguments), this.values = [], this.from = "", this.to = "", this.lessLabel = "Less", this.moreLabel = "More", this.label = "";
   }
@@ -3169,34 +3261,34 @@ let pt = class extends tt {
   render() {
     const t = this.hold({ values: this.values ?? [], range: this.range }), e = t.range;
     if (!e || t.values.length === 0)
-      return n`<div class=${this.rootClass("baht-heatmap")}>${this.renderEmpty()}</div>`;
-    const i = new Map(t.values.map((d) => [d.date.slice(0, 10), d.value])), a = [], s = new Date(e.start), r = (e.start.getUTCDay() + 6) % 7;
+      return l`<div class=${this.rootClass("baht-heatmap")}>${this.renderEmpty()}</div>`;
+    const i = new Map(t.values.map((u) => [u.date.slice(0, 10), u.value])), a = [], s = new Date(e.start), r = (e.start.getUTCDay() + 6) % 7;
     let o = 0;
     for (; +s <= +e.end; ) {
-      const d = Oe(s), v = (s.getUTCDay() + 6) % 7, z = Math.floor((r + o) / 7);
-      a.push({ iso: d, value: i.has(d) ? i.get(d) : null, col: z, row: v }), s.setUTCDate(s.getUTCDate() + 1), o += 1;
+      const u = Oe(s), v = (s.getUTCDay() + 6) % 7, D = Math.floor((r + o) / 7);
+      a.push({ iso: u, value: i.has(u) ? i.get(u) : null, col: D, row: v }), s.setUTCDate(s.getUTCDate() + 1), o += 1;
     }
-    const c = Math.max(1, ...a.map((d) => d.col + 1)), f = ss + c * Nt, g = ke + 7 * Nt + 4, _ = Math.max(1, ...a.map((d) => d.value ?? 0)), p = (d) => Math.min(4, Math.max(0, Math.ceil(d / _ * 5) - 1)), w = a.reduce((d, v) => d + (v.value ?? 0), 0), C = this.label || `Calendar heatmap, ${a.length} days from ${Oe(e.start)} to ${Oe(e.end)}, total ${this.fmt(w)}`;
-    return n`<div class=${this.rootClass("baht-heatmap")}>
+    const c = Math.max(1, ...a.map((u) => u.col + 1)), f = ss + c * qt, $ = ke + 7 * qt + 4, w = Math.max(1, ...a.map((u) => u.value ?? 0)), p = (u) => Math.min(4, Math.max(0, Math.ceil(u / w * 5) - 1)), P = a.reduce((u, v) => u + (v.value ?? 0), 0), x = this.label || `Calendar heatmap, ${a.length} days from ${Oe(e.start)} to ${Oe(e.end)}, total ${this.fmt(P)}`;
+    return l`<div class=${this.rootClass("baht-heatmap")}>
       <svg
         class="baht-chart-svg baht-heatmap-svg"
         width=${f}
-        height=${g}
-        viewBox="0 0 ${f} ${g}"
+        height=${$}
+        viewBox="0 0 ${f} ${$}"
         preserveAspectRatio="xMinYMin meet"
         role="img"
-        aria-label=${C}
+        aria-label=${x}
       >
         ${ei.map(
-      (d, v) => v % 2 === 0 ? A`<text class="baht-chart-tick" x="0" y=${ke + v * Nt + _e / 2 + 4}>${d}</text>` : h
+      (u, v) => v % 2 === 0 ? N`<text class="baht-chart-tick" x="0" y=${ke + v * qt + _e / 2 + 4}>${u}</text>` : h
     )}
-        ${a.map((d) => {
-      const v = d.value == null ? `${d.iso}: no activity` : `${d.iso}: ${this.fmt(d.value)}`, z = d.value == null || d.value <= 0 ? "var(--baht-chart-grid)" : Xe(p(d.value));
-      return A`<rect class="baht-heatmap-cell" x=${ss + d.col * Nt} y=${ke + d.row * Nt}
-            width=${_e} height=${_e} rx="3" fill=${z} tabindex="0" role="button" aria-label=${v}
-            @pointermove=${(P) => this.showTip(P, v)}
+        ${a.map((u) => {
+      const v = u.value == null ? `${u.iso}: no activity` : `${u.iso}: ${this.fmt(u.value)}`, D = u.value == null || u.value <= 0 ? "var(--baht-chart-grid)" : Ye(p(u.value));
+      return N`<rect class="baht-heatmap-cell" x=${ss + u.col * qt} y=${ke + u.row * qt}
+            width=${_e} height=${_e} rx="3" fill=${D} tabindex="0" role="button" aria-label=${v}
+            @pointermove=${(K) => this.showTip(K, v)}
             @pointerleave=${() => this.hideTip()}
-            @focus=${(P) => this.showTip(P, v)}
+            @focus=${(K) => this.showTip(K, v)}
             @blur=${() => this.hideTip()}/>`;
     })}
       </svg>
@@ -3204,73 +3296,79 @@ let pt = class extends tt {
       <div class="baht-heatmap-scale">
         <span class="baht-heatmap-scale-label">${this.lessLabel}</span>
         ${[0, 1, 2, 3, 4].map(
-      (d) => n`<span
+      (u) => l`<span
               class="baht-chart-swatch"
-              style=${`background:${Xe(d)}`}
+              style=${`background:${Ye(u)}`}
               aria-hidden="true"
             ></span>`
     )}
         <span class="baht-heatmap-scale-label">${this.moreLabel}</span>
       </div>
-      ${this.showTable ? be(
+      ${this.showTable ? fe(
       this.label || "Calendar heatmap data",
       ["Date", "Value"],
-      a.map((d) => [d.iso, d.value == null ? "—" : this.fmt(d.value)])
+      a.map((u) => [u.iso, u.value == null ? "—" : this.fmt(u.value)])
     ) : h}
     </div>`;
   }
 };
-wt([
-  l({ attribute: !1 })
+xt([
+  n({ attribute: !1 })
 ], pt.prototype, "values", 2);
-wt([
-  l()
+xt([
+  n()
 ], pt.prototype, "from", 2);
-wt([
-  l()
+xt([
+  n()
 ], pt.prototype, "to", 2);
-wt([
-  l({ attribute: "less-label" })
+xt([
+  n({ attribute: "less-label" })
 ], pt.prototype, "lessLabel", 2);
-wt([
-  l({ attribute: "more-label" })
+xt([
+  n({ attribute: "more-label" })
 ], pt.prototype, "moreLabel", 2);
-wt([
-  l()
+xt([
+  n()
 ], pt.prototype, "label", 2);
-pt = wt([
+pt = xt([
   b("baht-heatmap")
 ], pt);
-var si = Object.defineProperty, ai = Object.getOwnPropertyDescriptor, et = (t, e, i, a) => {
+var si = Object.defineProperty, ai = Object.getOwnPropertyDescriptor, Z = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ai(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && si(e, i, s), s;
 };
-let W = class extends y {
+let H = class extends g {
   constructor() {
-    super(...arguments), this.value = 0, this.max = 100, this.label = "", this.format = "number", this.currency = "THB", this.thresholds = { warning: 0.8, danger: 1 }, this.expected = null, this.overLabel = "Over budget", this.nearLabel = "Near limit";
+    super(...arguments), this.value = 0, this.max = 100, this.label = "", this.format = "number", this.currency = "THB", this.thresholds = { warning: 0.8, danger: 1 }, this.expected = null, this.overLabel = "Over budget", this.atLabel = "At budget", this.nearLabel = "Near limit";
   }
   get fraction() {
     const t = this.max || 1, e = this.value / t;
     return Number.isFinite(e) ? Math.max(0, e) : 0;
   }
-  /** `ok` | `warning` | `danger`, from the fraction and the thresholds. */
+  /**
+   * `ok` | `warning` | `danger`, from the fraction and the thresholds. `danger` is
+   * strictly **above** its threshold: spending exactly the budget is not
+   * overspending, so it reads as the warning tone with an "At budget" status.
+   * `warning` stays inclusive (`>=`).
+   */
   get severity() {
     const { warning: t, danger: e } = this.thresholds ?? { warning: 0.8, danger: 1 }, i = this.fraction;
-    return i >= e ? "danger" : i >= t ? "warning" : "ok";
+    return i > e ? "danger" : i >= t ? "warning" : "ok";
   }
   get statusText() {
-    const t = this.severity;
-    return t === "danger" ? this.overLabel : t === "warning" ? this.nearLabel : "";
+    const { danger: t } = this.thresholds ?? { danger: 1 }, e = this.severity;
+    return e === "danger" ? this.overLabel : e === "warning" ? this.fraction >= t ? this.atLabel : this.nearLabel : "";
   }
   render() {
-    const t = this.severity, e = Math.min(100, this.fraction * 100), i = (o) => qt(o, this.format, this.currency), a = this.expected != null && Number.isFinite(this.expected) && this.max ? Math.min(100, Math.max(0, this.expected / this.max * 100)) : null, s = `${i(this.value)} of ${i(this.max)}`, r = t === "danger" ? "!" : t === "warning" ? "△" : "";
-    return n`<div class="baht-meter baht-meter--${t}">
+    var c;
+    const t = this.severity, e = Math.min(100, this.fraction * 100), i = (f) => Rt(f, this.format, this.currency), a = this.expected != null && Number.isFinite(this.expected) && this.max ? Math.min(100, Math.max(0, this.expected / this.max * 100)) : null, s = `${i(this.value)} of ${i(this.max)}`, r = t === "warning" && this.fraction >= (((c = this.thresholds) == null ? void 0 : c.danger) ?? 1), o = t === "danger" ? "!" : r ? "=" : t === "warning" ? "△" : "";
+    return l`<div class="baht-meter baht-meter--${t}">
       <div class="baht-meter-head">
-        ${this.label ? n`<span class="baht-meter-label">${this.label}</span>` : h}
+        ${this.label ? l`<span class="baht-meter-label">${this.label}</span>` : h}
         <span class="baht-meter-value">${s}</span>
-        ${this.statusText ? n`<span class="baht-meter-status"
-                ><span class="baht-meter-icon" aria-hidden="true">${r}</span
+        ${this.statusText ? l`<span class="baht-meter-status"
+                ><span class="baht-meter-icon" aria-hidden="true">${o}</span
                 >${this.statusText}</span
               >` : h}
       </div>
@@ -3284,81 +3382,84 @@ let W = class extends y {
         aria-valuetext=${`${s}${this.statusText ? `, ${this.statusText}` : ""}`}
       >
         <div class="baht-meter-fill" style=${`width:${e.toFixed(2)}%`}></div>
-        ${a != null ? n`<span
+        ${a != null ? l`<span
                 class="baht-meter-expected"
                 style=${`left:${a.toFixed(2)}%`}
                 aria-hidden="true"
               ></span>` : h}
       </div>
-      ${a != null ? n`<div class="baht-meter-pace">Expected by now ${i(this.expected)}</div>` : h}
+      ${a != null ? l`<div class="baht-meter-pace">Expected by now ${i(this.expected)}</div>` : h}
     </div>`;
   }
 };
-et([
-  l({ type: Number })
-], W.prototype, "value", 2);
-et([
-  l({ type: Number })
-], W.prototype, "max", 2);
-et([
-  l()
-], W.prototype, "label", 2);
-et([
-  l()
-], W.prototype, "format", 2);
-et([
-  l()
-], W.prototype, "currency", 2);
-et([
-  l({ attribute: !1 })
-], W.prototype, "thresholds", 2);
-et([
-  l({ type: Number })
-], W.prototype, "expected", 2);
-et([
-  l({ attribute: "over-label" })
-], W.prototype, "overLabel", 2);
-et([
-  l({ attribute: "near-label" })
-], W.prototype, "nearLabel", 2);
-W = et([
+Z([
+  n({ type: Number })
+], H.prototype, "value", 2);
+Z([
+  n({ type: Number })
+], H.prototype, "max", 2);
+Z([
+  n()
+], H.prototype, "label", 2);
+Z([
+  n()
+], H.prototype, "format", 2);
+Z([
+  n()
+], H.prototype, "currency", 2);
+Z([
+  n({ attribute: !1 })
+], H.prototype, "thresholds", 2);
+Z([
+  n({ type: Number })
+], H.prototype, "expected", 2);
+Z([
+  n({ attribute: "over-label" })
+], H.prototype, "overLabel", 2);
+Z([
+  n({ attribute: "at-label" })
+], H.prototype, "atLabel", 2);
+Z([
+  n({ attribute: "near-label" })
+], H.prototype, "nearLabel", 2);
+H = Z([
   b("baht-meter")
-], W);
-var ii = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, fe = (t, e, i, a) => {
+], H);
+var ii = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, me = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? ri(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ii(e, i, s), s;
 };
-let Ht = class extends y {
+let Gt = class extends g {
   constructor() {
     super(...arguments), this.icon = "🗂️", this.message = "Nothing to display", this.hint = "";
   }
   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>`;
   }
 };
-fe([
-  l()
-], Ht.prototype, "icon", 2);
-fe([
-  l()
-], Ht.prototype, "message", 2);
-fe([
-  l()
-], Ht.prototype, "hint", 2);
-Ht = fe([
+me([
+  n()
+], Gt.prototype, "icon", 2);
+me([
+  n()
+], Gt.prototype, "message", 2);
+me([
+  n()
+], Gt.prototype, "hint", 2);
+Gt = me([
   b("baht-empty-state")
-], Ht);
-var oi = Object.defineProperty, li = Object.getOwnPropertyDescriptor, Qt = (t, e, i, a) => {
+], Gt);
+var oi = Object.defineProperty, li = Object.getOwnPropertyDescriptor, te = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? li(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && oi(e, i, s), s;
 };
-let Et = class extends y {
+let Bt = class extends g {
   constructor() {
     super(...arguments), this.icon = "⚠️", this.heading = "Something went wrong", this.message = "", this.retryLabel = "";
   }
@@ -3366,35 +3467,35 @@ let Et = class extends y {
     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>`;
   }
 };
-Qt([
-  l()
-], Et.prototype, "icon", 2);
-Qt([
-  l()
-], Et.prototype, "heading", 2);
-Qt([
-  l()
-], Et.prototype, "message", 2);
-Qt([
-  l({ attribute: "retry-label" })
-], Et.prototype, "retryLabel", 2);
-Et = Qt([
+te([
+  n()
+], Bt.prototype, "icon", 2);
+te([
+  n()
+], Bt.prototype, "heading", 2);
+te([
+  n()
+], Bt.prototype, "message", 2);
+te([
+  n({ attribute: "retry-label" })
+], Bt.prototype, "retryLabel", 2);
+Bt = te([
   b("baht-error-state")
-], Et);
-var ni = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, xt = (t, e, i, a) => {
+], Bt);
+var ni = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, _t = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? hi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ni(e, i, s), s;
 };
-let dt = class extends y {
+let dt = class extends g {
   constructor() {
     super(...arguments), this.value = {}, this.keyPlaceholder = "key", this.valuePlaceholder = "value", this.add_label = "Add row", this.disabled = !1, this.rows = [{ k: "", v: "" }], this.syncedJson = "";
   }
@@ -3425,9 +3526,9 @@ let dt = class extends y {
     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}
@@ -3451,7 +3552,7 @@ let dt = class extends y {
             aria-label="Remove row ${e + 1}"
             ?disabled=${this.disabled}
             @click=${() => this.commit(this.rows.filter((i, a) => a !== e))}
-          >${H("close")}</button>
+          >${W("close")}</button>
         </div>`
     )}
       <button
@@ -3459,37 +3560,37 @@ let dt = class extends y {
         class="baht-keyvalue-add"
         ?disabled=${this.disabled}
         @click=${this.addRow}
-      >${H("plus")}${this.add_label}</button>
+      >${W("plus")}${this.add_label}</button>
     </div>`;
   }
 };
-xt([
-  l({ attribute: !1 })
+_t([
+  n({ attribute: !1 })
 ], dt.prototype, "value", 2);
-xt([
-  l({ attribute: "key-placeholder" })
+_t([
+  n({ attribute: "key-placeholder" })
 ], dt.prototype, "keyPlaceholder", 2);
-xt([
-  l({ attribute: "value-placeholder" })
+_t([
+  n({ attribute: "value-placeholder" })
 ], dt.prototype, "valuePlaceholder", 2);
-xt([
-  l({ attribute: "add-label" })
+_t([
+  n({ attribute: "add-label" })
 ], dt.prototype, "add_label", 2);
-xt([
-  l({ type: Boolean })
+_t([
+  n({ type: Boolean })
 ], dt.prototype, "disabled", 2);
-xt([
-  $()
+_t([
+  y()
 ], dt.prototype, "rows", 2);
-dt = xt([
+dt = _t([
   b("baht-keyvalue-editor")
 ], dt);
-var ci = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, T = (t, e, i, a) => {
+var ci = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, L = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? pi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ci(e, i, s), s;
 };
-let j = class extends y {
+let j = class extends g {
   constructor() {
     super(...arguments), this.label = "Reference", this.value = "", this.display = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.href = "", this.lookupLabel = "Look up records", this.debounce = 200, this.fetcher = null, this.open = !1, this.term = "", this.options = [], this.loading = !1, this.activeIndex = -1, this.fetchSeq = 0, this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
@@ -3499,16 +3600,16 @@ let j = class extends y {
     return `baht-refpicker-list-${this.uid}`;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), clearTimeout(this.timer), S() && document.removeEventListener("mousedown", this.onDocMousedown);
+    super.disconnectedCallback(), clearTimeout(this.timer), T() && document.removeEventListener("mousedown", this.onDocMousedown);
   }
   openLookup() {
-    this.disabled || this.open || (this.open = !0, this.term = "", this.activeIndex = -1, S() && document.addEventListener("mousedown", this.onDocMousedown), this.search(""), this.updateComplete.then(() => {
+    this.disabled || this.open || (this.open = !0, this.term = "", this.activeIndex = -1, T() && document.addEventListener("mousedown", this.onDocMousedown), this.search(""), this.updateComplete.then(() => {
       var t;
       return (t = this.inputEl) == null ? void 0 : t.focus();
     }));
   }
   close() {
-    this.open && (this.open = !1, this.loading = !1, clearTimeout(this.timer), S() && document.removeEventListener("mousedown", this.onDocMousedown));
+    this.open && (this.open = !1, this.loading = !1, clearTimeout(this.timer), T() && document.removeEventListener("mousedown", this.onDocMousedown));
   }
   search(t) {
     clearTimeout(this.timer), this.timer = setTimeout(async () => {
@@ -3557,7 +3658,7 @@ let j = class extends y {
   }
   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"
@@ -3577,13 +3678,13 @@ let j = class extends y {
           @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"
               @mousedown=${(e) => e.preventDefault()}
               @click=${() => this.clear()}
-            >${H("close")}</button>` : h}
+            >${W("close")}</button>` : h}
       </div>
       <button
         type="button"
@@ -3592,13 +3693,13 @@ let j = class extends y {
         title=${this.lookupLabel}
         ?disabled=${this.disabled}
         @click=${() => this.open ? this.close() : this.openLookup()}
-      >${H("search")}</button>
-      ${this.value && this.href ? n`<a
+      >${W("search")}</button>
+      ${this.value && this.href ? l`<a
             class="baht-refpicker-open"
             href=${this.href}
             aria-label="Open record"
             title="Open record"
-          >${H("external")}</a>` : h}
+          >${W("external")}</a>` : h}
       <div
         class="baht-refpicker-list"
         id=${this.listboxId}
@@ -3607,8 +3708,8 @@ let j = class extends y {
         aria-busy=${this.loading ? "true" : h}
         ?hidden=${!this.open}
       >
-        ${this.loading ? n`<div class="baht-refpicker-note" role="option" aria-disabled="true" aria-selected="false">Searching…</div>` : this.options.length === 0 ? n`<div class="baht-refpicker-note" role="option" aria-disabled="true" aria-selected="false">No matches</div>` : this.options.map(
-      (e, i) => n`<button
+        ${this.loading ? l`<div class="baht-refpicker-note" role="option" aria-disabled="true" aria-selected="false">Searching…</div>` : this.options.length === 0 ? l`<div class="baht-refpicker-note" role="option" aria-disabled="true" aria-selected="false">No matches</div>` : this.options.map(
+      (e, i) => l`<button
                   type="button"
                   class="baht-refpicker-option${i === this.activeIndex ? " baht-refpicker-option--active" : ""}"
                   id="${this.listboxId}-${i}"
@@ -3618,62 +3719,62 @@ let j = class extends y {
                   @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>
     </div>`;
   }
 };
-T([
-  l()
+L([
+  n()
 ], j.prototype, "label", 2);
-T([
-  l()
+L([
+  n()
 ], j.prototype, "value", 2);
-T([
-  l()
+L([
+  n()
 ], j.prototype, "display", 2);
-T([
-  l()
+L([
+  n()
 ], j.prototype, "placeholder", 2);
-T([
-  l({ type: Boolean })
+L([
+  n({ type: Boolean })
 ], j.prototype, "disabled", 2);
-T([
-  l({ type: Boolean })
+L([
+  n({ type: Boolean })
 ], j.prototype, "invalid", 2);
-T([
-  l()
+L([
+  n()
 ], j.prototype, "href", 2);
-T([
-  l({ attribute: "lookup-label" })
+L([
+  n({ attribute: "lookup-label" })
 ], j.prototype, "lookupLabel", 2);
-T([
-  l({ type: Number })
+L([
+  n({ type: Number })
 ], j.prototype, "debounce", 2);
-T([
-  l({ attribute: !1 })
+L([
+  n({ attribute: !1 })
 ], j.prototype, "fetcher", 2);
-T([
-  $()
+L([
+  y()
 ], j.prototype, "open", 2);
-T([
-  $()
+L([
+  y()
 ], j.prototype, "term", 2);
-T([
-  $()
+L([
+  y()
 ], j.prototype, "options", 2);
-T([
-  $()
+L([
+  y()
 ], j.prototype, "loading", 2);
-T([
-  $()
+L([
+  y()
 ], j.prototype, "activeIndex", 2);
-T([
-  Bt("input")
+L([
+  Mt("input")
 ], j.prototype, "inputEl", 2);
-j = T([
+j = L([
   b("baht-reference-picker")
 ], j);
 var di = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, I = (t, e, i, a) => {
@@ -3681,7 +3782,7 @@ var di = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, I = (t, e,
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && di(e, i, s), s;
 };
-let F = class extends y {
+let E = class extends g {
   constructor() {
     super(...arguments), this.label = "Search", this.value = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.options = [], this.fetcher = null, this.debounce = 150, this.minChars = 1, this.maxItems = 8, this.freeText = !0, this.autocomplete = "off", this.term = "", this.open = !1, this.results = [], this.loading = !1, this.activeIndex = -1, this.fetchSeq = 0, this.picked = null, this.lastPicked = null, this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
@@ -3697,7 +3798,7 @@ let F = class extends y {
     return `${this.listboxId}-${t}`;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), clearTimeout(this.timer), S() && document.removeEventListener("mousedown", this.onDocMousedown);
+    super.disconnectedCallback(), clearTimeout(this.timer), T() && document.removeEventListener("mousedown", this.onDocMousedown);
   }
   willUpdate(t) {
     super.willUpdate(t), t.has("value") && this.timer === void 0 && (this.term = this.value);
@@ -3744,10 +3845,10 @@ let F = class extends y {
     this.activeIndex !== t && (this.activeIndex = t);
   }
   listen() {
-    S() && document.addEventListener("mousedown", this.onDocMousedown);
+    T() && document.addEventListener("mousedown", this.onDocMousedown);
   }
   close() {
-    S() && document.removeEventListener("mousedown", this.onDocMousedown), this.open && (this.open = !1, this.activeIndex = -1);
+    T() && document.removeEventListener("mousedown", this.onDocMousedown), this.open && (this.open = !1, this.activeIndex = -1);
   }
   // ---- events ------------------------------------------------------------
   emitChange(t, e) {
@@ -3813,7 +3914,7 @@ let F = class extends y {
   }
   render() {
     const t = this.open, e = !this.loading && this.results.length === 0;
-    return n`<div class="baht-typeahead${this.open ? " baht-typeahead--open" : ""}">
+    return l`<div class="baht-typeahead${this.open ? " baht-typeahead--open" : ""}">
       <input
         class="baht-control baht-typeahead-input"
         id=${this.inputId}
@@ -3827,7 +3928,7 @@ let F = class extends y {
         aria-invalid=${this.invalid ? "true" : h}
         autocomplete=${this.autocomplete}
         placeholder=${this.placeholder || h}
-        .value=${ot(this.term)}
+        .value=${lt(this.term)}
         ?disabled=${this.disabled}
         @input=${(i) => this.onInput(i)}
         @keydown=${(i) => this.onKeydown(i)}
@@ -3841,9 +3942,9 @@ let F = class extends y {
         aria-busy=${this.loading ? "true" : h}
         ?hidden=${!t}
       >
-        ${this.loading ? n`<div class="baht-listbox-note" role="option" aria-disabled="true" aria-selected="false">Searching…</div>` : e ? n`<div class="baht-listbox-note" role="option" aria-disabled="true" aria-selected="false">No matches</div>` : this.results.map(
+        ${this.loading ? l`<div class="baht-listbox-note" role="option" aria-disabled="true" aria-selected="false">Searching…</div>` : e ? l`<div class="baht-listbox-note" role="option" aria-disabled="true" aria-selected="false">No matches</div>` : this.results.map(
       // eslint-disable-next-line lit-a11y/click-events-have-key-events -- keyboard lives on the combobox input (aria-activedescendant pattern)
-      (i, a) => n`<div
+      (i, a) => l`<div
                     class="baht-listbox-option${a === this.activeIndex ? " baht-listbox-option--active" : ""}"
                     id=${this.optionId(a)}
                     role="option"
@@ -3857,7 +3958,7 @@ let F = class extends y {
       }}
                   >
                     <span class="baht-listbox-option-label">${i.label}</span>
-                    ${i.sub ? n`<span class="baht-listbox-option-sub">${i.sub}</span>` : h}
+                    ${i.sub ? l`<span class="baht-listbox-option-sub">${i.sub}</span>` : h}
                   </div>`
     )}
       </div>
@@ -3865,62 +3966,62 @@ let F = class extends y {
   }
 };
 I([
-  l()
-], F.prototype, "label", 2);
+  n()
+], E.prototype, "label", 2);
 I([
-  l()
-], F.prototype, "value", 2);
+  n()
+], E.prototype, "value", 2);
 I([
-  l()
-], F.prototype, "placeholder", 2);
+  n()
+], E.prototype, "placeholder", 2);
 I([
-  l({ type: Boolean })
-], F.prototype, "disabled", 2);
+  n({ type: Boolean })
+], E.prototype, "disabled", 2);
 I([
-  l({ type: Boolean })
-], F.prototype, "invalid", 2);
+  n({ type: Boolean })
+], E.prototype, "invalid", 2);
 I([
-  l({ attribute: !1 })
-], F.prototype, "options", 2);
+  n({ attribute: !1 })
+], E.prototype, "options", 2);
 I([
-  l({ attribute: !1 })
-], F.prototype, "fetcher", 2);
+  n({ attribute: !1 })
+], E.prototype, "fetcher", 2);
 I([
-  l({ type: Number })
-], F.prototype, "debounce", 2);
+  n({ type: Number })
+], E.prototype, "debounce", 2);
 I([
-  l({ type: Number, attribute: "min-chars" })
-], F.prototype, "minChars", 2);
+  n({ type: Number, attribute: "min-chars" })
+], E.prototype, "minChars", 2);
 I([
-  l({ type: Number, attribute: "max-items" })
-], F.prototype, "maxItems", 2);
+  n({ type: Number, attribute: "max-items" })
+], E.prototype, "maxItems", 2);
 I([
-  l({ attribute: "free-text", converter: (t) => t !== "false" })
-], F.prototype, "freeText", 2);
+  n({ attribute: "free-text", converter: (t) => t !== "false" })
+], E.prototype, "freeText", 2);
 I([
-  l()
-], F.prototype, "autocomplete", 2);
+  n()
+], E.prototype, "autocomplete", 2);
 I([
-  $()
-], F.prototype, "term", 2);
+  y()
+], E.prototype, "term", 2);
 I([
-  $()
-], F.prototype, "open", 2);
+  y()
+], E.prototype, "open", 2);
 I([
-  $()
-], F.prototype, "results", 2);
+  y()
+], E.prototype, "results", 2);
 I([
-  $()
-], F.prototype, "loading", 2);
+  y()
+], E.prototype, "loading", 2);
 I([
-  $()
-], F.prototype, "activeIndex", 2);
+  y()
+], E.prototype, "activeIndex", 2);
 I([
-  Bt("input")
-], F.prototype, "inputEl", 2);
-F = I([
+  Mt("input")
+], E.prototype, "inputEl", 2);
+E = I([
   b("baht-typeahead")
-], F);
+], E);
 const cs = {
   text: "baht-input",
   email: "baht-input",
@@ -3953,7 +4054,7 @@ function vi(t) {
   let e = as.get(t);
   return e || (e = os(t), as.set(t, e)), e;
 }
-let Ie = class extends J {
+let Me = class extends X {
   constructor() {
     super(...arguments), this.rowErrors = [];
   }
@@ -3973,7 +4074,7 @@ let Ie = class extends J {
   addRow() {
     const t = {};
     for (const e of this.subFields)
-      e.type === "label" || e.type === "section" || (t[e.key] = se(e));
+      e.type === "label" || e.type === "section" || (t[e.key] = ae(e));
     this.emitInput([...this.rows, t]);
   }
   removeRow(t) {
@@ -3982,7 +4083,7 @@ let Ie = class extends J {
   /** Pending keystrokes in any row land in the array before the host reads it. */
   flushTyped() {
     var t;
-    if (!S()) return super.flushTyped();
+    if (!T()) return super.flushTyped();
     for (const e of this.querySelectorAll(".baht-repeater-row > .baht-field > *"))
       (t = e.flushTyped) == null || t.call(e);
     super.flushTyped();
@@ -4005,10 +4106,10 @@ let Ie = class extends J {
       const { value: f } = c.detail;
       this.patchRow(e, i.key, f);
     };
-    return n`<div class="baht-field ${r}" data-key=${i.key} data-type=${i.type}>
-      ${ee`<${s}
+    return l`<div class="baht-field ${r}" data-key=${i.key} data-type=${i.type}>
+      ${se`<${s}
         .field=${i}
-        .value=${Object.hasOwn(t, i.key) ? t[i.key] : se(i)}
+        .value=${Object.hasOwn(t, i.key) ? t[i.key] : ae(i)}
         .disabled=${this.disabled}
         .readonly=${this.readonly}
         .required=${!!i.required}
@@ -4020,7 +4121,7 @@ let Ie = class extends J {
   }
   renderControl() {
     const t = this.rows, e = !this.disabled && !this.readonly, i = this.field.max_rows !== void 0 && t.length >= this.field.max_rows;
-    return n`<div
+    return l`<div
       class="baht-repeater"
       id=${this.controlId}
       role="group"
@@ -4030,7 +4131,7 @@ let Ie = class extends J {
       ${Ce(
       t,
       (a, s) => s,
-      (a, s) => n`<div
+      (a, s) => l`<div
           class="baht-repeater-row"
           data-row=${s}
           role="group"
@@ -4041,7 +4142,7 @@ let Ie = class extends J {
         (r) => r.key,
         (r) => this.renderSub(a, s, r)
       )}
-          ${e ? n`<button
+          ${e ? l`<button
                 type="button"
                 class="baht-repeater-remove"
                 aria-label=${m("removeRowN", { n: s + 1 })}
@@ -4052,7 +4153,7 @@ let Ie = class extends J {
               </button>` : h}
         </div>`
     )}
-      ${this.readonly ? h : n`<button
+      ${this.readonly ? h : l`<button
             type="button"
             class="baht-repeater-add"
             ?disabled=${this.disabled || i}
@@ -4064,53 +4165,53 @@ let Ie = class extends J {
   }
 };
 ps([
-  l({ attribute: !1 })
-], Ie.prototype, "rowErrors", 2);
-Ie = ps([
+  n({ attribute: !1 })
+], Me.prototype, "rowErrors", 2);
+Me = ps([
   b("baht-repeater")
-], Ie);
-var $i = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, me = (t, e, i, a) => {
+], Me);
+var $i = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, ve = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? yi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && $i(e, i, s), s;
 };
-let Gt = class extends y {
+let Wt = class extends g {
   constructor() {
     super(...arguments), this.steps = [], this.current = 0, this.variant = "default";
   }
   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, i) => {
       const a = i < this.current ? "done" : i === this.current ? "current" : "todo";
-      return n`<li
+      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" aria-hidden="true">${a === "done" ? "✓" : i + 1}</span>`}
+          ${t ? h : l`<span class="baht-step-marker" aria-hidden="true">${a === "done" ? "✓" : i + 1}</span>`}
           <span class="baht-step-label">${e}</span>
-          ${a === "done" ? n`<span class="baht-visually-hidden"> (${m("stepDone")})</span>` : a === "current" ? n`<span class="baht-visually-hidden"> (${m("stepCurrent")})</span>` : h}
+          ${a === "done" ? l`<span class="baht-visually-hidden"> (${m("stepDone")})</span>` : a === "current" ? l`<span class="baht-visually-hidden"> (${m("stepCurrent")})</span>` : h}
         </li>`;
     })}
     </ol>`;
   }
 };
-me([
-  l({ attribute: !1 })
-], Gt.prototype, "steps", 2);
-me([
-  l({ type: Number })
-], Gt.prototype, "current", 2);
-me([
-  l()
-], Gt.prototype, "variant", 2);
-Gt = me([
+ve([
+  n({ attribute: !1 })
+], Wt.prototype, "steps", 2);
+ve([
+  n({ type: Number })
+], Wt.prototype, "current", 2);
+ve([
+  n()
+], Wt.prototype, "variant", 2);
+Wt = ve([
   b("baht-steps")
-], Gt);
-var gi = Object.defineProperty, wi = Object.getOwnPropertyDescriptor, X = (t, e, i, a) => {
+], Wt);
+var gi = Object.defineProperty, wi = Object.getOwnPropertyDescriptor, Q = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? wi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && gi(e, i, s), s;
@@ -4125,7 +4226,7 @@ function _i(t) {
   let e = is.get(t);
   return e || (e = os(t), is.set(t, e)), e;
 }
-let U = class extends y {
+let G = class extends g {
   constructor() {
     super(...arguments), this.value = {}, this.registry = {}, this.options = {}, this.fieldStates = {}, this.flags = {}, this.readonly = !1, this.edits = {}, this.errors = [], this.dynamicOptions = /* @__PURE__ */ new Map(), this.optionsSnapshots = /* @__PURE__ */ new Map(), this.optionsEpoch = /* @__PURE__ */ new Map(), this.warnedViews = /* @__PURE__ */ new Set(), this.flagCache = {};
   }
@@ -4178,7 +4279,7 @@ let U = class extends y {
     for (; e.length > 0; ) {
       const r = e.shift();
       for (const o of ((a = this.effectiveForm) == null ? void 0 : a.fields) ?? [])
-        !((s = o.options_deps) != null && s.includes(r)) || i.has(o.key) || (i.add(o.key), this.edits = { ...this.edits, [o.key]: se(o) }, e.push(o.key));
+        !((s = o.options_deps) != null && s.includes(r)) || i.has(o.key) || (i.add(o.key), this.edits = { ...this.edits, [o.key]: ae(o) }, e.push(o.key));
     }
   }
   get sortedFields() {
@@ -4196,13 +4297,13 @@ let U = class extends y {
     };
   }
   valueFor(t) {
-    return Object.hasOwn(this.edits, t.key) ? this.edits[t.key] : Object.hasOwn(this.value, t.key) ? this.value[t.key] : se(t);
+    return Object.hasOwn(this.edits, t.key) ? this.edits[t.key] : Object.hasOwn(this.value, t.key) ? this.value[t.key] : ae(t);
   }
   // ---- public API (spec 01 §6) ----
   /** Debounced keystrokes still in a control land in `edits` before anyone reads them. */
   flushTyped() {
     var t;
-    if (S())
+    if (T())
       for (const e of this.querySelectorAll(":scope > .baht-form > .baht-field > *"))
         (t = e.flushTyped) == null || t.call(e);
   }
@@ -4265,60 +4366,60 @@ let U = class extends y {
     this.errors = [...i, ...e];
   }
   renderField(t) {
-    var C, d;
+    var x, u;
     const e = cs[t.type];
     if (!e)
       return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), h;
-    const i = this.stateFor(t), a = xi[t.width ?? "full"] ?? "baht-field--w-full", s = ((C = this.errors.find((v) => v.key === t.key)) == null ? void 0 : C.message) ?? null;
+    const i = this.stateFor(t), a = xi[t.width ?? "full"] ?? "baht-field--w-full", s = ((x = this.errors.find((v) => v.key === t.key)) == null ? void 0 : x.message) ?? null;
     if (this.readonly && t.type !== "label" && t.type !== "section")
       return this.renderReadonlyField(t, a, i.visible);
-    const r = t.options_from ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, o = this.valueFor(t), c = !i.enabled, f = this.readonly || i.readonly, g = this.options.inputDebounce, _ = (v) => this.onControlInput(t.key, v), p = _i(e);
-    let w;
+    const r = t.options_from ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, o = this.valueFor(t), c = !i.enabled, f = this.readonly || i.readonly, $ = this.options.inputDebounce, w = (v) => this.onControlInput(t.key, v), p = _i(e);
+    let P;
     if (t.type === "repeater") {
-      const v = this.errors.filter((z) => z.key.startsWith(`${t.key}[`));
-      w = ee`<${p}
+      const v = this.errors.filter((D) => D.key.startsWith(`${t.key}[`));
+      P = se`<${p}
         .field=${r}
         .value=${o}
         .disabled=${c}
         .readonly=${f}
         .required=${i.required}
         .error=${s}
-        .debounce=${g}
+        .debounce=${$}
         .rowErrors=${v}
-        @baht-input=${_}
+        @baht-input=${w}
       ></${p}>`;
     } else if (t.type === "file") {
       let v;
-      t.uploader && (v = (d = this.registry.uploaders) == null ? void 0 : d[t.uploader], v || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`)), w = ee`<${p}
+      t.uploader && (v = (u = this.registry.uploaders) == null ? void 0 : u[t.uploader], v || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`)), P = se`<${p}
         .field=${r}
         .value=${o}
         .disabled=${c}
         .readonly=${f}
         .required=${i.required}
         .error=${s}
-        .debounce=${g}
+        .debounce=${$}
         .uploader=${v}
-        @baht-input=${_}
+        @baht-input=${w}
       ></${p}>`;
     } else
-      w = ee`<${p}
+      P = se`<${p}
         .field=${r}
         .value=${o}
         .disabled=${c}
         .readonly=${f}
         .required=${i.required}
         .error=${s}
-        .debounce=${g}
-        @baht-input=${_}
+        .debounce=${$}
+        @baht-input=${w}
       ></${p}>`;
-    return n`<div
+    return l`<div
       class="baht-field ${a} ${i.visible ? "" : "baht-field--hidden"}"
       data-key=${t.key}
       data-type=${t.type}
       data-testid="${this.form.form_id}.${t.key}"
       @focusout=${() => this.onFieldBlur(t)}
     >
-      ${w}
+      ${P}
     </div>`;
   }
   /**
@@ -4331,13 +4432,13 @@ let U = class extends y {
     i && this.onFieldInput(i, e);
   }
   renderReadonlyField(t, e, i) {
-    const a = t.options_from ? this.dynamicOptions.get(t.key) ?? t.options ?? [] : t.options, s = bs(t, this.valueFor(t), a), r = s.kind === "empty" ? n`<span class="baht-readonly-value baht-readonly-value--empty">${m("emptyValue")}</span>` : s.kind === "text" ? n`<span class="baht-readonly-value">${s.text}</span>` : s.kind === "chips" ? n`<span class="baht-readonly-value baht-readonly-chips"
-                >${s.items.map((o) => n`<span class="baht-readonly-chip">${o}</span>`)}</span
-              >` : n`<div class="baht-readonly-rows">
+    const a = t.options_from ? this.dynamicOptions.get(t.key) ?? t.options ?? [] : t.options, s = bs(t, this.valueFor(t), a), r = 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) => n`<div class="baht-readonly-row">
+      (o) => l`<div class="baht-readonly-row">
                     ${o.map(
-        (c) => n`<span class="baht-readonly-cell"
+        (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
                       >`
@@ -4345,18 +4446,18 @@ let U = class extends y {
                   </div>`
     )}
               </div>`;
-    return n`<div
+    return l`<div
       class="baht-field ${e} baht-field--readonly ${i ? "" : "baht-field--hidden"}"
       data-key=${t.key}
       data-type=${t.type}
       data-testid="${this.form.form_id}.${t.key}"
     >
-      ${t.label ? n`<span class="baht-label">${t.label}</span>` : h}
+      ${t.label ? l`<span class="baht-label">${t.label}</span>` : h}
       ${r}
     </div>`;
   }
   render() {
-    return n`<div class="baht-form ${this.readonly ? "baht-form--readonly" : ""}">
+    return l`<div class="baht-form ${this.readonly ? "baht-form--readonly" : ""}">
       ${Ce(
       this.sortedFields,
       (t) => t.key,
@@ -4365,45 +4466,45 @@ let U = class extends y {
     </div>`;
   }
 };
-X([
-  l({ attribute: !1 })
-], U.prototype, "form", 2);
-X([
-  l({ attribute: !1 })
-], U.prototype, "value", 2);
-X([
-  l({ attribute: !1 })
-], U.prototype, "registry", 2);
-X([
-  l({ attribute: !1 })
-], U.prototype, "options", 2);
-X([
-  l({ attribute: !1 })
-], U.prototype, "fieldStates", 2);
-X([
-  l({ type: String })
-], U.prototype, "view", 2);
-X([
-  l({ attribute: !1 })
-], U.prototype, "flags", 2);
-X([
-  l({ type: Boolean })
-], U.prototype, "readonly", 2);
-X([
-  $()
-], U.prototype, "edits", 2);
-X([
-  $()
-], U.prototype, "errors", 2);
-U = X([
+Q([
+  n({ attribute: !1 })
+], G.prototype, "form", 2);
+Q([
+  n({ attribute: !1 })
+], G.prototype, "value", 2);
+Q([
+  n({ attribute: !1 })
+], G.prototype, "registry", 2);
+Q([
+  n({ attribute: !1 })
+], G.prototype, "options", 2);
+Q([
+  n({ attribute: !1 })
+], G.prototype, "fieldStates", 2);
+Q([
+  n({ type: String })
+], G.prototype, "view", 2);
+Q([
+  n({ attribute: !1 })
+], G.prototype, "flags", 2);
+Q([
+  n({ type: Boolean })
+], G.prototype, "readonly", 2);
+Q([
+  y()
+], G.prototype, "edits", 2);
+Q([
+  y()
+], G.prototype, "errors", 2);
+G = Q([
   b("baht-form")
-], U);
-var ki = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, N = (t, e, i, a) => {
+], G);
+var ki = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, R = (t, e, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Pi(e, i) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
   return a && s && ki(e, i, s), s;
 };
-let M = class extends y {
+let A = class extends g {
   constructor() {
     super(...arguments), this.value = {}, this.registry = {}, this.validateGate = !0, this.showBack = !0, this.flags = {}, this.showSteps = !1, this.stepsVariant = "default", this.data = {}, this.derived = null, this.current = null, this.approvalError = null, this.history = [], this.flagCache = {};
   }
@@ -4538,7 +4639,7 @@ let M = class extends y {
     }
     this.emit("baht-reject", o);
     const c = i.on_reject ?? { action: "end" };
-    c.action === "goto" && this.visibleForms.some((g) => g.form_name === c.form) ? this.gotoForm(c.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
+    c.action === "goto" && this.visibleForms.some(($) => $.form_name === c.form) ? this.gotoForm(c.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
   }
   /** Jump back to a visible form, truncating the history to that point. */
   gotoForm(t) {
@@ -4585,10 +4686,10 @@ let M = class extends y {
   renderApproval(t) {
     var a, s;
     const e = ((a = t.approval) == null ? void 0 : a.comment) ?? "optional", i = this.summary_forms(t);
-    return n`<div class="baht-approval">
+    return l`<div class="baht-approval">
       <div class="baht-approval-summary">
-        ${i.length === 0 ? n`<p class="baht-approval-empty">${m("nothingToReview")}</p>` : i.map(
-      (r) => n`<section class="baht-approval-group">
+        ${i.length === 0 ? l`<p class="baht-approval-empty">${m("nothingToReview")}</p>` : i.map(
+      (r) => l`<section class="baht-approval-group">
                   <h4 class="baht-approval-group-title">${r.form_name}</h4>
                   <baht-form
                     readonly
@@ -4599,7 +4700,7 @@ let M = class extends y {
                 </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>
@@ -4611,15 +4712,15 @@ let M = class extends y {
               @input=${(r) => this.onCommentInput(t.form_name, r.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, r;
     const t = this.currentForm;
-    if (!t) return n`<div class="baht-workflow"></div>`;
+    if (!t) return l`<div class="baht-workflow"></div>`;
     const e = t.kind === "approval", i = this.visibleForms, a = i.findIndex((o) => o.form_name === t.form_name);
-    return n`<div
+    return l`<div
       class="baht-workflow"
       data-step=${t.form_name}
       data-testid="${this.workflow.workflow_id}.${t.form_name}"
@@ -4627,12 +4728,12 @@ let M = class extends y {
       <div class="baht-visually-hidden" role="status">
         ${m("step", { current: a + 1, total: i.length })}
       </div>
-      ${this.showSteps ? n`<baht-steps
+      ${this.showSteps ? l`<baht-steps
               .steps=${i.map((o) => o.form_name)}
               .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.form_name] ?? {}}
             .registry=${this.registry}
@@ -4641,13 +4742,13 @@ let M = class extends y {
             @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"
+        ${this.showBack && this.history.length > 0 ? l`<button type="button" class="baht-button baht-button--back"
               data-testid="${this.workflow.workflow_id}.back"
               @click=${() => this.back()}
             >
               ${this.backLabel ?? m("back")}
             </button>` : h}
-        ${e ? n`<button
+        ${e ? l`<button
                 type="button"
                 class="baht-button baht-button--reject"
                 data-testid="${this.workflow.workflow_id}.reject"
@@ -4662,7 +4763,7 @@ let M = class extends y {
                 @click=${() => this.decide("approved")}
               >
                 ${((r = t.approval) == null ? void 0 : r.approve_label) ?? m("approve")}
-              </button>` : n`<button type="button" class="baht-button baht-button--next"
+              </button>` : l`<button type="button" class="baht-button baht-button--next"
               data-testid="${this.workflow.workflow_id}.next"
               @click=${() => this.next()}
             >
@@ -4672,112 +4773,112 @@ let M = class extends y {
     </div>`;
   }
 };
-N([
-  l({ attribute: !1 })
-], M.prototype, "workflow", 2);
-N([
-  l({ attribute: !1 })
-], M.prototype, "value", 2);
-N([
-  l({ attribute: !1 })
-], M.prototype, "registry", 2);
-N([
-  l({ type: Boolean, attribute: "validate-gate" })
-], M.prototype, "validateGate", 2);
-N([
-  l({ attribute: "next-label" })
-], M.prototype, "nextLabel", 2);
-N([
-  l({ attribute: "submit-label" })
-], M.prototype, "submitLabel", 2);
-N([
-  l({ attribute: "back-label" })
-], M.prototype, "backLabel", 2);
-N([
-  l({ type: Boolean, attribute: "show-back" })
-], M.prototype, "showBack", 2);
-N([
-  l({ attribute: !1 })
-], M.prototype, "flags", 2);
-N([
-  l({ type: Boolean, attribute: "show-steps" })
-], M.prototype, "showSteps", 2);
-N([
-  l({ attribute: "steps-variant" })
-], M.prototype, "stepsVariant", 2);
-N([
-  $()
-], M.prototype, "data", 2);
-N([
-  $()
-], M.prototype, "derived", 2);
-N([
-  $()
-], M.prototype, "current", 2);
-N([
-  $()
-], M.prototype, "approvalError", 2);
-M = N([
+R([
+  n({ attribute: !1 })
+], A.prototype, "workflow", 2);
+R([
+  n({ attribute: !1 })
+], A.prototype, "value", 2);
+R([
+  n({ attribute: !1 })
+], A.prototype, "registry", 2);
+R([
+  n({ type: Boolean, attribute: "validate-gate" })
+], A.prototype, "validateGate", 2);
+R([
+  n({ attribute: "next-label" })
+], A.prototype, "nextLabel", 2);
+R([
+  n({ attribute: "submit-label" })
+], A.prototype, "submitLabel", 2);
+R([
+  n({ attribute: "back-label" })
+], A.prototype, "backLabel", 2);
+R([
+  n({ type: Boolean, attribute: "show-back" })
+], A.prototype, "showBack", 2);
+R([
+  n({ attribute: !1 })
+], A.prototype, "flags", 2);
+R([
+  n({ type: Boolean, attribute: "show-steps" })
+], A.prototype, "showSteps", 2);
+R([
+  n({ attribute: "steps-variant" })
+], A.prototype, "stepsVariant", 2);
+R([
+  y()
+], A.prototype, "data", 2);
+R([
+  y()
+], A.prototype, "derived", 2);
+R([
+  y()
+], A.prototype, "current", 2);
+R([
+  y()
+], A.prototype, "approvalError", 2);
+A = R([
   b("baht-workflow")
-], M);
+], A);
 export {
-  Xe as $,
+  Ye as $,
   ht as A,
-  Ct as B,
-  Pt as C,
+  Dt as B,
+  Ot as C,
   Ke as D,
-  rt as E,
-  mt as F,
+  ot as E,
+  vt as F,
   j as G,
-  Ie as H,
+  Me as H,
   Ee as I,
-  oe as J,
-  Vt as K,
+  le as J,
+  Kt as K,
   ct as L,
-  ie as M,
-  K as N,
-  Ut as O,
-  Gt as P,
+  re as M,
+  U as N,
+  Ht as O,
+  Wt as P,
   k as Q,
   Fe as R,
   qe as S,
   De as T,
   Ue as U,
-  kt as V,
-  F as W,
-  D as X,
-  M as Y,
+  Pt as V,
+  E as W,
+  F as X,
+  A as Y,
   cs as Z,
-  nt as _,
-  ft as a,
+  ft as _,
+  mt as a,
   qa as a0,
-  qt as a1,
-  le as a2,
+  Rt as a1,
+  ne as a2,
   Be as a3,
-  be as a4,
-  zt as b,
-  R as c,
-  re as d,
-  Ot as e,
-  tt as f,
+  fe as a4,
+  Vt as b,
+  z as c,
+  oe as d,
+  Ct as e,
+  st as f,
   Ve as g,
-  ae as h,
+  ie as h,
   He as i,
-  G as j,
-  Ht as k,
-  Et as l,
-  Kt as m,
-  Ft as n,
-  $t as o,
-  U as p,
+  J as j,
+  Gt as k,
+  Bt as l,
+  Ut as m,
+  Et as n,
+  yt as o,
+  G as p,
   pt as q,
   Ne as r,
   dt as s,
-  Q as t,
-  Dt as u,
-  it as v,
-  W as w,
+  et as t,
+  Ft as u,
+  rt as v,
+  H as w,
   ze as x,
   Re as y,
-  vt as z
+  $t as z
 };