bank20baht-ui 0.7.3 → 0.8.0

package/README.md

@@ -5,6 +5,7 @@ Components (Lit, light DOM) with a pure-TypeScript rules core.
 
 ```
 npm i bank20baht-ui
+npm i flatpickr   # peer dependency — only if you render date fields / <baht-datepicker>
 ```
 
 ## Quick start — one form (Level 1)
@@ -313,13 +314,22 @@ await registerElements(['baht-button', 'baht-avatar']);
 ```
 
 ```css
-/* 3. split stylesheets instead of the all-in-one tokens.css (139 KB) */
+/* 3. split stylesheets instead of the all-in-one tokens.css (~115 KB) */
 @import 'bank20baht-ui/css/tokens.css'; /* custom properties only, 18 KB */
 @import 'bank20baht-ui/css/components.css'; /* .baht-* classes */
-@import 'bank20baht-ui/css/datepicker.css'; /* flatpickr base + re-skin — only with <baht-datepicker> / date fields */
 ```
 
-`bank20baht-ui/tokens.css` stays the one-import sheet (all three, flatpickr included).
+`bank20baht-ui/tokens.css` = the two sheets above in one import. The calendar is opt-in:
+
+```css
+/* with <baht-datepicker> / date fields — flatpickr's base sheet + the token re-skin */
+@import 'bank20baht-ui/css/datepicker.css';
+```
+
+flatpickr itself is a **peer dependency** (`npm i flatpickr`) loaded with a dynamic
+`import()` the first time a `<baht-datepicker>` mounts, so apps without date fields never
+bundle it and apps with them get it as its own chunk. `await el.updateComplete` on the
+element resolves once the calendar is attached.
 
 ## One install, typed everywhere
 

package/dist/components/baht-form.js

@@ -1,15 +1,15 @@
 import { nothing as b, html as p } from "lit";
-import { property as u, state as m, customElement as T } from "lit/decorators.js";
+import { property as u, state as m, customElement as V } from "lit/decorators.js";
 import { repeat as P } from "lit/directives/repeat.js";
-import { html as w, unsafeStatic as I } from "lit/static-html.js";
-import { BahtElement as B, hasDom as D } from "./base.js";
-import { TAG_FOR_TYPE as A } from "./primitives/tag-map.js";
+import { html as w } from "lit/static-html.js";
+import { BahtElement as T, hasDom as D } from "./base.js";
+import { TAG_FOR_TYPE as B, WIDTH_CLASS as I, staticTag as j } from "./primitives/tag-map.js";
 import { defaultValue as C } from "../core/defaults.js";
 import { t as _ } from "../core/i18n.js";
 import { validateField as M } from "../core/validators.js";
 import { resolveViewFields as q } from "../core/views.js";
-import { applyFlags as j } from "../core/flags.js";
-import { hasScripts as k, runScripts as F, createScriptContext as L, MAX_SCRIPT_DEPTH as E } from "../core/engine/scripts.js";
+import { applyFlags as L } from "../core/flags.js";
+import { hasScripts as k, runScripts as F, createScriptContext as A, MAX_SCRIPT_DEPTH as E } from "../core/engine/scripts.js";
 import { displayValue as R } from "../core/display.js";
 import "./primitives/baht-input.js";
 import "./primitives/baht-textarea.js";
@@ -25,22 +25,12 @@ import "./primitives/baht-file.js";
 import "./primitives/baht-text.js";
 import "./primitives/baht-section.js";
 import "./primitives/baht-repeater.js";
-var U = Object.defineProperty, G = Object.getOwnPropertyDescriptor, h = (t, e, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? G(e, s) : e, o = t.length - 1, a; o >= 0; o--)
+var U = Object.defineProperty, H = Object.getOwnPropertyDescriptor, h = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? H(e, s) : e, o = t.length - 1, a; o >= 0; o--)
     (a = t[o]) && (r = (i ? a(e, s, r) : a(r)) || r);
   return i && r && U(e, s, r), r;
 };
-const H = {
-  "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"
-}, x = /* @__PURE__ */ new Map();
-function W(t) {
-  let e = x.get(t);
-  return e || (e = I(t), x.set(t, e)), e;
-}
-let n = class extends B {
+let n = class extends T {
   constructor() {
     super(...arguments), this.value = {}, this.registry = {}, this.showOptional = !1, this.options = {}, this.fieldStates = {}, this.flags = {}, this.readonly = !1, this.edits = {}, this.errors = [], this.scriptStates = {}, this.fieldMessages = {}, this.formMessages = [], this.scriptContext = null, this.scriptContextForm = null, this.scriptDepth = 0, this.loadedForm = null, this.dynamicOptions = /* @__PURE__ */ new Map(), this.optionsSnapshots = /* @__PURE__ */ new Map(), this.optionsEpoch = /* @__PURE__ */ new Map(), this.warnedViews = /* @__PURE__ */ new Set(), this.flagCache = {};
   }
@@ -48,7 +38,7 @@ let n = class extends B {
     return this.form ? ((this.flagCache.form !== this.form || this.flagCache.flags !== this.flags) && (this.flagCache = {
       form: this.form,
       flags: this.flags,
-      out: j(this.form, this.flags)
+      out: L(this.form, this.flags)
     }), this.flagCache.out) : this.form;
   }
   willUpdate(t) {
@@ -183,7 +173,7 @@ let n = class extends B {
   // ---- client scripts (spec 01 §14) ----
   /** The `g` (g_form) for the current form — built lazily over this component's state. */
   g(t) {
-    return this.scriptContext && this.scriptContextForm === t ? this.scriptContext : (this.scriptContextForm = t, this.scriptContext = L(t, {
+    return this.scriptContext && this.scriptContextForm === t ? this.scriptContext : (this.scriptContextForm = t, this.scriptContext = A(t, {
       getData: () => this.getData(),
       setValue: (e, s) => this.applyScriptValue(e, s),
       setState: (e, s) => {
@@ -303,16 +293,16 @@ let n = class extends B {
   }
   renderField(t) {
     var S, O;
-    const e = A[t.type];
+    const e = B[t.type];
     if (!e)
       return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), b;
-    const s = this.stateFor(t), i = H[t.width ?? "full"] ?? "baht-field--w-full", r = ((S = this.errors.find((d) => d.key === t.key)) == null ? void 0 : S.message) ?? null;
+    const s = this.stateFor(t), i = I[t.width ?? "full"] ?? "baht-field--w-full", r = ((S = this.errors.find((d) => d.key === t.key)) == null ? void 0 : S.message) ?? null;
     if (this.readonly && t.type !== "label" && t.type !== "section")
       return this.renderReadonlyField(t, i, s.visible);
-    const o = t.options_from ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, a = this.valueFor(t), l = !s.enabled, c = this.readonly || s.readonly, v = this.options.inputDebounce, $ = (d) => this.onControlInput(t.key, d), f = W(e);
+    const o = t.options_from ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, a = this.valueFor(t), l = !s.enabled, c = this.readonly || s.readonly, v = this.options.inputDebounce, $ = (d) => this.onControlInput(t.key, d), f = j(e);
     let y;
     if (t.type === "repeater") {
-      const d = this.errors.filter((V) => V.key.startsWith(`${t.key}[`));
+      const d = this.errors.filter((x) => x.key.startsWith(`${t.key}[`));
       y = w`<${f}
         .field=${o}
         .value=${a}
@@ -465,7 +455,7 @@ h([
   m()
 ], n.prototype, "formMessages", 2);
 n = h([
-  T("baht-form")
+  V("baht-form")
 ], n);
 export {
   n as BahtForm

package/dist/components/baht-workflow.js

@@ -1,18 +1,18 @@
 import { nothing as d, html as l } from "lit";
-import { property as m, state as p, customElement as b } from "lit/decorators.js";
-import { BahtElement as w } from "./base.js";
+import { property as m, state as c, customElement as w } from "lit/decorators.js";
+import { boolOff as v, BahtElement as g } from "./base.js";
 import { t as f } from "../core/i18n.js";
-import { applyFlags as g } from "../core/flags.js";
-import { evaluate as _ } from "../core/engine/evaluate.js";
-import { resolveNext as k } from "../core/engine/graph.js";
+import { applyFlags as _ } from "../core/flags.js";
+import { evaluate as k } from "../core/engine/evaluate.js";
+import { resolveNext as $ } from "../core/engine/graph.js";
 import "./baht-form.js";
 import "./primitives/baht-steps.js";
-var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (t, e, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? $(e, a) : e, o = t.length - 1, h; o >= 0; o--)
+var y = Object.defineProperty, F = Object.getOwnPropertyDescriptor, n = (t, e, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? F(e, a) : e, o = t.length - 1, h; o >= 0; o--)
     (h = t[o]) && (i = (r ? h(e, a, i) : h(i)) || i);
   return r && i && y(e, a, i), i;
 };
-let s = class extends w {
+let s = class extends g {
   constructor() {
     super(...arguments), this.value = {}, this.registry = {}, this.validateGate = !0, this.showBack = !0, this.flags = {}, this.showSteps = !1, this.stepsVariant = "default", this.data = {}, this.derived = null, this.current = null, this.approvalError = null, this.history = [], this.flagCache = {};
   }
@@ -23,15 +23,15 @@ let s = class extends w {
     return this.workflow ? ((this.flagCache.workflow !== this.workflow || this.flagCache.flags !== this.flags) && (this.flagCache = {
       workflow: this.workflow,
       flags: this.flags,
-      out: g(this.workflow, this.flags)
+      out: _(this.workflow, this.flags)
     }), this.flagCache.out) : this.workflow;
   }
   willUpdate(t) {
     var e, a;
-    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((r) => r.form_name === this.current) && (this.current = ((a = this.visibleForms[0]) == null ? void 0 : a.form_name) ?? null));
+    this.workflow && (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((r) => r.form_name === this.current) && (this.current = ((a = this.visibleForms[0]) == null ? void 0 : a.form_name) ?? null)));
   }
   reevaluate() {
-    this.derived = _(this.effectiveWorkflow, this.data), this.data = this.derived.data;
+    this.derived = k(this.effectiveWorkflow, this.data), this.data = this.derived.data;
   }
   /** Forms in ascending order whose derived visibility is true. */
   get visibleForms() {
@@ -51,7 +51,7 @@ let s = class extends w {
     if (!this.current) return "end";
     const t = this.effectiveWorkflow;
     if (t.transitions && t.transitions.length > 0)
-      return k(t, this.current, this.data);
+      return $(t, this.current, this.data);
     const e = this.visibleForms, a = e.findIndex((i) => i.form_name === this.current);
     return ((r = e[a + 1]) == null ? void 0 : r.form_name) ?? "end";
   }
@@ -146,8 +146,8 @@ let s = class extends w {
       return;
     }
     this.emit("baht-reject", h);
-    const c = a.on_reject ?? { action: "end" };
-    c.action === "goto" && this.visibleForms.some((v) => v.form_name === c.form) ? this.gotoForm(c.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
+    const p = a.on_reject ?? { action: "end" };
+    p.action === "goto" && this.visibleForms.some((b) => b.form_name === p.form) ? this.gotoForm(p.form) : this.emit("baht-complete", { data: this.getData(), status: "rejected" });
   }
   /** Jump back to a visible form, truncating the history to that point. */
   gotoForm(t) {
@@ -288,7 +288,7 @@ n([
   m({ attribute: !1 })
 ], s.prototype, "registry", 2);
 n([
-  m({ type: Boolean, attribute: "validate-gate" })
+  m({ attribute: "validate-gate", converter: v })
 ], s.prototype, "validateGate", 2);
 n([
   m({ attribute: "next-label" })
@@ -300,7 +300,7 @@ n([
   m({ attribute: "back-label" })
 ], s.prototype, "backLabel", 2);
 n([
-  m({ type: Boolean, attribute: "show-back" })
+  m({ attribute: "show-back", converter: v })
 ], s.prototype, "showBack", 2);
 n([
   m({ attribute: !1 })
@@ -312,19 +312,19 @@ n([
   m({ attribute: "steps-variant" })
 ], s.prototype, "stepsVariant", 2);
 n([
-  p()
+  c()
 ], s.prototype, "data", 2);
 n([
-  p()
+  c()
 ], s.prototype, "derived", 2);
 n([
-  p()
+  c()
 ], s.prototype, "current", 2);
 n([
-  p()
+  c()
 ], s.prototype, "approvalError", 2);
 s = n([
-  b("baht-workflow")
+  w("baht-workflow")
 ], s);
 export {
   s as BahtWorkflow

package/dist/components/base.d.ts

@@ -1,5 +1,4 @@
-import { LitElement, nothing, PropertyValues, RenderOptions, TemplateResult } from 'lit';
-import { FieldDescriptor } from '../core/types.js';
+import { LitElement, PropertyValues, RenderOptions } from 'lit';
 /**
  * True when a real DOM is present. Lit's own `isServer` is hard-coded to `true` in its
  * node build, which jsdom/happy-dom test runners also load, so guards that need "is there
@@ -7,6 +6,17 @@ import { FieldDescriptor } from '../core/types.js';
  * `querySelector`.
  */
 export declare function hasDom(): boolean;
+/**
+ * Attribute converter for booleans that DEFAULT TO TRUE. Lit's own `type: Boolean` reads
+ * `show-close="false"` as true (presence is all it checks), so a default-true switch could
+ * never be turned off from HTML. With this: absent = default, bare = true, `="false"` = false.
+ *
+ *   @property({ attribute: 'show-close', converter: boolOff }) showClose = true;
+ */
+export declare const boolOff: {
+    fromAttribute: (value: string | null) => boolean;
+    toAttribute: (value: boolean) => string | null;
+};
 /** Signature of the light-DOM hydrate function installed by `bank20baht-ui/hydrate`. */
 export type BahtHydrate = (value: unknown, host: HTMLElement, options?: RenderOptions) => void;
 /**
@@ -43,71 +53,3 @@ export declare class BahtElement extends LitElement {
  * connectedCallback fires, so sweeping at first render is the reliable point.)
  */
 export declare function adoptLightChildren(host: HTMLElement, slot: HTMLElement): void;
-/**
- * Shared shape of every field primitive: descriptor + value in, `baht-input` out.
- * Dumb and controlled — never mutates its own `value` prop; the host re-feeds it.
- *
- * `controlId` carries the base class `uid`: the same field key renders once per repeater
- * row (and can repeat across forms on one page), so key-only ids collide — worst for
- * radios, whose shared native `name` merges groups.
- */
-export declare abstract class BahtFieldBase extends BahtElement {
-    /**
-     * 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;
-    /** Append the localized "(optional)" marker to the label when not required (set by <baht-form show-optional>). */
-    showOptional: 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;
-    /** True when `field.icon` names a real icon — gates both the icon markup
-     * and the control's icon-padding class, so a typo/removed name never
-     * leaves the control indented for a glyph that isn't there. */
-    protected get hasFieldIcon(): boolean;
-    /** Leading icon for text/currency/textarea/dropdown controls (spec: field.icon). */
-    protected renderFieldIcon(): TemplateResult | typeof nothing;
-    protected renderLabel(): TemplateResult | typeof nothing;
-    /** Required asterisk, or the "(optional)" marker when the form asks for it. */
-    protected renderLabelMark(): TemplateResult | typeof nothing;
-    protected get controlId(): string;
-    protected get labelId(): string;
-    protected get errorId(): string;
-    protected get helpId(): string;
-    /** id list for the control's aria-describedby: error first, then help. */
-    protected get describedBy(): string | typeof nothing;
-    /** 'true' while the field is in error, else absent (styles hook on [aria-invalid]). */
-    protected get invalid(): string | typeof nothing;
-    protected render(): TemplateResult | typeof nothing;
-}

package/dist/components/base.js

@@ -1,37 +1,33 @@
-import { nothing as o, html as a, LitElement as y, ReactiveElement as m } from "lit";
-import { property as l } from "lit/decorators.js";
-import { t as v } from "../core/i18n.js";
-import { isIconName as c, renderIcon as C } from "./primitives/icons.js";
-var I = Object.defineProperty, d = (i, e, t, s) => {
-  for (var r = void 0, u = i.length - 1, p; u >= 0; u--)
-    (p = i[u]) && (r = p(e, t, r) || r);
-  return r && I(e, t, r), r;
-};
-function f() {
+import { LitElement as d, ReactiveElement as u } from "lit";
+function n() {
   return typeof document < "u" && typeof document.querySelector == "function";
 }
-const T = Symbol.for("bahtui.ssrStash");
-function $(i) {
-  if (i[T]) return !0;
-  const e = i.firstChild;
-  return (e == null ? void 0 : e.nodeType) === 8 && e.data.startsWith("lit-part");
+const f = {
+  fromAttribute: (r) => r !== "false",
+  // null (absent) = default
+  toAttribute: (r) => r ? "" : "false"
+}, h = Symbol.for("bahtui.ssrStash");
+function l(r) {
+  if (r[h]) return !0;
+  const t = r.firstChild;
+  return (t == null ? void 0 : t.nodeType) === 8 && t.data.startsWith("lit-part");
 }
-function g(i) {
-  let e = i.firstChild;
-  if (!e || e.nodeType !== 8 || !e.data.startsWith("lit-part")) return;
-  let t = 0;
-  for (; e; ) {
-    const s = e.nextSibling;
-    if (e.nodeType === 8) {
-      const r = e.data;
-      r.startsWith("lit-part") ? t += 1 : r.startsWith("/lit-part") && (t -= 1);
+function p(r) {
+  let t = r.firstChild;
+  if (!t || t.nodeType !== 8 || !t.data.startsWith("lit-part")) return;
+  let e = 0;
+  for (; t; ) {
+    const i = t.nextSibling;
+    if (t.nodeType === 8) {
+      const s = t.data;
+      s.startsWith("lit-part") ? e += 1 : s.startsWith("/lit-part") && (e -= 1);
     }
-    if (e.remove(), t === 0) break;
-    e = s;
+    if (t.remove(), e === 0) break;
+    t = i;
   }
 }
-let b = 0;
-class k extends y {
+let a = 0;
+class b extends d {
   constructor() {
     super(...arguments), this.uid = 0;
   }
@@ -49,164 +45,46 @@ class k extends y {
   static get observedAttributes() {
     return [...super.observedAttributes, "defer-hydration"];
   }
-  attributeChangedCallback(e, t, s) {
-    if (e === "defer-hydration") {
-      s === null && this.isConnected && super.connectedCallback();
+  attributeChangedCallback(t, e, i) {
+    if (t === "defer-hydration") {
+      i === null && this.isConnected && super.connectedCallback();
       return;
     }
-    super.attributeChangedCallback(e, t, s);
+    super.attributeChangedCallback(t, e, i);
   }
   connectedCallback() {
     this.hasAttribute("defer-hydration") || super.connectedCallback();
   }
-  update(e) {
-    const t = !this.hasUpdated, s = globalThis.bahtHydrate, r = t && f() && $(this);
-    if (r)
-      if (s) {
-        const u = this.render();
-        this.renderOptions.isConnected = this.isConnected, m.prototype.update.call(this, e), s(u, this, this.renderOptions);
+  update(t) {
+    const e = !this.hasUpdated, i = globalThis.bahtHydrate, s = e && n() && l(this);
+    if (s)
+      if (i) {
+        const o = this.render();
+        this.renderOptions.isConnected = this.isConnected, u.prototype.update.call(this, t), i(o, this, this.renderOptions);
       } else
-        g(this), super.update(e);
+        p(this), super.update(t);
     else
-      t && f() && this.uid === 0 && (this.uid = ++b), super.update(e);
-    r && this.uid === 0 && (this.uid = ++b, this.requestUpdate());
+      e && n() && this.uid === 0 && (this.uid = ++a), super.update(t);
+    s && this.uid === 0 && (this.uid = ++a, this.requestUpdate());
   }
   /** Dispatch a bubbling, composed CustomEvent — crosses any light/shadow DOM boundary. */
-  emit(e, t) {
-    this.dispatchEvent(new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 }));
+  emit(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
   }
 }
-function E(i, e) {
-  let t = e;
-  for (; t.parentNode && t.parentNode !== i; ) t = t.parentNode;
-  const s = Array.from(i.childNodes).filter(
-    (r) => r !== t && r.nodeType !== Node.COMMENT_NODE
+function y(r, t) {
+  let e = t;
+  for (; e.parentNode && e.parentNode !== r; ) e = e.parentNode;
+  const i = Array.from(r.childNodes).filter(
+    (s) => s !== e && s.nodeType !== Node.COMMENT_NODE
   );
-  s.length > 0 && e.append(...s);
+  i.length > 0 && t.append(...i);
 }
-var h;
-const n = (h = class extends k {
-  constructor() {
-    super(...arguments), this.value = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.showOptional = !1, this.error = null, this.typed = null, this.onFocusOut = () => this.flushTyped();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("focusout", this.onFocusOut);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("focusout", this.onFocusOut), this.flushTyped(), super.disconnectedCallback();
-  }
-  willUpdate(e) {
-    var t;
-    super.willUpdate(e), e.has("value") && ((t = this.typed) != null && t.emitted) && (this.typed = null);
-  }
-  get effectiveDebounce() {
-    return this.debounce ?? h.defaultDebounce;
-  }
-  /** A typed edit: emitted after `debounce` ms of quiet (or at once when 0). */
-  emitTyped(e) {
-    const t = this.effectiveDebounce;
-    if (clearTimeout(this.typedTimer), t <= 0) {
-      this.typed = null, this.emitInput(e);
-      return;
-    }
-    this.typed = { value: e, emitted: !1 }, this.typedTimer = setTimeout(() => this.flushTyped(), t);
-  }
-  /** Hand a pending typed edit to the host now (blur, disconnect, host reads). Idempotent. */
-  flushTyped() {
-    clearTimeout(this.typedTimer), this.typedTimer = void 0, !(!this.typed || this.typed.emitted) && (this.typed.emitted = !0, this.emitInput(this.typed.value));
-  }
-  /** What a typed control shows: pending keystrokes win over a stale host value. */
-  get shownValue() {
-    return this.typed ? this.typed.value : this.value;
-  }
-  /** Emit the user's edit upward (composed so it crosses any boundary). */
-  emitInput(e) {
-    this.emit("baht-input", { key: this.field.key, value: e });
-  }
-  /** True when `field.icon` names a real icon — gates both the icon markup
-   * and the control's icon-padding class, so a typo/removed name never
-   * leaves the control indented for a glyph that isn't there. */
-  get hasFieldIcon() {
-    const e = this.field.icon;
-    return e != null && c(e);
-  }
-  /** Leading icon for text/currency/textarea/dropdown controls (spec: field.icon). */
-  renderFieldIcon() {
-    const e = this.field.icon;
-    return e == null || !c(e) ? o : a`<span class="baht-field-icon" aria-hidden="true">${C(e)}</span>`;
-  }
-  renderLabel() {
-    return this.field.label ? a`<label class="baht-label" id=${this.labelId} for=${this.controlId}>
-      ${this.field.label}${this.renderLabelMark()}
-    </label>` : o;
-  }
-  /** Required asterisk, or the "(optional)" marker when the form asks for it. */
-  renderLabelMark() {
-    return this.required ? a`<span class="baht-required-mark" aria-hidden="true">*</span>` : this.showOptional ? a`<span class="baht-optional">${v("optional")}</span>` : o;
-  }
-  get controlId() {
-    var e;
-    return `baht-${((e = this.field) == null ? void 0 : e.key) ?? ""}-${this.uid}`;
-  }
-  get labelId() {
-    return `${this.controlId}-label`;
-  }
-  get errorId() {
-    return `${this.controlId}-error`;
-  }
-  get helpId() {
-    return `${this.controlId}-help`;
-  }
-  /** id list for the control's aria-describedby: error first, then help. */
-  get describedBy() {
-    const e = [this.error ? this.errorId : "", this.field.help ? this.helpId : ""].filter(
-      Boolean
-    );
-    return e.length > 0 ? e.join(" ") : o;
-  }
-  /** 'true' while the field is in error, else absent (styles hook on [aria-invalid]). */
-  get invalid() {
-    return this.error ? "true" : o;
-  }
-  render() {
-    return this.field ? a`
-      ${this.renderLabel()}
-      ${this.renderControl()}
-      ${this.field.help ? a`<div class="baht-help" id=${this.helpId}>${this.field.help}</div>` : o}
-      ${this.error ? a`<div class="baht-error" id=${this.errorId} role="alert">${this.error}</div>` : o}
-    ` : o;
-  }
-}, h.defaultDebounce = 150, h);
-d([
-  l({ attribute: !1 })
-], n.prototype, "field");
-d([
-  l({ attribute: !1 })
-], n.prototype, "value");
-d([
-  l({ type: Boolean })
-], n.prototype, "disabled");
-d([
-  l({ type: Boolean })
-], n.prototype, "readonly");
-d([
-  l({ type: Boolean })
-], n.prototype, "required");
-d([
-  l({ type: Boolean, attribute: "show-optional" })
-], n.prototype, "showOptional");
-d([
-  l({ attribute: !1 })
-], n.prototype, "error");
-d([
-  l({ type: Number })
-], n.prototype, "debounce");
-let N = n;
 export {
-  k as BahtElement,
-  N as BahtFieldBase,
-  T as SSR_STASH,
-  E as adoptLightChildren,
-  f as hasDom,
-  $ as hasSsrMarkup
+  b as BahtElement,
+  h as SSR_STASH,
+  y as adoptLightChildren,
+  f as boolOff,
+  n as hasDom,
+  l as hasSsrMarkup
 };

package/dist/components/field-base.d.ts

@@ -0,0 +1,71 @@
+import { nothing, PropertyValues, TemplateResult } from 'lit';
+import { FieldDescriptor } from '../core/types.js';
+import { BahtElement } from './base.js';
+/**
+ * Shared shape of every field primitive: descriptor + value in, `baht-input` out.
+ * Dumb and controlled — never mutates its own `value` prop; the host re-feeds it.
+ *
+ * `controlId` carries the base class `uid`: the same field key renders once per repeater
+ * row (and can repeat across forms on one page), so key-only ids collide — worst for
+ * radios, whose shared native `name` merges groups.
+ */
+export declare abstract class BahtFieldBase extends BahtElement {
+    /**
+     * 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;
+    /** Append the localized "(optional)" marker to the label when not required (set by <baht-form show-optional>). */
+    showOptional: 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;
+    /** True when `field.icon` names a real icon — gates both the icon markup
+     * and the control's icon-padding class, so a typo/removed name never
+     * leaves the control indented for a glyph that isn't there. */
+    protected get hasFieldIcon(): boolean;
+    /** Leading icon for text/currency/textarea/dropdown controls (spec: field.icon). */
+    protected renderFieldIcon(): TemplateResult | typeof nothing;
+    protected renderLabel(): TemplateResult | typeof nothing;
+    /** Required asterisk, or the "(optional)" marker when the form asks for it. */
+    protected renderLabelMark(): TemplateResult | typeof nothing;
+    protected get controlId(): string;
+    protected get labelId(): string;
+    protected get errorId(): string;
+    protected get helpId(): string;
+    /** id list for the control's aria-describedby: error first, then help. */
+    protected get describedBy(): string | typeof nothing;
+    /** 'true' while the field is in error, else absent (styles hook on [aria-invalid]). */
+    protected get invalid(): string | typeof nothing;
+    protected render(): TemplateResult | typeof nothing;
+}