bank20baht-ui 0.7.2 → 0.7.4

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

@@ -9,11 +9,15 @@ import { BahtChartBase, ChartDatePoint } from './charts.js';
  *   el.values = [{ date: '2026-09-01', value: 420 }];
  *   el.from = '2026-09-01'; el.to = '2026-09-30';
  *
- * `show-values` swaps the compact GitHub-style weeks-as-columns layout for
- * a roomier month grid (weeks as rows) that prints the day number and the
- * formatted value inside every cell, with today's cell outlined:
+ * `show-values` swaps the compact GitHub-style SVG (weeks as columns) for a
+ * month grid rendered as HTML (weeks as rows): seven weekday headers, one
+ * focusable button per day carrying the day number and the formatted value,
+ * today's cell outlined. Being HTML, the grid fills its container while text
+ * keeps its real size — nothing is scaled. Cell height follows
+ * `--baht-heatmap-cell-min` (56px). The two darkest ramp steps flip to light
+ * text.
  *
- *   <baht-heatmap show-values format="currency" .values=${daily}></baht-heatmap>
+ *   <baht-heatmap show-values format="currency" zero-label="none" .values=${daily}></baht-heatmap>
  */
 export declare class BahtHeatmap extends BahtChartBase {
     /** `{ date: 'YYYY-MM-DD', value }[]`; days with no entry render as empty. */
@@ -36,6 +40,10 @@ export declare class BahtHeatmap extends BahtChartBase {
     protected render(): TemplateResult;
     /** Compact GitHub-style layout: weeks as columns, weekdays as rows. */
     private renderCompact;
-    /** `show-values` layout: weeks as rows, weekdays as columns, day number + value in each cell. */
+    /**
+     * `show-values` layout: an HTML month grid — weeks as rows, weekdays as
+     * columns, the day number and value printed in each cell. Buttons give
+     * every day focus and a role for free; the tooltip rides on focus/hover.
+     */
     private renderCalendar;
 }

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

@@ -1,145 +1,150 @@
-import { html as y, nothing as A, svg as w } from "lit";
-import { property as m, customElement as O } from "lit/decorators.js";
-import { BahtChartBase as R, chartSeqColor as D, renderTableTwin as P } from "./charts.js";
-var V = Object.defineProperty, H = Object.getOwnPropertyDescriptor, p = (o, e, h, a) => {
-  for (var r = a > 1 ? void 0 : a ? H(e, h) : e, n = o.length - 1, s; n >= 0; n--)
-    (s = o[n]) && (r = (a ? s(e, h, r) : s(r)) || r);
-  return a && r && V(e, h, r), r;
+import { html as u, nothing as T, svg as k } from "lit";
+import { property as m, customElement as _ } from "lit/decorators.js";
+import { BahtChartBase as z, chartSeqColor as x, renderTableTwin as A } from "./charts.js";
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (t, a, r, e) => {
+  for (var n = e > 1 ? void 0 : e ? P(a, r) : a, i = t.length - 1, s; i >= 0; i--)
+    (s = t[i]) && (n = (e ? s(a, r, n) : s(n)) || n);
+  return e && n && O(a, r, n), n;
 };
-const L = 22, g = 24, B = 34, M = 18, _ = 46, v = 52, k = 16, S = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-function E(o) {
-  const e = /^(\d{4})-(\d{2})-(\d{2})/.exec(o ?? "");
-  return e ? new Date(Date.UTC(+e[1], +e[2] - 1, +e[3])) : null;
+const D = 22, y = 24, S = 34, C = 18, E = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+function M(t) {
+  const a = /^(\d{4})-(\d{2})-(\d{2})/.exec(t ?? "");
+  return a ? new Date(Date.UTC(+a[1], +a[2] - 1, +a[3])) : null;
 }
-function x(o) {
-  return o.toISOString().slice(0, 10);
+function L(t) {
+  return t.toISOString().slice(0, 10);
 }
-let c = class extends R {
+function V() {
+  const t = /* @__PURE__ */ new Date(), a = String(t.getMonth() + 1).padStart(2, "0"), r = String(t.getDate()).padStart(2, "0");
+  return `${t.getFullYear()}-${a}-${r}`;
+}
+let p = class extends z {
   constructor() {
     super(...arguments), this.values = [], this.from = "", this.to = "", this.lessLabel = "Less", this.moreLabel = "More", this.zeroLabel = "—", this.showValues = !1, this.label = "";
   }
   get range() {
-    const o = (this.values ?? []).map((a) => E(a.date)).filter((a) => !!a), e = E(this.from) ?? (o.length ? new Date(Math.min(...o.map((a) => +a))) : null), h = E(this.to) ?? (o.length ? new Date(Math.max(...o.map((a) => +a))) : null);
-    return !e || !h || +h < +e ? null : { start: e, end: h };
+    const t = (this.values ?? []).map((e) => M(e.date)).filter((e) => !!e), a = M(this.from) ?? (t.length ? new Date(Math.min(...t.map((e) => +e))) : null), r = M(this.to) ?? (t.length ? new Date(Math.max(...t.map((e) => +e))) : null);
+    return !a || !r || +r < +a ? null : { start: a, end: r };
   }
   render() {
-    const o = this.hold({ values: this.values ?? [], range: this.range }), e = o.range;
-    if (!e || o.values.length === 0)
-      return y`<div class=${this.rootClass("baht-heatmap")}>${this.renderEmpty()}</div>`;
-    const h = new Map(o.values.map((l) => [l.date.slice(0, 10), l.value])), a = [], r = new Date(e.start), n = (e.start.getUTCDay() + 6) % 7;
+    const t = this.hold({ values: this.values ?? [], range: this.range }), a = t.range;
+    if (!a || t.values.length === 0)
+      return u`<div class=${this.rootClass("baht-heatmap")}>${this.renderEmpty()}</div>`;
+    const r = new Map(t.values.map((l) => [l.date.slice(0, 10), l.value])), e = [], n = new Date(a.start), i = (a.start.getUTCDay() + 6) % 7;
     let s = 0;
-    for (; +r <= +e.end; ) {
-      const l = x(r), $ = (r.getUTCDay() + 6) % 7, d = Math.floor((n + s) / 7);
-      a.push({ iso: l, value: h.has(l) ? h.get(l) : null, weekday: $, week: d }), r.setUTCDate(r.getUTCDate() + 1), s += 1;
+    for (; +n <= +a.end; ) {
+      const l = L(n), v = (n.getUTCDay() + 6) % 7, f = Math.floor((i + s) / 7);
+      e.push({ iso: l, value: r.has(l) ? r.get(l) : null, weekday: v, week: f }), n.setUTCDate(n.getUTCDate() + 1), s += 1;
     }
-    const t = Math.max(1, ...a.map((l) => l.value ?? 0)), u = (l) => Math.min(4, Math.max(0, Math.ceil(l / t * 5) - 1)), i = a.reduce((l, $) => l + ($.value ?? 0), 0), b = this.label || `Calendar heatmap, ${a.length} days from ${x(e.start)} to ${x(e.end)}, total ${this.fmt(i)}`, f = x(/* @__PURE__ */ new Date()), T = this.showValues ? this.renderCalendar(a, u, f, b) : this.renderCompact(a, u, b);
-    return y`<div class=${this.rootClass("baht-heatmap")}>
-      ${T}
+    const h = Math.max(1, ...e.map((l) => l.value ?? 0)), o = (l) => Math.min(4, Math.max(0, Math.ceil(l / h * 5) - 1)), b = e.reduce((l, v) => l + (v.value ?? 0), 0), $ = this.label || `Calendar heatmap, ${e.length} days from ${L(a.start)} to ${L(a.end)}, total ${this.fmt(b)}`, d = V(), g = this.showValues ? this.renderCalendar(e, o, d, $) : this.renderCompact(e, o, $);
+    return u`<div class=${this.rootClass("baht-heatmap")}>
+      ${g}
       ${this.renderTooltip()}
       <div class="baht-heatmap-scale">
         <span class="baht-heatmap-scale-label">${this.lessLabel}</span>
         ${[0, 1, 2, 3, 4].map(
-      (l) => y`<span
+      (l) => u`<span
               class="baht-chart-swatch"
-              style=${`background:${D(l)}`}
+              style=${`background:${x(l)}`}
               aria-hidden="true"
             ></span>`
     )}
         <span class="baht-heatmap-scale-label">${this.moreLabel}</span>
       </div>
-      ${this.showTable ? P(
+      ${this.showTable ? A(
       this.label || "Calendar heatmap data",
       ["Date", "Value"],
-      a.map((l) => [l.iso, l.value == null ? "—" : this.fmt(l.value)])
-    ) : A}
+      e.map((l) => [l.iso, l.value == null ? "—" : this.fmt(l.value)])
+    ) : T}
     </div>`;
   }
   /** Compact GitHub-style layout: weeks as columns, weekdays as rows. */
-  renderCompact(o, e, h) {
-    const a = Math.max(1, ...o.map((s) => s.week + 1)), r = B + a * g, n = M + 7 * g + 4;
-    return y`<svg
+  renderCompact(t, a, r) {
+    const e = Math.max(1, ...t.map((s) => s.week + 1)), n = S + e * y, i = C + 7 * y + 4;
+    return u`<svg
       class="baht-chart-svg baht-heatmap-svg"
-      width=${r}
-      height=${n}
-      viewBox="0 0 ${r} ${n}"
+      width=${n}
+      height=${i}
+      viewBox="0 0 ${n} ${i}"
       preserveAspectRatio="xMinYMin meet"
       role="img"
-      aria-label=${h}
+      aria-label=${r}
     >
-      ${S.map(
-      (s, t) => t % 2 === 0 ? w`<text class="baht-chart-tick" x="0" y=${M + t * g + L / 2 + 4}>${s}</text>` : A
+      ${E.map(
+      (s, h) => h % 2 === 0 ? k`<text class="baht-chart-tick" x="0" y=${C + h * y + D / 2 + 4}>${s}</text>` : T
     )}
-      ${o.map((s) => {
-      const t = s.value == null ? `${s.iso}: no activity` : `${s.iso}: ${this.fmt(s.value)}`, u = s.value == null || s.value <= 0 ? "var(--baht-chart-grid)" : D(e(s.value));
-      return w`<rect class="baht-heatmap-cell" x=${B + s.week * g} y=${M + s.weekday * g}
-          width=${L} height=${L} rx="3" fill=${u} tabindex="0" role="button" aria-label=${t}
-          @pointermove=${(i) => this.showTip(i, t)}
+      ${t.map((s) => {
+      const h = s.value == null ? `${s.iso}: no activity` : `${s.iso}: ${this.fmt(s.value)}`, o = s.value == null || s.value <= 0 ? "var(--baht-chart-grid)" : x(a(s.value));
+      return k`<rect class="baht-heatmap-cell" x=${S + s.week * y} y=${C + s.weekday * y}
+          width=${D} height=${D} rx="3" fill=${o} tabindex="0" role="button" aria-label=${h}
+          @pointermove=${(b) => this.showTip(b, h)}
           @pointerleave=${() => this.hideTip()}
-          @focus=${(i) => this.showTip(i, t)}
+          @focus=${(b) => this.showTip(b, h)}
           @blur=${() => this.hideTip()}/>`;
     })}
     </svg>`;
   }
-  /** `show-values` layout: weeks as rows, weekdays as columns, day number + value in each cell. */
-  renderCalendar(o, e, h, a) {
-    const r = Math.max(1, ...o.map((t) => t.week + 1)), n = 7 * v, s = k + r * v;
-    return y`<svg
-      class="baht-chart-svg baht-heatmap-svg baht-heatmap-svg--calendar"
-      width=${n}
-      height=${s}
-      viewBox="0 0 ${n} ${s}"
-      preserveAspectRatio="xMinYMin meet"
-      role="img"
-      aria-label=${a}
-    >
-      ${S.map(
-      (t, u) => w`<text class="baht-chart-tick baht-heatmap-weekday" x=${u * v + v / 2} y=${k - 4} text-anchor="middle">${t}</text>`
-    )}
-      ${o.map((t) => {
-      const u = t.iso === h, i = t.value == null || t.value <= 0, b = i ? null : e(t.value), f = i ? "var(--baht-color-surface)" : D(b), T = b != null && b <= 1, l = t.weekday * v, $ = k + t.week * v, d = t.value == null ? `${t.iso}: no activity` : `${t.iso}: ${this.fmt(t.value)}`, U = +t.iso.slice(8, 10), z = i ? this.zeroLabel : this.fmt(t.value);
-      return w`<g
-          class="baht-heatmap-day${u ? " baht-heatmap-day--today" : ""}${i ? " baht-heatmap-day--zero" : ""}${T ? " baht-heatmap-day--dark" : ""}"
-          tabindex="0" role="button" aria-label=${d}
-          @pointermove=${(C) => this.showTip(C, d)}
+  /**
+   * `show-values` layout: an HTML month grid — weeks as rows, weekdays as
+   * columns, the day number and value printed in each cell. Buttons give
+   * every day focus and a role for free; the tooltip rides on focus/hover.
+   */
+  renderCalendar(t, a, r, e) {
+    var h;
+    const n = ((h = t[0]) == null ? void 0 : h.weekday) ?? 0, i = t.length ? 6 - t[t.length - 1].weekday : 0, s = (o) => Array.from(
+      { length: o },
+      () => u`<span class="baht-heatmap-day baht-heatmap-day--pad" aria-hidden="true"></span>`
+    );
+    return u`<div class="baht-heatmap-cal" role="group" aria-label=${e}>
+      ${E.map((o) => u`<span class="baht-heatmap-weekday" aria-hidden="true">${o}</span>`)}
+      ${s(n)}
+      ${t.map((o) => {
+      const b = o.iso === r, $ = o.value == null || o.value <= 0, d = $ ? null : a(o.value), g = d != null && d >= 3, l = o.value == null ? `${o.iso}: no activity` : `${o.iso}: ${this.fmt(o.value)}`, v = +o.iso.slice(8, 10), f = $ ? this.zeroLabel : this.fmt(o.value), B = `baht-heatmap-day${b ? " baht-heatmap-day--today" : ""}${$ ? " baht-heatmap-day--zero" : ""}${g ? " baht-heatmap-day--dark" : ""}`, U = d == null ? "" : `--baht-heatmap-fill:${x(d)}`;
+      return u`<button
+          type="button"
+          class=${B}
+          style=${U || T}
+          aria-label=${l}
+          @pointermove=${(w) => this.showTip(w, l)}
           @pointerleave=${() => this.hideTip()}
-          @focus=${(C) => this.showTip(C, d)}
+          @focus=${(w) => this.showTip(w, l)}
           @blur=${() => this.hideTip()}
         >
-          <rect class="baht-heatmap-day-cell" x=${l + 2} y=${$ + 2} width=${_} height=${_} rx="7" fill=${f}/>
-          <text class="baht-heatmap-day-num" x=${l + 8} y=${$ + 16}>${U}</text>
-          <text class="baht-heatmap-day-value" x=${l + 8} y=${$ + 33}>${z}</text>
-        </g>`;
+          <span class="baht-heatmap-day-num">${v}</span>
+          <span class="baht-heatmap-day-value">${f}</span>
+        </button>`;
     })}
-    </svg>`;
+      ${s(i)}
+    </div>`;
   }
 };
-p([
+c([
   m({ attribute: !1 })
-], c.prototype, "values", 2);
-p([
+], p.prototype, "values", 2);
+c([
   m()
-], c.prototype, "from", 2);
-p([
+], p.prototype, "from", 2);
+c([
   m()
-], c.prototype, "to", 2);
-p([
+], p.prototype, "to", 2);
+c([
   m({ attribute: "less-label" })
-], c.prototype, "lessLabel", 2);
-p([
+], p.prototype, "lessLabel", 2);
+c([
   m({ attribute: "more-label" })
-], c.prototype, "moreLabel", 2);
-p([
+], p.prototype, "moreLabel", 2);
+c([
   m({ attribute: "zero-label" })
-], c.prototype, "zeroLabel", 2);
-p([
+], p.prototype, "zeroLabel", 2);
+c([
   m({ type: Boolean, attribute: "show-values" })
-], c.prototype, "showValues", 2);
-p([
+], p.prototype, "showValues", 2);
+c([
   m()
-], c.prototype, "label", 2);
-c = p([
-  O("baht-heatmap")
-], c);
+], p.prototype, "label", 2);
+p = c([
+  _("baht-heatmap")
+], p);
 export {
-  c as BahtHeatmap
+  p as BahtHeatmap
 };

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

@@ -1,6 +1,15 @@
 import { TemplateResult } from 'lit';
 import { BahtElement } from '../base.js';
 export type CellRenderer = (value: unknown, row: Record<string, unknown>) => unknown;
+/** Group key for `groupBy`: a (dotted) row key, or a function of the row. */
+export type GroupKey = string | ((row: Record<string, unknown>) => unknown);
+/** Group header content: the group's value plus the rows in that group. */
+export type GroupLabelRenderer = (value: unknown, rows: Record<string, unknown>[]) => unknown;
+/** `baht-group-toggle` detail: which group and whether it is now collapsed. */
+export type GroupToggleDetail = {
+    value: unknown;
+    collapsed: boolean;
+};
 export type ColumnAlign = 'start' | 'center' | 'end';
 /**
  * One column: a plain label, or a spec. A spec may carry `fields` (a
@@ -85,6 +94,25 @@ export type ColumnsChangeDetail = {
  *   t.sort = { key: 'amount', direction: 'desc' };
  *   t.addEventListener('baht-sort-change', (e) => refetch({ sort: e.detail }));
  *   t.rowActions = true;                // trailing "..." button -> baht-row-actions { row, index, id }
+ *
+ * Grouping (ServiceNow "Group by" on a list): `group-by` names a (dotted)
+ * row key, or pass a function as the property. Every row on the CURRENT page
+ * is bucketed by that value in first-appearance order; each bucket is its own
+ * `<tbody>` headed by a `th[scope=rowgroup]` disclosure reading
+ * "Column: value (n)". Click the header to collapse/expand the group
+ * (`baht-group-toggle`); `group-collapsed` starts them all closed, and the
+ * open/closed state resets when `items`/`page` change. Grouping is per page
+ * only — it rides on the existing pagination and never fetches or sorts, so
+ * a value split across pages shows up on each. `groupLabel` replaces the
+ * default header text (it still sits inside the toggle). Row numbers and
+ * event indexes stay page-global. `hide-header` drops the column header row
+ * for list-style layouts.
+ *
+ *   t.groupBy = 'state';                 // "State: Open (12)"
+ *   t.groupBy = (row) => row.occurred_at.slice(0, 10);
+ *   t.groupLabel = (day, rows) => `${formatDay(day)} · ${rows.length}`;
+ *   t.groupCollapsed = true;
+ *   t.addEventListener('baht-group-toggle', (e) => console.log(e.detail)); // { value, collapsed }
  */
 export declare class BahtTable extends BahtElement {
     /** Rows of the CURRENT page. */
@@ -107,6 +135,16 @@ export declare class BahtTable extends BahtElement {
     renderers: Record<string, CellRenderer>;
     /** Subset + order of columns to render (dotted keys allowed); empty/omitted = show all top-level columns. */
     visibleColumns: string[];
+    /** Group the page's rows by this (dotted) column key — or a function of the row (property). Unset = no grouping. */
+    groupBy?: GroupKey;
+    /** Group header content (property); default is "Column: value (n)". */
+    groupLabel?: GroupLabelRenderer;
+    /** Group headers are disclosures (click to collapse). Set the JS property to `false` for static headers. */
+    groupCollapsible: boolean;
+    /** Start every group collapsed (per page — resets when `items`/`page` change). */
+    groupCollapsed: boolean;
+    /** Drop the column header row (list-style tables, e.g. grouped ledgers). */
+    hideHeader: boolean;
     /** Built-in "Columns" toggle — derives its options from `columns`/rows. Set `column-picker="false"` to hide it. */
     columnPicker: boolean;
     /** Total matching rows across all pages — renders "{n} results" in the toolbar. Unset = no count. */
@@ -136,6 +174,8 @@ export declare class BahtTable extends BahtElement {
     private pickSel;
     /** Reference columns unfolded in the Available tree (dot-walk). */
     private expanded;
+    /** Group keys the person toggled away from `groupCollapsed`; reset on a new page. */
+    private toggledGroups;
     /** Element focused before the picker opened — focus returns there on close. */
     private pickerPreviousFocus;
     private readonly onPickerKeydown;
@@ -183,7 +223,23 @@ export declare class BahtTable extends BahtElement {
     /** Alignment class for a column (explicit `align` beats `numeric`). */
     private alignClass;
     private cell;
+    private span;
+    private groupValue;
+    /** Stable identity of a group value for the collapsed set (objects by JSON, else by type+string). */
+    private static groupId;
+    /**
+     * The page's rows bucketed by group value, in first-appearance order. Each
+     * row keeps its page index so numbering and event indexes stay host-order.
+     */
+    private get groups();
+    private get isGrouped();
+    private isCollapsed;
+    private toggleGroup;
+    /** Default header: "Column: value (n)" — no column prefix for a function key. */
+    private defaultGroupLabel;
+    private renderGroups;
     private renderBody;
+    private renderRow;
     private renderHeaderCell;
     private get hasToolbar();
     private renderToolbar;
@@ -196,4 +252,6 @@ export declare class BahtTable extends BahtElement {
     private renderAvailRow;
     private renderColumnModal;
     protected render(): TemplateResult;
+    private renderHead;
+    private renderFooter;
 }