bank20baht-ui 0.11.0 → 0.12.1

package/README.md

@@ -261,7 +261,7 @@ near-black ink (`#171717`) on white, hairline neutral borders, 44px controls, on
 (`#444FBF`), status as tint pills, hand-drawn koboyo spot illustrations for empty /
 error / upload states, IBM Plex Sans Thai / IBM Plex Mono (load the
 fonts yourself), borders-over-shadows, "paper" easing — plus an opt-in dark theme
-(`<html data-baht-theme="dark">`). 58 elements:
+(`<html data-baht-theme="dark">`). 59 elements:
 
 ```html
 <baht-button variant="secondary" size="sm">Cancel</baht-button>
@@ -269,7 +269,7 @@ fonts yourself), borders-over-shadows, "paper" easing — plus an opt-in dark th
 <baht-table></baht-table>  <baht-modal></baht-modal>  <baht-toast></baht-toast>  …
 ```
 
-- **Data (server-side paging)** — `baht-table` · `baht-list` · `baht-pagination` · `baht-filter`.
+- **Data (server-side paging)** — `baht-table` · `baht-list` · `baht-swipe-row` · `baht-pagination` · `baht-filter`.
   `baht-table` ships a ServiceNow-style column picker with dot-walking into reference columns (`requester.department`) and emits `baht-columns-change` so the host can persist the layout.
   `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` ·
@@ -347,7 +347,7 @@ no hand-written type declarations in your app:
 | **Angular** | template binding on properties/events | `CUSTOM_ELEMENTS_SCHEMA`, see below |
 | **Vue 3** | keep Vue from treating `baht-*` as components | `isCustomElement`, see below |
 | **Phoenix / Rails / plain HTML** | it's just HTML — works as-is | none |
