tuffgal 0.1.0-alpha.8 → 0.2.0-alpha.1

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,77 @@ 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 plain text link. The
+   word ("passed") is the only underlined link; its sibling count precedes it
+   outside the button. Resting is plain --text (1.4.3 text contrast, not the
+   1.4.11 non-text floor — no border to measure); hover and pressed tint the word
+   AND its underline the status color (text-decoration inherits currentColor, so
+   they carry a same-ratio underline). The visible count + word always show, and
+   the pressed state is never color-alone (1.4.1) — bold weight + a double
+   underline carry it independently. 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 0.15rem;
+  line-height: 1.2;
+  background: none;
+  border: 0;
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4.5px;
 }
 
-.summary-item[data-status='pass'] .indicator {
+.summary-filter[aria-pressed='true'] {
+  cursor: default;
+  user-select: none;
+}
+
+/* Hover + pressed tint the word its status color. The "all" total stays --text
+   on both: --accent equals --new, so tinting "all" blue would falsely imply the
+   "new" filter. Status colors clear 4.5:1 on --bg-elevated in both themes. */
+.summary-item[data-status='pass'] .summary-filter:hover,
+.summary-item[data-status='pass'] .summary-filter[aria-pressed='true'] {
   color: var(--pass);
 }
 
-.summary-item[data-status='changed'] .indicator {
+.summary-item[data-status='changed'] .summary-filter:hover,
+.summary-item[data-status='changed'] .summary-filter[aria-pressed='true'] {
   color: var(--changed);
 }
 
-.summary-item[data-status='failed'] .indicator {
+.summary-item[data-status='failed'] .summary-filter:hover,
+.summary-item[data-status='failed'] .summary-filter[aria-pressed='true'] {
   color: var(--failed);
 }
 
-.summary-item.coverage .coverage-detail {
-  color: var(--text-subtle);
-  font-size: 0.8125rem;
+.summary-item[data-status='new'] .summary-filter:hover,
+.summary-item[data-status='new'] .summary-filter[aria-pressed='true'] {
+  color: var(--new);
+}
+
+.summary-item[data-status='all'] .summary-filter:hover,
+.summary-item[data-status='all'] .summary-filter[aria-pressed='true'] {
+  color: var(--text);
+}
+
+.summary-filter:hover,
+.summary-filter[aria-pressed='true'] {
+  text-decoration-style: double;
+}
+
+.summary-filter:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 .chip {
@@ -236,64 +356,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 +459,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 +489,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,6 +517,34 @@ h2 {
   text-wrap: pretty;
 }
 
+/* `: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);
+}
+
+.breakpoint-label {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin: 0 0 0.25rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.breakpoint-name {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.breakpoint-dimensions {
+  color: var(--text-subtle);
+  text-transform: none;
+}
+
 .actions {
   position: relative;
   margin: 0;
@@ -483,6 +648,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;
@@ -561,11 +748,13 @@ summary.action-row:focus-visible {
   padding: 0.5rem;
   border: 1px solid var(--border);
   background: var(--bg);
+  width: fit-content;
+  max-width: 100%;
 }
 
 .shot-panel img {
   display: block;
-  width: 100%;
+  max-width: 100%;
   height: auto;
   outline: 1px solid var(--img-outline);
   outline-offset: -1px;
@@ -601,6 +790,97 @@ 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), so no new focus tokens are introduced here. */
+.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;
+}
+
+/* interactiveMode: chip buttons collapsed by default — sighted mouse users
+   drive the viewer with the hover/press gesture on the stage. Clip (never
+   display/visibility/inert) so the nested radio stays focusable and keeps
+   its accessible name. Mirrors .sr-only. */
+.shot-interactive .shot-radio-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* Reveal the whole chip group when a keyboard user focuses any radio.
+   :focus-within needs no :has() fallback and never fires for mouse/touch
+   (label clipped, input pointer-events:none → radios are keyboard-only
+   reachable). Specificity (0,3,0) beats the collapse rule (0,2,0). */
+.shot-interactive:focus-within .shot-radio-label {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* Persistent caption naming the committed variant. 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,