bank20baht-ui 0.8.2 → 0.9.0

package/dist/components/primitives/baht-bar-chart.js

@@ -167,7 +167,7 @@ let p = class extends E {
       return o`<div class="baht-bar-chart-row">
         <span class="baht-bar-chart-label" title=${y}>${y}</span>
         <div
-          class="baht-bar-chart-track${this.stacked ? " baht-bar-chart-track--stacked" : ""}"
+          class="baht-bar-chart-track${this.stacked ? " baht-bar-chart-track--stacked" : ""}${this.categoryMarkers(y).length > 0 ? " baht-bar-chart-track--marked" : ""}"
           tabindex="0"
           role="button"
           aria-label=${u}

package/dist/components/primitives/baht-line-chart.d.ts

@@ -25,6 +25,18 @@ export declare class BahtLineChart extends BahtChartBase {
     labelValues: 'ends' | 'none';
     /** Accessible summary; falls back to a generated sentence. */
     label: string;
+    /**
+     * Drawing width in SVG units. It follows the host up to `W`, so on a phone
+     * one unit is one CSS pixel and tick text keeps its real size instead of
+     * shrinking with a 640-wide drawing scaled into a 360px card.
+     */
+    private width;
+    private resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    /** Host width → drawing width. Never runs on the server (`hasDom` guard). */
+    private measure;
     private get plot();
     protected render(): TemplateResult;
     private crosshairAt;

package/dist/components/primitives/baht-line-chart.js

@@ -1,151 +1,176 @@
-import { html as k, nothing as y, svg as l } from "lit";
-import { property as d, customElement as E } from "lit/decorators.js";
-import { arr as A } from "../base.js";
-import { BahtChartBase as N, niceTicks as V, linearScale as T, chartColor as g, renderTableTwin as q } from "./charts.js";
-var U = Object.defineProperty, R = Object.getOwnPropertyDescriptor, m = (b, a, n, o) => {
-  for (var c = o > 1 ? void 0 : o ? R(a, n) : a, f = b.length - 1, u; f >= 0; f--)
-    (u = b[f]) && (c = (o ? u(a, n, c) : u(c)) || c);
-  return o && c && U(a, n, c), c;
+import { html as _, nothing as y, svg as l } from "lit";
+import { property as x, state as H, customElement as N } from "lit/decorators.js";
+import { hasDom as k, arr as L } from "../base.js";
+import { BahtChartBase as W, niceTicks as q, linearScale as O, chartColor as g, renderTableTwin as R } from "./charts.js";
+var U = Object.defineProperty, V = Object.getOwnPropertyDescriptor, c = (o, s, $, r) => {
+  for (var d = r > 1 ? void 0 : r ? V(s, $) : s, f = o.length - 1, b; f >= 0; f--)
+    (b = o[f]) && (d = (r ? b(s, $, d) : b(d)) || d);
+  return r && d && U(s, $, d), d;
 };
-const C = 640, L = 260, s = { top: 14, right: 72, bottom: 30, left: 60 };
-let h = class extends N {
+const T = 640, X = 280, A = 260, I = 56, a = { top: 14, right: 72, bottom: 30, left: 60 };
+let h = class extends W {
   constructor() {
-    super(...arguments), this.series = [], this.categories = [], this.area = !1, this.markers = [], this.forecast = 0, this.baseline = null, this.labelValues = "ends", this.label = "", this.crosshairAt = null;
+    super(...arguments), this.series = [], this.categories = [], this.area = !1, this.markers = [], this.forecast = 0, this.baseline = null, this.labelValues = "ends", this.label = "", this.width = T, this.crosshairAt = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), !(!k() || typeof ResizeObserver > "u") && (this.resizeObserver = new ResizeObserver(() => {
+      this.measure();
+    }), this.resizeObserver.observe(this));
+  }
+  disconnectedCallback() {
+    var o;
+    (o = this.resizeObserver) == null || o.disconnect(), this.resizeObserver = void 0, super.disconnectedCallback();
+  }
+  firstUpdated() {
+    k() && queueMicrotask(() => {
+      this.measure();
+    });
+  }
+  /** Host width → drawing width. Never runs on the server (`hasDom` guard). */
+  measure() {
+    if (!k() || !this.isConnected) return;
+    const o = this.clientWidth;
+    if (o <= 0) return;
+    const s = Math.min(T, Math.max(X, Math.round(o)));
+    s !== this.width && (this.width = s);
   }
   get plot() {
-    return { w: C - s.left - s.right, h: L - s.top - s.bottom };
+    return { w: this.width - a.left - a.right, h: A - a.top - a.bottom };
   }
   render() {
-    const b = this.hold({
-      series: A(this.series).filter((t) => t.values.length > 0),
-      categories: A(this.categories)
-    }), { series: a, categories: n } = b;
-    if (a.length === 0)
-      return k`<div class=${this.rootClass("baht-line-chart")}>${this.renderEmpty()}</div>`;
-    const o = Math.max(...a.map((t) => t.values.length)), c = a.flatMap((t) => t.values).filter((t) => Number.isFinite(t)), f = Math.max(0, ...c, ...this.markers.map((t) => t.value)), u = V(f, 4), j = u[u.length - 1] ?? 1, { w: v, h: F } = this.plot, $ = T([0, Math.max(1, o - 1)], [s.left, s.left + v]), r = T([0, j], [s.top + F, s.top]), M = Math.max(0, o - 1 - Math.max(0, this.forecast)), P = (t, e, i) => t.slice(e, i + 1).map((p, x) => `${x === 0 ? "M" : "L"}${$(e + x).toFixed(2)},${r(p).toFixed(2)}`).join(" "), w = a.map((t, e) => ({
+    const o = this.hold({
+      series: L(this.series).filter((t) => t.values.length > 0),
+      categories: L(this.categories)
+    }), { series: s, categories: $ } = o;
+    if (s.length === 0)
+      return _`<div class=${this.rootClass("baht-line-chart")}>${this.renderEmpty()}</div>`;
+    const r = Math.max(...s.map((t) => t.values.length)), d = s.flatMap((t) => t.values).filter((t) => Number.isFinite(t)), f = Math.max(0, ...d, ...this.markers.map((t) => t.value)), b = q(f, 4), z = b[b.length - 1] ?? 1, { w: v, h: F } = this.plot, p = O([0, Math.max(1, r - 1)], [a.left, a.left + v]), i = O([0, z], [a.top + F, a.top]), M = Math.max(0, r - 1 - Math.max(0, this.forecast)), w = (t, e, n) => t.slice(e, n + 1).map((u, m) => `${m === 0 ? "M" : "L"}${p(e + m).toFixed(2)},${i(u).toFixed(2)}`).join(" "), P = s.map((t, e) => ({
       i: e,
       name: t.name,
       value: t.values[t.values.length - 1] ?? 0,
-      yPos: r(t.values[t.values.length - 1] ?? 0),
+      yPos: i(t.values[t.values.length - 1] ?? 0),
       color: g(e, t.color)
-    })), _ = [...w].sort((t, e) => t.yPos - e.yPos), B = _.some((t, e) => e > 0 && t.yPos - _[e - 1].yPos < 15), H = this.labelValues === "ends" && !B, O = Math.max(1, Math.ceil(o / 8)), D = this.label || `Line chart, ${a.length} series over ${o} points. ${a.map((t, e) => `${t.name}: ${this.fmt(w[e].value)} at the end`).join(". ")}`;
-    return k`<div class=${this.rootClass("baht-line-chart")}>
+    })), C = [...P].sort((t, e) => t.yPos - e.yPos), B = C.some((t, e) => e > 0 && t.yPos - C[e - 1].yPos < 15), j = this.labelValues === "ends" && !B, D = Math.max(1, Math.ceil(r / Math.max(2, Math.min(8, Math.floor(v / I))))), E = this.label || `Line chart, ${s.length} series over ${r} points. ${s.map((t, e) => `${t.name}: ${this.fmt(P[e].value)} at the end`).join(". ")}`;
+    return _`<div class=${this.rootClass("baht-line-chart")}>
       <svg
         class="baht-chart-svg"
-        viewBox="0 0 ${C} ${L}"
+        viewBox="0 0 ${this.width} ${A}"
         preserveAspectRatio="xMidYMid meet"
         role="img"
-        aria-label=${D}
+        aria-label=${E}
       >
-        ${u.map(
+        ${b.map(
       (t) => l`
