bank20baht-ui 0.3.1 → 0.4.0

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

@@ -0,0 +1,4754 @@
+import { nothing as h, html as n, svg as A } from "lit";
+import { property as l, customElement as u, state as y, query as Et } from "lit/decorators.js";
+import { B as $, b as ne, h as q, a as W } from "./base-CajA2aCO.js";
+import { t as v } from "./i18n-BcPL9_Jh.js";
+import { n as ve, k as Lt, o as ps, i as Rt, p as ds, d as se, a as as, m as Me, v as Ae, c as us, g as bs, l as fs } from "./display-DQRcvsn7.js";
+import { repeat as Oe } from "lit/directives/repeat.js";
+import { html as ee, unsafeStatic as is } from "lit/static-html.js";
+import { c as ms, r as U } from "./baht-toast-CD1WrOYr.js";
+import { live as rt } from "lit/directives/live.js";
+import { ifDefined as L } from "lit/directives/if-defined.js";
+import vs from "flatpickr";
+var $s = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, he = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ys(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && $s(e, i, s), s;
+};
+let zt = class extends $ {
+  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([
+  u("baht-badge")
+], zt);
+var gs = Object.defineProperty, ws = Object.getOwnPropertyDescriptor, Ie = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ws(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 && gs(e, i, s), s;
+};
+let ae = class extends $ {
+  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>`;
+  }
+};
+Ie([
+  l()
+], ae.prototype, "variant", 2);
+Ie([
+  l()
+], ae.prototype, "code", 2);
+ae = Ie([
+  u("baht-code")
+], ae);
+var xs = Object.defineProperty, _s = Object.getOwnPropertyDescriptor, $t = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? _s(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 && xs(e, i, s), s;
+};
+let nt = class extends $ {
+  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, m) => c - m), 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>`;
+  }
+};
+$t([
+  l({ type: Number })
+], nt.prototype, "page", 2);
+$t([
+  l({ type: Number, attribute: "total-pages" })
+], nt.prototype, "totalPages", 2);
+$t([
+  l()
+], nt.prototype, "variant", 2);
+$t([
+  l({ type: Number })
+], nt.prototype, "siblings", 2);
+$t([
+  l({ type: Boolean, attribute: "has-next" })
+], nt.prototype, "hasNext", 2);
+$t([
+  l({ type: Boolean, attribute: "has-prev" })
+], nt.prototype, "hasPrev", 2);
+nt = $t([
+  u("baht-pagination")
+], nt);
+var ks = Object.defineProperty, Ps = Object.getOwnPropertyDescriptor, C = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ps(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;
+};
+const Os = " › ", $e = (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 P = class extends $ {
+  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(), q() && 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] = $e(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(Os);
+  }
+  /** The row's value at a dotted key (`requester.department`). */
+  static valueAt(t, e) {
+    let i = t;
+    for (const a of e.split(".")) {
+      if (!$e(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, q() && 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, q() && 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 = P.valueAt(t, e);
+    if (i) return i(a, t);
+    if ($e(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(P.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>`;
+  }
+};
+C([
+  l({ attribute: !1 })
+], P.prototype, "items", 2);
+C([
+  l({ attribute: !1 })
+], P.prototype, "columns", 2);
+C([
+  l({ type: Boolean })
+], P.prototype, "loading", 2);
+C([
+  l({ type: Boolean })
+], P.prototype, "error", 2);
+C([
+  l({ attribute: "error-message" })
+], P.prototype, "errorMessage", 2);
+C([
+  l({ attribute: "empty-message" })
+], P.prototype, "emptyMessage", 2);
+C([
+  l({ type: Boolean, attribute: "show-index" })
+], P.prototype, "showIndex", 2);
+C([
+  l({ type: Number, attribute: "index-offset" })
+], P.prototype, "indexOffset", 2);
+C([
+  l({ type: Number, attribute: "skeleton-rows" })
+], P.prototype, "skeletonRows", 2);
+C([
+  l({ attribute: "row-key" })
+], P.prototype, "rowKey", 2);
+C([
+  l({ type: Boolean })
+], P.prototype, "clickable", 2);
+C([
+  l({ attribute: !1 })
+], P.prototype, "renderers", 2);
+C([
+  l({ attribute: !1 })
+], P.prototype, "visibleColumns", 2);
+C([
+  l({ type: Boolean, attribute: "column-picker" })
+], P.prototype, "columnPicker", 2);
+C([
+  l({ type: Number })
+], P.prototype, "page", 2);
+C([
+  l({ type: Number, attribute: "total-pages" })
+], P.prototype, "totalPages", 2);
+C([
+  l({ type: Boolean, attribute: "cursor-mode" })
+], P.prototype, "cursorMode", 2);
+C([
+  l({ type: Boolean, attribute: "has-next" })
+], P.prototype, "hasNext", 2);
+C([
+  l({ type: Boolean, attribute: "has-prev" })
+], P.prototype, "hasPrev", 2);
+C([
+  y()
+], P.prototype, "pickerOpen", 2);
+C([
+  y()
+], P.prototype, "pickedColumns", 2);
+C([
+  y()
+], P.prototype, "draftColumns", 2);
+C([
+  y()
+], P.prototype, "pickAvail", 2);
+C([
+  y()
+], P.prototype, "pickSel", 2);
+C([
+  y()
+], P.prototype, "expanded", 2);
+P = C([
+  u("baht-table")
+], P);
+var Cs = Object.defineProperty, Ds = Object.getOwnPropertyDescriptor, dt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ds(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 && Cs(e, i, s), s;
+};
+let at = class extends $ {
+  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>`;
+  }
+};
+dt([
+  l({ attribute: !1 })
+], at.prototype, "items", 2);
+dt([
+  l({ type: Boolean })
+], at.prototype, "loading", 2);
+dt([
+  l({ type: Boolean })
+], at.prototype, "error", 2);
+dt([
+  l({ attribute: "error-message" })
+], at.prototype, "errorMessage", 2);
+dt([
+  l({ attribute: "empty-message" })
+], at.prototype, "emptyMessage", 2);
+dt([
+  l({ type: Number, attribute: "skeleton-rows" })
+], at.prototype, "skeletonRows", 2);
+dt([
+  l({ type: Boolean })
+], at.prototype, "clickable", 2);
+at = dt([
+  u("baht-list")
+], at);
+var Fs = Object.defineProperty, Es = Object.getOwnPropertyDescriptor, Wt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Es(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 && Fs(e, i, s), s;
+};
+let _t = class extends $ {
+  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()
+], _t.prototype, "text", 2);
+Wt([
+  l()
+], _t.prototype, "position", 2);
+Wt([
+  Et(".baht-tooltip-anchor")
+], _t.prototype, "anchorEl", 2);
+Wt([
+  y()
+], _t.prototype, "dismissed", 2);
+_t = Wt([
+  u("baht-tooltip")
+], _t);
+var Bs = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, Bt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Is(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Bs(e, i, s), s;
+};
+let bt = class extends $ {
+  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"), ms(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=${v("dismiss")} @click=${() => this.dismiss()}>×</button>` : h}
+    </div>`;
+  }
+};
+Bt([
+  l()
+], bt.prototype, "tone", 2);
+Bt([
+  l()
+], bt.prototype, "heading", 2);
+Bt([
+  l()
+], bt.prototype, "message", 2);
+Bt([
+  l({ type: Boolean })
+], bt.prototype, "dismissible", 2);
+Bt([
+  y()
+], bt.prototype, "dismissed", 2);
+bt = Bt([
+  u("baht-alert")
+], bt);
+var js = Object.defineProperty, Ss = Object.getOwnPropertyDescriptor, It = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ss(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && js(e, i, s), s;
+};
+let ft = class extends $ {
+  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>`;
+  }
+};
+It([
+  l({ type: Number })
+], ft.prototype, "value", 2);
+It([
+  l({ type: Number })
+], ft.prototype, "max", 2);
+It([
+  l({ type: Boolean })
+], ft.prototype, "readonly", 2);
+It([
+  l()
+], ft.prototype, "label", 2);
+It([
+  y()
+], ft.prototype, "hover", 2);
+ft = It([
+  u("baht-rating")
+], ft);
+var Ts = Object.defineProperty, Ms = Object.getOwnPropertyDescriptor, ut = (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 && Ts(e, i, s), s;
+};
+let it = class extends $ {
+  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=${rt(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>`;
+  }
+};
+ut([
+  l({ type: Number })
+], it.prototype, "value", 2);
+ut([
+  l({ type: Number })
+], it.prototype, "min", 2);
+ut([
+  l({ type: Number })
+], it.prototype, "max", 2);
+ut([
+  l({ type: Number })
+], it.prototype, "step", 2);
+ut([
+  l()
+], it.prototype, "label", 2);
+ut([
+  l({ type: Boolean })
+], it.prototype, "disabled", 2);
+ut([
+  l({ type: Boolean, attribute: "show-value" })
+], it.prototype, "showValue", 2);
+it = ut([
+  u("baht-range")
+], it);
+var As = Object.defineProperty, Ls = Object.getOwnPropertyDescriptor, jt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ls(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 && As(e, i, s), s;
+};
+let mt = class extends $ {
+  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=${v("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>`;
+  }
+};
+jt([
+  l({ type: Number })
+], mt.prototype, "length", 2);
+jt([
+  l()
+], mt.prototype, "value", 2);
+jt([
+  l({ type: Boolean })
+], mt.prototype, "disabled", 2);
+jt([
+  l()
+], mt.prototype, "mode", 2);
+jt([
+  l()
+], mt.prototype, "label", 2);
+mt = jt([
+  u("baht-otp")
+], mt);
+var Ns = Object.defineProperty, qs = Object.getOwnPropertyDescriptor, St = (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 && Ns(e, i, s), s;
+};
+let vt = class extends $ {
+  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>`;
+  }
+};
+St([
+  l({ attribute: !1 })
+], vt.prototype, "options", 2);
+St([
+  l({ attribute: !1 })
+], vt.prototype, "selected", 2);
+St([
+  l({ type: Boolean })
+], vt.prototype, "multiple", 2);
+St([
+  l({ type: Boolean })
+], vt.prototype, "disabled", 2);
+St([
+  l()
+], vt.prototype, "label", 2);
+vt = St([
+  u("baht-filter")
+], vt);
+var Rs = Object.defineProperty, zs = Object.getOwnPropertyDescriptor, ce = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? zs(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 && Rs(e, i, s), s;
+};
+let Vt = class extends $ {
+  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([
+  u("baht-skeleton")
+], Vt);
+var Vs = Object.defineProperty, Ks = Object.getOwnPropertyDescriptor, Jt = (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 && Vs(e, i, s), s;
+};
+let kt = class extends $ {
+  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 })
+], kt.prototype, "value", 2);
+Jt([
+  l()
+], kt.prototype, "tone", 2);
+Jt([
+  l({ type: Boolean, attribute: "show-label" })
+], kt.prototype, "showLabel", 2);
+Jt([
+  l()
+], kt.prototype, "label", 2);
+kt = Jt([
+  u("baht-progress")
+], kt);
+var Us = Object.defineProperty, Hs = Object.getOwnPropertyDescriptor, je = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Hs(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 && Us(e, i, s), s;
+};
+let ie = class extends $ {
+  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>`;
+  }
+};
+je([
+  l()
+], ie.prototype, "size", 2);
+je([
+  l()
+], ie.prototype, "label", 2);
+ie = je([
+  u("baht-spinner")
+], ie);
+var Gs = Object.defineProperty, Ws = Object.getOwnPropertyDescriptor, Yt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ws(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 && Gs(e, i, s), s;
+};
+let Pt = class extends $ {
+  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()
+], Pt.prototype, "heading", 2);
+Yt([
+  l()
+], Pt.prototype, "subtitle", 2);
+Yt([
+  l({ type: Boolean })
+], Pt.prototype, "hero", 2);
+Yt([
+  Et(".baht-card-body")
+], Pt.prototype, "bodyEl", 2);
+Pt = Yt([
+  u("baht-card")
+], Pt);
+var Js = Object.defineProperty, Ys = Object.getOwnPropertyDescriptor, pe = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ys(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Js(e, i, s), s;
+};
+let Kt = class extends $ {
+  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([
+  Et(".baht-fieldset-body")
+], Kt.prototype, "bodyEl", 2);
+Kt = pe([
+  u("baht-fieldset")
+], Kt);
+var Xs = Object.defineProperty, Zs = Object.getOwnPropertyDescriptor, rs = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Zs(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 && Xs(e, i, s), s;
+};
+let Ce = class extends $ {
+  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>`;
+  }
+};
+rs([
+  l({ attribute: !1 })
+], Ce.prototype, "items", 2);
+Ce = rs([
+  u("baht-timeline")
+], Ce);
+var Qs = Object.defineProperty, ta = Object.getOwnPropertyDescriptor, de = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ta(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 Ot = class extends $ {
+  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 = Ot.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 })
+], Ot.prototype, "items", 2);
+de([
+  l({ type: Boolean })
+], Ot.prototype, "multiple", 2);
+de([
+  y()
+], Ot.prototype, "openSet", 2);
+Ot = de([
+  u("baht-accordion")
+], Ot);
+var ea = Object.defineProperty, sa = Object.getOwnPropertyDescriptor, Xt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? sa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && ea(e, i, s), s;
+};
+let Ct = class extends $ {
+  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()
+], Ct.prototype, "href", 2);
+Xt([
+  l()
+], Ct.prototype, "label", 2);
+Xt([
+  l({ type: Boolean })
+], Ct.prototype, "external", 2);
+Xt([
+  l({ attribute: "external-hint" })
+], Ct.prototype, "externalHint", 2);
+Ct = Xt([
+  u("baht-link")
+], Ct);
+var aa = Object.defineProperty, ia = Object.getOwnPropertyDescriptor, Se = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ia(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && aa(e, i, s), s;
+};
+let re = class extends $ {
+  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>`;
+  }
+};
+Se([
+  l({ attribute: !1 })
+], re.prototype, "items", 2);
+Se([
+  l()
+], re.prototype, "separator", 2);
+re = Se([
+  u("baht-breadcrumbs")
+], re);
+var ra = Object.getOwnPropertyDescriptor, oa = (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 = o(s) || s);
+  return s;
+};
+let Le = class extends W {
+  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=${rt(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)}
+    />`;
+  }
+};
+Le = oa([
+  u("baht-input")
+], Le);
+var la = Object.getOwnPropertyDescriptor, na = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? la(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let Ne = class extends W {
+  renderControl() {
+    return n`<textarea
+      class="baht-control baht-control--textarea"
+      id=${this.controlId}
+      .value=${rt(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>`;
+  }
+};
+Ne = na([
+  u("baht-textarea")
+], Ne);
+var ha = Object.getOwnPropertyDescriptor, ca = (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 = o(s) || s);
+  return s;
+};
+let qe = class extends W {
+  renderControl() {
+    return n`<input
+      class="baht-control baht-control--number"
+      id=${this.controlId}
+      type="number"
+      .value=${rt(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));
+    }}
+    />`;
+  }
+};
+qe = ca([
+  u("baht-number")
+], qe);
+var pa = Object.defineProperty, da = Object.getOwnPropertyDescriptor, Te = (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 && pa(e, i, s), s;
+};
+const ua = 500;
+let oe = class extends W {
+  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), q() && 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 ?? v("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, q() && document.addEventListener("mousedown", this.onDocMousedown));
+  }
+  close() {
+    this.open && (this.open = !1, q() && 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 = "", ua);
+    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([
+  y()
+], oe.prototype, "open", 2);
+Te([
+  y()
+], oe.prototype, "active", 2);
+oe = Te([
+  u("baht-select")
+], oe);
+var ba = Object.getOwnPropertyDescriptor, fa = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ba(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let Re = class extends W {
+  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=${rt(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>`;
+  }
+};
+Re = fa([
+  u("baht-multiselect")
+], Re);
+var ma = Object.getOwnPropertyDescriptor, va = (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 = o(s) || s);
+  return s;
+};
+let ze = class extends W {
+  /** 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=${rt(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>`;
+  }
+};
+ze = va([
+  u("baht-checkbox")
+], ze);
+var $a = Object.getOwnPropertyDescriptor, ya = (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 Ve = class extends W {
+  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=${rt(this.value === t.key)}
+            ?disabled=${this.disabled || this.readonly}
+            @change=${() => this.emitInput(t.key)}
+          />
+          <span>${t.label}</span>
+        </label>`
+    )}
+    </div>`;
+  }
+};
+Ve = ya([
+  u("baht-radio")
+], Ve);
+var ga = Object.getOwnPropertyDescriptor, wa = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ga(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let Ke = class extends W {
+  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=${rt(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>`;
+  }
+};
+Ke = wa([
+  u("baht-toggle")
+], Ke);
+var xa = Object.getOwnPropertyDescriptor, _a = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? xa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = o(s) || s);
+  return s;
+};
+let Ue = class extends W {
+  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 = vs(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);
+    Ge(this.fp.selectedDates, t) || (t.length === 0 ? this.fp.clear(!1) : this.fp.setDate(t, !1));
+  }
+  options() {
+    const t = this.field, e = ve(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: We(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 = v("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 = v("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 = xt(/* @__PURE__ */ new Date()), e = Lt(this.field.min), i = Lt(this.field.max);
+    if (e && t < xt(e) || i && t > xt(i)) return !1;
+    for (const a of We(this.field) ?? [])
+      if (a instanceof Date) {
+        if (He(a, t)) return !1;
+      } else if (typeof a == "function") {
+        if (a(t)) return !1;
+      } else if (typeof a == "object" && "from" in a) {
+        const s = xt(new Date(a.from)), r = xt(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 = xt(/* @__PURE__ */ new Date());
+    switch (ve(this.field)) {
+      case "range":
+        t.setDate([e, e], !0);
+        break;
+      case "multiple": {
+        t.selectedDates.some((a) => He(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);
+    Ge(t, e) || (this.lastEmitted = [...t], this.emitInput(this.toValue(t)));
+  }
+  /** Host value (any mode) -> the Date list flatpickr works with. */
+  datesOf(t) {
+    return ps(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 (ve(this.field)) {
+      case "range":
+        return e.length === 2 ? [e[0], e[1]] : null;
+      case "multiple":
+        return e;
+      default:
+        return e[0] ?? null;
+    }
+  }
+};
+Ue = _a([
+  u("baht-datepicker")
+], Ue);
+function xt(t) {
+  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+}
+function He(t, e) {
+  return Rt(t) === Rt(e);
+}
+function Ge(t, e) {
+  return t.length !== e.length ? !1 : t.every((i, a) => Rt(i) === Rt(e[a]));
+}
+function We(t) {
+  const e = [];
+  for (const a of t.disabled_dates ?? []) {
+    const s = ds(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 ka = Object.defineProperty, Pa = Object.getOwnPropertyDescriptor, Zt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Pa(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 && ka(e, i, s), s;
+};
+function Je(t) {
+  return t !== null && typeof t == "object" && typeof t.url == "string";
+}
+function ye(t) {
+  return t >= 1024 * 1024 ? `${(t / 1024 / 1024).toFixed(1)} MB` : t >= 1024 ? `${Math.round(t / 1024)} KB` : `${t} B`;
+}
+let Dt = class extends W {
+  constructor() {
+    super(...arguments), this.uploadingCount = 0, this.uploadError = null, this.rejectedNames = [];
+  }
+  get refs() {
+    return Array.isArray(this.value) ? this.value.filter(Je) : Je(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 = v("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(v("uploadMaxSize", { size: ye(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">${U("upload")}</span>
+        <span class="baht-dropzone-text">
+          <label class="baht-dropzone-action" for=${this.controlId}
+            >${this.field.multiple ? v("chooseFiles") : v("chooseFile")}</label
+          >
+          <span class="baht-dropzone-or">${v("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">${v("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">
+              ${v("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">${ye(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"> (${v("opensInNewTab")})</span></a
+          >
+          <span class="baht-file-size">${ye(a.size)}</span>
+          ${this.disabled || this.readonly ? h : n`<button
+                type="button"
+                class="baht-file-remove"
+                aria-label=${v("removeFile")}
+                title=${v("removeFile")}
+                @click=${() => this.emitRefs(this.refs.filter((s) => s !== a))}
+              >
+                ${U("close")}
+              </button>`}
+        </span>`
+    )}`;
+  }
+};
+Zt([
+  l({ attribute: !1 })
+], Dt.prototype, "uploader", 2);
+Zt([
+  y()
+], Dt.prototype, "uploadingCount", 2);
+Zt([
+  y()
+], Dt.prototype, "uploadError", 2);
+Zt([
+  y()
+], Dt.prototype, "rejectedNames", 2);
+Dt = Zt([
+  u("baht-file")
+], Dt);
+var Oa = Object.defineProperty, Ca = Object.getOwnPropertyDescriptor, I = (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 = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Oa(e, i, s), s;
+};
+function Da(t, e) {
+  return e.split(".").reduce((i, a) => {
+    if (i !== null && typeof i == "object") return i[a];
+  }, t);
+}
+function Fa(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 ? Da(a, e) : a;
+    return typeof s == "string" && s ? s : null;
+  } catch {
+    return /^(https?:\/\/|\/|data:|blob:)/.test(i) ? i : null;
+  }
+}
+function Ea(t) {
+  const i = (t.split(/[?#]/)[0] ?? t).split("/").filter(Boolean).pop() ?? t;
+  try {
+    return decodeURIComponent(i);
+  } catch {
+    return i;
+  }
+}
+function ge(t) {
+  return t >= 1024 * 1024 ? `${(t / 1024 / 1024).toFixed(1)} MB` : t >= 1024 ? `${Math.round(t / 1024)} KB` : `${t} B`;
+}
+let F = class extends $ {
+  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: Ea(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 ? Fa(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 = v("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(v("uploadMaxSize", { size: ge(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">${U("upload")}</span>
+        <span class="baht-dropzone-text">
+          <label class="baht-dropzone-action" for=${this.inputId}
+            >${this.multiple ? v("chooseFiles") : v("chooseFile")}</label
+          >
+          <span class="baht-dropzone-or">${v("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">
+              ${v("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">${U("check")}</span>
+      <a class="baht-file-name" href=${t} target="_blank" rel="noreferrer"
+        >${e.name}<span class="baht-visually-hidden"> (${v("opensInNewTab")})</span></a
+      >
+      ${e.size > 0 ? n`<span class="baht-file-size">${ge(e.size)}</span>` : h}
+      ${this.disabled ? h : n`<button
+              type="button"
+              class="baht-file-remove"
+              aria-label=${v("removeFile")}
+              title=${v("removeFile")}
+              @click=${() => this.emitValue(this.urls.filter((i) => i !== t))}
+            >
+              ${U("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">${ge(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)}>
+                ${v("retry")}
+              </button>
+              <button
+                type="button"
+                class="baht-file-remove"
+                aria-label=${v("removeFile")}
+                title=${v("removeFile")}
+                @click=${() => this.dismiss(t)}
+              >
+                ${U("close")}
+              </button>` : n`<span
+              class="baht-upload-bar"
+              role="progressbar"
+              aria-label=${v("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>`;
+  }
+};
+I([
+  l()
+], F.prototype, "url", 2);
+I([
+  l()
+], F.prototype, "method", 2);
+I([
+  l({ attribute: "field-name" })
+], F.prototype, "fieldName", 2);
+I([
+  l({ attribute: "response-key" })
+], F.prototype, "responseKey", 2);
+I([
+  l({ attribute: !1 })
+], F.prototype, "headers", 2);
+I([
+  l({ type: Boolean, attribute: "with-credentials" })
+], F.prototype, "withCredentials", 2);
+I([
+  l({ attribute: !1 })
+], F.prototype, "value", 2);
+I([
+  l()
+], F.prototype, "label", 2);
+I([
+  l()
+], F.prototype, "hint", 2);
+I([
+  l()
+], F.prototype, "accept", 2);
+I([
+  l({ type: Boolean })
+], F.prototype, "multiple", 2);
+I([
+  l({ type: Number, attribute: "max-size" })
+], F.prototype, "maxSize", 2);
+I([
+  l({ type: Boolean })
+], F.prototype, "disabled", 2);
+I([
+  l({ type: Boolean })
+], F.prototype, "required", 2);
+I([
+  l()
+], F.prototype, "error", 2);
+I([
+  y()
+], F.prototype, "pending", 2);
+I([
+  y()
+], F.prototype, "rejectedNames", 2);
+I([
+  y()
+], F.prototype, "dragging", 2);
+F = I([
+  u("baht-upload")
+], F);
+var Ba = Object.defineProperty, Ia = Object.getOwnPropertyDescriptor, os = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ia(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && Ba(e, i, s), s;
+};
+let De = class extends $ {
+  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>`;
+  }
+};
+os([
+  l({ attribute: !1 })
+], De.prototype, "field", 2);
+De = os([
+  u("baht-text")
+], De);
+var ja = Object.defineProperty, Sa = Object.getOwnPropertyDescriptor, ls = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Sa(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && ja(e, i, s), s;
+};
+let Fe = class extends $ {
+  render() {
+    return this.field ? n`<div class="baht-section">
+      <span class="baht-section-label">${this.field.text ?? this.field.label ?? ""}</span>
+    </div>` : h;
+  }
+};
+ls([
+  l({ attribute: !1 })
+], Fe.prototype, "field", 2);
+Fe = ls([
+  u("baht-section")
+], Fe);
+var Ta = Object.defineProperty, Ma = Object.getOwnPropertyDescriptor, ue = (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 && Ta(e, i, s), s;
+};
+let Ut = class extends $ {
+  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([
+  u("baht-stat-chart")
+], Ut);
+var Aa = 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 && Aa(e, i, s), s;
+};
+const La = 10;
+function lt(t, e) {
+  return e && t === 0 ? e : `var(--baht-chart-${t % La + 1})`;
+}
+function Ye(t, e = 5) {
+  return `var(--baht-chart-seq-${Math.min(e - 1, Math.max(0, t)) + 1})`;
+}
+function qt(t, e = "number", i = "THB") {
+  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 Ee(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 Na(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 Q extends $ {
+  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, m;
+    if (typeof o.clientX == "number" && (o.clientX !== 0 || o.clientY !== 0))
+      c = o.clientX - r.left, m = 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, m = p ? p.top - r.top : 0;
+    }
+    a.style.left = `${Math.round(c)}px`, a.style.top = `${Math.round(m)}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" })
+], Q.prototype, "emptyMessage");
+Tt([
+  l({ type: Boolean, reflect: !0 })
+], Q.prototype, "loading");
+Tt([
+  l({ type: Boolean, attribute: "show-table" })
+], Q.prototype, "showTable");
+Tt([
+  l()
+], Q.prototype, "format");
+Tt([
+  l()
+], Q.prototype, "currency");
+Tt([
+  Et(".baht-chart-tooltip")
+], Q.prototype, "tipEl");
+var qa = Object.defineProperty, Ra = Object.getOwnPropertyDescriptor, yt = (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 && qa(e, i, s), s;
+};
+let ht = class extends $ {
+  constructor() {
+    super(...arguments), this.values = [], this.width = 96, this.height = 24, this.accentLast = !0, this.color = "", this.label = "";
+  }
+  render() {
+    const t = (this.values ?? []).filter((k) => Number.isFinite(k));
+    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]), m = t.map((k, b) => `${o(b).toFixed(2)},${c(k).toFixed(2)}`).join(" "), g = o(t.length - 1), _ = c(t[t.length - 1]), p = this.color || "var(--baht-chart-muted)", f = 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=${f}
+    >
+      ${A`<polyline class="baht-sparkline-line" points=${m} 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>`;
+  }
+};
+yt([
+  l({ type: Array })
+], ht.prototype, "values", 2);
+yt([
+  l({ type: Number })
+], ht.prototype, "width", 2);
+yt([
+  l({ type: Number })
+], ht.prototype, "height", 2);
+yt([
+  l({ type: Boolean, attribute: "accent-last" })
+], ht.prototype, "accentLast", 2);
+yt([
+  l()
+], ht.prototype, "color", 2);
+yt([
+  l()
+], ht.prototype, "label", 2);
+ht = yt([
+  u("baht-sparkline")
+], ht);
+var za = Object.defineProperty, Va = Object.getOwnPropertyDescriptor, J = (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 = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && za(e, i, s), s;
+};
+let z = class extends $ {
+  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>`;
+  }
+};
+J([
+  l()
+], z.prototype, "label", 2);
+J([
+  l({ type: Number })
+], z.prototype, "value", 2);
+J([
+  l()
+], z.prototype, "format", 2);
+J([
+  l()
+], z.prototype, "currency", 2);
+J([
+  l({ type: Number })
+], z.prototype, "delta", 2);
+J([
+  l({ attribute: "delta-kind" })
+], z.prototype, "deltaKind", 2);
+J([
+  l({ attribute: "delta-label" })
+], z.prototype, "deltaLabel", 2);
+J([
+  l({ type: Boolean, attribute: "up-is-good" })
+], z.prototype, "upIsGood", 2);
+J([
+  l({ type: Array })
+], z.prototype, "trend", 2);
+J([
+  l()
+], z.prototype, "size", 2);
+z = J([
+  u("baht-stat")
+], z);
+var Ka = Object.defineProperty, Ua = Object.getOwnPropertyDescriptor, Mt = (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 && Ka(e, i, s), s;
+};
+const Xe = 6;
+let H = class extends Q {
+  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 = Na(t, Xe, this.otherLabel), i = e.reduce((p, f) => p + f.count, 0) || 1, a = this.total ?? t.reduce((p, f) => p + f.count, 0), s = H.R, r = 2 * Math.PI * s, o = e.length > 1 ? H.GAP : 0, c = t.length > Xe;
+    let m = 0;
+    const g = e.map((p, f) => {
+      const k = p.count / i, b = Math.max(0, k * r - o), w = {
+        ...p,
+        frac: k,
+        dash: `${b} ${r - b}`,
+        offset: -m * r,
+        // the folded tail is grey — never a generated ninth hue
+        color: c && f === e.length - 1 ? "var(--baht-chart-muted)" : lt(f, this.color || void 0)
+      };
+      return m += k, w;
+    }), _ = `${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>`;
+  }
+};
+H.R = 54;
+H.GAP = 2;
+Mt([
+  l({ attribute: !1 })
+], H.prototype, "groups", 2);
+Mt([
+  l({ type: Number })
+], H.prototype, "total", 2);
+Mt([
+  l()
+], H.prototype, "color", 2);
+Mt([
+  l({ attribute: "center-label" })
+], H.prototype, "centerLabel", 2);
+Mt([
+  l({ attribute: "other-label" })
+], H.prototype, "otherLabel", 2);
+H = Mt([
+  u("baht-donut-chart")
+], H);
+var Ha = Object.defineProperty, Ga = Object.getOwnPropertyDescriptor, K = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ga(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 && Ha(e, i, s), s;
+};
+const Ze = 24;
+let R = class extends Q {
+  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 = "";
+  }
+  /** 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)" : lt(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, m) => e ? t.reduce((g, _) => g + (_.values[m] ?? 0), 0) : Math.max(...t.map((g) => g.values[m] ?? 0))
+    ), r = Math.max(
+      1,
+      ...s,
+      ...this.compare ?? [],
+      ...(this.markers ?? []).map((c) => c.value)
+    );
+    if (i) return r;
+    const o = Ee(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 m;
+        const c = [
+          e[o] || "(empty)",
+          ...t.map((g) => this.fmt(g.values[o] ?? 0))
+        ];
+        return (m = this.compare) != null && m.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, m = (this.stacked ? 1 : e.length) + (c ? 1 : 0), g = Math.min(Ze, Math.max(6, Math.floor(48 / m))), _ = Array.from({ length: r }, (p, f) => {
+      const k = i[f] || "(empty)", b = e.reduce((O, At) => O + (At.values[f] ?? 0), 0), w = `${k}: ${e.map((O) => `${O.name ? `${O.name} ` : ""}${this.fmt(O.values[f] ?? 0)}`).join(", ")}${c ? `, previous ${this.fmt(this.compare[f] ?? 0)}` : ""}`, D = e.map((O, At) => ({
+        value: O.values[f] ?? 0,
+        color: this.colorFor(At, f, s),
+        name: O.name
+      }));
+      return n`<div class="baht-bar-chart-row">
+        <span class="baht-bar-chart-label" title=${k}>${k}</span>
+        <div
+          class="baht-bar-chart-track${this.stacked ? " baht-bar-chart-track--stacked" : ""}"
+          tabindex="0"
+          role="button"
+          aria-label=${w}
+          @pointermove=${(O) => this.showTip(O, w)}
+          @pointerleave=${() => this.hideTip()}
+          @focus=${(O) => this.showTip(O, w)}
+          @blur=${() => this.hideTip()}
+        >
+          ${this.markerOverlay(o, k)}
+          <div class="baht-bar-chart-bars">
+            ${this.stacked ? n`<div class="baht-bar-chart-stack" style=${`height:${g}px`}>
+                    ${D.map(
+        (O) => n`<div
+                        class="baht-bar-chart-bar baht-bar-chart-bar--segment"
+                        style=${`width:${Math.max(0, O.value / o * 100)}%;background:${O.color}`}
+                      ></div>`
+      )}
+                  </div>` : D.map(
+        (O) => n`<div
+                      class="baht-bar-chart-bar"
+                      style=${`width:${Math.max(2, O.value / o * 100)}%;height:${g}px;background:${O.color}`}
+                    ></div>`
+      )}
+            ${c ? n`<div
+                    class="baht-bar-chart-bar baht-bar-chart-bar--compare"
+                    style=${`width:${Math.max(2, (this.compare[f] ?? 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[f] ?? 0 : this.fmt(this.stacked ? b : e[0].values[f] ?? 0)}</span
+              >` : h}
+      </div>`;
+    });
+    return n`<div class=${this.rootClass("baht-bar-chart")}>
+      ${_}
+      ${this.renderTooltip()}
+      ${this.renderLegend(e.map((p, f) => ({ label: p.name, color: lt(f, 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((f) => f.values.length)), o = this.domainMax(e, this.stacked, a), c = Ee(o, 4), m = (this.compare ?? []).length > 0, g = (this.stacked ? 1 : e.length) + (m ? 1 : 0), _ = Math.min(Ze, Math.max(4, Math.floor(48 / g))), p = this.label || `Column chart, ${r} categories. ${i.map((f, k) => `${f} ${this.fmt(e[0].values[k] ?? 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=${p}>
+        <div class="baht-bar-chart-yaxis" aria-hidden="true">
+          ${[...c].reverse().map((f) => n`<span class="baht-chart-tick-text">${this.fmt(f)}</span>`)}
+        </div>
+        <div class="baht-bar-chart-grid">
+          ${(this.markers ?? []).filter((f) => !f.category).map(
+      (f) => n`<span
+                class="baht-bar-chart-marker baht-bar-chart-marker--horizontal"
+                style=${`bottom:${Math.min(100, f.value / o * 100).toFixed(2)}%`}
+                title=${f.label ?? this.fmt(f.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 }, (f, k) => {
+      const b = i[k] || "(empty)", w = `${b}: ${e.map((D) => `${D.name ? `${D.name} ` : ""}${this.fmt(D.values[k] ?? 0)}`).join(", ")}`;
+      return n`<div
+                class="baht-bar-chart-column"
+                tabindex="0"
+                role="button"
+                aria-label=${w}
+                @pointermove=${(D) => this.showTip(D, w)}
+                @pointerleave=${() => this.hideTip()}
+                @focus=${(D) => this.showTip(D, w)}
+                @blur=${() => this.hideTip()}
+              >
+                <div class="baht-bar-chart-column-bars">
+                  ${e.map(
+        (D, O) => n`<div
+                      class="baht-bar-chart-col"
+                      style=${`height:${Math.max(1, (D.values[k] ?? 0) / o * 100)}%;width:${_}px;background:${this.colorFor(O, k, s)}`}
+                    ></div>`
+      )}
+                  ${m ? n`<div
+                          class="baht-bar-chart-col baht-bar-chart-col--compare"
+                          style=${`height:${Math.max(1, (this.compare[k] ?? 0) / o * 100)}%;width:${Math.min(8, _)}px`}
+                        ></div>` : h}
+                </div>
+                <span class="baht-bar-chart-xlabel">${b}</span>
+              </div>`;
+    })}
+          </div>
+        </div>
+      </div>
+      ${this.renderTooltip()}
+      ${this.renderLegend(e.map((f, k) => ({ label: f.name, color: lt(k, f.color) })))}
+      ${this.tableTwin(e, i, r)}
+    </div>`;
+  }
+};
+K([
+  l({ attribute: !1 })
+], R.prototype, "groups", 2);
+K([
+  l({ attribute: !1 })
+], R.prototype, "series", 2);
+K([
+  l({ attribute: !1 })
+], R.prototype, "categories", 2);
+K([
+  l()
+], R.prototype, "orientation", 2);
+K([
+  l({ type: Boolean })
+], R.prototype, "stacked", 2);
+K([
+  l({ attribute: !1 })
+], R.prototype, "compare", 2);
+K([
+  l({ attribute: !1 })
+], R.prototype, "markers", 2);
+K([
+  l({ attribute: "label-values" })
+], R.prototype, "labelValues", 2);
+K([
+  l({ type: Number })
+], R.prototype, "emphasis", 2);
+K([
+  l()
+], R.prototype, "color", 2);
+K([
+  l()
+], R.prototype, "label", 2);
+R = K([
+  u("baht-bar-chart")
+], R);
+var Wa = Object.defineProperty, Ja = Object.getOwnPropertyDescriptor, ot = (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 && Wa(e, i, s), s;
+};
+const Qe = 640, we = 260, B = { top: 14, right: 72, bottom: 30, left: 60 };
+let Z = class extends Q {
+  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: Qe - B.left - B.right, h: we - B.top - B.bottom };
+  }
+  render() {
+    const t = this.hold({
+      series: (this.series ?? []).filter((d) => {
+        var x;
+        return d && ((x = d.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((d) => d.values.length)), s = e.flatMap((d) => d.values).filter((d) => Number.isFinite(d)), r = Math.max(0, ...s, ...(this.markers ?? []).map((d) => d.value)), o = Ee(r, 4), c = o[o.length - 1] ?? 1, { w: m, h: g } = this.plot, _ = le([0, Math.max(1, a - 1)], [B.left, B.left + m]), p = le([0, c], [B.top + g, B.top]), f = Math.max(0, a - 1 - Math.max(0, this.forecast)), k = (d, x, X) => d.slice(x, X + 1).map((et, st) => `${st === 0 ? "M" : "L"}${_(x + st).toFixed(2)},${p(et).toFixed(2)}`).join(" "), b = e.map((d, x) => ({
+      i: x,
+      name: d.name,
+      value: d.values[d.values.length - 1] ?? 0,
+      yPos: p(d.values[d.values.length - 1] ?? 0),
+      color: lt(x, d.color)
+    })), w = [...b].sort((d, x) => d.yPos - x.yPos), D = w.some((d, x) => x > 0 && d.yPos - w[x - 1].yPos < 15), O = this.labelValues === "ends" && !D, At = Math.max(1, Math.ceil(a / 8)), cs = this.label || `Line chart, ${e.length} series over ${a} points. ${e.map((d, x) => `${d.name}: ${this.fmt(b[x].value)} at the end`).join(". ")}`;
+    return n`<div class=${this.rootClass("baht-line-chart")}>
+      <svg
+        class="baht-chart-svg"
+        viewBox="0 0 ${Qe} ${we}"
+        preserveAspectRatio="xMidYMid meet"
+        role="img"
+        aria-label=${cs}
+      >
+        ${o.map(
+      (d) => A`
+            <line class="baht-chart-grid-line" x1=${B.left} x2=${B.left + m}
+              y1=${p(d).toFixed(2)} y2=${p(d).toFixed(2)}/>
+            <text class="baht-chart-tick" x=${B.left - 8} y=${(p(d) + 4).toFixed(2)}
+              text-anchor="end">${this.fmt(d)}</text>`
+    )}
+        ${this.baseline != null ? [
+      A`<line class="baht-chart-baseline" x1=${B.left} x2=${B.left + m}
+              y1=${p(this.baseline).toFixed(2)} y2=${p(this.baseline).toFixed(2)}/>`
+    ] : []}
+        ${(this.markers ?? []).map(
+      (d) => A`
+            <line class="baht-chart-marker-line" x1=${B.left} x2=${B.left + m}
+              y1=${p(d.value).toFixed(2)} y2=${p(d.value).toFixed(2)}/>
+            <text class="baht-chart-marker-label" x=${B.left + m} y=${(p(d.value) - 5).toFixed(2)}
+              text-anchor="end">${d.label ?? this.fmt(d.value)}</text>`
+    )}
+        ${this.area && e.length === 1 ? A`<path class="baht-chart-area" fill=${lt(0, e[0].color)}
+                d=${`${k(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((d, x) => {
+      const X = lt(x, d.color), et = [
+        A`<path class="baht-chart-line" d=${k(d.values, 0, f)} stroke=${X} fill="none"/>`
+      ];
+      return f < a - 1 && et.push(
+        A`<path class="baht-chart-line baht-chart-line--forecast" d=${k(d.values, f, a - 1)}
+                stroke=${X} fill="none"/>`
+      ), et.push(
+        A`<circle class="baht-chart-end-dot" cx=${_(a - 1).toFixed(2)}
+              cy=${p(d.values[d.values.length - 1] ?? 0).toFixed(2)} r="4" fill=${X}/>`
+      ), et;
+    })}
+        ${O ? b.map(
+      (d) => A`
+                  <text class="baht-chart-end-label" x=${_(a - 1) + 10} y=${(d.yPos + 4).toFixed(2)}
+                    text-anchor="start">${this.fmt(d.value)}</text>`
+    ) : h}
+        ${i.map(
+      (d, x) => x % At === 0 ? A`<text class="baht-chart-tick" x=${_(x).toFixed(2)} y=${we - 10} text-anchor="middle">${d}</text>` : h
+    )}
+        ${Array.from({ length: a }, (d, x) => {
+      const X = m / Math.max(1, a - 1), et = `${i[x] ?? `Point ${x + 1}`}: ${e.map((st) => `${st.name} ${this.fmt(st.values[x] ?? 0)}`).join(", ")}`;
+      return A`<rect class="baht-chart-hit" x=${(_(x) - X / 2).toFixed(2)} y=${B.top}
+            width=${Math.max(24, X).toFixed(2)} height=${g} tabindex="0" role="button"
+            aria-label=${et}
+            @pointermove=${(st) => this.onHover(st, x, et)}
+            @pointerleave=${() => this.onLeave()}
+            @focus=${(st) => this.onHover(st, x, et)}
+            @blur=${() => this.onLeave()}/>`;
+    })}
+        ${this.crosshairAt != null ? A`<line class="baht-chart-crosshair" x1=${_(this.crosshairAt).toFixed(2)}
+                x2=${_(this.crosshairAt).toFixed(2)} y1=${B.top} y2=${B.top + g}/>` : h}
+      </svg>
+      ${this.renderTooltip()}
+      ${this.renderLegend(
+      e.map((d, x) => ({ label: d.name, color: lt(x, d.color) })),
+      "line"
+    )}
+      ${this.showTable ? be(
+      this.label || "Line chart data",
+      ["Point", ...e.map((d) => d.name)],
+      Array.from({ length: a }, (d, x) => [
+        i[x] ?? `Point ${x + 1}`,
+        ...e.map((X) => this.fmt(X.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();
+  }
+};
+ot([
+  l({ attribute: !1 })
+], Z.prototype, "series", 2);
+ot([
+  l({ attribute: !1 })
+], Z.prototype, "categories", 2);
+ot([
+  l({ type: Boolean })
+], Z.prototype, "area", 2);
+ot([
+  l({ attribute: !1 })
+], Z.prototype, "markers", 2);
+ot([
+  l({ type: Number })
+], Z.prototype, "forecast", 2);
+ot([
+  l({ type: Number })
+], Z.prototype, "baseline", 2);
+ot([
+  l({ attribute: "label-values" })
+], Z.prototype, "labelValues", 2);
+ot([
+  l()
+], Z.prototype, "label", 2);
+Z = ot([
+  u("baht-line-chart")
+], Z);
+var Ya = Object.defineProperty, Xa = Object.getOwnPropertyDescriptor, gt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Xa(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 && Ya(e, i, s), s;
+};
+const xe = 22, Nt = 24, ts = 34, _e = 18, Za = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+function ke(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 Pe(t) {
+  return t.toISOString().slice(0, 10);
+}
+let ct = class extends Q {
+  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) => ke(a.date)).filter((a) => !!a), e = ke(this.from) ?? (t.length ? new Date(Math.min(...t.map((a) => +a))) : null), i = ke(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((b) => [b.date.slice(0, 10), b.value])), a = [], s = new Date(e.start), r = (e.start.getUTCDay() + 6) % 7;
+    let o = 0;
+    for (; +s <= +e.end; ) {
+      const b = Pe(s), w = (s.getUTCDay() + 6) % 7, D = Math.floor((r + o) / 7);
+      a.push({ iso: b, value: i.has(b) ? i.get(b) : null, col: D, row: w }), s.setUTCDate(s.getUTCDate() + 1), o += 1;
+    }
+    const c = Math.max(1, ...a.map((b) => b.col + 1)), m = ts + c * Nt, g = _e + 7 * Nt + 4, _ = Math.max(1, ...a.map((b) => b.value ?? 0)), p = (b) => Math.min(4, Math.max(0, Math.ceil(b / _ * 5) - 1)), f = a.reduce((b, w) => b + (w.value ?? 0), 0), k = this.label || `Calendar heatmap, ${a.length} days from ${Pe(e.start)} to ${Pe(e.end)}, total ${this.fmt(f)}`;
+    return n`<div class=${this.rootClass("baht-heatmap")}>
+      <svg
+        class="baht-chart-svg baht-heatmap-svg"
+        width=${m}
+        height=${g}
+        viewBox="0 0 ${m} ${g}"
+        preserveAspectRatio="xMinYMin meet"
+        role="img"
+        aria-label=${k}
+      >
+        ${Za.map(
+      (b, w) => w % 2 === 0 ? A`<text class="baht-chart-tick" x="0" y=${_e + w * Nt + xe / 2 + 4}>${b}</text>` : h
+    )}
+        ${a.map((b) => {
+      const w = b.value == null ? `${b.iso}: no activity` : `${b.iso}: ${this.fmt(b.value)}`, D = b.value == null || b.value <= 0 ? "var(--baht-chart-grid)" : Ye(p(b.value));
+      return A`<rect class="baht-heatmap-cell" x=${ts + b.col * Nt} y=${_e + b.row * Nt}
+            width=${xe} height=${xe} rx="3" fill=${D} tabindex="0" role="button" aria-label=${w}
+            @pointermove=${(O) => this.showTip(O, w)}
+            @pointerleave=${() => this.hideTip()}
+            @focus=${(O) => this.showTip(O, w)}
+            @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(
+      (b) => n`<span
+              class="baht-chart-swatch"
+              style=${`background:${Ye(b)}`}
+              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((b) => [b.iso, b.value == null ? "—" : this.fmt(b.value)])
+    ) : h}
+    </div>`;
+  }
+};
+gt([
+  l({ attribute: !1 })
+], ct.prototype, "values", 2);
+gt([
+  l()
+], ct.prototype, "from", 2);
+gt([
+  l()
+], ct.prototype, "to", 2);
+gt([
+  l({ attribute: "less-label" })
+], ct.prototype, "lessLabel", 2);
+gt([
+  l({ attribute: "more-label" })
+], ct.prototype, "moreLabel", 2);
+gt([
+  l()
+], ct.prototype, "label", 2);
+ct = gt([
+  u("baht-heatmap")
+], ct);
+var Qa = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, tt = (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;
+};
+let G = class extends $ {
+  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>`;
+  }
+};
+tt([
+  l({ type: Number })
+], G.prototype, "value", 2);
+tt([
+  l({ type: Number })
+], G.prototype, "max", 2);
+tt([
+  l()
+], G.prototype, "label", 2);
+tt([
+  l()
+], G.prototype, "format", 2);
+tt([
+  l()
+], G.prototype, "currency", 2);
+tt([
+  l({ attribute: !1 })
+], G.prototype, "thresholds", 2);
+tt([
+  l({ type: Number })
+], G.prototype, "expected", 2);
+tt([
+  l({ attribute: "over-label" })
+], G.prototype, "overLabel", 2);
+tt([
+  l({ attribute: "near-label" })
+], G.prototype, "nearLabel", 2);
+G = tt([
+  u("baht-meter")
+], G);
+var ei = Object.defineProperty, si = Object.getOwnPropertyDescriptor, fe = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? si(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 && ei(e, i, s), s;
+};
+let Ht = class extends $ {
+  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([
+  u("baht-empty-state")
+], Ht);
+var ai = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, Qt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ii(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 && ai(e, i, s), s;
+};
+let Ft = class extends $ {
+  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()
+], Ft.prototype, "icon", 2);
+Qt([
+  l()
+], Ft.prototype, "heading", 2);
+Qt([
+  l()
+], Ft.prototype, "message", 2);
+Qt([
+  l({ attribute: "retry-label" })
+], Ft.prototype, "retryLabel", 2);
+Ft = Qt([
+  u("baht-error-state")
+], Ft);
+var ri = Object.defineProperty, oi = Object.getOwnPropertyDescriptor, wt = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? oi(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 && ri(e, i, s), s;
+};
+let pt = class extends $ {
+  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))}
+          >${U("close")}</button>
+        </div>`
+    )}
+      <button
+        type="button"
+        class="baht-keyvalue-add"
+        ?disabled=${this.disabled}
+        @click=${this.addRow}
+      >${U("plus")}${this.add_label}</button>
+    </div>`;
+  }
+};
+wt([
+  l({ attribute: !1 })
+], pt.prototype, "value", 2);
+wt([
+  l({ attribute: "key-placeholder" })
+], pt.prototype, "keyPlaceholder", 2);
+wt([
+  l({ attribute: "value-placeholder" })
+], pt.prototype, "valuePlaceholder", 2);
+wt([
+  l({ attribute: "add-label" })
+], pt.prototype, "add_label", 2);
+wt([
+  l({ type: Boolean })
+], pt.prototype, "disabled", 2);
+wt([
+  y()
+], pt.prototype, "rows", 2);
+pt = wt([
+  u("baht-keyvalue-editor")
+], pt);
+var li = Object.defineProperty, ni = Object.getOwnPropertyDescriptor, M = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ni(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 && li(e, i, s), s;
+};
+let S = class extends $ {
+  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), q() && document.removeEventListener("mousedown", this.onDocMousedown);
+  }
+  openLookup() {
+    this.disabled || this.open || (this.open = !0, this.term = "", this.activeIndex = -1, q() && 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), q() && 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()}
+            >${U("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()}
+      >${U("search")}</button>
+      ${this.value && this.href ? n`<a
+            class="baht-refpicker-open"
+            href=${this.href}
+            aria-label="Open record"
+            title="Open record"
+          >${U("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>`;
+  }
+};
+M([
+  l()
+], S.prototype, "label", 2);
+M([
+  l()
+], S.prototype, "value", 2);
+M([
+  l()
+], S.prototype, "display", 2);
+M([
+  l()
+], S.prototype, "placeholder", 2);
+M([
+  l({ type: Boolean })
+], S.prototype, "disabled", 2);
+M([
+  l({ type: Boolean })
+], S.prototype, "invalid", 2);
+M([
+  l()
+], S.prototype, "href", 2);
+M([
+  l({ attribute: "lookup-label" })
+], S.prototype, "lookupLabel", 2);
+M([
+  l({ type: Number })
+], S.prototype, "debounce", 2);
+M([
+  l({ attribute: !1 })
+], S.prototype, "fetcher", 2);
+M([
+  y()
+], S.prototype, "open", 2);
+M([
+  y()
+], S.prototype, "term", 2);
+M([
+  y()
+], S.prototype, "options", 2);
+M([
+  y()
+], S.prototype, "loading", 2);
+M([
+  y()
+], S.prototype, "activeIndex", 2);
+M([
+  Et("input")
+], S.prototype, "inputEl", 2);
+S = M([
+  u("baht-reference-picker")
+], S);
+var hi = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, j = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ci(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 && hi(e, i, s), s;
+};
+let E = class extends $ {
+  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), q() && 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() {
+    q() && document.addEventListener("mousedown", this.onDocMousedown);
+  }
+  close() {
+    q() && 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=${rt(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>`;
+  }
+};
+j([
+  l()
+], E.prototype, "label", 2);
+j([
+  l()
+], E.prototype, "value", 2);
+j([
+  l()
+], E.prototype, "placeholder", 2);
+j([
+  l({ type: Boolean })
+], E.prototype, "disabled", 2);
+j([
+  l({ type: Boolean })
+], E.prototype, "invalid", 2);
+j([
+  l({ attribute: !1 })
+], E.prototype, "options", 2);
+j([
+  l({ attribute: !1 })
+], E.prototype, "fetcher", 2);
+j([
+  l({ type: Number })
+], E.prototype, "debounce", 2);
+j([
+  l({ type: Number, attribute: "min-chars" })
+], E.prototype, "minChars", 2);
+j([
+  l({ type: Number, attribute: "max-items" })
+], E.prototype, "maxItems", 2);
+j([
+  l({ attribute: "free-text", converter: (t) => t !== "false" })
+], E.prototype, "freeText", 2);
+j([
+  l()
+], E.prototype, "autocomplete", 2);
+j([
+  y()
+], E.prototype, "term", 2);
+j([
+  y()
+], E.prototype, "open", 2);
+j([
+  y()
+], E.prototype, "results", 2);
+j([
+  y()
+], E.prototype, "loading", 2);
+j([
+  y()
+], E.prototype, "activeIndex", 2);
+j([
+  Et("input")
+], E.prototype, "inputEl", 2);
+E = j([
+  u("baht-typeahead")
+], E);
+const ns = {
+  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 pi = Object.defineProperty, di = Object.getOwnPropertyDescriptor, hs = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? di(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 && pi(e, i, s), s;
+};
+const ui = {
+  "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"
+}, es = /* @__PURE__ */ new Map();
+function bi(t) {
+  let e = es.get(t);
+  return e || (e = is(t), es.set(t, e)), e;
+}
+let Be = class extends W {
+  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 (!q()) 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 = ns[i.type];
+    if (!a) return h;
+    const s = bi(a), r = ui[i.width ?? "full"] ?? "baht-field--w-full", o = (c) => {
+      c.stopPropagation();
+      const { value: m } = c.detail;
+      this.patchRow(e, i.key, m);
+    };
+    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}
+    >
+      ${Oe(
+      t,
+      (a, s) => s,
+      (a, s) => n`<div
+          class="baht-repeater-row"
+          data-row=${s}
+          role="group"
+          aria-label=${v("row", { n: s + 1 })}
+        >
+          ${Oe(
+        this.subFields,
+        (r) => r.key,
+        (r) => this.renderSub(a, s, r)
+      )}
+          ${e ? n`<button
+                type="button"
+                class="baht-repeater-remove"
+                aria-label=${v("removeRowN", { n: s + 1 })}
+                title=${v("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 ?? v("addRow")}
+          </button>`}
+    </div>`;
+  }
+};
+hs([
+  l({ attribute: !1 })
+], Be.prototype, "rowErrors", 2);
+Be = hs([
+  u("baht-repeater")
+], Be);
+var fi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, me = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? mi(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 && fi(e, i, s), s;
+};
+let Gt = class extends $ {
+  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=${v("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"> (${v("stepDone")})</span>` : a === "current" ? n`<span class="baht-visually-hidden"> (${v("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([
+  u("baht-steps")
+], Gt);
+var vi = Object.defineProperty, $i = Object.getOwnPropertyDescriptor, Y = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? $i(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 && vi(e, i, s), s;
+};
+const yi = {
+  "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"
+}, ss = /* @__PURE__ */ new Map();
+function gi(t) {
+  let e = ss.get(t);
+  return e || (e = is(t), ss.set(t, e)), e;
+}
+let V = class extends $ {
+  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: as(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((m) => t[m] ?? 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((m) => {
+        this.optionsEpoch.get(a.key) === r && (this.dynamicOptions.set(a.key, m), this.requestUpdate());
+      }).catch((m) => {
+        console.warn(`[bahtui] options fetcher "${a.options_from}" failed`, m), 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 = Me(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`)), Me(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 (q())
+      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(...Ae(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 Ae(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 k, b;
+    const e = ns[t.type];
+    if (!e)
+      return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), h;
+    const i = this.stateFor(t), a = yi[t.width ?? "full"] ?? "baht-field--w-full", s = ((k = this.errors.find((w) => w.key === t.key)) == null ? void 0 : k.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, m = this.readonly || i.readonly, g = this.options.inputDebounce, _ = (w) => this.onControlInput(t.key, w), p = gi(e);
+    let f;
+    if (t.type === "repeater") {
+      const w = this.errors.filter((D) => D.key.startsWith(`${t.key}[`));
+      f = ee`<${p}
+        .field=${r}
+        .value=${o}
+        .disabled=${c}
+        .readonly=${m}
+        .required=${i.required}
+        .error=${s}
+        .debounce=${g}
+        .rowErrors=${w}
+        @baht-input=${_}
+      ></${p}>`;
+    } else if (t.type === "file") {
+      let w;
+      t.uploader && (w = (b = this.registry.uploaders) == null ? void 0 : b[t.uploader], w || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`)), f = ee`<${p}
+        .field=${r}
+        .value=${o}
+        .disabled=${c}
+        .readonly=${m}
+        .required=${i.required}
+        .error=${s}
+        .debounce=${g}
+        .uploader=${w}
+        @baht-input=${_}
+      ></${p}>`;
+    } else
+      f = ee`<${p}
+        .field=${r}
+        .value=${o}
+        .disabled=${c}
+        .readonly=${m}
+        .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)}
+    >
+      ${f}
+    </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 = us(t, this.valueFor(t), a), r = s.kind === "empty" ? n`<span class="baht-readonly-value baht-readonly-value--empty">${v("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" : ""}">
+      ${Oe(
+      this.sortedFields,
+      (t) => t.key,
+      (t) => this.renderField(t)
+    )}
+    </div>`;
+  }
+};
+Y([
+  l({ attribute: !1 })
+], V.prototype, "form", 2);
+Y([
+  l({ attribute: !1 })
+], V.prototype, "value", 2);
+Y([
+  l({ attribute: !1 })
+], V.prototype, "registry", 2);
+Y([
+  l({ attribute: !1 })
+], V.prototype, "options", 2);
+Y([
+  l({ attribute: !1 })
+], V.prototype, "fieldStates", 2);
+Y([
+  l({ type: String })
+], V.prototype, "view", 2);
+Y([
+  l({ attribute: !1 })
+], V.prototype, "flags", 2);
+Y([
+  l({ type: Boolean })
+], V.prototype, "readonly", 2);
+Y([
+  y()
+], V.prototype, "edits", 2);
+Y([
+  y()
+], V.prototype, "errors", 2);
+V = Y([
+  u("baht-form")
+], V);
+var wi = Object.defineProperty, xi = Object.getOwnPropertyDescriptor, N = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? xi(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 && wi(e, i, s), s;
+};
+let T = class extends $ {
+  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: as(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 = bs(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 fs(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 m;
+    const e = this.currentForm;
+    if (!e || e.kind !== "approval") return;
+    const i = e.approval ?? {}, a = String(((m = this.data[e.form_name]) == null ? void 0 : m.comment) ?? ""), s = i.comment ?? "optional";
+    if ((s === "required" || s === "requireOnReject" && t === "rejected") && a.trim() === "") {
+      this.approvalError = v("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">${v("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">
+              ${v("comment")}${e === "required" ? v("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">
+        ${v("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 ?? v("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) ?? v("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) ?? v("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 ?? v("submit") : this.nextLabel ?? v("next")}
+            </button>`}
+      </div>
+    </div>`;
+  }
+};
+N([
+  l({ attribute: !1 })
+], T.prototype, "workflow", 2);
+N([
+  l({ attribute: !1 })
+], T.prototype, "value", 2);
+N([
+  l({ attribute: !1 })
+], T.prototype, "registry", 2);
+N([
+  l({ type: Boolean, attribute: "validate-gate" })
+], T.prototype, "validateGate", 2);
+N([
+  l({ attribute: "next-label" })
+], T.prototype, "nextLabel", 2);
+N([
+  l({ attribute: "submit-label" })
+], T.prototype, "submitLabel", 2);
+N([
+  l({ attribute: "back-label" })
+], T.prototype, "backLabel", 2);
+N([
+  l({ type: Boolean, attribute: "show-back" })
+], T.prototype, "showBack", 2);
+N([
+  l({ attribute: !1 })
+], T.prototype, "flags", 2);
+N([
+  l({ type: Boolean, attribute: "show-steps" })
+], T.prototype, "showSteps", 2);
+N([
+  l({ attribute: "steps-variant" })
+], T.prototype, "stepsVariant", 2);
+N([
+  y()
+], T.prototype, "data", 2);
+N([
+  y()
+], T.prototype, "derived", 2);
+N([
+  y()
+], T.prototype, "current", 2);
+N([
+  y()
+], T.prototype, "approvalError", 2);
+T = N([
+  u("baht-workflow")
+], T);
+export {
+  Ye as $,
+  nt as A,
+  Ot as B,
+  kt as C,
+  Ve as D,
+  it as E,
+  ft as F,
+  S as G,
+  Be as H,
+  Fe as I,
+  oe as J,
+  Vt as K,
+  ht as L,
+  ie as M,
+  z as N,
+  Ut as O,
+  Gt as P,
+  P as Q,
+  De as R,
+  Ne as S,
+  Ce as T,
+  Ke as U,
+  _t as V,
+  E as W,
+  F as X,
+  T as Y,
+  ns as Z,
+  lt as _,
+  bt as a,
+  Na as a0,
+  qt as a1,
+  le as a2,
+  Ee as a3,
+  be as a4,
+  zt as b,
+  R as c,
+  re as d,
+  Pt as e,
+  Q as f,
+  ze as g,
+  ae as h,
+  Ue as i,
+  H as j,
+  Ht as k,
+  Ft as l,
+  Kt as m,
+  Dt as n,
+  vt as o,
+  V as p,
+  ct as q,
+  Le as r,
+  pt as s,
+  Z as t,
+  Ct as u,
+  at as v,
+  G as w,
+  Re as x,
+  qe as y,
+  mt as z
+};