bank20baht-ui 0.10.0 → 0.12.0

package/README.md

@@ -154,7 +154,7 @@ el.value = JSON.parse(localStorage.getItem(key) ?? '{}'); // restore on mount
 // clear the key after the server accepts the submission
 ```
 
-See `apps/web`'s render page for a working restore/discard/clear-on-submit flow.
+The `/builder` page of the docs site (`bun run --filter docs dev`) shows the same flow live.
 
 ### i18n — Thai (or any) built-in strings
 
@@ -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">`). 35+ components:
+(`<html data-baht-theme="dark">`). 59 elements:
 
 ```html
 <baht-button variant="secondary" size="sm">Cancel</baht-button>
@@ -269,16 +269,19 @@ 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` ·
   `baht-spinner` · `baht-skeleton`
 - **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`
+  `baht-keyvalue-editor` · `baht-upload` (+ the 15 form field primitives). Typed fields debounce keystrokes
+  (150 ms, `debounce`); `dropdown` renders its own listbox, never the OS picker.
+- **Stats & charts** — `baht-stat` · `baht-stat-chart` · `baht-meter` · `baht-sparkline` · `baht-bar-chart` ·
+  `baht-line-chart` · `baht-donut-chart` · `baht-heatmap` · `baht-progress-ring`
+- **Structure & nav** — `baht-card` · `baht-fieldset` · `baht-timeline` · `baht-accordion` · `baht-steps` ·
+  `baht-link` · `baht-breadcrumbs` · `baht-avatar` · `baht-code` · `baht-empty-state` · `baht-error-state` ·
+  `baht-loading-overlay`
 
 ## Theming — design tokens + light DOM
 
@@ -305,7 +308,7 @@ Full reference: [docs/theming.md](./docs/theming.md).
 // 1. per-element subpath — one module per tag, plus only what it imports
 import 'bank20baht-ui/components/button'; // <baht-button>
 import { BahtTable } from 'bank20baht-ui/components/table';
-import 'bank20baht-ui/components/form'; // <baht-form> + the 14 field primitives
+import 'bank20baht-ui/components/form'; // <baht-form> + the 15 field primitives
 import 'bank20baht-ui/components/workflow';
 
 // 2. by tag list — each tag is a dynamic import, fetched on demand
@@ -344,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 36 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`:
 
@@ -400,21 +403,20 @@ import 'bank20baht-ui';
 `@lit-labs/ssr` is an optional peer dependency (server only). Full guide, limitations
 (light-DOM children, ids, i18n locale) and troubleshooting: [docs/ssr.md](./docs/ssr.md).
 
-## Docs, Storybook, examples
+## Docs
 
-- **Per-component docs**: [`docs/`](./docs/README.md) — one .md per component + framework
-  guides (vanilla / React / Angular).
-- **Storybook**: `pnpm --filter storybook-bahtui dev` → http://localhost:6006.
-- **Copy-out starters**: `examples/vanilla`, `examples/react`, `examples/angular` at the
-  repo root — same workflow JSON in three hosts.
+- **Per-component docs**: [`docs/`](./docs/README.md) — one .md per element + framework
+  guides (vanilla / React / Angular) + theming + SSR.
+- **Docs site with live specimens**: https://bahtui-docs.pages.dev (source: `apps/docs`).
+- **For agents**: the `bahtui-mcp` server (`apps/mcp`) serves these docs and runs the engine on your JSON.
 
-## Field types (13)
+## Field types (17)
 
