@grafloria/element 0.4.2 → 0.4.4

package/src/lib/dashboard-kit/styles.js

@@ -28,6 +28,18 @@ const CSS = `
               width .28s cubic-bezier(.2, 0, .2, 1), height .28s cubic-bezier(.2, 0, .2, 1);
 }
 
+/* Motion is a preference (WCAG 2.3.3): no glide for those who asked for none. */
+@media (prefers-reduced-motion: reduce) {
+  .grafloria-html-layer.axdb-glide > .grafloria-node-host { transition: none; }
+}
+
+/* ===== keyboard focus: the roving tab stop shows where it is (WCAG 2.4.7) ===== */
+.grafloria-html-layer > .grafloria-node-host:focus-visible {
+  outline: 2px solid #3b52d9;
+  outline-offset: 2px;
+  border-radius: var(--axdb-rs-radius, 6px);
+}
+
 /* ===== the held tile: transition-exempt ghost, above everything ===== */
 .grafloria-html-layer > .grafloria-node-host.axdb-ghost,
 .grafloria-html-layer.axdb-glide > .grafloria-node-host.axdb-ghost {
@@ -43,7 +55,7 @@ const CSS = `
 /* ===== the placeholder: dashed slab, truthful, never animated ===== */
 .grafloria-html-layer > .axdb-ph {
   position: absolute;
-  border-radius: var(--axdb-rs-radius, 12px);
+  border-radius: var(--axdb-rs-radius, 6px);
   background: rgba(30, 34, 45, .14);
   border: 2px dashed rgba(30, 34, 45, .28);
   box-sizing: border-box;
@@ -60,17 +72,20 @@ const CSS = `
   position: absolute;
   right: 0;
   bottom: 0;
-  width: 18px;
-  height: 18px;
+  width: 24px;   /* WCAG 2.5.8: a 24-px minimum target (was 18) */
+  height: 24px;
   cursor: nwse-resize;
   border-right: 3px solid rgba(120, 130, 148, .55);
   border-bottom: 3px solid rgba(120, 130, 148, .55);
-  border-bottom-right-radius: var(--axdb-rs-radius, 12px);
+  border-bottom-right-radius: var(--axdb-rs-radius, 6px);
   opacity: 0;
   transition: opacity .12s;
   z-index: 5;
 }
 .grafloria-node-host:hover > .axdb-rs { opacity: 1; }
+/* A finger never hovers: on touch devices the corner handle is always visible
+   (review D8 — hover-only meant no resize at all on a tablet). */
+@media (hover: none) { .grafloria-node-host > .axdb-rs { opacity: .8; } }
 .grafloria-node-host > .axdb-rs:hover { border-color: #3b52d9; }
 /* RTL boards grow leftwards, so the grab corner mirrors with them. */
 .grafloria-node-host > .axdb-rs.axdb-rs--rtl {
@@ -80,7 +95,7 @@ const CSS = `
   border-right: none;
   border-left: 3px solid rgba(120, 130, 148, .55);
   border-bottom-right-radius: 0;
-  border-bottom-left-radius: var(--axdb-rs-radius, 12px);
+  border-bottom-left-radius: var(--axdb-rs-radius, 6px);
 }
 
 /* ===== palette drag-in chip (screen-space clone following the cursor) ===== */
@@ -90,7 +105,12 @@ const CSS = `
   pointer-events: none;
   opacity: .9;
   filter: drop-shadow(0 8px 14px rgba(16, 24, 40, .3));
+  transition: opacity .12s, filter .12s;
 }
+/* A bounded board with no room refuses the entry: the chip dims to say so
+   (the same signal a tile ghost gives outside the board). Without this rule
+   the class was set and nothing showed — a refusal a user could not see. */
+.axdb-drag-chip.axdb-out { opacity: .35; filter: grayscale(.7) drop-shadow(0 8px 14px rgba(16, 24, 40, .2)); }
 
 /* ===========================================================================
    BUILT-IN WIDGET CARDS — what widgets.ts paints when a page writes no
@@ -102,11 +122,19 @@ const CSS = `
    =========================================================================== */
 .axdb-widget {
   --axdb-ink: #1f2430;
-  --axdb-muted: #7a8496;
+  /* 5.95:1 on the card — WCAG 1.4.3 for the 9–11px captions this paints
+     (the #7a8496 it replaced sat at 3.77:1, axe-core's first finding). */
+  --axdb-muted: #5a6478;
   --axdb-grid: rgba(120, 130, 148, .22);
   --axdb-card: #fff;
   --axdb-line: #e7eaf1;
   --axdb-soft: rgba(120, 130, 148, .14);
+  --axdb-up: #0f7a3d;     /* 5.42:1 */
+  --axdb-down: #be123c;   /* 6.29:1 */
+  /* The categorical palette, as tokens so the dark card can carry its own
+     steps: every entry clears 3:1 against its card (WCAG 1.4.11). */
+  --axdb-c1: #3b52d9; --axdb-c2: #0369a1; --axdb-c3: #0f766e;
+  --axdb-c4: #b45309; --axdb-c5: #6d28d9; --axdb-c6: #475569;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -116,11 +144,29 @@ const CSS = `
   padding: 13px 15px 12px;
   background: var(--axdb-card);
   border: 1px solid var(--axdb-line);
-  border-radius: var(--axdb-rs-radius, 12px);
+  border-radius: var(--axdb-rs-radius, 6px);
   box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
   font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
   color: var(--axdb-ink);
 }
