@setsquare/review-sdk 0.0.1 → 0.1.0

package/dist/brand.js

@@ -1,3 +1,4 @@
+import { esc } from './escape.js';
 /**
  * The Setsquare mark and palette, for the artifacts the SDK writes.
  *
@@ -270,6 +271,20 @@ export const BRAND_CSS = `
     --ss-warning: #704a00;    /* 7.03:1 raised, 7.87:1 surface */
     --ss-warning-ink: #ffffff;/* on warning — 7.87:1 */
 
+    /*
+       The conformance-level ramp. Two tokens per level: the wash is the ground
+       the letters sit on and the thing you see at a glance, the other is the
+       indicator — a border, non-text, held to 4.5:1 where 1.4.11 asks 3:1.
+       The letters are never coloured; on a light ground a colour dark enough
+       to carry text is dark, and a dark yellow is olive.
+    */
+    --ss-level-a: #db0024;         /* 4.65:1 raised, 5.20:1 surface */
+    --ss-level-a-wash: #ffdfdc;    /* ink on this — 16.84:1 */
+    --ss-level-aa: #a15c02;        /* 4.63:1 raised, 5.19:1 surface */
+    --ss-level-aa-wash: #fee2cb;   /* ink on this — 16.96:1 */
+    --ss-level-aaa: #816b05;       /* 4.64:1 raised, 5.20:1 surface */
+    --ss-level-aaa-wash: #ffe88f;  /* ink on this — 17.19:1 */
+
     --ss-code-bg: #f2f2f2;
     --ss-mark: url('${MARK_LIGHT}');
   }
@@ -298,6 +313,14 @@ export const BRAND_CSS = `
       --ss-warning: #e9a228;    /* 8.01:1 raised, 9.11:1 surface */
       --ss-warning-ink: #0b0e11;/* on warning — 8.91:1 */
 
+      /* The level ramp, dark: same hues, the wash deep and the indicator light. */
+      --ss-level-a: #ff1d32;         /* 4.54:1 raised, 5.16:1 surface */
+      --ss-level-a-wash: #5c0109;    /* ink on this — 14.35:1 */
+      --ss-level-aa: #c1700c;        /* 4.63:1 raised, 5.27:1 surface */
+      --ss-level-aa-wash: #452501;   /* ink on this — 13.83:1 */
+      --ss-level-aaa: #9b8207;       /* 4.63:1 raised, 5.27:1 surface */
+      --ss-level-aaa-wash: #372d02;  /* ink on this — 13.65:1 */
+
       --ss-code-bg: #1a1a1a;
       --ss-mark: url('${MARK_DARK}');
     }
@@ -318,18 +341,550 @@ export const masthead = (title, subtitle) => `
     <div class="mark" role="img" aria-label="Setsquare"></div>
     <div>
       <h1>${title}</h1>
-      <p class="muted">${subtitle}</p>
+      <p class="provenance">${subtitle}</p>
     </div>
   </header>`;
 /** Masthead styling, kept beside the markup that needs it. */
 export const MASTHEAD_CSS = `
-  .masthead { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; }
+  /*
+   * The mark sits on the TOP of the title block rather than its centre, because
+   * the subtitle is a two-line mono string at narrow widths and centring against
+   * it drags the mark off the h1's cap line — the one alignment a reader notices.
+   */
+  .masthead {
+    display: flex; align-items: flex-start; gap: 16px;
+    margin: 0 0 var(--ss-stack);
+    padding-bottom: var(--ss-block);
+    border-bottom: 1px solid var(--ss-border);
+  }
   .masthead h1 { margin: 0; }
-  .masthead p { margin: .25rem 0 0; }
+  /*
+   * The provenance line is mono, like every other machine fact in these
+   * documents — a timestamp, a branch and a commit are strings a person copies,
+   * and the site gives those the same treatment (.ss-citation, .ss-evidence dt).
+   */
+  .masthead .provenance {
+    margin: 10px 0 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 12px; letter-spacing: .04em;
+    /* Not measured: this is one unbreakable machine string, not a line of prose. */
+    max-width: none;
+    color: var(--ss-ink-muted);
+  }
   .mark {
-    flex: 0 0 auto; width: 44px; height: 44px;
+    flex: 0 0 auto; width: 44px; height: 44px; margin-top: 4px;
     background: var(--ss-mark) center / contain no-repeat;
   }
