bank20baht-ui 0.2.7 → 0.2.9

package/README.md

@@ -234,7 +234,9 @@ Geist / Geist Mono, borders-over-shadows, "paper" easing — plus a dark theme
   `items` is one page; `baht-page-change` asks your app to fetch the next one.
 - **Feedback** — `baht-modal` · `baht-toast` · `baht-alert` · `baht-tooltip` · `baht-progress` ·
   `baht-spinner` · `baht-skeleton`
-- **Inputs** — `baht-rating` · `baht-range` · `baht-otp` (+ the 11 form field primitives)
+- **Inputs** — `baht-rating` · `baht-range` · `baht-otp` · `baht-typeahead` · `baht-reference-picker` ·
+  `baht-keyvalue-editor` (+ the 11 form field primitives). Typed fields debounce keystrokes (150 ms,
+  `debounce` / `options.inputDebounce`); `dropdown` renders its own listbox, never the OS picker.
 - **Structure & nav** — `baht-card` · `baht-fieldset` · `baht-timeline` · `baht-accordion` ·
   `baht-link` · `baht-breadcrumbs`
 

package/dist/chunks/{index-BI-29Q8f.js → index-yULskrKT.js}

@@ -1,4 +1,4 @@
-function D(e) {
+function $(e) {
   if (e.value !== void 0) return e.value;
   switch (e.type) {
     case "checkbox":
@@ -58,7 +58,17 @@ const Y = {
   no: "No",
   emptyValue: "Not provided",
   choose: "Select",
-  rowCount: "{n} rows"
+  rowCount: "{n} rows",
+  close: "Close",
+  dismiss: "Dismiss",
+  opensInNewTab: "opens in new tab",
+  otpCharacter: "Character {i} of {n}",
+  row: "Row {n}",
+  removeRowN: "Remove row {n}",
+  stepDone: "completed",
+  stepCurrent: "current step",
+  today: "Today",
+  clear: "Clear"
 }, J = {
   required: "กรุณากรอกข้อมูลนี้",
   minLength: "ต้องมีอย่างน้อย {n} ตัวอักษร",
@@ -100,20 +110,30 @@ const Y = {
   no: "ไม่ใช่",
   emptyValue: "ไม่ได้ระบุ",
   choose: "เลือก",
-  rowCount: "{n} แถว"
+  rowCount: "{n} แถว",
+  close: "ปิด",
+  dismiss: "ปิดข้อความ",
+  opensInNewTab: "เปิดในแท็บใหม่",
+  otpCharacter: "ตัวอักษรที่ {i} จาก {n}",
+  row: "แถวที่ {n}",
+  removeRowN: "ลบแถวที่ {n}",
+  stepDone: "เสร็จแล้ว",
+  stepCurrent: "ขั้นตอนปัจจุบัน",
+  today: "วันนี้",
+  clear: "ล้างค่า"
 }, K = { en: Y, th: J };
-let R = Y;
-function xe(e, t) {
-  R = { ...K[e], ...t };
+let D = Y;
+function ve(e, t) {
+  D = { ...K[e], ...t };
 }
-function Ae() {
-  return R;
+function xe() {
+  return D;
 }
-function ve(e) {
-  R = e;
+function Ae(e) {
+  D = e;
 }
 function f(e, t) {
-  let n = R[e];
+  let n = D[e];
   if (t)
     for (const [s, r] of Object.entries(t))
       n = n.replaceAll(`{${s}}`, () => String(r));
@@ -130,7 +150,7 @@ function q(e, t) {
   if (n !== -1)
     return (s = e[t.slice(0, n)]) == null ? void 0 : s[t.slice(n + 1)];
 }
-function j(e) {
+function E(e) {
   return e == null ? !0 : typeof e == "string" ? e === "" : Array.isArray(e) ? e.length === 0 : !1;
 }
 function w(e, t) {
@@ -182,16 +202,16 @@ function X(e, t) {
     case "endsWith":
       return typeof n == "string" && n.endsWith(String(s));
     case "isEmpty":
-      return j(n);
+      return E(n);
     case "isNotEmpty":
-      return !j(n);
+      return !E(n);
   }
 }
-function x(e, t) {
-  return e === void 0 ? !0 : "and" in e ? e.and.every((n) => x(n, t)) : "or" in e ? e.or.some((n) => x(n, t)) : "not" in e ? !x(e.not, t) : X(e, t);
+function v(e, t) {
+  return e === void 0 ? !0 : "and" in e ? e.and.every((n) => v(n, t)) : "or" in e ? e.or.some((n) => v(n, t)) : "not" in e ? !v(e.not, t) : X(e, t);
 }
 const H = /^(\d{4})-(\d{2})-(\d{2})$/;
-function A(e) {
+function x(e) {
   if (typeof e != "string") return null;
   const t = H.exec(e);
   if (!t) return null;
@@ -209,15 +229,15 @@ function ee(e) {
 function te(e) {
   const t = e.indexOf("/");
   if (t === -1) {
-    const r = A(e);
+    const r = x(e);
     return r ? [r, r] : null;
   }
-  const n = A(e.slice(0, t)), s = A(e.slice(t + 1));
+  const n = x(e.slice(0, t)), s = x(e.slice(t + 1));
   return !n || !s ? null : n <= s ? [n, s] : [s, n];
 }
 function ne(e, t) {
   var s;
-  const n = A(t);
+  const n = x(t);
   if (!n) return !1;
   if ((s = e.disabledWeekdays) != null && s.includes(n.getDay())) return !0;
   for (const r of e.disabledDates ?? []) {
@@ -227,7 +247,7 @@ function ne(e, t) {
   return !1;
 }
 function re(e, t, n = 3660) {
-  const s = A(e), r = A(t);
+  const s = x(e), r = x(t);
   if (!s || !r || s >= r) return [];
   const o = [], i = new Date(s);
   for (i.setDate(i.getDate() + 1); i < r && o.length < n; )
@@ -242,7 +262,7 @@ function oe(e) {
   const t = [...e.validators ?? []], n = (s) => t.some((r) => r.type === s);
   return e.required && !n("required") && t.push({ type: "required" }), e.maxLength !== void 0 && !n("maxLength") && t.push({ type: "maxLength", value: e.maxLength }), e.minLength !== void 0 && !n("minLength") && t.push({ type: "minLength", value: e.minLength }), e.min !== void 0 && !n("min") && t.push({ type: "min", value: e.min }), e.max !== void 0 && !n("max") && t.push({ type: "max", value: e.max }), e.type === "email" && !n("email") && t.push({ type: "email" }), t;
 }
-const M = (e) => Array.isArray(e) ? e : [e];
+const j = (e) => Array.isArray(e) ? e : [e];
 function ie(e, t, n, s) {
   var r;
   switch (e.type) {
@@ -261,12 +281,12 @@ function ie(e, t, n, s) {
       ), null) : typeof t == "string" && t.length > o ? e.message ?? f("maxLength", { n: e.value }) : null;
     }
     case "min":
-      return M(t).some((i) => {
+      return j(t).some((i) => {
         const a = w(i, e.value);
         return a !== null && a < 0;
       }) ? e.message ?? f("min", { n: e.value }) : null;
     case "max":
-      return M(t).some((i) => {
+      return j(t).some((i) => {
         const a = w(i, e.value);
         return a !== null && a > 0;
       }) ? e.message ?? f("max", { n: e.value }) : null;
@@ -340,7 +360,7 @@ function me(e, t, n) {
   return s.forEach((i, a) => {
     const d = i !== null && typeof i == "object" && !Array.isArray(i) ? i : {}, p = {};
     for (const u of o)
-      u.type === "label" || u.type === "section" || u.type === "repeater" || (p[u.key] = Object.hasOwn(d, u.key) ? d[u.key] : D(u));
+      u.type === "label" || u.type === "section" || u.type === "repeater" || (p[u.key] = Object.hasOwn(d, u.key) ? d[u.key] : $(u));
     for (const u of o)
       if (!(u.type === "label" || u.type === "section" || u.type === "repeater"))
         for (const y of ae(u, p[u.key], n, p))
@@ -361,11 +381,11 @@ function S(e, t) {
 function G(e, t) {
   return e.filter((n) => S(n.flag, t)).map((n) => n.fields ? { ...n, fields: G(n.fields, t) } : n);
 }
-function E(e) {
-  return e.some((t) => t.flag !== void 0 || (t.fields ? E(t.fields) : !1));
+function T(e) {
+  return e.some((t) => t.flag !== void 0 || (t.fields ? T(t.fields) : !1));
 }
-function T(e, t) {
-  if (!E(e.field_data)) return e;
+function M(e, t) {
+  if (!T(e.field_data)) return e;
   const n = G(e.field_data, t), s = new Set(n.map((r) => r.key));
   return {
     ...e,
@@ -373,34 +393,34 @@ function T(e, t) {
     ...e.views ? { views: e.views.map((r) => ({ ...r, fields: r.fields.filter((o) => s.has(o)) })) } : {}
   };
 }
-function Le(e, t = {}) {
+function Re(e, t = {}) {
   if ("workflowId" in e) {
     const n = e;
-    return n.forms.some((r) => r.flag !== void 0 || E(r.field_data)) || n.rules.some((r) => r.flag !== void 0) || (n.transitions ?? []).some((r) => r.flag !== void 0) ? {
+    return n.forms.some((r) => r.flag !== void 0 || T(r.field_data)) || n.rules.some((r) => r.flag !== void 0) || (n.transitions ?? []).some((r) => r.flag !== void 0) ? {
       ...n,
-      forms: n.forms.filter((r) => S(r.flag, t)).map((r) => T(r, t)),
+      forms: n.forms.filter((r) => S(r.flag, t)).map((r) => M(r, t)),
       rules: n.rules.filter((r) => S(r.flag, t)),
       ...n.transitions ? { transitions: n.transitions.filter((r) => S(r.flag, t)) } : {}
     } : e;
   }
-  return T(e, t);
+  return M(e, t);
 }
 function de(e) {
   if (e == null || e === "") return null;
   const t = Number(e);
   return Number.isNaN(t) ? null : t;
 }
-function L(e) {
+function R(e) {
   return typeof e == "number" && Number.isNaN(e) ? null : e;
 }
-function $(e, t) {
+function L(e, t) {
   if ("ref" in e) return q(t, e.ref);
   if ("const" in e) return e.const;
   if ("if" in e) {
     const [s, r, o] = e.if;
-    return x(s, t) ? L($(r, t)) : L($(o, t));
+    return v(s, t) ? R(L(r, t)) : R(L(o, t));
   }
-  const n = e.args.map((s) => L($(s, t)));
+  const n = e.args.map((s) => R(L(s, t)));
   switch (e.op) {
     case "concat":
       return n.map((s) => s == null ? "" : String(s)).join("");
@@ -428,10 +448,10 @@ function $(e, t) {
   }
 }
 function pe(e, t) {
-  return L($(e, t));
+  return R(L(e, t));
 }
-const V = 20, _ = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
-function I(e, t) {
+const C = 20, I = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function V(e, t) {
   return e !== null && typeof e == "object" && Object.hasOwn(e, t) ? e[t] : void 0;
 }
 function O(e, t) {
@@ -454,15 +474,15 @@ function he(e, t) {
   const n = [], s = /* @__PURE__ */ new Map(), r = [];
   let o = {};
   for (const u of e.forms) {
-    if (_.has(u.formName)) {
+    if (I.has(u.formName)) {
       n.push({ ref: u.formName, message: "unsafe form name", kind: "schema" });
       continue;
     }
     r.push(u.formName);
-    const y = {}, N = I(t, u.formName);
+    const y = {}, N = V(t, u.formName);
     for (const m of [...u.field_data, ...B(u)]) {
       if (m.type === "label" || m.type === "section") continue;
-      if (_.has(m.key)) {
+      if (I.has(m.key)) {
         n.push({
           ref: `${u.formName}.${m.key}`,
           message: "unsafe field key",
@@ -471,13 +491,13 @@ function he(e, t) {
         continue;
       }
       s.set(`${u.formName}.${m.key}`, m);
-      const c = I(N, m.key);
-      y[m.key] = c !== void 0 ? c : D(m);
+      const c = V(N, m.key);
+      y[m.key] = c !== void 0 ? c : $(m);
     }
     o[u.formName] = y;
   }
   let i = {}, a = {}, d = !1;
-  for (let u = 0; u < V; u++) {
+  for (let u = 0; u < C; u++) {
     i = {}, a = {};
     for (const c of r) a[c] = { visible: !0 };
     for (const [c, h] of s)
@@ -490,12 +510,12 @@ function he(e, t) {
       };
     const y = /* @__PURE__ */ new Map();
     e.rules.forEach((c, h) => {
-      const l = x(c.when, o) ? c.then : c.else;
+      const l = v(c.when, o) ? c.then : c.else;
       if (!l) return;
       const k = c.priority ?? 0;
       for (const g of l) {
-        const b = ge(g), v = y.get(b) ?? [];
-        v.push({ action: g, priority: k, index: h }), y.set(b, v);
+        const b = ge(g), A = y.get(b) ?? [];
+        A.push({ action: g, priority: k, index: h }), y.set(b, A);
       }
     });
     const N = [];
@@ -507,8 +527,8 @@ function he(e, t) {
         continue;
       }
       if (l.action === "showForm" || l.action === "hideForm" || l.action === "skipForm") {
-        const v = a[l.target.form];
-        if (!v) {
+        const A = a[l.target.form];
+        if (!A) {
           n.push({
             ref: l.target.form,
             message: `rule targets unknown form (${c})`,
@@ -516,7 +536,7 @@ function he(e, t) {
           });
           continue;
         }
-        v.visible = l.action === "showForm";
+        A.visible = l.action === "showForm";
         continue;
       }
       const k = l.target, g = `${k.form}.${k.field}`, b = i[g];
@@ -551,11 +571,11 @@ function he(e, t) {
     const m = {};
     for (const c of r) m[c] = { ...o[c] };
     for (const [c, h] of s) {
-      const [l, k] = C(c);
-      (!a[l].visible || !i[c].visible) && (m[l][k] = D(h));
+      const [l, k] = _(c);
+      (!a[l].visible || !i[c].visible) && (m[l][k] = $(h));
     }
     for (const { ref: c, action: h } of N) {
-      const [l, k] = C(c), g = i[c];
+      const [l, k] = _(c), g = i[c];
       if (!g) {
         n.push({ ref: c, message: "setValue targets unknown field", kind: "schema" });
         continue;
@@ -570,7 +590,7 @@ function he(e, t) {
   }
   d || n.push({
     ref: e.workflowId,
-    message: `rules did not converge within ${V} passes (cycle?)`,
+    message: `rules did not converge within ${C} passes (cycle?)`,
     kind: "data"
   });
   const p = {};
@@ -587,7 +607,7 @@ function ge(e) {
   const t = e.action === "show" || e.action === "hide" ? "visible" : e.action === "enable" || e.action === "disable" ? "enabled" : e.action === "required" || e.action === "optional" ? "required" : e.action === "showForm" || e.action === "hideForm" || e.action === "skipForm" ? "formVisible" : e.action, n = "field" in e.target ? `${e.target.form}.${e.target.field}` : e.target.form;
   return `${t}:${n}`;
 }
-function C(e) {
+function _(e) {
   const t = e.indexOf(".");
   return [e.slice(0, t), e.slice(t + 1)];
 }
@@ -602,7 +622,7 @@ function P(e, t) {
 }
 function W(e, t, n) {
   for (const o of e.transitions ?? [])
-    if (o.from === t && x(o.when, n))
+    if (o.from === t && v(o.when, n))
       return o.to;
   const s = [...e.forms].sort((o, i) => o.order - i.order), r = s.findIndex((o) => o.formName === t);
   return r >= 0 && r + 1 < s.length ? s[r + 1].formName : "end";
@@ -616,7 +636,7 @@ function be(e, t, n, s) {
   }
   return i;
 }
-function $e(e, t) {
+function Le(e, t) {
   var d;
   const n = P(e, t), r = (d = [...e.forms].sort((p, u) => p.order - u.order).find((p) => n.has(p.formName))) == null ? void 0 : d.formName;
   if (!r) return [];
@@ -669,8 +689,8 @@ function we(e, t, n = e.options) {
 }
 export {
   te as a,
-  D as b,
-  Le as c,
+  $ as b,
+  Re as c,
   Z as d,
   we as e,
   Q as f,
@@ -678,17 +698,17 @@ export {
   be as h,
   ee as i,
   B as j,
-  x as k,
+  v as k,
   pe as l,
   S as m,
-  Ae as n,
+  xe as n,
   ne as o,
-  A as p,
+  x as p,
   q,
   Se as r,
-  ve as s,
+  Ae as s,
   f as t,
-  xe as u,
+  ve as u,
   ae as v,
-  $e as w
+  Le as w
 };

package/dist/chunks/motion-BRVCzB4Z.js

@@ -0,0 +1,16 @@
+function a(e, i) {
+  const n = typeof e.getAnimations == "function" ? e.getAnimations({ subtree: !0 }) : [];
+  if (n.length === 0) {
+    i();
+    return;
+  }
+  let s = !1;
+  const t = () => {
+    s || (s = !0, i());
+  };
+  Promise.all(n.map((o) => o.finished.catch(() => {
+  }))).then(t, t), setTimeout(t, 600);
+}
+export {
+  a
+};

package/dist/components/baht-form.d.ts

@@ -3,6 +3,8 @@ import { BahtElement } from './base.js';
 import { DerivedFieldState, FeatureFlags, FormDefinition, Registry, ValidationError } from '../core/types.js';
 export interface BahtFormOptions {
     validateOn?: 'change' | 'blur' | 'submit';
+    /** Debounce (ms) for typed fields; unset = BahtFieldBase.defaultDebounce (150). 0 = none. */
+    inputDebounce?: number;
 }
 /**
  * <baht-form> — dumb controlled form renderer (spec 01).
@@ -64,6 +66,8 @@ export declare class BahtForm extends BahtElement {
     private get sortedFields();
     private stateFor;
     private valueFor;
+    /** Debounced keystrokes still in a control land in `edits` before anyone reads them. */
+    private flushTyped;
     getData(): Record<string, unknown>;
     setValue(patch: Record<string, unknown>): void;
     validate(): {

package/dist/components/base.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, nothing, TemplateResult } from 'lit';
+import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
 import { FieldDescriptor } from '../core/types.js';
 /** Light-DOM Lit base: consumer CSS reaches every internal node (spec 01 §6). */
 export declare class BahtElement extends LitElement {
@@ -22,12 +22,41 @@ export declare abstract class BahtFieldBase extends BahtElement {
      * collide — worst for radios, whose shared native `name` merges groups.
      */
     private readonly uid;
+    /**
+     * Default trailing debounce (ms) for TYPED edits — text, email, password,
+     * textarea, number. Every keystroke otherwise re-runs the host's rules,
+     * validation and dependent-option fetches. Per element: the `debounce`
+     * property/attribute; `<baht-form options.inputDebounce>` sets it for a whole
+     * form. 0 = emit on every keystroke. Selects, checkboxes, radios, toggles,
+     * dates and files are never debounced — a pick is one event.
+     */
+    static defaultDebounce: number;
     field: FieldDescriptor;
     value: unknown;
     disabled: boolean;
     readonly: boolean;
     required: boolean;
     error: string | null;
+    /** Debounce for typed edits (ms); unset = BahtFieldBase.defaultDebounce. */
+    debounce?: number;
+    /**
+     * The keystrokes not yet (or just) handed to the host. The control keeps
+     * rendering `typed.value` until the host's `value` moves, so a re-render
+     * mid-typing (a sibling field changing) can't snap the text back.
+     */
+    private typed;
+    private typedTimer;
+    private readonly onFocusOut;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected get effectiveDebounce(): number;
+    /** A typed edit: emitted after `debounce` ms of quiet (or at once when 0). */
+    protected emitTyped(value: unknown): void;
+    /** Hand a pending typed edit to the host now (blur, disconnect, host reads). Idempotent. */
+    flushTyped(): void;
+    /** What a typed control shows: pending keystrokes win over a stale host value. */
+    protected get shownValue(): unknown;
     /** Emit the user's edit upward (composed so it crosses any boundary). */
     protected emitInput(value: unknown): void;
     protected abstract renderControl(): TemplateResult;

package/dist/components/motion.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Call `done` once the CSS animations currently running on `el` (or inside
+ * it) have finished — or right away when none play: `prefers-reduced-motion`
+ * (the stylesheet sets `animation: none`), a host without the tokens
+ * stylesheet, or a DOM without the Web Animations API (happy-dom). Add the
+ * `--leaving` class BEFORE calling this so the exit keyframes are the ones
+ * being waited on.
+ */
+export declare function afterExit(el: Element, done: () => void): void;

package/dist/components/primitives/baht-alert.d.ts

@@ -12,6 +12,7 @@ export declare class BahtAlert extends BahtElement {
     message: string;
     dismissible: boolean;
     private dismissed;
+    private generation;
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     private dismiss;
     protected render(): TemplateResult | typeof nothing;

package/dist/components/primitives/baht-datepicker.d.ts

@@ -13,6 +13,11 @@ import { BahtFieldBase } from '../base.js';
  * The calendar renders INSIDE the element (flatpickr `static`), so it lives in
  * light DOM like every other node and picks up a theme set on any ancestor.
  * Give a clipping ancestor (`overflow: hidden`) room, or it hides the popup.
+ *
+ * A footer under the grid carries **Today** (picks today — greyed out when
+ * min/max/disabled rules exclude it) and **Clear** (empties the value). Both
+ * go through flatpickr, so they emit exactly like a click on a day. `disableMobile`
+ * keeps this calendar on phones too — never the OS date wheel.
  */
 export declare class BahtDatepicker extends BahtFieldBase {
     private fp;
@@ -22,6 +27,8 @@ export declare class BahtDatepicker extends BahtFieldBase {
      * pick onChange already sent — compare against this until `value` catches up.
      */
     private lastEmitted;
+    private todayBtn;
+    private clearBtn;
     protected renderControl(): TemplateResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -30,6 +37,13 @@ export declare class BahtDatepicker extends BahtFieldBase {
     /** Push the host-fed `value` into the calendar without echoing an event. */
     private syncValue;
     private options;
+    private mountFooter;
+    /** 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. */
+    private refreshFooter;
+    private todayAllowed;
+    private pickToday;
     private emitIfChanged;
     /** Host value (any mode) -> the Date list flatpickr works with. */
     private datesOf;

package/dist/components/primitives/baht-modal.d.ts

@@ -16,6 +16,10 @@ export declare class BahtModal extends BahtElement {
     showClose: boolean;
     closeOnScrim: boolean;
     private bodyEl;
+    private static instances;
+    private readonly titleId;
+    private closing;
+    private closeToken;
     private static openStack;
     private previousFocus;
     private onKeydown;
@@ -25,6 +29,7 @@ export declare class BahtModal extends BahtElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     protected updated(changed: Map<PropertyKey, unknown>): void;
     /** Ask the host to close (the host owns `open`). */
     requestClose(reason?: 'escape' | 'scrim' | 'button'): void;

package/dist/components/primitives/baht-repeater.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { BahtFieldBase } from '../base.js';
 import { ValidationError } from '../../core/types.js';
 /**
@@ -16,12 +16,14 @@ export declare class BahtRepeater extends BahtFieldBase {
      * when the descriptor changes or row indexes shift (remove).
      */
     private controls;
-    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
     private get rows();
     private get subFields();
     private patchRow;
     private addRow;
     private removeRow;
+    /** Pending keystrokes in any row land in the array before the host reads it. */
+    flushTyped(): void;
     private errorFor;
     private renderSub;
     protected renderControl(): TemplateResult;

package/dist/components/primitives/baht-select.d.ts

@@ -1,5 +1,45 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { BahtFieldBase } from '../base.js';
+/**
+ * Single-choice dropdown. Renders ITS OWN list (light DOM, positioned under
+ * the trigger) instead of the native `<select>` — so the picker looks the same
+ * on iOS/macOS as everywhere else (no UIKit wheel, no AppKit menu), and every
+ * option is styleable with the tokens.
+ *
+ * ARIA: APG "select-only combobox". The trigger is a `<button role="combobox">`
+ * (so `<label for>` still names it); `aria-activedescendant` tracks the
+ * highlighted option while focus stays on the trigger. Keys: Arrow Up/Down,
+ * Home/End, Enter/Space pick, Escape closes, Tab picks the highlighted option
+ * and moves on, typing jumps to the first option starting with those letters
+ * (while closed it picks it directly, like a native select).
+ *
+ * Value contract unchanged: option `key`, or `null` for the placeholder row.
+ */
 export declare class BahtSelect extends BahtFieldBase {
+    private open;
+    /** Index into `rows` (0 = the placeholder row) — the highlighted option. */
+    private active;
+    private typeBuffer;
+    private typeTimer;
+    private readonly onDocMousedown;
+    disconnectedCallback(): void;
+    private get listId();
+    private optionId;
+    /** Placeholder row first (picks `null`), then the field's options. */
+    private get rows();
+    private get currentKey();
+    private get selectedIndex();
+    private get interactive();
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(): void;
+    private openList;
+    private close;
+    private toggle;
+    private commit;
+    private highlight;
+    private move;
+    /** Type-to-select: first option (after the highlighted one) starting with the buffer. */
+    private typeahead;
+    private onKeydown;
     protected renderControl(): TemplateResult;
 }

package/dist/components/primitives/baht-table.d.ts

@@ -95,6 +95,8 @@ export declare class BahtTable extends BahtElement {
     hasNext: boolean;
     hasPrev: boolean;
     private pickerOpen;
+    private static instances;
+    private readonly pickerTitleId;
     /** User's picks once they've touched the picker; null = follow `visibleColumns`/all. */
     private pickedColumns;
     /** Working copy edited inside the modal; committed to `pickedColumns` on OK. */
@@ -104,7 +106,12 @@ export declare class BahtTable extends BahtElement {
     private pickSel;
     /** Reference columns unfolded in the Available tree (dot-walk). */
     private expanded;
+    /** Element focused before the picker opened — focus returns there on close. */
+    private pickerPreviousFocus;
     private readonly onPickerKeydown;
+    private pickerFocusables;
+    /** Keep Tab cycling inside the column-picker dialog (no escape to the page behind). */
+    private trapPickerFocus;
     disconnectedCallback(): void;
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     /** The declared map, or one derived from the first row (nested objects become reference columns). */