+/* The host is the card's size container (named, so a widget's inner parts can
+   ask the TILE's size as well as their own body's), so the card can shed its
+   padding as the tile gets short instead of clipping its own content. */
+.grafloria-html-layer > .grafloria-node-host { container: axdb-tile / size; }
+/* Two class hops on the header: these blocks precede the header's own rule
+   below and would lose the cascade at equal specificity — at 54 px the margin
+   stayed 8 px, the body shrank to 14 px and the KPI figure hid. */
+@container axdb-tile (max-height: 90px) {
+  .axdb-widget { padding: 8px 14px 7px; }
+  .axdb-widget > .axdb-widget-h { margin-bottom: 4px; }
+}
+@container axdb-tile (max-height: 46px) {
+  .axdb-widget { padding: 4px 12px 3px; }
+  .axdb-widget > .axdb-widget-h { margin-bottom: 0; }
+}
+@container axdb-tile (max-height: 26px) {
+  .axdb-widget { padding: 2px 12px 1px; }
+}
 .axdb-widget-h {
   display: flex;
   align-items: center;
@@ -138,9 +184,15 @@ const CSS = `
    own (without this the 100%-tall svg pushes the legend out of the card). */
 .axdb-widget-b.axdb-has-lg { display: flex; flex-direction: column; }
 .axdb-widget-b.axdb-has-lg > svg { flex: 1; height: auto; min-height: 0; }
+/* The data behind a chart, for readers that cannot see the chart: present in
+   the accessibility tree, absent from the picture (WCAG 1.1.1). */
+.axdb-sr {
+  position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
+  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
+}
 .axdb-widget-empty {
   display: flex; align-items: center; justify-content: center; height: 100%;
-  font: 500 11.5px/1.3 system-ui, sans-serif; color: var(--axdb-muted); opacity: .75;
+  font: 500 11.5px/1.3 system-ui, sans-serif; color: var(--axdb-muted);
 }
 
 /* kpi: value + delta stack, the spark yields its height before they do */
@@ -150,17 +202,73 @@ const CSS = `
    sliced mid-glyph by the card's overflow — the audited "trimmed" widgets.
    cqh = 1% of the body's own height, clamped so full-size tiles look exactly
    as before and short tiles compress instead of cutting. */
-.axdb-widget-b.axdb-kpi { display: flex; flex-direction: column; container-type: size; }
-.axdb-kpi-v { font: 700 clamp(15px, 44cqh, 30px)/1.05 system-ui, sans-serif; letter-spacing: -.02em; color: var(--axdb-ink); }
-.axdb-kpi-d { margin-top: clamp(1px, 5cqh, 6px); font: 600 clamp(9px, 19cqh, 12px)/1.2 system-ui, sans-serif; }
+.axdb-widget-b.axdb-kpi { display: flex; flex-direction: column; container: axdb-kpi / size; }
+/* STEP DOWN, NEVER CLIP. As the body gets shorter the sparkline goes first, then the
+   delta, then the value — the header alone at the row floor. Before this a 99-px row
+   drew the sparkline as a 13-px sliver and a 28-px row cut the value mid-glyph (the
+   fluid board, after a drag pushed the KPI row down). Thresholds are body heights. */
+/* Two class hops, so these outrank ".axdb-widget-b > svg { display: block }" —
+   a bare .axdb-kpi-s lost that cascade and the sparkline stayed. */
+@container (max-height: 78px) { .axdb-kpi > .axdb-kpi-s { display: none; } }
+@container (max-height: 40px) { .axdb-kpi > .axdb-kpi-d { display: none; } }
+@container (max-height: 16px) { .axdb-kpi > .axdb-kpi-v { display: none; } }
+.axdb-kpi-v { font: 700 clamp(15px, 44cqh, 30px)/1.05 system-ui, sans-serif; letter-spacing: -.02em; color: var(--axdb-ink); white-space: nowrap; }
+.axdb-kpi-d { margin-top: clamp(1px, 5cqh, 6px); font: 600 clamp(9px, 19cqh, 12px)/1.2 system-ui, sans-serif; white-space: nowrap; }
 .axdb-kpi-d span { color: var(--axdb-muted); font-weight: 500; }
-.axdb-kpi-d.up { color: #12a150; }
-.axdb-kpi-d.down { color: #e11d48; }
-.axdb-kpi-s { margin-top: auto; height: 34px; min-height: 0; flex: 0 1 34px; }
+.axdb-kpi-d.up { color: var(--axdb-up); }
+.axdb-kpi-d.down { color: var(--axdb-down); }
+/* Grows into a tall tile (a 3-row KPI is not a number over a void) and never
+   takes more than two fifths of the body. */
+.axdb-kpi-s { margin-top: auto; height: auto; min-height: 0; flex: 1 1 34px; max-height: 40%; }
+/* SHORT AND WIDE — a one-row KPI on a fluid board. Stacked, a short tile dropped
+   its sparkline and left a small figure in the corner of an empty card. Here the
+   figure, its delta and the sparkline sit in a row and the spark fills the width.
+   The outer query asks the TILE (host), the inner one the body, so a strip too
+   thin for a readable spark (under 24 px) keeps the figure alone. 340 px is what
+   a figure, its delta, the gaps and a spark worth reading need — the builder's
+   236-px tiles got a 40-px wedge of spark beside the delta. */
+@container axdb-tile (max-height: 125px) and (min-width: 340px) {
+  .axdb-widget--kpi > .axdb-kpi { flex-direction: row; align-items: center; gap: 14px; }
+  .axdb-widget--kpi .axdb-kpi-d { margin-top: 0; }
+  @container axdb-kpi (min-height: 24px) {
+    .axdb-kpi > .axdb-kpi-s { display: block; flex: 1 1 40%; min-width: 80px; height: 100%; max-height: 100%; margin-top: 0; align-self: stretch; }
+  }
+}
+/* THE STRIP (row floor): header and figure on one line, the spark beside them
+   when the tile is wide enough. */
+@container axdb-tile (max-height: 46px) {
+  .axdb-widget--kpi { flex-direction: row; align-items: center; gap: 12px; }
+  .axdb-widget--kpi > .axdb-widget-h { flex: none; }
+  /* The body is a SIZE container: in a centred row it would collapse to zero
+     and every height query would fire. It takes the card's full inner height. */
+  .axdb-widget--kpi > .axdb-kpi { flex: 1; align-self: stretch; }
+}
 
-/* donut: ring beside its legend */
+/* SPLIT LAYOUT chrome: a divider sits in the gap between two siblings (a
+   24-px hit zone around a 10-px gap) and shows its line on hover or while
+   dragged; the insertion line marks the edge a dragged widget will land on. */
+.grafloria-html-layer > .axdb-div { position: absolute; z-index: 2; pointer-events: auto; background: transparent; }
+.grafloria-html-layer > .axdb-div--row { cursor: col-resize; }
+.grafloria-html-layer > .axdb-div--column { cursor: row-resize; }
+.grafloria-html-layer > .axdb-div::after {
+  content: ""; position: absolute; border-radius: 2px; background: #3b52d9; opacity: 0; transition: opacity .12s ease;
+}
+.grafloria-html-layer > .axdb-div--row::after { left: 50%; top: 8px; bottom: 8px; width: 4px; margin-left: -2px; }
+.grafloria-html-layer > .axdb-div--column::after { top: 50%; left: 8px; right: 8px; height: 4px; margin-top: -2px; }
+.grafloria-html-layer > .axdb-div:hover::after, .grafloria-html-layer > .axdb-div.axdb-active::after { opacity: .9; }
+.grafloria-html-layer > .axdb-ins {
+  position: absolute; z-index: 3; pointer-events: none; border-radius: 2px;
+  background: #3b52d9; box-shadow: 0 0 0 3px rgba(59, 82, 217, .22);
+}
+@media (prefers-reduced-motion: reduce) { .grafloria-html-layer > .axdb-div::after { transition: none; } }
+
+/* donut: ring beside its legend. The ring takes the body's height (a tall
+   tile gets a bigger ring, not dead card), square, capped so its centre figure
+   stays a figure and not a headline. */
 .axdb-widget-b.axdb-donut { display: flex; align-items: center; gap: 10px; }
-.axdb-widget-b.axdb-donut > svg { max-width: 150px; }
+.axdb-widget-b.axdb-donut > svg {
+  flex: 0 0 auto; width: auto; height: 100%; max-height: 260px; max-width: 60%; aspect-ratio: 1 / 1;
+}
 
 /* legend chips, shared by line and donut */
 .axdb-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; }
@@ -190,16 +298,25 @@ const CSS = `
     --axdb-card: #1a1d25;
     --axdb-line: #2b3040;
     --axdb-soft: rgba(150, 160, 182, .16);
+    --axdb-up: #4ade80;
+    --axdb-down: #fb7185;
+    --axdb-c1: #8b9cff; --axdb-c2: #38bdf8; --axdb-c3: #2dd4bf;
+    --axdb-c4: #fbbf24; --axdb-c5: #a78bfa; --axdb-c6: #94a3b8;
   }
 }
 `;
 /** Idempotently inject the kit stylesheet (safe to call per binder). */
-export function ensureDashboardKitStyles(doc = document) {
-    if (doc.getElementById(DASHBOARD_KIT_STYLE_ID))
+export function ensureDashboardKitStyles(doc) {
+    // SERVER-SAFE: `dashboard()` is a pure spec builder and runs where there is
+    // no document (SSR, a Node script sizing a board). A default parameter of
+    // `document` threw ReferenceError there — the packaging gate's raw-Node
+    // import caught it. No document, no stylesheet, no error.
+    const d = doc !== null && doc !== void 0 ? doc : (typeof document !== 'undefined' ? document : undefined);
+    if (!d || d.getElementById(DASHBOARD_KIT_STYLE_ID))
         return;
-    const style = doc.createElement('style');
+    const style = d.createElement('style');
     style.id = DASHBOARD_KIT_STYLE_ID;
     style.textContent = CSS;
-    doc.head.appendChild(style);
+    d.head.appendChild(style);
 }
 //# sourceMappingURL=styles.js.map

package/src/lib/dashboard-kit/widgets.d.ts

@@ -89,6 +89,21 @@ export interface TableWidgetData {
 }
 /** The kinds `defaultWidgetRenderer` knows; anything else gets the placeholder. */
 export declare const BUILT_IN_WIDGET_KINDS: readonly ["kpi", "line", "bar", "donut", "funnel", "table"];
+/**
+ * The drawing box a chart should lay itself out in: the body it is painted
+ * into, less the legend's strip. A fixed 640×250 viewBox scaled to "meet" left
+ * a wide fluid tile with ~170 px of dead card either side; drawing to the
+ * body's own aspect fills it. Outside a layout (jsdom, a host not yet sized)
+ * the classic 640×250 stands in, and the size watcher below repaints once the
+ * real box exists.
+ */
+export declare function chartBox(body: {
+    clientWidth: number;
+    clientHeight: number;
+}, legend?: boolean): {
+    W: number;
+    H: number;
+};
 /** `{ label, value, delta?, spark? }` — headline number + change + sparkline. */
 export declare const renderKpiWidget: WidgetRenderer;
 /** `{ series, labels? }` — area under the first series, a line per series. */
@@ -97,7 +112,7 @@ export declare const renderLineWidget: WidgetRenderer;
 export declare const renderBarWidget: WidgetRenderer;
 /** `{ slices: [{label, value, color?}], centerLabel? }` — ring + legend. */
 export declare const renderDonutWidget: WidgetRenderer;
-/** `{ stages: [{label, value}] }` — centred bars scaled against the first stage. */
+/** `{ stages: [{label, value}] }` — centred bars scaled against the widest stage. */
 export declare const renderFunnelWidget: WidgetRenderer;
 /** `{ columns, rows }` — plain rows; numeric cells right-align themselves. */
 export declare const renderTableWidget: WidgetRenderer;

package/src/lib/dashboard-kit/widgets.js

@@ -35,8 +35,12 @@ export const BUILT_IN_WIDGET_KINDS = ['kpi', 'line', 'bar', 'donut', 'funnel', '
  * Categorical default palette — readable on both light and dark cards. Per-mark
  * overrides win (`slices[].color`); everything else cycles this list.
  */
-const PALETTE = ['#3b52d9', '#0ea5e9', '#14b8a6', '#f59e0b', '#8b5cf6', '#64748b'];
-const colorAt = (i) => PALETTE[((i % PALETTE.length) + PALETTE.length) % PALETTE.length];
+/* Every entry clears 3:1 against the light AND the dark card (WCAG 1.4.11,
+   non-text contrast): the sky, teal and amber of the first palette sat at
+   2.9, 2.5 and 2.2 against white and were replaced by their darker steps. */
+const PALETTE_SIZE = 6;
+/** The i-th palette token — the stylesheet resolves it per theme (`--axdb-c1…c6`). */
+const colorAt = (i) => `var(--axdb-c${(((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE) + 1})`;
 // -- primitives ---------------------------------------------------------------
 const esc = (v) => String(v !== null && v !== void 0 ? v : '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
 /** Finite numbers only — a NaN in the data must not become a NaN in a path. */
@@ -89,6 +93,67 @@ function empty(body, note = 'no data') {
     body.innerHTML = `<div class="axdb-widget-empty">${esc(note)}</div>`;
 }
 const data = (widget) => { var _a; return ((_a = widget.data) !== null && _a !== void 0 ? _a : {}); };
+/**
+ * The drawing box a chart should lay itself out in: the body it is painted
+ * into, less the legend's strip. A fixed 640×250 viewBox scaled to "meet" left
+ * a wide fluid tile with ~170 px of dead card either side; drawing to the
+ * body's own aspect fills it. Outside a layout (jsdom, a host not yet sized)
+ * the classic 640×250 stands in, and the size watcher below repaints once the
+ * real box exists.
+ */
+export function chartBox(body, legend = false) {
+    const w = body.clientWidth || 0;
+    const h = (body.clientHeight || 0) - (legend ? 26 : 0);
+    if (w < 60 || h < 40)
+        return { W: 640, H: 250 };
+    return { W: Math.round(w), H: Math.round(h) };
+}
+const sizeWatchers = new WeakMap();
+/**
+ * Re-lay a chart out when the HOST's box changes (a fit-mode reflow, a
+ * resize, a narrower container) — coalesced to a frame, skipping sub-2-px
+ * jitter. `relayout` redraws ONLY the chart body: the card and anything an
+ * app painted onto it after `defaultWidgetRenderer` (a focus ring, a pin
+ * marker — the documented composition) are never touched. The first version
+ * re-ran the whole painter and wiped exactly those, which the save/load gate
+ * caught as a reloaded board reading differently from the original.
+ */
+function watchSize(host, relayout) {
+    var _a;
+    if (typeof ResizeObserver === 'undefined')
+        return;
+    (_a = sizeWatchers.get(host)) === null || _a === void 0 ? void 0 : _a.disconnect();
+    let last = { w: host.clientWidth, h: host.clientHeight };
+    let frame = 0;
+    const ro = new ResizeObserver(() => {
+        const w = host.clientWidth;
+        const h = host.clientHeight;
+        if (Math.abs(w - last.w) < 2 && Math.abs(h - last.h) < 2)
+            return;
+        last = { w, h };
+        if (frame)
+            cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+            frame = 0;
+            if (host.isConnected)
+                relayout();
+            else
+                ro.disconnect();
+        });
+    });
+    ro.observe(host);
+    sizeWatchers.set(host, ro);
+}
+/**
+ * The chart's numbers as a visually-hidden table — what a screen reader gets
+ * instead of an svg it cannot read (WCAG 1.1.1). `role="img"` + aria-label on
+ * the svg names the chart; this carries the values.
+ */
+const srTable = (caption, columns, rows) => `<table class="axdb-sr"><caption>${esc(caption)}</caption><thead><tr>${columns
+    .map((c) => `<th scope="col">${esc(c)}</th>`)
+    .join('')}</tr></thead><tbody>${rows
+    .map((r) => `<tr>${r.map((v) => `<td>${esc(v)}</td>`).join('')}</tr>`)
+    .join('')}</tbody></table>`;
 const legend = (items, column = false) => `<div class="axdb-lg${column ? ' axdb-lg--col' : ''}">` +
     items.map((i) => `<i><b style="background:${esc(i.color)}"></b>${esc(i.label)}</i>`).join('') +
     '</div>';
@@ -142,13 +207,20 @@ function normalizeSeries(raw) {
 }
 /** `{ series, labels? }` — area under the first series, a line per series. */
 export const renderLineWidget = (widget, host) => {
-    const d = data(widget);
     const body = card(host, widget, titleOf(widget));
+    layoutLine(widget, body);
+    watchSize(host, () => layoutLine(widget, body));
+};
+/** The line chart's body, drawn to the body's current box. */
+function layoutLine(widget, body) {
+    const d = data(widget);
     const series = normalizeSeries(d.series);
     if (!series.length)
         return empty(body);
-    const W = 640;
-    const H = 250;
+    const named = series.filter((s) => s.name);
+    if (named.length)
+        body.classList.add('axdb-has-lg');
+    const { W, H } = chartBox(body, named.length > 0);
     const pad = { l: 34, r: 12, t: 12, b: 22 };
     const iw = W - pad.l - pad.r;
     const ih = H - pad.t - pad.b;
@@ -168,6 +240,9 @@ export const renderLineWidget = (widget, host) => {
     })
         .join('');
     const labels = Array.isArray(d.labels) ? d.labels : [];
+    // The label SET must not depend on the box: a board reloaded at another size
+    // has to paint the same text as the original (the save/load gate's contract).
+    // Only the geometry follows the box.
     const every = labels.length > 8 ? 2 : 1;
     const ticks = labels
         .slice(0, count)
@@ -184,29 +259,42 @@ export const renderLineWidget = (widget, host) => {
                 `L${xAt(s.values.length - 1).toFixed(1)},${(pad.t + ih).toFixed(1)} Z" ` +
                 `fill="${colorAt(si)}" fill-opacity="0.10"></path>`
             : '';
+        // A series with ONE point has nothing for a polyline to connect, so the
+        // plot rendered its axes and legend around an invisible chart — the
+        // classic day-one-of-data tile. A single value is still data: draw it as
+        // a dot. (Two or more points keep exactly the look they had.)
+        const dots = s.values.length < 2
+            ? s.values
+                .map((v, i) => `<circle cx="${xAt(i).toFixed(1)}" cy="${yAt(v).toFixed(1)}" r="3.5" ` +
+                `fill="${colorAt(si)}"></circle>`)
+                .join('')
+            : '';
         return (area +
             `<polyline points="${pts}" fill="none" stroke="${colorAt(si)}" stroke-width="${si === 0 ? 2.4 : 1.8}" ` +
-            `stroke-linejoin="round" stroke-linecap="round"></polyline>`);
+            `stroke-linejoin="round" stroke-linecap="round"></polyline>` +
+            dots);
     })
         .join('');
-    const named = series.filter((s) => s.name);
-    if (named.length)
-        body.classList.add('axdb-has-lg');
     body.innerHTML =
         `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
             `aria-label="${esc(titleOf(widget))}">${grid}${ticks}${marks}</svg>` +
-            (named.length ? legend(series.map((s, i) => { var _a; return ({ label: String((_a = s.name) !== null && _a !== void 0 ? _a : ''), color: colorAt(i) }); })) : '');
-};
+            (named.length ? legend(series.map((s, i) => { var _a; return ({ label: String((_a = s.name) !== null && _a !== void 0 ? _a : ''), color: colorAt(i) }); })) : '') +
+            srTable(titleOf(widget), ['', ...series.map((s, i) => { var _a; return String((_a = s.name) !== null && _a !== void 0 ? _a : `Series ${i + 1}`); })], Array.from({ length: count }, (_, i) => { var _a; return [(_a = labels[i]) !== null && _a !== void 0 ? _a : String(i + 1), ...series.map((s) => { var _a; return (_a = s.values[i]) !== null && _a !== void 0 ? _a : ''; })]; }));
+}
 // -- bar ----------------------------------------------------------------------
 /** `{ bars: [{label, value}] }` — columns, value above, category below. */
 export const renderBarWidget = (widget, host) => {
-    const d = data(widget);
     const body = card(host, widget, titleOf(widget));
+    layoutBar(widget, body);
+    watchSize(host, () => layoutBar(widget, body));
+};
+/** The bar chart's body, drawn to the body's current box. */
+function layoutBar(widget, body) {
+    const d = data(widget);
     const bars = (Array.isArray(d.bars) ? d.bars : []).filter((b) => !!b);
     if (!bars.length)
         return empty(body);
-    const W = 640;
-    const H = 250;
+    const { W, H } = chartBox(body);
     const pad = { l: 34, r: 12, t: 12, b: 26 };
     const iw = W - pad.l - pad.r;
     const ih = H - pad.t - pad.b;
@@ -239,8 +327,9 @@ export const renderBarWidget = (widget, host) => {
         .join('');
     body.innerHTML =
         `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
-            `aria-label="${esc(titleOf(widget))}">${grid}${marks}</svg>`;
-};
+            `aria-label="${esc(titleOf(widget))}">${grid}${marks}</svg>` +
+            srTable(titleOf(widget), ['Category', 'Value'], bars.map((b) => { var _a; return [(_a = b.label) !== null && _a !== void 0 ? _a : '', num(b.value)]; }));
+}
 // -- donut --------------------------------------------------------------------
 /** One arc of the ring, as an SVG path command. */
 function arcPath(cx, cy, r, a0, a1) {
@@ -290,38 +379,57 @@ export const renderDonutWidget = (widget, host) => {
                     label: `${(_a = s.label) !== null && _a !== void 0 ? _a : ''} · ${Math.round((num(s.value) / total) * 100)}%`,
                     color: (_b = s.color) !== null && _b !== void 0 ? _b : colorAt(i),
                 });
