@ponchia/ui 0.6.3 → 0.6.4

package/CHANGELOG.md

@@ -5,6 +5,24 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.6.4 — 2026-06-08
+
+Patch release for the dot-matrix expansion and static report hardening shipped
+in #116. No breaking changes, no `MIGRATIONS.json` entry.
+
+### Added
+
+- **Dot-matrix/glyph expansion** — adds the generated glyph metadata surface,
+  docs, and contract tests for the expanded dot/readout vocabulary.
+- **Report authoring guidance** — documents the static report grammar around
+  captions, alert bodies, table wrapping, and local/CDN asset handling.
+
+### Fixed
+
+- **Static report print/layout behavior** — hardens report print margins and
+  table wrapping so standalone HTML reports and PDF exports degrade more
+  predictably across long tokens and normal prose.
+
 ## 0.6.3 — 2026-06-08
 
 Patch release to publish the WebKit release fix after the `v0.6.1` and `v0.6.2`

package/behaviors/glyph.d.ts

@@ -7,6 +7,13 @@
  * name is left untouched. Idempotent (skips an already-expanded host); the
  * returned cleanup removes the cells and restores the original attributes.
  *
+ * `data-bronto-glyph-render="mask"` takes the cheap one-node path instead:
+ * the host becomes a single `.ui-icon` masked by the glyph (no GLYPH_SIZE²
+ * cells), inheriting `currentColor` and scaling with the text — the DOM
+ * counterpart to renderGlyph's `render: 'mask'`, for an icon in every table
+ * row where 256 cells per glyph is too heavy. `data-bronto-glyph-size` sets
+ * `--icon-size`. The cell-mode attributes (solid/anim) don't apply.
+ *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
  */