-`text · textarea · number · email · password · dropdown · multiselect · checkbox · radio · toggle · date ·
-file (capture only, no upload) · label (static)`
+`text · textarea · number · currency · email · password · dropdown · multiselect · tags · checkbox · radio ·
+toggle · date · file · repeater (one level of rows) · label (static) · section (divider)`
 
 Each field descriptor: `{ order, type, key, label, placeholder, width: '1/4'|'1/2'|'3/4'|'full',
-value, disabled, required, options, max_length, min, max, validators[], formatter }`.
+value, disabled, required, options | options_from, max_length, min, max, validators[], formatter, flag }`.
 
 ## Visual Builder
 

package/dist/components/baht-form.js

@@ -17,6 +17,7 @@ import "./primitives/baht-number.js";
 import "./primitives/baht-currency.js";
 import "./primitives/baht-select.js";
 import "./primitives/baht-multiselect.js";
+import "./primitives/baht-tags.js";
 import "./primitives/baht-checkbox.js";
 import "./primitives/baht-radio.js";
 import "./primitives/baht-toggle.js";

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.

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

@@ -1,13 +1,13 @@
-import { nothing as a, html as h } from "lit";
-import { property as c, query as f, state as m, customElement as b } from "lit/decorators.js";
+import { nothing as r, html as h } from "lit";
+import { property as c, query as m, state as f, customElement as b } from "lit/decorators.js";
 import { boolOff as y, BahtElement as v, hasDom as p, adoptLightChildren as u } from "../base.js";
 import { afterExit as g } from "../motion.js";
 import { t as $ } from "../../core/i18n.js";
 import { renderIllustration as k } from "./illustrations.js";
-var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, i, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? S(i, e) : i, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (o = (n ? d(i, e, o) : d(o)) || o);
-  return n && o && C(i, e, o), o;
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (t, o, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? S(o, e) : o, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (i = (n ? d(o, e, i) : d(i)) || i);
+  return n && i && C(o, e, i), i;
 };
 const E = {
   fromAttribute: (t) => t !== null && t !== "false",
@@ -15,7 +15,7 @@ const E = {
 };
 let s = class extends v {
   constructor() {
-    super(...arguments), this.open = !1, this.heading = "", this.description = "", this.showClose = !0, this.closeOnScrim = !1, this.closing = !1, this.closeToken = 0, this.previousFocus = null, this.onKeydown = (t) => {
+    super(...arguments), this.open = !1, this.heading = "", this.description = "", this.showClose = !0, this.placement = "center", this.closeOnScrim = !1, this.closing = !1, this.closeToken = 0, this.previousFocus = null, this.onKeydown = (t) => {
       !this.open || s.openStack.at(-1) !== this || (t.key === "Escape" ? this.requestClose("escape") : t.key === "Tab" && this.trapFocus(t));
     };
   }
@@ -35,17 +35,17 @@ let s = class extends v {
   }
   /** Keep Tab cycling inside the dialog (no keyboard escape to the page behind). */
   trapFocus(t) {
-    const i = this.focusables(), e = this.querySelector(".baht-modal");
-    if (i.length === 0) {
+    const o = this.focusables(), e = this.querySelector(".baht-modal");
+    if (o.length === 0) {
       e == null || e.focus(), t.preventDefault();
       return;
     }
-    const n = i[0], o = i[i.length - 1], l = document.activeElement;
-    if (!this.contains(l)) {
+    const n = o[0], i = o[o.length - 1], a = document.activeElement;
+    if (!this.contains(a)) {
       n.focus(), t.preventDefault();
       return;
     }
-    t.shiftKey && (l === n || l === e) ? (o.focus(), t.preventDefault()) : !t.shiftKey && l === o && (n.focus(), t.preventDefault());
+    t.shiftKey && (a === n || a === e) ? (i.focus(), t.preventDefault()) : !t.shiftKey && a === i && (n.focus(), t.preventDefault());
   }
   connectedCallback() {
     super.connectedCallback(), p() && document.addEventListener("keydown", this.onKeydown);
@@ -66,14 +66,14 @@ let s = class extends v {
   // already under `.baht-modal-body`) and keeps that content inside the body
   // instead of leaking it to render outside the modal entirely.
   updated(t) {
-    var i;
+    var o;
     if (u(this, this.bodyEl), t.has("open") && (s.openStack = s.openStack.filter((e) => e !== this), this.open && s.openStack.push(this)), t.has("open") && !this.open && this.closing) {
-      const e = ++this.closeToken, n = this.querySelector(".baht-modal-scrim"), o = () => {
+      const e = ++this.closeToken, n = this.querySelector(".baht-modal-scrim"), i = () => {
         e === this.closeToken && !this.open && (this.closing = !1);
       };
-      n ? g(n, o) : o();
+      n ? g(n, i) : i();
     }
-    if (t.has("open") && this.open && (this.previousFocus = document.activeElement, (i = this.querySelector(".baht-modal")) == null || i.focus()), t.has("open") && !this.open && t.get("open") === !0) {
+    if (t.has("open") && this.open && (this.previousFocus = document.activeElement, (o = this.querySelector(".baht-modal")) == null || o.focus()), t.has("open") && !this.open && t.get("open") === !0) {
       const e = this.previousFocus;
       this.previousFocus = null, e != null && e.isConnected && (!document.activeElement || document.activeElement === document.body || this.contains(document.activeElement)) && e.focus();
     }
@@ -83,59 +83,64 @@ let s = class extends v {
     this.emit("baht-close", { reason: t });
   }
   render() {
+    const t = this.placement === "sheet" || this.placement === "side" ? this.placement : void 0;
     return h`<div
