@ponchia/ui 0.5.0 → 0.6.0

package/css/feedback.css

@@ -212,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 {
@@ -420,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%);
 }
@@ -465,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%);
 }
@@ -485,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. --- */
@@ -553,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/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/legend.css

@@ -1,10 +1,10 @@
 /* ==========================================================================
    legend — opt-in data keys for charts, reports, and analytical figures.
 
-   A standalone, portable successor to the report kit's inline chart legend:
-   `.ui-legend` reads the Tier-4 `--chart-*` tokens and pairs with any chart
-   (Bronto's own `.ui-chart` bars, an SVG/canvas figure, or an external chart
-   engine). Not imported by core.css — import it beside css/dataviz.css.
+   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
@@ -205,12 +205,16 @@
 
 .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. */
-.ui-legend--interactive .ui-legend__item {
+   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);
@@ -222,7 +226,7 @@
   text-align: start;
 }
 
-.ui-legend--interactive .ui-legend__item:focus-visible {
+.ui-legend--interactive .ui-legend__item:is(button, [role='button']):focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }

package/css/marks.css

@@ -12,12 +12,20 @@
    ========================================================================== */
 
 .ui-mark {
-  --mark-color: var(--line-strong);
-
+  /* No base `--mark-color`: each draw style supplies its own fallback default
+     (highlight/box keep the subtle `--line-strong`; the full-opacity
+     `--underline`/`--strike` decorations default to the darker `--text-dim` so
+     they read on a light surface — C33). A tone modifier SETS `--mark-color`,
+     so it still wins everywhere the fallback would otherwise apply. */
+
+  /* A bare `<mark>` carries the UA `background-color: yellow`; the translucent
+     highlight gradient sits on top of it, so without this reset the UA yellow
+     bleeds through (an author declaration always beats the UA origin). */
+  background-color: transparent;
   background-image: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--mark-color) 30%, transparent),
-    color-mix(in srgb, var(--mark-color) 30%, transparent)
+    color-mix(in srgb, var(--mark-color, var(--line-strong)) 30%, transparent),
+    color-mix(in srgb, var(--mark-color, var(--line-strong)) 30%, transparent)
   );
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -59,7 +67,7 @@
 .ui-mark--underline {
   background: none;
   padding: 0;
-  text-decoration-color: var(--mark-color);
+  text-decoration-color: var(--mark-color, var(--text-dim));
   text-decoration-line: underline;
   text-decoration-thickness: 0.12em;
   text-underline-offset: 0.18em;
@@ -67,21 +75,24 @@
 
 .ui-mark--box {
   background: none;
-  border: 1px solid var(--mark-color);
+  border: 1px solid var(--mark-color, var(--line-strong));
   border-radius: var(--radius-sm);
 }
 
 .ui-mark--strike {
   background: none;
   padding: 0;
-  text-decoration-color: var(--mark-color);
+  text-decoration-color: var(--mark-color, var(--text-dim));
   text-decoration-line: line-through;
 }
 
 /* Draw-on highlight sweep. Only the highlight fill animates, and only when
    motion is welcome — reduced-motion keeps the resting full highlight. */
 @media (prefers-reduced-motion: no-preference) {
-  .ui-mark--draw {
+  /* The sweep animates `background-size`, i.e. the highlight FILL — so it is
+     inert on the no-fill styles (underline/box/strike). Scope it out rather
+     than let `--draw` look applied but do nothing. (content review C14.) */
+  .ui-mark--draw:not(.ui-mark--underline, .ui-mark--box, .ui-mark--strike) {
     animation: ui-mark-draw 0.6s var(--ease, ease) both;
   }
 }
@@ -120,6 +131,10 @@
   --mark-color: var(--accent);
 }
 
+.ui-bracket-note--success {
+  --mark-color: var(--success);
+}
+
 .ui-bracket-note--warning {
   --mark-color: var(--warning);
 }
@@ -142,3 +157,18 @@
     text-decoration-line: underline;
   }
 }
+
+/* Print: the highlight is a painted background, so force it through the print
+   "economy" default that would otherwise drop it. Settle the draw sweep to its
+   resting full highlight in case it is mid-animation when the page is printed. */
+@media print {
+  .ui-mark {
+    -webkit-print-color-adjust: exact;
+    background-size: 100% 100%;
+    print-color-adjust: exact;
+  }
+
+  .ui-mark--draw {
+    animation: none;
+  }
+}

package/css/motion.css

@@ -1,8 +1,6 @@
 /* ==========================================================================
    motion — keyframes + animation utilities
    Restrained, dot-flavoured. Everything collapses under reduced-motion.
-   Keyframes from the legacy responsive layer live here so consumers that
-   import only core.css keep their existing animations.
    ========================================================================== */
 
 @keyframes pulseDot {
@@ -18,45 +16,6 @@
   }
 }
 