-  @media (max-width: 30rem) { .mark { width: 32px; height: 32px; } }
+  @media (max-width: 30rem) { .mark { width: 32px; height: 32px; margin-top: 2px; } }
+`;
+/**
+ * The band legend, rendered once per document that groups by viewport.
+ *
+ * Here beside its styles, and beside `masthead()`, because it is the other
+ * shared piece of markup both artifacts print. It takes the bands it was
+ * actually given rather than all three — a run that never went below 1024 has
+ * no business defining "mobile" for a reader, and a legend listing bands that
+ * are not on the page reads as a list of things we looked at.
+ */
+export const viewportLegend = (bands, note) => {
+    if (bands.length === 0)
+        return '';
+    const rows = bands
+        .map((band) => `      <div><dt>${esc(band.label)}</dt><dd>${esc(band.range)}</dd></div>`)
+        .join('\n');
+    return `  <div class="legend">
+    <dl>
+${rows}
+    </dl>
+    <p>${esc(note)}</p>
+  </div>`;
+};
+/**
+ * The design system the two artifacts share with the public site.
+ *
+ * ## Why this exists at all
+ *
+ * `BRAND_CSS` made the report and the contact sheet use the product's COLOURS.
+ * They still did not look like the product: 16px/1.5 system-ui, two bold
+ * headings, 8px corners on everything and a table with a border round every
+ * cell is what any document looks like when nobody decided. The site has a
+ * pattern language — a type ladder, a mono ordinal spine, a radius ladder, one
+ * device for "we could not check" and one for a data table — and a customer who
+ * meets us through a report should meet the same one.
+ *
+ * The values are copied from `apps/marketing/app/site.css` for the reason the
+ * palette above is copied from `tokens.css`: that app is not a dependency of a
+ * published package. Unlike the palette there is no test diffing them, and that
+ * is a deliberate difference rather than an oversight — `brand.test.ts` guards
+ * the palette because a drifted COLOUR is a silent accessibility failure, and
+ * nothing here can fail: a radius that drifts by a pixel is untidy, not wrong.
+ *
+ * ## What is NOT copied, and why
+ *
+ * The hero rhythm, the mark keyframes, the price table and the docs rail — none
+ * of them has a counterpart in a report. The section spine, the type ladder, the
+ * radius ladder, the absence device and the data-table treatment do, and they
+ * are the ones that make a page recognisable.
+ *
+ * NO COLOUR IS NAMED HERE. Every rule below reaches for a `--ss-*` role, so the
+ * palette stays the single place a colour is decided and `brand.test.ts` stays
+ * the single place it is checked.
+ *
+ * (No backticks anywhere in this string or the comments inside it. It is a
+ * template literal, and one would end it with the parse error landing pages
+ * away.)
+ */
+export const SYSTEM_CSS = `
+  :root {
+    /*
+     * THE TYPE LADDER, at the site's docs altitude rather than its marketing
+     * one. A report is a document you read, not a page that has to hold an eye
+     * before the argument starts, so the display and hero steps are omitted and
+     * h1 is the site's --ss-h1-docs.
+     */
+    --ss-h1: clamp(28px, 3.6vw, 44px);
+    --ss-h2: clamp(24px, 2.8vw, 34px);
+    --ss-h3: clamp(18px, 1.6vw, 21px);
+
+    /* The spacing ladder, verbatim. */
+    --ss-section-gap: clamp(46px, 5.6vw, 96px);
+    --ss-lead-gap: clamp(30px, 3.4vw, 48px);
+    --ss-stack: clamp(24px, 2.8vw, 36px);
+    --ss-block: clamp(18px, 2.2vw, 26px);
+
+    /* Radius ladder: cards, inner blocks, controls, small mono, pills. */
+    --ss-radius-card: 9px;
+    --ss-radius-inner: 8px;
+    --ss-radius-block: 7px;
+    --ss-radius-control: 5px;
+    --ss-radius-mono: 4px;
+    --ss-radius-pill: 3px;
+
+    /*
+     * WCAG 1.4.8 asks for 1.5 line spacing within a paragraph, and these
+     * documents are held to AAA because of what they are. It is a property
+     * rather than a literal so the floor has one definition.
+     */
+    --ss-line-prose: 1.55;
+
+    /* The measure 1.4.8 caps. Overridden per document for the body width. */
+    --ss-measure: 68ch;
+
+    --ss-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+    /*
+     * The document's own names for brand roles. Both artifacts used to declare
+     * this block themselves, in two copies that had already diverged (the sheet
+     * never mapped a warning colour). One place, one vocabulary.
+     */
+    --bg: var(--ss-surface);
+    --fg: var(--ss-ink);
+    --muted: var(--ss-ink-muted);
+    --line: var(--ss-border);
+    --code-bg: var(--ss-surface-raised);
+    --bad-fg: var(--ss-danger);
+    --warn-fg: var(--ss-warning);
+    --good-fg: var(--ss-success);
+    /*
+     * The faint grey a "nothing here" glyph would want does not exist: the
+     * palette has no second grey that clears 7:1, and the untested glyph is
+     * already distinct by content.
+     */
+    --none-fg: var(--ss-ink-muted);
+  }
+
+  * { box-sizing: border-box; }
+
+  body {
+    margin: 0 auto;
+    padding: var(--ss-stack) var(--ss-block) calc(var(--ss-section-gap) * 1.2);
+    max-width: var(--doc-width, 72rem);
+    background: var(--bg); color: var(--fg);
+    font: 16px/var(--ss-line-prose) system-ui, -apple-system, "Segoe UI", sans-serif;
+    text-wrap: pretty;
+  }
+
+  /* ------------------------------------------------------------- headings */
+
+  /*
+   * A default gap per heading role, scaled with the type. One value for a 34px
+   * h2 and a 21px h3 is what makes a page feel squashed.
+   */
+  h1, h2, h3 { font-weight: 600; }
+  h1 { font-size: var(--ss-h1); line-height: 1.08; letter-spacing: -.03em; margin: 0; }
+  h2 {
+    font-size: var(--ss-h2); line-height: 1.12; letter-spacing: -.026em;
+    margin: 0 0 clamp(14px, 1.5vw, 18px);
+  }
+  h3 { font-size: var(--ss-h3); line-height: 1.3; letter-spacing: -.012em; margin: 0 0 8px; }
+
+  /* --------------------------------------------------------------- spine */
+
+  /*
+   * THE SECTION SPINE: a 22px rule, a mono ordinal, and an uppercase category.
+   * This is the site's structural device and the single thing that makes these
+   * documents read as ours rather than as any tool's output.
+   *
+   * THE ORDINAL IS A CSS COUNTER, NOT A NUMBER WE RENDER. Half of this report's
+   * sections are conditional — no performance table without timings, no run
+   * group unless the run was merged, no captures unless Playwright wrote some —
+   * so a hand-numbered spine would have gaps in it on most real runs, and
+   * numbering correctly in the renderer would mean threading a counter through
+   * a dozen independently-built strings. The browser already counts the
+   * sections that exist. It stays deterministic: two renders of one run emit
+   * identical markup, and the counter is a function of that markup.
+   *
+   * R, because these are Review artifacts. The site numbers per module for the
+   * same reason: R on Review surfaces, C on Consent.
+   *
+   * The rule is an absolutely positioned ::after rather than an inline ::before,
+   * so a category that wraps at 320px wraps under itself instead of leaving the
+   * rule alone on the first line looking like a stray dash.
+   */
+  main { counter-reset: ss-section; }
+  section { counter-increment: ss-section; }
+
+  .eyebrow {
+    position: relative;
+    max-width: 64ch;
+    margin: 0 0 18px;
+    padding-left: 32px;
+    font-family: var(--ss-mono);
+    font-size: 12px;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .eyebrow::before { content: 'R' counter(ss-section, decimal-leading-zero) ' / '; }
+  .eyebrow::after {
+    content: ''; position: absolute; left: 0; top: .62em;
+    width: 22px; height: 1px; background: var(--line);
+  }
+
+  main > section { margin-top: var(--ss-section-gap); }
+  main > section:first-child { margin-top: 0; }
+
+  /* ---------------------------------------------------------------- prose */
+
+  /*
+   * 1.4.8 caps the line a reader tracks, and an unbounded block is unbounded
+   * whatever happens to be in it today. Scoped to prose: a table cell and a
+   * figure caption set their own width from their content.
+   */
+  p, ul, ol { max-width: var(--ss-measure); }
+  p { margin: 0 0 .75rem; }
+
+  a { color: inherit; }
+  :focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
+
+  code {
+    background: var(--code-bg); padding: .1em .35em;
+    border-radius: var(--ss-radius-mono);
+    font-family: var(--ss-mono); font-size: .875em; overflow-wrap: anywhere;
+  }
+
+  .muted { color: var(--muted); }
+  .good, .ok { color: var(--good-fg); }
+  .bad { color: var(--bad-fg); font-weight: 600; }
+  .check { color: var(--warn-fg); font-weight: 600; }
+
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
+  }
+
+  footer {
+    margin-top: var(--ss-section-gap); padding-top: var(--ss-block);
+    border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem;
+  }
+  footer code { font-size: .8rem; }
+
+  /* ------------------------------------------------------------ the level tag */
+
+  /*
+   * A, AA, AAA — one treatment, and the SAME one the site uses. Ink on a wash
+   * with an indicator border: the hue makes a level findable across a grid
+   * without reading every chip, and the letters are what say which one, because
+   * red, orange and yellow are inseparable under deuteranopia and no contrast
+   * ratio changes that.
+   *
+   * A LEVEL IS ALWAYS THIS SHAPE AND A STATUS IS NEVER ONE. That is what stops
+   * the A tag reading as a failure next to a danger-coloured word.
+   *
+   * One width for all three, so A does not read as a smaller thing than AAA.
+   * The padding is asymmetric by a pixel because uppercase mono has no
+   * descenders and a symmetric box sits the ink high. The radius is the pill
+   * step, 3px — it used to be 999px here, which is a different design language
+   * from the one the site ships.
+   */
+  .level {
+    display: inline-flex; align-items: center; justify-content: center;
+    flex: none; min-width: 40px;
+    padding: 5px 9px 4px;
+    border: 1px solid var(--ss-border);
+    border-radius: var(--ss-radius-pill);
+    background: var(--ss-surface-raised);
+    color: var(--ss-ink);
+    font-family: var(--ss-mono); font-size: 10.5px; line-height: 1;
+    /* Trailing space trimmed, so the letters sit centred rather than pushed left. */
+    letter-spacing: .09em; text-indent: .09em;
+    white-space: nowrap;
+  }
+  .level-a   { border-color: var(--ss-level-a);   background: var(--ss-level-a-wash); }
+  .level-aa  { border-color: var(--ss-level-aa);  background: var(--ss-level-aa-wash); }
+  .level-aaa { border-color: var(--ss-level-aaa); background: var(--ss-level-aaa-wash); }
+  /*
+   * Under forced colours the wash and the border are the user's, so the hue is
+   * gone — which is fine, because it never carried the meaning. The border is
+   * kept so the tag stays a tag.
+   */
+  @media (forced-colors: active) {
+    .level { border-color: CanvasText; background: Canvas; color: CanvasText; }
+  }
+
+  /* --------------------------------------------------------------- absence */
+
+  /*
+   * "WE COULD NOT CHECK" IS ITS OWN STATE, and most products render it as a
+   * failure. One visual language for it: a broken 4px rule rather than a solid
+   * one, and a sentence saying what would resolve it. Never the danger colour,
+   * never a pass — which is this repository's honesty vocabulary drawn rather
+   * than written.
+   *
+   * The same device covers every absence these documents carry, and they are
+   * the same KIND of thing rather than four coincidences: a criterion the
+   * engine could not decide, a run that scanned nothing, a capture whose file
+   * has gone, and a viewport nothing was measured at. Every one is a gap in
+   * knowledge rather than a fault.
+   */
+  .absence {
+    display: flex; flex-direction: column; gap: 8px;
+    max-width: var(--ss-measure);
+    margin: 0 0 var(--ss-block);
+    padding: 16px 18px;
+    background: var(--ss-surface-raised);
+    border: 1px solid var(--line);
+    border-left: 4px dotted var(--line);
+    border-radius: 0 var(--ss-radius-inner) var(--ss-radius-inner) 0;
+  }
+  .absence p { margin: 0; max-width: none; }
+  .absence ul { margin: 0; max-width: none; }
+  /*
+   * A code chip inside an absence takes the FLAT ground, because the box it is
+   * in has already used the raised one and a chip the same colour as the box it
+   * sits in is not a chip. The same inversion the site does for an absence
+   * inside a raised section.
+   */
+  .absence code { background: var(--ss-surface); }
+  .absence__label {
+    margin: 0;
+    font-family: var(--ss-mono); font-size: 11px;
+    letter-spacing: .1em; text-transform: uppercase;
+    color: var(--ss-ink);
+  }
+
+  /* ------------------------------------------------------------ data tables */
+
+  /*
+   * A REGION THAT SCROLLS WITH A MOUSE MUST BE REACHABLE WITH A KEYBOARD.
+   *
+   * That is WCAG 2.1.1, and axe enforces it as scrollable-region-focusable. The
+   * conformance grid is nineteen columns wide inside this scroller, so on any
+   * ordinary window it scrolls — and for the whole of this document's life that
+   * was a level A failure nothing caught, because no suite scans the report.
+   * Found by pointing axe at it by hand, which is worth doing again.
+   *
+   * The markup carries the tabindex and a name: a bare tab stop announces
+   * nothing, and a reader who lands in a nineteen-column grid deserves to be
+   * told which one they are in.
+   */
+  .tablewrap { overflow-x: auto; }
+  .tablewrap:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
+  table { border-collapse: collapse; width: 100%; margin: .75rem 0 var(--ss-block); }
+  caption { text-align: left; margin-bottom: .5rem; }
+  th, td {
+    border: 1px solid var(--line); padding: .5rem .7rem;
+    text-align: left; vertical-align: top;
+  }
+  td.num { text-align: right; font-variant-numeric: tabular-nums; }
+
+  /*
+   * THE EVIDENCE TABLES: a filled header and a zebra stripe, which is the
+   * site's treatment and arrived there with both halves measured first.
+   *
+   * The header is ink with the ground reversed out of it — 21.00:1 in light and
+   * 19.80:1 in dark, the strongest pairing the palette has.
+   *
+   * The stripe is grid-line, the decorative token, at 1.48:1 against the flat
+   * ground in light and 1.57:1 in dark. The raised surface was the obvious
+   * choice and measures 1.12:1 and 1.14:1, which is a stripe nobody can see.
+   *
+   * THE CELLS ARE INK, AND THAT IS WHAT MAKES THE STRIPE POSSIBLE. On grid-line
+   * the palette's muted grey measures 5.53:1 in light and 5.31:1 in dark, and
+   * every status colour lands within a hundredth of the same place — all of
+   * them under 1.4.6's 7:1. So a cell in one of these tables carries no colour
+   * at all: where a state has to appear, it appears as a pill, whose fill is a
+   * role under its own -ink and is therefore a pair that was measured.
+   *
+   * That constraint is also why the conformance grid is NOT one of these tables
+   * — see the note beside it in html-report.ts.
+   *
+   * There is no hover state. One was built for the site and removed for being
+   * too heavy, and a static evidence document has even less use for it.
+   */
+  .data-table thead th {
+    background: var(--ss-ink); color: var(--ss-surface); border-bottom: none;
+  }
+  .data-table thead th:not(:first-child) { border-left-color: var(--ss-surface); }
+  .data-table tbody th, .data-table tbody td { color: var(--ss-ink); }
+  /*
+   * A code chip in a striped cell gets the mono face and no ground at all. Its
+   * usual raised background lands lighter than the flat row and darker than the
+   * stripe, so it reads as two different chips down one column — and the thing
+   * that makes a rule id look like a rule id is the typeface, not the box.
+   */
+  .data-table code { background: none; padding: 0; }
+  .data-table tbody tr:nth-child(even) th,
+  .data-table tbody tr:nth-child(even) td { background: var(--ss-grid-line); }
+  /*
+   * Under forced colours the grounds are the user's, so the stripe goes. The
+   * borders survive, which is the right thing to keep: the stripe was always an
+   * aid to tracking a row and never the structure.
+   */
+  @media (forced-colors: active) {
+    .data-table thead th {
+      background: Canvas; color: CanvasText; border-bottom: 2px solid CanvasText;
+    }
+    .data-table tbody tr:nth-child(even) th,
+    .data-table tbody tr:nth-child(even) td { background: Canvas; }
+  }
+
+  /*
+   * The straight-to-a-band links out of the report's captures section. Mono and
+   * uppercase because they are the same vocabulary as the band headings they
+   * land on, and a reader should recognise where they are going to arrive.
+   */
+  .band-links {
+    list-style: none; padding: 0; margin: 0 0 .75rem; max-width: none;
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  .band-links a {
+    font-family: var(--ss-mono); font-size: 12px;
+    letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
+  }
+  .band-links .muted {
+    font-family: var(--ss-mono); font-size: 12px; letter-spacing: .04em;
+  }
+
+  /* ----------------------------------------------------- viewport bands */
+
+  /*
+   * A ROW THAT IS A HEADING, inside its own tbody.
+   *
+   * The grouping is real table structure rather than a visual break: each band
+   * is its own row group, and this is that group's header cell scoped to it, so
+   * a screen reader announces which band a cell belongs to the same way it
+   * announces which column. A styled row with no header semantics would group
+   * the rows for sighted readers only, which on an accessibility report is a
+   * poor joke. (No backticks in this block — it is inside a template literal.)
+   *
+   * Reversed out of ink, like the column header above it, because it is a
+   * header — 21.00:1 light and 19.80:1 dark, the same measured pairing. The
+   * size sits beside the name at a lighter weight and never replaces it: the
+   * band is shorthand and the pixels are the fact.
+   */
+  /*
+   * THE TABLE CLASS IS IN THE SELECTOR, and it has to be. The cell-colour rule
+   * above is scoped to a data table's body header cells, which out-specifies a
+   * bare band-row rule — so the heading took the body's ink on its own ink
+   * ground and rendered as a black bar with nothing in it. Caught by looking at
+   * the page; no test asserts a colour, and a contrast checker would have
+   * called 1:1 a pass for text nobody can see. (No backticks: template literal.)
+   */
+  .data-table .band-row th,
+  .data-table .band-row td {
+    background: var(--ss-ink); color: var(--ss-surface);
+    font-family: var(--ss-mono); font-size: 11px;
+    letter-spacing: .12em; text-transform: uppercase;
+    padding: .45rem .7rem;
+  }
+  /*
+   * No border between the two cells, so the header and the sizes read as one
+   * bar. They are two cells because axe cannot resolve a header that spans
+   * every column — see the note beside bandHeader in html-report.ts.
+   */
+  .data-table .band-row th { border-right: 0; }
+  .data-table .band-row td { border-left: 0; }
+  .data-table .band-row .sizes {
+    letter-spacing: .04em; text-transform: none; opacity: .78;
+  }
+  @media (forced-colors: active) {
+    .data-table .band-row th,
+    .data-table .band-row td {
+      background: Canvas; color: CanvasText; border-bottom: 2px solid CanvasText;
+    }
+  }
+
+  /*
+   * The legend, and it is not decoration.
+   *
+   * "Mobile" is a claim about a device and these documents cannot make one — a
+   * viewport is a number of CSS pixels and the machine behind it is unknowable.
+   * The band names are kept because they are what a reader is actually asking
+   * about, and the legend is the price: every artifact that prints a band name
+   * prints this beside it, with the ranges, once.
+   */
+  .legend {
+    margin: 0 0 var(--ss-block);
+    padding: 14px 16px;
+    max-width: var(--ss-measure);
+    background: var(--ss-surface-raised);
+    border: 1px solid var(--line);
+    border-radius: var(--ss-radius-block);
+  }
+  .legend dl {
+    display: flex; flex-wrap: wrap; gap: 6px 20px;
+    margin: 0 0 8px;
+    font-family: var(--ss-mono); font-size: 12px;
+  }
+  .legend div { display: flex; align-items: baseline; gap: 8px; }
+  .legend dt {
+    letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
+  }
+  .legend dd { margin: 0; color: var(--muted); }
+  .legend p { margin: 0; max-width: none; font-size: .875rem; color: var(--muted); }
+
+  /* ------------------------------------------------------------------ pills */
+
+  /*
+   * The one solid fill in either document: a role under its own -ink is a pair
+   * the palette measured, and nothing here invents a tint.
+   */
+  .pill {
+    display: inline-block; min-width: 4.5ch; text-align: center;
+    padding: .1em .5em; border-radius: var(--ss-radius-mono);
+    font-family: var(--ss-mono); font-size: .8125em; letter-spacing: .04em;
+  }
+  .pill.s-failed { background: var(--ss-danger); color: var(--ss-danger-ink); font-weight: 700; }
+  .pill.s-cantTell { background: var(--ss-warning); color: var(--ss-warning-ink); font-weight: 600; }
+  .pill.s-rulesPassed { background: var(--ss-success); color: var(--ss-success-ink); }
+  .pill.s-inapplicable {
+    background: var(--ss-surface); color: var(--ss-ink); border: 1px solid var(--line);
+  }
+  /*
+   * The two declared states are HOLLOW, never filled.
+   *
+   * Every solid pill is something a rule observed. A declaration is the
+   * customer's claim about their own test, and a dashed outline reads as
+   * provisional next to a solid fill — and survives forced colours, where a
+   * background fill does not. The word inside carries the meaning regardless.
+   */
+  .pill.s-assertedFailing {
+    background: none; color: var(--bad-fg);
+    border: 1px dashed var(--bad-fg); font-weight: 700;
+  }
+  .pill.s-assertedBySuite {
+    background: none; color: var(--fg); border: 1px dashed var(--line);
+  }
 `;
 //# sourceMappingURL=brand.js.map

package/dist/brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"brand.js","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"brand.js","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,UAAU,GACrB,wBAAwB;IACxB,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,sEAAsE,CAAC;AAEzE,sFAAsF;AACtF,MAAM,CAAC,MAAM,SAAS,GACpB,wBAAwB;IACxB,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,0CAA0C,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAwCH,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAoCR,SAAS;;;CAGhC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAU,EAAE,CAAC;;;;YAIzD,KAAK;8BACa,QAAQ;;YAE1B,CAAC;AAEb,8DAA8D;AAC9D,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B3B,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAkD,EAClD,IAAY,EACJ,EAAE;IACV,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK;SACf,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,kBAAkB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;SACxF,IAAI,CAAC,IAAI,CAAC,CAAC;IACd,OAAO;;EAEP,IAAI;;SAEG,GAAG,CAAC,IAAI,CAAC;SACT,CAAC;AACV,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoczB,CAAC"}