-            <line class="baht-chart-grid-line" x1=${s.left} x2=${s.left + v}
-              y1=${r(t).toFixed(2)} y2=${r(t).toFixed(2)}/>
-            <text class="baht-chart-tick" x=${s.left - 8} y=${(r(t) + 4).toFixed(2)}
+            <line class="baht-chart-grid-line" x1=${a.left} x2=${a.left + v}
+              y1=${i(t).toFixed(2)} y2=${i(t).toFixed(2)}/>
+            <text class="baht-chart-tick" x=${a.left - 8} y=${(i(t) + 4).toFixed(2)}
               text-anchor="end">${this.fmt(t)}</text>`
     )}
         ${this.baseline != null ? [
-      l`<line class="baht-chart-baseline" x1=${s.left} x2=${s.left + v}
-              y1=${r(this.baseline).toFixed(2)} y2=${r(this.baseline).toFixed(2)}/>`
+      l`<line class="baht-chart-baseline" x1=${a.left} x2=${a.left + v}
+              y1=${i(this.baseline).toFixed(2)} y2=${i(this.baseline).toFixed(2)}/>`
     ] : []}
-        ${A(this.markers).map(
+        ${L(this.markers).map(
       (t) => l`
-            <line class="baht-chart-marker-line" x1=${s.left} x2=${s.left + v}
-              y1=${r(t.value).toFixed(2)} y2=${r(t.value).toFixed(2)}/>
-            <text class="baht-chart-marker-label" x=${s.left + v} y=${(r(t.value) - 5).toFixed(2)}
+            <line class="baht-chart-marker-line" x1=${a.left} x2=${a.left + v}
+              y1=${i(t.value).toFixed(2)} y2=${i(t.value).toFixed(2)}/>
+            <text class="baht-chart-marker-label" x=${a.left + v} y=${(i(t.value) - 5).toFixed(2)}
               text-anchor="end">${t.label ?? this.fmt(t.value)}</text>`
     )}
-        ${this.area && a.length === 1 ? l`<path class="baht-chart-area" fill=${g(0, a[0].color)}
-                d=${`${P(a[0].values, 0, o - 1)} L${$(o - 1).toFixed(2)},${r(0).toFixed(2)} L${$(0).toFixed(2)},${r(0).toFixed(2)} Z`}/>` : y}
-        ${a.map((t, e) => {
-      const i = g(e, t.color), p = [
-        l`<path class="baht-chart-line" d=${P(t.values, 0, M)} stroke=${i} fill="none"/>`
+        ${this.area && s.length === 1 ? l`<path class="baht-chart-area" fill=${g(0, s[0].color)}
+                d=${`${w(s[0].values, 0, r - 1)} L${p(r - 1).toFixed(2)},${i(0).toFixed(2)} L${p(0).toFixed(2)},${i(0).toFixed(2)} Z`}/>` : y}
+        ${s.map((t, e) => {
+      const n = g(e, t.color), u = [
+        l`<path class="baht-chart-line" d=${w(t.values, 0, M)} stroke=${n} fill="none"/>`
       ];
-      return M < o - 1 && p.push(
-        l`<path class="baht-chart-line baht-chart-line--forecast" d=${P(t.values, M, o - 1)}
-                stroke=${i} fill="none"/>`
-      ), p.push(
-        l`<circle class="baht-chart-end-dot" cx=${$(o - 1).toFixed(2)}
-              cy=${r(t.values[t.values.length - 1] ?? 0).toFixed(2)} r="4" fill=${i}/>`
-      ), p;
+      return M < r - 1 && u.push(
+        l`<path class="baht-chart-line baht-chart-line--forecast" d=${w(t.values, M, r - 1)}
+                stroke=${n} fill="none"/>`
+      ), u.push(
+        l`<circle class="baht-chart-end-dot" cx=${p(r - 1).toFixed(2)}
+              cy=${i(t.values[t.values.length - 1] ?? 0).toFixed(2)} r="4" fill=${n}/>`
+      ), u;
     })}
-        ${H ? w.map(
+        ${j ? P.map(
       (t) => l`
