bank20baht-ui 0.0.1

package/dist/index.js

@@ -0,0 +1,1796 @@
+import { defaultValue as _t, validateField as xt, evaluate as Ot } from "./engine.js";
+import { approvalFields as He, evalCondition as Ge, evalValueExpr as We, readRef as Ye } from "./engine.js";
+import { B as d, a as Z, b as g } from "./chunks/baht-toast-BlZBbneT.js";
+import { c as Qe, d as Xe, e as Ze, i as ts, r as es } from "./chunks/baht-toast-BlZBbneT.js";
+import { nothing as h, html as l } from "lit";
+import { property as n, customElement as p, query as ot, state as O } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+var Pt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, tt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Dt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Pt(e, r, s), s;
+};
+let K = class extends d {
+  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 l`<span class="baht-badge${t}">
+      ${this.showDot ? l`<span class="baht-badge-dot" aria-hidden="true"></span>` : h}${this.label}
+    </span>`;
+  }
+};
+tt([
+  n()
+], K.prototype, "tone", 2);
+tt([
+  n()
+], K.prototype, "label", 2);
+tt([
+  n({ attribute: !1 })
+], K.prototype, "dot", 2);
+K = tt([
+  p("baht-badge")
+], K);
+var Bt = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, lt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ct(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Bt(e, r, s), s;
+};
+let J = class extends d {
+  constructor() {
+    super(...arguments), this.variant = "inline", this.code = "";
+  }
+  firstUpdated() {
+    const t = this.renderRoot.querySelector(this.variant === "block" ? "pre" : "code");
+    t && Z(this, t);
+  }
+  render() {
+    return this.variant === "block" ? l`<pre class="baht-code baht-code--block" tabindex="0">${this.code}</pre>` : l`<code class="baht-code">${this.code}</code>`;
+  }
+};
+lt([
+  n()
+], J.prototype, "variant", 2);
+lt([
+  n()
+], J.prototype, "code", 2);
+J = lt([
+  p("baht-code")
+], J);
+var jt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, z = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Nt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && jt(e, r, s), s;
+};
+let q = class extends d {
+  constructor() {
+    super(...arguments), this.page = 1, this.totalPages = 1, this.variant = "numbered", this.siblings = 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
+      })
+    );
+  }
+  /** Visible page numbers with `null` marking an ellipsis gap. */
+  get pageItems() {
+    const { page: t, totalPages: e, siblings: r } = this, a = /* @__PURE__ */ new Set([1, e]);
+    for (let c = t - r; c <= t + r; c++)
+      c >= 1 && c <= e && a.add(c);
+    const s = [...a].sort((c, v) => c - v), i = [];
+    let o = 0;
+    for (const c of s)
+      o && c - o === 2 ? i.push(o + 1) : o && c - o > 2 && i.push(null), i.push(c), o = c;
+    return i;
+  }
+  render() {
+    const t = this.page <= 1, e = this.page >= this.totalPages;
+    return l`<nav class="baht-pagination" aria-label="Pagination">
+      <button type="button" aria-label="Previous page" ?disabled=${t} @click=${() => this.go(this.page - 1)}>«</button>
+      ${this.variant === "compact" ? l`<span class="baht-pagination-label">Page ${this.page} of ${this.totalPages}</span>` : this.pageItems.map(
+      (r) => r === null ? l`<span class="baht-pagination-ellipsis">…</span>` : l`<button
+                  type="button"
+                  aria-current=${r === this.page ? "page" : h}
+                  @click=${() => this.go(r)}
+                >${r}</button>`
+    )}
+      <button type="button" aria-label="Next page" ?disabled=${e} @click=${() => this.go(this.page + 1)}>»</button>
+    </nav>`;
+  }
+};
+z([
+  n({ type: Number })
+], q.prototype, "page", 2);
+z([
+  n({ type: Number, attribute: "total-pages" })
+], q.prototype, "totalPages", 2);
+z([
+  n()
+], q.prototype, "variant", 2);
+z([
+  n({ type: Number })
+], q.prototype, "siblings", 2);
+q = z([
+  p("baht-pagination")
+], q);
+var Et = Object.defineProperty, It = Object.getOwnPropertyDescriptor, b = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? It(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Et(e, r, s), s;
+};
+let u = class extends d {
+  constructor() {
+    super(...arguments), this.items = [], this.columns = {}, this.loading = !1, this.error = !1, this.errorMessage = "Couldn't load data. Try again.", this.emptyMessage = "No records yet.", this.showIndex = !0, this.indexOffset = 0, this.skeletonRows = 10, this.rowKey = "", this.clickable = !0, this.renderers = {}, this.page = 1, this.totalPages = 1;
+  }
+  get columnKeys() {
+    const t = Object.keys(this.columns);
+    return t.length > 0 ? t : this.items.length > 0 ? Object.keys(this.items[0]) : [];
+  }
+  labelFor(t) {
+    return this.columns[t] ?? t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
+  }
+  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 r = this.renderers[e], a = t[e];
+    return r ? r(a, t) : a == null ? "" : String(a);
+  }
+  renderBody(t) {
+    const e = t.length + (this.showIndex ? 1 : 0);
+    return this.loading ? l`${Array.from(
+      { length: this.skeletonRows },
+      (r, a) => l`<tr>
+          ${this.showIndex ? l`<td class="baht-table-index">${this.indexOffset + a + 1}</td>` : h}
+          ${t.map(() => l`<td><span class="baht-skeleton" style="height:16px;"></span></td>`)}
+        </tr>`
+    )}` : this.error ? l`<tr><td colspan=${e}><div class="baht-table-state baht-table-state--error">${this.errorMessage}</div></td></tr>` : this.items.length === 0 ? l`<tr><td colspan=${e}><div class="baht-table-state">${this.emptyMessage}</div></td></tr>` : l`${this.items.map(
+      (r, a) => l`<tr
+        tabindex=${this.clickable ? "0" : h}
+        @click=${() => this.emitRow(r, a)}
+        @keydown=${(s) => {
+        s.key !== "Enter" && s.key !== " " || (s.preventDefault(), this.emitRow(r, a));
+      }}
+      >
+        ${this.showIndex ? l`<td class="baht-table-index">${this.indexOffset + a + 1}</td>` : h}
+        ${t.map((s) => l`<td data-col=${s}>${this.cell(r, s)}</td>`)}
+      </tr>`
+    )}`;
+  }
+  render() {
+    const t = this.columnKeys;
+    return l`<div
+      class="baht-table-wrap"
+      tabindex=${this.clickable ? h : "0"}
+      aria-busy=${this.loading ? "true" : h}
+    >
+      <table class="baht-table">
+        <thead>
+          <tr>
+            ${this.showIndex ? l`<th scope="col" class="baht-table-index">No.</th>` : h}
+            ${t.map((e) => l`<th scope="col" data-col=${e}>${this.labelFor(e)}</th>`)}
+          </tr>
+        </thead>
+        <tbody>${this.renderBody(t)}</tbody>
+      </table>
+      ${this.totalPages > 1 ? l`<div class="baht-table-footer">
+            <baht-pagination
+              variant="compact"
+              page=${this.page}
+              total-pages=${this.totalPages}
+            ></baht-pagination>
+          </div>` : h}
+    </div>`;
+  }
+};
+b([
+  n({ attribute: !1 })
+], u.prototype, "items", 2);
+b([
+  n({ attribute: !1 })
+], u.prototype, "columns", 2);
+b([
+  n({ type: Boolean })
+], u.prototype, "loading", 2);
+b([
+  n({ type: Boolean })
+], u.prototype, "error", 2);
+b([
+  n({ attribute: "error-message" })
+], u.prototype, "errorMessage", 2);
+b([
+  n({ attribute: "empty-message" })
+], u.prototype, "emptyMessage", 2);
+b([
+  n({ type: Boolean, attribute: "show-index" })
+], u.prototype, "showIndex", 2);
+b([
+  n({ type: Number, attribute: "index-offset" })
+], u.prototype, "indexOffset", 2);
+b([
+  n({ type: Number, attribute: "skeleton-rows" })
+], u.prototype, "skeletonRows", 2);
+b([
+  n({ attribute: "row-key" })
+], u.prototype, "rowKey", 2);
+b([
+  n({ type: Boolean })
+], u.prototype, "clickable", 2);
+b([
+  n({ attribute: !1 })
+], u.prototype, "renderers", 2);
+b([
+  n({ type: Number })
+], u.prototype, "page", 2);
+b([
+  n({ type: Number, attribute: "total-pages" })
+], u.prototype, "totalPages", 2);
+u = b([
+  p("baht-table")
+], u);
+var Ft = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, D = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? qt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ft(e, r, s), s;
+};
+let _ = class extends d {
+  constructor() {
+    super(...arguments), this.items = [], this.loading = !1, this.error = !1, this.errorMessage = "Couldn't load data. Try again.", this.emptyMessage = "Nothing here yet.", this.skeletonRows = 5, this.clickable = !0;
+  }
+  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 ? l`${Array.from(
+      { length: this.skeletonRows },
+      () => l`<div class="baht-list-item">
+          <div class="baht-list-main">
+            <span class="baht-skeleton baht-skeleton--text" style="width:40%; margin-bottom:6px;"></span>
+            <span class="baht-skeleton baht-skeleton--text" style="width:65%;"></span>
+          </div>
+        </div>`
+    )}` : this.error ? l`<div class="baht-list-state baht-list-state--error">${this.errorMessage}</div>` : this.items.length === 0 ? l`<div class="baht-list-state">${this.emptyMessage}</div>` : l`${this.items.map(
+      (t, e) => l`<div
+        class="baht-list-item"
+        role="listitem"
+        tabindex=${this.clickable ? "0" : h}
+        @click=${() => this.emitItem(t, e)}
+        @keydown=${(r) => {
+        r.key !== "Enter" && r.key !== " " || (r.preventDefault(), this.emitItem(t, e));
+      }}
+      >
+        <div class="baht-list-main">
+          <div class="baht-list-title">${t.title}</div>
+          ${t.subtitle ? l`<div class="baht-list-subtitle">${t.subtitle}</div>` : h}
+        </div>
+        ${t.badge ? l`<baht-badge tone=${t.badgeTone ?? "neutral"} label=${t.badge}></baht-badge>` : h}
+        ${t.meta ? l`<span class="baht-list-meta">${t.meta}</span>` : h}
+      </div>`
+    )}`;
+  }
+  render() {
+    return l`<div class="baht-list" role="list">${this.renderRows()}</div>`;
+  }
+};
+D([
+  n({ attribute: !1 })
+], _.prototype, "items", 2);
+D([
+  n({ type: Boolean })
+], _.prototype, "loading", 2);
+D([
+  n({ type: Boolean })
+], _.prototype, "error", 2);
+D([
+  n({ attribute: "error-message" })
+], _.prototype, "errorMessage", 2);
+D([
+  n({ attribute: "empty-message" })
+], _.prototype, "emptyMessage", 2);
+D([
+  n({ type: Number, attribute: "skeleton-rows" })
+], _.prototype, "skeletonRows", 2);
+D([
+  n({ type: Boolean })
+], _.prototype, "clickable", 2);
+_ = D([
+  p("baht-list")
+], _);
+var St = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, H = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? kt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && St(e, r, s), s;
+};
+let P = class extends d {
+  constructor() {
+    super(...arguments), this.text = "", this.position = "top", this.dismissed = !1, this.uid = ++P.instances;
+  }
+  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() {
+    Z(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 l`<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>`;
+  }
+};
+P.instances = 0;
+H([
+  n()
+], P.prototype, "text", 2);
+H([
+  n()
+], P.prototype, "position", 2);
+H([
+  ot(".baht-tooltip-anchor")
+], P.prototype, "anchorEl", 2);
+H([
+  O()
+], P.prototype, "dismissed", 2);
+P = H([
+  p("baht-tooltip")
+], P);
+var At = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, L = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Lt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && At(e, r, s), s;
+};
+let j = class extends d {
+  constructor() {
+    super(...arguments), this.tone = "info", this.heading = "", this.message = "", this.dismissible = !1, this.hidden = !1;
+  }
+  dismiss() {
+    this.hidden = !0, this.dispatchEvent(new CustomEvent("baht-dismiss", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return this.hidden ? h : l`<div class="baht-alert baht-alert--${this.tone}" role="alert">
+      <div class="baht-alert-main">
+        ${this.heading ? l`<div class="baht-alert-title">${this.heading}</div>` : h}
+        ${this.message ? l`<div class="baht-alert-message">${this.message}</div>` : h}
+      </div>
+      ${this.dismissible ? l`<button type="button" class="baht-alert-dismiss" aria-label="Dismiss" @click=${() => this.dismiss()}>×</button>` : h}
+    </div>`;
+  }
+};
+L([
+  n()
+], j.prototype, "tone", 2);
+L([
+  n()
+], j.prototype, "heading", 2);
+L([
+  n()
+], j.prototype, "message", 2);
+L([
+  n({ type: Boolean })
+], j.prototype, "dismissible", 2);
+L([
+  n({ type: Boolean, reflect: !0 })
+], j.prototype, "hidden", 2);
+j = L([
+  p("baht-alert")
+], j);
+var Rt = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, R = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Mt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Rt(e, r, s), s;
+};
+let N = class extends d {
+  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 r;
+    if (t.key === "ArrowRight" || t.key === "ArrowUp") r = Math.min(e + 1, this.max);
+    else if (t.key === "ArrowLeft" || t.key === "ArrowDown") r = Math.max(e - 1, 1);
+    else if (t.key === "Home") r = 1;
+    else if (t.key === "End") r = this.max;
+    else return;
+    t.preventDefault(), this.emitValue(r), (a = this.querySelectorAll("button")[r - 1]) == null || a.focus();
+  }
+  setHover(t) {
+    this.readonly || (this.hover = t);
+  }
+  render() {
+    const t = this.hover || this.value;
+    return l`<div
+      class="baht-rating"
+      role="radiogroup"
+      aria-label=${this.label}
+      @mouseleave=${() => this.setHover(0)}
+    >
+      ${Array.from({ length: this.max }, (e, r) => {
+      const a = r + 1, s = this.value || 1;
+      return l`<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=${(i) => this.onKeydown(i, a)}
+        >★</button>`;
+    })}
+    </div>`;
+  }
+};
+R([
+  n({ type: Number })
+], N.prototype, "value", 2);
+R([
+  n({ type: Number })
+], N.prototype, "max", 2);
+R([
+  n({ type: Boolean })
+], N.prototype, "readonly", 2);
+R([
+  n()
+], N.prototype, "label", 2);
+R([
+  O()
+], N.prototype, "hover", 2);
+N = R([
+  p("baht-rating")
+], N);
+var Tt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, B = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Kt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Tt(e, r, s), s;
+};
+let y = class extends d {
+  constructor() {
+    super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.label = "", this.disabled = !1, this.showValue = !0, this.uid = ++y.instances;
+  }
+  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 l`<div class="baht-range">
+      ${this.label ? l`<label class="baht-label" for=${this.inputId}>${this.label}</label>` : h}
+      <div class="baht-range-row">
+        <input
+          type="range"
+          id=${this.inputId}
+          aria-label=${this.label ? h : "Value"}
+          .value=${String(this.value)}
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          ?disabled=${this.disabled}
+          @input=${(t) => this.onInput(t)}
+        />
+        ${this.showValue ? l`<span class="baht-range-value">${this.value}</span>` : h}
+      </div>
+    </div>`;
+  }
+};
+y.instances = 0;
+B([
+  n({ type: Number })
+], y.prototype, "value", 2);
+B([
+  n({ type: Number })
+], y.prototype, "min", 2);
+B([
+  n({ type: Number })
+], y.prototype, "max", 2);
+B([
+  n({ type: Number })
+], y.prototype, "step", 2);
+B([
+  n()
+], y.prototype, "label", 2);
+B([
+  n({ type: Boolean })
+], y.prototype, "disabled", 2);
+B([
+  n({ type: Boolean, attribute: "show-value" })
+], y.prototype, "showValue", 2);
+y = B([
+  p("baht-range")
+], y);
+var Vt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, M = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ut(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Vt(e, r, s), s;
+};
+let E = class extends d {
+  constructor() {
+    super(...arguments), this.length = 6, this.value = "", this.disabled = !1, this.mode = "numeric", this.label = "One-time code";
+  }
+  get chars() {
+    return Array.from({ length: this.length }, (t, e) => this.value[e] ?? "");
+  }
+  inputs() {
+    return Array.from(this.querySelectorAll("input"));
+  }
+  clean(t) {
+    return this.mode === "numeric" ? t.replace(/\D/g, "") : t;
+  }
+  commit(t) {
+    this.value = t.slice(0, this.length), this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.value.length === this.length && this.dispatchEvent(
+      new CustomEvent("baht-complete", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onInput(t, e) {
+    var i;
+    const r = e.target, a = this.clean(r.value).slice(-1);
+    r.value = a;
+    const s = this.chars;
+    s[t] = a, this.commit(s.join("")), a && t < this.length - 1 && ((i = this.inputs()[t + 1]) == null || i.focus());
+  }
+  onKeydown(t, e) {
+    var r;
+    if (e.key === "Backspace" && !this.chars[t] && t > 0) {
+      const a = this.chars;
+      a[t - 1] = "", this.commit(a.join("")), (r = this.inputs()[t - 1]) == null || r.focus(), e.preventDefault();
+    }
+  }
+  onPaste(t) {
+    var r, a;
+    t.preventDefault();
+    const e = this.clean(((r = t.clipboardData) == null ? void 0 : r.getData("text")) ?? "").slice(0, this.length);
+    e && (this.commit(e), (a = this.inputs()[Math.min(e.length, this.length - 1)]) == null || a.focus());
+  }
+  render() {
+    return l`<div class="baht-otp" role="group" aria-label=${this.label} @paste=${(t) => this.onPaste(t)}>
+      ${this.chars.map(
+      (t, e) => l`<input
+          type="text"
+          inputmode=${this.mode === "numeric" ? "numeric" : "text"}
+          maxlength="1"
+          autocomplete=${e === 0 ? "one-time-code" : "off"}
+          aria-label="Character ${e + 1} of ${this.length}"
+          .value=${t}
+          ?disabled=${this.disabled}
+          @input=${(r) => this.onInput(e, r)}
+          @keydown=${(r) => this.onKeydown(e, r)}
+        />`
+    )}
+    </div>`;
+  }
+};
+M([
+  n({ type: Number })
+], E.prototype, "length", 2);
+M([
+  n()
+], E.prototype, "value", 2);
+M([
+  n({ type: Boolean })
+], E.prototype, "disabled", 2);
+M([
+  n()
+], E.prototype, "mode", 2);
+M([
+  n()
+], E.prototype, "label", 2);
+E = M([
+  p("baht-otp")
+], E);
+var zt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, T = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ht(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && zt(e, r, s), s;
+};
+let I = class extends d {
+  constructor() {
+    super(...arguments), this.options = [], this.selected = [], this.multiple = !0, this.disabled = !1, this.label = "Filters";
+  }
+  toggle(t) {
+    const e = this.selected.includes(t);
+    let r;
+    this.multiple ? (r = e ? this.selected.filter((s) => s !== t) : [...this.selected, t], r = this.options.map((s) => s.key).filter((s) => r.includes(s))) : r = e ? [] : [t], this.dispatchEvent(
+      new CustomEvent("baht-change", { detail: { selected: r }, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return l`<div class="baht-filter" role="group" aria-label=${this.label}>
+      ${this.options.map(
+      (t) => l`<button
+          type="button"
+          aria-pressed=${this.selected.includes(t.key)}
+          ?disabled=${this.disabled}
+          @click=${() => this.toggle(t.key)}
+        >${t.label}</button>`
+    )}
+    </div>`;
+  }
+};
+T([
+  n({ attribute: !1 })
+], I.prototype, "options", 2);
+T([
+  n({ attribute: !1 })
+], I.prototype, "selected", 2);
+T([
+  n({ type: Boolean })
+], I.prototype, "multiple", 2);
+T([
+  n({ type: Boolean })
+], I.prototype, "disabled", 2);
+T([
+  n()
+], I.prototype, "label", 2);
+I = T([
+  p("baht-filter")
+], I);
+var Gt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, et = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Wt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Gt(e, r, s), s;
+};
+let V = class extends d {
+  constructor() {
+    super(...arguments), this.variant = "rect", this.width = "100%", this.height = "";
+  }
+  render() {
+    const t = this.height || (this.variant === "text" ? "1em" : "20px"), e = this.variant === "rect" ? "" : ` baht-skeleton--${this.variant}`;
+    return l`<span
+      class="baht-skeleton${e}"
+      style="width:${this.width}; height:${t};"
+      aria-hidden="true"
+    ></span>`;
+  }
+};
+et([
+  n()
+], V.prototype, "variant", 2);
+et([
+  n()
+], V.prototype, "width", 2);
+et([
+  n()
+], V.prototype, "height", 2);
+V = et([
+  p("baht-skeleton")
+], V);
+var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, G = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Jt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Yt(e, r, s), s;
+};
+let S = class extends d {
+  constructor() {
+    super(...arguments), this.value = null, this.tone = "primary", this.showLabel = !1, this.label = "Progress";
+  }
+  render() {
+    const t = this.value == null || Number.isNaN(this.value), e = t ? 0 : Math.min(100, Math.max(0, this.value)), r = this.tone === "primary" ? "" : ` baht-progress--${this.tone}`;
+    return l`<div>
+      <div
+        class="baht-progress${r}${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 ? l`<div class="baht-progress-label">${e}%</div>` : h}
+    </div>`;
+  }
+};
+G([
+  n({ type: Number })
+], S.prototype, "value", 2);
+G([
+  n()
+], S.prototype, "tone", 2);
+G([
+  n({ type: Boolean, attribute: "show-label" })
+], S.prototype, "showLabel", 2);
+G([
+  n()
+], S.prototype, "label", 2);
+S = G([
+  p("baht-progress")
+], S);
+var Qt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, nt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Xt(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Qt(e, r, s), s;
+};
+let Q = class extends d {
+  constructor() {
+    super(...arguments), this.size = "md", this.label = "Loading";
+  }
+  render() {
+    const t = this.size === "md" ? "" : ` baht-spinner--${this.size}`;
+    return l`<span class="baht-spinner${t}" role="status" aria-label=${this.label}></span>`;
+  }
+};
+nt([
+  n()
+], Q.prototype, "size", 2);
+nt([
+  n()
+], Q.prototype, "label", 2);
+Q = nt([
+  p("baht-spinner")
+], Q);
+var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, W = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? te(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Zt(e, r, s), s;
+};
+let k = class extends d {
+  constructor() {
+    super(...arguments), this.heading = "", this.subtitle = "", this.hero = !1;
+  }
+  firstUpdated() {
+    Z(this, this.bodyEl);
+  }
+  render() {
+    return l`<div class="baht-card${this.hero ? " baht-card--hero" : ""}">
+      ${this.heading ? l`<div class="baht-card-title">${this.heading}</div>` : h}
+      ${this.subtitle ? l`<div class="baht-card-subtitle">${this.subtitle}</div>` : h}
+      <div class="baht-card-body"></div>
+    </div>`;
+  }
+};
+W([
+  n()
+], k.prototype, "heading", 2);
+W([
+  n()
+], k.prototype, "subtitle", 2);
+W([
+  n({ type: Boolean })
+], k.prototype, "hero", 2);
+W([
+  ot(".baht-card-body")
+], k.prototype, "bodyEl", 2);
+k = W([
+  p("baht-card")
+], k);
+var ee = Object.defineProperty, se = Object.getOwnPropertyDescriptor, st = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? se(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && ee(e, r, s), s;
+};
+let U = class extends d {
+  constructor() {
+    super(...arguments), this.legend = "", this.disabled = !1;
+  }
+  firstUpdated() {
+    Z(this, this.bodyEl);
+  }
+  render() {
+    return l`<fieldset class="baht-fieldset" ?disabled=${this.disabled}>
+      ${this.legend ? l`<legend>${this.legend}</legend>` : h}
+      <div class="baht-fieldset-body"></div>
+    </fieldset>`;
+  }
+};
+st([
+  n()
+], U.prototype, "legend", 2);
+st([
+  n({ type: Boolean })
+], U.prototype, "disabled", 2);
+st([
+  ot(".baht-fieldset-body")
+], U.prototype, "bodyEl", 2);
+U = st([
+  p("baht-fieldset")
+], U);
+var re = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, gt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ae(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && re(e, r, s), s;
+};
+let at = class extends d {
+  constructor() {
+    super(...arguments), this.items = [];
+  }
+  render() {
+    return l`<div class="baht-timeline" role="list">
+      ${this.items.map(
+      (t, e) => l`<div class="baht-timeline-item" role="listitem">
+          <div class="baht-timeline-rail">
+            <span class="baht-timeline-dot${t.tone && t.tone !== "primary" ? ` baht-timeline-dot--${t.tone}` : ""}"></span>
+            ${e < this.items.length - 1 ? l`<span class="baht-timeline-line"></span>` : h}
+          </div>
+          <div class="baht-timeline-main">
+            <div class="baht-timeline-title">
+              ${t.title}
+              ${t.time ? l`<span class="baht-timeline-time"> · ${t.time}</span>` : h}
+            </div>
+            ${t.description ? l`<div class="baht-timeline-desc">${t.description}</div>` : h}
+          </div>
+        </div>`
+    )}
+    </div>`;
+  }
+};
+gt([
+  n({ attribute: !1 })
+], at.prototype, "items", 2);
+at = gt([
+  p("baht-timeline")
+], at);
+var ie = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, rt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? oe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && ie(e, r, s), s;
+};
+let F = class extends d {
+  constructor() {
+    super(...arguments), this.items = [], this.multiple = !1, this.openSet = /* @__PURE__ */ new Set(), this.uid = ++F.instances;
+  }
+  willUpdate(t) {
+    t.has("items") && (this.openSet = new Set(this.items.flatMap((e, r) => e.open ? [r] : [])));
+  }
+  toggle(t) {
+    const e = !this.openSet.has(t), r = this.multiple ? new Set(this.openSet) : /* @__PURE__ */ new Set();
+    e ? r.add(t) : r.delete(t), this.openSet = r, this.dispatchEvent(
+      new CustomEvent("baht-toggle", { detail: { index: t, open: e }, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return l`<div class="baht-accordion">
+      ${this.items.map((t, e) => {
+      const r = this.openSet.has(e), a = `baht-acc-${this.uid}-t-${e}`, s = `baht-acc-${this.uid}-p-${e}`;
+      return l`<div class="baht-accordion-item${r ? " baht-accordion-item--open" : ""}">
+          <button
+            type="button"
+            class="baht-accordion-trigger"
+            id=${a}
+            aria-expanded=${r}
+            aria-controls=${r ? s : h}
+            @click=${() => this.toggle(e)}
+          >
+            <span>${t.title}</span>
+            <span class="baht-accordion-chevron" aria-hidden="true">▾</span>
+          </button>
+          ${r ? l`<div class="baht-accordion-content" id=${s} role="region" aria-labelledby=${a}>${t.content}</div>` : h}
+        </div>`;
+    })}
+    </div>`;
+  }
+};
+F.instances = 0;
+rt([
+  n({ attribute: !1 })
+], F.prototype, "items", 2);
+rt([
+  n({ type: Boolean })
+], F.prototype, "multiple", 2);
+rt([
+  O()
+], F.prototype, "openSet", 2);
+F = rt([
+  p("baht-accordion")
+], F);
+var le = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, Y = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ne(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && le(e, r, s), s;
+};
+let A = class extends d {
+  constructor() {
+    super(...arguments), this.href = "", this.label = "", this.external = !1, this.externalHint = "opens in new tab";
+  }
+  render() {
+    return l`<a
+      class="baht-link"
+      href=${this.href || h}
+      target=${this.external ? "_blank" : h}
+      rel=${this.external ? "noopener noreferrer" : h}
+    >${this.label}${this.external ? l` <span class="baht-link-external" aria-hidden="true">↗</span><span class="baht-visually-hidden"> (${this.externalHint})</span>` : h}</a>`;
+  }
+};
+Y([
+  n()
+], A.prototype, "href", 2);
+Y([
+  n()
+], A.prototype, "label", 2);
+Y([
+  n({ type: Boolean })
+], A.prototype, "external", 2);
+Y([
+  n({ attribute: "external-hint" })
+], A.prototype, "externalHint", 2);
+A = Y([
+  p("baht-link")
+], A);
+var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, ht = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? pe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && he(e, r, s), s;
+};
+let X = class extends d {
+  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 l`<nav class="baht-breadcrumbs" aria-label="Breadcrumb">
+      ${this.items.map((e, r) => {
+      const a = r < t ? l`<span class="baht-breadcrumbs-sep" aria-hidden="true">${this.separator}</span>` : h;
+      return r === t ? l`<span class="baht-breadcrumbs-current" aria-current="page">${e.label}</span>${a}` : e.href ? l`<a class="baht-link" href=${e.href}>${e.label}</a>${a}` : l`<a
+          class="baht-link"
+          href="#"
+          @click=${(s) => {
+        s.preventDefault(), this.navigate(e, r);
+      }}
+        >${e.label}</a>${a}`;
+    })}
+    </nav>`;
+  }
+};
+ht([
+  n({ attribute: !1 })
+], X.prototype, "items", 2);
+ht([
+  n()
+], X.prototype, "separator", 2);
+X = ht([
+  p("baht-breadcrumbs")
+], X);
+var de = Object.getOwnPropertyDescriptor, ce = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? de(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let pt = class extends g {
+  renderControl() {
+    return l`<input
+      class="baht-control baht-control--text"
+      id=${this.controlId}
+      type=${this.field.type === "email" ? "email" : "text"}
+      .value=${this.value == null ? "" : String(this.value)}
+      placeholder=${f(this.field.placeholder)}
+      maxlength=${f(this.field.maxLength)}
+      autocomplete=${f(this.field.autocomplete)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+      @input=${(t) => this.emitInput(t.target.value)}
+    />`;
+  }
+};
+pt = ce([
+  p("baht-input")
+], pt);
+var ue = Object.getOwnPropertyDescriptor, be = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ue(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let dt = class extends g {
+  renderControl() {
+    return l`<textarea
+      class="baht-control baht-control--textarea"
+      id=${this.controlId}
+      .value=${this.value == null ? "" : String(this.value)}
+      placeholder=${f(this.field.placeholder)}
+      maxlength=${f(this.field.maxLength)}
+      rows=${this.field.rows ?? 3}
+      autocomplete=${f(this.field.autocomplete)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+      @input=${(t) => this.emitInput(t.target.value)}
+    ></textarea>`;
+  }
+};
+dt = be([
+  p("baht-textarea")
+], dt);
+var ve = Object.getOwnPropertyDescriptor, me = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ve(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let ct = class extends g {
+  renderControl() {
+    return l`<input
+      class="baht-control baht-control--number"
+      id=${this.controlId}
+      type="number"
+      .value=${this.value == null ? "" : String(this.value)}
+      placeholder=${f(this.field.placeholder)}
+      min=${f(this.field.min)}
+      max=${f(this.field.max)}
+      step=${f(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.emitInput(e === "" ? null : Number(e));
+    }}
+    />`;
+  }
+};
+ct = me([
+  p("baht-number")
+], ct);
+var fe = Object.getOwnPropertyDescriptor, $e = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? fe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let ut = class extends g {
+  renderControl() {
+    const t = this.value == null ? "" : String(this.value);
+    return l`<select
+      class="baht-control baht-control--select"
+      id=${this.controlId}
+      .value=${t}
+      ?disabled=${this.disabled || this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+      @change=${(e) => {
+      const r = e.target.value;
+      this.emitInput(r === "" ? null : r);
+    }}
+    >
+      <option value="" ?selected=${t === ""}>${this.field.placeholder ?? "—"}</option>
+      ${(this.field.options ?? []).map(
+      (e) => l`<option value=${e.key} ?selected=${t === e.key}>${e.label}</option>`
+    )}
+    </select>`;
+  }
+};
+ut = $e([
+  p("baht-select")
+], ut);
+var ye = Object.getOwnPropertyDescriptor, ge = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ye(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let bt = class extends g {
+  get selected() {
+    return Array.isArray(this.value) ? this.value : [];
+  }
+  toggle(t, e) {
+    const r = e ? [...this.selected, t] : this.selected.filter((s) => s !== t), a = (this.field.options ?? []).map((s) => s.key);
+    this.emitInput(a.filter((s) => r.includes(s)));
+  }
+  renderControl() {
+    return l`<div
+      class="baht-control baht-control--multiselect"
+      role="group"
+      aria-labelledby=${this.field.label ? this.labelId : h}
+      aria-describedby=${this.describedBy}
+    >
+      ${(this.field.options ?? []).map(
+      (t) => l`<label class="baht-option">
+          <input
+            type="checkbox"
+            value=${t.key}
+            .checked=${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>`;
+  }
+};
+bt = ge([
+  p("baht-multiselect")
+], bt);
+var we = Object.getOwnPropertyDescriptor, _e = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? we(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let vt = class extends g {
+  /** Label sits beside the box, so suppress the block label. */
+  renderLabel() {
+    return h;
+  }
+  renderControl() {
+    return l`<label class="baht-control baht-control--checkbox baht-option">
+      <input
+        type="checkbox"
+        id=${this.controlId}
+        .checked=${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 ? l`<span class="baht-required-mark">*</span>` : h}</span
+      >
+    </label>`;
+  }
+};
+vt = _e([
+  p("baht-checkbox")
+], vt);
+var xe = Object.getOwnPropertyDescriptor, Oe = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? xe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let mt = class extends g {
+  renderControl() {
+    return l`<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) => l`<label class="baht-option">
+          <input
+            type="radio"
+            name=${this.controlId}
+            value=${t.key}
+            .checked=${this.value === t.key}
+            ?disabled=${this.disabled || this.readonly}
+            @change=${() => this.emitInput(t.key)}
+          />
+          <span>${t.label}</span>
+        </label>`
+    )}
+    </div>`;
+  }
+};
+mt = Oe([
+  p("baht-radio")
+], mt);
+var Pe = Object.getOwnPropertyDescriptor, De = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Pe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let ft = class extends g {
+  renderLabel() {
+    return h;
+  }
+  renderControl() {
+    return l`<label class="baht-control baht-control--toggle baht-option">
+      <input
+        type="checkbox"
+        role="switch"
+        id=${this.controlId}
+        aria-checked=${this.value === !0 ? "true" : "false"}
+        .checked=${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 ? l`<span class="baht-required-mark">*</span>` : h}</span
+      >
+    </label>`;
+  }
+};
+ft = De([
+  p("baht-toggle")
+], ft);
+var Be = Object.getOwnPropertyDescriptor, Ce = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Be(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let $t = class extends g {
+  renderControl() {
+    return l`<input
+      class="baht-control baht-control--date"
+      id=${this.controlId}
+      type="date"
+      .value=${this.value == null ? "" : String(this.value)}
+      min=${f(this.field.min)}
+      max=${f(this.field.max)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+      @change=${(t) => {
+      const e = t.target.value;
+      this.emitInput(e === "" ? null : e);
+    }}
+    />`;
+  }
+};
+$t = Ce([
+  p("baht-datepicker")
+], $t);
+var je = Object.getOwnPropertyDescriptor, Ne = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? je(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = o(s) || s);
+  return s;
+};
+let yt = class extends g {
+  renderControl() {
+    return l`<input
+      class="baht-control baht-control--file"
+      id=${this.controlId}
+      type="file"
+      accept=${f(this.field.accept)}
+      ?multiple=${this.field.multiple}
+      ?disabled=${this.disabled || this.readonly}
+      ?required=${this.required}
+      aria-invalid=${this.invalid}
+      aria-describedby=${this.describedBy}
+      @change=${(t) => {
+      const e = Array.from(t.target.files ?? []), r = this.field.maxSize ? e.filter((a) => a.size <= this.field.maxSize) : e;
+      this.emitInput(this.field.multiple ? r : r[0] ?? null);
+    }}
+    />`;
+  }
+};
+yt = Ne([
+  p("baht-file")
+], yt);
+var Ee = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, wt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ie(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ee(e, r, s), s;
+};
+let it = class extends d {
+  render() {
+    const t = this.field.variant ?? "body";
+    return l`<div class="baht-text baht-text--${t}">${this.field.text ?? this.field.label ?? ""}</div>`;
+  }
+};
+wt([
+  n({ attribute: !1 })
+], it.prototype, "field", 2);
+it = wt([
+  p("baht-text")
+], it);
+const Fe = {
+  text: "baht-input",
+  email: "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"
+};
+var qe = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, C = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Se(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && qe(e, r, s), s;
+};
+const ke = {
+  "1/4": "baht-field--w-1-4",
+  "1/2": "baht-field--w-1-2",
+  "3/4": "baht-field--w-3-4",
+  full: "baht-field--w-full"
+};
+let x = class extends d {
+  constructor() {
+    super(...arguments), this.value = {}, this.registry = {}, this.options = {}, this.fieldStates = {}, this.edits = {}, this.errors = [];
+  }
+  willUpdate(t) {
+    t.has("value") && (this.edits = {});
+  }
+  get sortedFields() {
+    var t;
+    return [...((t = this.form) == null ? void 0 : t.field_data) ?? []].sort((e, r) => e.order - r.order);
+  }
+  stateFor(t) {
+    return this.fieldStates[t.key] ?? {
+      visible: !0,
+      enabled: !t.disabled,
+      readonly: !1,
+      required: !!t.required,
+      computed: !1
+    };
+  }
+  valueFor(t) {
+    return t.key in this.edits ? this.edits[t.key] : t.key in this.value ? this.value[t.key] : _t(t);
+  }
+  // ---- public API (spec 01 §6) ----
+  getData() {
+    const t = {};
+    for (const e of this.sortedFields)
+      e.type !== "label" && (t[e.key] = this.valueFor(e));
+    return t;
+  }
+  setValue(t) {
+    this.edits = { ...this.edits, ...t }, this.requestUpdate();
+  }
+  validate() {
+    const t = [];
+    for (const r of this.sortedFields) {
+      if (r.type === "label") continue;
+      const a = this.stateFor(r);
+      if (!a.visible) continue;
+      const s = a.required === !!r.required ? r : { ...r, required: a.required };
+      t.push(...xt(s, this.valueFor(r), this.registry));
+    }
+    this.errors = t;
+    const e = { valid: t.length === 0, errors: t };
+    return this.dispatchEvent(
+      new CustomEvent("baht-validity", { detail: e, bubbles: !0, composed: !0 })
+    ), e;
+  }
+  reset() {
+    this.edits = {}, this.value = {}, this.errors = [], this.requestUpdate();
+  }
+  // ---- internal ----
+  onFieldInput(t, e) {
+    var s;
+    e.stopPropagation();
+    let { value: r } = e.detail;
+    const a = t.formatter ? (s = this.registry.formatters) == null ? void 0 : s[t.formatter] : void 0;
+    t.formatter && !a && console.warn(`[bahtui] unknown formatter "${t.formatter}" — skipped`), a && (r = a(r)), this.edits = { ...this.edits, [t.key]: r }, (this.options.validateOn ?? "change") === "change" && this.errors.length > 0 && this.validate(), this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { formName: this.form.formName, key: t.key, value: r, data: this.getData() },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  renderField(t) {
+    var o;
+    const e = Fe[t.type];
+    if (!e)
+      return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), h;
+    const r = this.stateFor(t), a = ke[t.width ?? "full"] ?? "baht-field--w-full", s = ((o = this.errors.find((c) => c.key === t.key)) == null ? void 0 : o.message) ?? null, i = document.createElement(e);
+    return i.field = t, i.value = this.valueFor(t), i.disabled = !r.enabled, i.readonly = r.readonly, i.required = r.required, i.error = s, i.addEventListener("baht-input", (c) => this.onFieldInput(t, c)), l`<div
+      class="baht-field ${a} ${r.visible ? "" : "baht-field--hidden"}"
+      data-key=${t.key}
+      data-type=${t.type}
+    >
+      ${i}
+    </div>`;
+  }
+  render() {
+    return l`<div class="baht-form">${this.sortedFields.map((t) => this.renderField(t))}</div>`;
+  }
+};
+C([
+  n({ attribute: !1 })
+], x.prototype, "form", 2);
+C([
+  n({ attribute: !1 })
+], x.prototype, "value", 2);
+C([
+  n({ attribute: !1 })
+], x.prototype, "registry", 2);
+C([
+  n({ attribute: !1 })
+], x.prototype, "options", 2);
+C([
+  n({ attribute: !1 })
+], x.prototype, "fieldStates", 2);
+C([
+  O()
+], x.prototype, "edits", 2);
+C([
+  O()
+], x.prototype, "errors", 2);
+x = C([
+  p("baht-form")
+], x);
+var Ae = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, $ = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? Le(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
+  return a && s && Ae(e, r, s), s;
+};
+let m = class extends d {
+  constructor() {
+    super(...arguments), this.value = {}, this.registry = {}, this.validateGate = !0, this.nextLabel = "Next", this.submitLabel = "Submit", this.backLabel = "Back", this.showBack = !0, this.data = {}, this.derived = null, this.current = null, this.approvalError = null, this.history = [];
+  }
+  get currentFormName() {
+    return this.current;
+  }
+  willUpdate(t) {
+    var e;
+    (t.has("workflow") || t.has("value")) && (this.data = structuredClone(this.value ?? {}), this.reevaluate(), this.history = [], this.current = ((e = this.visibleForms[0]) == null ? void 0 : e.formName) ?? null, this.approvalError = null);
+  }
+  reevaluate() {
+    this.derived = Ot(this.workflow, this.data), this.data = this.derived.data;
+  }
+  /** Forms in ascending order whose derived visibility is true. */
+  get visibleForms() {
+    var e;
+    const t = [...((e = this.workflow) == null ? void 0 : e.forms) ?? []].sort((r, a) => r.order - a.order);
+    return this.derived ? t.filter((r) => {
+      var a;
+      return ((a = this.derived.forms[r.formName]) == null ? void 0 : a.visible) !== !1;
+    }) : t;
+  }
+  get currentForm() {
+    return this.visibleForms.find((t) => t.formName === this.current) ?? null;
+  }
+  get isLast() {
+    var e;
+    const t = this.visibleForms;
+    return t.length > 0 && ((e = t[t.length - 1]) == null ? void 0 : e.formName) === this.current;
+  }
+  fieldStatesFor(t) {
+    const e = {};
+    if (!this.derived) return e;
+    const r = `${t}.`;
+    for (const [a, s] of Object.entries(this.derived.fields))
+      a.startsWith(r) && (e[a.slice(r.length)] = s);
+    return e;
+  }
+  get formEl() {
+    return this.querySelector("baht-form");
+  }
+  // ---- public API (spec 03 §2) ----
+  getData() {
+    var t;
+    return ((t = this.derived) == null ? void 0 : t.data) ?? this.data;
+  }
+  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 on the last one, else step forward. */
+  advance(t = {}) {
+    const e = { ...t, data: this.getData() };
+    if (this.isLast) {
+      this.emit("baht-submit", e), this.emit("baht-complete", { data: this.getData(), status: "completed" });
+      return;
+    }
+    const r = this.visibleForms, a = r.findIndex((i) => i.formName === this.current), s = r[a + 1];
+    s && (this.history.push(this.current), this.current = s.formName, this.emit("baht-next", { formName: s.formName, order: s.order, ...e }), this.emit("baht-step-change", {
+      formName: s.formName,
+      order: s.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 v;
+    const e = this.currentForm;
+    if (!e || e.kind !== "approval") return;
+    const r = e.approval ?? {}, a = String(((v = this.data[e.formName]) == null ? void 0 : v.comment) ?? ""), s = r.comment ?? "optional";
+    if ((s === "required" || s === "requireOnReject" && t === "rejected") && a.trim() === "") {
+      this.approvalError = "A comment is required.";
+      return;
+    }
+    this.approvalError = null, this.data = {
+      ...this.data,
+      [e.formName]: { ...this.data[e.formName], decision: t, comment: a }
+    }, this.reevaluate();
+    const o = { formName: e.formName, decision: t, comment: a, data: this.getData() };
+    if (t === "approved") {
+      this.emit("baht-approve", o), this.advance({ decision: t, comment: a });
+      return;
+    }
+    this.emit("baht-reject", o);
+    const c = r.onReject ?? { action: "end" };
+    c.action === "goto" && this.visibleForms.some((w) => w.formName === c.form) ? this.gotoForm(c.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
+  }
+  /** Jump back to a visible form, truncating the history to that point. */
+  gotoForm(t) {
+    const e = this.history.indexOf(t);
+    this.history = e >= 0 ? this.history.slice(0, e) : [], this.current = t;
+    const r = this.workflow.forms.find((a) => a.formName === t);
+    this.emit("baht-step-change", { formName: t, order: (r == null ? void 0 : r.order) ?? 0, direction: "back" });
+  }
+  back() {
+    const t = this.history.pop();
+    if (!t) return;
+    this.current = t, this.approvalError = null;
+    const e = this.workflow.forms.find((r) => r.formName === t);
+    this.emit("baht-step-change", { formName: 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.formName) ?? null, this.approvalError = null;
+  }
+  // ---- internal ----
+  onFormChange(t) {
+    var s;
+    t.stopPropagation();
+    const { formName: e, key: r, value: a } = t.detail;
+    this.data = { ...this.data, [e]: { ...this.data[e], [r]: a } }, this.reevaluate(), this.current && !this.visibleForms.some((i) => i.formName === this.current) && (this.current = ((s = this.visibleForms[0]) == null ? void 0 : s.formName) ?? null), this.emit("baht-data-change", { data: this.getData() });
+  }
+  onCommentInput(t, e) {
+    this.data = { ...this.data, [t]: { ...this.data[t], comment: e } }, this.reevaluate(), e.trim() !== "" && (this.approvalError = null), this.emit("baht-data-change", { data: this.getData() });
+  }
+  emit(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+  }
+  // ---- approval summary (spec 03 §4) ----
+  /** Human-readable value for the summary: option labels, Yes/No, em-dash for empty. */
+  displayValue(t, e) {
+    const r = (a) => {
+      var s, i;
+      return ((i = (s = t.options) == null ? void 0 : s.find((o) => o.key === a)) == null ? void 0 : i.label) ?? String(a);
+    };
+    return e == null || e === "" ? "—" : typeof e == "boolean" ? e ? "Yes" : "No" : Array.isArray(e) ? e.length ? e.map(r).join(", ") : "—" : t.options ? r(e) : String(e);
+  }
+  /** Forms the approval step summarizes: configured list, else every earlier plain form. */
+  summaryForms(t) {
+    var a;
+    const e = (a = t.approval) == null ? void 0 : a.summaryForms, r = this.visibleForms.filter(
+      (s) => s.formName !== t.formName && s.kind !== "approval"
+    );
+    return e ? r.filter((s) => e.includes(s.formName)) : r.filter((s) => s.order < t.order);
+  }
+  renderApproval(t) {
+    var a, s;
+    const e = ((a = t.approval) == null ? void 0 : a.comment) ?? "optional", r = this.summaryForms(t);
+    return l`<div class="baht-approval">
+      <div class="baht-approval-summary">
+        ${r.length === 0 ? l`<p class="baht-approval-empty">Nothing to review.</p>` : r.map((i) => {
+      const o = this.fieldStatesFor(i.formName), c = [...i.field_data].sort((v, w) => v.order - w.order).filter((v) => {
+        var w;
+        return v.type !== "label" && ((w = o[v.key]) == null ? void 0 : w.visible) !== !1;
+      });
+      return l`<section class="baht-approval-group">
+                  <h4 class="baht-approval-group-title">${i.formName}</h4>
+                  <dl class="baht-approval-rows">
+                    ${c.map(
+        (v) => {
+          var w;
+          return l`<div class="baht-approval-row">
+                        <dt>${v.label ?? v.key}</dt>
+                        <dd>${this.displayValue(v, (w = this.data[i.formName]) == null ? void 0 : w[v.key])}</dd>
+                      </div>`;
+        }
+      )}
+                  </dl>
+                </section>`;
+    })}
+      </div>
+      ${e !== "hidden" ? l`<label class="baht-approval-comment">
+            <span class="baht-approval-comment-label">
+              Comment${e === "required" ? " (required)" : ""}
+            </span>
+            <textarea
+              rows="3"
+              aria-required=${e === "required" ? "true" : h}
+              aria-invalid=${this.approvalError ? "true" : h}
+              .value=${String(((s = this.data[t.formName]) == null ? void 0 : s.comment) ?? "")}
+              @input=${(i) => this.onCommentInput(t.formName, i.target.value)}
+            ></textarea>
+          </label>` : h}
+      ${this.approvalError ? l`<p class="baht-error" role="alert">${this.approvalError}</p>` : h}
+    </div>`;
+  }
+  render() {
+    var s, i;
+    const t = this.currentForm;
+    if (!t) return l`<div class="baht-workflow"></div>`;
+    const e = t.kind === "approval", r = this.visibleForms, a = r.findIndex((o) => o.formName === t.formName);
+    return l`<div class="baht-workflow" data-step=${t.formName}>
+      <div class="baht-visually-hidden" role="status">
+        Step ${a + 1} of ${r.length}
+      </div>
+      ${e ? this.renderApproval(t) : l`<baht-form
+            .form=${t}
+            .value=${this.data[t.formName] ?? {}}
+            .registry=${this.registry}
+            .fieldStates=${this.fieldStatesFor(t.formName)}
+            @baht-change=${(o) => this.onFormChange(o)}
+          ></baht-form>`}
+      <div class="baht-workflow-nav">
+        ${this.showBack && this.history.length > 0 ? l`<button type="button" class="baht-button baht-button--back" @click=${() => this.back()}>
+              ${this.backLabel}
+            </button>` : h}
+        ${e ? l`<button
+                type="button"
+                class="baht-button baht-button--reject"
+                @click=${() => this.decide("rejected")}
+              >
+                ${((s = t.approval) == null ? void 0 : s.rejectLabel) ?? "Reject"}
+              </button>
+              <button
+                type="button"
+                class="baht-button baht-button--next baht-button--approve"
+                @click=${() => this.decide("approved")}
+              >
+                ${((i = t.approval) == null ? void 0 : i.approveLabel) ?? "Approve"}
+              </button>` : l`<button type="button" class="baht-button baht-button--next" @click=${() => this.next()}>
+              ${this.isLast ? this.submitLabel : this.nextLabel}
+            </button>`}
+      </div>
+    </div>`;
+  }
+};
+$([
+  n({ attribute: !1 })
+], m.prototype, "workflow", 2);
+$([
+  n({ attribute: !1 })
+], m.prototype, "value", 2);
+$([
+  n({ attribute: !1 })
+], m.prototype, "registry", 2);
+$([
+  n({ type: Boolean, attribute: "validate-gate" })
+], m.prototype, "validateGate", 2);
+$([
+  n({ attribute: "next-label" })
+], m.prototype, "nextLabel", 2);
+$([
+  n({ attribute: "submit-label" })
+], m.prototype, "submitLabel", 2);
+$([
+  n({ attribute: "back-label" })
+], m.prototype, "backLabel", 2);
+$([
+  n({ type: Boolean, attribute: "show-back" })
+], m.prototype, "showBack", 2);
+$([
+  O()
+], m.prototype, "data", 2);
+$([
+  O()
+], m.prototype, "derived", 2);
+$([
+  O()
+], m.prototype, "current", 2);
+$([
+  O()
+], m.prototype, "approvalError", 2);
+m = $([
+  p("baht-workflow")
+], m);
+export {
+  F as BahtAccordion,
+  j as BahtAlert,
+  K as BahtBadge,
+  X as BahtBreadcrumbs,
+  Qe as BahtButton,
+  k as BahtCard,
+  vt as BahtCheckbox,
+  J as BahtCode,
+  $t as BahtDatepicker,
+  d as BahtElement,
+  g as BahtFieldBase,
+  U as BahtFieldset,
+  yt as BahtFile,
+  I as BahtFilter,
+  x as BahtForm,
+  pt as BahtInput,
+  A as BahtLink,
+  _ as BahtList,
+  Xe as BahtModal,
+  bt as BahtMultiselect,
+  ct as BahtNumber,
+  E as BahtOtp,
+  q as BahtPagination,
+  S as BahtProgress,
+  mt as BahtRadio,
+  y as BahtRange,
+  N as BahtRating,
+  ut as BahtSelect,
+  V as BahtSkeleton,
+  Q as BahtSpinner,
+  u as BahtTable,
+  it as BahtText,
+  dt as BahtTextarea,
+  at as BahtTimeline,
+  Ze as BahtToast,
+  ft as BahtToggle,
+  P as BahtTooltip,
+  m as BahtWorkflow,
+  Fe as TAG_FOR_TYPE,
+  Z as adoptLightChildren,
+  He as approvalFields,
+  _t as defaultValue,
+  Ge as evalCondition,
+  We as evalValueExpr,
+  Ot as evaluate,
+  ts as isIconName,
+  Ye as readRef,
+  es as renderIcon,
+  xt as validateField
+};