bank20baht-ui 0.4.0 → 0.4.2

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

@@ -24,6 +24,8 @@ export declare class BahtBarChart extends BahtChartBase {
     stacked: boolean;
     /** Previous-period values, drawn as a muted bar under each current bar. */
     compare: number[];
+    /** Names the muted `compare` bar in the key and the table twin. */
+    compareLabel: string;
     /** Budget / target lines drawn over the bars. */
     markers: ChartMarker[];
     /** `ends` prints the value at the bar tip; `none` leaves it to the tooltip. */
@@ -34,6 +36,21 @@ export declare class BahtBarChart extends BahtChartBase {
     color: string;
     /** Accessible summary used by the vertical (graphics-only) rendering. */
     label: string;
+    /**
+     * Measured px per category for the vertical rendering; `0` until the host has
+     * been measured, where the CSS flex fallback (`flex: 1 1 0; min-width: 0`)
+     * already keeps the columns inside the host. Measuring lets the element also
+     * thin the x labels and shrink the bars below the 24px cap, so 31 days fit a
+     * 400px card instead of spilling out of it.
+     */
+    private band;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    /** Host width → px per category. Never runs on the server (`hasDom` guard). */
+    private measure;
+    private get columnCount();
     /** The series actually drawn — `groups` is normalised into one series. */
     private get model();
     private colorFor;
@@ -43,7 +60,22 @@ export declare class BahtBarChart extends BahtChartBase {
     private tableTwin;
     /** Markers with no `category` span the chart; the rest ride their own row. */
     private markersFor;
+    /** Markers that apply to every row / column. */
+    private get chartMarkers();
+    /** What a marker reads as: its own label, else its formatted value. */
+    private markerText;
+    /**
+     * Marker lines, positioned along the value axis. The label is drawn separately
+     * (`markerLabels`) as real text — a `title` attribute alone never reaches AT.
+     */
     private markerOverlay;
+    /**
+     * Marker labels, sorted along the axis and thinned so neighbours never collide:
+     * a dropped label keeps its line, and its value still reads in the table twin.
+     */
+    private placedMarkers;
+    /** Legend rows: one per series, plus the muted `compare` key when it is set. */
+    private legendEntries;
     private renderHorizontal;
     private renderVertical;
 }

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

@@ -31,10 +31,17 @@ export declare class BahtMeter extends BahtElement {
     expected: number | null;
     /** Word shown after the numbers when the meter is over budget. */
     overLabel: string;
+    /** Word shown when the value has reached the budget exactly, but not passed it. */
+    atLabel: string;
     /** Word shown after the numbers when the meter is near its limit. */
     nearLabel: string;
     private get fraction();
-    /** `ok` | `warning` | `danger`, from the fraction and the thresholds. */
+    /**
+     * `ok` | `warning` | `danger`, from the fraction and the thresholds. `danger` is
+     * strictly **above** its threshold: spending exactly the budget is not
+     * overspending, so it reads as the warning tone with an "At budget" status.
+     * `warning` stays inclusive (`>=`).
+     */
     private get severity();
     private get statusText();
     protected render(): TemplateResult;

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

@@ -30,7 +30,10 @@ export declare class BahtStat extends BahtElement {
     delta: number | null;
     /** Whether `delta` is a percentage or an absolute amount. */
     deltaKind: 'abs' | 'pct';
-    /** What the delta is measured against, e.g. "vs August". */
+    /**
+     * What the delta is measured against, e.g. "vs August". With no `delta` it is
+     * still rendered on its own as a muted caption, so a figure can name its period.
+     */
     deltaLabel: string;
     /** Is a rise good news? Spending tiles set `up-is-good="false"`. */
     upIsGood: boolean;

package/dist/custom-elements.json

@@ -2087,6 +2087,16 @@
               "default": "[]",
               "description": "Previous-period values, drawn as a muted bar under each current bar."
             },
+            {
+              "kind": "field",
+              "name": "compareLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Previous period'",
+              "description": "Names the muted `compare` bar in the key and the table twin.",
+              "attribute": "compare-label"
+            },
             {
               "kind": "field",
               "name": "markers",
@@ -2136,6 +2146,44 @@
               "description": "Accessible summary used by the vertical (graphics-only) rendering.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "band",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Measured px per category for the vertical rendering; `0` until the host has\nbeen measured, where the CSS flex fallback (`flex: 1 1 0; min-width: 0`)\nalready keeps the columns inside the host. Measuring lets the element also\nthin the x labels and shrink the bars below the 24px cap, so 31 days fit a\n400px card instead of spilling out of it."
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "measure",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Host width → px per category. Never runs on the server (`hasDom` guard)."
+            },
+            {
+              "kind": "field",
+              "name": "columnCount",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "model",
@@ -2256,6 +2304,35 @@
               ],
               "description": "Markers with no `category` span the chart; the rest ride their own row."
             },
+            {
+              "kind": "field",
+              "name": "chartMarkers",
+              "type": {
+                "text": "ChartMarker[]"
+              },
+              "privacy": "private",
+              "description": "Markers that apply to every row / column.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "markerText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "m",
+                  "type": {
+                    "text": "ChartMarker"
+                  }
+                }
+              ],
+              "description": "What a marker reads as: its own label, else its formatted value."
+            },
             {
               "kind": "method",
               "name": "markerOverlay",
@@ -2278,7 +2355,46 @@
                     "text": "string"
                   }
                 }