-@keyframes scan {
-  0% {
-    transform: translateY(-120%);
-  }
-
-  100% {
-    transform: translateY(320%);
-  }
-}
-
-@keyframes growBar {
-  to {
-    transform: scaleX(1);
-  }
-}
-
-@keyframes drawLine {
-  from {
-    opacity: 0;
-    stroke-dasharray: 0 999;
-  }
-
-  to {
-    opacity: 1;
-    stroke-dasharray: 999 0;
-  }
-}
-
-@keyframes pulseNode {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.08);
-  }
-}
-
 @keyframes pulseRing {
   0% {
     opacity: 0.7;
@@ -233,9 +192,13 @@
   animation-delay: 360ms;
 }
 
-/* Reveal-on-scroll: add .ui-reveal, toggle .is-visible via IntersectionObserver.
-   Degrades to visible with no JS. */
-@media (prefers-reduced-motion: no-preference) {
+/* Reveal-on-scroll: add .ui-reveal, then toggle .is-visible (e.g. from an
+   IntersectionObserver you own) to play it in. For a ZERO-JS reveal, use
+   `.ui-scroll-reveal` (scroll-driven, CSS-only) instead — that is the path for
+   an LLM-authored or no-build report. The hidden initial state below is gated
+   on `scripting: enabled`, so with scripting OFF the content is fully visible
+   and never silently hidden behind a script that will never run. */
+@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
   .ui-reveal {
     opacity: 0;
     transform: translateY(14px);
@@ -365,14 +328,31 @@
     scroll-behavior: auto;
   }
 
+  /* !important is required: inside @layer bronto, layered rules lose to
+     unlayered author rules at equal specificity — only a layered !important
+     stays authoritative over unlayered declarations (CSS cascade §6.2). */
   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
+
+    /* Zero the delay too: `.ui-stagger` children animate `uiRise` with
+       `fill-mode: both`, so a non-zero `animation-delay` holds them at the
+       `opacity: 0` from-state for the full delay and then pops them in — the
+       exact late flash a reduced-motion user asked to avoid (C4). */
+    animation-delay: 0s !important;
     transition-duration: 0.01ms !important;
   }
 
+  /* Freeze the shimmer gradient mid-sweep would expose a diagonal band.
+     Flatten the skeleton to its base panel colour instead. */
+  .ui-skeleton {
+    animation: none;
+    background: var(--panel-soft);
+    background-size: auto;
+  }
+
   .ui-reveal {
     opacity: 1 !important;
     transform: none !important;

package/css/navigation.css

@@ -80,3 +80,10 @@
     transform: translateY(1px);
   }
 }
+
+@media (pointer: coarse) {
+  .ui-themetoggle__button {
+    min-block-size: 2.9rem;
+    padding-inline: 0.9rem;
+  }
+}

package/css/overlay.css

@@ -249,7 +249,7 @@ dialog.ui-modal[open]::backdrop {
 }
 
 .ui-menu__item::before {
-  background: currentColor;
+  background: currentcolor;
   border-radius: 50%;
   content: '';
   block-size: 0.3rem;
@@ -275,6 +275,15 @@ dialog.ui-modal[open]::backdrop {
   }
 }
 
