bank20baht-ui 0.3.1 → 0.4.1

package/dist/chunks/baht-workflow-CkbvfwES.js

@@ -0,0 +1,4783 @@
+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 { 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 { 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 $s from "flatpickr";
+var ys = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, he = (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 {
+  constructor() {
+    super(...arguments), this.tone = "neutral", this.label = "", this.dot = null;
+  }
+  get showDot() {
+    return this.dot !== null ? this.dot : ["neutral", "success", "danger", "warning", "info"].includes(this.tone);
+  }
+  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}
+    </span>`;
+  }
+};
+he([
+  l()
+], zt.prototype, "tone", 2);
+he([
+  l()
+], zt.prototype, "label", 2);
+he([
+  l({ attribute: !1 })
+], zt.prototype, "dot", 2);
+zt = he([
+  b("baht-badge")
+], zt);
+var ws = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, je = (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 {
+  constructor() {
+    super(...arguments), this.variant = "inline", this.code = "";
+  }
+  firstUpdated() {
+    const t = this.renderRoot.querySelector(this.variant === "block" ? "pre" : "code");
+    t && ne(this, t);
+  }
+  render() {
+    return this.variant === "block" ? n`<pre class="baht-code baht-code--block" tabindex="0">${this.code}</pre>` : n`<code class="baht-code">${this.code}</code>`;
+  }
+};
+je([
+  l()
+], ae.prototype, "variant", 2);
+je([
+  l()
+], ae.prototype, "code", 2);
+ae = je([
+  b("baht-code")
+], ae);
+var _s = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, yt = (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 {
+  constructor() {
+    super(...arguments), this.page = 1, this.totalPages = 1, this.variant = "numbered", this.siblings = 1, this.hasNext = !1, this.hasPrev = !1;
+  }
+  go(t) {
+    const e = Math.min(Math.max(1, t), this.totalPages);
+    e !== this.page && this.dispatchEvent(
+      new CustomEvent("baht-page-change", {
+        detail: { page: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  goCursor(t) {
+    t === "next" && !this.hasNext || t === "prev" && !this.hasPrev || this.dispatchEvent(
+      new CustomEvent("baht-cursor-change", {
+        detail: { direction: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** Visible page numbers with `null` marking an ellipsis gap. */
+  get pageItems() {
+    const { page: t, totalPages: e, siblings: i } = this, a = /* @__PURE__ */ new Set([1, e]);
+    for (let c = t - i; c <= t + i; c++)
+      c >= 1 && c <= e && a.add(c);
+    const s = [...a].sort((c, f) => c - f), r = [];
+    let o = 0;
+    for (const c of s)
+      o && c - o === 2 ? r.push(o + 1) : o && c - o > 2 && r.push(null), r.push(c), o = c;
+    return r;
+  }
+  render() {
+    if (this.variant === "cursor")
+      return n`<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">
+      <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
+                  type="button"
+                  aria-current=${i === this.page ? "page" : h}
+                  aria-label="Page ${i}"
+                  @click=${() => this.go(i)}
+                >${i}</button>`
+    )}
+      <button type="button" aria-label="Next page" ?disabled=${e} @click=${() => this.go(this.page + 1)}><span aria-hidden="true">»</span></button>
+    </nav>`;
+  }
+};
+yt([
+  l({ type: Number })
+], ht.prototype, "page", 2);
+yt([
+  l({ type: Number, attribute: "total-pages" })
+], ht.prototype, "totalPages", 2);
+yt([
+  l()
+], ht.prototype, "variant", 2);
+yt([
+  l({ type: Number })
+], ht.prototype, "siblings", 2);
+yt([
+  l({ type: Boolean, attribute: "has-next" })
+], ht.prototype, "hasNext", 2);
+yt([
+  l({ type: Boolean, attribute: "has-prev" })
+], ht.prototype, "hasPrev", 2);
+ht = yt([
+  b("baht-pagination")
+], ht);
+var Ps = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, O = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Os(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 && 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 {
+  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);
+    };
+  }
+  get pickerTitleId() {
+    return `baht-table-picker-title-${this.uid}`;
+  }
+  pickerFocusables() {
+    const t = this.querySelector(".baht-table-picker-modal");
+    return t ? Array.from(
+      t.querySelectorAll(
+        'button:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ) : [];
+  }
+  /** Keep Tab cycling inside the column-picker dialog (no escape to the page behind). */
+  trapPickerFocus(t) {
+    const e = this.pickerFocusables();
+    if (e.length === 0) return;
+    const i = e[0], a = e[e.length - 1], s = document.activeElement, r = this.querySelector(".baht-table-picker-modal");
+    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);
+  }
+  willUpdate(t) {
+    t.has("visibleColumns") && !t.has("columns") && (this.pickedColumns = null);
+  }
+  // ---- column model ----------------------------------------------------
+  /** The declared map, or one derived from the first row (nested objects become reference columns). */
+  get spec() {
+    if (Object.keys(this.columns).length > 0) return this.columns;
+    const t = this.items[0];
+    if (!t) return {};
+    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);
+    return e;
+  }
+  /** Walk a dotted key through the spec; undefined when no such column exists. */
+  specAt(t) {
+    let e = this.spec, i;
+    for (const a of t.split(".")) {
+      const s = e == null ? void 0 : e[a];
+      if (s === void 0) return;
+      const r = typeof s == "string" ? { label: s } : s;
+      i = r, e = r.fields;
+    }
+    return i;
+  }
+  isReference(t) {
+    var e;
+    return (((e = this.specAt(t)) == null ? void 0 : e.fields) ?? void 0) !== void 0;
+  }
+  childrenOf(t) {
+    var e;
+    return Object.keys(((e = this.specAt(t)) == null ? void 0 : e.fields) ?? {}).map((i) => `${t}.${i}`);
+  }
+  /** Every pickable key, reference fields included (`requester`, `requester.name`, ...). */
+  allPaths(t = "") {
+    return (t ? this.childrenOf(t) : this.allColumnKeys).flatMap((i) => this.isReference(i) ? [i, ...this.allPaths(i)] : [i]);
+  }
+  get allColumnKeys() {
+    return Object.keys(this.spec);
+  }
+  get columnKeys() {
+    return (this.pickedColumns ?? (this.visibleColumns.length > 0 ? this.visibleColumns : this.allColumnKeys)).filter((e) => this.specAt(e) !== void 0);
+  }
+  /** "Requested by › Department" for a dotted key; the plain label otherwise. */
+  labelFor(t) {
+    const e = [];
+    let i = this.spec;
+    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;
+        continue;
+      }
+      e.push(typeof s == "string" ? s : s.label), i = typeof s == "string" ? void 0 : s.fields;
+    }
+    return e.join(Cs);
+  }
+  /** The row's value at a dotted key (`requester.department`). */
+  static valueAt(t, e) {
+    let i = t;
+    for (const a of e.split(".")) {
+      if (!ye(i)) return;
+      i = i[a];
+    }
+    return i;
+  }
+  // ---- 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(() => {
+      var t;
+      this.pickerOpen && ((t = this.pickerFocusables()[0]) == null || t.focus());
+    });
+  }
+  closePicker() {
+    var e;
+    if (!this.pickerOpen) return;
+    this.pickerOpen = !1, S() && document.removeEventListener("keydown", this.onPickerKeydown);
+    const t = this.pickerPreviousFocus;
+    this.pickerPreviousFocus = null, t != null && t.isConnected && ((e = t.focus) == null || e.call(t));
+  }
+  static selectedValues(t) {
+    return Array.from(t.target.selectedOptions).map((e) => e.value);
+  }
+  toggleAvail(t) {
+    this.pickAvail = this.pickAvail.includes(t) ? this.pickAvail.filter((e) => e !== t) : [...this.pickAvail, t];
+  }
+  toggleExpanded(t) {
+    this.expanded = this.expanded.includes(t) ? this.expanded.filter((e) => e !== t) : [...this.expanded, t];
+  }
+  addToSelected() {
+    this.draftColumns = [
+      ...this.draftColumns,
+      ...this.pickAvail.filter((t) => !this.draftColumns.includes(t))
+    ], this.pickAvail = [];
+  }
+  removeFromSelected() {
+    this.draftColumns = this.draftColumns.filter((t) => !this.pickSel.includes(t)), this.pickSel = [];
+  }
+  moveSelected(t) {
+    const e = [...this.draftColumns], i = this.pickSel.map((a) => e.indexOf(a)).filter((a) => a >= 0).sort((a, s) => t === -1 ? a - s : s - a);
+    for (const a of i) {
+      const s = a + t;
+      s < 0 || s >= e.length || ([e[a], e[s]] = [e[s], e[a]]);
+    }
+    this.draftColumns = e;
+  }
+  confirmPicker() {
+    this.pickedColumns = this.draftColumns, this.closePicker();
+    const t = {
+      visibleColumns: this.pickedColumns,
+      columns: this.pickedColumns.map((e) => ({ key: e, label: this.labelFor(e) }))
+    };
+    this.dispatchEvent(
+      new CustomEvent("baht-columns-change", { detail: t, bubbles: !0, composed: !0 })
+    );
+  }
+  emitRow(t, e) {
+    this.clickable && this.dispatchEvent(
+      new CustomEvent("baht-row-click", {
+        detail: { row: t, index: e, id: this.rowKey ? t[this.rowKey] : void 0 },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  cell(t, e) {
+    const i = this.renderers[e], a = k.valueAt(t, e);
+    if (i) return i(a, t);
+    if (ye(a)) {
+      const s = a.name ?? a.label ?? a.title ?? a.id;
+      return s == null ? "" : String(s);
+    }
+    return a == null ? "" : String(a);
+  }
+  renderBody(t) {
+    const e = t.length + (this.showIndex ? 1 : 0);
+    return this.loading ? n`${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>`)}
+        </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
+        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>`)}
+      </tr>`
+    )}`;
+  }
+  renderColumnToggle() {
+    return n`<div class="baht-table-picker">
+      <button
+        type="button"
+        class="baht-table-picker-toggle"
+        aria-haspopup="dialog"
+        aria-expanded=${this.pickerOpen ? "true" : "false"}
+        @click=${() => this.openPicker()}
+      >Columns</button>
+    </div>`;
+  }
+  /**
+   * One row of the Available tree. A reference column gets an expander that
+   * unfolds its fields (the dot-walk); every row is a toggle button so the
+   * list works from the keyboard without the native multi-select.
+   */
+  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}">
+      <div class="baht-table-picker-row">
+        ${a ? n`<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>`}
+        <button
+          type="button"
+          class="baht-table-picker-option"
+          data-key=${t}
+          ?disabled=${r}
+          aria-pressed=${this.pickAvail.includes(t) ? "true" : "false"}
+          @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">
+              ${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
+      class="baht-table-picker-scrim"
+      @click=${(a) => a.target === a.currentTarget && this.closePicker()}
+    >
+      <div class="baht-table-picker-modal" role="dialog" aria-modal="true" aria-labelledby=${this.pickerTitleId}>
+        <div class="baht-table-picker-modal-head">
+          <b id=${this.pickerTitleId}>Choose columns</b>
+          <button type="button" class="baht-table-picker-modal-close" aria-label="Close" @click=${() => this.closePicker()}>×</button>
+        </div>
+        <div class="baht-table-picker-grid">
+          <div>
+            <div class="baht-table-picker-collabel">Available (${e})</div>
+            <ul class="baht-table-picker-tree baht-table-picker-avail" aria-label="Available columns">
+              ${t.map((a) => this.renderAvailRow(a, 0))}
+            </ul>
+          </div>
+          <div class="baht-table-picker-btns">
+            <button type="button" ?disabled=${!this.pickAvail.length} @click=${() => this.addToSelected()}>› Add</button>
+            <button type="button" ?disabled=${!this.pickSel.length} @click=${() => this.removeFromSelected()}>‹ Remove</button>
+            <button type="button" ?disabled=${!this.pickSel.length} @click=${() => this.moveSelected(-1)}>↑ Up</button>
+            <button type="button" ?disabled=${!this.pickSel.length} @click=${() => this.moveSelected(1)}>↓ Down</button>
+          </div>
+          <div>
+            <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>`
+    )}
+            </select>
+          </div>
+        </div>
+        <div class="baht-table-picker-modal-foot">
+          <button type="button" @click=${() => this.draftColumns = []}>Clear all</button>
+          <button type="button" @click=${() => this.draftColumns = t.slice()}>Select all</button>
+          <span class="baht-table-picker-spacer"></span>
+          <button type="button" @click=${() => this.closePicker()}>Cancel</button>
+          <button type="button" class="baht-table-picker-ok" @click=${() => this.confirmPicker()}>OK</button>
+        </div>
+      </div>
+    </div>`;
+  }
+  render() {
+    const t = this.columnKeys;
+    return n`<div
+      class="baht-table-wrap"
+      tabindex=${this.clickable ? h : "0"}
+      aria-busy=${this.loading ? "true" : h}
+    >
+      ${this.columnPicker ? this.renderColumnToggle() : h}
+      ${this.columnPicker && this.pickerOpen ? this.renderColumnModal() : h}
+      <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>`)}
+          </tr>
+        </thead>
+        <tbody>${this.renderBody(t)}</tbody>
+      </table>
+      ${this.cursorMode ? n`<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">
+              <baht-pagination
+                variant="compact"
+                page=${this.page}
+                total-pages=${this.totalPages}
+              ></baht-pagination>
+            </div>` : h}
+    </div>`;
+  }
+};
+O([
+  l({ attribute: !1 })
+], k.prototype, "items", 2);
+O([
+  l({ attribute: !1 })
+], k.prototype, "columns", 2);
+O([
+  l({ type: Boolean })
+], k.prototype, "loading", 2);
+O([
+  l({ type: Boolean })
+], k.prototype, "error", 2);
+O([
+  l({ attribute: "error-message" })
+], k.prototype, "errorMessage", 2);
+O([
+  l({ attribute: "empty-message" })
+], k.prototype, "emptyMessage", 2);
+O([
+  l({ type: Boolean, attribute: "show-index" })
+], k.prototype, "showIndex", 2);
+O([
+  l({ type: Number, attribute: "index-offset" })
+], k.prototype, "indexOffset", 2);
+O([
+  l({ type: Number, attribute: "skeleton-rows" })
+], k.prototype, "skeletonRows", 2);
+O([
+  l({ attribute: "row-key" })
+], k.prototype, "rowKey", 2);
+O([
+  l({ type: Boolean })
+], k.prototype, "clickable", 2);
+O([
+  l({ attribute: !1 })
+], k.prototype, "renderers", 2);
+O([
+  l({ attribute: !1 })
+], k.prototype, "visibleColumns", 2);
+O([
+  l({ type: Boolean, attribute: "column-picker" })
+], k.prototype, "columnPicker", 2);
+O([
+  l({ type: Number })
+], k.prototype, "page", 2);
+O([
+  l({ type: Number, attribute: "total-pages" })
+], k.prototype, "totalPages", 2);
+O([
+  l({ type: Boolean, attribute: "cursor-mode" })
+], k.prototype, "cursorMode", 2);
+O([
+  l({ type: Boolean, attribute: "has-next" })
+], k.prototype, "hasNext", 2);
+O([
+  l({ type: Boolean, attribute: "has-prev" })
+], k.prototype, "hasPrev", 2);
+O([
+  $()
+], k.prototype, "pickerOpen", 2);
+O([
+  $()
+], k.prototype, "pickedColumns", 2);
+O([
+  $()
+], k.prototype, "draftColumns", 2);
+O([
+  $()
+], k.prototype, "pickAvail", 2);
+O([
+  $()
+], k.prototype, "pickSel", 2);
+O([
+  $()
+], k.prototype, "expanded", 2);
+k = O([
+  b("baht-table")
+], k);
+var Ds = Object.defineProperty, Fs = Object.getOwnPropertyDescriptor, ut = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Fs(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 && Ds(e, i, s), s;
+};
+let it = class extends y {
+  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;
+  }
+  emitItem(t, e) {
+    this.clickable && this.dispatchEvent(
+      new CustomEvent("baht-item-click", {
+        detail: { item: t, index: e, id: t.id },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  renderRows() {
+    return this.loading ? n`${Array.from(
+      { length: this.skeletonRows },
+      () => n`<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
+        class="baht-list-item"
+        role="listitem"
+        tabindex=${this.clickable ? "0" : h}
+        @click=${() => this.emitItem(t, e)}
+        @keydown=${(i) => {
+        i.key !== "Enter" && i.key !== " " || (i.preventDefault(), this.emitItem(t, e));
+      }}
+      >
+        <div class="baht-list-main">
+          <div class="baht-list-title">${t.title}</div>
+          ${t.subtitle ? n`<div class="baht-list-subtitle">${t.subtitle}</div>` : h}
+        </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}
+      </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>`;
+  }
+};
+ut([
+  l({ attribute: !1 })
+], it.prototype, "items", 2);
+ut([
+  l({ type: Boolean })
+], it.prototype, "loading", 2);
+ut([
+  l({ type: Boolean })
+], it.prototype, "error", 2);
+ut([
+  l({ attribute: "error-message" })
+], it.prototype, "errorMessage", 2);
+ut([
+  l({ attribute: "empty-message" })
+], it.prototype, "emptyMessage", 2);
+ut([
+  l({ type: Number, attribute: "skeleton-rows" })
+], it.prototype, "skeletonRows", 2);
+ut([
+  l({ type: Boolean })
+], it.prototype, "clickable", 2);
+it = ut([
+  b("baht-list")
+], it);
+var Es = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, Wt = (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 {
+  constructor() {
+    super(...arguments), this.text = "", this.position = "top", this.dismissed = !1;
+  }
+  get tooltipId() {
+    return `baht-tooltip-${this.uid}`;
+  }
+  /**
+   * Point aria-describedby at the tooltip from the focusable child (light DOM,
+   * so the id reference works). No focusable child -> the anchor itself becomes
+   * one, so keyboard users can still surface the tooltip.
+   */
+  wireDescribedBy() {
+    const t = this.anchorEl.querySelector(
+      "button, a[href], input, select, textarea, [tabindex]"
+    );
+    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);
+  }
+  onKeydown(t) {
+    t.key === "Escape" && (this.dismissed = !0);
+  }
+  rearm() {
+    this.dismissed = !1;
+  }
+  render() {
+    return n`<span
+      class="baht-tooltip-host${this.dismissed ? " baht-tooltip-host--dismissed" : ""}"
+      @keydown=${this.onKeydown}
+      @mouseleave=${this.rearm}
+      @focusout=${this.rearm}
+    >
+      <span class="baht-tooltip-anchor"></span>
+      <span class="baht-tooltip baht-tooltip--${this.position}" id=${this.tooltipId} role="tooltip">${this.text}</span>
+    </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([
+  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--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Is(e, i, s), s;
+};
+let ft = class extends y {
+  constructor() {
+    super(...arguments), this.tone = "info", this.heading = "", this.message = "", this.dismissible = !1, this.dismissed = !1, this.generation = 0;
+  }
+  willUpdate(t) {
+    (t.has("message") || t.has("heading")) && (this.dismissed = !1, this.generation++);
+  }
+  dismiss() {
+    this.dispatchEvent(new CustomEvent("baht-dismiss", { bubbles: !0, composed: !0 }));
+    const t = this.generation, e = () => {
+      t === this.generation && (this.dismissed = !0);
+    }, i = this.querySelector(".baht-alert");
+    if (!i) {
+      e();
+      return;
+    }
+    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">
+      <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}
+      </div>
+      ${this.dismissible ? n`<button type="button" class="baht-alert-dismiss" aria-label=${m("dismiss")} @click=${() => this.dismiss()}>×</button>` : h}
+    </div>`;
+  }
+};
+It([
+  l()
+], ft.prototype, "tone", 2);
+It([
+  l()
+], ft.prototype, "heading", 2);
+It([
+  l()
+], ft.prototype, "message", 2);
+It([
+  l({ type: Boolean })
+], ft.prototype, "dismissible", 2);
+It([
+  $()
+], ft.prototype, "dismissed", 2);
+ft = 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--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Ss(e, i, s), s;
+};
+let mt = class extends y {
+  constructor() {
+    super(...arguments), this.value = 0, this.max = 5, this.readonly = !1, this.label = "Rating", this.hover = 0;
+  }
+  emitValue(t) {
+    this.dispatchEvent(
+      new CustomEvent("baht-change", { detail: { value: t }, bubbles: !0, composed: !0 })
+    );
+  }
+  pick(t) {
+    this.readonly || this.emitValue(t === this.value ? 0 : t);
+  }
+  /** APG radio-group keys: arrows move the value, Home/End jump the ends. */
+  onKeydown(t, e) {
+    var a;
+    if (this.readonly) return;
+    let i;
+    if (t.key === "ArrowRight" || t.key === "ArrowUp") i = Math.min(e + 1, this.max);
+    else if (t.key === "ArrowLeft" || t.key === "ArrowDown") i = Math.max(e - 1, 1);
+    else if (t.key === "Home") i = 1;
+    else if (t.key === "End") i = this.max;
+    else return;
+    t.preventDefault(), this.emitValue(i), (a = this.querySelectorAll("button")[i - 1]) == null || a.focus();
+  }
+  setHover(t) {
+    this.readonly || (this.hover = t);
+  }
+  render() {
+    const t = this.hover || this.value;
+    return n`<div
+      class="baht-rating"
+      role="radiogroup"
+      aria-label=${this.label}
+      @mouseleave=${() => this.setHover(0)}
+    >
+      ${Array.from({ length: this.max }, (e, i) => {
+      const a = i + 1, s = this.value || 1;
+      return n`<button
+          type="button"
+          class=${a <= t ? "baht-rating--on" : ""}
+          role="radio"
+          aria-checked=${a === this.value}
+          aria-label="${a} of ${this.max}"
+          tabindex=${a === s ? "0" : "-1"}
+          ?disabled=${this.readonly}
+          @mouseenter=${() => this.setHover(a)}
+          @click=${() => this.pick(a)}
+          @keydown=${(r) => this.onKeydown(r, a)}
+        >★</button>`;
+    })}
+    </div>`;
+  }
+};
+jt([
+  l({ type: Number })
+], mt.prototype, "value", 2);
+jt([
+  l({ type: Number })
+], mt.prototype, "max", 2);
+jt([
+  l({ type: Boolean })
+], mt.prototype, "readonly", 2);
+jt([
+  l()
+], mt.prototype, "label", 2);
+jt([
+  $()
+], mt.prototype, "hover", 2);
+mt = jt([
+  b("baht-rating")
+], mt);
+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 {
+  constructor() {
+    super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.label = "", this.disabled = !1, this.showValue = !0;
+  }
+  get inputId() {
+    return `baht-range-${this.uid}`;
+  }
+  onInput(t) {
+    const e = Number(t.target.value);
+    this.dispatchEvent(
+      new CustomEvent("baht-change", { detail: { value: e }, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return n`<div class="baht-range">
+      ${this.label ? n`<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))}
+          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}
+      </div>
+    </div>`;
+  }
+};
+bt([
+  l({ type: Number })
+], rt.prototype, "value", 2);
+bt([
+  l({ type: Number })
+], rt.prototype, "min", 2);
+bt([
+  l({ type: Number })
+], rt.prototype, "max", 2);
+bt([
+  l({ type: Number })
+], rt.prototype, "step", 2);
+bt([
+  l()
+], rt.prototype, "label", 2);
+bt([
+  l({ type: Boolean })
+], rt.prototype, "disabled", 2);
+bt([
+  l({ type: Boolean, attribute: "show-value" })
+], rt.prototype, "showValue", 2);
+rt = bt([
+  b("baht-range")
+], rt);
+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 {
+  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;
+  }
+  inputs() {
+    return Array.from(this.querySelectorAll("input"));
+  }
+  clean(t) {
+    return this.mode === "numeric" ? t.replace(/\D/g, "") : t;
+  }
+  willUpdate(t) {
+    super.willUpdate(t);
+    const e = t.has("value") && this.value !== this._lastValue;
+    !this.hasUpdated || e ? (this._chars = Array.from({ length: this.length }, (i, a) => this.value[a] ?? ""), this._lastValue = this.value, this._wasFull = this._chars.length > 0 && this._chars.every((i) => i !== "")) : this._chars.length !== this.length && (this._chars = Array.from({ length: this.length }, (i, a) => this._chars[a] ?? ""));
+  }
+  /** Writes `text` into `_chars` starting at `start`. Returns the index just
+   *  past the last box written (may equal `this.length`). */
+  fill(t, e) {
+    let i = t;
+    for (const a of e) {
+      if (i >= this.length) break;
+      this._chars[i] = a, i += 1;
+    }
+    return i;
+  }
+  commit() {
+    const t = this._chars.join("").slice(0, this.length);
+    this.value = t, this._lastValue = t, this.requestUpdate(), this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+    const e = this._chars.length > 0 && this._chars.every((i) => i !== "");
+    e && !this._wasFull && this.dispatchEvent(
+      new CustomEvent("baht-otp-complete", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this._wasFull = e;
+  }
+  onInput(t, e) {
+    var r, o;
+    const i = e.target, a = this.clean(i.value);
+    if (a.length > 1) {
+      const c = this.fill(t, a);
+      i.value = this._chars[t] ?? "", this.commit(), (r = this.inputs()[Math.min(c, this.length - 1)]) == null || r.focus();
+      return;
+    }
+    const s = a.slice(-1);
+    i.value = s, this._chars[t] = s, this.commit(), s && t < this.length - 1 && ((o = this.inputs()[t + 1]) == null || o.focus());
+  }
+  onKeydown(t, e) {
+    var i;
+    e.key === "Backspace" && !this._chars[t] && t > 0 && (this._chars[t - 1] = "", this.commit(), (i = this.inputs()[t - 1]) == null || i.focus(), e.preventDefault());
+  }
+  onPaste(t) {
+    var a, s;
+    t.preventDefault();
+    const e = this.clean(((a = t.clipboardData) == null ? void 0 : a.getData("text")) ?? "").slice(0, this.length);
+    if (!e) return;
+    const i = this.fill(0, e);
+    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)}>
+      ${this._chars.map(
+      (t, e) => n`<input
+          type="text"
+          inputmode=${this.mode === "numeric" ? "numeric" : "text"}
+          maxlength="1"
+          autocomplete=${e === 0 ? "one-time-code" : "off"}
+          aria-label=${m("otpCharacter", { i: e + 1, n: this.length })}
+          .value=${t}
+          ?disabled=${this.disabled}
+          @input=${(i) => this.onInput(e, i)}
+          @keydown=${(i) => this.onKeydown(e, i)}
+        />`
+    )}
+    </div>`;
+  }
+};
+St([
+  l({ type: Number })
+], vt.prototype, "length", 2);
+St([
+  l()
+], vt.prototype, "value", 2);
+St([
+  l({ type: Boolean })
+], vt.prototype, "disabled", 2);
+St([
+  l()
+], vt.prototype, "mode", 2);
+St([
+  l()
+], vt.prototype, "label", 2);
+vt = St([
+  b("baht-otp")
+], vt);
+var qs = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, Mt = (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 {
+  constructor() {
+    super(...arguments), this.options = [], this.selected = [], this.multiple = !0, this.disabled = !1, this.label = "Filters";
+  }
+  toggle(t) {
+    const e = this.selected.includes(t);
+    let i;
+    this.multiple ? (i = e ? this.selected.filter((s) => s !== t) : [...this.selected, t], i = this.options.map((s) => s.key).filter((s) => i.includes(s))) : i = e ? [] : [t], this.dispatchEvent(
+      new CustomEvent("baht-change", { detail: { selected: i }, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return n`<div class="baht-filter" role="group" aria-label=${this.label}>
+      ${this.options.map(
+      (t) => n`<button
+          type="button"
+          aria-pressed=${this.selected.includes(t.key)}
+          ?disabled=${this.disabled}
+          @click=${() => this.toggle(t.key)}
+        >${t.label}</button>`
+    )}
+    </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([
+  b("baht-filter")
+], $t);
+var zs = Object.defineProperty, Vs = Object.getOwnPropertyDescriptor, ce = (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 {
+  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
+      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([
+  b("baht-skeleton")
+], Vt);
+var Ks = Object.defineProperty, Us = Object.getOwnPropertyDescriptor, Jt = (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 {
+  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>
+      <div
+        class="baht-progress${i}${t ? " baht-progress--indeterminate" : ""}"
+        role="progressbar"
+        aria-label=${this.label}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${t ? h : e}
+      >
+        <div class="baht-progress-bar" style=${t ? h : `width:${e}%`}></div>
+      </div>
+      ${this.showLabel && !t ? n`<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([
+  b("baht-progress")
+], Pt);
+var Hs = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, Se = (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 {
+  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>`;
+  }
+};
+Se([
+  l()
+], ie.prototype, "size", 2);
+Se([
+  l()
+], ie.prototype, "label", 2);
+ie = Se([
+  b("baht-spinner")
+], ie);
+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 {
+  constructor() {
+    super(...arguments), this.heading = "", this.subtitle = "", this.hero = !1;
+  }
+  firstUpdated() {
+    ne(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}
+      <div class="baht-card-body"></div>
+    </div>`;
+  }
+};
+Yt([
+  l()
+], Ot.prototype, "heading", 2);
+Yt([
+  l()
+], Ot.prototype, "subtitle", 2);
+Yt([
+  l({ type: Boolean })
+], Ot.prototype, "hero", 2);
+Yt([
+  Bt(".baht-card-body")
+], Ot.prototype, "bodyEl", 2);
+Ot = 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--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Ys(e, i, s), s;
+};
+let Kt = class extends y {
+  constructor() {
+    super(...arguments), this.legend = "", this.disabled = !1;
+  }
+  firstUpdated() {
+    ne(this, this.bodyEl);
+  }
+  render() {
+    return n`<fieldset class="baht-fieldset" ?disabled=${this.disabled}>
+      ${this.legend ? n`<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([
+  b("baht-fieldset")
+], Kt);
+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 {
+  constructor() {
+    super(...arguments), this.items = [];
+  }
+  render() {
+    return n`<div class="baht-timeline" role="list">
+      ${this.items.map(
+      (t, e) => n`<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}
+          </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}
+            </div>
+            ${t.description ? n`<div class="baht-timeline-desc">${t.description}</div>` : h}
+          </div>
+        </div>`
+    )}
+    </div>`;
+  }
+};
+ls([
+  l({ attribute: !1 })
+], De.prototype, "items", 2);
+De = ls([
+  b("baht-timeline")
+], De);
+var ta = Object.defineProperty, ea = Object.getOwnPropertyDescriptor, de = (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 {
+  constructor() {
+    super(...arguments), this.items = [], this.multiple = !1, this.openSet = /* @__PURE__ */ new Set(), this.itemsFingerprint = "";
+  }
+  static fingerprint(t) {
+    return JSON.stringify(t.map((e) => [e.title, e.content]));
+  }
+  willUpdate(t) {
+    if (t.has("items")) {
+      const e = Ct.fingerprint(this.items);
+      e !== this.itemsFingerprint && (this.itemsFingerprint = e, this.openSet = new Set(this.items.flatMap((i, a) => i.open ? [a] : [])));
+    }
+  }
+  toggle(t) {
+    const e = !this.openSet.has(t), i = this.multiple ? new Set(this.openSet) : /* @__PURE__ */ new Set();
+    e ? i.add(t) : i.delete(t), this.openSet = i, this.dispatchEvent(
+      new CustomEvent("baht-toggle", { detail: { index: t, open: e }, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return n`<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" : ""}">
+          <button
+            type="button"
+            class="baht-accordion-trigger"
+            id=${a}
+            aria-expanded=${i}
+            aria-controls=${i ? s : h}
+            @click=${() => this.toggle(e)}
+          >
+            <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}
+        </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([
+  b("baht-accordion")
+], Ct);
+var sa = Object.defineProperty, aa = Object.getOwnPropertyDescriptor, Xt = (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 {
+  constructor() {
+    super(...arguments), this.href = "", this.label = "", this.external = !1, this.externalHint = "opens in new tab";
+  }
+  render() {
+    return n`<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>`;
+  }
+};
+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([
+  b("baht-link")
+], Dt);
+var ia = Object.defineProperty, ra = Object.getOwnPropertyDescriptor, Me = (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 {
+  constructor() {
+    super(...arguments), this.items = [], this.separator = "›";
+  }
+  navigate(t, e) {
+    this.dispatchEvent(
+      new CustomEvent("baht-navigate", { detail: { item: t, index: e }, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    const t = this.items.length - 1;
+    return n`<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
+          class="baht-link"
+          href="#"
+          @click=${(s) => {
+        s.preventDefault(), this.navigate(e, i);
+      }}
+        >${e.label}</a>${a}`;
+    })}
+    </nav>`;
+  }
+};
+Me([
+  l({ attribute: !1 })
+], re.prototype, "items", 2);
+Me([
+  l()
+], re.prototype, "separator", 2);
+re = Me([
+  b("baht-breadcrumbs")
+], re);
+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 {
+  renderControl() {
+    return n`<input
+      class="baht-control baht-control--text"
+      id=${this.controlId}
+      type=${this.field.type === "email" ? "email" : this.field.type === "password" ? "password" : "text"}
+      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${L(this.field.placeholder)}
+      maxlength=${L(this.field.max_length)}
+      autocomplete=${L(this.field.autocomplete)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+      @input=${(t) => this.emitTyped(t.target.value)}
+    />`;
+  }
+};
+Ne = la([
+  b("baht-input")
+], Ne);
+var na = Object.getOwnPropertyDescriptor, ha = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? na(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let qe = class extends J {
+  renderControl() {
+    return n`<textarea
+      class="baht-control baht-control--textarea"
+      id=${this.controlId}
+      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${L(this.field.placeholder)}
+      maxlength=${L(this.field.max_length)}
+      rows=${this.field.rows ?? 3}
+      autocomplete=${L(this.field.autocomplete)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+      @input=${(t) => this.emitTyped(t.target.value)}
+    ></textarea>`;
+  }
+};
+qe = ha([
+  b("baht-textarea")
+], qe);
+var ca = Object.getOwnPropertyDescriptor, pa = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ca(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let Re = class extends J {
+  renderControl() {
+    return n`<input
+      class="baht-control baht-control--number"
+      id=${this.controlId}
+      type="number"
+      .value=${ot(this.shownValue == null ? "" : String(this.shownValue))}
+      placeholder=${L(this.field.placeholder)}
+      min=${L(this.field.min)}
+      max=${L(this.field.max)}
+      step=${L(this.field.step)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+      @input=${(t) => {
+      const e = t.target.value;
+      this.emitTyped(e === "" ? null : Number(e));
+    }}
+    />`;
+  }
+};
+Re = pa([
+  b("baht-number")
+], Re);
+var da = Object.defineProperty, ua = Object.getOwnPropertyDescriptor, Te = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ua(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 && da(e, i, s), s;
+};
+const ba = 500;
+let oe = class extends J {
+  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);
+  }
+  get listId() {
+    return `${this.controlId}-list`;
+  }
+  optionId(t) {
+    return `${this.listId}-${t}`;
+  }
+  /** Placeholder row first (picks `null`), then the field's options. */
+  get rows() {
+    return [
+      { key: "", label: this.field.placeholder ?? m("choose") },
+      ...this.field.options ?? []
+    ];
+  }
+  get currentKey() {
+    return this.value == null ? "" : String(this.value);
+  }
+  get selectedIndex() {
+    const t = this.rows.findIndex((e) => e.key === this.currentKey);
+    return t < 0 ? 0 : t;
+  }
+  get interactive() {
+    return !this.disabled && !this.readonly;
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this.field && t.has("value") && !this.open && (this.active = this.selectedIndex);
+  }
+  updated() {
+    var e;
+    if (!this.open) return;
+    const t = this.querySelector(`#${this.optionId(this.active)}`);
+    (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));
+  }
+  close() {
+    this.open && (this.open = !1, S() && document.removeEventListener("mousedown", this.onDocMousedown));
+  }
+  toggle() {
+    this.open ? this.close() : this.openList();
+  }
+  commit(t) {
+    const e = this.rows[t];
+    this.close(), e && this.emitInput(e.key === "" ? null : e.key);
+  }
+  highlight(t) {
+    this.active !== t && (this.active = t);
+  }
+  move(t) {
+    const e = this.rows.length - 1;
+    this.active = Math.min(e, Math.max(0, this.active + t));
+  }
+  /** Type-to-select: first option (after the highlighted one) starting with the buffer. */
+  typeahead(t) {
+    clearTimeout(this.typeTimer), this.typeBuffer += t.toLowerCase(), this.typeTimer = setTimeout(() => this.typeBuffer = "", ba);
+    const e = this.rows, i = this.typeBuffer.length === 1 ? this.active + 1 : this.active;
+    for (let a = 0; a < e.length; a++) {
+      const s = (i + a) % e.length;
+      if (s !== 0 && e[s].label.toLowerCase().startsWith(this.typeBuffer)) {
+        this.open ? this.active = s : this.commit(s);
+        return;
+      }
+    }
+  }
+  onKeydown(t) {
+    if (!this.interactive) return;
+    const { key: e } = t;
+    if (!this.open) {
+      e === "ArrowDown" || e === "ArrowUp" || e === "Enter" || e === " " ? (t.preventDefault(), this.openList()) : e === "Home" || e === "End" ? (t.preventDefault(), this.commit(e === "Home" ? Math.min(1, this.rows.length - 1) : this.rows.length - 1)) : e.length === 1 && !t.altKey && !t.ctrlKey && !t.metaKey && this.typeahead(e);
+      return;
+    }
+    switch (e) {
+      case "ArrowDown":
+        t.preventDefault(), this.move(1);
+        break;
+      case "ArrowUp":
+        t.preventDefault(), this.move(-1);
+        break;
+      case "Home":
+        t.preventDefault(), this.active = 0;
+        break;
+      case "End":
+        t.preventDefault(), this.active = this.rows.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        t.preventDefault(), this.commit(this.active);
+        break;
+      case "Escape":
+        t.preventDefault(), this.close();
+        break;
+      case "Tab":
+        this.commit(this.active);
+        break;
+      default:
+        e.length === 1 && !t.altKey && !t.ctrlKey && !t.metaKey && this.typeahead(e);
+    }
+  }
+  renderControl() {
+    const t = this.rows, e = this.selectedIndex, i = e === 0;
+    return n`<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" : ""}"
+        id=${this.controlId}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.listId}
+        aria-labelledby=${this.field.label ? this.labelId : h}
+        aria-activedescendant=${this.open ? this.optionId(this.active) : h}
+        aria-required=${this.required ? "true" : h}
+        aria-invalid=${this.invalid}
+        aria-describedby=${this.describedBy}
+        ?disabled=${this.disabled}
+        aria-readonly=${this.readonly && !this.disabled ? "true" : h}
+        @click=${() => this.toggle()}
+        @keydown=${(a) => this.onKeydown(a)}
+      >
+        <span class="baht-select-value">${t[e].label}</span>
+        <span class="baht-select-chevron" aria-hidden="true">▾</span>
+      </button>
+      <div
+        class="baht-listbox baht-select-list"
+        id=${this.listId}
+        role="listbox"
+        aria-labelledby=${this.field.label ? this.labelId : h}
+        ?hidden=${!this.open}
+      >
+        ${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
+            class="baht-listbox-option${s === this.active ? " baht-listbox-option--active" : ""}${s === 0 ? " baht-listbox-option--placeholder" : ""}"
+            id=${this.optionId(s)}
+            role="option"
+            aria-selected=${s === e ? "true" : "false"}
+            data-key=${a.key}
+            @mousedown=${(r) => r.preventDefault()}
+            @mousemove=${() => this.highlight(s)}
+            @click=${() => this.commit(s)}
+          >
+            ${a.label}
+          </div>`
+    )}
+      </div>
+    </div>`;
+  }
+};
+Te([
+  $()
+], oe.prototype, "open", 2);
+Te([
+  $()
+], oe.prototype, "active", 2);
+oe = Te([
+  b("baht-select")
+], oe);
+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 {
+  get selected() {
+    return Array.isArray(this.value) ? this.value : [];
+  }
+  toggle(t, e) {
+    const i = e ? [...this.selected, t] : this.selected.filter((s) => s !== t), a = (this.field.options ?? []).map((s) => s.key);
+    this.emitInput(a.filter((s) => i.includes(s)));
+  }
+  renderControl() {
+    return n`<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">
+          <input
+            type="checkbox"
+            value=${t.key}
+            .checked=${ot(this.selected.includes(t.key))}
+            ?disabled=${this.disabled || this.readonly}
+            @change=${(e) => this.toggle(t.key, e.target.checked)}
+          />
+          <span>${t.label}</span>
+        </label>`
+    )}
+    </div>`;
+  }
+};
+ze = ma([
+  b("baht-multiselect")
+], ze);
+var va = Object.getOwnPropertyDescriptor, $a = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? va(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let Ve = class extends J {
+  /** 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">
+      <input
+        type="checkbox"
+        id=${this.controlId}
+        .checked=${ot(this.value === !0)}
+        ?disabled=${this.disabled || this.readonly}
+        ?required=${this.required}
+        aria-invalid=${this.invalid}
+        aria-describedby=${this.describedBy}
+        @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
+      >
+    </label>`;
+  }
+};
+Ve = $a([
+  b("baht-checkbox")
+], Ve);
+var ya = Object.getOwnPropertyDescriptor, ga = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ya(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let Ke = class extends J {
+  renderControl() {
+    return n`<div
+      class="baht-control baht-control--radio"
+      role="radiogroup"
+      aria-labelledby=${this.field.label ? this.labelId : h}
+      aria-required=${this.required ? "true" : h}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+    >
+      ${(this.field.options ?? []).map(
+      (t) => n`<label class="baht-option">
+          <input
+            type="radio"
+            name=${this.controlId}
+            value=${t.key}
+            .checked=${ot(this.value === t.key)}
+            ?disabled=${this.disabled || this.readonly}
+            @change=${() => this.emitInput(t.key)}
+          />
+          <span>${t.label}</span>
+        </label>`
+    )}
+    </div>`;
+  }
+};
+Ke = ga([
+  b("baht-radio")
+], Ke);
+var wa = Object.getOwnPropertyDescriptor, xa = (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 = o(s) || s);
+  return s;
+};
+let Ue = class extends J {
+  renderLabel() {
+    return h;
+  }
+  renderControl() {
+    return n`<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)}
+        ?disabled=${this.disabled || this.readonly}
+        ?required=${this.required}
+        aria-invalid=${this.invalid}
+        aria-describedby=${this.describedBy}
+        @change=${(t) => this.emitInput(t.target.checked)}
+      />
+      <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
+      >
+    </label>`;
+  }
+};
+Ue = xa([
+  b("baht-toggle")
+], Ue);
+var _a = Object.getOwnPropertyDescriptor, ka = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? _a(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let He = class extends J {
+  constructor() {
+    super(...arguments), this.lastEmitted = null;
+  }
+  renderControl() {
+    return n`<input
+      class="baht-control baht-control--date"
+      id=${this.controlId}
+      type="text"
+      autocomplete="off"
+      placeholder=${L(this.field.placeholder)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+    />`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasUpdated && this.requestUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.teardown();
+  }
+  updated(t) {
+    const e = this.querySelector("input.baht-control--date");
+    if (!e) {
+      this.teardown();
+      return;
+    }
+    if (!this.fp || this.fp.input !== e || t.has("field") || t.has("disabled") || t.has("readonly")) {
+      this.teardown(), this.fp = $s(e, this.options());
+      return;
+    }
+    t.has("value") && (this.lastEmitted = null, this.syncValue());
+  }
+  teardown() {
+    var t;
+    (t = this.fp) == null || t.destroy(), this.fp = void 0, this.todayBtn = void 0, this.clearBtn = void 0;
+  }
+  /** Push the host-fed `value` into the calendar without echoing an event. */
+  syncValue() {
+    if (!this.fp) return;
+    const t = this.datesOf(this.value);
+    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);
+    return {
+      static: !0,
+      disableMobile: !0,
+      // our calendar everywhere — never the OS date wheel
+      mode: e,
+      dateFormat: t.date_format ?? "Y-m-d",
+      allowInput: !0,
+      clickOpens: !this.disabled && !this.readonly,
+      defaultDate: this.datesOf(this.value),
+      ...i ? { minDate: i } : {},
+      ...a ? { maxDate: a } : {},
+      disable: Je(t),
+      onReady: (s, r, o) => this.mountFooter(o),
+      onOpen: () => this.refreshFooter(),
+      onChange: (s) => {
+        this.refreshFooter(), !(e === "range" && s.length === 1) && this.emitIfChanged(s);
+      },
+      onClose: (s) => {
+        var r, o;
+        e === "range" && s.length === 1 && ((r = this.fp) == null || r.clear(!1)), this.emitIfChanged(((o = this.fp) == null ? void 0 : o.selectedDates) ?? []);
+      }
+    };
+  }
+  // ---- footer: Today / Clear ------------------------------------------
+  mountFooter(t) {
+    const e = document.createElement("div");
+    e.className = "baht-datepicker-footer";
+    const i = document.createElement("button");
+    i.type = "button", i.className = "baht-button baht-button--sm baht-datepicker-today", i.textContent = m("today"), i.addEventListener("click", () => this.pickToday());
+    const a = document.createElement("button");
+    a.type = "button", a.className = "baht-button baht-button--danger baht-button--sm baht-datepicker-clear", a.textContent = m("clear"), a.addEventListener("click", () => {
+      var s, r;
+      (s = this.fp) == null || s.clear(), (r = this.fp) == null || r.close();
+    }), e.append(i, a), t.calendarContainer.appendChild(e), this.todayBtn = i, this.clearBtn = a, this.refreshFooter(t);
+  }
+  /** Today greys out when the rules exclude it; Clear when there is nothing to clear.
+   *  `fp` is passed explicitly from onReady — it fires inside the flatpickr()
+   *  call, before `this.fp` is assigned. */
+  refreshFooter(t = this.fp) {
+    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;
+    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));
+        if (t >= s && t <= r) return !1;
+      }
+    return !0;
+  }
+  pickToday() {
+    const t = this.fp;
+    if (!t || !this.todayAllowed()) return;
+    const e = _t(/* @__PURE__ */ new Date());
+    switch ($e(this.field)) {
+      case "range":
+        t.setDate([e, e], !0);
+        break;
+      case "multiple": {
+        t.selectedDates.some((a) => Ge(a, e)) || t.setDate([...t.selectedDates, e], !0);
+        break;
+      }
+      default:
+        t.setDate(e, !0);
+    }
+    t.close();
+  }
+  emitIfChanged(t) {
+    const e = this.lastEmitted ?? this.datesOf(this.value);
+    We(t, e) || (this.lastEmitted = [...t], this.emitInput(this.toValue(t)));
+  }
+  /** Host value (any mode) -> the Date list flatpickr works with. */
+  datesOf(t) {
+    return ds(t).map(Lt).filter((e) => e !== null);
+  }
+  /** flatpickr's selection -> the value shape of the field's mode. */
+  toValue(t) {
+    const e = t.map(Rt);
+    switch ($e(this.field)) {
+      case "range":
+        return e.length === 2 ? [e[0], e[1]] : null;
+      case "multiple":
+        return e;
+      default:
+        return e[0] ?? null;
+    }
+  }
+};
+He = ka([
+  b("baht-datepicker")
+], He);
+function _t(t) {
+  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+}
+function Ge(t, e) {
+  return Rt(t) === Rt(e);
+}
+function We(t, e) {
+  return t.length !== e.length ? !1 : t.every((i, a) => Rt(i) === Rt(e[a]));
+}
+function Je(t) {
+  const e = [];
+  for (const a of t.disabled_dates ?? []) {
+    const s = us(a);
+    s && e.push(s[0].getTime() === s[1].getTime() ? s[0] : { from: s[0], to: s[1] });
+  }
+  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) => {
+  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) {
+  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 {
+  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] : [];
+  }
+  emitRefs(t) {
+    this.emitInput(this.field.multiple ? t : t[0] ?? null);
+  }
+  async uploadAll(t) {
+    if (!this.uploader) return;
+    this.uploadError = null, this.uploadingCount += t.length;
+    const e = this.field.multiple ? [...this.refs] : [];
+    for (const i of t)
+      try {
+        e.push(await this.uploader(i));
+      } catch {
+        this.uploadError = m("uploadFailed");
+      } finally {
+        this.uploadingCount -= 1;
+      }
+    this.emitRefs(e);
+  }
+  onPick(t) {
+    const e = t.target;
+    this.take(Array.from(e.files ?? []), e);
+  }
+  take(t, e) {
+    const i = this.field.max_size, a = i ? t.filter((r) => r.size <= i) : t, s = i ? t.filter((r) => r.size > i) : [];
+    if (this.rejectedNames = s.map((r) => r.name), this.uploader) {
+      e && (e.value = ""), this.uploadAll(a);
+      return;
+    }
+    this.emitInput(this.field.multiple ? a : a[0] ?? null);
+  }
+  get captured() {
+    return this.uploader ? [] : Array.isArray(this.value) ? this.value.filter((t) => t instanceof File) : this.value instanceof File ? [this.value] : [];
+  }
+  hintText() {
+    const t = [];
+    return this.field.accept && t.push(
+      this.field.accept.split(",").map((e) => e.trim()).join(", ")
+    ), this.field.max_size && t.push(m("uploadMaxSize", { size: ge(this.field.max_size) })), t.join(" · ");
+  }
+  renderControl() {
+    const t = this.disabled || this.readonly || this.uploadingCount > 0, e = this.hintText(), i = [
+      "baht-dropzone",
+      t ? "baht-dropzone--disabled" : "",
+      this.invalid === "true" ? "baht-dropzone--invalid" : ""
+    ].filter(Boolean).join(" ");
+    return n`<div
+        class=${i}
+        @dragover=${(a) => {
+      t || (a.preventDefault(), a.currentTarget.classList.add("baht-dropzone--over"));
+    }}
+        @dragleave=${(a) => a.currentTarget.classList.remove("baht-dropzone--over")}
+        @drop=${(a) => {
+      var s;
+      a.preventDefault(), a.currentTarget.classList.remove("baht-dropzone--over"), t || this.take(Array.from(((s = a.dataTransfer) == null ? void 0 : s.files) ?? []));
+    }}
+      >
+        <input
+          class="baht-control baht-control--file baht-dropzone-input"
+          id=${this.controlId}
+          type="file"
+          accept=${L(this.field.accept)}
+          ?multiple=${this.field.multiple}
+          ?disabled=${t}
+          ?required=${this.required}
+          aria-invalid=${this.invalid}
+          aria-describedby=${this.describedBy}
+          @change=${(a) => this.onPick(a)}
+        />
+        <span class="baht-dropzone-icon" aria-hidden="true">${H("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}
+      </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">
+              ${m("fileRejectedTooLarge", { names: this.rejectedNames.join(", ") })}
+            </p>` : h}
+      ${this.captured.map(
+      (a) => n`<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 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
+                type="button"
+                class="baht-file-remove"
+                aria-label=${m("removeFile")}
+                title=${m("removeFile")}
+                @click=${() => this.emitRefs(this.refs.filter((s) => s !== a))}
+              >
+                ${H("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([
+  b("baht-file")
+], Ft);
+var Ca = Object.defineProperty, Da = Object.getOwnPropertyDescriptor, B = (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;
+};
+function Fa(t, e) {
+  return e.split(".").reduce((i, a) => {
+    if (i !== null && typeof i == "object") return i[a];
+  }, t);
+}
+function Ea(t, e) {
+  const i = t.trim();
+  if (!i) return null;
+  try {
+    const a = JSON.parse(i);
+    if (typeof a == "string") return a;
+    const s = e ? Fa(a, e) : a;
+    return typeof s == "string" && s ? s : null;
+  } catch {
+    return /^(https?:\/\/|\/|data:|blob:)/.test(i) ? i : null;
+  }
+}
+function Ba(t) {
+  const i = (t.split(/[?#]/)[0] ?? t).split("/").filter(Boolean).pop() ?? t;
+  try {
+    return decodeURIComponent(i);
+  } catch {
+    return i;
+  }
+}
+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 {
+  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;
+  }
+  get urls() {
+    return Array.isArray(this.value) ? this.value.filter((t) => typeof t == "string" && t) : typeof this.value == "string" && this.value ? [this.value] : [];
+  }
+  get inputId() {
+    return `baht-upload-${this.uid}`;
+  }
+  fileFor(t) {
+    return this.known.get(t) ?? { name: Ba(t), size: 0, url: t };
+  }
+  /** Empty the value (does not delete anything on the server). */
+  clear() {
+    this.emitValue([]);
+  }
+  emitValue(t) {
+    const e = this.multiple ? t : t[0] ?? null;
+    this.value = e, this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { value: e, files: t.map((i) => this.fileFor(i)) },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  accept_(t) {
+    if (this.disabled || t.length === 0) return;
+    const e = this.maxSize, i = e ? t.filter((s) => s.size <= e) : t;
+    this.rejectedNames = e ? t.filter((s) => s.size > e).map((s) => s.name) : [];
+    const a = this.multiple ? i : i.slice(0, 1);
+    for (const s of a) this.start(s);
+  }
+  onPick(t) {
+    const e = t.target;
+    this.accept_(Array.from(e.files ?? [])), e.value = "";
+  }
+  onDragOver(t) {
+    this.disabled || (t.preventDefault(), this.dragging = !0);
+  }
+  onDragLeave() {
+    this.dragging = !1;
+  }
+  onDrop(t) {
+    var e;
+    t.preventDefault(), this.dragging = !1, this.accept_(Array.from(((e = t.dataTransfer) == null ? void 0 : e.files) ?? []));
+  }
+  start(t) {
+    const e = { id: ++this.seq, file: t, percent: 0, error: null };
+    this.pending = this.multiple ? [...this.pending, e] : [e], this.dispatchEvent(
+      new CustomEvent("baht-upload-start", { detail: { file: t }, bubbles: !0, composed: !0 })
+    ), this.send(e);
+  }
+  patch(t, e) {
+    this.pending = this.pending.map((i) => i.id === t ? { ...i, ...e } : i);
+  }
+  send(t) {
+    const e = new XMLHttpRequest();
+    e.open(this.method || "POST", this.url);
+    for (const [a, s] of Object.entries(this.headers ?? {})) e.setRequestHeader(a, s);
+    e.withCredentials = this.withCredentials, e.upload.onprogress = (a) => {
+      const s = a.total > 0 ? Math.round(a.loaded / a.total * 100) : 0;
+      this.patch(t.id, { percent: s }), this.dispatchEvent(
+        new CustomEvent("baht-upload-progress", {
+          detail: { file: t.file, loaded: a.loaded, total: a.total, percent: s },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, e.onload = () => {
+      const a = e.status >= 200 && e.status < 300, s = a ? Ea(e.responseText, this.responseKey) : null;
+      if (!a || !s) return this.failed(t, a ? 0 : e.status);
+      this.known.set(s, {
+        name: t.file.name,
+        size: t.file.size,
+        type: t.file.type || void 0,
+        url: s
+      }), this.pending = this.pending.filter((r) => r.id !== t.id), this.emitValue(this.multiple ? [...this.urls, s] : [s]);
+    }, e.onerror = () => this.failed(t, 0);
+    const i = new FormData();
+    i.append(this.fieldName || "file", t.file, t.file.name), e.send(i);
+  }
+  failed(t, e) {
+    const i = m("uploadFailed");
+    this.patch(t.id, { error: i, percent: 0 }), this.dispatchEvent(
+      new CustomEvent("baht-upload-error", {
+        detail: { file: t.file, status: e, message: i },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  retry(t) {
+    this.patch(t.id, { error: null, percent: 0 }), this.send({ ...t, error: null, percent: 0 });
+  }
+  dismiss(t) {
+    this.pending = this.pending.filter((e) => e.id !== t.id);
+  }
+  defaultHint() {
+    const t = [];
+    return this.accept && t.push(
+      this.accept.split(",").map((e) => e.trim()).join(", ")
+    ), this.maxSize && t.push(m("uploadMaxSize", { size: we(this.maxSize) })), t.join(" · ");
+  }
+  render() {
+    const t = this.pending.some((c) => !c.error), e = !!this.error, i = this.hint || this.defaultHint(), a = i ? `${this.inputId}-hint` : void 0, s = this.error ? `${this.inputId}-error` : void 0, r = [a, s].filter(Boolean).join(" ") || void 0, o = [
+      "baht-dropzone",
+      this.dragging ? "baht-dropzone--over" : "",
+      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
+            >` : h}
+      <div
+        class=${o}
+        @dragover=${this.onDragOver}
+        @dragleave=${this.onDragLeave}
+        @drop=${this.onDrop}
+      >
+        <input
+          class="baht-dropzone-input"
+          id=${this.inputId}
+          type="file"
+          accept=${L(this.accept)}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${e ? "true" : "false"}
+          aria-describedby=${L(r)}
+          @change=${(c) => this.onPick(c)}
+        />
+        <span class="baht-dropzone-icon" aria-hidden="true">${H("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}
+      </div>
+
+      ${this.pending.length > 0 || this.urls.length > 0 ? n`<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">
+              ${m("fileRejectedTooLarge", { names: this.rejectedNames.join(", ") })}
+            </p>` : h}
+      ${this.error ? n`<p class="baht-error" id=${L(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>
+      <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
+              type="button"
+              class="baht-file-remove"
+              aria-label=${m("removeFile")}
+              title=${m("removeFile")}
+              @click=${() => this.emitValue(this.urls.filter((i) => i !== t))}
+            >
+              ${H("close")}
+            </button>`}
+    </li>`;
+  }
+  renderPending(t) {
+    return n`<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>
+              <button type="button" class="baht-upload-retry" @click=${() => this.retry(t)}>
+                ${m("retry")}
+              </button>
+              <button
+                type="button"
+                class="baht-file-remove"
+                aria-label=${m("removeFile")}
+                title=${m("removeFile")}
+                @click=${() => this.dismiss(t)}
+              >
+                ${H("close")}
+              </button>` : n`<span
+              class="baht-upload-bar"
+              role="progressbar"
+              aria-label=${m("uploading")}
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow=${String(t.percent)}
+              ><span class="baht-upload-bar-fill" style="width:${t.percent}%"></span
+            ></span>`}
+    </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([
+  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--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Ia(e, i, s), s;
+};
+let Fe = class extends y {
+  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>`;
+  }
+};
+ns([
+  l({ 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--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Sa(e, i, s), s;
+};
+let Ee = class extends y {
+  render() {
+    return this.field ? n`<div class="baht-section">
+      <span class="baht-section-label">${this.field.text ?? this.field.label ?? ""}</span>
+    </div>` : h;
+  }
+};
+hs([
+  l({ attribute: !1 })
+], Ee.prototype, "field", 2);
+Ee = hs([
+  b("baht-section")
+], Ee);
+var Ta = Object.defineProperty, Aa = Object.getOwnPropertyDescriptor, ue = (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 {
+  constructor() {
+    super(...arguments), this.total = 0, this.label = "", this.color = "";
+  }
+  render() {
+    return n`<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}
+    </div>`;
+  }
+};
+ue([
+  l({ type: Number })
+], Ut.prototype, "total", 2);
+ue([
+  l()
+], Ut.prototype, "label", 2);
+ue([
+  l()
+], Ut.prototype, "color", 2);
+Ut = ue([
+  b("baht-stat-chart")
+], Ut);
+var La = Object.defineProperty, Tt = (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) {
+  return e && t === 0 ? e : `var(--baht-chart-${t % Na + 1})`;
+}
+function Xe(t, e = 5) {
+  return `var(--baht-chart-seq-${Math.min(e - 1, Math.max(0, t)) + 1})`;
+}
+function qt(t, e = "number", i = "THB") {
+  if (!Number.isFinite(t)) return "—";
+  switch (e) {
+    case "currency":
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: i || "THB",
+        currencyDisplay: "narrowSymbol",
+        maximumFractionDigits: 0
+      }).format(t).replace(/THB\s?/, "฿");
+    case "percent":
+      return new Intl.NumberFormat("en-US", {
+        style: "percent",
+        maximumFractionDigits: 1
+      }).format(t);
+    case "compact":
+      return new Intl.NumberFormat("en-US", {
+        notation: "compact",
+        maximumFractionDigits: 1
+      }).format(t);
+    default:
+      return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(t);
+  }
+}
+function Be(t, e = 4) {
+  if (!Number.isFinite(t) || t <= 0) return [0, 1];
+  const i = t / (Math.max(1, e) + 1), a = 10 ** Math.floor(Math.log10(i)), s = [1, 2, 2.5, 5, 10].map((c) => c * a).find((c) => c >= i - 1e-9) ?? 10 * a, r = Math.ceil(t / s) * s, o = [];
+  for (let c = 0; c <= r + s / 1e3; c += s) o.push(Number(c.toFixed(10)));
+  return o;
+}
+function le(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);
+}
+function qa(t, e, i = "Other") {
+  if (t.length <= e) return t;
+  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">
+    <summary>${a}</summary>
+    <table>
+      <caption>${t}</caption>
+      <thead>
+        <tr>
+          ${e.map((s) => n`<th scope="col">${s}</th>`)}
+        </tr>
+      </thead>
+      <tbody>
+        ${i.map(
+    (s) => n`<tr>
+            ${s.map(
+      (r, o) => o === 0 ? n`<th scope="row">${r}</th>` : n`<td class="baht-chart-num">${r}</td>`
+    )}
+          </tr>`
+  )}
+      </tbody>
+    </table>
+  </details>`;
+}
+class tt extends y {
+  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);
+  }
+  /**
+   * The snapshot to draw. While `loading` is set the previous one is returned,
+   * so a refetch dims the chart instead of emptying it.
+   */
+  hold(e) {
+    return this.loading ? this.held ?? e : (this.held = e, e);
+  }
+  /** Root class list: `baht-chart` plus the loading modifier. */
+  rootClass(e) {
+    return `baht-chart ${e}${this.loading ? " baht-chart--loading" : ""}`;
+  }
+  /** 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>`;
+  }
+  /**
+   * Show `text` near the pointer (or, on keyboard focus, near the mark).
+   * Content is assigned with `textContent`: category and series names are
+   * untrusted data (interaction.md).
+   */
+  showTip(e, i) {
+    var g;
+    const a = this.tipEl;
+    if (!a) return;
+    a.textContent = i, a.hidden = !1;
+    const s = this.querySelector(".baht-chart");
+    if (!s || typeof s.getBoundingClientRect != "function") return;
+    const r = s.getBoundingClientRect(), o = e;
+    let c, f;
+    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(_);
+      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`;
+  }
+  /** Hide the tooltip (pointerleave / blur). */
+  hideTip() {
+    const e = this.tipEl;
+    e && (e.hidden = !0, e.textContent = "");
+  }
+  /** The empty placeholder, or `nothing` when there is data. */
+  renderEmpty() {
+    return n`<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">
+      ${e.map(
+      (a) => n`<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}
+        </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) => {
+  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 {
+  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));
+    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
+      class="baht-sparkline"
+      width=${e}
+      height=${i}
+      viewBox="0 0 ${e} ${i}"
+      role="img"
+      aria-label=${w}
+    >
+      ${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"
+              fill="var(--baht-chart-1)"/>` : h}
+    </svg>`;
+  }
+};
+gt([
+  l({ type: Array })
+], ct.prototype, "values", 2);
+gt([
+  l({ type: Number })
+], ct.prototype, "width", 2);
+gt([
+  l({ type: Number })
+], ct.prototype, "height", 2);
+gt([
+  l({ type: Boolean, attribute: "accent-last" })
+], ct.prototype, "accentLast", 2);
+gt([
+  l()
+], ct.prototype, "color", 2);
+gt([
+  l()
+], ct.prototype, "label", 2);
+ct = gt([
+  b("baht-sparkline")
+], ct);
+var Va = Object.defineProperty, Ka = Object.getOwnPropertyDescriptor, Y = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ka(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Va(e, i, s), s;
+};
+let K = class extends y {
+  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";
+  }
+  /** Direction of the delta paired with whether up is good. */
+  get tone() {
+    const t = this.delta;
+    return t == null || !Number.isFinite(t) || t === 0 ? "flat" : t > 0 === this.upIsGood ? "good" : "bad";
+  }
+  get arrow() {
+    const t = this.delta ?? 0;
+    return t > 0 ? "↑" : t < 0 ? "↓" : "→";
+  }
+  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);
+  }
+  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}">
+              <span class="baht-stat-arrow" aria-hidden="true">${this.arrow}</span>
+              <span class="baht-stat-delta-value">${this.deltaText}</span>
+              <span class="baht-visually-hidden">${i}</span>
+              ${this.deltaLabel ? n`<span class="baht-stat-delta-label">${this.deltaLabel}</span>` : h}
+            </div>` : h}
+      ${this.trend.length > 1 ? n`<baht-sparkline
+              class="baht-stat-trend"
+              .values=${this.trend}
+              label=${`${this.label || "Value"} trend, ${this.trend.length} points`}
+            ></baht-sparkline>` : h}
+    </div>`;
+  }
+};
+Y([
+  l()
+], K.prototype, "label", 2);
+Y([
+  l({ type: Number })
+], K.prototype, "value", 2);
+Y([
+  l()
+], K.prototype, "format", 2);
+Y([
+  l()
+], K.prototype, "currency", 2);
+Y([
+  l({ type: Number })
+], K.prototype, "delta", 2);
+Y([
+  l({ attribute: "delta-kind" })
+], K.prototype, "deltaKind", 2);
+Y([
+  l({ attribute: "delta-label" })
+], K.prototype, "deltaLabel", 2);
+Y([
+  l({ type: Boolean, attribute: "up-is-good" })
+], K.prototype, "upIsGood", 2);
+Y([
+  l({ type: Array })
+], K.prototype, "trend", 2);
+Y([
+  l()
+], K.prototype, "size", 2);
+K = Y([
+  b("baht-stat")
+], K);
+var Ua = Object.defineProperty, Ha = Object.getOwnPropertyDescriptor, At = (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 {
+  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;
+    let f = 0;
+    const g = e.map((p, w) => {
+      const C = p.count / i, d = Math.max(0, C * r - o), v = {
+        ...p,
+        frac: C,
+        dash: `${d} ${r - d}`,
+        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)
+      };
+      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=${_}>
+        <g transform="translate(80,80) rotate(-90)">
+          ${g.map(
+      (p) => A`<circle r=${s} cx="0" cy="0" fill="none" stroke=${p.color}
+                stroke-width="22" stroke-dasharray=${p.dash} stroke-dashoffset=${p.offset}/>`
+    )}
+        </g>
+        <text x="80" y="76" text-anchor="middle" class="baht-donut-chart-total">${this.fmt(a)}</text>
+        <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">
+            <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>
+            <span class="baht-chart-legend-pct">(${Math.round(p.frac * 100)}%)</span>
+          </div>`
+    )}
+      </div>
+      ${this.showTable ? be(
+      `${a} ${this.centerLabel}`,
+      ["Slice", "Value", "Share"],
+      g.map((p) => [
+        p.label || "(empty)",
+        this.fmt(p.count),
+        `${Math.round(p.frac * 100)}%`
+      ])
+    ) : h}
+    </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([
+  b("baht-donut-chart")
+], G);
+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 {
+  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;
+  }
+  connectedCallback() {
+    super.connectedCallback(), !(!S() || 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());
+  }
+  /** Host width → px per category. Never runs on the server (`hasDom` guard). */
+  measure() {
+    var r;
+    if (!S() || !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;
+    if (!e) return;
+    const a = (Math.max(0, e - Ja) - ts * (t - 1)) / t, s = a > 0 ? Math.floor(a * 100) / 100 : 0;
+    Math.abs(s - this.band) > 0.01 && (this.band = s);
+  }
+  get columnCount() {
+    const t = this.model.series;
+    return t.length === 0 ? 0 : Math.max(...t.map((e) => e.values.length));
+  }
+  /** The series actually drawn — `groups` is normalised into one series. */
+  get model() {
+    var e;
+    if ((e = this.series) != null && e.length)
+      return { series: this.series, categories: this.categories ?? [], legacy: !1 };
+    const t = this.groups ?? [];
+    return {
+      series: t.length ? [{ name: this.label || "Value", values: t.map((i) => i.count) }] : [],
+      categories: t.map((i) => i.label),
+      legacy: !0
+    };
+  }
+  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);
+  }
+  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);
+  }
+  /** 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))
+    ), r = Math.max(
+      1,
+      ...s,
+      ...this.compare ?? [],
+      ...(this.markers ?? []).map((c) => c.value)
+    );
+    if (i) return r;
+    const o = Be(r, 4);
+    return o[o.length - 1] ?? r;
+  }
+  tableTwin(t, e, i) {
+    var s;
+    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;
+      })
+    );
+  }
+  /** 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);
+  }
+  markerOverlay(t, e) {
+    return this.markersFor(e).map(
+      (i) => n`<span
+        class="baht-bar-chart-marker"
+        style=${`left:${Math.min(100, i.value / t * 100).toFixed(2)}%`}
+        title=${i.label ?? this.fmt(i.value)}
+        aria-hidden="true"
+      ></span>`
+    );
+  }
+  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
+      }));
+      return n`<div class="baht-bar-chart-row">
+        <span class="baht-bar-chart-label" title=${C}>${C}</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)}
+          @pointerleave=${() => this.hideTip()}
+          @focus=${(P) => this.showTip(P, v)}
+          @blur=${() => this.hideTip()}
+        >
+          ${this.markerOverlay(o, C)}
+          <div class="baht-bar-chart-bars">
+            ${this.stacked ? n`<div class="baht-bar-chart-stack" style=${`height:${g}px`}>
+                    ${z.map(
+        (P) => n`<div
+                        class="baht-bar-chart-bar baht-bar-chart-bar--segment"
+                        style=${`width:${Math.max(0, P.value / o * 100)}%;background:${P.color}`}
+                      ></div>`
+      )}
+                  </div>` : z.map(
+        (P) => n`<div
+                      class="baht-bar-chart-bar"
+                      style=${`width:${Math.max(2, P.value / o * 100)}%;height:${g}px;background:${P.color}`}
+                    ></div>`
+      )}
+            ${c ? n`<div
+                    class="baht-bar-chart-bar baht-bar-chart-bar--compare"
+                    style=${`width:${Math.max(2, (this.compare[w] ?? 0) / o * 100)}%;height:${Math.min(8, g)}px`}
+                  ></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
+              >` : h}
+      </div>`;
+    });
+    return n`<div class=${this.rootClass("baht-bar-chart")}>
+      ${_}
+      ${this.renderTooltip()}
+      ${this.renderLegend(e.map((p, w) => ({ label: p.name, color: nt(w, p.color) })))}
+      ${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}>
+        <div class="baht-bar-chart-yaxis" aria-hidden="true">
+          ${[...c].reverse().map((d) => n`<span class="baht-chart-tick-text">${this.fmt(d)}</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>`
+    )}
+          ${[...c].reverse().map(() => n`<span class="baht-chart-grid-rule" aria-hidden="true"></span>`)}
+          <div class="baht-bar-chart-columns">
+            ${Array.from({ length: r }, (d, v) => {
+      const z = i[v] || "(empty)", P = `${z}: ${e.map((q) => `${q.name ? `${q.name} ` : ""}${this.fmt(q.values[v] ?? 0)}`).join(", ")}`;
+      return n`<div
+                class="baht-bar-chart-column"
+                style=${this.band > 0 ? `flex:0 0 auto;width:${this.band}px` : h}
+                tabindex="0"
+                role="button"
+                aria-label=${P}
+                @pointermove=${(q) => this.showTip(q, P)}
+                @pointerleave=${() => this.hideTip()}
+                @focus=${(q) => this.showTip(q, P)}
+                @blur=${() => this.hideTip()}
+              >
+                <div class="baht-bar-chart-column-bars">
+                  ${e.map(
+        (q, ve) => n`<div
+                      class="baht-bar-chart-col"
+                      style=${`height:${Math.max(1, (q.values[v] ?? 0) / o * 100)}%;width:${p}px;background:${this.colorFor(ve, v, s)}`}
+                    ></div>`
+      )}
+                  ${f ? n`<div
+                          class="baht-bar-chart-col baht-bar-chart-col--compare"
+                          style=${`height:${Math.max(1, (this.compare[v] ?? 0) / o * 100)}%;width:${Math.min(8, p)}px`}
+                        ></div>` : h}
+                </div>
+                ${v % w === 0 ? n`<span class="baht-bar-chart-xlabel">${z}</span>` : h}
+              </div>`;
+    })}
+          </div>
+        </div>
+      </div>
+      ${this.renderTooltip()}
+      ${this.renderLegend(e.map((d, v) => ({ label: d.name, color: nt(v, d.color) })))}
+      ${this.tableTwin(e, i, r)}
+    </div>`;
+  }
+};
+V([
+  l({ attribute: !1 })
+], R.prototype, "groups", 2);
+V([
+  l({ attribute: !1 })
+], R.prototype, "series", 2);
+V([
+  l({ attribute: !1 })
+], R.prototype, "categories", 2);
+V([
+  l()
+], R.prototype, "orientation", 2);
+V([
+  l({ type: Boolean })
+], R.prototype, "stacked", 2);
+V([
+  l({ attribute: !1 })
+], R.prototype, "compare", 2);
+V([
+  l({ attribute: !1 })
+], R.prototype, "markers", 2);
+V([
+  l({ attribute: "label-values" })
+], R.prototype, "labelValues", 2);
+V([
+  l({ type: Number })
+], R.prototype, "emphasis", 2);
+V([
+  l()
+], R.prototype, "color", 2);
+V([
+  l()
+], R.prototype, "label", 2);
+V([
+  $()
+], R.prototype, "band", 2);
+R = V([
+  b("baht-bar-chart")
+], R);
+var Xa = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, lt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Za(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Xa(e, i, s), s;
+};
+const es = 640, xe = 260, E = { top: 14, right: 72, bottom: 30, left: 60 };
+let Q = class extends tt {
+  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 };
+  }
+  render() {
+    const t = this.hold({
+      series: (this.series ?? []).filter((u) => {
+        var x;
+        return u && ((x = u.values) == null ? void 0 : x.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")}>
+      <svg
+        class="baht-chart-svg"
+        viewBox="0 0 ${es} ${xe}"
+        preserveAspectRatio="xMidYMid meet"
+        role="img"
+        aria-label=${ve}
+      >
+        ${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>`
+    )}
+        ${this.baseline != null ? [
+      A`<line class="baht-chart-baseline" x1=${E.left} x2=${E.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>`
+    )}
+        ${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"/>`
+      ];
+      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;
+    })}
+        ${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>`
+    ) : 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
+    )}
+        ${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)}
+            @pointerleave=${() => this.onLeave()}
+            @focus=${(at) => this.onHover(at, x, st)}
+            @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}
+      </svg>
+      ${this.renderTooltip()}
+      ${this.renderLegend(
+      e.map((u, x) => ({ label: u.name, color: nt(x, u.color) })),
+      "line"
+    )}
+      ${this.showTable ? be(
+      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))
+      ])
+    ) : h}
+    </div>`;
+  }
+  onHover(t, e, i) {
+    this.crosshairAt = e, this.requestUpdate(), this.showTip(t, i);
+  }
+  onLeave() {
+    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([
+  b("baht-line-chart")
+], Q);
+var Qa = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, wt = (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"];
+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;
+}
+function Oe(t) {
+  return t.toISOString().slice(0, 10);
+}
+let pt = class extends tt {
+  constructor() {
+    super(...arguments), this.values = [], this.from = "", this.to = "", this.lessLabel = "Less", this.moreLabel = "More", this.label = "";
+  }
+  get range() {
+    const t = (this.values ?? []).map((a) => Pe(a.date)).filter((a) => !!a), e = Pe(this.from) ?? (t.length ? new Date(Math.min(...t.map((a) => +a))) : null), i = Pe(this.to) ?? (t.length ? new Date(Math.max(...t.map((a) => +a))) : null);
+    return !e || !i || +i < +e ? null : { start: e, end: i };
+  }
+  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;
+    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 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")}>
+      <svg
+        class="baht-chart-svg baht-heatmap-svg"
+        width=${f}
+        height=${g}
+        viewBox="0 0 ${f} ${g}"
+        preserveAspectRatio="xMinYMin meet"
+        role="img"
+        aria-label=${C}
+      >
+        ${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
+    )}
+        ${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)}
+            @pointerleave=${() => this.hideTip()}
+            @focus=${(P) => this.showTip(P, v)}
+            @blur=${() => this.hideTip()}/>`;
+    })}
+      </svg>
+      ${this.renderTooltip()}
+      <div class="baht-heatmap-scale">
+        <span class="baht-heatmap-scale-label">${this.lessLabel}</span>
+        ${[0, 1, 2, 3, 4].map(
+      (d) => n`<span
+              class="baht-chart-swatch"
+              style=${`background:${Xe(d)}`}
+              aria-hidden="true"
+            ></span>`
+    )}
+        <span class="baht-heatmap-scale-label">${this.moreLabel}</span>
+      </div>
+      ${this.showTable ? be(
+      this.label || "Calendar heatmap data",
+      ["Date", "Value"],
+      a.map((d) => [d.iso, d.value == null ? "—" : this.fmt(d.value)])
+    ) : h}
+    </div>`;
+  }
+};
+wt([
+  l({ attribute: !1 })
+], pt.prototype, "values", 2);
+wt([
+  l()
+], pt.prototype, "from", 2);
+wt([
+  l()
+], pt.prototype, "to", 2);
+wt([
+  l({ attribute: "less-label" })
+], pt.prototype, "lessLabel", 2);
+wt([
+  l({ attribute: "more-label" })
+], pt.prototype, "moreLabel", 2);
+wt([
+  l()
+], pt.prototype, "label", 2);
+pt = wt([
+  b("baht-heatmap")
+], pt);
+var si = Object.defineProperty, ai = Object.getOwnPropertyDescriptor, et = (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 {
+  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";
+  }
+  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. */
+  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";
+  }
+  get statusText() {
+    const t = this.severity;
+    return t === "danger" ? this.overLabel : t === "warning" ? 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}">
+      <div class="baht-meter-head">
+        ${this.label ? n`<span class="baht-meter-label">${this.label}</span>` : h}
+        <span class="baht-meter-value">${s}</span>
+        ${this.statusText ? n`<span class="baht-meter-status"
+                ><span class="baht-meter-icon" aria-hidden="true">${r}</span
+                >${this.statusText}</span
+              >` : h}
+      </div>
+      <div
+        class="baht-meter-track"
+        role="meter"
+        aria-label=${this.label || "Meter"}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        aria-valuetext=${`${s}${this.statusText ? `, ${this.statusText}` : ""}`}
+      >
+        <div class="baht-meter-fill" style=${`width:${e.toFixed(2)}%`}></div>
+        ${a != null ? n`<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}
+    </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([
+  b("baht-meter")
+], W);
+var ii = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, fe = (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 {
+  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}
+      <div class="baht-empty-state-message">${this.message}</div>
+      ${this.hint ? n`<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([
+  b("baht-empty-state")
+], Ht);
+var oi = Object.defineProperty, li = Object.getOwnPropertyDescriptor, Qt = (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 {
+  constructor() {
+    super(...arguments), this.icon = "⚠️", this.heading = "Something went wrong", this.message = "", this.retryLabel = "";
+  }
+  onRetry() {
+    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}
+      <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}
+    </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([
+  b("baht-error-state")
+], Et);
+var ni = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, xt = (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 {
+  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 = "";
+  }
+  willUpdate(t) {
+    if (!t.has("value")) return;
+    const e = JSON.stringify(this.value ?? {});
+    e !== this.syncedJson && (this.syncedJson = e, this.rows = this.toRows(this.value));
+  }
+  toRows(t) {
+    const e = Object.entries(t ?? {}).map(([i, a]) => ({
+      k: i,
+      v: typeof a == "string" ? a : JSON.stringify(a)
+    }));
+    return e.length > 0 ? e : [{ k: "", v: "" }];
+  }
+  commit(t) {
+    this.rows = t.length > 0 ? t : [{ k: "", v: "" }];
+    const e = {};
+    for (const i of t) i.k.trim() && (e[i.k.trim()] = i.v);
+    this.syncedJson = JSON.stringify(e), this.dispatchEvent(
+      new CustomEvent("baht-change", { detail: { value: e }, bubbles: !0, composed: !0 })
+    );
+  }
+  edit(t, e) {
+    this.commit(this.rows.map((i, a) => a === t ? { ...i, ...e } : i));
+  }
+  addRow() {
+    this.rows = [...this.rows, { k: "", v: "" }];
+  }
+  render() {
+    return n`<div class="baht-keyvalue">
+      ${this.rows.map(
+      (t, e) => n`<div class="baht-keyvalue-row">
+          <input
+            class="baht-control baht-keyvalue-key"
+            placeholder=${this.keyPlaceholder}
+            aria-label="${this.keyPlaceholder} ${e + 1}"
+            .value=${t.k}
+            ?disabled=${this.disabled}
+            @input=${(i) => this.edit(e, { k: i.target.value })}
+          />
+          <span class="baht-keyvalue-eq" aria-hidden="true">=</span>
+          <input
+            class="baht-control baht-keyvalue-value"
+            placeholder=${this.valuePlaceholder}
+            aria-label="${this.valuePlaceholder} ${e + 1}"
+            .value=${t.v}
+            ?disabled=${this.disabled}
+            @input=${(i) => this.edit(e, { v: i.target.value })}
+          />
+          <button
+            type="button"
+            class="baht-keyvalue-remove"
+            aria-label="Remove row ${e + 1}"
+            ?disabled=${this.disabled}
+            @click=${() => this.commit(this.rows.filter((i, a) => a !== e))}
+          >${H("close")}</button>
+        </div>`
+    )}
+      <button
+        type="button"
+        class="baht-keyvalue-add"
+        ?disabled=${this.disabled}
+        @click=${this.addRow}
+      >${H("plus")}${this.add_label}</button>
+    </div>`;
+  }
+};
+xt([
+  l({ attribute: !1 })
+], dt.prototype, "value", 2);
+xt([
+  l({ attribute: "key-placeholder" })
+], dt.prototype, "keyPlaceholder", 2);
+xt([
+  l({ attribute: "value-placeholder" })
+], dt.prototype, "valuePlaceholder", 2);
+xt([
+  l({ attribute: "add-label" })
+], dt.prototype, "add_label", 2);
+xt([
+  l({ type: Boolean })
+], dt.prototype, "disabled", 2);
+xt([
+  $()
+], dt.prototype, "rows", 2);
+dt = xt([
+  b("baht-keyvalue-editor")
+], dt);
+var ci = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, T = (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 {
+  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();
+    };
+  }
+  get listboxId() {
+    return `baht-refpicker-list-${this.uid}`;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(this.timer), S() && 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(() => {
+      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));
+  }
+  search(t) {
+    clearTimeout(this.timer), this.timer = setTimeout(async () => {
+      if (!this.fetcher) return;
+      const e = ++this.fetchSeq;
+      this.loading = !0;
+      try {
+        const i = await this.fetcher(t);
+        e === this.fetchSeq && (this.options = i);
+      } catch {
+        e === this.fetchSeq && (this.options = []);
+      } finally {
+        e === this.fetchSeq && (this.loading = !1);
+      }
+    }, this.debounce);
+  }
+  pick(t) {
+    this.close(), this.emitChange(t.key, t.label);
+  }
+  clear() {
+    this.close(), this.emitChange("", "");
+  }
+  emitChange(t, e) {
+    this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { value: t, label: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onInput(t) {
+    this.term = t.target.value, this.activeIndex = -1, this.search(this.term);
+  }
+  onKeydown(t) {
+    if (this.open)
+      if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+        t.preventDefault();
+        const e = t.key === "ArrowDown" ? 1 : -1, i = this.options.length;
+        i > 0 && (this.activeIndex = (this.activeIndex + e + i) % i);
+      } else if (t.key === "Enter") {
+        t.preventDefault();
+        const e = this.options[this.activeIndex];
+        e && this.pick(e);
+      } else t.key === "Escape" && (t.preventDefault(), this.close());
+  }
+  render() {
+    const t = this.open ? this.term : this.display || this.value;
+    return n`<div class="baht-refpicker${this.open ? " baht-refpicker--open" : ""}">
+      <div class="baht-refpicker-field">
+        <input
+          class="baht-control baht-refpicker-input"
+          type="text"
+          role="combobox"
+          aria-label=${this.label}
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${this.listboxId}
+          aria-autocomplete="list"
+          aria-invalid=${this.invalid ? "true" : h}
+          aria-activedescendant=${this.activeIndex >= 0 ? `${this.listboxId}-${this.activeIndex}` : h}
+          placeholder=${this.open ? this.placeholder || "Search…" : this.placeholder}
+          .value=${t}
+          ?disabled=${this.disabled}
+          ?readonly=${!this.open}
+          @focus=${() => this.openLookup()}
+          @input=${this.onInput}
+          @keydown=${this.onKeydown}
+        />
+        ${this.value && !this.disabled ? n`<button
+              type="button"
+              class="baht-refpicker-clear"
+              aria-label="Clear"
+              @mousedown=${(e) => e.preventDefault()}
+              @click=${() => this.clear()}
+            >${H("close")}</button>` : h}
+      </div>
+      <button
+        type="button"
+        class="baht-refpicker-lookup"
+        aria-label=${this.lookupLabel}
+        title=${this.lookupLabel}
+        ?disabled=${this.disabled}
+        @click=${() => this.open ? this.close() : this.openLookup()}
+      >${H("search")}</button>
+      ${this.value && this.href ? n`<a
+            class="baht-refpicker-open"
+            href=${this.href}
+            aria-label="Open record"
+            title="Open record"
+          >${H("external")}</a>` : h}
+      <div
+        class="baht-refpicker-list"
+        id=${this.listboxId}
+        role="listbox"
+        aria-label=${this.label}
+        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
+                  type="button"
+                  class="baht-refpicker-option${i === this.activeIndex ? " baht-refpicker-option--active" : ""}"
+                  id="${this.listboxId}-${i}"
+                  role="option"
+                  aria-selected=${e.key === this.value ? "true" : "false"}
+                  @mousedown=${(a) => a.preventDefault()}
+                  @click=${() => this.pick(e)}
+                >
+                  <span class="baht-refpicker-option-label">${e.label}</span>
+                  ${e.sub ? n`<span class="baht-refpicker-option-sub">${e.sub}</span>` : h}
+                </button>`
+    )}
+      </div>
+    </div>`;
+  }
+};
+T([
+  l()
+], j.prototype, "label", 2);
+T([
+  l()
+], j.prototype, "value", 2);
+T([
+  l()
+], j.prototype, "display", 2);
+T([
+  l()
+], j.prototype, "placeholder", 2);
+T([
+  l({ type: Boolean })
+], j.prototype, "disabled", 2);
+T([
+  l({ type: Boolean })
+], j.prototype, "invalid", 2);
+T([
+  l()
+], j.prototype, "href", 2);
+T([
+  l({ attribute: "lookup-label" })
+], j.prototype, "lookupLabel", 2);
+T([
+  l({ type: Number })
+], j.prototype, "debounce", 2);
+T([
+  l({ attribute: !1 })
+], j.prototype, "fetcher", 2);
+T([
+  $()
+], j.prototype, "open", 2);
+T([
+  $()
+], j.prototype, "term", 2);
+T([
+  $()
+], j.prototype, "options", 2);
+T([
+  $()
+], j.prototype, "loading", 2);
+T([
+  $()
+], j.prototype, "activeIndex", 2);
+T([
+  Bt("input")
+], j.prototype, "inputEl", 2);
+j = T([
+  b("baht-reference-picker")
+], j);
+var di = Object.defineProperty, ui = Object.getOwnPropertyDescriptor, I = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ui(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && di(e, i, s), s;
+};
+let F = class extends y {
+  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();
+    };
+  }
+  get inputId() {
+    return `baht-typeahead-${this.uid}`;
+  }
+  get listboxId() {
+    return `${this.inputId}-list`;
+  }
+  optionId(t) {
+    return `${this.listboxId}-${t}`;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(this.timer), S() && document.removeEventListener("mousedown", this.onDocMousedown);
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("value") && this.timer === void 0 && (this.term = this.value);
+  }
+  updated() {
+    var t, e;
+    !this.open || this.activeIndex < 0 || (e = (t = this.querySelector(`#${this.optionId(this.activeIndex)}`)) == null ? void 0 : t.scrollIntoView) == null || e.call(t, {
+      block: "nearest"
+    });
+  }
+  // ---- suggestions -----------------------------------------------------
+  filterStatic(t) {
+    var s;
+    const e = t.trim().toLowerCase();
+    if (!e) return this.options.slice(0, this.maxItems);
+    const i = [], a = [];
+    for (const r of this.options) {
+      const o = r.label.toLowerCase();
+      o.startsWith(e) ? i.push(r) : (o.includes(e) || (s = r.sub) != null && s.toLowerCase().includes(e)) && a.push(r);
+    }
+    return [...i, ...a].slice(0, this.maxItems);
+  }
+  async suggest(t) {
+    if (t.length < this.minChars) {
+      this.results = [], this.loading = !1, this.close();
+      return;
+    }
+    if (!this.fetcher) {
+      this.results = this.filterStatic(t), this.activeIndex = -1, this.open = !0, this.listen();
+      return;
+    }
+    const e = ++this.fetchSeq;
+    this.loading = !0, this.open = !0, this.listen();
+    try {
+      const i = await this.fetcher(t);
+      e === this.fetchSeq && (this.results = i.slice(0, this.maxItems));
+    } catch {
+      e === this.fetchSeq && (this.results = []);
+    } finally {
+      e === this.fetchSeq && (this.loading = !1, this.activeIndex = -1);
+    }
+  }
+  highlight(t) {
+    this.activeIndex !== t && (this.activeIndex = t);
+  }
+  listen() {
+    S() && document.addEventListener("mousedown", this.onDocMousedown);
+  }
+  close() {
+    S() && document.removeEventListener("mousedown", this.onDocMousedown), this.open && (this.open = !1, this.activeIndex = -1);
+  }
+  // ---- events ------------------------------------------------------------
+  emitChange(t, e) {
+    this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { value: t, option: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onInput(t) {
+    this.term = t.target.value, this.picked = null, clearTimeout(this.timer), this.timer = setTimeout(
+      () => {
+        this.timer = void 0, this.emitChange(this.term, null), this.suggest(this.term);
+      },
+      Math.max(0, this.debounce)
+    );
+  }
+  /** Hand pending text to the host now (blur, Enter). */
+  flush() {
+    this.timer !== void 0 && (clearTimeout(this.timer), this.timer = void 0, this.emitChange(this.term, null));
+  }
+  pick(t) {
+    clearTimeout(this.timer), this.timer = void 0, this.picked = t, this.lastPicked = t, this.term = t.label, this.close(), this.emitChange(t.label, t), this.dispatchEvent(
+      new CustomEvent("baht-select", { detail: { option: t }, bubbles: !0, composed: !0 })
+    );
+  }
+  onBlur() {
+    if (!this.freeText && !this.picked) {
+      clearTimeout(this.timer), this.timer = void 0;
+      const t = this.lastPicked;
+      this.term = (t == null ? void 0 : t.label) ?? "", this.picked = t, this.value !== this.term && this.emitChange(this.term, t);
+      return;
+    }
+    this.flush();
+  }
+  onKeydown(t) {
+    const e = this.results.length;
+    switch (t.key) {
+      case "ArrowDown":
+        if (t.preventDefault(), !this.open) {
+          this.suggest(this.term);
+          return;
+        }
+        e > 0 && (this.activeIndex = (this.activeIndex + 1) % e);
+        break;
+      case "ArrowUp":
+        t.preventDefault(), this.open && e > 0 && (this.activeIndex = (this.activeIndex - 1 + e) % e);
+        break;
+      case "Enter": {
+        const i = this.open ? this.results[this.activeIndex] : void 0;
+        i ? (t.preventDefault(), this.pick(i)) : (this.flush(), this.close());
+        break;
+      }
+      case "Escape":
+        this.open && (t.preventDefault(), this.close());
+        break;
+      case "Tab":
+        this.flush(), this.close();
+        break;
+    }
+  }
+  render() {
+    const t = this.open, e = !this.loading && this.results.length === 0;
+    return n`<div class="baht-typeahead${this.open ? " baht-typeahead--open" : ""}">
+      <input
+        class="baht-control baht-typeahead-input"
+        id=${this.inputId}
+        type="text"
+        role="combobox"
+        aria-label=${this.label}
+        aria-autocomplete="list"
+        aria-expanded=${t ? "true" : "false"}
+        aria-controls=${this.listboxId}
+        aria-activedescendant=${t && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : h}
+        aria-invalid=${this.invalid ? "true" : h}
+        autocomplete=${this.autocomplete}
+        placeholder=${this.placeholder || h}
+        .value=${ot(this.term)}
+        ?disabled=${this.disabled}
+        @input=${(i) => this.onInput(i)}
+        @keydown=${(i) => this.onKeydown(i)}
+        @blur=${() => this.onBlur()}
+      />
+      <div
+        class="baht-listbox baht-typeahead-list"
+        id=${this.listboxId}
+        role="listbox"
+        aria-label=${this.label}
+        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(
+      // eslint-disable-next-line lit-a11y/click-events-have-key-events -- keyboard lives on the combobox input (aria-activedescendant pattern)
+      (i, a) => n`<div
+                    class="baht-listbox-option${a === this.activeIndex ? " baht-listbox-option--active" : ""}"
+                    id=${this.optionId(a)}
+                    role="option"
+                    aria-selected=${a === this.activeIndex ? "true" : "false"}
+                    data-key=${i.key}
+                    @mousedown=${(s) => s.preventDefault()}
+                    @mousemove=${() => this.highlight(a)}
+                    @click=${() => {
+        var s;
+        this.pick(i), (s = this.inputEl) == null || s.focus();
+      }}
+                  >
+                    <span class="baht-listbox-option-label">${i.label}</span>
+                    ${i.sub ? n`<span class="baht-listbox-option-sub">${i.sub}</span>` : h}
+                  </div>`
+    )}
+      </div>
+    </div>`;
+  }
+};
+I([
+  l()
+], F.prototype, "label", 2);
+I([
+  l()
+], F.prototype, "value", 2);
+I([
+  l()
+], F.prototype, "placeholder", 2);
+I([
+  l({ type: Boolean })
+], F.prototype, "disabled", 2);
+I([
+  l({ type: Boolean })
+], F.prototype, "invalid", 2);
+I([
+  l({ attribute: !1 })
+], F.prototype, "options", 2);
+I([
+  l({ attribute: !1 })
+], F.prototype, "fetcher", 2);
+I([
+  l({ type: Number })
+], F.prototype, "debounce", 2);
+I([
+  l({ type: Number, attribute: "min-chars" })
+], F.prototype, "minChars", 2);
+I([
+  l({ type: Number, attribute: "max-items" })
+], F.prototype, "maxItems", 2);
+I([
+  l({ attribute: "free-text", converter: (t) => t !== "false" })
+], F.prototype, "freeText", 2);
+I([
+  l()
+], F.prototype, "autocomplete", 2);
+I([
+  $()
+], F.prototype, "term", 2);
+I([
+  $()
+], F.prototype, "open", 2);
+I([
+  $()
+], F.prototype, "results", 2);
+I([
+  $()
+], F.prototype, "loading", 2);
+I([
+  $()
+], F.prototype, "activeIndex", 2);
+I([
+  Bt("input")
+], F.prototype, "inputEl", 2);
+F = I([
+  b("baht-typeahead")
+], F);
+const cs = {
+  text: "baht-input",
+  email: "baht-input",
+  password: "baht-input",
+  textarea: "baht-textarea",
+  number: "baht-number",
+  dropdown: "baht-select",
+  multiselect: "baht-multiselect",
+  checkbox: "baht-checkbox",
+  radio: "baht-radio",
+  toggle: "baht-toggle",
+  date: "baht-datepicker",
+  file: "baht-file",
+  label: "baht-text",
+  section: "baht-section",
+  repeater: "baht-repeater"
+};
+var bi = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, ps = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? fi(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 && bi(e, i, s), s;
+};
+const mi = {
+  "1/4": "baht-field--w-1-4",
+  "1/2": "baht-field--w-1-2",
+  "3/4": "baht-field--w-3-4",
+  full: "baht-field--w-full"
+}, as = /* @__PURE__ */ new Map();
+function vi(t) {
+  let e = as.get(t);
+  return e || (e = os(t), as.set(t, e)), e;
+}
+let Ie = class extends J {
+  constructor() {
+    super(...arguments), this.rowErrors = [];
+  }
+  willUpdate(t) {
+    super.willUpdate(t);
+  }
+  get rows() {
+    return Array.isArray(this.value) ? this.value : [];
+  }
+  get subFields() {
+    return [...this.field.fields ?? []].sort((t, e) => t.order - e.order).filter((t) => t.type !== "repeater");
+  }
+  patchRow(t, e, i) {
+    const a = [...this.rows];
+    a[t] = { ...a[t], [e]: i }, this.emitInput(a);
+  }
+  addRow() {
+    const t = {};
+    for (const e of this.subFields)
+      e.type === "label" || e.type === "section" || (t[e.key] = se(e));
+    this.emitInput([...this.rows, t]);
+  }
+  removeRow(t) {
+    this.emitInput(this.rows.filter((e, i) => i !== t));
+  }
+  /** Pending keystrokes in any row land in the array before the host reads it. */
+  flushTyped() {
+    var t;
+    if (!S()) return super.flushTyped();
+    for (const e of this.querySelectorAll(".baht-repeater-row > .baht-field > *"))
+      (t = e.flushTyped) == null || t.call(e);
+    super.flushTyped();
+  }
+  errorFor(t, e) {
+    var a;
+    const i = `${this.field.key}[${t}].${e}`;
+    return ((a = this.rowErrors.find((s) => s.key === i)) == null ? void 0 : a.message) ?? null;
+  }
+  /**
+   * Sub-controls render declaratively (one static-tag template per primitive, rows
+   * keyed by index) so Lit reuses the same node across re-renders — typing keeps
+   * focus, same as <baht-form> — and the whole thing renders on the server.
+   */
+  renderSub(t, e, i) {
+    const a = cs[i.type];
+    if (!a) return h;
+    const s = vi(a), r = mi[i.width ?? "full"] ?? "baht-field--w-full", o = (c) => {
+      c.stopPropagation();
+      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}
+        .field=${i}
+        .value=${Object.hasOwn(t, i.key) ? t[i.key] : se(i)}
+        .disabled=${this.disabled}
+        .readonly=${this.readonly}
+        .required=${!!i.required}
+        .error=${this.errorFor(e, i.key)}
+        .debounce=${this.debounce}
+        @baht-input=${o}
+      ></${s}>`}
+    </div>`;
+  }
+  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
+      class="baht-repeater"
+      id=${this.controlId}
+      role="group"
+      aria-labelledby=${this.field.label ? this.labelId : h}
+      aria-describedby=${this.describedBy}
+    >
+      ${Ce(
+      t,
+      (a, s) => s,
+      (a, s) => n`<div
+          class="baht-repeater-row"
+          data-row=${s}
+          role="group"
+          aria-label=${m("row", { n: s + 1 })}
+        >
+          ${Ce(
+        this.subFields,
+        (r) => r.key,
+        (r) => this.renderSub(a, s, r)
+      )}
+          ${e ? n`<button
+                type="button"
+                class="baht-repeater-remove"
+                aria-label=${m("removeRowN", { n: s + 1 })}
+                title=${m("removeRowN", { n: s + 1 })}
+                @click=${() => this.removeRow(s)}
+              >
+                ✕
+              </button>` : h}
+        </div>`
+    )}
+      ${this.readonly ? h : n`<button
+            type="button"
+            class="baht-repeater-add"
+            ?disabled=${this.disabled || i}
+            @click=${() => this.addRow()}
+          >
+            + ${this.field.add_label ?? m("addRow")}
+          </button>`}
+    </div>`;
+  }
+};
+ps([
+  l({ attribute: !1 })
+], Ie.prototype, "rowErrors", 2);
+Ie = ps([
+  b("baht-repeater")
+], Ie);
+var $i = Object.defineProperty, yi = Object.getOwnPropertyDescriptor, me = (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 {
+  constructor() {
+    super(...arguments), this.steps = [], this.current = 0, this.variant = "default";
+  }
+  render() {
+    const t = this.variant === "sidebar";
+    return n`<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
+          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>`}
+          <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}
+        </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([
+  b("baht-steps")
+], Gt);
+var gi = Object.defineProperty, wi = Object.getOwnPropertyDescriptor, X = (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;
+};
+const xi = {
+  "1/4": "baht-field--w-1-4",
+  "1/2": "baht-field--w-1-2",
+  "3/4": "baht-field--w-3-4",
+  full: "baht-field--w-full"
+}, is = /* @__PURE__ */ new Map();
+function _i(t) {
+  let e = is.get(t);
+  return e || (e = os(t), is.set(t, e)), e;
+}
+let U = class extends y {
+  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 = {};
+  }
+  get effectiveForm() {
+    return this.form ? ((this.flagCache.form !== this.form || this.flagCache.flags !== this.flags) && (this.flagCache = {
+      form: this.form,
+      flags: this.flags,
+      out: rs(this.form, this.flags)
+    }), this.flagCache.out) : this.form;
+  }
+  willUpdate(t) {
+    t.has("value") && (this.edits = {}), (t.has("form") || t.has("flags")) && (this.dynamicOptions.clear(), this.optionsSnapshots.clear(), this.optionsEpoch.clear()), (t.has("form") || t.has("flags") || t.has("value") || t.has("registry")) && this.syncDynamicOptions();
+  }
+  /**
+   * Refetch `options_from` options whose dep snapshot changed. Sync fetchers
+   * land immediately; async ones re-render on resolve (stale responses are
+   * dropped by epoch).
+   */
+  syncDynamicOptions() {
+    var e, i;
+    const t = this.getData();
+    for (const a of ((e = this.effectiveForm) == null ? void 0 : e.fields) ?? []) {
+      if (!a.options_from) continue;
+      const s = JSON.stringify((a.options_deps ?? []).map((f) => t[f] ?? null));
+      if (this.optionsSnapshots.get(a.key) === s) continue;
+      this.optionsSnapshots.set(a.key, s);
+      const r = (this.optionsEpoch.get(a.key) ?? 0) + 1;
+      this.optionsEpoch.set(a.key, r);
+      const o = (i = this.registry.options) == null ? void 0 : i[a.options_from];
+      if (!o) {
+        console.warn(`[bahtui] unknown options fetcher "${a.options_from}" — skipped`), this.dynamicOptions.set(a.key, []);
+        continue;
+      }
+      const c = o(t);
+      c instanceof Promise ? c.then((f) => {
+        this.optionsEpoch.get(a.key) === r && (this.dynamicOptions.set(a.key, f), this.requestUpdate());
+      }).catch((f) => {
+        console.warn(`[bahtui] options fetcher "${a.options_from}" failed`, f), this.optionsEpoch.get(a.key) === r && this.optionsSnapshots.delete(a.key);
+      }) : this.dynamicOptions.set(a.key, c);
+    }
+  }
+  /**
+   * A user edit invalidates every field whose options_deps include the edited
+   * key — their values reset to defaults, cascading down chains
+   * (province -> district -> subdistrict).
+   */
+  clearDependents(t) {
+    var a, s;
+    const e = [t], i = /* @__PURE__ */ new Set();
+    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));
+    }
+  }
+  get sortedFields() {
+    if (!this.form) return [];
+    const t = Ae(this.effectiveForm, this.view);
+    return t || (this.view !== void 0 && !this.warnedViews.has(this.view) && (this.warnedViews.add(this.view), console.warn(`[bahtui] unknown view "${this.view}" — showing the full form`)), Ae(this.effectiveForm) ?? []);
+  }
+  stateFor(t) {
+    return this.fieldStates[t.key] ?? {
+      visible: !0,
+      enabled: !t.disabled,
+      readonly: !!t.readonly,
+      required: !!t.required,
+      computed: !1
+    };
+  }
+  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);
+  }
+  // ---- public API (spec 01 §6) ----
+  /** Debounced keystrokes still in a control land in `edits` before anyone reads them. */
+  flushTyped() {
+    var t;
+    if (S())
+      for (const e of this.querySelectorAll(":scope > .baht-form > .baht-field > *"))
+        (t = e.flushTyped) == null || t.call(e);
+  }
+  getData() {
+    var e;
+    this.flushTyped();
+    const t = {};
+    for (const i of ((e = this.effectiveForm) == null ? void 0 : e.fields) ?? [])
+      i.type === "label" || i.type === "section" || (t[i.key] = this.valueFor(i));
+    return t;
+  }
+  setValue(t) {
+    this.edits = { ...this.edits, ...t }, this.requestUpdate();
+  }
+  validate() {
+    const t = [], e = this.getData();
+    for (const a of this.sortedFields) {
+      if (a.type === "label" || a.type === "section") continue;
+      const s = this.stateFor(a);
+      if (!s.visible) continue;
+      const r = s.required === !!a.required ? a : { ...a, required: s.required };
+      t.push(...Le(r, this.valueFor(a), this.registry, e));
+    }
+    this.errors = t;
+    const i = { valid: t.length === 0, errors: t };
+    return this.dispatchEvent(
+      new CustomEvent("baht-validity", { detail: i, bubbles: !0, composed: !0 })
+    ), i;
+  }
+  reset() {
+    this.edits = {}, this.value = {}, this.errors = [], this.requestUpdate();
+  }
+  // ---- internal ----
+  onFieldInput(t, e) {
+    var s;
+    e.stopPropagation();
+    let { value: i } = e.detail;
+    const a = t.formatter ? (s = this.registry.formatters) == null ? void 0 : s[t.formatter] : void 0;
+    t.formatter && !a && console.warn(`[bahtui] unknown formatter "${t.formatter}" — skipped`), a && (i = a(i)), this.edits = { ...this.edits, [t.key]: i }, this.clearDependents(t.key), this.syncDynamicOptions(), (this.options.validateOn ?? "change") === "change" && this.errors.length > 0 && this.validate(), this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { form_name: this.form.form_name, key: t.key, value: i, data: this.getData() },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** Validate a single field against current form data (siblings included). */
+  validateOneField(t) {
+    const e = this.stateFor(t);
+    if (!e.visible) return [];
+    const i = this.getData(), a = e.required === !!t.required ? t : { ...t, required: e.required };
+    return Le(a, this.valueFor(t), this.registry, i);
+  }
+  /** `validateOn: 'blur'` — validate just the field the user left, same as
+   * how errors are shown elsewhere (merged into `this.errors`, painted by
+   * `renderField`/`.baht-error`). No-op for 'change'/'submit' modes. */
+  onFieldBlur(t) {
+    if ((this.options.validateOn ?? "change") !== "blur") return;
+    const e = this.validateOneField(t), i = this.errors.filter((a) => a.key !== t.key);
+    this.errors = [...i, ...e];
+  }
+  renderField(t) {
+    var C, d;
+    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;
+    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;
+    if (t.type === "repeater") {
+      const v = this.errors.filter((z) => z.key.startsWith(`${t.key}[`));
+      w = ee`<${p}
+        .field=${r}
+        .value=${o}
+        .disabled=${c}
+        .readonly=${f}
+        .required=${i.required}
+        .error=${s}
+        .debounce=${g}
+        .rowErrors=${v}
+        @baht-input=${_}
+      ></${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}
+        .field=${r}
+        .value=${o}
+        .disabled=${c}
+        .readonly=${f}
+        .required=${i.required}
+        .error=${s}
+        .debounce=${g}
+        .uploader=${v}
+        @baht-input=${_}
+      ></${p}>`;
+    } else
+      w = ee`<${p}
+        .field=${r}
+        .value=${o}
+        .disabled=${c}
+        .readonly=${f}
+        .required=${i.required}
+        .error=${s}
+        .debounce=${g}
+        @baht-input=${_}
+      ></${p}>`;
+    return n`<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}
+    </div>`;
+  }
+  /**
+   * Resolve the descriptor at event time — it may have changed since the control
+   * was first rendered (the same node is reused across renders, see render()).
+   */
+  onControlInput(t, e) {
+    var a;
+    const i = (a = this.effectiveForm) == null ? void 0 : a.fields.find((s) => s.key === t);
+    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">
+                ${s.rows.map(
+      (o) => n`<div class="baht-readonly-row">
+                    ${o.map(
+        (c) => n`<span class="baht-readonly-cell"
+                        ><span class="baht-readonly-cell-label">${c.label}</span
+                        ><span class="baht-readonly-cell-value">${c.text}</span></span
+                      >`
+      )}
+                  </div>`
+    )}
+              </div>`;
+    return n`<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}
+      ${r}
+    </div>`;
+  }
+  render() {
+    return n`<div class="baht-form ${this.readonly ? "baht-form--readonly" : ""}">
+      ${Ce(
+      this.sortedFields,
+      (t) => t.key,
+      (t) => this.renderField(t)
+    )}
+    </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([
+  b("baht-form")
+], U);
+var ki = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, N = (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 {
+  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 = {};
+  }
+  get currentFormName() {
+    return this.current;
+  }
+  get effectiveWorkflow() {
+    return this.workflow ? ((this.flagCache.workflow !== this.workflow || this.flagCache.flags !== this.flags) && (this.flagCache = {
+      workflow: this.workflow,
+      flags: this.flags,
+      out: rs(this.workflow, this.flags)
+    }), this.flagCache.out) : this.workflow;
+  }
+  willUpdate(t) {
+    var e, i;
+    t.has("workflow") || t.has("value") ? (this.data = structuredClone(this.value ?? {}), this.reevaluate(), this.history = [], this.current = ((e = this.visibleForms[0]) == null ? void 0 : e.form_name) ?? null, this.approvalError = null) : t.has("flags") && (this.reevaluate(), this.current && !this.visibleForms.some((a) => a.form_name === this.current) && (this.current = ((i = this.visibleForms[0]) == null ? void 0 : i.form_name) ?? null));
+  }
+  reevaluate() {
+    this.derived = fs(this.effectiveWorkflow, this.data), this.data = this.derived.data;
+  }
+  /** Forms in ascending order whose derived visibility is true. */
+  get visibleForms() {
+    var e;
+    const t = [...((e = this.effectiveWorkflow) == null ? void 0 : e.forms) ?? []].sort((i, a) => i.order - a.order);
+    return this.derived ? t.filter((i) => {
+      var a;
+      return ((a = this.derived.forms[i.form_name]) == null ? void 0 : a.visible) !== !1;
+    }) : t;
+  }
+  get currentForm() {
+    return this.visibleForms.find((t) => t.form_name === this.current) ?? null;
+  }
+  /** Where next() would go from here: a form_name or 'end' (spec 03 §6). */
+  get navTarget() {
+    var a;
+    if (!this.current) return "end";
+    const t = this.effectiveWorkflow;
+    if (t.transitions && t.transitions.length > 0)
+      return ms(t, this.current, this.data);
+    const e = this.visibleForms, i = e.findIndex((s) => s.form_name === this.current);
+    return ((a = e[i + 1]) == null ? void 0 : a.form_name) ?? "end";
+  }
+  get isLast() {
+    return this.current !== null && this.navTarget === "end";
+  }
+  fieldStatesFor(t) {
+    const e = {};
+    if (!this.derived) return e;
+    const i = `${t}.`;
+    for (const [a, s] of Object.entries(this.derived.fields))
+      a.startsWith(i) && (e[a.slice(i.length)] = s);
+    return e;
+  }
+  get formEl() {
+    return this.querySelector("baht-form");
+  }
+  // ---- public API (spec 03 §2) ----
+  getData() {
+    var t;
+    return ((t = this.derived) == null ? void 0 : t.data) ?? this.data;
+  }
+  /**
+   * Host/store write into one form's data — same path a user edit takes
+   * (rules reevaluate, `baht-data-change` fires) but WITHOUT the step reset
+   * that re-feeding the `value` prop causes.
+   */
+  setValue(t, e) {
+    var i;
+    this.data = { ...this.data, [t]: { ...this.data[t], ...e } }, this.reevaluate(), this.current && !this.visibleForms.some((a) => a.form_name === this.current) && (this.current = ((i = this.visibleForms[0]) == null ? void 0 : i.form_name) ?? null), this.emit("baht-data-change", { data: this.getData() });
+  }
+  next() {
+    const t = this.currentForm;
+    if (!t) return;
+    if (t.kind === "approval") {
+      this.decide("approved");
+      return;
+    }
+    let e = { valid: !0, errors: [] };
+    this.formEl && (e = this.formEl.validate()), !(this.validateGate && !e.valid) && (this.reevaluate(), this.advance(e));
+  }
+  /** Advance past the current form: submit+complete at 'end', else step to navTarget. */
+  advance(t = {}) {
+    const e = { ...t, data: this.getData() }, i = this.navTarget;
+    if (i === "end") {
+      this.emit("baht-submit", e), this.emit("baht-complete", { data: this.getData(), status: "completed" });
+      return;
+    }
+    const a = this.visibleForms.find((s) => s.form_name === i);
+    if (!a || a.form_name === this.current) {
+      const s = a ? "self-transition" : "target-hidden";
+      console.warn(
+        `[bahtui] cannot advance from "${this.current}": target "${i}" is ` + (a ? "the current form (self-transition)" : "not visible")
+      ), this.emit("baht-nav-blocked", {
+        form_name: this.current,
+        target: i,
+        reason: s,
+        data: this.getData()
+      });
+      return;
+    }
+    this.history.push(this.current), this.current = a.form_name, this.emit("baht-next", { form_name: a.form_name, order: a.order, ...e }), this.emit("baht-step-change", {
+      form_name: a.form_name,
+      order: a.order,
+      direction: "forward"
+    });
+  }
+  /** Approve the current approval step (same as pressing its Approve button). */
+  approve() {
+    this.decide("approved");
+  }
+  /** Reject the current approval step (same as pressing its Reject button). */
+  reject() {
+    this.decide("rejected");
+  }
+  decide(t) {
+    var f;
+    const e = this.currentForm;
+    if (!e || e.kind !== "approval") return;
+    const i = e.approval ?? {}, a = String(((f = this.data[e.form_name]) == null ? void 0 : f.comment) ?? ""), s = i.comment ?? "optional";
+    if ((s === "required" || s === "requireOnReject" && t === "rejected") && a.trim() === "") {
+      this.approvalError = m("commentRequired");
+      return;
+    }
+    this.approvalError = null, this.data = {
+      ...this.data,
+      [e.form_name]: { ...this.data[e.form_name], decision: t, comment: a }
+    }, this.reevaluate();
+    const o = { form_name: e.form_name, decision: t, comment: a, data: this.getData() };
+    if (t === "approved") {
+      this.emit("baht-approve", o), this.advance({ decision: t, comment: a });
+      return;
+    }
+    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" });
+  }
+  /** Jump back to a visible form, truncating the history to that point. */
+  gotoForm(t) {
+    const e = this.history.indexOf(t);
+    this.history = e >= 0 ? this.history.slice(0, e) : [], this.current = t;
+    const i = this.effectiveWorkflow.forms.find((a) => a.form_name === t);
+    this.emit("baht-step-change", { form_name: t, order: (i == null ? void 0 : i.order) ?? 0, direction: "back" });
+  }
+  back() {
+    let t = this.history.pop();
+    for (; t !== void 0 && !this.visibleForms.some((i) => i.form_name === t); )
+      t = this.history.pop();
+    if (!t) return;
+    this.current = t, this.approvalError = null;
+    const e = this.effectiveWorkflow.forms.find((i) => i.form_name === t);
+    this.emit("baht-step-change", { form_name: t, order: (e == null ? void 0 : e.order) ?? 0, direction: "back" });
+  }
+  gotoStart() {
+    var t;
+    this.history = [], this.current = ((t = this.visibleForms[0]) == null ? void 0 : t.form_name) ?? null, this.approvalError = null;
+  }
+  // ---- internal ----
+  onFormChange(t) {
+    var s;
+    t.stopPropagation();
+    const { form_name: e, key: i, value: a } = t.detail;
+    this.data = { ...this.data, [e]: { ...this.data[e], [i]: a } }, this.reevaluate(), this.current && !this.visibleForms.some((r) => r.form_name === this.current) && (this.current = ((s = this.visibleForms[0]) == null ? void 0 : s.form_name) ?? null), this.emit("baht-data-change", { data: this.getData() });
+  }
+  onCommentInput(t, e) {
+    this.data = { ...this.data, [t]: { ...this.data[t], comment: e } }, this.reevaluate(), e.trim() !== "" && (this.approvalError = null), this.emit("baht-data-change", { data: this.getData() });
+  }
+  emit(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+  }
+  // ---- approval summary (spec 03 §4) ----
+  /** Forms the approval step summarizes: configured list, else every earlier plain form. */
+  summary_forms(t) {
+    var a;
+    const e = (a = t.approval) == null ? void 0 : a.summary_forms, i = this.visibleForms.filter(
+      (s) => s.form_name !== t.form_name && s.kind !== "approval"
+    );
+    return e ? i.filter((s) => e.includes(s.form_name)) : i.filter((s) => s.order < t.order);
+  }
+  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">
+      <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">
+                  <h4 class="baht-approval-group-title">${r.form_name}</h4>
+                  <baht-form
+                    readonly
+                    .form=${r}
+                    .value=${this.data[r.form_name] ?? {}}
+                    .fieldStates=${this.fieldStatesFor(r.form_name)}
+                  ></baht-form>
+                </section>`
+    )}
+      </div>
+      ${e !== "hidden" ? n`<label class="baht-approval-comment">
+            <span class="baht-approval-comment-label">
+              ${m("comment")}${e === "required" ? m("commentRequiredSuffix") : ""}
+            </span>
+            <textarea
+              rows="3"
+              aria-required=${e === "required" ? "true" : h}
+              aria-invalid=${this.approvalError ? "true" : h}
+              .value=${String(((s = this.data[t.form_name]) == null ? void 0 : s.comment) ?? "")}
+              @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}
+    </div>`;
+  }
+  render() {
+    var s, r;
+    const t = this.currentForm;
+    if (!t) return n`<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
+      class="baht-workflow"
+      data-step=${t.form_name}
+      data-testid="${this.workflow.workflow_id}.${t.form_name}"
+    >
+      <div class="baht-visually-hidden" role="status">
+        ${m("step", { current: a + 1, total: i.length })}
+      </div>
+      ${this.showSteps ? n`<baht-steps
+              .steps=${i.map((o) => o.form_name)}
+              .current=${a}
+              .variant=${this.stepsVariant}
+            ></baht-steps>` : h}
+      ${e ? this.renderApproval(t) : n`<baht-form
+            .form=${t}
+            .value=${this.data[t.form_name] ?? {}}
+            .registry=${this.registry}
+            .fieldStates=${this.fieldStatesFor(t.form_name)}
+            .view=${t.view}
+            @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"
+              data-testid="${this.workflow.workflow_id}.back"
+              @click=${() => this.back()}
+            >
+              ${this.backLabel ?? m("back")}
+            </button>` : h}
+        ${e ? n`<button
+                type="button"
+                class="baht-button baht-button--reject"
+                data-testid="${this.workflow.workflow_id}.reject"
+                @click=${() => this.decide("rejected")}
+              >
+                ${((s = t.approval) == null ? void 0 : s.reject_label) ?? m("reject")}
+              </button>
+              <button
+                type="button"
+                class="baht-button baht-button--next baht-button--approve"
+                data-testid="${this.workflow.workflow_id}.approve"
+                @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"
+              data-testid="${this.workflow.workflow_id}.next"
+              @click=${() => this.next()}
+            >
+              ${this.isLast ? this.submitLabel ?? m("submit") : this.nextLabel ?? m("next")}
+            </button>`}
+      </div>
+    </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([
+  b("baht-workflow")
+], M);
+export {
+  Xe as $,
+  ht as A,
+  Ct as B,
+  Pt as C,
+  Ke as D,
+  rt as E,
+  mt as F,
+  j as G,
+  Ie as H,
+  Ee as I,
+  oe as J,
+  Vt as K,
+  ct as L,
+  ie as M,
+  K as N,
+  Ut as O,
+  Gt 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,
+  cs as Z,
+  nt as _,
+  ft as a,
+  qa as a0,
+  qt as a1,
+  le as a2,
+  Be as a3,
+  be as a4,
+  zt as b,
+  R as c,
+  re as d,
+  Ot as e,
+  tt as f,
+  Ve as g,
+  ae 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,
+  pt as q,
+  Ne as r,
+  dt as s,
+  Q as t,
+  Dt as u,
+  it as v,
+  W as w,
+  ze as x,
+  Re as y,
+  vt as z
+};