@ponchia/ui 0.4.1 → 0.6.0

package/css/marks.css

@@ -0,0 +1,174 @@
+/* ==========================================================================
+   marks — opt-in evidence/emphasis marks for running text.
+
+   The prose counterpart to the SVG annotations layer: annotations call out a
+   figure, marks call out a sentence. Sober, report-grade highlights for docs,
+   audits, and generated (LLM) reports — not a hand-drawn Rough-Notation look.
+   Not imported by core.css.
+
+   `.ui-mark` is an inline highlight (put it on a `<mark>`); `.ui-bracket-note`
+   brackets a whole passage. Monochrome by default — the rationed accent is
+   opt-in via `--accent`; status tones are only for status-bearing emphasis.
+   ========================================================================== */
+
+.ui-mark {
+  /* 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, 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%;
+  border-radius: 0.12em;
+  box-decoration-break: clone;
+  color: inherit;
+  padding-block: 0.05em;
+  padding-inline: 0.18em;
+}
+
+/* Tones set the mark colour. Default is neutral ink; `--accent` is the
+   rationed accent; status tones only for status-bearing emphasis. */
+.ui-mark--accent {
+  --mark-color: var(--accent);
+}
+
+.ui-mark--success {
+  --mark-color: var(--success);
+}
+
+.ui-mark--warning {
+  --mark-color: var(--warning);
+}
+
+.ui-mark--danger {
+  --mark-color: var(--danger);
+}
+
+.ui-mark--info {
+  --mark-color: var(--info);
+}
+
+.ui-mark--muted {
+  --mark-color: var(--text-dim);
+}
+
+/* Styles change how the mark is drawn (no highlight fill). They wrap across
+   lines natively (text-decoration) or with the cloned box (border). */
+.ui-mark--underline {
+  background: none;
+  padding: 0;
+  text-decoration-color: var(--mark-color, var(--text-dim));
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.12em;
+  text-underline-offset: 0.18em;
+}
+
+.ui-mark--box {
+  background: none;
+  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, 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) {
+  /* 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;
+  }
+}
+
+@keyframes ui-mark-draw {
+  from {
+    background-size: 0% 100%;
+  }
+
+  to {
+    background-size: 100% 100%;
+  }
+}
+
+/* A passage bracket: a tick down the inline-start with an optional label.
+   The prose analogue of `ui-annotation--bracket`. */
+.ui-bracket-note {
+  --mark-color: var(--line-strong);
+
+  border-inline-start: 2px solid var(--mark-color);
+  display: block;
+  padding-inline-start: var(--space-md);
+}
+
+.ui-bracket-note__label {
+  color: var(--mark-color);
+  display: block;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  margin-block-end: var(--space-2xs);
+  text-transform: uppercase;
+}
+
+.ui-bracket-note--accent {
+  --mark-color: var(--accent);
+}
+
+.ui-bracket-note--success {
+  --mark-color: var(--success);
+}
+
+.ui-bracket-note--warning {
+  --mark-color: var(--warning);
+}
+
+.ui-bracket-note--danger {
+  --mark-color: var(--danger);
+}
+
+.ui-bracket-note--info {
+  --mark-color: var(--info);
+}
+
+/* Forced colours: only the highlight `background` is dropped, so add an
+   underline to the plain highlight mark to keep it visible. The styled marks
+   already carry a surviving channel — `--underline`/`--strike` use
+   text-decoration and `--box` a border — so they're excluded (otherwise the
+   underline would overwrite `--strike`'s line-through and lose its meaning). */
+@media (forced-colors: active) {
+  .ui-mark:not(.ui-mark--underline, .ui-mark--box, .ui-mark--strike) {
+    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));
 }
 
@@ -649,6 +735,24 @@
   padding: 0.18rem 0.4rem;
 }
 