-              ]
+              ],
+              "description": "Marker lines, positioned along the value axis. The label is drawn separately\n(`markerLabels`) as real text — a `title` attribute alone never reaches AT."
+            },
+            {
+              "kind": "method",
+              "name": "placedMarkers",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ m: ChartMarker; pct: number }[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "max",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Marker labels, sorted along the axis and thinned so neighbours never collide:\na dropped label keeps its line, and its value still reads in the table twin."
+            },
+            {
+              "kind": "method",
+              "name": "legendEntries",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ label: string; color: string }[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "series",
+                  "type": {
+                    "text": "ChartSeries[]"
+                  }
+                }
+              ],
+              "description": "Legend rows: one per series, plus the muted `compare` key when it is set."
             },
             {
               "kind": "method",
@@ -2619,6 +2735,15 @@
               "description": "Stack the series inside one band instead of grouping them side by side.",
               "fieldName": "stacked"
             },
+            {
+              "name": "compare-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Previous period'",
+              "description": "Names the muted `compare` bar in the key and the table twin.",
+              "fieldName": "compareLabel"
+            },
             {
               "name": "label-values",
               "type": {
@@ -8181,6 +8306,16 @@
               "description": "Word shown after the numbers when the meter is over budget.",
               "attribute": "over-label"
             },
+            {
+              "kind": "field",
+              "name": "atLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'At budget'",
+              "description": "Word shown when the value has reached the budget exactly, but not passed it.",
+              "attribute": "at-label"
+            },
             {
               "kind": "field",
               "name": "nearLabel",
@@ -8207,7 +8342,7 @@
                 "text": "'ok' | 'warning' | 'danger'"
               },
               "privacy": "private",
-              "description": "`ok` | `warning` | `danger`, from the fraction and the thresholds.",
+              "description": "`ok` | `warning` | `danger`, from the fraction and the thresholds. `danger` is\nstrictly **above** its threshold: spending exactly the budget is not\noverspending, so it reads as the warning tone with an \"At budget\" status.\n`warning` stays inclusive (`>=`).",
               "readonly": true
             },
             {
@@ -8298,6 +8433,15 @@
               "description": "Word shown after the numbers when the meter is over budget.",
               "fieldName": "overLabel"
             },