-                  <text class="baht-chart-end-label" x=${$(o - 1) + 10} y=${(t.yPos + 4).toFixed(2)}
+                  <text class="baht-chart-end-label" x=${p(r - 1) + 10} y=${(t.yPos + 4).toFixed(2)}
                     text-anchor="start">${this.fmt(t.value)}</text>`
     ) : y}
-        ${n.map(
-      (t, e) => e % O === 0 ? l`<text class="baht-chart-tick" x=${$(e).toFixed(2)} y=${L - 10} text-anchor="middle">${t}</text>` : y
+        ${$.map(
+      (t, e) => e % D === 0 ? l`<text class="baht-chart-tick" x=${p(e).toFixed(2)} y=${A - 10} text-anchor="middle">${t}</text>` : y
     )}
-        ${Array.from({ length: o }, (t, e) => {
-      const i = v / Math.max(1, o - 1), p = `${n[e] ?? `Point ${e + 1}`}: ${a.map((x) => `${x.name} ${this.fmt(x.values[e] ?? 0)}`).join(", ")}`;
-      return l`<rect class="baht-chart-hit" x=${($(e) - i / 2).toFixed(2)} y=${s.top}
-            width=${Math.max(24, i).toFixed(2)} height=${F} tabindex="0" role="button"
-            aria-label=${p}
-            @pointermove=${(x) => {
-        this.onHover(x, e, p);
+        ${Array.from({ length: r }, (t, e) => {
+      const n = v / Math.max(1, r - 1), u = `${$[e] ?? `Point ${e + 1}`}: ${s.map((m) => `${m.name} ${this.fmt(m.values[e] ?? 0)}`).join(", ")}`;
+      return l`<rect class="baht-chart-hit" x=${(p(e) - n / 2).toFixed(2)} y=${a.top}
+            width=${Math.max(24, n).toFixed(2)} height=${F} tabindex="0" role="button"
+            aria-label=${u}
+            @pointermove=${(m) => {
+        this.onHover(m, e, u);
       }}
             @pointerleave=${() => {
         this.onLeave();
       }}
-            @focus=${(x) => {
-        this.onHover(x, e, p);
+            @focus=${(m) => {
+        this.onHover(m, e, u);
       }}
             @blur=${() => {
         this.onLeave();
       }}/>`;
     })}
-        ${this.crosshairAt != null ? l`<line class="baht-chart-crosshair" x1=${$(this.crosshairAt).toFixed(2)}
-                x2=${$(this.crosshairAt).toFixed(2)} y1=${s.top} y2=${s.top + F}/>` : y}
+        ${this.crosshairAt != null ? l`<line class="baht-chart-crosshair" x1=${p(this.crosshairAt).toFixed(2)}
+                x2=${p(this.crosshairAt).toFixed(2)} y1=${a.top} y2=${a.top + F}/>` : y}
       </svg>
       ${this.renderTooltip()}
       ${this.renderLegend(
-      a.map((t, e) => ({ label: t.name, color: g(e, t.color) })),
+      s.map((t, e) => ({ label: t.name, color: g(e, t.color) })),
       "line"
     )}
-      ${this.showTable ? q(
+      ${this.showTable ? R(
       this.label || "Line chart data",
-      ["Point", ...a.map((t) => t.name)],
-      Array.from({ length: o }, (t, e) => [
-        n[e] ?? `Point ${e + 1}`,
-        ...a.map((i) => this.fmt(i.values[e] ?? 0))
+      ["Point", ...s.map((t) => t.name)],
+      Array.from({ length: r }, (t, e) => [
+        $[e] ?? `Point ${e + 1}`,
+        ...s.map((n) => this.fmt(n.values[e] ?? 0))
       ])
     ) : y}
     </div>`;
   }
-  onHover(b, a, n) {
-    this.crosshairAt = a, this.requestUpdate(), this.showTip(b, n);
+  onHover(o, s, $) {
+    this.crosshairAt = s, this.requestUpdate(), this.showTip(o, $);
   }
   onLeave() {
     this.crosshairAt = null, this.requestUpdate(), this.hideTip();
   }
 };
-m([
-  d({ attribute: !1 })
+c([
+  x({ attribute: !1 })
 ], h.prototype, "series", 2);
-m([
-  d({ attribute: !1 })
+c([
+  x({ attribute: !1 })
 ], h.prototype, "categories", 2);
-m([
-  d({ type: Boolean })
+c([
+  x({ type: Boolean })
 ], h.prototype, "area", 2);
-m([
-  d({ attribute: !1 })
+c([
+  x({ attribute: !1 })
 ], h.prototype, "markers", 2);
-m([
-  d({ type: Number })
+c([
+  x({ type: Number })
 ], h.prototype, "forecast", 2);
-m([
-  d({ type: Number })
+c([
+  x({ type: Number })
 ], h.prototype, "baseline", 2);
-m([
-  d({ attribute: "label-values" })
+c([
+  x({ attribute: "label-values" })
 ], h.prototype, "labelValues", 2);
-m([
-  d()
+c([
+  x()
 ], h.prototype, "label", 2);
-h = m([
-  E("baht-line-chart")
+c([
+  H()
+], h.prototype, "width", 2);
+h = c([
+  N("baht-line-chart")
 ], h);
 export {
   h as BahtLineChart

package/dist/core/i18n.d.ts

@@ -28,6 +28,10 @@ export interface MessageCatalog {
     removeRow: string;
     minRows: string;
     maxRows: string;
+    /** `min_rows: 1`, where "{n} rows" would read "1 rows". */
+    minRowsOne: string;
+    /** `max_rows: 1`. */
+    maxRowsOne: string;
     next: string;
     submit: string;
     back: string;

package/dist/core/i18n.js

@@ -28,6 +28,8 @@ const n = {
   removeRow: "Remove row",
   minRows: "Add at least {n} rows",
   maxRows: "Add at most {n} rows",
+  minRowsOne: "Add at least one row",
+  maxRowsOne: "Add at most one row",
   next: "Next",
   submit: "Submit",
   back: "Back",
@@ -93,6 +95,8 @@ const n = {
   removeRow: "ลบแถว",
   minRows: "ต้องมีอย่างน้อย {n} แถว",
   maxRows: "ต้องไม่เกิน {n} แถว",
+  minRowsOne: "ต้องมีอย่างน้อย 1 แถว",
+  maxRowsOne: "ต้องไม่เกิน 1 แถว",
   next: "ถัดไป",
   submit: "ส่งข้อมูล",
   back: "ย้อนกลับ",

package/dist/core/validators.js

@@ -1,9 +1,9 @@
-import { defaultValue as b } from "./defaults.js";
+import { defaultValue as w } from "./defaults.js";
 import { compareValues as k } from "./engine/conditions.js";
-import { isoDaysOf as x, dateModeOf as w, rangeInteriorDays as _, isDateDisabled as A } from "./dates.js";
-import { t as u } from "./i18n.js";
+import { isoDaysOf as x, dateModeOf as _, rangeInteriorDays as b, isDateDisabled as A } from "./dates.js";
+import { t as i } from "./i18n.js";
 const L = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-function p(e) {
+function l(e) {
   return e == null ? !0 : typeof e == "string" ? e === "" : Array.isArray(e) ? e.length === 0 : typeof e == "boolean" ? !e : !1;
 }
 function d(e) {
@@ -16,14 +16,14 @@ function h(e, t) {
     const r = Number(n.value);
     return Number.isNaN(r) ? (console.warn(
       `[bahtui] ${t} validator has non-numeric value ${JSON.stringify(n.value)} — skipped`
-    ), null) : typeof s != "string" ? null : (e === "minLength" ? s.length < r : s.length > r) ? n.message ?? u(e, { n: n.value }) : null;
+    ), null) : typeof s != "string" ? null : (e === "minLength" ? s.length < r : s.length > r) ? n.message ?? i(e, { n: n.value }) : null;
   };
 }
 function f(e) {
   return (t, n) => E(n).some((r) => {
     const o = k(r, t.value);
     return o !== null && (e === "min" ? o < 0 : o > 0);
-  }) ? t.message ?? u(e, { n: t.value }) : null;
+  }) ? t.message ?? i(e, { n: t.value }) : null;
 }
 const C = {
   eq: (e) => e === 0,
@@ -32,39 +32,39 @@ const C = {
   gte: (e) => e >= 0,
   lt: (e) => e < 0,
   lte: (e) => e <= 0
-}, $ = (e, t, n, s) => {
+}, R = (e, t, n, s) => {
   const r = s == null ? void 0 : s[e.field ?? ""];
-  if (r === void 0 || p(r)) return null;
+  if (r === void 0 || l(r)) return null;
   const o = k(t, r);
   if (o === null) return null;
   const a = e.op ?? "eq";
   if (C[a](o)) return null;
   const m = `compare${a[0].toUpperCase()}${a.slice(1)}`;
-  return e.message ?? u(m, { other: e.field });
-}, q = (e, t) => {
+  return e.message ?? i(m, { other: e.field });
+}, $ = (e, t) => {
   if (typeof t != "string") return null;
   const n = D(String(e.value));
-  return n ? n.test(t) ? null : e.message ?? u("pattern") : null;
-}, N = (e, t, n) => {
+  return n ? n.test(t) ? null : e.message ?? i("pattern") : null;
+}, O = (e, t, n) => {
   var o;
   const s = (o = n == null ? void 0 : n.validators) == null ? void 0 : o[e.fn ?? ""];
   if (!s)
     return console.warn(`[bahtui] unknown custom validator "${e.fn}" — skipped`), null;
   const r = s(t);
   return r === null ? null : e.message ?? r;
-}, R = {
-  required: (e, t) => p(t) ? e.message ?? u("required") : null,
+}, q = {
+  required: (e, t) => l(t) ? e.message ?? i("required") : null,
   minLength: h("minLength", "min_length"),
   maxLength: h("maxLength", "max_length"),
   min: f("min"),
   max: f("max"),
-  pattern: q,
-  email: (e, t) => typeof t == "string" && !L.test(t) ? e.message ?? u("email") : null,
-  compare: $,
-  custom: N
+  pattern: $,
+  email: (e, t) => typeof t == "string" && !L.test(t) ? e.message ?? i("email") : null,
+  compare: R,
+  custom: O
 };
-function O(e, t, n, s) {
-  return R[e.type](e, t, n, s);
+function N(e, t, n, s) {
+  return q[e.type](e, t, n, s);
 }
 const g = /* @__PURE__ */ new Map();
 function D(e) {
@@ -80,10 +80,10 @@ function D(e) {
   return t;
 }
 function S(e, t, n, s) {
-  const r = [], o = d(e), a = p(t);
+  const r = [], o = d(e), a = l(t);
   for (const m of o) {
     if (m.type !== "required" && a) continue;
-    const c = O(m, t, n, s);
+    const c = N(m, t, n, s);
     c !== null && r.push({ key: e.key, message: c });
   }
   return e.type === "repeater" && r.push(...V(e, t, n)), e.type === "file" && r.push(...T(e, t)), e.type === "date" && !a && r.push(...M(e, t)), r;
@@ -92,7 +92,7 @@ function M(e, t) {
   var s, r;
   if (!((s = e.disabled_dates) != null && s.length) && !((r = e.disabled_weekdays) != null && r.length)) return [];
   const n = x(t);
-  return w(e) === "range" && n.length === 2 && n.push(..._(n[0], n[1])), n.some((o) => A(e, o)) ? [{ key: e.key, message: u("dateDisabled") }] : [];
+  return _(e) === "range" && n.length === 2 && n.push(...b(n[0], n[1])), n.some((o) => A(e, o)) ? [{ key: e.key, message: i("dateDisabled") }] : [];
 }
 function P(e) {
   return e !== null && typeof e == "object" && typeof e.url == "string" && typeof e.size == "number" && typeof e.name == "string";
@@ -106,22 +106,29 @@ function z(e, t, n) {
 function T(e, t) {
   const n = (Array.isArray(t) ? t : [t]).filter(P), s = [];
   for (const r of n)
-    e.max_size !== void 0 && r.size > e.max_size && s.push({ key: e.key, message: u("fileTooLarge") }), e.accept && !z(e.accept, r.name, r.type ?? "") && s.push({ key: e.key, message: u("fileTypeNotAllowed") });
+    e.max_size !== void 0 && r.size > e.max_size && s.push({ key: e.key, message: i("fileTooLarge") }), e.accept && !z(e.accept, r.name, r.type ?? "") && s.push({ key: e.key, message: i("fileTypeNotAllowed") });
   return s;
 }
 function V(e, t, n) {
   if (t != null && !Array.isArray(t))
-    return [{ key: e.key, message: u("pattern") }];
+    return [{ key: e.key, message: i("pattern") }];
   const s = Array.isArray(t) ? t : [], r = [];
-  e.min_rows !== void 0 && s.length < e.min_rows && r.push({ key: e.key, message: u("minRows", { n: e.min_rows }) }), e.max_rows !== void 0 && s.length > e.max_rows && r.push({ key: e.key, message: u("maxRows", { n: e.max_rows }) });
+  if (e.min_rows !== void 0 && s.length < e.min_rows) {
+    const a = e.min_rows === 1 ? i("minRowsOne") : i("minRows", { n: e.min_rows });
+    r.push({ key: e.key, message: a });
+  }
+  if (e.max_rows !== void 0 && s.length > e.max_rows) {
+    const a = e.max_rows === 1 ? i("maxRowsOne") : i("maxRows", { n: e.max_rows });
+    r.push({ key: e.key, message: a });
+  }
   const o = [...e.fields ?? []].sort((a, m) => a.order - m.order);
   return s.forEach((a, m) => {
-    const c = a !== null && typeof a == "object" && !Array.isArray(a) ? a : {}, l = {};
-    for (const i of o)
-      i.type === "label" || i.type === "section" || i.type === "repeater" || (l[i.key] = Object.hasOwn(c, i.key) ? c[i.key] : b(i));
-    for (const i of o)
-      if (!(i.type === "label" || i.type === "section" || i.type === "repeater"))
-        for (const y of S(i, l[i.key], n, l))
+    const c = a !== null && typeof a == "object" && !Array.isArray(a) ? a : {}, p = {};
+    for (const u of o)
+      u.type === "label" || u.type === "section" || u.type === "repeater" || (p[u.key] = Object.hasOwn(c, u.key) ? c[u.key] : w(u));
+    for (const u of o)
+      if (!(u.type === "label" || u.type === "section" || u.type === "repeater"))
+        for (const y of S(u, p[u.key], n, p))
           r.push({ key: `${e.key}[${m}].${y.key}`, message: y.message });
   }), r;
 }

package/dist/css/components.css

@@ -396,6 +396,10 @@
   display: flex;
   align-items: center;
   gap: var(--baht-space-2);
+  /* A narrow card (a 1/4 option width in a phone-width form) drops the label
+     under its icon instead of pushing it past the card edge into the next one. */
+  flex-wrap: wrap;
+  min-width: 0;
 }
 /* `option.width` — same fractions as `field.width`, against the card row's
    own gap (`--baht-space-3`) instead of the form grid's `--baht-field-gap`,
@@ -407,6 +411,7 @@
 .baht-option-card--w-1-4 {
   flex: 0 0 calc(25% - var(--baht-space-3) * 3 / 4);
   min-width: 0;
+  padding-inline: var(--baht-space-3);
 }
 .baht-option-card--w-1-2 {
   flex: 0 0 calc(50% - var(--baht-space-3) / 2);
@@ -449,6 +454,11 @@
 .baht-option-card-title {
   font-weight: 600;
   color: var(--baht-color-text);
+  /* Last resort when even its own line is too narrow: clip, never overflow. */
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .baht-option-card-desc {
   font-size: var(--baht-text-sm);
@@ -2546,16 +2556,17 @@ code.baht-code {
   vertical-align: middle;
   background: var(--baht-color-text-muted);
 }
-/* A row's own marker, beside its line — on the surface so a bar behind it
-   never runs through the text. */
+/* A row with its own marker (a budget line) gets a caption lane above its
+   bars: the label sits there beside its line and never covers a bar or the
+   bar's value. */
+.baht-bar-chart-track--marked {
+  padding-top: 1.1rem;
+}
 .baht-bar-chart-marker-label--row {
-  top: 50%;
+  top: 0;
   bottom: auto;
   z-index: 2;
-  margin-top: -0.55rem;
-  background: var(--baht-chart-surface);
-  padding: 0 4px;
-  border-radius: var(--baht-radius-xs);
+  padding: 0 2px;
 }
 .baht-bar-chart-marker-label--row::before {
   display: none; /* the line it names is right beside it */

package/dist/custom-elements.json

@@ -10100,6 +10100,35 @@
               "description": "Accessible summary; falls back to a generated sentence.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "width",
+              "privacy": "private",
+              "default": "640",
+              "description": "Drawing width in SVG units. It follows the host up to `W`, so on a phone\none unit is one CSS pixel and tick text keeps its real size instead of\nshrinking with a 640-wide drawing scaled into a 360px card.",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "measure",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Host width → drawing width. Never runs on the server (`hasDom` guard)."
+            },
             {
               "kind": "field",
               "name": "plot",

package/dist/tokens.css

@@ -830,6 +830,10 @@
   display: flex;
   align-items: center;
   gap: var(--baht-space-2);
+  /* A narrow card (a 1/4 option width in a phone-width form) drops the label
+     under its icon instead of pushing it past the card edge into the next one. */
+  flex-wrap: wrap;
+  min-width: 0;
 }
 /* `option.width` — same fractions as `field.width`, against the card row's
    own gap (`--baht-space-3`) instead of the form grid's `--baht-field-gap`,
@@ -841,6 +845,7 @@
 .baht-option-card--w-1-4 {
   flex: 0 0 calc(25% - var(--baht-space-3) * 3 / 4);
   min-width: 0;
+  padding-inline: var(--baht-space-3);
 }
 .baht-option-card--w-1-2 {
   flex: 0 0 calc(50% - var(--baht-space-3) / 2);
@@ -883,6 +888,11 @@
 .baht-option-card-title {
   font-weight: 600;
   color: var(--baht-color-text);
+  /* Last resort when even its own line is too narrow: clip, never overflow. */
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .baht-option-card-desc {
   font-size: var(--baht-text-sm);
@@ -2980,16 +2990,17 @@ code.baht-code {
   vertical-align: middle;
   background: var(--baht-color-text-muted);
 }
-/* A row's own marker, beside its line — on the surface so a bar behind it
-   never runs through the text. */
+/* A row with its own marker (a budget line) gets a caption lane above its
+   bars: the label sits there beside its line and never covers a bar or the
+   bar's value. */
+.baht-bar-chart-track--marked {
+  padding-top: 1.1rem;
+}
 .baht-bar-chart-marker-label--row {
-  top: 50%;
+  top: 0;
   bottom: auto;
   z-index: 2;
-  margin-top: -0.55rem;
-  background: var(--baht-chart-surface);
-  padding: 0 4px;
-  border-radius: var(--baht-radius-xs);
+  padding: 0 2px;
 }
 .baht-bar-chart-marker-label--row::before {
   display: none; /* the line it names is right beside it */

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "bank20baht-ui",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bank20baht-ui",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "type": "module",
   "description": "JSON-driven form + workflow engine. Send JSON in, get an interactive form out.",
   "license": "MIT",