+/* --- Shortcut hint — one or more .ui-kbd keys as a chord or sequence, with a
+   connective __sep ("+" for a chord, "then" for a sequence). The reusable
+   keyboard-hint primitive (menu items, buttons, tooltips, command lists). --- */
+
+.ui-shortcut {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.25rem;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.ui-shortcut__sep {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
 /* --- Timeline — vertical event list on a hairline spine. Use an <ol>;
    each <li> is a __item with an optional __time label. aria-current marks
    the live/most-recent event (accent marker). --- */

package/css/report.css

@@ -7,6 +7,9 @@
    ========================================================================== */
 
 .ui-report {
+  /* Declare override-surface tokens first so authors can set them. */
+  --report-width: 72rem;
+  --report-padding-block: var(--space-2xl);
   --report-gap: var(--space-lg);
   --report-measure: 74ch;
   --report-page-margin: 18mm;
@@ -14,9 +17,9 @@
   color: var(--text-soft);
   display: grid;
   gap: var(--report-gap);
-  inline-size: min(100%, var(--report-width, 72rem));
+  inline-size: min(100%, var(--report-width));
   margin-inline: auto;
-  padding: var(--report-padding-block, var(--space-2xl)) var(--space-md);
+  padding: var(--report-padding-block) var(--space-md);
 }
 
 .ui-report--compact {
@@ -42,7 +45,7 @@
   padding-block: var(--space-xl) var(--space-lg);
 }
 
-.ui-report__header {
+.ui-report__head {
   align-items: end;
   border-block-end: 1px solid var(--line);
   display: flex;
@@ -56,6 +59,7 @@
   color: var(--text);
   font-family: var(--display);
   font-size: calc(var(--text-xl) * 1.35);
+  font-weight: var(--display-weight-strong);
   letter-spacing: 0;
   line-height: 1.05;
   margin: 0;
@@ -171,6 +175,7 @@
   color: var(--text);
   font-family: var(--display);
   font-size: var(--text-xl);
+  font-weight: var(--display-weight);
   letter-spacing: 0;
   line-height: 1.1;
   margin: 0;
@@ -195,8 +200,7 @@
   margin: 0;
 }
 
-.ui-report__caption,
-.ui-chart__caption {
+.ui-report__caption {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
@@ -216,82 +220,47 @@
   padding-block-start: var(--space-md);
 }
 
-.ui-chart {
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
+/* --- Comparison layout ---
+   The report layer's "A vs B" / before-after grid — the side-by-side layout
+   reports lean on that the grammar was missing. Fluid-first: columns wrap to
+   a single stack on a narrow screen via auto-fit, so two panels never
+   overflow. `ui-compare__col` is one side, `ui-compare__head` labels it.
+   `ui-compare--2up` pins exactly two equal columns for a hard before/after
+   pairing (still collapsing to one column on a phone). */
+.ui-compare {
   display: grid;
-  gap: var(--space-sm);
-  padding: var(--space-md);
-}
-
-.ui-chart__legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-xs);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.ui-chart__legend > * {
-  align-items: center;
-  color: var(--text-soft);
-  display: inline-flex;
-  font-family: var(--mono);
-  font-size: var(--text-xs);
-  gap: 0.45rem;
+  gap: var(--space-md);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
 }
 
-.ui-chart__swatch {
-  background: var(--chart-color, var(--chart-1, var(--accent)));
-  background-image: var(--chart-pattern, var(--chart-pattern-1, none));
-  background-size: var(--chart-pattern-size, 8px);
-  border: 1px solid var(--line-strong);
-  block-size: 0.8rem;
-  flex: 0 0 auto;
-  inline-size: 0.8rem;
+.ui-compare--2up {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.ui-chart__plot {
-  display: grid;
-  gap: var(--space-xs);
+@media (max-width: 33rem) {
+  .ui-compare--2up {
+    grid-template-columns: 1fr;
+  }
 }
 
-.ui-chart__bar {
-  --chart-value: 0%;
-
+.ui-compare__col {
+  align-content: start;
   display: grid;
-  gap: 0.35rem;
-}
-
-.ui-chart__label {
-  align-items: center;
-  color: var(--text-soft);
-  display: flex;
-  font-family: var(--mono);
-  font-size: var(--text-xs);
   gap: var(--space-sm);
-  justify-content: space-between;
 }
 
-.ui-chart__track {
-  background: var(--panel-soft);
-  border: 1px solid var(--line);
-  block-size: 0.8rem;
-  min-inline-size: 0;
-}
-
-.ui-chart__fill {
-  background: var(--chart-color, var(--chart-1, var(--accent)));
-  background-image: var(--chart-pattern, var(--chart-pattern-1, none));
-  background-size: var(--chart-pattern-size, 8px);
-  block-size: 100%;
-  inline-size: clamp(0%, var(--chart-value), 100%);
+.ui-compare__head {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
 }
 
-.ui-chart__fallback {
-  margin-block-start: var(--space-sm);
-}
+/* A chart is NOT a bronto component — it needs scales + data binding, which the
+   analytical layer refuses to own. Theme Vega-Lite with `@ponchia/ui/vega`
+   (docs/vega.md), or hand-author a token-themed inline `<svg>`, and drop it in a
+   `.ui-report__figure` with a `.ui-report__caption` + a `.ui-legend` key. */
 
 .ui-print-only {
   display: none !important;
@@ -331,28 +300,17 @@
     padding: 0;
   }
 
-  /* Meaning-carrying chart fills must survive the print "economy" default
-     (which drops backgrounds) without relying on a `.ui-print-exact`
-     ancestor. The accent on `.ui-report__summary` is a border, so it already
-     prints. */
-  .ui-chart__fill,
-  .ui-chart__swatch {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-
   .ui-report__cover {
     min-block-size: auto;
   }
 
   .ui-report__cover,
-  .ui-report__header,
+  .ui-report__head,
   .ui-report__section,
   .ui-report__summary,
   .ui-report__finding,
   .ui-report__evidence,
-  .ui-report__figure,
-  .ui-chart {
+  .ui-report__figure {
     break-inside: avoid;
   }