-            }), true);
+            }), true) +
+            srTable(titleOf(widget), ['Slice', 'Value', 'Share'], slices.map((s) => { var _a; return [(_a = s.label) !== null && _a !== void 0 ? _a : '', num(s.value), `${Math.round((num(s.value) / total) * 100)}%`]; }));
 };
 // -- funnel -------------------------------------------------------------------
-/** `{ stages: [{label, value}] }` — centred bars scaled against the first stage. */
+/** `{ stages: [{label, value}] }` — centred bars scaled against the widest stage. */
 export const renderFunnelWidget = (widget, host) => {
-    const d = data(widget);
     const body = card(host, widget, titleOf(widget));
+    layoutFunnel(widget, body);
+    watchSize(host, () => layoutFunnel(widget, body));
+};
+/** Room an 11-px value needs, so the smallest stage's bar still holds its number. */
+const valueWidth = (text) => text.length * 6.6 + 14;
+/**
+ * The funnel's body, drawn to the body's current box. The old fixed 260-wide
+ * viewBox scaled bars AND type with the tile: 24-px digits in a tall tile,
+ * "188" spilling out of a stage narrower than its own label. Here the type is
+ * fixed, bars share the height between a readable 18 px and a 40 px cap, the
+ * stack is centred, and a bar is never narrower than its value.
+ */
+function layoutFunnel(widget, body) {
+    const d = data(widget);
     const stages = (Array.isArray(d.stages) ? d.stages : []).filter((s) => !!s);
     if (!stages.length)
         return empty(body);
-    const W = 260;
-    const rowH = 34;
-    const gap = 8;
-    const H = stages.length * (rowH + gap);
+    const { W, H } = chartBox(body);
+    const n = stages.length;
+    const gap = 6;
+    const rowH = Math.max(18, Math.min(40, (H - gap * (n - 1)) / n));
+    const top = Math.max(0, (H - (n * rowH + (n - 1) * gap)) / 2);
+    const labelCol = Math.min(120, Math.max(60, W * 0.28));
+    const track = Math.max(40, W - labelCol - 16);
     const max = Math.max(...stages.map((s) => num(s.value)), 1);
-    const track = W - 90;
     const marks = stages
         .map((s, i) => {
         var _a;
-        const w = Math.max(2, (num(s.value) / max) * track);
-        const x = (track - w) / 2 + 8;
-        const y = i * (rowH + gap);
-        return (`<rect x="${x.toFixed(1)}" y="${y}" width="${w.toFixed(1)}" height="${rowH}" rx="6" fill="${colorAt(i)}"></rect>` +
-            `<text x="${(x + w / 2).toFixed(1)}" y="${y + rowH / 2 + 4}" text-anchor="middle" font-size="11" ` +
-            `font-weight="600" fill="#fff">${esc(compact(num(s.value)))}</text>` +
-            `<text x="${W - 78}" y="${y + rowH / 2 + 4}" font-size="10.5" fill="var(--axdb-muted)">${esc((_a = s.label) !== null && _a !== void 0 ? _a : '')}</text>`);
+        const text = compact(num(s.value));
+        const w = Math.min(track, Math.max(valueWidth(text), (num(s.value) / max) * track));
+        const x = 8 + (track - w) / 2;
+        const y = top + i * (rowH + gap);
+        const mid = (y + rowH / 2 + 4).toFixed(1);
+        return (`<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${w.toFixed(1)}" height="${rowH.toFixed(1)}" rx="6" fill="${colorAt(i)}"></rect>` +
+            `<text x="${(x + w / 2).toFixed(1)}" y="${mid}" text-anchor="middle" font-size="11" ` +
+            `font-weight="600" fill="#fff">${esc(text)}</text>` +
+            `<text x="${8 + track + 8}" y="${mid}" font-size="10.5" fill="var(--axdb-muted)">${esc((_a = s.label) !== null && _a !== void 0 ? _a : '')}</text>`);
     })
         .join('');
     body.innerHTML =
         `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
-            `aria-label="${esc(titleOf(widget))}">${marks}</svg>`;
-};
+            `aria-label="${esc(titleOf(widget))}">${marks}</svg>` +
+            srTable(titleOf(widget), ['Stage', 'Value'], stages.map((s) => { var _a; return [(_a = s.label) !== null && _a !== void 0 ? _a : '', num(s.value)]; }));
+}
 // -- table --------------------------------------------------------------------
 /** `{ columns, rows }` — plain rows; numeric cells right-align themselves. */
 export const renderTableWidget = (widget, host) => {
@@ -343,6 +451,11 @@ export const renderTableWidget = (widget, host) => {
         '</tr>')
         .join('');
     body.classList.add('axdb-scroll');
+    // A scrollable region must be reachable by keyboard (axe: scrollable-
+    // region-focusable) — it is a tab stop with the table's name.
+    body.setAttribute('tabindex', '0');
+    body.setAttribute('role', 'region');
+    body.setAttribute('aria-label', titleOf(widget));
     body.innerHTML = `<table class="axdb-table">${head}<tbody>${tbody}</tbody></table>`;
 };
 // -- dispatch -----------------------------------------------------------------

package/src/lib/diagram-kit/card.d.ts

@@ -52,6 +52,50 @@ export interface HtmlNode {
 export declare function entityCardContent(entity: ErEntitySpec, editable?: boolean): HtmlNode;
 /** Card height for an entity — explicit height wins, else derived from columns. */
 export declare function entityAutoHeight(entity: ErEntitySpec, editable?: boolean): number;
+/** Horizontal padding shared by `.axk-row`, `.axk-entity-head`, `.axk-member`
+ *  and `.axk-uml-name` — all of them are `padding: Npx 10px`. */
+export declare const CARD_PAD_X = 20;
+/** `.axk-row`'s `gap: 8px`. */
+export declare const ER_ROW_GAP = 8;
+/** `.axk-key`'s fixed `width: 22px`. */
+export declare const ER_KEY_W = 22;
+/** `.axk-ty`'s `min-width: 52px` — it never measures narrower than its target. */
+export declare const ER_TYPE_MIN_W = 52;
+/** `.axk-col-del`'s `width: 14px` (present only when editable). */
+export declare const CARD_DEL_W = 14;
+/**
+ * Horizontal counterpart of ER_BORDER_SLACK: the html wrapper's padding
+ * (`html.padding ?? 4`, so 8px across) plus the card's own 1px left/right
+ * borders. The node's width is the OUTER box; the row only ever gets what is
+ * left after these, so a derived width that ignored them came out 10px short
+ * and truncated by a hair — which is exactly how it was first measured.
+ */
+export declare const CARD_SLACK_X = 10;
+/** Defaults, and the floor every derived width is taken against. */
+export declare const ER_DEFAULT_WIDTH = 190;
+export declare const UML_DEFAULT_WIDTH = 200;
+/**
+ * Ceiling for a DERIVED width. A card that sized itself to a pathological
+ * identifier would dominate the diagram, so past this the stylesheet's ellipsis
+ * takes over — visibly, which is the point — and an author who needs the whole
+ * string sets an explicit `width`. An explicit width is never clamped.
+ */
+export declare const CARD_MAX_AUTO_W = 420;
+/**
+ * Width of `text` in CSS pixels, as the browser will really lay it out.
+ *
+ * Canvas `measureText` was calibrated against live `getBoundingClientRect()`
+ * widths for these exact fonts and agreed to within 0.02px, which is what makes
+ * deriving a card's width from its content safe rather than a guess.
+ *
+ * Outside a browser (jsdom, SSR) there is no 2d context and this falls back to
+ * a per-character average. The fallback only has to be roughly right: it feeds
+ * a `Math.max` against the default width, and anything it underestimates is
+ * ellipsised by the stylesheet rather than lost.
+ */
+export declare function measureCardText(text: string, font: string, tracking?: number): number;
+/** Card width for an entity — explicit width wins, else derived from content. */
+export declare function entityAutoWidth(entity: ErEntitySpec, editable?: boolean): number;
 /**
  * The `.axk-uml` content tree. `editable` adds a delete control per member and
  * a trailing add affordance in each compartment.
@@ -59,6 +103,8 @@ export declare function entityAutoHeight(entity: ErEntitySpec, editable?: boolea
 export declare function classCardContent(cls: UmlClassSpec, editable?: boolean): HtmlNode;
 /** Card height for a class — explicit height wins, else derived from members. */
 export declare function classAutoHeight(cls: UmlClassSpec, editable?: boolean): number;
+/** Card width for a class — explicit width wins, else derived from content. */
+export declare function classAutoWidth(cls: UmlClassSpec, editable?: boolean): number;
 /**
  * Match old columns to new columns for port reconciliation. Returns a map from
  * OLD index → NEW index; an old index absent from the map is a REMOVED column