-      class="baht-modal-scrim${this.closing ? " baht-modal-scrim--closing" : ""}"
-      style=${this.open || this.closing ? a : "display:none"}
-      @click=${(t) => {
-      this.closeOnScrim && t.target === t.currentTarget && this.requestClose("scrim");
+      class="baht-modal-scrim${t ? ` baht-modal-scrim--${t}` : ""}${this.closing ? " baht-modal-scrim--closing" : ""}"
+      style=${this.open || this.closing ? r : "display:none"}
+      @click=${(o) => {
+      this.closeOnScrim && o.target === o.currentTarget && this.requestClose("scrim");
     }}
     >
       <div
-        class="baht-modal"
+        class="baht-modal${t ? ` baht-modal--${t}` : ""}"
         role="dialog"
         aria-modal="true"
-        aria-labelledby=${this.heading ? this.titleId : a}
-        aria-label=${this.heading ? a : "Dialog"}
-        aria-describedby=${this.description ? this.descriptionId : a}
+        aria-labelledby=${this.heading ? this.titleId : r}
+        aria-label=${this.heading ? r : "Dialog"}
+        aria-describedby=${this.description ? this.descriptionId : r}
         tabindex="-1"
       >
+        ${t === "sheet" ? h`<div class="baht-modal-handle" aria-hidden="true"></div>` : r}
         ${this.heading || this.description || this.showClose ? h`<header class="baht-modal-header">
               <div class="baht-modal-heading">
                 <div class="baht-modal-title" id=${this.titleId}>${this.heading}</div>
-                ${this.description ? h`<p class="baht-modal-description" id=${this.descriptionId}>${this.description}</p>` : a}
+                ${this.description ? h`<p class="baht-modal-description" id=${this.descriptionId}>${this.description}</p>` : r}
               </div>
               ${this.showClose ? h`<button type="button" class="baht-modal-close" aria-label=${$("close")} @click=${() => {
       this.requestClose("button");
-    }}>${k("cross-box")}</button>` : a}
-            </header>` : a}
+    }}>${k("cross-box")}</button>` : r}
+            </header>` : r}
         <div class="baht-modal-body"></div>
       </div>
     </div>`;
   }
 };
 s.openStack = [];
-r([
+l([
   c({ type: Boolean, reflect: !0 })
 ], s.prototype, "open", 2);
-r([
+l([
   c()
 ], s.prototype, "heading", 2);
-r([
+l([
   c()
 ], s.prototype, "description", 2);
-r([
+l([
   c({ attribute: "show-close", converter: y })
 ], s.prototype, "showClose", 2);
-r([
+l([
+  c()
+], s.prototype, "placement", 2);
+l([
   c({ attribute: "close-on-scrim", converter: E })
 ], s.prototype, "closeOnScrim", 2);
-r([
-  f(".baht-modal-body")
+l([
+  m(".baht-modal-body")
 ], s.prototype, "bodyEl", 2);
-r([
-  m()
+l([
+  f()
 ], s.prototype, "closing", 2);
-s = r([
+s = l([
   b("baht-modal")
 ], s);
 export {

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

@@ -13,6 +13,10 @@ import { BahtFieldBase } from '../field-base.js';
  * and moves on, typing jumps to the first option starting with those letters
  * (while closed it picks it directly, like a native select).
  *
+ * An option's `description` renders as a muted second line under its label in
+ * the list, and after the label on the closed trigger while it is selected
+ * (e.g. label "Food", description "฿580 left").
+ *
  * Value contract unchanged: option `key`, or `null` for the placeholder row.
  */
 export declare class BahtSelect extends BahtFieldBase {