-| **Tooling** (Storybook, docgen, custom) | machine-readable API of all 58 elements | read `dist/custom-elements.json` ([CEM standard](https://github.com/webcomponents/custom-elements-manifest)) |
+| **Tooling** (Storybook, docgen, custom) | machine-readable API of all 59 elements | read `dist/custom-elements.json` ([CEM standard](https://github.com/webcomponents/custom-elements-manifest)) |
 
 **VS Code** — `.vscode/settings.json`:
 

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

@@ -88,6 +88,8 @@ export declare class BahtForm extends BahtElement {
     private nextVisible;
     private revealClass;
     private stateFor;
+    /** The row sub-field states of one repeater: `fieldStates` keys starting `key[`. */
+    private rowStatesFor;
     private valueFor;
     /** Debounced keystrokes still in a control land in `edits` before anyone reads them. */
     private flushTyped;

package/dist/components/baht-form.js

@@ -1,16 +1,16 @@
 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 { property as d, state as m, customElement as E } from "lit/decorators.js";
+import { repeat as P } 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 { BahtElement as T, hasDom as O } 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 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 { applyFlags as L } from "../core/flags.js";
+import { hasScripts as w, runScripts as F, createScriptContext as A, MAX_SCRIPT_DEPTH as x } from "../core/engine/scripts.js";
+import { displayValue as R } from "../core/display.js";
 import "./primitives/baht-input.js";
 import "./primitives/baht-textarea.js";
 import "./primitives/baht-number.js";
@@ -26,12 +26,12 @@ import "./primitives/baht-file.js";
 import "./primitives/baht-text.js";
 import "./primitives/baht-section.js";
 import "./primitives/baht-repeater.js";
-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--)
+var U = Object.defineProperty, W = Object.getOwnPropertyDescriptor, h = (t, s, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? W(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;
+  return i && r && U(s, e, r), r;
 };
-let n = class extends P {
+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 = {}, this.lastVisible = {}, this.nextVisible = {};
   }
@@ -45,7 +45,7 @@ let n = class extends P {
   get effectiveForm() {
     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;
+      return (this.flagCache.form !== t || this.flagCache.flags !== this.flags) && (this.flagCache = { form: t, flags: this.flags, out: L(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();
@@ -111,6 +111,13 @@ let n = class extends P {
     }, e = this.scriptStates[t.key];
     return e ? { ...s, ...e } : s;
   }
+  /** The row sub-field states of one repeater: `fieldStates` keys starting `key[`. */
+  rowStatesFor(t) {
+    const s = `${t}[`, e = {};
+    for (const [i, r] of Object.entries(this.fieldStates))
+      i.startsWith(s) && (e[i] = r);
+    return e;
+  }
   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);
   }
@@ -149,7 +156,9 @@ let n = class extends P {
       const i = this.stateFor(e);
       if (!i.visible) continue;
       const r = i.required === !!e.required ? e : { ...e, required: i.required };
-      t.push(..._(r, this.valueFor(e), this.registry, s));
+      t.push(
+        ..._(r, this.valueFor(e), this.registry, s, this.fieldStates)
+      );
     }
     return t;
   }
@@ -183,7 +192,7 @@ let n = class extends P {
   // ---- 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: (s, e) => {
         this.applyScriptValue(s, e);
@@ -228,9 +237,9 @@ let n = class extends P {
   runChangeScripts(t, s, e, i) {
     const r = this.effectiveForm;
     if (!(!r || !w(r, "change", t))) {
-      if (this.scriptDepth >= V) {
+      if (this.scriptDepth >= x) {
         console.warn(
-          `[bahtui] script cascade on "${r.form_name}.${t}" exceeded ${V} levels — stopped (setValue ping-pong between change scripts?)`
+          `[bahtui] script cascade on "${r.form_name}.${t}" exceeded ${x} levels — stopped (setValue ping-pong between change scripts?)`
         );
         return;
       }
@@ -295,7 +304,7 @@ let n = class extends P {
     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);
+    return _(i, this.valueFor(t), this.registry, e, this.fieldStates);
   }
   /** `validateOn: 'blur'` — validate just the field the user left, same as
    * how errors are shown elsewhere (merged into `this.errors`, painted by
@@ -307,18 +316,18 @@ let n = class extends P {
   }
   renderField(t) {
     var S;
-    const s = T[t.type];
+    const s = B[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;
+    const e = this.stateFor(t), i = I[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, 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);
+    }, f = j(s);
     let y;
     if (t.type === "repeater") {
-      const u = this.errors.filter((q) => q.key.startsWith(`${t.key}[`));
+      const u = this.errors.filter((q) => q.key.startsWith(`${t.key}[`)), V = this.rowStatesFor(t.key);
       y = $`<${f}
         .field=${o}
         .value=${a}
@@ -329,6 +338,7 @@ let n = class extends P {
         .error=${r}
         .debounce=${b}
         .rowErrors=${u}
+        .rowStates=${V}
         @baht-input=${v}
       ></${f}>`;
     } else if (t.type === "file") {
@@ -395,7 +405,7 @@ let n = class extends P {
     e && this.onFieldInput(e, s);
   }
   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"
+    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">${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(
@@ -431,7 +441,7 @@ let n = class extends P {
                 </div>`
     )}
             </div>` : g}
-      ${E(
+      ${P(
       this.sortedFields,
       (t) => t.key,
       (t) => this.renderField(t)
@@ -482,7 +492,7 @@ h([
   m()
 ], n.prototype, "formMessages", 2);
 n = h([
-  x("baht-form")
+  E("baht-form")
 ], n);
 export {
   n as BahtForm

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

@@ -15,7 +15,10 @@ import { BahtFieldBase } from '../field-base.js';
  * 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
+ * min/max/disabled rules exclude it) and **Clear** (empties the value). With
+ * `field.enable_time` the first button reads **Now** (i18n key `now`) and picks
+ * today at the current time, to the minute (seconds dropped), under the same
+ * min/max/disabled rules; like Today it closes the calendar. Both
  * `await el.updateComplete` resolves only once the calendar is attached (the
  * lazy flatpickr load is folded into it), so hosts and tests need no extra wait.
  * Today / Clear go through flatpickr, so they emit exactly like a click on a day. `disableMobile`

package/dist/components/primitives/baht-datepicker.js

@@ -1,18 +1,18 @@
-import { html as g } from "lit";
-import { customElement as D } from "lit/decorators.js";
-import { ifDefined as k } from "lit/directives/if-defined.js";
+import { html as y } from "lit";
+import { customElement as g } from "lit/decorators.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
 import { BahtFieldBase as w } from "../field-base.js";
-import { formatIsoDateTime as u, formatIsoDate as c, dateModeOf as h, parseIsoDate as l, isoDaysOf as C, parseIsoDateTime as v, parseDisabledEntry as _ } from "../../core/dates.js";
+import { formatIsoDateTime as u, formatIsoDate as c, dateModeOf as h, parseIsoDate as l, isoDaysOf as k, parseIsoDateTime as C, parseDisabledEntry as v } from "../../core/dates.js";
 import { t as p } from "../../core/i18n.js";
-import { renderIcon as I } from "./icons.js";
-var B = Object.getOwnPropertyDescriptor, O = (t, e, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? B(e, a) : e, n = t.length - 1, r; n >= 0; n--)
+import { renderIcon as _ } from "./icons.js";
+var I = Object.getOwnPropertyDescriptor, B = (t, e, a, s) => {
+  for (var i = s > 1 ? void 0 : s ? I(e, a) : e, n = t.length - 1, r; n >= 0; n--)
     (r = t[n]) && (i = r(i) || i);
   return i;
 };
-let f, x;
-function E() {
-  return x ?? (x = import("flatpickr").then((t) => f = t.default));
+let f, O;
+function x() {
+  return O ?? (O = import("flatpickr").then((t) => f = t.default));
 }
 let m = class extends w {
   constructor() {
@@ -25,20 +25,20 @@ let m = class extends w {
     return t;
   }
   renderControl() {
-    return g`<span class="baht-datepicker-field">
+    return y`<span class="baht-datepicker-field">
       <input
         class="baht-control baht-control--date"
         id=${this.controlId}
         type="text"
         autocomplete="off"
-        placeholder=${k(this.field.placeholder)}
+        placeholder=${D(this.field.placeholder)}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         ?required=${this.required}
         aria-invalid=${this.invalid}
         aria-describedby=${this.describedBy}
       />
-      <span class="baht-datepicker-field-icon" aria-hidden="true">${I("calendar")}</span>
+      <span class="baht-datepicker-field-icon" aria-hidden="true">${_("calendar")}</span>
     </span>`;
   }
   connectedCallback() {
@@ -56,7 +56,7 @@ let m = class extends w {
     }
     if (((s = this.fp) == null ? void 0 : s.input) !== e || t.has("field") || t.has("disabled") || t.has("readonly")) {
       if (this.teardown(), !f) {
-        this.pendingLoad ?? (this.pendingLoad = E().catch((i) => {
+        this.pendingLoad ?? (this.pendingLoad = x().catch((i) => {
           console.warn("[bahtui] <baht-datepicker> needs the `flatpickr` peer dependency", i);
         }).then(() => {
           this.pendingLoad = void 0, this.isConnected && this.requestUpdate();
@@ -119,7 +119,7 @@ let m = class extends w {
     const e = document.createElement("div");
     e.className = "baht-datepicker-footer";
     const a = document.createElement("button");
-    a.type = "button", a.className = "baht-button baht-button--sm baht-datepicker-today", a.textContent = p("today"), a.addEventListener("click", () => {
+    a.type = "button", a.className = "baht-button baht-button--sm baht-datepicker-today", a.textContent = p(this.field.enable_time ? "now" : "today"), a.addEventListener("click", () => {
       this.pickToday();
     });
     const s = document.createElement("button");
@@ -136,18 +136,18 @@ let m = class extends w {
   }
   todayAllowed() {
     const t = o(/* @__PURE__ */ new Date()), e = l(this.field.min), a = l(this.field.max);
-    return e && t < o(e) || a && t > o(a) ? !1 : !(b(this.field) ?? []).some((s) => F(s, t));
+    return e && t < o(e) || a && t > o(a) ? !1 : !(b(this.field) ?? []).some((s) => L(s, t));
   }
   pickToday() {
     const t = this.fp;
     if (!t || !this.todayAllowed()) return;
-    const e = o(/* @__PURE__ */ new Date());
+    const e = this.field.enable_time ? E(/* @__PURE__ */ new Date()) : o(/* @__PURE__ */ new Date());
     switch (h(this.field)) {
       case "range":
         t.setDate([e, e], !0);
         break;
       case "multiple": {
-        t.selectedDates.some((s) => y(s, e)) || t.setDate([...t.selectedDates, e], !0);
+        t.selectedDates.some((s) => this.sameInstants([s], [e])) || t.setDate([...t.selectedDates, e], !0);
         break;
       }
       case "single":
@@ -164,8 +164,8 @@ let m = class extends w {
    *  a host may not always have a time to feed back (an edited record that
    *  predates this field, for one). */
   datesOf(t) {
-    const e = (a) => (this.field.enable_time ? v(a) : null) ?? l(a);
-    return C(t).map(e).filter((a) => a !== null);
+    const e = (a) => (this.field.enable_time ? C(a) : null) ?? l(a);
+    return k(t).map(e).filter((a) => a !== null);
   }
   /** flatpickr's selection -> the value shape of the field's mode. */
   toValue(t) {
@@ -180,17 +180,20 @@ let m = class extends w {
     }
   }
 };
-m = O([
-  D("baht-datepicker")
+m = B([
+  g("baht-datepicker")
 ], m);
 function o(t) {
   return new Date(t.getFullYear(), t.getMonth(), t.getDate());
 }
-function y(t, e) {
-  return c(t) === c(e);
+function E(t) {
+  return new Date(t.getFullYear(), t.getMonth(), t.getDate(), t.getHours(), t.getMinutes());
 }
 function F(t, e) {
-  if (t instanceof Date) return y(t, e);
+  return c(t) === c(e);
+}
+function L(t, e) {
+  if (t instanceof Date) return F(t, e);
   if (typeof t == "function") return t(e);
   if (typeof t == "object" && "from" in t) {
     const a = o(new Date(t.from)), s = o(new Date(t.to));
@@ -201,7 +204,7 @@ function F(t, e) {
 function b(t) {
   const e = [];
   for (const s of t.disabled_dates ?? []) {
-    const i = _(s);
+    const i = v(s);
     i && e.push(i[0].getTime() === i[1].getTime() ? i[0] : { from: i[0], to: i[1] });
   }
   const a = t.disabled_weekdays;

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

@@ -1,6 +1,7 @@
 import { TemplateResult } from 'lit';
 import { BahtElement } from '../base.js';
 import { FieldOption } from '../../core/types.js';
+export type FilterVariant = 'chips' | 'segmented';
 /**
  * Filter chip group. Controlled: emits `baht-change { selected }` (array of
  * option keys), host re-feeds `selected`. Typical use: above an <baht-table>,
@@ -10,11 +11,21 @@ import { FieldOption } from '../../core/types.js';
  *   f.options = [{ key: 'running', label: 'Running' }, { key: 'failed', label: 'Failed' }];
  *   f.selected = ['running'];
  *   f.addEventListener('baht-change', (e) => refetch({ status: e.detail.selected }));
+ *
+ * `variant="segmented"` draws the same options as one joined segmented
+ * control (a single bordered group, active segment filled with the ink
+ * colour) — for a period switch like Week / Month / Year. Pair it with
+ * `multiple="false"`: a segmented control always holds one value, so clicking
+ * the active segment does nothing (no `baht-change`) instead of clearing it.
  */
 export declare class BahtFilter extends BahtElement {
     options: FieldOption[];
     selected: string[];
-    /** false = radio behavior (max one active; clicking it again clears). */
+    /** Look: `'chips'` (default) = separate pill chips; `'segmented'` = one joined
+     * segmented control. With `multiple=false` a segmented control never clears. */
+    variant: FilterVariant;
+    /** false = radio behavior (max one active; clicking it again clears — except
+     * with `variant="segmented"`, where the active segment stays selected). */
     multiple: boolean;
     disabled: boolean;
     /** Accessible name for the chip group. */

package/dist/components/primitives/baht-filter.js

@@ -1,22 +1,29 @@
 import { html as h } from "lit";
-import { property as p, customElement as c } from "lit/decorators.js";
-import { boolOff as d, BahtElement as b } from "../base.js";
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (t, s, l, o) => {
-  for (var e = o > 1 ? void 0 : o ? f(s, l) : s, a = t.length - 1, n; a >= 0; a--)
-    (n = t[a]) && (e = (o ? n(s, l, e) : n(e)) || e);
-  return o && e && u(s, l, e), e;
+import { property as o, customElement as d } from "lit/decorators.js";
+import { boolOff as c, BahtElement as b } from "../base.js";
+var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, l = (s, t, r, a) => {
+  for (var e = a > 1 ? void 0 : a ? u(t, r) : t, p = s.length - 1, n; p >= 0; p--)
+    (n = s[p]) && (e = (a ? n(t, r, e) : n(e)) || e);
+  return a && e && m(t, r, e), e;
 };
-let r = class extends b {
+let i = class extends b {
   constructor() {
-    super(...arguments), this.options = [], this.selected = [], this.multiple = !0, this.disabled = !1, this.label = "Filters";
+    super(...arguments), this.options = [], this.selected = [], this.variant = "chips", this.multiple = !0, this.disabled = !1, this.label = "Filters";
   }
-  toggle(t) {
-    const s = this.selected.includes(t);
-    let l;
-    this.multiple ? (l = s ? this.selected.filter((e) => e !== t) : [...this.selected, t], l = this.options.map((e) => e.key).filter((e) => l.includes(e))) : l = s ? [] : [t], this.emit("baht-change", { selected: l });
+  toggle(s) {
+    const t = this.selected.includes(s);
+    let r;
+    if (this.multiple)
+      r = t ? this.selected.filter((e) => e !== s) : [...this.selected, s], r = this.options.map((e) => e.key).filter((e) => r.includes(e));
+    else {
+      if (t && this.variant === "segmented") return;
+      r = t ? [] : [s];
+    }
+    this.emit("baht-change", { selected: r });
   }
   render() {
-    return h`<div class="baht-filter" role="group" aria-label=${this.label}>
+    const s = this.variant === "segmented" ? " baht-filter--segmented" : "";
+    return h`<div class="baht-filter${s}" role="group" aria-label=${this.label}>
       ${this.options.map(
       (t) => h`<button
           type="button"
@@ -30,24 +37,27 @@ let r = class extends b {
     </div>`;
   }
 };
-i([
-  p({ attribute: !1 })
-], r.prototype, "options", 2);
-i([
-  p({ attribute: !1 })
-], r.prototype, "selected", 2);
-i([
-  p({ converter: d })
-], r.prototype, "multiple", 2);
-i([
-  p({ type: Boolean })
-], r.prototype, "disabled", 2);
-i([
-  p()
-], r.prototype, "label", 2);
-r = i([
-  c("baht-filter")
-], r);
+l([
+  o({ attribute: !1 })
+], i.prototype, "options", 2);
+l([
+  o({ attribute: !1 })
+], i.prototype, "selected", 2);
+l([
+  o()
+], i.prototype, "variant", 2);
+l([
+  o({ converter: c })
+], i.prototype, "multiple", 2);
+l([
+  o({ type: Boolean })
+], i.prototype, "disabled", 2);
+l([
+  o()
+], i.prototype, "label", 2);
+i = l([
+  d("baht-filter")
+], i);
 export {
-  r as BahtFilter
+  i as BahtFilter
 };

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

@@ -1,5 +1,7 @@
 import { TemplateResult } from 'lit';
 import { BahtElement } from '../base.js';
+/** Where the dialog panel sits. */
+export type ModalPlacement = 'center' | 'sheet' | 'side';
 /**
  * Modal dialog (20baht: 0.4 ink scrim, no blur; float shadow; 20px radius).
  * Controlled: the host flips `open`. Children become the body.
@@ -9,6 +11,15 @@ import { BahtElement } from '../base.js';
  *   </baht-modal>
  *   modal.open = true;
  *   modal.addEventListener('baht-close', (e) => (modal.open = false));
+ *
+ * `placement` moves the panel: `'center'` (default) is the dialog above;
+ * `'sheet'` docks it to the bottom as a bottom sheet below 600px viewport
+ * width (full width, rounded top corners, a grab handle, max 90dvh with the
+ * body scrolling, slides up) and is a centered dialog from 600px up; `'side'`
+ * is a full-height drawer at the inline end, `min(420px, 100vw)` wide, sliding
+ * in from that edge. Scrim, focus trap/restore and `baht-close` are the same in
+ * every placement. Modifier classes: `.baht-modal--sheet` / `.baht-modal--side`
+ * on the panel, `.baht-modal-scrim--sheet` / `.baht-modal-scrim--side` on the scrim.
  */
 export declare class BahtModal extends BahtElement {
     open: boolean;
@@ -16,6 +27,9 @@ export declare class BahtModal extends BahtElement {
     /** One muted line under the heading; also becomes the dialog's aria-describedby. */
     description: string;
     showClose: boolean;
+    /** `'center'` (default) dialog, `'sheet'` bottom sheet below 600px (centered
+     * from 600px up), or `'side'` full-height drawer at the inline end. */
+    placement: ModalPlacement;
     /**
      * Scrim click requests close. Off by default: a stray click outside the panel
      * must not throw away what the user typed — close via ×, Escape or your buttons.