+.ui-menu__item:focus-visible {
+  background: var(--bg-accent);
+  color: var(--text);
+}
+
+.ui-menu__item:focus-visible::before {
+  opacity: 1;
+}
+
 /* --- Combobox: an input with a filtered listbox popup (APG pattern,
    wired by initCombobox). Reuses the menu surface tokens. --- */
 .ui-combobox {
@@ -363,6 +372,14 @@ dialog.ui-modal[open]::backdrop {
     inset-inline: 0;
     min-inline-size: 0;
   }
+
+  /* Let the combobox shed its 14rem floor and span the viewport so the input
+     (and its full-width listbox) can't overflow a narrow screen. */
+  .ui-combobox {
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -376,3 +393,16 @@ dialog.ui-modal[open]::backdrop {
     transition: none;
   }
 }
+
+/* Forced-colors drops both `backdrop-filter: blur()` and the `color-mix()`
+   scrim, so the dialog/lightbox would float over an undimmed page with no
+   separation. Re-assert a translucent scrim with `forced-color-adjust: none`
+   so the layering reads in High Contrast, matching the meter/dot precedent
+   (C28). */
+@media (forced-colors: active) {
+  .ui-modal::backdrop,
+  .ui-lightbox::backdrop {
+    background: color-mix(in srgb, #000 50%, transparent);
+    forced-color-adjust: none;
+  }
+}

package/css/primitives.css

@@ -87,7 +87,11 @@
    (island-safe). Inert until applied, so existing layouts/baselines
    are unaffected. */
 .ui-cq {
-  container: var(--cq-name, bronto) / inline-size;
+  /* The container-name is fixed: the `@container bronto (…)` collapse queries
+     below hardcode `bronto`. There is no `--cq-name` knob — the name is not
+     author-tunable, and an author-set `--cq-name` is simply ignored (nothing
+     reads it). Name a different container yourself if you need a custom scope. */
+  container: bronto / inline-size;
 }
 
 @container bronto (max-width: 34rem) {
@@ -196,8 +200,9 @@
   font-family: var(--display);
   font-size: 1.9rem;
   font-variant-numeric: tabular-nums;
-  letter-spacing: 0.01em;
-  line-height: 1;
+  font-weight: var(--display-weight-strong);
+  letter-spacing: 0.02em;
+  line-height: 1.05;
 }
 
 .ui-stat__delta,
@@ -216,6 +221,22 @@
   color: var(--danger);
 }
 
+/* A direction arrow is the non-colour channel — colour alone (success/danger)
+   fails WCAG 1.4.1, so the tile carries the same ▲/▼ glyph as `.ui-delta`
+   (C13). Marked aria-hidden-equivalent by being generated content; the sign is
+   still in the author's text ("+12%"). */
+.ui-stat__delta.is-pos::before,
+.ui-app-metric__delta.is-pos::before {
+  content: '▲ ';
+  font-size: 0.85em;
+}
+
+.ui-stat__delta.is-neg::before,
+.ui-app-metric__delta.is-neg::before {
+  content: '▼ ';
+  font-size: 0.85em;
+}
+
 /* --- Numeric value vocabulary ---
    The same tabular/aligned/tone intent the table has shipped since
    0.1.0, but freed from `.ui-table` so cards, stats and inline figures
@@ -238,6 +259,58 @@
   color: var(--text-dim);
 }
 
+/* --- Trend delta ---
+   A standalone change indicator: a direction arrow (the non-colour channel,
+   WCAG 1.4.1) plus the figure, tabular so a column of deltas aligns.
+   Direction sets the glyph AND the conventional tone (up = positive,
+   down = negative). When "up" is the bad direction (latency, error rate,
+   cost, churn), add `ui-delta--invert` to swap only the tone — the arrow
+   still reports real direction. Pair with words; the arrow is visual, not a
+   substitute for stating the change. */
+.ui-delta {
+  align-items: baseline;
+  color: var(--text-soft);
+  display: inline-flex;
+  font-variant-numeric: tabular-nums;
+  gap: 0.2em;
+}
+
+.ui-delta::before {
+  font-size: 0.85em;
+}
+
+.ui-delta--up {
+  color: var(--success);
+}
+
+.ui-delta--up::before {
+  content: '▲';
+}
+
+.ui-delta--down {
+  color: var(--danger);
+}
+
+.ui-delta--down::before {
+  content: '▼';
+}
+
+.ui-delta--flat {
+  color: var(--text-dim);
+}
+
+.ui-delta--flat::before {
+  content: '—';
+}
+
+.ui-delta--invert.ui-delta--up {
+  color: var(--danger);
+}
+
+.ui-delta--invert.ui-delta--down {
+  color: var(--success);
+}
+
 /* --- Eyebrow / section label — dot-matrix face --- */
 
 .ui-eyebrow {
@@ -338,6 +411,15 @@
   opacity: 0.45;
 }
 
+/* aria-disabled keeps the element in the a11y tree but the browser does NOT
+   block activation (a real <a class="ui-button" aria-disabled> still navigates,
+   a <button> still fires). Looking dead while staying live is the defect — kill
+   pointer activation. (a11y review C3; native :disabled already inert.) */
+.ui-button[aria-disabled='true'],
+.ui-link[aria-disabled='true'] {
+  pointer-events: none;
+}
+
 .ui-button:active {
   transform: translateY(1px);
 }
@@ -401,8 +483,8 @@
 
 .ui-link--arrow::after,
 .ui-link--cta::after {
-  border-inline-end: 1px solid currentColor;
-  border-block-start: 1px solid currentColor;
+  border-inline-end: 1px solid currentcolor;
+  border-block-start: 1px solid currentcolor;
   content: '';
   block-size: 0.42rem;
   transform: rotate(45deg);
@@ -459,6 +541,10 @@
    (the soft tint can't carry 4.5:1 small-bold tone-on-tone — WCAG). */
 .ui-badge--accent {
   background: var(--accent-soft);
+
+  /* Accent mixes 45% (vs 40% for the status tones below) on purpose: the brand
+     hue is lower-chroma here than the status hues, so it needs a touch more to
+     read at the same border weight. Intentional, not a copy-paste slip. (Q15.) */
   border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
 }