+            {
+              "name": "at-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'At budget'",
+              "description": "Word shown when the value has reached the budget exactly, but not passed it.",
+              "fieldName": "atLabel"
+            },
             {
               "name": "near-label",
               "type": {
@@ -13456,7 +13600,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "What the delta is measured against, e.g. \"vs August\".",
+              "description": "What the delta is measured against, e.g. \"vs August\". With no `delta` it is\nstill rendered on its own as a muted caption, so a figure can name its period.",
               "attribute": "delta-label"
             },
             {
@@ -13593,7 +13737,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "What the delta is measured against, e.g. \"vs August\".",
+              "description": "What the delta is measured against, e.g. \"vs August\". With no `delta` it is\nstill rendered on its own as a muted caption, so a figure can name its period.",
               "fieldName": "deltaLabel"
             },
             {

package/dist/index.js

@@ -2,7 +2,7 @@ import { a as s, b as e, d as h, c as r, e as B, f as o, g as l, h as i, i as n,
 import { g as T, s as b, a as k, t as x } from "./chunks/i18n-BcPL9_Jh.js";
 import { LEGACY_KEY_MAP as F, normalizeLegacySchema as v } from "./engine.js";
 import { B as R, a as y, b as L, i as A, r as P } from "./chunks/baht-toast-CD1WrOYr.js";
-import { B as I, a as M, b as V, c as _, d as N, e as O, f as Y, g as G, h as H, i as K, j, k as q, l as z, m as U, n as W, o as J, p as Q, q as X, r as Z, s as $, t as aa, u as ta, v as sa, w as ea, x as ha, y as ra, z as Ba, A as oa, C as la, D as ia, E as na, F as da, G as pa, H as ca, I as ma, J as Sa, K as ga, L as fa, M as Ca, N as ua, O as Ta, P as ba, Q as ka, R as xa, S as Ea, T as Fa, U as va, V as Da, W as Ra, X as ya, Y as La, Z as Aa, _ as Pa, $ as wa, a0 as Ia, a1 as Ma, a2 as Va, a3 as _a, a4 as Na } from "./chunks/baht-workflow-h9pLnwlk.js";
+import { B as I, a as M, b as V, c as _, d as N, e as O, f as Y, g as G, h as H, i as K, j, k as q, l as z, m as U, n as W, o as J, p as Q, q as X, r as Z, s as $, t as aa, u as ta, v as sa, w as ea, x as ha, y as ra, z as Ba, A as oa, C as la, D as ia, E as na, F as da, G as pa, H as ca, I as ma, J as Sa, K as ga, L as fa, M as Ca, N as ua, O as Ta, P as ba, Q as ka, R as xa, S as Ea, T as Fa, U as va, V as Da, W as Ra, X as ya, Y as La, Z as Aa, _ as Pa, $ as wa, a0 as Ia, a1 as Ma, a2 as Va, a3 as _a, a4 as Na } from "./chunks/baht-workflow-Dy8HZQ_f.js";
 import { B as Ya, a as Ga, S as Ha, b as Ka, h as ja, c as qa } from "./chunks/base-CajA2aCO.js";
 export {
   I as BahtAccordion,

package/dist/react.d.ts

@@ -274,6 +274,7 @@ declare module 'react' {
                 expected?: number | null;
                 'over-label'?: string;
                 'near-label'?: string;
+                'at-label'?: string;
             }>;
             'baht-empty-state': WC<{
                 icon?: string;

package/dist/ssr.js

@@ -1,7 +1,7 @@
 import { render as d } from "@lit-labs/ssr";
 import { collectResult as u } from "@lit-labs/ssr/lib/render-result.js";
 import "./chunks/baht-toast-CD1WrOYr.js";
-import "./chunks/baht-workflow-h9pLnwlk.js";
+import "./chunks/baht-workflow-Dy8HZQ_f.js";
 import "./chunks/base-CajA2aCO.js";
 const c = /<template shadowroot="(?:open|closed)" shadowrootmode="(?:open|closed)"[^>]*>|<template\b[^>]*>|<\/template>/g, x = (e) => e.startsWith("baht-");
 function f(e, i = x) {

package/dist/tokens.css

@@ -2643,7 +2643,9 @@ code.baht-code {
   display: flex;
   align-items: center;
   border-radius: var(--baht-radius-sm);
-  background: var(--baht-color-bg-sunken);
+  /* one step lighter than bg-sunken in both themes, so the muted `compare` bar
+     never disappears into the empty track at small values */
+  background: color-mix(in oklab, var(--baht-color-bg-sunken) 55%, var(--baht-color-surface));
 }
 .baht-bar-chart-bars {
   display: flex;
@@ -2685,6 +2687,44 @@ code.baht-code {
   width: auto;
   height: 1px;
 }
+/* The strip of marker labels above the rows (horizontal orientation). */
+.baht-bar-chart-row--markers {
+  align-items: flex-end;
+  min-height: 1.1rem;
+}
+.baht-bar-chart-markbar {
+  position: relative;
+  flex: 1;
+  height: 1.1rem;
+}
+.baht-bar-chart-marker-label {
+  position: absolute;
+  bottom: 0;
+  white-space: nowrap;
+  font-size: var(--baht-text-xs);
+  color: var(--baht-color-text-muted);
+  line-height: 1.1rem;
+}
+.baht-bar-chart-marker-label::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 1px;
+  margin-right: 4px;
+  vertical-align: middle;
+  background: var(--baht-color-text-muted);
+}
+.baht-bar-chart-marker-label--end {
+  right: 0;
+  bottom: 0;
+  transform: translateY(-2px);
+  /* over the columns, which are painted later in the DOM, and on the surface so
+     a bar behind it never runs through the text */
+  z-index: 2;
+  background: var(--baht-chart-surface);
+  padding: 0 2px 0 4px;
+  border-radius: var(--baht-radius-xs);
+}
 .baht-bar-chart-count {
   min-width: 2.5rem;
   font-size: var(--baht-text-sm);
@@ -2700,6 +2740,17 @@ code.baht-code {
 .baht-bar-chart-plot {
   display: flex;
   gap: var(--baht-space-2);
+  max-width: 100%;
+  /* the top tick label is shifted up half a line — pad so `overflow: hidden`
+     (which keeps the columns inside the host) never crops it */
+  padding-top: 8px;
+  overflow: hidden;
+}
+.baht-bar-chart-yaxis {
+  flex: 0 0 auto;
+}
+.baht-bar-chart-grid {
+  min-width: 0;
 }
 .baht-bar-chart-yaxis {
   display: flex;
@@ -2733,17 +2784,21 @@ code.baht-code {
   inset: 0;
   display: flex;
   align-items: flex-end;
-  justify-content: space-around;
+  justify-content: space-between;
   gap: 2px;
 }
 .baht-bar-chart-column {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   height: 100%;
-  flex: 1;
-  min-width: 24px; /* hit target */
+  /* share the plot evenly and shrink below the content width: 31 columns fit a
+     400px card instead of spilling past it. The element writes an exact width
+     once it has measured the host. */
+  flex: 1 1 0;
+  min-width: 0;
   cursor: default;
 }
 .baht-bar-chart-column-bars {
@@ -2757,6 +2812,8 @@ code.baht-code {
 .baht-bar-chart-col {
   border-radius: 4px 4px 0 0;
   max-width: 24px;
+  min-width: 0;
+  flex: 0 1 auto;
 }
 .baht-bar-chart-col--compare {
   background: var(--baht-chart-muted);
@@ -2764,9 +2821,12 @@ code.baht-code {
 .baht-bar-chart-xlabel {
   position: absolute;
   bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
   font-size: var(--baht-text-xs);
   color: var(--baht-color-text-subtle);
   white-space: nowrap;
+  pointer-events: none;
 }
 .baht-bar-chart--vertical .baht-bar-chart-plot {
   padding-bottom: 22px;
@@ -2899,6 +2959,11 @@ code.baht-code {
 
 /* ---------- Sparkline ---------- */
 
+baht-sparkline {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 0;
+}
 .baht-sparkline {
   display: block;
   overflow: visible;
@@ -2951,9 +3016,13 @@ code.baht-code {
 .baht-stat-delta--flat {
   color: var(--baht-color-text-subtle);
 }
-.baht-stat-delta-label {
+.baht-stat-delta-label,
+.baht-stat-caption {
   color: var(--baht-color-text-subtle);
 }
+.baht-stat-caption {
+  font-size: var(--baht-text-sm);
+}
 .baht-stat-trend {
   margin-top: var(--baht-space-1);
 }

package/dist/vscode.html-custom-data.json

@@ -100,6 +100,11 @@
           "description": "Stack the series inside one band instead of grouping them side by side.",
           "values": []
         },
+        {
+          "name": "compare-label",
+          "description": "Names the muted `compare` bar in the key and the table twin.",
+          "values": []
+        },
         {
           "name": "label-values",
           "description": "`ends` prints the value at the bar tip; `none` leaves it to the tooltip.",
@@ -584,6 +589,11 @@
           "description": "Word shown after the numbers when the meter is over budget.",
           "values": []
         },
+        {
+          "name": "at-label",
+          "description": "Word shown when the value has reached the budget exactly, but not passed it.",
+          "values": []
+        },
         {
           "name": "near-label",
           "description": "Word shown after the numbers when the meter is near its limit.",
@@ -958,7 +968,7 @@
         },
         {
           "name": "delta-label",
-          "description": "What the delta is measured against, e.g. \"vs August\".",
+          "description": "What the delta is measured against, e.g. \"vs August\". With no `delta` it is\nstill rendered on its own as a muted caption, so a figure can name its period.",
           "values": []
         },
         {

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.4.0",
+  "version": "0.4.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -237,6 +237,11 @@
               "description": "Stack the series inside one band instead of grouping them side by side.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "compare-label",
+              "description": "Names the muted `compare` bar in the key and the table twin.",
+              "value": { "type": "string", "default": "'Previous period'" }
+            },
             {
               "name": "label-values",
               "description": "`ends` prints the value at the bar tip; `none` leaves it to the tooltip.",
@@ -317,6 +322,11 @@
                 "description": "Previous-period values, drawn as a muted bar under each current bar.",
                 "type": "number[]"
               },
+              {
+                "name": "compareLabel",
+                "description": "Names the muted `compare` bar in the key and the table twin.",
+                "type": "string"
+              },
               {
                 "name": "markers",
                 "description": "Budget / target lines drawn over the bars.",
@@ -1335,6 +1345,11 @@
               "description": "Word shown after the numbers when the meter is over budget.",
               "value": { "type": "string", "default": "'Over budget'" }
             },
+            {
+              "name": "at-label",
+              "description": "Word shown when the value has reached the budget exactly, but not passed it.",
+              "value": { "type": "string", "default": "'At budget'" }
+            },
             {
               "name": "near-label",
               "description": "Word shown after the numbers when the meter is near its limit.",
@@ -1385,6 +1400,11 @@
                 "description": "Word shown after the numbers when the meter is over budget.",
                 "type": "string"
               },
+              {
+                "name": "atLabel",
+                "description": "Word shown when the value has reached the budget exactly, but not passed it.",
+                "type": "string"
+              },
               {
                 "name": "nearLabel",
                 "description": "Word shown after the numbers when the meter is near its limit.",
@@ -2176,7 +2196,7 @@
             },
             {
               "name": "delta-label",
-              "description": "What the delta is measured against, e.g. \"vs August\".",
+              "description": "What the delta is measured against, e.g. \"vs August\". With no `delta` it is\nstill rendered on its own as a muted caption, so a figure can name its period.",
               "value": { "type": "string", "default": "''" }
             },
             {
@@ -2231,7 +2251,7 @@
               },
               {
                 "name": "deltaLabel",
-                "description": "What the delta is measured against, e.g. \"vs August\".",
+                "description": "What the delta is measured against, e.g. \"vs August\". With no `delta` it is\nstill rendered on its own as a muted caption, so a figure can name its period.",
                 "type": "string"
               },
               {

package/package.json

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