package/behaviors/glyph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["glyph.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;GAWG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAiH3C"}
+{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["glyph.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAyJ3C"}

package/behaviors/glyph.js

@@ -1,11 +1,18 @@
 import { hasDom, resolveHost, noop, collectHosts } from './internal.js';
-import { GLYPH_SIZE, glyphCells } from '../glyphs/glyphs.js';
+import { GLYPH_SIZE, glyphCells, glyphMask } from '../glyphs/glyphs.js';
 
 function restoreAttr(el, name, prev) {
   if (prev === null) el.removeAttribute(name);
   else el.setAttribute(name, prev);
 }
 
+// `dot`/`gap`/`size` land in inline CSS, so allow only length/calc syntax —
+// drop anything with a `;`/`{` that could open a second declaration (mirrors
+// glyphs.js cssLen). Used for the mask path's --icon-size.
+function cssLen(v) {
+  return v && /^[\w.%+\-*/()\s,]+$/.test(v) ? v : '';
+}
+
 /**
  * Expand `[data-bronto-glyph="name"]` placeholders into a `.ui-dotmatrix`
  * grid of GLYPH_SIZE² cells — the DOM counterpart to renderGlyph() from
@@ -15,6 +22,13 @@ function restoreAttr(el, name, prev) {
  * name is left untouched. Idempotent (skips an already-expanded host); the
  * returned cleanup removes the cells and restores the original attributes.
  *
+ * `data-bronto-glyph-render="mask"` takes the cheap one-node path instead:
+ * the host becomes a single `.ui-icon` masked by the glyph (no GLYPH_SIZE²
+ * cells), inheriting `currentColor` and scaling with the text — the DOM
+ * counterpart to renderGlyph's `render: 'mask'`, for an icon in every table
+ * row where 256 cells per glyph is too heavy. `data-bronto-glyph-size` sets
+ * `--icon-size`. The cell-mode attributes (solid/anim) don't apply.
+ *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
  */
@@ -26,14 +40,54 @@ export function initDotGlyph({ root } = {}) {
   const cleanups = [];
 
   for (const el of els) {
+    const name = el.getAttribute('data-bronto-glyph');
+    const label = el.getAttribute('data-bronto-glyph-label');
+
+    // One-node mask path — the icon-at-scale counterpart to the 256-cell grid.
+    if (el.getAttribute('data-bronto-glyph-render') === 'mask') {
+      if (el.classList.contains('ui-icon') && el.style.getPropertyValue('--icon-mask')) continue;
+      const mask = glyphMask(name);
+      if (!mask) continue; // unknown glyph — leave the placeholder as-is
+      const hadIcon = el.classList.contains('ui-icon');
+      const hadMask = el.style.getPropertyValue('--icon-mask');
+      const hadSize = el.style.getPropertyValue('--icon-size');
+      const hadAriaHiddenM = el.getAttribute('aria-hidden');
+      const hadRoleM = el.getAttribute('role');
+      const hadAriaLabelM = el.getAttribute('aria-label');
+      const sizeM = cssLen(el.getAttribute('data-bronto-glyph-size'));
+
+      el.classList.add('ui-icon');
+      el.style.setProperty('--icon-mask', mask);
+      if (sizeM) el.style.setProperty('--icon-size', sizeM);
+      if (label) {
+        el.setAttribute('role', 'img');
+        el.setAttribute('aria-label', label);
+        el.removeAttribute('aria-hidden');
+      } else {
+        el.setAttribute('aria-hidden', 'true');
+      }
+
+      cleanups.push(() => {
+        if (!hadIcon) el.classList.remove('ui-icon');
+        if (hadMask) el.style.setProperty('--icon-mask', hadMask);
+        else el.style.removeProperty('--icon-mask');
+        if (sizeM && !hadSize) el.style.removeProperty('--icon-size');
+        else if (hadSize) el.style.setProperty('--icon-size', hadSize);
+        restoreAttr(el, 'aria-hidden', hadAriaHiddenM);
+        restoreAttr(el, 'role', hadRoleM);
+        restoreAttr(el, 'aria-label', hadAriaLabelM);
+        if (el.getAttribute('class') === '') el.removeAttribute('class');
+        if (el.getAttribute('style') === '') el.removeAttribute('style');
+      });
+      continue;
+    }
+
     // Scope to DIRECT-child cells (the ones we append) — so a placeholder that
     // legitimately nests its own .ui-dotmatrix is neither mis-read as already
     // expanded here nor have its inner cells removed by cleanup below.
     if (el.querySelector(':scope > .ui-dotmatrix__cell')) continue; // already expanded
-    const cells = glyphCells(el.getAttribute('data-bronto-glyph'));
+    const cells = glyphCells(name);
     if (!cells.length) continue; // unknown glyph — leave the placeholder as-is
-
-    const label = el.getAttribute('data-bronto-glyph-label');
     // `data-bronto-glyph-solid` → square, gapless pixel glyph (legible small),
     // the DOM counterpart to renderGlyph's `solid` option. Implies glyph-only.
     const solid = el.hasAttribute('data-bronto-glyph-solid');

package/classes/classes.json

@@ -1,8 +1,8 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 529,
-    "groups": 161
+    "classes": 540,
+    "groups": 167
   },
   "groups": {
     "ui-accordion": {
@@ -14,6 +14,11 @@
         "ui-accordion__summary"
       ]
     },
+    "ui-activity": {
+      "base": "ui-activity",
+      "modifiers": [],
+      "parts": []
+    },
     "ui-alert": {
       "base": "ui-alert",
       "modifiers": [
@@ -460,6 +465,16 @@
       "modifiers": [],
       "parts": []
     },
+    "ui-dotfit": {
+      "base": "ui-dotfit",
+      "modifiers": [],
+      "parts": []
+    },
+    "ui-dotgauge": {
+      "base": "ui-dotgauge",
+      "modifiers": [],
+      "parts": []
+    },
     "ui-dotgrid": {
       "base": "ui-dotgrid",
       "modifiers": [
@@ -549,6 +564,11 @@
       "modifiers": [],
       "parts": []
     },
+    "ui-halftone": {
+      "base": "ui-halftone",
+      "modifiers": [],
+      "parts": []
+    },
     "ui-hint": {
       "base": "ui-hint",
       "modifiers": [
@@ -644,6 +664,14 @@
         "ui-legend__value"
       ]
     },
+    "ui-level": {
+      "base": "ui-level",
+      "modifiers": [
+        "ui-level--danger",
+        "ui-level--warn"
+      ],
+      "parts": []
+    },
     "ui-lightbox": {
       "base": "ui-lightbox",
       "modifiers": [],
@@ -849,7 +877,9 @@
     "ui-readout": {
       "base": "ui-readout",
       "modifiers": [],
-      "parts": []
+      "parts": [
+        "ui-readout__spacer"
+      ]
     },
     "ui-reasoning": {
       "base": "ui-reasoning",
@@ -1018,6 +1048,7 @@
     "ui-spark": {
       "base": "ui-spark",
       "modifiers": [
+        "ui-spark--dots",
         "ui-spark__bar--accent",
         "ui-spark__bar--neg",
         "ui-spark__bar--pos"
@@ -1143,6 +1174,7 @@
     "ui-table": {
       "base": "ui-table",
       "modifiers": [
+        "ui-table--break-anywhere",
         "ui-table--comfortable",
         "ui-table--dense",
         "ui-table--lined",
@@ -1296,6 +1328,11 @@
       "base": "ui-vt",
       "modifiers": [],
       "parts": []
+    },
+    "ui-waffle": {
+      "base": "ui-waffle",
+      "modifiers": [],
+      "parts": []
     }
   },
   "classes": [
@@ -1303,6 +1340,7 @@
     "ui-accordion__body",
     "ui-accordion__item",
     "ui-accordion__summary",
+    "ui-activity",
     "ui-alert",
     "ui-alert--accent",
     "ui-alert--danger",
@@ -1508,6 +1546,8 @@
     "ui-dotbar",
     "ui-dotbar--indeterminate",
     "ui-dotfield",
+    "ui-dotfit",
+    "ui-dotgauge",
     "ui-dotgrid",
     "ui-dotgrid--accent",
     "ui-dotgrid--dense",
@@ -1537,6 +1577,7 @@
     "ui-glossary__def",
     "ui-glossary__term",
     "ui-grid",
+    "ui-halftone",
     "ui-hint",
     "ui-hint--error",
     "ui-icon",
@@ -1581,6 +1622,9 @@
     "ui-legend__title",
     "ui-legend__track",
     "ui-legend__value",
+    "ui-level",
+    "ui-level--danger",
+    "ui-level--warn",
     "ui-lightbox",
     "ui-lightbox__close",
     "ui-link",
@@ -1656,6 +1700,7 @@
     "ui-range",
     "ui-ratio",
     "ui-readout",
+    "ui-readout__spacer",
     "ui-reasoning",
     "ui-reasoning__body",
     "ui-report",
@@ -1719,6 +1764,7 @@
     "ui-source-list",
     "ui-source-list__item",
     "ui-spark",
+    "ui-spark--dots",
     "ui-spark__bar",
     "ui-spark__bar--accent",
     "ui-spark__bar--neg",
@@ -1768,6 +1814,7 @@
     "ui-syncbar",
     "ui-tab",
     "ui-table",
+    "ui-table--break-anywhere",
     "ui-table--comfortable",
     "ui-table--dense",
     "ui-table--lined",
@@ -1827,7 +1874,8 @@
     "ui-tree__leaf",
     "ui-tree__summary",
     "ui-visually-hidden",
-    "ui-vt"
+    "ui-vt",
+    "ui-waffle"
   ],
   "states": [
     {
@@ -2500,6 +2548,20 @@
       "value": "'reveal' | 'pulse'",
       "behavior": "initDotGlyph",
       "note": "decorative entrance/idle animation (honours prefers-reduced-motion)."
+    },
+    {
+      "name": "data-bronto-glyph-render",
+      "on": "a [data-bronto-glyph] placeholder",
+      "value": "'mask'",
+      "behavior": "initDotGlyph",
+      "note": "take the one-node .ui-icon mask path (inherits currentColor, scales with text) instead of the 256-cell grid — the icon-at-scale path."
+    },
+    {
+      "name": "data-bronto-glyph-size",
+      "on": "a [data-bronto-glyph-render='mask'] placeholder",
+      "value": "CSS length",
+      "behavior": "initDotGlyph",
+      "note": "sets --icon-size on the masked glyph (sanitized to a length/calc allowlist)."
     }
   ],
   "requiredAria": [

package/classes/index.d.ts

@@ -79,6 +79,16 @@ export declare const cls: {
   readonly dotspinner: 'ui-dotspinner';
   readonly dotspinnerSm: 'ui-dotspinner--sm';
   readonly dotspinnerLg: 'ui-dotspinner--lg';
+  readonly waffle: 'ui-waffle';
+  readonly activity: 'ui-activity';
+  readonly level: 'ui-level';
+  readonly levelWarn: 'ui-level--warn';
+  readonly levelDanger: 'ui-level--danger';
+  readonly dotgauge: 'ui-dotgauge';
+  readonly readout: 'ui-readout';
+  readonly readoutSpacer: 'ui-readout__spacer';
+  readonly halftone: 'ui-halftone';
+  readonly dotfit: 'ui-dotfit';
   readonly field: 'ui-field';
   readonly label: 'ui-label';
   readonly input: 'ui-input';
@@ -189,6 +199,7 @@ export declare const cls: {
   readonly tableDense: 'ui-table--dense';
   readonly tableComfortable: 'ui-table--comfortable';
   readonly tableLined: 'ui-table--lined';
+  readonly tableBreakAnywhere: 'ui-table--break-anywhere';
   readonly tableWrap: 'ui-table-wrap';
   readonly tableLoading: 'ui-table-wrap--loading';
   readonly tableEmpty: 'ui-table__empty';
@@ -372,7 +383,6 @@ export declare const cls: {
   readonly crosshairLineX: 'ui-crosshair__line--x';
   readonly crosshairLineY: 'ui-crosshair__line--y';
   readonly crosshairBadge: 'ui-crosshair__badge';
-  readonly readout: 'ui-readout';
   readonly sel: 'ui-sel';
   readonly selOn: 'ui-sel--on';
   readonly selOff: 'ui-sel--off';
@@ -416,6 +426,7 @@ export declare const cls: {
   readonly codeLineRemove: 'ui-code__line--remove';
   readonly codeLineHl: 'ui-code__line--hl';
   readonly spark: 'ui-spark';
+  readonly sparkDots: 'ui-spark--dots';
   readonly sparkBar: 'ui-spark__bar';
   readonly sparkBarAccent: 'ui-spark__bar--accent';
   readonly sparkBarPos: 'ui-spark__bar--pos';

package/classes/index.js

@@ -84,6 +84,17 @@ export const cls = Object.freeze({
   dotspinner: 'ui-dotspinner',
   dotspinnerSm: 'ui-dotspinner--sm',
   dotspinnerLg: 'ui-dotspinner--lg',
+  // data-bound dot surfaces (reporting/dashboard family)
+  waffle: 'ui-waffle',
+  activity: 'ui-activity',
+  level: 'ui-level',
+  levelWarn: 'ui-level--warn',
+  levelDanger: 'ui-level--danger',
+  dotgauge: 'ui-dotgauge',
+  readout: 'ui-readout',
+  readoutSpacer: 'ui-readout__spacer',
+  halftone: 'ui-halftone',
+  dotfit: 'ui-dotfit',
   // forms
   field: 'ui-field',
   label: 'ui-label',
@@ -199,6 +210,7 @@ export const cls = Object.freeze({
   tableDense: 'ui-table--dense',
   tableComfortable: 'ui-table--comfortable',
   tableLined: 'ui-table--lined',
+  tableBreakAnywhere: 'ui-table--break-anywhere',
   tableWrap: 'ui-table-wrap',
   // Loading state goes on the WRAP, so the modifier is named for the wrap (C19).
   tableLoading: 'ui-table-wrap--loading',
@@ -441,6 +453,7 @@ export const cls = Object.freeze({
   codeLineHl: 'ui-code__line--hl',
   // spark — inline datawords / microcharts (css/spark.css)
   spark: 'ui-spark',
+  sparkDots: 'ui-spark--dots',
   sparkBar: 'ui-spark__bar',
   sparkBarAccent: 'ui-spark__bar--accent',
   sparkBarPos: 'ui-spark__bar--pos',
@@ -737,12 +750,13 @@ export const ui = {
   dot: ({ tone, live } = {}) => j(cls.dot, dotTone(tone), live && cls.dotLive),
   dotgrid: ({ accent, dense } = {}) =>
     j(cls.dotgrid, accent && cls.dotgridAccent, dense && cls.dotgridDense),
-  table: ({ density, lined } = {}) =>
+  table: ({ density, lined, breakAnywhere } = {}) =>
     j(
       cls.table,
       density === 'dense' && cls.tableDense,
       density === 'comfortable' && cls.tableComfortable,
       lined && cls.tableLined,
+      breakAnywhere && cls.tableBreakAnywhere,
     ),
   eyebrow: ({ muted, sm } = {}) => j(cls.eyebrow, muted && cls.eyebrowMuted, sm && cls.eyebrowSm),
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),

package/css/dots.css

@@ -348,6 +348,177 @@
   animation-delay: 0.63s;
 }
 
+/* ==========================================================================
+   Data-bound dot surfaces — the reporting/dashboard family. Each is a thin,
+   token-driven leaf over the same lit/dim/accent dot vocabulary: the HOST
+   normalises the data (lights `is-on`, sets `data-level`, or writes `--v`
+   0..1) and the leaf only lays out + tones. None compute a scale, bin, or
+   threshold — that stays with the host (the spark/meter boundary).
+
+   a11y: every one is opaque to assistive tech, so the container MUST carry a
+   host-written `role="img"` + `aria-label` with the exact value/meaning
+   (rounding to whole cells is presentation-only; keep the figure in the label).
+   ========================================================================== */
+
+/* Waffle / unit chart — part-to-whole as an N×N field of lit dots ("73 of
+   100"). Host marks the lit cells with `is-on`. */
+.ui-waffle {
+  display: grid;
+  gap: var(--waffle-gap, 0.18em);
+  grid-template-columns: repeat(var(--waffle-cols, 10), 1fr);
+  inline-size: var(--waffle-size, 7em);
+}
+
+.ui-waffle i {
+  aspect-ratio: 1;
+  background: var(--field-dot);
+  border-radius: var(--dotmatrix-dot-radius, 50%);
+}
+
+.ui-waffle i.is-on {
+  background: var(--field-dot-accent);
+  box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--field-dot-accent);
+}
+
+/* Activity / contribution grid — density-over-time. A flat list of day cells
+   flows down each weekday column via grid-auto-flow; intensity is a 5-step
+   ramp on `data-level="0..4"` (the host bins data → level). */
+.ui-activity {
+  display: grid;
+  gap: var(--activity-gap, 0.18em);
+  grid-auto-columns: var(--activity-cell, 0.82em);
+  grid-auto-flow: column;
+  grid-template-rows: repeat(var(--activity-rows, 7), 1fr);
+}
+
+.ui-activity i {
+  aspect-ratio: 1;
+  background: var(--field-dot);
+  border-radius: var(--dotmatrix-dot-radius, 2px);
+}
+
+.ui-activity i[data-level='1'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 30%, var(--field-dot));
+}
+
+.ui-activity i[data-level='2'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 55%, var(--field-dot));
+}
+
+.ui-activity i[data-level='3'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 78%, var(--field-dot));
+}
+
+.ui-activity i[data-level='4'] {
+  background: var(--field-dot-accent);
+}
+
+/* LED level meter — a column of discrete segments lit to a threshold (signal /
+   load / VU). Fills from the bottom; host marks lit segments with `is-on`.
+   `--warn`/`--danger` re-point the lit colour for the whole meter when the host
+   crosses a threshold (the host owns the threshold, not the leaf). */
+.ui-level {
+  block-size: var(--level-height, 4em);
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--level-gap, 2px);
+  inline-size: var(--level-size, 0.7em);
+}
+
+.ui-level i {
+  background: var(--field-dot);
+  border-radius: var(--radius-sm);
+  flex: 1;
+}
+
+.ui-level i.is-on {
+  background: var(--accent);
+  box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--accent);
+}
+
+.ui-level--warn i.is-on {
+  background: var(--warning);
+}
+
+.ui-level--danger i.is-on {
+  background: var(--danger);
+}
+
+/* Dot gauge — a 0..1 reading (`--v`) as a ring of dots filling along an arc.
+   A conic-gradient sweep (accent up to --v, dim beyond) intersected with a
+   donut-ring × dot-pattern mask, so the lit arc reads as discrete dots. */
+.ui-dotgauge {
+  --_v: var(--v, 0);
+  --_sweep: var(--gauge-sweep, 270deg);
+
+  aspect-ratio: 1;
+  background: conic-gradient(
+    from var(--gauge-from, 135deg),
+    var(--field-dot-accent) calc(var(--_v) * var(--_sweep)),
+    var(--field-dot) calc(var(--_v) * var(--_sweep)) var(--_sweep),
+    transparent var(--_sweep)
+  );
+  border-radius: 50%;
+  inline-size: var(--gauge-size, 5em);
+
+  /* ring (donut) ∩ dot lattice → a ring of dots */
+  /* stylelint-disable property-no-vendor-prefix -- Safari still needs the prefixed mask props. */
+  -webkit-mask:
+    radial-gradient(closest-side, transparent 58%, #000 59%),
+    radial-gradient(circle, #000 34%, transparent 36%) 0 0 / var(--gauge-dot, 0.5em) var(--gauge-dot, 0.5em);
+  -webkit-mask-composite: source-in;
+  /* stylelint-enable property-no-vendor-prefix */
+  mask:
+    radial-gradient(closest-side, transparent 58%, #000 59%),
+    radial-gradient(circle, #000 34%, transparent 36%) 0 0 / var(--gauge-dot, 0.5em) var(--gauge-dot, 0.5em);
+  mask-composite: intersect;
+}
+
+/* Readout — a row of dot-matrix glyphs forming a big numeric (renderReadout).
+   The glyphs are decorative; the row carries role=img + the value as its name. */
+.ui-readout {
+  align-items: flex-end;
+  display: inline-flex;
+  gap: var(--readout-gap, 0.12em);
+}
+
+.ui-readout__spacer {
+  display: inline-block;
+  inline-size: var(--readout-space, 0.5em);
+}
+
+/* Halftone — render host content (an <img> or a box with its own background)
+   through a dot lattice so a thumbnail/cover takes on the dot look. A style
+   filter, NOT a data viz: the dots are a fixed lattice, not value-modulated. */
+.ui-halftone {
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs the prefixed mask property. */
+  -webkit-mask: radial-gradient(circle, #000 var(--halftone-dot, 38%), transparent calc(var(--halftone-dot, 38%) + 1%)) 0 0 /
+    var(--halftone-gap, 0.5em) var(--halftone-gap, 0.5em);
+  mask: radial-gradient(circle, #000 var(--halftone-dot, 38%), transparent calc(var(--halftone-dot, 38%) + 1%)) 0 0 /
+    var(--halftone-gap, 0.5em) var(--halftone-gap, 0.5em);
+}
+
+/* Density wrapper — make any dot surface inside respond to the CARD it sits in,
+   not the viewport, so the same component reads well in a wide hero and a
+   narrow tile. Opt-in: wrap the surface and the breakpoint below densifies it. */
+.ui-dotfit {
+  container: dotfit / inline-size;
+}
+
+@container dotfit (width < 18rem) {
+  .ui-dotfit .ui-dotgrid {
+    --dot-gap: 8px;
+  }
+
+  .ui-dotfit .ui-activity {
+    --activity-cell: 0.6em;
+  }
+
+  .ui-dotfit .ui-waffle {
+    --waffle-size: 5em;
+  }
+}
+
 /* Matrix-reveal wrapper — content wipes in left→right on .is-in. Gate the
    clipped from-state on `scripting: enabled`: with JS off, `.is-in` is never
    toggled, so without the gate the content stays permanently clipped away and
@@ -443,16 +614,52 @@
     forced-color-adjust: none;
     background: LinkText;
   }
+
+  /* The data-bound dot surfaces encode their value via background-color, which
+     HCM flattens. Opt out and pin the lit state to a system colour so the
+     reading survives. The activity ramp's 5 steps can't all stay distinct under
+     HCM — collapse to present (CanvasText) vs absent (the unstyled track). */
+  .ui-waffle i.is-on,
+  .ui-level i.is-on {
+    forced-color-adjust: none;
+    background: LinkText;
+  }
+
+  .ui-level--warn i.is-on {
+    background: Mark;
+  }
+
+  .ui-level--danger i.is-on {
+    background: Highlight;
+  }
+
+  .ui-activity i[data-level='1'],
+  .ui-activity i[data-level='2'],
+  .ui-activity i[data-level='3'],
+  .ui-activity i[data-level='4'] {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
+  /* The gauge is a masked gradient; keep its paint rather than let HCM drop it. */
+  .ui-dotgauge {
+    forced-color-adjust: none;
+  }
 }
 
 /* Print: the dot surfaces carry data (heatmap cells, the segmented meter, the
-   status dot, the masked glyph), so their painted fills must survive the print
-   "economy" default that drops backgrounds. */
+   status dot, the masked glyph, the waffle/activity/level/gauge readings), so
+   their painted fills must survive the print "economy" default that drops
+   backgrounds. */
 @media print {
   .ui-dotmatrix__cell,
   .ui-dotbar i,
   .ui-dot,
-  .ui-icon {
+  .ui-icon,
+  .ui-waffle i,
+  .ui-activity i,
+  .ui-level i,
+  .ui-dotgauge {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
   }

package/css/report.css

@@ -12,7 +12,6 @@
   --report-padding-block: var(--space-2xl);
   --report-gap: var(--space-lg);
   --report-measure: 74ch;
-  --report-page-margin: 18mm;
 
   color: var(--text-soft);
   display: grid;
@@ -312,10 +311,10 @@
 }
 
 @media print {
-  /* Re-tokenises the base 18mm default (base.css) so report margins stay
-     themeable via --report-page-margin. */
+  /* Chromium-class print engines do not reliably resolve custom properties in
+     @page rules. Keep this literal so reports cannot print edge-to-edge. */
   @page {
-    margin: var(--report-page-margin);
+    margin: 18mm;
   }
 
   .ui-report {