@ponchia/ui 0.4.1 → 0.6.0

package/css/feedback.css

@@ -27,6 +27,9 @@
   block-size: 0.5rem;
   margin-block-start: 0.32rem;
   inline-size: 0.5rem;
+
+  /* Keep the tone dot when printing (matches the legend swatch). */
+  print-color-adjust: exact;
 }
 
 .ui-alert > * {
@@ -174,6 +177,9 @@
   block-size: 0.5rem;
   margin-block-start: 0.3rem;
   inline-size: 0.5rem;
+
+  /* Keep the tone dot when printing (matches the legend swatch). */
+  print-color-adjust: exact;
 }
 
 .ui-toast__title {
@@ -206,8 +212,27 @@
   line-height: 1;
 }
 
-.ui-toast__close:hover {
-  color: var(--text);
+/* Touch: enlarge the dismiss/close hit areas to the project's coarse-pointer
+   tap-target floor (2.9rem, as in primitives.css / forms.css) without changing
+   the desktop glyph size. The box is centred so the glyph stays put. */
+@media (pointer: coarse) {
+  .ui-alert__dismiss,
+  .ui-toast__close {
+    display: inline-grid;
+    place-items: center;
+    min-block-size: 2.9rem;
+    min-inline-size: 2.9rem;
+  }
+
+  .ui-alert__dismiss {
+    padding: 0;
+  }
+}
+
+@media (hover: hover) {
+  .ui-toast__close:hover {
+    color: var(--text);
+  }
 }
 
 .ui-toast--accent::before {
@@ -230,6 +255,51 @@
   background: var(--info);
 }
 
+/* Forced-colors (Windows HCM): system colours override the rationed tone
+   colour on the dot + border, so all tones would collapse to one appearance
+   (WCAG 1.4.1 — colour as the sole channel). Carry the tone as a distinct
+   glyph instead; rendered as text it survives HCM as CanvasText. The glyph is
+   inherited via --tone-glyph so one rule covers both alert and toast. */
+@media (forced-colors: active) {
+  .ui-alert::before,
+  .ui-toast::before {
+    background: none;
+    border-radius: 0;
+    content: var(--tone-glyph, '\2022'); /* • neutral default */
+    block-size: auto;
+    inline-size: auto;
+    margin-block-start: 0;
+    font-family: var(--mono);
+    font-weight: 700;
+    line-height: 1.1;
+  }
+
+  .ui-alert--accent,
+  .ui-toast--accent {
+    --tone-glyph: '\25C6'; /* ◆ */
+  }
+
+  .ui-alert--success,
+  .ui-toast--success {
+    --tone-glyph: '\2713'; /* ✓ */
+  }
+
+  .ui-alert--warning,
+  .ui-toast--warning {
+    --tone-glyph: '\0021'; /* ! */
+  }
+
+  .ui-alert--danger,
+  .ui-toast--danger {
+    --tone-glyph: '\2715'; /* ✕ */
+  }
+
+  .ui-alert--info,
+  .ui-toast--info {
+    --tone-glyph: '\69'; /* i */
+  }
+}
+
 /* --- Tooltip — CSS-only, hover/focus, no JS --- */
 
 .ui-tooltip {
@@ -369,6 +439,7 @@
 .ui-progress__bar {
   background: var(--accent);
   block-size: 100%;
+  display: block;
   transition: inline-size var(--duration-base) var(--ease-out);
   inline-size: calc(clamp(0, var(--value, 0), 100) * 1%);
 }
@@ -414,6 +485,7 @@
 .ui-meter__fill {
   background: var(--text-dim);
   block-size: 100%;
+  display: block;
   transition: inline-size var(--duration-base) var(--ease-out);
   inline-size: calc(clamp(0, var(--value, 0), 100) * 1%);
 }
@@ -434,6 +506,10 @@
   background: var(--danger);
 }
 
+.ui-meter--info .ui-meter__fill {
+  background: var(--info);
+}
+
 /* --- Steps — progress through a multi-step flow. Use an <ol>; the
    current step is aria-current="step" (no class), completed steps take
    --done. Counter-numbered markers, hairline connectors. --- */
@@ -502,3 +578,36 @@
   border-color: var(--accent);
   color: var(--button-text);
 }
