tuffgal 0.1.0-alpha.9 → 0.2.0-alpha.2

package/dist/reporter/assets/report.css

@@ -57,6 +57,15 @@
   box-sizing: border-box;
 }
 
+/* The story filter prunes stories, breakpoint groups, and actions by toggling
+   the native `hidden` attribute. Those are layout containers, so a future
+   `display:` rule on `.action`/`.breakpoint-group` would outrank the UA
+   `[hidden]` default and silently resurrect filtered rows as visible and
+   keyboard-focusable. Pin it so `hidden` always wins. */
+[hidden] {
+  display: none !important;
+}
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -144,14 +153,59 @@ h2 {
   text-wrap: balance;
 }
 
-.summary {
+/* Environment-mismatch banner, first inside <main>. The "warning" meaning is
+   carried by the heading word + body copy, never by color alone (1.4.1). Body
+   text stays --text (≥4.5:1); the red accent lives only on the left border (a
+   non-text ≥3:1 cue, mirroring .action-error). The list of diverging keys reads
+   as monospace <code> tokens. */
+.env-mismatch {
   margin-top: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--failed);
 }
 
-.summary-list {
+.env-mismatch h2 {
+  margin-top: 0.25rem;
+  color: var(--changed);
+}
+
+.env-mismatch p {
+  margin: 0.5rem 0;
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  text-wrap: pretty;
+}
+
+.env-mismatch ul {
   display: flex;
   flex-wrap: wrap;
-  gap: 1.25rem;
+  gap: 0.5rem;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.env-mismatch li {
+  color: var(--changed);
+}
+
+/* Deleted (orphaned-baseline) section, a peer landmark after the stories. */
+.deleted {
+  margin-top: 0.5rem;
+}
+
+.deleted p {
+  margin: 0 0 0.5rem;
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  text-wrap: pretty;
+}
+
+.deleted ul {
   margin: 0;
   padding: 0.75rem 1rem;
   list-style: none;
@@ -159,8 +213,24 @@ h2 {
   border: 1px solid var(--border);
 }
 
-.summary-item:not(.coverage) + .summary-item.coverage {
-  margin-left: auto;
+.deleted li {
+  padding: 0.15rem 0;
+  color: var(--text);
+}
+
+.summary {
+  margin-top: 0.5rem;
+}
+
+.summary-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  list-style: none;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
 }
 
 .summary-item {
@@ -172,27 +242,206 @@ h2 {
 
 .summary-item .count {
   font-weight: 600;
+  color: var(--text-subtle);
 }
 
-.summary-item .label {
-  color: var(--text-muted);
+/* Each status total is a single-select filter styled as a colorful, button-like
+   pill keyed to its status accent (aligned to the .chip idiom). Its sibling count
+   precedes it outside the button. Default (aria-pressed=false) is an OUTLINE pill:
+   transparent background, status-colored label + 1px status-colored border. Hover
+   adds a faint status tint; pressed becomes a FILLED pill (status background,
+   paired --*-fg label) with bold weight. The 1px solid status border on every
+   state guarantees a perceivable non-text edge (1.4.11); label/fg pairings clear
+   4.5:1 on --bg-elevated in both themes (1.4.3). Pressed is never color-alone
+   (1.4.1): it is the only filled + bold pill, readable without hue. Target size
+   ≥24×24 via min-height/min-width (2.5.8). Stays a <button>: it filters in place,
+   never navigates. */
+.summary-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 24px;
+  min-width: 24px;
+  padding: 0.2rem 0.6rem;
+  line-height: 1.2;
+  border: 1px solid var(--border-bright);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+  transition-property: scale, color, background-color, border-color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
 }
 
-.summary-item[data-status='pass'] .indicator {
+.summary-filter[aria-pressed='true'] {
+  cursor: default;
+  user-select: none;
+  font-weight: 600;
+}
+
+.summary-filter:active {
+  scale: 0.96;
+}
+
+/* Status pills: OUTLINE by default (status label + status border, transparent
+   bg), faint status tint on hover, FILLED on pressed (status bg + paired --*-fg
+   label). The "all" total stays NEUTRAL on every state: --accent equals --new, so
+   tinting "all" blue would falsely imply the "new" filter. Status label + border
+   clear their contrast floors on --bg-elevated in both themes; each status token
+   paired with its --*-fg fill clears 4.5:1. */
+.summary-item[data-status='pass'] .summary-filter {
   color: var(--pass);
+  border-color: var(--pass);
+}
+
+.summary-item[data-status='pass'] .summary-filter:hover {
+  background: color-mix(in srgb, var(--pass) 15%, transparent);
+}
+
+.summary-item[data-status='pass'] .summary-filter[aria-pressed='true'] {
+  background: var(--pass);
+  color: var(--pass-fg);
 }
 
-.summary-item[data-status='changed'] .indicator {
+.summary-item[data-status='changed'] .summary-filter {
   color: var(--changed);
+  border-color: var(--changed);
+}
+
+.summary-item[data-status='changed'] .summary-filter:hover {
+  background: color-mix(in srgb, var(--changed) 15%, transparent);
+}
+
+.summary-item[data-status='changed'] .summary-filter[aria-pressed='true'] {
+  background: var(--changed);
+  color: var(--changed-fg);
 }
 
-.summary-item[data-status='failed'] .indicator {
+.summary-item[data-status='failed'] .summary-filter {
   color: var(--failed);
+  border-color: var(--failed);
+}
+
+.summary-item[data-status='failed'] .summary-filter:hover {
+  background: color-mix(in srgb, var(--failed) 15%, transparent);
+}
+
+.summary-item[data-status='failed'] .summary-filter[aria-pressed='true'] {
+  background: var(--failed);
+  color: var(--failed-fg);
+}
+
+.summary-item[data-status='new'] .summary-filter {
+  color: var(--new);
+  border-color: var(--new);
+}
+
+.summary-item[data-status='new'] .summary-filter:hover {
+  background: color-mix(in srgb, var(--new) 15%, transparent);
+}
+
+.summary-item[data-status='new'] .summary-filter[aria-pressed='true'] {
+  background: var(--new);
+  color: var(--new-fg);
+}
+
+/* "all" stays NEUTRAL — never a status color, never blue. Pressed is a filled
+   neutral pill (it is pressed-by-default at load, so this is the resting view). */
+.summary-item[data-status='all'] .summary-filter {
+  color: var(--text);
+  border-color: var(--border-bright);
+}
+
+.summary-item[data-status='all'] .summary-filter[aria-pressed='true'] {
+  background: var(--bg);
+  color: var(--text);
+}
+
+.summary-filter:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Breakpoint filter — the SECOND, independent single-select filter dimension,
+   rendered below the status totals inside the summary region (only for
+   multi-breakpoint runs). A role="group" row of neutral pills; report.js ANDs it
+   with the status filter. The row sits on the page --bg with a top gap that also
+   guarantees ≥24px vertical spacing between the two pill rows (2.5.8). */
+.breakpoint-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+/* Neutral pills — no status hue, so the two filter rows read as siblings by
+   geometry, not color. Same pill geometry/radius as the status filter.
+   Default is an OUTLINE pill: transparent bg, --text-muted border (≥3:1 vs --bg
+   in both themes → 1.4.11), --text label (≥4.5:1 → 1.4.3). Hover brightens the
+   border + adds a faint neutral tint. Pressed is a FILLED pill: --text fill,
+   --bg label, bold weight — the ONLY filled + bold pill, so the pressed state is
+   never conveyed by color alone (1.4.1); the inverse fill clears 4.5:1 in both
+   themes. Focus ring is --accent 2px / offset 2px, painted on the page --bg
+   outside the pill — identical to the status filter. Target size ≥24×24 via
+   min-height/min-width (2.5.8). Stays a <button>: it filters in place. */
+.breakpoint-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 24px;
+  min-width: 24px;
+  padding: 0.2rem 0.6rem;
+  line-height: 1.2;
+  border: 1px solid var(--text-muted);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+  transition-property: scale, color, background-color, border-color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+
+.breakpoint-filter .breakpoint-name {
+  color: inherit;
+  font-weight: inherit;
+  text-transform: none;
 }
 
-.summary-item.coverage .coverage-detail {
+.breakpoint-filter .breakpoint-dimensions {
   color: var(--text-subtle);
-  font-size: 0.8125rem;
+}
+
+.breakpoint-filter:hover:not([aria-pressed='true']) {
+  border-color: var(--text);
+  background: color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+.breakpoint-filter[aria-pressed='true'] {
+  cursor: default;
+  user-select: none;
+  font-weight: 600;
+  background: var(--text);
+  color: var(--bg);
+  border-color: var(--text);
+}
+
+/* The pressed pill's dimensions ride the inverse fill: --bg on --text is the
+   same ≥4.5:1 pair as the label, so they stay legible. */
+.breakpoint-filter[aria-pressed='true'] .breakpoint-dimensions {
+  color: color-mix(in srgb, var(--bg) 65%, var(--text));
+}
+
+.breakpoint-filter:active {
+  scale: 0.96;
+}
+
+.breakpoint-filter:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 .chip {
@@ -236,64 +485,72 @@ h2 {
   }
 }
 
-.stories-toolbar {
+/* The expand-all / collapse-all pair now lives at the right end of the summary
+   row (the slot the coverage stats vacated), pushed there by margin-left:auto
+   while staying the LAST flex children so DOM order matches the visual order. */
+.story-bulk-toggle {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 0.75rem 1rem;
-  margin: 0 0 0.75rem;
+  gap: 0.25rem;
+  margin-left: auto;
+  line-height: 24px;
+  font-size: 0.8125rem;
 }
 
-.story-filter {
-  display: flex;
-  flex-wrap: wrap;
+/* Link-styled verbs ("Expand" / "Collapse") — still <button>s, they act in
+   place. The underline is the affordance; verbs exceed 24px wide intrinsically,
+   so min-height alone carries 2.5.8. */
+.story-bulk-toggle-button {
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  margin: 0;
+  min-height: 24px;
   padding: 0;
+  background: none;
   border: 0;
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+  vertical-align: middle;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4.5px;
 }
 
-.story-filter legend {
-  padding: 0 0.5rem 0 0;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+.story-bulk-toggle-button:hover:not(:disabled) {
+  color: var(--accent);
+  text-decoration-thickness: 2px;
 }
 
-.story-filter-label input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
+.story-bulk-toggle-button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
 }
 
-.story-bulk-toggle {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  margin-left: auto;
+/* Disabled verb: removing the underline is the color-independent cue (no
+   opacity — it can compound below the contrast floor). Disabled controls are
+   1.4.3/1.4.11 exempt, but the state stays perceptible without color. */
+.story-bulk-toggle-button:disabled {
+  color: var(--text-subtle);
+  text-decoration: none;
+  cursor: not-allowed;
 }
 
-.story-bulk-toggle-button {
-  background: transparent;
-  font: inherit;
-  font-size: 0.8125rem;
-  min-height: 24px;
+.bulk-scope,
+.bulk-sep {
+  color: var(--text-subtle);
 }
 
-.story-bulk-toggle-button:hover {
-  color: var(--text);
-  border-color: var(--accent);
+.summary-item:has(+ .story-bulk-toggle) .bulk-sep {
+  display: none;
 }
 
-.story-bulk-toggle-button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
+.bulk-scope {
+  cursor: default;
+  margin-inline-start: 0.25rem;
 }
 
 .story-filter-status {
-  margin: 0;
+  margin: 0 0 0.75rem;
   color: var(--text-subtle);
   font-size: 0.8125rem;
 }
@@ -331,6 +588,10 @@ h2 {
   box-shadow: inset 3px 0 0 var(--failed);
 }
 
+.story[data-status='new'] {
+  box-shadow: inset 3px 0 0 var(--new);
+}
+
 .story[data-status='changed'] {
   box-shadow: inset 3px 0 0 var(--changed);
 }
@@ -357,6 +618,11 @@ h2 {
   color: var(--pass);
 }
 
+.story[data-status='new'] .story-marker,
+.story[data-status='new'] .story-file {
+  color: var(--new);
+}
+
 .story[data-status='changed'] .story-marker,
 .story[data-status='changed'] .story-file {
   color: var(--changed);
@@ -380,7 +646,9 @@ h2 {
   text-wrap: pretty;
 }
 
-.breakpoint-group + .breakpoint-group {
+/* `:not([hidden])` on both sides so a filter that hides the first group does
+   not strand its separator on the new first-visible group. */
+.breakpoint-group:not([hidden]) + .breakpoint-group:not([hidden]) {
   margin-top: 0.75rem;
   padding-top: 0.75rem;
   border-top: 1px dashed var(--border);
@@ -509,6 +777,28 @@ h2 {
   overflow-x: auto;
 }
 
+/* Supplementary per-action notes (candidate / a11y-drift). Both plain prose
+   inside li.action; an a11y-only changed row stacks both. Indented to align
+   under the action name (past the status badge), muted like other secondary
+   prose. Stacked cleanly with a small gap when both render. */
+.candidate-note,
+.a11y-drift-note {
+  margin: 0.35rem 0 0 2.2rem;
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  text-wrap: pretty;
+}
+
+.candidate-note + .a11y-drift-note {
+  margin-top: 0.15rem;
+}
+
+.a11y-drift-note code {
+  font-family: var(--font-mono);
+  color: var(--text);
+}
+
 summary.action-row {
   list-style: none;
   cursor: pointer;
@@ -629,13 +919,87 @@ summary.action-row:focus-visible {
   color: var(--text-subtle);
 }
 
+/* No diff image to show (dimension mismatch). The note IS the primary content
+   of this slot, so it keeps full `--text` weight; italic alone marks the
+   "no data" state. */
+.diff-stats--unavailable .label {
+  font-style: italic;
+}
+
+/* Interactive screenshot viewer (interactiveMode). The radio group + caption
+   sit in this fieldset, which lives OUTSIDE the clipped `.shot-stage`, so the
+   chip focus ring is never clipped by the stage overflow nor painted over
+   screenshot pixels. The chips reuse `.chip--toggle` (border `--border-bright`,
+   `--accent` focus ring) and the same `.shot-radio-label` base styles as the
+   radio-tab viewer — permanently visible, no interactiveMode-specific chip
+   styling. Visible chips are the mouse/touch path to every variant (including
+   Diff, which the press gesture does not cover) and double as the viewer's
+   only visible affordance; the press-and-hold blink-compare in report.js is
+   enhancement on top. */
+.shot-interactive {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.5rem 0 0.5rem 2.2rem;
+  padding: 0;
+  border: 0;
+}
+
+/* Persistent caption naming the DISPLAYED variant — the committed one, or the
+   press-and-hold preview while it is held (report.js keeps it in sync). Text on
+   `--text` (≥4.5:1), so the active variant is never conveyed by color alone —
+   it pairs the checked chip's accent border with this readable label.
+   aria-hidden keeps it visual only: the checked radio is the single accessible
+   source of committed state. */
+.shot-caption {
+  margin: 0 0 0 0.25rem;
+  color: var(--text);
+  font-size: 0.8125rem;
+}
+
+.shot-caption-variant {
+  font-weight: 600;
+}
+
+/* The stage clips the screenshot to the viewport height. Its border uses
+   `--border-bright` (3:1 non-text contrast). overflow:hidden only ever clips
+   the image — the controls live in the sibling fieldset above. */
+.shot-stage {
+  margin-top: 0.5rem;
+  margin-left: 2.2rem;
+  padding: 0.5rem;
+  border: 1px solid var(--border-bright);
+  background: var(--bg);
+  width: fit-content;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+/* Scale the screenshot to fit within the viewport height (and the panel width)
+   so a tall capture never forces the page to scroll. width/height:auto preserve
+   the aspect ratio while `max-height` caps it to the viewport. */
+.shot-image {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 85vh;
+  outline: 1px solid var(--img-outline);
+  outline-offset: -1px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .skip-link,
   summary.action-row::after,
-  .chip {
+  .chip,
+  .summary-filter,
+  .breakpoint-filter {
     transition: none;
   }
-  .chip:active {
+  .chip:active,
+  .summary-filter:active,
+  .breakpoint-filter:active {
     scale: none;
   }
 }