bank20baht-ui 0.8.0 → 0.8.2

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

@@ -26,7 +26,7 @@ export declare class BahtForm extends BahtElement {
      * but getData() still returns the FULL form — the server always validates
      * the complete schema, views never change the submit payload.
      */
-    view?: string;
+    view?: string | undefined;
     /**
      * Feature-flag values (spec 01 §12) — fields whose `flag` is off behave as
      * if they were never in the schema: no render, no validation, no payload.
@@ -58,6 +58,11 @@ export declare class BahtForm extends BahtElement {
     private warnedViews;
     /** applyFlags result, memoized on (form, flags) identity. */
     private flagCache;
+    /**
+     * `form` as the host may actually have left it: a framework can connect the element
+     * before it binds the property, so internally it is optional until then.
+     */
+    private get assignedForm();
     private get effectiveForm();
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     /**
@@ -73,6 +78,15 @@ export declare class BahtForm extends BahtElement {
      */
     private clearDependents;
     private get sortedFields();
+    /**
+     * Visibility as of the last completed render, by key. A field that was
+     * hidden there and is visible now gets `baht-field--revealed` for one
+     * render so the stylesheet can fade it in; fields visible from the first
+     * render never animate (a form should not shimmer on mount).
+     */
+    private lastVisible;
+    private nextVisible;
+    private revealClass;
     private stateFor;
     private valueFor;
     /** Debounced keystrokes still in a control land in `edits` before anyone reads them. */
@@ -116,6 +130,8 @@ export declare class BahtForm extends BahtElement {
      * `renderField`/`.baht-error`). No-op for 'change'/'submit' modes. */
     private onFieldBlur;
     private renderField;
+    private uploaderFor;
+    private renderFieldMsg;
     /**
      * Resolve the descriptor at event time — it may have changed since the control
      * was first rendered (the same node is reused across renders, see render()).

package/dist/components/baht-form.js

@@ -1,16 +1,16 @@
-import { nothing as b, html as p } from "lit";
-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 } 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 { nothing as g, html as p } from "lit";
+import { property as d, state as m, customElement as x } from "lit/decorators.js";
+import { repeat as E } from "lit/directives/repeat.js";
+import { html as $ } from "lit/static-html.js";
+import { BahtElement as P, hasDom as O } from "./base.js";
+import { TAG_FOR_TYPE as T, WIDTH_CLASS as B, staticTag as I } 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 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 { t as D } from "../core/i18n.js";
+import { validateField as _ } from "../core/validators.js";
+import { resolveViewFields as M } from "../core/views.js";
+import { applyFlags as j } from "../core/flags.js";
+import { hasScripts as w, runScripts as F, createScriptContext as L, MAX_SCRIPT_DEPTH as V } from "../core/engine/scripts.js";
+import { displayValue as A } from "../core/display.js";
 import "./primitives/baht-input.js";
 import "./primitives/baht-textarea.js";
 import "./primitives/baht-number.js";
@@ -25,21 +25,26 @@ import "./primitives/baht-file.js";
 import "./primitives/baht-text.js";
 import "./primitives/baht-section.js";
 import "./primitives/baht-repeater.js";
-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;
+var R = Object.defineProperty, U = Object.getOwnPropertyDescriptor, h = (t, s, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? U(s, e) : s, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (r = (i ? a(s, e, r) : a(r)) || r);
+  return i && r && R(s, e, r), r;
 };
-let n = class extends T {
+let n = class extends P {
   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 = {};
+    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 = {}, this.lastVisible = {}, this.nextVisible = {};
+  }
+  /**
+   * `form` as the host may actually have left it: a framework can connect the element
+   * before it binds the property, so internally it is optional until then.
+   */
+  get assignedForm() {
+    return this.form;
   }
   get effectiveForm() {
-    return this.form ? ((this.flagCache.form !== this.form || this.flagCache.flags !== this.flags) && (this.flagCache = {
-      form: this.form,
-      flags: this.flags,
-      out: L(this.form, this.flags)
-    }), this.flagCache.out) : this.form;
+    const t = this.assignedForm;
+    if (t)
+      return (this.flagCache.form !== t || this.flagCache.flags !== this.flags) && (this.flagCache = { form: t, flags: this.flags, out: j(t, this.flags) }), this.flagCache.out;
   }
   willUpdate(t) {
     t.has("value") && (this.edits = {}), (t.has("form") || t.has("flags")) && (this.dynamicOptions.clear(), this.optionsSnapshots.clear(), this.optionsEpoch.clear()), t.has("form") && (this.scriptStates = {}, this.fieldMessages = {}, this.formMessages = [], this.scriptContext = null), (t.has("form") || t.has("flags") || t.has("value") || t.has("registry")) && this.syncDynamicOptions();
@@ -50,16 +55,16 @@ let n = class extends T {
    * dropped by epoch).
    */
   syncDynamicOptions() {
-    var e, s;
+    var s, e;
     const t = this.getData();
-    for (const i of ((e = this.effectiveForm) == null ? void 0 : e.fields) ?? []) {
+    for (const i of ((s = this.effectiveForm) == null ? void 0 : s.fields) ?? []) {
       if (!i.options_from) continue;
       const r = JSON.stringify((i.options_deps ?? []).map((c) => t[c] ?? null));
       if (this.optionsSnapshots.get(i.key) === r) continue;
       this.optionsSnapshots.set(i.key, r);
       const o = (this.optionsEpoch.get(i.key) ?? 0) + 1;
       this.optionsEpoch.set(i.key, o);
-      const a = (s = this.registry.options) == null ? void 0 : s[i.options_from];
+      const a = (e = this.registry.options) == null ? void 0 : e[i.options_from];
       if (!a) {
         console.warn(`[bahtui] unknown options fetcher "${i.options_from}" — skipped`), this.dynamicOptions.set(i.key, []);
         continue;
@@ -79,27 +84,31 @@ let n = class extends T {
    */
   clearDependents(t) {
     var i, r;
-    const e = [t], s = /* @__PURE__ */ new Set();
-    for (; e.length > 0; ) {
-      const o = e.shift();
+    const s = [t], e = /* @__PURE__ */ new Set();
+    for (; s.length > 0; ) {
+      const o = s.shift();
       for (const a of ((i = this.effectiveForm) == null ? void 0 : i.fields) ?? [])
-        !((r = a.options_deps) != null && r.includes(o)) || s.has(a.key) || (s.add(a.key), this.edits = { ...this.edits, [a.key]: C(a) }, e.push(a.key));
+        !((r = a.options_deps) != null && r.includes(o)) || e.has(a.key) || (e.add(a.key), this.edits = { ...this.edits, [a.key]: C(a) }, s.push(a.key));
     }
   }
   get sortedFields() {
-    if (!this.form) return [];
-    const t = q(this.effectiveForm, this.view);
-    return t || (this.view !== void 0 && !this.warnedViews.has(this.view) && (this.warnedViews.add(this.view), console.warn(`[bahtui] unknown view "${this.view}" — showing the full form`)), q(this.effectiveForm) ?? []);
+    const t = this.effectiveForm;
+    if (!t) return [];
+    const s = M(t, this.view);
+    return s || (this.view !== void 0 && !this.warnedViews.has(this.view) && (this.warnedViews.add(this.view), console.warn(`[bahtui] unknown view "${this.view}" — showing the full form`)), M(t) ?? []);
+  }
+  revealClass(t, s) {
+    return this.nextVisible[t] = s, s && this.lastVisible[t] === !1 ? " baht-field--revealed" : "";
   }
   stateFor(t) {
-    const e = this.fieldStates[t.key] ?? {
+    const s = this.fieldStates[t.key] ?? {
       visible: !0,
       enabled: !t.disabled,
       readonly: !!t.readonly,
       required: !!t.required,
       computed: !1
-    }, s = this.scriptStates[t.key];
-    return s ? { ...e, ...s } : e;
+    }, e = this.scriptStates[t.key];
+    return e ? { ...s, ...e } : s;
   }
   valueFor(t) {
     return Object.hasOwn(this.edits, t.key) ? this.edits[t.key] : Object.hasOwn(this.value, t.key) ? this.value[t.key] : C(t);
@@ -108,16 +117,16 @@ let n = class extends T {
   /** Debounced keystrokes still in a control land in `edits` before anyone reads them. */
   flushTyped() {
     var t;
-    if (D())
-      for (const e of this.querySelectorAll(":scope > .baht-form > .baht-field > *"))
-        (t = e.flushTyped) == null || t.call(e);
+    if (O())
+      for (const s of this.querySelectorAll(":scope > .baht-form > .baht-field > *"))
+        (t = s.flushTyped) == null || t.call(s);
   }
   getData() {
-    var e;
+    var s;
     this.flushTyped();
     const t = {};
-    for (const s of ((e = this.effectiveForm) == null ? void 0 : e.fields) ?? [])
-      s.type === "label" || s.type === "section" || (t[s.key] = this.valueFor(s));
+    for (const e of ((s = this.effectiveForm) == null ? void 0 : s.fields) ?? [])
+      e.type === "label" || e.type === "section" || (t[e.key] = this.valueFor(e));
     return t;
   }
   /**
@@ -126,20 +135,20 @@ let n = class extends T {
    * already knows, and a store adapter would otherwise loop.
    */
   setValue(t) {
-    const e = this.getData();
+    const s = this.getData();
     this.edits = { ...this.edits, ...t }, this.requestUpdate();
-    for (const s of Object.keys(t))
-      this.runChangeScripts(s, e[s], t[s], !1);
+    for (const e of Object.keys(t))
+      this.runChangeScripts(e, s[e], t[e], !1);
   }
   /** Declarative + registry validators over the visible fields (no scripts). */
   runValidators() {
-    const t = [], e = this.getData();
-    for (const s of this.sortedFields) {
-      if (s.type === "label" || s.type === "section") continue;
-      const i = this.stateFor(s);
+    const t = [], s = this.getData();
+    for (const e of this.sortedFields) {
+      if (e.type === "label" || e.type === "section") continue;
+      const i = this.stateFor(e);
       if (!i.visible) continue;
-      const r = i.required === !!s.required ? s : { ...s, required: i.required };
-      t.push(...M(r, this.valueFor(s), this.registry, e));
+      const r = i.required === !!e.required ? e : { ...e, required: i.required };
+      t.push(..._(r, this.valueFor(e), this.registry, s));
     }
     return t;
   }
@@ -149,23 +158,23 @@ let n = class extends T {
    * `{ key: '$' }` errors so hosts see why.
    */
   validate() {
-    const t = this.runValidators(), e = this.effectiveForm;
-    if (e && k(e, "submit")) {
+    const t = this.runValidators(), s = this.effectiveForm;
+    if (s && w(s, "submit")) {
       this.formMessages = [];
       const i = F({
-        form: e,
+        form: s,
         registry: this.registry,
-        g: this.g(e),
+        g: this.g(s),
         on: "submit",
         detail: { isLoading: !1, data: this.getData() }
       }), r = this.formMessages.filter((o) => o.type === "error").map((o) => ({ key: "$", message: o.message }));
-      !i && r.length === 0 && r.push({ key: "$", message: _("scriptBlocked") }), t.push(...r);
+      !i && r.length === 0 && r.push({ key: "$", message: D("scriptBlocked") }), t.push(...r);
     }
     this.errors = t;
-    const s = { valid: t.length === 0, errors: t };
+    const e = { valid: t.length === 0, errors: t };
     return this.dispatchEvent(
-      new CustomEvent("baht-validity", { detail: s, bubbles: !0, composed: !0 })
-    ), s;
+      new CustomEvent("baht-validity", { detail: e, bubbles: !0, composed: !0 })
+    ), e;
   }
   reset() {
     this.edits = {}, this.value = {}, this.errors = [], this.scriptStates = {}, this.fieldMessages = {}, this.formMessages = [], this.requestUpdate();
@@ -173,29 +182,31 @@ let n = class extends T {
   // ---- 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 = A(t, {
+    return this.scriptContext && this.scriptContextForm === t ? this.scriptContext : (this.scriptContextForm = t, this.scriptContext = L(t, {
       getData: () => this.getData(),
-      setValue: (e, s) => this.applyScriptValue(e, s),
-      setState: (e, s) => {
+      setValue: (s, e) => {
+        this.applyScriptValue(s, e);
+      },
+      setState: (s, e) => {
         this.scriptStates = {
           ...this.scriptStates,
-          [e]: { ...this.scriptStates[e], ...s }
+          [s]: { ...this.scriptStates[s], ...e }
         };
       },
-      resetState: (e) => {
-        if (e === void 0) {
+      resetState: (s) => {
+        if (s === void 0) {
           this.scriptStates = {};
           return;
         }
-        const s = { ...this.scriptStates };
-        delete s[e], this.scriptStates = s;
+        const { [s]: e, ...i } = this.scriptStates;
+        this.scriptStates = i;
       },
-      setFieldMessage: (e, s) => {
-        const i = { ...this.fieldMessages };
-        s ? i[e] = s : delete i[e], this.fieldMessages = i;
+      setFieldMessage: (s, e) => {
+        const { [s]: i, ...r } = this.fieldMessages;
+        this.fieldMessages = e ? { ...r, [s]: e } : r;
       },
-      addFormMessage: (e) => {
-        this.formMessages = [...this.formMessages, e];
+      addFormMessage: (s) => {
+        this.formMessages = [...this.formMessages, s];
       },
       clearFormMessages: () => {
         this.formMessages = [];
@@ -203,22 +214,22 @@ let n = class extends T {
     }), this.scriptContext);
   }
   /** A script wrote a value: same path as a user edit (emit + cascade), minus the formatter. */
-  applyScriptValue(t, e) {
-    const s = this.getData()[t];
-    this.edits = { ...this.edits, [t]: e }, this.clearDependents(t), this.syncDynamicOptions(), this.dispatchEvent(
+  applyScriptValue(t, s) {
+    const e = this.getData()[t];
+    this.edits = { ...this.edits, [t]: s }, this.clearDependents(t), this.syncDynamicOptions(), this.dispatchEvent(
       new CustomEvent("baht-change", {
-        detail: { form_name: this.form.form_name, key: t, value: e, data: this.getData() },
+        detail: { form_name: this.form.form_name, key: t, value: s, data: this.getData() },
         bubbles: !0,
         composed: !0
       })
-    ), this.runChangeScripts(t, s, e, !1);
+    ), this.runChangeScripts(t, e, s, !1);
   }
-  runChangeScripts(t, e, s, i) {
+  runChangeScripts(t, s, e, i) {
     const r = this.effectiveForm;
-    if (!(!r || !k(r, "change", t))) {
-      if (this.scriptDepth >= E) {
+    if (!(!r || !w(r, "change", t))) {
+      if (this.scriptDepth >= V) {
         console.warn(
-          `[bahtui] script cascade on "${r.form_name}.${t}" exceeded ${E} levels — stopped (setValue ping-pong between change scripts?)`
+          `[bahtui] script cascade on "${r.form_name}.${t}" exceeded ${V} levels — stopped (setValue ping-pong between change scripts?)`
         );
         return;
       }
@@ -230,7 +241,7 @@ let n = class extends T {
           g: this.g(r),
           on: "change",
           key: t,
-          detail: { oldValue: e, newValue: s, isLoading: i, data: this.getData() }
+          detail: { oldValue: s, newValue: e, isLoading: i, data: this.getData() }
         });
       } finally {
         this.scriptDepth--;
@@ -243,13 +254,13 @@ let n = class extends T {
    * workflow reuses this element across steps, so each step loads.
    */
   runLoadScripts() {
-    var s;
+    var e;
     const t = this.effectiveForm;
-    if (!((s = t == null ? void 0 : t.scripts) != null && s.length)) return;
-    const e = this.getData();
+    if (!((e = t == null ? void 0 : t.scripts) != null && e.length)) return;
+    const s = this.getData();
     for (const i of t.fields)
-      i.type === "label" || i.type === "section" || this.runChangeScripts(i.key, void 0, e[i.key], !0);
-    k(t, "load") && F({
+      i.type === "label" || i.type === "section" || this.runChangeScripts(i.key, void 0, s[i.key], !0);
+    w(t, "load") && F({
       form: t,
       registry: this.registry,
       g: this.g(t),
@@ -258,117 +269,132 @@ let n = class extends T {
     });
   }
   updated(t) {
-    super.updated(t), D() && this.form && this.loadedForm !== this.form && (this.loadedForm = this.form, this.runLoadScripts());
+    if (super.updated(t), this.lastVisible = this.nextVisible, this.nextVisible = {}, !O()) return;
+    const s = this.assignedForm;
+    s && this.loadedForm !== s && (this.loadedForm = s, this.runLoadScripts());
   }
   // ---- internal ----
-  onFieldInput(t, e) {
+  onFieldInput(t, s) {
     var o;
-    e.stopPropagation();
-    let { value: s } = e.detail;
+    s.stopPropagation();
+    let { value: e } = s.detail;
     const i = t.formatter ? (o = this.registry.formatters) == null ? void 0 : o[t.formatter] : void 0;
-    t.formatter && !i && console.warn(`[bahtui] unknown formatter "${t.formatter}" — skipped`), i && (s = i(s));
+    t.formatter && !i && console.warn(`[bahtui] unknown formatter "${t.formatter}" — skipped`), i && (e = i(e));
     const r = this.valueFor(t);
-    this.edits = { ...this.edits, [t.key]: s }, this.clearDependents(t.key), this.syncDynamicOptions(), (this.options.validateOn ?? "change") === "change" && this.errors.length > 0 && (this.errors = this.runValidators()), this.dispatchEvent(
+    this.edits = { ...this.edits, [t.key]: e }, this.clearDependents(t.key), this.syncDynamicOptions(), (this.options.validateOn ?? "change") === "change" && this.errors.length > 0 && (this.errors = this.runValidators()), this.dispatchEvent(
       new CustomEvent("baht-change", {
-        detail: { form_name: this.form.form_name, key: t.key, value: s, data: this.getData() },
+        detail: { form_name: this.form.form_name, key: t.key, value: e, data: this.getData() },
         bubbles: !0,
         composed: !0
       })
-    ), this.runChangeScripts(t.key, r, s, !1);
+    ), this.runChangeScripts(t.key, r, e, !1);
   }
   /** Validate a single field against current form data (siblings included). */
   validateOneField(t) {
-    const e = this.stateFor(t);
-    if (!e.visible) return [];
-    const s = this.getData(), i = e.required === !!t.required ? t : { ...t, required: e.required };
-    return M(i, this.valueFor(t), this.registry, s);
+    const s = this.stateFor(t);
+    if (!s.visible) return [];
+    const e = this.getData(), i = s.required === !!t.required ? t : { ...t, required: s.required };
+    return _(i, this.valueFor(t), this.registry, e);
   }
   /** `validateOn: 'blur'` — validate just the field the user left, same as
    * how errors are shown elsewhere (merged into `this.errors`, painted by
    * `renderField`/`.baht-error`). No-op for 'change'/'submit' modes. */
   onFieldBlur(t) {
     if ((this.options.validateOn ?? "change") !== "blur") return;
-    const e = this.validateOneField(t), s = this.errors.filter((i) => i.key !== t.key);
-    this.errors = [...s, ...e];
+    const s = this.validateOneField(t), e = this.errors.filter((i) => i.key !== t.key);
+    this.errors = [...e, ...s];
   }
   renderField(t) {
-    var S, O;
-    const e = B[t.type];
-    if (!e)
-      return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), b;
-    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;
+    var S;
+    const s = T[t.type];
+    if (!s)
+      return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), g;
+    const e = this.stateFor(t), i = B[t.width ?? "full"] ?? "baht-field--w-full", r = ((S = this.errors.find((u) => u.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 = j(e);
+      return this.renderReadonlyField(t, i, e.visible);
+    const o = t.options_from ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, a = this.valueFor(t), l = !e.enabled, c = this.readonly || e.readonly, b = this.options.inputDebounce, v = (u) => {
+      this.onControlInput(t.key, u);
+    }, f = I(s);
     let y;
     if (t.type === "repeater") {
-      const d = this.errors.filter((x) => x.key.startsWith(`${t.key}[`));
-      y = w`<${f}
+      const u = this.errors.filter((q) => q.key.startsWith(`${t.key}[`));
+      y = $`<${f}
         .field=${o}
         .value=${a}
         .disabled=${l}
         .readonly=${c}
-        .required=${s.required}
+        .required=${e.required}
         .showOptional=${this.showOptional}
         .error=${r}
-        .debounce=${v}
-        .rowErrors=${d}
-        @baht-input=${$}
+        .debounce=${b}
+        .rowErrors=${u}
+        @baht-input=${v}
       ></${f}>`;
     } else if (t.type === "file") {
-      let d;
-      t.uploader && (d = (O = this.registry.uploaders) == null ? void 0 : O[t.uploader], d || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`)), y = w`<${f}
+      const u = this.uploaderFor(t);
+      y = $`<${f}
         .field=${o}
         .value=${a}
         .disabled=${l}
         .readonly=${c}
-        .required=${s.required}
+        .required=${e.required}
         .showOptional=${this.showOptional}
         .error=${r}
-        .debounce=${v}
-        .uploader=${d}
-        @baht-input=${$}
+        .debounce=${b}
+        .uploader=${u}
+        @baht-input=${v}
       ></${f}>`;
     } else
-      y = w`<${f}
+      y = $`<${f}
         .field=${o}
         .value=${a}
         .disabled=${l}
         .readonly=${c}
-        .required=${s.required}
+        .required=${e.required}
         .showOptional=${this.showOptional}
         .error=${r}
-        .debounce=${v}
-        @baht-input=${$}
+        .debounce=${b}
+        @baht-input=${v}
       ></${f}>`;
-    const g = this.fieldMessages[t.key];
+    const k = this.fieldMessages[t.key];
     return p`<div
-      class="baht-field ${i} ${s.visible ? "" : "baht-field--hidden"}"
+      class="baht-field ${i} ${e.visible ? "" : "baht-field--hidden"}${this.revealClass(t.key, e.visible)}"
       data-key=${t.key}
       data-type=${t.type}
       data-testid="${this.form.form_id}.${t.key}"
-      @focusout=${() => this.onFieldBlur(t)}
+      @focusout=${() => {
+      this.onFieldBlur(t);
+    }}
     >
       ${y}
-      ${g ? p`<div
-              class="baht-field-msg baht-field-msg--${g.type}"
-              role=${g.type === "error" ? "alert" : "status"}
-            >
-              ${g.message}
-            </div>` : b}
+      ${k ? this.renderFieldMsg(k) : g}
+    </div>`;
+  }
+  uploaderFor(t) {
+    var e;
+    if (!t.uploader) return;
+    const s = (e = this.registry.uploaders) == null ? void 0 : e[t.uploader];
+    return s || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`), s;
+  }
+  renderFieldMsg(t) {
+    return p`<div
+      class="baht-field-msg baht-field-msg--${t.type}"
+      role=${t.type === "error" ? "alert" : "status"}
+    >
+      ${t.message}
     </div>`;
   }
   /**
    * Resolve the descriptor at event time — it may have changed since the control
    * was first rendered (the same node is reused across renders, see render()).
    */
-  onControlInput(t, e) {
+  onControlInput(t, s) {
     var i;
-    const s = (i = this.effectiveForm) == null ? void 0 : i.fields.find((r) => r.key === t);
-    s && this.onFieldInput(s, e);
+    const e = (i = this.effectiveForm) == null ? void 0 : i.fields.find((r) => r.key === t);
+    e && this.onFieldInput(e, s);
   }
-  renderReadonlyField(t, e, s) {
-    const i = t.options_from ? this.dynamicOptions.get(t.key) ?? t.options ?? [] : t.options, r = R(t, this.valueFor(t), i), o = r.kind === "empty" ? p`<span class="baht-readonly-value baht-readonly-value--empty">${_("emptyValue")}</span>` : r.kind === "text" ? p`<span class="baht-readonly-value">${r.text}</span>` : r.kind === "chips" ? p`<span class="baht-readonly-value baht-readonly-chips"
+  renderReadonlyField(t, s, e) {
+    const i = t.options_from ? this.dynamicOptions.get(t.key) ?? t.options ?? [] : t.options, r = A(t, this.valueFor(t), i), o = r.kind === "empty" ? p`<span class="baht-readonly-value baht-readonly-value--empty">${D("emptyValue")}</span>` : r.kind === "text" ? p`<span class="baht-readonly-value">${r.text}</span>` : r.kind === "chips" ? p`<span class="baht-readonly-value baht-readonly-chips"
                 >${r.items.map((a) => p`<span class="baht-readonly-chip">${a}</span>`)}</span
               >` : p`<div class="baht-readonly-rows">
                 ${r.rows.map(
@@ -383,12 +409,12 @@ let n = class extends T {
     )}
               </div>`;
     return p`<div
-      class="baht-field ${e} baht-field--readonly ${s ? "" : "baht-field--hidden"}"
+      class="baht-field ${s} baht-field--readonly ${e ? "" : "baht-field--hidden"}${this.revealClass(t.key, e)}"
       data-key=${t.key}
       data-type=${t.type}
       data-testid="${this.form.form_id}.${t.key}"
     >
-      ${t.label ? p`<span class="baht-label">${t.label}</span>` : b}
+      ${t.label ? p`<span class="baht-label">${t.label}</span>` : g}
       ${o}
     </div>`;
   }
@@ -403,8 +429,8 @@ let n = class extends T {
                   ${t.message}
                 </div>`
     )}
-            </div>` : b}
-      ${P(
+            </div>` : g}
+      ${E(
       this.sortedFields,
       (t) => t.key,
       (t) => this.renderField(t)
@@ -413,31 +439,31 @@ let n = class extends T {
   }
 };
 h([
-  u({ attribute: !1 })
+  d({ attribute: !1 })
 ], n.prototype, "form", 2);
 h([
-  u({ attribute: !1 })
+  d({ attribute: !1 })
 ], n.prototype, "value", 2);
 h([
-  u({ attribute: !1 })
+  d({ attribute: !1 })
 ], n.prototype, "registry", 2);
 h([
-  u({ type: Boolean, attribute: "show-optional" })
+  d({ type: Boolean, attribute: "show-optional" })
 ], n.prototype, "showOptional", 2);
 h([
-  u({ attribute: !1 })
+  d({ attribute: !1 })
 ], n.prototype, "options", 2);
 h([
-  u({ attribute: !1 })
+  d({ attribute: !1 })
 ], n.prototype, "fieldStates", 2);
 h([
-  u({ type: String })
+  d({ type: String })
 ], n.prototype, "view", 2);
 h([
-  u({ attribute: !1 })
+  d({ attribute: !1 })
 ], n.prototype, "flags", 2);
 h([
-  u({ type: Boolean })
+  d({ type: Boolean })
 ], n.prototype, "readonly", 2);
 h([
   m()
@@ -455,7 +481,7 @@ h([
   m()
 ], n.prototype, "formMessages", 2);
 n = h([
-  V("baht-form")
+  x("baht-form")
 ], n);
 export {
   n as BahtForm

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

@@ -21,6 +21,12 @@ export declare class BahtWorkflow extends BahtElement {
     submitLabel?: string;
     backLabel?: string;
     showBack: boolean;
+    /**
+     * Which way the last navigation went. Stamped on the step wrapper as
+     * `baht-workflow-step--forward|--back` so the stylesheet can slide the new
+     * step in from the matching side; null on first render (nothing to replay).
+     */
+    private direction;
     /** Feature-flag values (spec 01 §12): flag-off steps/fields/rules vanish. */
     flags: FeatureFlags;
     /** Render a <baht-steps> progress indicator above the current form. */
@@ -35,6 +41,11 @@ export declare class BahtWorkflow extends BahtElement {
     get currentFormName(): string | null;
     /** applyFlags result, memoized on (workflow, flags) identity. */
     private flagCache;
+    /**
+     * `workflow` as the host may actually have left it: a framework can connect the
+     * element before it binds the property, so internally it is optional until then.
+     */
+    private get assignedWorkflow();
     private get effectiveWorkflow();
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     private reevaluate;