+
+/* Print: the progress/meter fill is the data (a measured proportion), so its
+   painted background must survive the print "economy" default. The fill tokens
+   are re-pointed to print-legible inks by the global print remap in base.css. */
+@media print {
+  .ui-progress__bar,
+  .ui-meter__fill {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
+
+/* Forced-colors flattens the fill's tone to the system palette and can erase it
+   against the track, dropping the only visual cue of the measured proportion.
+   Re-assert a system colour so the bar stays visible; the tone's *semantic* is
+   carried by the author-written label beside it, not the colour. (a11y C10.)
+   The toned `.ui-meter--TONE .ui-meter__fill` rules are (0,2,0); the bare
+   `.ui-meter__fill` reset is only (0,1,0), so it lost — a toned fill stayed
+   `var(--TONE)` and was forced to black-on-black (component-audit C3). Match the
+   tone specificity here (and set `forced-color-adjust: none`) so every meter,
+   toned or not, paints `Highlight`, mirroring the `.ui-dot` precedent. */
+@media (forced-colors: active) {
+  .ui-progress__bar,
+  .ui-meter__fill,
+  .ui-meter--accent .ui-meter__fill,
+  .ui-meter--success .ui-meter__fill,
+  .ui-meter--warning .ui-meter__fill,
+  .ui-meter--danger .ui-meter__fill,
+  .ui-meter--info .ui-meter__fill {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+}

package/css/fonts.css

@@ -2,10 +2,14 @@
    @ponchia/ui — Doto webfont (dot-matrix display face)
 
    URLs are relative to this file. When the package is consumed through a
-   bundler (Vite/astro/webpack) the `../fonts/*.ttf` references are rewritten
+   bundler (Vite/astro/webpack) the `../fonts/*.woff2` references are rewritten
    and the files emitted automatically. When served statically, ship the
    package's `fonts/` directory next to `css/` and it resolves as-is.
 
+   Shipped as woff2 only (Brotli-compressed) — ~5.7 kB per weight vs ~137 kB
+   uncompressed TTF. woff2 is supported by the whole browser floor (ADR-0002:
+   Chrome 125 / Safari 18 / Firefox 129), so no TTF fallback is carried.
+
    This file is optional: it is bundled into core.css/index.css, but a
    consumer that hosts Doto itself (or overrides `--display` / `--dot-font`)
    can import the rest of the framework without it.
@@ -16,7 +20,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('../fonts/doto-400.ttf') format('truetype');
+  src: url('../fonts/doto-400.woff2') format('woff2');
 }
 
 @font-face {
@@ -24,7 +28,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url('../fonts/doto-500.ttf') format('truetype');
+  src: url('../fonts/doto-500.woff2') format('woff2');
 }
 
 @font-face {
@@ -32,7 +36,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url('../fonts/doto-600.ttf') format('truetype');
+  src: url('../fonts/doto-600.woff2') format('woff2');
 }
 
 @font-face {
@@ -40,7 +44,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url('../fonts/doto-700.ttf') format('truetype');
+  src: url('../fonts/doto-700.woff2') format('woff2');
 }
 
 @font-face {
@@ -48,7 +52,7 @@
   font-style: normal;
   font-weight: 800;
   font-display: swap;
-  src: url('../fonts/doto-800.ttf') format('truetype');
+  src: url('../fonts/doto-800.woff2') format('woff2');
 }
 
 @font-face {
@@ -56,7 +60,7 @@
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src: url('../fonts/doto-900.ttf') format('truetype');
+  src: url('../fonts/doto-900.woff2') format('woff2');
 }
 
 /* Data-saver: never *use* Doto, so the browser never fetches it. The

package/css/forms.css

@@ -77,6 +77,29 @@
   opacity: 0.5;
 }
 
+/* Disabled affordance parity. The text inputs above style :disabled directly;
+   the controls that WRAP a native input (switch/check/segmented) showed no
+   disabled cue and their label kept cursor:pointer — a lie. Mirror the cue via
+   :has(input:disabled); the native-element controls (range/file) take :disabled
+   directly. (a11y/forms review C4.) */
+.ui-range:disabled,
+.ui-file:disabled,
+.ui-switch:has(input:disabled),
+.ui-check:has(input:disabled),
+.ui-segmented__option:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Keep autofilled fields on-theme — the UA's yellow fill otherwise paints over
+   the monochrome surface and breaks the contrast story. (forms review C24.) */
+.ui-input:autofill,
+.ui-search input:autofill {
+  -webkit-text-fill-color: var(--text);
+  box-shadow: inset 0 0 0 100rem var(--bg-elevated);
+  caret-color: var(--text);
+}
+
 .ui-input[aria-invalid='true'],
 .ui-select[aria-invalid='true'],
 .ui-textarea[aria-invalid='true'] {
@@ -221,7 +244,10 @@
 
 .ui-error-summary__title {
   color: var(--danger);
-  font-family: var(--display);
+
+  /* The must-be-read failure heading uses the legible sans, not the low-legibility
+     Doto display face — reserve --display for decorative numerals. (forms C27.) */
+  font-family: var(--sans);
   font-size: var(--text-sm);
   font-weight: 700;
   letter-spacing: var(--tracking-wide);
@@ -262,6 +288,14 @@
   border-color: var(--accent);
 }
 
+/* Keyboard focus ring to match every sibling input (which use a 2px ring); the
+   border-colour shift alone read markedly fainter on this one control. Keyed to
+   :focus-visible on the inner input so it stays keyboard-only. (a11y review C12.) */
+.ui-search:has(input:focus-visible) {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
 .ui-search:focus-within::before {
   background: var(--accent);
 }
@@ -384,6 +418,13 @@
     min-block-size: 2.9rem;
   }
 
+  /* The whole label is the toggle target — float it to the ~44px floor so the
+     small track/box isn't a sub-target on touch (WCAG 2.5.8 — C24). */
+  .ui-switch,
+  .ui-check {
+    min-block-size: 2.9rem;
+  }
+
   .ui-check input {
     block-size: 1.15rem;
     inline-size: 1.15rem;

package/css/generated.css

@@ -0,0 +1,117 @@
+/* ==========================================================================
+   generated — opt-in trust surfaces for AI / system-generated content.
+
+   AI interfaces are becoming common, but most UI systems ship chat bubbles or
+   nothing. Bronto is not a chat framework — it owns the *trust* surfaces around
+   generated content: a marked region, an origin label, and quiet collapsible
+   reasoning / tool-call logs. Pairs with the source/citation layer
+   (css/sources.css). The host owns model metadata, reasoning-visibility policy,
+   tool execution, traces, redaction, and safety. Not imported by core.css.
+   ========================================================================== */
+
+/* --- Generated region — a marked wrapper for machine-authored content. --- */
+.ui-generated {
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--accent);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-xs);
+  padding: 0.85rem 1rem;
+  print-color-adjust: exact;
+}
+
+.ui-generated__label {
+  align-items: center;
+  color: var(--text-dim);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.4rem;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+/* --- Origin label — "AI assisted" / "model output" / "human reviewed". --- */
+.ui-origin-label {
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.35rem;
+  letter-spacing: var(--tracking-wide);
+  padding: 0.08rem 0.55rem;
+  text-transform: uppercase;
+}
+
+.ui-origin-label--ai {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+/* --- Reasoning — a quiet, collapsible "how this was produced" block. --- */
+.ui-reasoning {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+}
+
+.ui-reasoning > summary {
+  color: var(--text-soft);
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-reasoning__body {
+  margin-block-start: var(--space-xs);
+}
+
+/* --- Tool log — a quiet, document-grade record of tool invocations. --- */
+.ui-tool-log {
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+.ui-tool-call {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
+.ui-tool-call > summary {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+}
+
+.ui-tool-call__name {
+  color: var(--text);
+}
+
+.ui-tool-call__status {
+  color: var(--text-dim);
+  margin-inline-start: auto;
+}
+
+.ui-tool-call__body {
+  border-block-start: 1px solid var(--line);
+  color: var(--text-soft);
+  margin: 0;
+  overflow-x: auto;
+  padding: 0.5rem 0.6rem;
+  white-space: pre-wrap;
+}
+
+@media (forced-colors: active) {
+  .ui-generated {
+    border-inline-start-color: CanvasText;
+  }
+}

package/css/legend.css

@@ -0,0 +1,272 @@
+/* ==========================================================================
+   legend — opt-in data keys for charts, reports, and analytical figures.
+
+   A standalone, portable data key: `.ui-legend` reads the Tier-4 `--chart-*`
+   tokens and pairs with any chart (a token-themed inline SVG/canvas figure, or
+   an external engine like Vega-Lite — see docs/vega.md). Not imported by
+   core.css — import it beside css/dataviz.css.
+
+   Bronto paints and positions; it owns no scales, data mapping, or series
+   state. Colour is never the sole channel: a swatch mirrors its chart mark
+   (its colour, plus a `--chart-pattern-*` where the mark uses one) and is
+   always read out by its text label (WCAG 1.4.1). An interactive,
+   series-toggling legend is an optional behavior; the host owns what a
+   toggle hides and announces.
+   ========================================================================== */
+
+.ui-legend {
+  color: var(--text-soft);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: var(--space-2xs) var(--space-md);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-legend--vertical {
+  flex-direction: column;
+}
+
+.ui-legend--compact {
+  font-size: var(--text-2xs);
+  gap: var(--space-2xs) var(--space-sm);
+}
+
+.ui-legend__title {
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-legend__item {
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  gap: 0.45rem;
+}
+
+.ui-legend__label {
+  color: inherit;
+}
+
+.ui-legend__value {
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  margin-inline-start: auto;
+}
+
+.ui-legend__caption {
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+/* Swatch — same token contract as the chart fill: set `--chart-color` (and,
+   where the mark is patterned, `--chart-pattern`) inline, or use a `--N` index
+   helper for the categorical palette. */
+.ui-legend__swatch {
+  background: var(--chart-color, var(--chart-1, var(--accent)));
+  background-image: var(--chart-pattern, none);
+  background-size: var(--chart-pattern-size, 8px);
+  block-size: 0.8rem;
+  border: 1px solid var(--line-strong);
+  flex: 0 0 auto;
+  inline-size: 0.8rem;
+}
+
+.ui-legend__swatch--circle {
+  border-radius: 50%;
+}
+
+.ui-legend__swatch--line {
+  block-size: 0.2rem;
+  border: 0;
+  inline-size: 1.1rem;
+}
+
+/* Glyph/symbol swatch — fill an `.ui-icon` mask with the series colour. */
+.ui-legend__symbol {
+  block-size: 0.95rem;
+  color: var(--chart-color, var(--accent));
+  flex: 0 0 auto;
+  inline-size: 0.95rem;
+}
+
+/* Categorical index helpers: exactly one per palette series (gated against
+   tokens/charts.js by check-legend). They set only the colour, so a swatch
+   stays a faithful key — add `--chart-pattern` (inline, or from dataviz.css)
+   only where the chart mark itself is patterned. */
+.ui-legend__swatch--1 {
+  --chart-color: var(--chart-1);
+}
+
+.ui-legend__swatch--2 {
+  --chart-color: var(--chart-2);
+}
+
+.ui-legend__swatch--3 {
+  --chart-color: var(--chart-3);
+}
+
+.ui-legend__swatch--4 {
+  --chart-color: var(--chart-4);
+}
+
+.ui-legend__swatch--5 {
+  --chart-color: var(--chart-5);
+}
+
+.ui-legend__swatch--6 {
+  --chart-color: var(--chart-6);
+}
+
+.ui-legend__swatch--7 {
+  --chart-color: var(--chart-7);
+}
+
+.ui-legend__swatch--8 {
+  --chart-color: var(--chart-8);
+}
+
+/* Continuous colour ramp. Author supplies the min/mid/max tick *text*; the
+   track interpolates the sequential ramp in OKLCH (a single perceptual hue,
+   so no banding and no muddy midpoint). `--diverging` swaps in the 7-stop
+   diverging ramp around its neutral centre. */
+.ui-legend--gradient {
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+.ui-legend__track {
+  background: linear-gradient(
+    90deg in oklch,
+    var(--chart-seq-1),
+    var(--chart-seq-2),
+    var(--chart-seq-3),
+    var(--chart-seq-4),
+    var(--chart-seq-5),
+    var(--chart-seq-6)
+  );
+  block-size: 0.7rem;
+  border: 1px solid var(--line);
+}
+
+.ui-legend--diverging .ui-legend__track {
+  background: linear-gradient(
+    90deg in oklch,
+    var(--chart-div-1),
+    var(--chart-div-2),
+    var(--chart-div-3),
+    var(--chart-div-4),
+    var(--chart-div-5),
+    var(--chart-div-6),
+    var(--chart-div-7)
+  );
+}
+
+.ui-legend__ticks {
+  color: var(--text-dim);
+  display: flex;
+  font-size: var(--text-2xs);
+  justify-content: space-between;
+}
+
+.ui-legend__tick {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Threshold / binned key — a `swatch | range-label` grid. Author the swatch
+   and label as direct children (no `__item` wrapper) so the columns align. */
+.ui-legend--threshold {
+  align-items: center;
+  display: grid;
+  gap: 0.35rem var(--space-sm);
+  grid-template-columns: auto 1fr;
+}
+
+/* With-values — align swatch | label | value columns across every row. */
+.ui-legend--with-values {
+  display: grid;
+  gap: 0.35rem var(--space-md);
+  grid-template-columns: auto 1fr auto;
+}
+
+.ui-legend--with-values .ui-legend__item {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.ui-legend--with-values .ui-legend__value {
+  margin-inline-start: 0;
+  text-align: end;
+}
+
+/* Interactive entries are real <button aria-pressed> controls. Bronto styles
+   the control + the inactive state; behaviors/legend.js (optional) flips
+   aria-pressed and emits an event. The host hides the series and announces it.
+   Scoped to button/role=button so a non-button entry never gets cursor:pointer
+   — a pointer-only affordance with no keyboard path is a lie (WCAG 2.1.1 — C11;
+   the behavior ignores and warns about non-button entries to match). */
+.ui-legend--interactive .ui-legend__item:is(button, [role='button']) {
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding-block: 0.15rem;
+  padding-inline: 0.3rem;
+  text-align: start;
+}
+
+.ui-legend--interactive .ui-legend__item:is(button, [role='button']):focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.ui-legend__item.is-inactive,
+.ui-legend__item[aria-pressed='false'] {
+  opacity: 0.45;
+}
+
+.ui-legend__item.is-inactive .ui-legend__label,
+.ui-legend__item[aria-pressed='false'] .ui-legend__label {
+  text-decoration: line-through;
+}
+
+/* Forced colours: keep the real swatch hue (it mirrors the chart mark) behind
+   a system-coloured border so it survives, and drop the opacity dim (it does
+   not read) — the line-through still marks an inactive series. */
+@media (forced-colors: active) {
+  .ui-legend__swatch {
+    border: 1px solid CanvasText;
+    forced-color-adjust: none;
+  }
+
+  /* Keep the ramp's hues instead of collapsing to one system colour (the tick
+     labels still carry the scale either way). */
+  .ui-legend__track {
+    forced-color-adjust: none;
+  }
+
+  .ui-legend__item.is-inactive,
+  .ui-legend__item[aria-pressed='false'] {
+    opacity: 1;
+  }
+}
+
+/* Print: meaning-carrying colour must survive the "economy" default. */
+@media print {
+  .ui-legend__swatch,
+  .ui-legend__track {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}