anentrypoint-design 0.0.437 → 0.0.439

package/dist/colors_and_type.css

@@ -14,23 +14,33 @@
   --tree-indent: 12px;
   --tree-base-indent: 6px;
 
-  /* Paper / Ink — warm newsprint paper against near-black ink. The warmer
-     paper + deeper ink widen the tonal range so the electric lead reads as
-     printed, not glowing. */
-  --paper:       #F4F1E9;
-  --paper-2:     #EAE6DA;
-  --paper-3:     #DCD7C7;
-  --ink:         #0E0E12;
-  --ink-2:       #1F1F26;
-  --ink-3:       #52525A; /* WCAG AAA on --paper (~7.1:1) */
-  --ink-3-dark:  #464650; /* dark theme bg-3 (tier-3 surface) */
-  --paper-3-dark: #B4B4BC; /* dark theme fg-3 (tier-3 text)   */
-
-  /* Lore palette. --acid is the electric lead — a printed-ink lime that sits
-     forward of the heritage green; green/purple/mascot demote to print-ink
-     category roles. */
-  --acid:        #B6FF1B;
-  --acid-deep:   #4E4200; /* AA text tone of the lead on paper (WCAG-verified: #4E7A00 measured 4.21:1 against --accent-tint's own color-mix() output, which derives FROM --acid-deep -- so a small darkening shifts both foreground and background together and converges too slowly; #4E4200 is the minimal shade that actually clears 4.5:1 against its own self-referential tint background) */
+  /* Paper / Ink — RESTYLED to webjsx-toolkit's shadcn-neutral grayscale
+     palette (2026 restyle, replacing the prior "Acid Editorial" warm-paper/
+     electric-lime identity). Values below are HSL-equivalent-in-hex readings
+     of webjsx-toolkit's :root tokens (--background 0 0% 100%, --foreground
+     0 0% 10%, --muted 0 0% 95%, --border 0 0% 90%) so every downstream
+     color-mix()/oklch() derivation in this file keeps its formula and only
+     the ROOT input changes -- see restyle-tokens-webjsx-toolkit-look and
+     restyle-contrast-reverification-all-tokens for the swap rationale and
+     the re-verification this requires. */
+  --paper:       #FFFFFF;
+  --paper-2:     #F2F2F2;
+  --paper-3:     #E5E5E5;
+  --ink:         #1A1A1A;
+  --ink-2:       #333338;
+  --ink-3:       #525252; /* WCAG-verified 2026 restyle: npm run a11y caught 4.10:1 at #58585F against --paper-3 (#c6c5c5-equivalent surfaces); #525252 clears 4.54:1 there and 7.81:1 against pure paper */
+  --ink-3-dark:  #4D4D52; /* dark theme bg-3 (tier-3 surface) */
+  --paper-3-dark: #9B9B9B; /* dark theme fg-3 (tier-3 text); WCAG-verified: npm run a11y caught 4.41:1 at #999999 against --ink-2 (#333338); #9B9B9B clears 4.52:1 there */
+
+  /* Lore palette. --acid was the prior electric-lime lead; RESTYLED to a
+     neutral near-black accent matching webjsx-toolkit's grayscale --primary
+     (0 0% 15%), since the shadcn-neutral look has no saturated lead color at
+     all -- primary/accent are both neutral ink tones with hover-state
+     opacity, not a distinct hue. green/purple/mascot below stay as the
+     category/status palette (webjsx-toolkit has no opinion on multi-hue
+     category tagging, so these are kept rather than flattened). */
+  --acid:        #262626;
+  --acid-deep:   #171717; /* re-verify AA text tone under restyle-contrast-reverification-all-tokens */
   --green:       #247420;
   --green-2:     #3A9A34;
   --green-deep:  #133F10;
@@ -49,6 +59,14 @@
      need a tone chosen for ink rather than for the active theme. Same role
      --paper-3-dark plays for the tier-3 text ramp. */
   --mascot-on-ink: #FF5C9E;
+  /* Same always-dark-surface pattern, for .ds-cli-ok's success/OK text.
+     RESTYLED 2026: .ds-cli-ok previously used --acid directly (the bright
+     lime), which cleared contrast on --ink by construction; now that --acid
+     is a dark neutral, it fails 1.15:1 on the still-always-dark .cli card
+     (npm run a11y caught this on the terminal kit). Reuses the dark-theme
+     --green retune value (7.48:1 on --ink) rather than inventing a new hue,
+     since --green already carries the "success" semantic elsewhere. */
+  --success-on-ink: #5CBF52;
 
   /* Signals */
   --sun:         #F5C344;
@@ -95,11 +113,16 @@
   --fg-2:        var(--ink-2);
   --fg-3:        var(--ink-3);
 
-  /* The electric lead. --accent is the FILL (sits behind ink text); --accent-ink
-     is the readable TEXT tone for links/eyebrows/accents on paper (the lime
-     itself is too light for text). --accent-fg is what sits ON an --accent fill. */
+  /* --accent is the FILL; --accent-ink is the readable TEXT tone for
+     links/eyebrows/accents on paper; --accent-fg is what sits ON an --accent
+     fill. RESTYLED: --accent (formerly the bright --acid lime, dark text on
+     top) is now a dark neutral (webjsx-toolkit's --primary: 0 0% 15%), so
+     --accent-fg flips to a LIGHT tone (webjsx-toolkit's --primary-foreground:
+     0 0% 100%) -- verified via npm run a11y after the initial restyle caught
+     this exact dark-on-dark 1.15:1 failure across every kit's .btn-primary/
+     .active nav item, both of which read --accent-fg as their text color. */
   --accent:      var(--acid);
-  --accent-fg:   var(--ink);
+  --accent-fg:   var(--paper);
   --accent-ink:  var(--acid-deep);
   --accent-bright: var(--acid); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
   /* Blends --accent-ink (the readable/darker ink variant), not the raw
@@ -240,13 +263,19 @@
   --rule-strong: color-mix(in oklab, currentColor 28%, transparent);
 
   /* Micro rungs below --r-1 — chips, badges, scrollbar thumbs, tick marks
-     genuinely want a tighter corner than 10px; without these two tokens the
-     component sheets fell back to raw px literals bypassing the scale. */
+     genuinely want a tighter corner than the base radius; without these two
+     tokens the component sheets fell back to raw px literals bypassing the
+     scale. RESTYLED (webjsx-toolkit look): base --radius is 0.5rem (8px),
+     with radius-sm/md/lg at radius-4px/radius-2px/radius (4px/6px/8px) --
+     --r-1 below is retuned to that 8px base; --r-2/--r-3 keep proportional
+     headroom above it for large-surface corners (cards, dialogs) rather than
+     collapsing to a single flat rung, since webjsx-toolkit itself has no
+     opinion above its one --radius value. */
   --r-hair:      2px;
   --r-0:         4px;
-  --r-1:         10px;
-  --r-2:         14px;
-  --r-3:         22px;
+  --r-1:         8px;
+  --r-2:         10px;
+  --r-3:         14px;
   --r-pill:      999px;
 
   --dur-snap:    80ms;
@@ -255,14 +284,24 @@
   --dur-reveal:  560ms;
   --ease:        cubic-bezier(0.2, 0, 0, 1);
   /* Physical tier — a slight overshoot that reads as a printed stamp landing,
-     used by presses and signature reveals (not by routine UI fades). */
+     used by presses and signature reveals (not by routine UI fades). Kept
+     available post-restyle since some existing consumers still reference it;
+     new work should prefer the webjsx-toolkit-equivalent curves below. */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-exit:   cubic-bezier(0.4, 0, 1, 1);
-
-  /* Print texture — the signature surface treatment. --grain is a tiled
-     fractal-noise data-URI, opt-in via the .ds-grain utility and tuned faint
-     so type stays crisp. */
-  --grain-opacity:    0.05;
+  /* RESTYLED (webjsx-toolkit look): its three named easing curves, ported
+     verbatim from webjsx-toolkit/src/styles.css's @theme inline block. */
+  --ease-drawer:     cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-collapse:   cubic-bezier(0.2, 0, 0, 1);
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+
+  /* Print texture — the prior "Acid Editorial" signature surface treatment.
+     RESTYLED: opacity zeroed so .ds-grain/.ds-halftone (currently applied by
+     no consumer, verified by grep across src/components and ui_kits) render
+     inert under the flat-surface webjsx-toolkit look, without deleting the
+     machinery in case a future editorial-mode consumer opts back in. --grain
+     itself (the data-URI) and --grain-blend are left defined for that reason. */
+  --grain-opacity:    0;
   --grain-blend:      multiply;
   --grain:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   /* Offset-ink registration — the small print-mark offset used on editorial
@@ -432,12 +471,16 @@ select:focus-visible {
   --panel-text:   var(--fg);
   --panel-text-2: var(--fg-2);
   --panel-text-3: var(--fg-3);
-  --accent:    var(--acid);
+  /* RESTYLED: webjsx-toolkit's dark --primary is a LIGHT neutral (0 0% 75%)
+     with a DARK --primary-foreground (0 0% 10%) -- the inverse of light mode,
+     matching shadcn's convention that dark-mode primary buttons read as a
+     light chip on the dark page, not a same-dark-as-bg chip. --accent no
+     longer aliases --acid here (a literal dark-on-dark 1.15:1 failure caught
+     by npm run a11y across every dark-rendered kit). */
+  --accent:    #BFBFBF;
   --accent-fg: var(--ink);
-  --accent-ink: var(--acid); /* on ink, the lime itself reads as bright text */
-  --accent-bright: var(--acid);
-  /* Preserves the prior --accent-based blend for dark; the :root light-theme
-     value above was retuned to blend --accent-ink instead. */
+  --accent-ink: var(--paper);
+  --accent-bright: #BFBFBF;
   --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
   --danger:    oklch(0.68 0.19 25);
   --flame:     #FF5A1F;
@@ -503,10 +546,10 @@ select:focus-visible {
     --panel-text:   var(--fg);
     --panel-text-2: var(--fg-2);
     --panel-text-3: var(--fg-3);
-    --accent:    var(--acid);
+    --accent:    #BFBFBF; /* mirrors [data-theme=ink/dark] retune above */
     --accent-fg: var(--ink);
-    --accent-ink: var(--acid);
-    --accent-bright: var(--acid);
+    --accent-ink: var(--paper);
+    --accent-bright: #BFBFBF;
     --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
     --danger:    oklch(0.68 0.19 25);
     --flame:     #FF5A1F;
@@ -569,6 +612,7 @@ select:focus-visible {
   --cat-purple-ink: inherit;
   --cat-mascot-ink: inherit;
   --mascot-on-ink: inherit;
+  --success-on-ink: inherit;
   --cat-sun: inherit;
   --cat-flame: inherit;
   --cat-sky: inherit;
@@ -592,7 +636,7 @@ select:focus-visible {
   color-scheme: light;
   --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
   --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
-  --accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
+  --accent: var(--acid); --accent-fg: var(--paper); --accent-ink: var(--acid-deep);
   --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
   /* A paper island under a dark ancestor must not inherit the dark signal pair. */
   --flame: #C53E00; --amber: #7C570F; --warn: #C41C0C; --sky: #3A6EFF;
@@ -663,7 +707,7 @@ select:focus-visible {
 [data-density="comfortable"] { --density: 1; }
 [data-density="spacious"]    { --density: 1.35; }
 
-[data-accent="acid"]   { --accent: var(--acid);   --accent-bright: var(--acid);     --accent-fg: var(--ink);   --accent-ink: var(--acid-deep); --panel-accent: var(--acid);   }
+[data-accent="acid"]   { --accent: var(--acid);   --accent-bright: var(--acid);     --accent-fg: var(--paper); --accent-ink: var(--acid-deep); --panel-accent: var(--acid);   }
 [data-accent="green"]  { --accent: var(--green);  --accent-bright: var(--green-2);  --accent-fg: var(--paper); --accent-ink: var(--green);     --panel-accent: var(--green);  }
 [data-accent="purple"] { --accent: var(--purple); --accent-bright: #C277FF;         --accent-fg: var(--paper); --accent-ink: var(--purple-2);  --panel-accent: var(--purple); }
 [data-accent="mascot"] { --accent: var(--mascot); --accent-bright: var(--mascot-2); --accent-fg: var(--ink);   --accent-ink: var(--mascot-deep);--panel-accent: var(--mascot); }

package/dist/preview/buttons.html

@@ -6,7 +6,9 @@
 <style>body{padding:var(--space-4);background:var(--panel-0);color:var(--panel-text);}</style>
 <script defer src="./motion-default.js"></script>
 </head><!-- lint-dead-controls:allow — specimen markup: this page exists to show what the component LOOKS like in isolation, so its anchors have nowhere real to point. Not a navigable surface. -->
-<body>
+<body>
+<h1 class="sr-only">Components</h1>
+<main aria-label="Components specimens">
 <div class="ds-demo-label" style="font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--fg-3)">247420 / components / buttons</div>
 
 <!-- Variants — shared .ds-demo gallery cell (hairline box, flex-wrap, gap). -->
@@ -35,5 +37,6 @@
   <button class="btn-ghost btn-lg">lg ghost</button>
 </div>
 
-<div class="ds-demo-desc" style="font-family:var(--ff-mono);margin-top:var(--space-2)">primary · secondary · ghost — size ladder sm/md/lg on the --ctl-* height scale</div>
+<div class="ds-demo-desc" style="font-family:var(--ff-mono);margin-top:var(--space-2)">primary · secondary · ghost — size ladder sm/md/lg on the --ctl-* height scale</div>
+</main>
 </body></html>

package/dist/preview/colors-core.html

@@ -21,7 +21,9 @@
 </style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · COLORS · CORE</span><span class="spread"></span><span>04 SWATCHES</span></div>
-<div class="grid">
+
+<h1 class="sr-only">Colors core</h1>
+<main aria-label="Colors core specimens"><div class="grid">
   <div class="sw" style="background:var(--panel-0);color:var(--panel-text)">
     <div class="name">paper</div>
     <div>
@@ -52,4 +54,5 @@
   </div>
 </div>
 <p class="t-meta" style="margin-top:16px">paper = default surface. paper-2 (cream-3) = hover/chip bg with real contrast against paper. ink = warm, not harsh. green = 247420, the primary accent.</p>
+</main>
 </body></html>

package/dist/preview/colors-lore.html

@@ -8,7 +8,9 @@
 @media (max-width:640px){.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · COLORS · LORE</span><span class="spread"></span><span>THE ACTUAL PALETTE</span></div>
-<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:16px" class="preview-grid">
+
+<h1 class="sr-only">Colors lore</h1>
+<main aria-label="Colors lore specimens"><div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:16px" class="preview-grid">
   <!-- Fixed tones, not --panel-0: these swatches paint a CONSTANT colour in every
        theme, so a theme-relative text token flips underneath them. --panel-0 is
        #0E0E12 in ink, which measured 1.15:1 on --purple. --ink and --paper are
@@ -34,4 +36,5 @@
   </div>
 </div>
 <div class="t-meta" style="margin-top:12px">247420 (green) + 420247 (purple) — the lore pair. mascot pink used randomly/wildly on accent elements.</div>
+</main>
 </body></html>

package/dist/preview/colors-semantic.html

@@ -8,7 +8,9 @@
 @media (max-width:640px){.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · COLORS · SEMANTIC</span><span class="spread"></span><span>05 TOKENS</span></div>
-<div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:16px" class="preview-grid">
+
+<h1 class="sr-only">Colors semantic</h1>
+<main aria-label="Colors semantic specimens"><div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:16px" class="preview-grid">
   <!-- --on-color (#fff, 4.32:1) AND --ink (#0e0e12, 4.45:1) both fail WCAG AA's
        4.5:1 against --sky at this font size; only true black clears it -->
   <div style="background:var(--sky);color:#000;padding:12px;min-height:90px">
@@ -37,4 +39,5 @@
     <div class="t-micro" style="color:var(--on-color)">--ink-3 · metadata</div>
   </div>
 </div>
+</main>
 </body></html>

package/dist/preview/dateline.html

@@ -5,7 +5,9 @@
 <style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · BRAND · DATELINE</span><span class="spread"></span><span>EVERY PAGE</span></div>
-<div style="margin-top:18px">
+
+<h1 class="sr-only">Dateline</h1>
+<main aria-label="Dateline specimens"><div style="margin-top:18px">
   <div class="dateline"><span>247420 · AN ENTRYPOINT</span><span>THE WORKS</span><span class="spread"></span><span>APR 20 2026</span></div>
 </div>
 <div style="margin-top:24px;background:var(--panel-text);padding:14px 20px">
@@ -17,4 +19,5 @@
   </div>
 </div>
 <div class="t-meta" style="margin-top:16px">the "dateline" — ASCII bar at top of every page. 3 or 4 slots, dotted spreader fills the gap.</div>
+</main>
 </body></html>

package/dist/preview/dropzone.html

@@ -5,7 +5,9 @@
 <style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);} .row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);max-width:880px}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · FILE-BROWSER · DROPZONE</span><span class="spread"></span><span>TONAL TARGET · NO DASHED BORDERS</span></div>
-<div class="row-2" style="margin-top:14px">
+
+<h1 class="sr-only">Dropzone</h1>
+<main aria-label="Dropzone specimens"><div class="row-2" style="margin-top:14px">
   <div>
     <div class="t-meta" style="margin-bottom:6px">idle</div>
     <div class="ds-dropzone">
@@ -28,4 +30,5 @@
   </div>
 </div>
 <div class="t-meta" style="margin-top:12px">dropzone is a tonal panel that swaps to <code>--panel-select</code> on dragover. <strong>preventDefault must run on document, not just the zone</strong> or the browser will navigate to the dropped file.</div>
+</main>
 </body></html>

package/dist/preview/file-grid.html

@@ -5,7 +5,9 @@
 <style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · FILE-BROWSER · FILE-GRID</span><span class="spread"></span><span>STACK OF ROWS · ZEBRA · NEVER A BORDER</span></div>
-<div class="panel" style="margin-top:14px;max-width:680px">
+
+<h1 class="sr-only">File grid</h1>
+<main aria-label="File grid specimens"><div class="panel" style="margin-top:14px;max-width:680px">
   <div class="panel-head"><span>tigers/photos · 06 of 06</span><span style="color:var(--panel-text-3)">06 items</span></div>
   <div class="ds-file-grid">
     <div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg></span><span class="title">raw</span><span class="ds-file-meta meta">—</span></div>
@@ -17,4 +19,5 @@
   </div>
 </div>
 <div class="t-meta" style="margin-top:12px">grid = panel + stack of rows. directories sort first. selected row gets the mint <code>.active</code> tone — no underline, no bold.</div>
+</main>
 </body></html>

package/dist/preview/file-row.html

@@ -5,7 +5,9 @@
 <style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · FILE-BROWSER · FILE-ROW</span><span class="spread"></span><span>RAIL · ICON · NAME · META · ACTIONS</span></div>
-<div class="ds-file-grid" style="margin-top:14px">
+
+<h1 class="sr-only">File row</h1>
+<main aria-label="File row specimens"><div class="ds-file-grid" style="margin-top:14px">
   <div class="ds-file-row row" data-file-type="dir"><span class="ds-file-icon" data-file-type="dir"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg></span><span class="title">src</span><span class="ds-file-meta meta">—</span></div>
   <div class="ds-file-row row" data-file-type="image"><span class="ds-file-icon" data-file-type="image"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg></span><span class="title">cover.png</span><span class="ds-file-meta meta">180 KB · 2026.04.18</span></div>
   <div class="ds-file-row row" data-file-type="video"><span class="ds-file-icon" data-file-type="video"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m10 9 5 3-5 3z"/></svg></span><span class="title">reel.mp4</span><span class="ds-file-meta meta">2.3 MB · 2026.04.17</span></div>
@@ -18,4 +20,5 @@
   <div class="ds-file-row row" data-file-type="other"><span class="ds-file-icon" data-file-type="other"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3v5h5"/><path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg></span><span class="title">.config</span><span class="ds-file-meta meta">220 B</span></div>
 </div>
 <div class="t-meta" style="margin-top:12px">a row per file. 4px tonal rail keyed by data-file-type — never hand-applied. icon + name + meta, optional actions on hover.</div>
+</main>
 </body></html>

package/dist/preview/file-toolbar.html

@@ -6,7 +6,9 @@
 </head><body>
 <div class="dateline"><span>247420 · FILE-BROWSER · TOOLBAR</span><span class="spread"></span><span>BREADCRUMB · ACTIONS · COUNT</span></div>
 
-<div style="margin-top:14px;max-width:880px">
+
+<h1 class="sr-only">File toolbar</h1>
+<main aria-label="File toolbar specimens"><div style="margin-top:14px;max-width:880px">
   <div class="ds-crumb-path" style="margin-bottom:10px">
     <button class="ds-crumb-seg">root</button>
     <span class="ds-crumb-sep">›</span>
@@ -38,4 +40,5 @@
   </div>
 </div>
 <div class="t-meta" style="margin-top:12px">toolbar is one row, left-aligned actions and right-aligned count. breadcrumb above. upload progress below — tonal bar, no animation jitter.</div>
+</main>
 </body></html>

package/dist/preview/file-viewer.html

@@ -2,8 +2,13 @@
 <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
 <title>file viewer / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
 <link rel="stylesheet" href="../app-shell.css">
-<style>body{padding:0;background:var(--panel-0);color:var(--panel-text);min-height:100vh;display:flex;align-items:center;justify-content:center}</style>
+<style>body{padding:0;background:var(--panel-0);color:var(--panel-text);min-height:100vh;display:flex;align-items:center;justify-content:center}
+/* The specimen is a full-bleed modal over a backdrop, so the landmark that
+   wraps it has to stay a full-size flex item rather than shrink to content. */
+body > main{flex:1;align-self:stretch;min-width:0}</style>
 </head><body>
+<h1 class="sr-only">File viewer</h1>
+<main aria-label="File viewer specimens">
 <div class="ds-modal-backdrop" style="position:relative;width:100%;height:100vh">
   <div class="ds-modal ds-modal-preview">
     <div class="ds-modal-head ds-preview-head" data-file-type="code">
@@ -29,4 +34,5 @@
     </div>
   </div>
 </div>
+</main>
 </body></html>

package/dist/preview/header.html

@@ -6,7 +6,9 @@
 <style>body{padding:0;margin:0;background:var(--panel-0);color:var(--panel-text);}</style>
 <script defer src="./motion-default.js"></script>
 </head><!-- lint-dead-controls:allow — specimen markup: this page exists to show what the component LOOKS like in isolation, so its anchors have nowhere real to point. Not a navigable surface. -->
-<body>
+<body>
+<h1 class="sr-only">Header</h1>
+<main aria-label="Header specimens">
 <header class="app-topbar">
   <span class="brand">247420<span class="slash"> / </span>an entrypoint</span>
   <nav>
@@ -22,5 +24,6 @@
 </div>
 <div style="padding:20px;font-family:var(--ff-mono);font-size:14px;color:var(--panel-text-2)">
   sticky · 36px · panel-2 background · nav hover uses panel-hover · active uses panel-1
-</div>
+</div>
+</main>
 </body></html>

package/dist/preview/icons-unicode.html

@@ -4,26 +4,32 @@
 <link rel="stylesheet" href="../app-shell.css">
 <style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}
 .preview-grid > *{min-width:0;overflow:hidden;}
-@media (max-width:640px){.preview-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}}</style><script defer src="./motion-default.js"></script>
+@media (max-width:640px){.preview-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}}
+.glyph-grid{margin-top:var(--space-3);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--space-1);font-family:var(--ff-mono)}
+.glyph-cell{padding:var(--space-2-75);text-align:center}
+.glyph-mark{font-size:var(--fs-h3)}
+.glyph-cell .t-micro{margin-top:var(--space-1)}
+.glyph-note{margin-top:var(--space-2-75)}</style><script defer src="./motion-default.js"></script>
 </head><body>
+<h1 class="sr-only">Unicode icon set</h1>
 <div class="dateline"><span>247420 · ICONS · UNICODE</span><span class="spread"></span><span>THE FREE SET</span></div>
-<div style="margin-top:14px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;font-family:var(--ff-mono)" class="preview-grid">
-<div style="padding:12px;text-align:center"><div style="font-size:22px">→</div><div class="t-micro" style="margin-top:4px">LINK</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">↗</div><div class="t-micro" style="margin-top:4px">EXT</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">↳</div><div class="t-micro" style="margin-top:4px">REPLY</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">·</div><div class="t-micro" style="margin-top:4px">SEP</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">※</div><div class="t-micro" style="margin-top:4px">NOTE</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">§</div><div class="t-micro" style="margin-top:4px">SECT</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">¶</div><div class="t-micro" style="margin-top:4px">PARA</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">†</div><div class="t-micro" style="margin-top:4px">FN</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">■</div><div class="t-micro" style="margin-top:4px">STOP</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">●</div><div class="t-micro" style="margin-top:4px">ON</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">○</div><div class="t-micro" style="margin-top:4px">IDLE</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">▲</div><div class="t-micro" style="margin-top:4px">UP</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">//</div><div class="t-micro" style="margin-top:4px">CODE</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">##</div><div class="t-micro" style="margin-top:4px">TAG</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">—</div><div class="t-micro" style="margin-top:4px">DASH</div></div>
-<div style="padding:12px;text-align:center"><div style="font-size:22px">…</div><div class="t-micro" style="margin-top:4px">WAIT</div></div>
-</div>
-<div class="t-meta" style="margin-top:12px">no icon font. no svg slop. unicode does the job. lucide via cdn for anything these can't cover.</div>
+<main class="glyph-grid preview-grid" aria-label="Unicode icon specimens">
+<div class="glyph-cell"><div class="glyph-mark">→</div><div class="t-micro">LINK</div></div>
+<div class="glyph-cell"><div class="glyph-mark">↗</div><div class="t-micro">EXT</div></div>
+<div class="glyph-cell"><div class="glyph-mark">↳</div><div class="t-micro">REPLY</div></div>
+<div class="glyph-cell"><div class="glyph-mark">·</div><div class="t-micro">SEP</div></div>
+<div class="glyph-cell"><div class="glyph-mark">※</div><div class="t-micro">NOTE</div></div>
+<div class="glyph-cell"><div class="glyph-mark">§</div><div class="t-micro">SECT</div></div>
+<div class="glyph-cell"><div class="glyph-mark">¶</div><div class="t-micro">PARA</div></div>
+<div class="glyph-cell"><div class="glyph-mark">†</div><div class="t-micro">FN</div></div>
+<div class="glyph-cell"><div class="glyph-mark">■</div><div class="t-micro">STOP</div></div>
+<div class="glyph-cell"><div class="glyph-mark">●</div><div class="t-micro">ON</div></div>
+<div class="glyph-cell"><div class="glyph-mark">○</div><div class="t-micro">IDLE</div></div>
+<div class="glyph-cell"><div class="glyph-mark">▲</div><div class="t-micro">UP</div></div>
+<div class="glyph-cell"><div class="glyph-mark">//</div><div class="t-micro">CODE</div></div>
+<div class="glyph-cell"><div class="glyph-mark">##</div><div class="t-micro">TAG</div></div>
+<div class="glyph-cell"><div class="glyph-mark">—</div><div class="t-micro">DASH</div></div>
+<div class="glyph-cell"><div class="glyph-mark">…</div><div class="t-micro">WAIT</div></div>
+</main>
+<div class="t-meta glyph-note">no icon font. no svg slop. unicode does the job. lucide via cdn for anything these can't cover.</div>
 </body></html>

package/dist/preview/index-row.html

@@ -12,7 +12,9 @@ body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);
 </style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · COMPONENTS · INDEX-ROW</span><span class="spread"></span><span>CORE PRIMITIVE</span></div>
-<div class="row-list ir-stack">
+
+<h1 class="sr-only">Index row</h1>
+<main aria-label="Index row specimens"><div class="row-list ir-stack">
   <div class="row">
     <div class="row-code">001</div>
     <div class="row-title">gm</div>
@@ -30,4 +32,5 @@ body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);
   </div>
 </div>
 <div class="t-meta ir-note">how we list projects. no dots. no colons. the hairline is the divider.</div>
+</main>
 </body></html>

package/dist/preview/inputs.html

@@ -5,7 +5,9 @@
 <style>body{padding:var(--space-4);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · COMPONENTS · INPUTS</span><span class="spread"></span><span>HAIRLINE ONLY</span></div>
-<div style="margin-top:20px;max-width:480px;display:grid;gap:20px">
+
+<h1 class="sr-only">Inputs</h1>
+<main aria-label="Inputs specimens"><div style="margin-top:20px;max-width:480px;display:grid;gap:20px">
   <div>
     <div class="t-label">EMAIL</div>
     <input class="input" placeholder="you@example.tld" value="hi@247420.xyz" />
@@ -20,4 +22,5 @@
   </div>
 </div>
 <div class="t-meta" style="margin-top:18px">no box. no fill. bottom hairline thickens to 2px on focus.</div>
+</main>
 </body></html>

package/dist/preview/manifesto.html

@@ -39,7 +39,9 @@
 </style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · MANIFESTO · 2018 -> FOREVER</span><span class="spread"></span><span>probably emerging</span></div>
-<div class="wrap">
+
+<h1 class="sr-only">Manifesto</h1>
+<main aria-label="Manifesto specimens"><div class="wrap">
   <div class="prin p1">
     <div class="num">01 //</div>
     <div class="ttl">code is communication</div>
@@ -66,4 +68,5 @@
   </div>
 </div>
 <p class="t-meta" style="margin-top:16px;font-style:italic">"an entrypoint is just a beginning. what matters is what you build once you're through the door." — b0gie, TechShaman</p>
+</main>
 </body></html>

package/dist/preview/rules.html

@@ -5,7 +5,9 @@
 <style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · RULES · HAIRLINES</span><span class="spread"></span><span>3 VARIANTS</span></div>
-<div style="margin-top:20px">
+
+<h1 class="sr-only">Rules</h1>
+<main aria-label="Rules specimens"><div style="margin-top:20px">
   <div class="t-label">SINGLE (default separator)</div>
   <hr class="rule" style="margin:6px 0 20px 0">
   <div class="t-label">DOUBLE (major section break)</div>
@@ -14,4 +16,5 @@
   <hr class="rule-dotted" style="margin:6px 0 0 0">
 </div>
 <p class="t-meta" style="margin-top:18px">no boxes. no cards. structure comes from rules.</p>
+</main>
 </body></html>

package/dist/preview/spacing.html

@@ -2,18 +2,23 @@
 <html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
 <title>spacing / 247420 preview</title><link rel="stylesheet" href="../colors_and_type.css">
 <link rel="stylesheet" href="../app-shell.css">
-<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
+<style>body{padding:var(--space-3-5);background:var(--panel-0);color:var(--panel-text);}
+.sp-scale{margin-top:var(--space-3);display:grid;gap:var(--space-1)}
+.sp-step{display:flex;align-items:center;gap:var(--space-2-75)}
+.sp-step .t-micro{width:120px;flex:none}
+.sp-bar{height:var(--space-2-75);background:var(--panel-text)}</style><script defer src="./motion-default.js"></script>
 </head><body>
 <div class="dateline"><span>247420 · SPACING · 8PT</span><span class="spread"></span><span>9 STEPS</span></div>
-<div style="margin-top:14px;display:grid;gap:4px">
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-1 · 4</span><div style="height:12px;width:4px;background:var(--panel-text)"></div></div>
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-2 · 8</span><div style="height:12px;width:8px;background:var(--panel-text)"></div></div>
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-3 · 16</span><div style="height:12px;width:16px;background:var(--panel-text)"></div></div>
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-4 · 24</span><div style="height:12px;width:24px;background:var(--panel-text)"></div></div>
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-5 · 32</span><div style="height:12px;width:32px;background:var(--panel-text)"></div></div>
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-6 · 48</span><div style="height:12px;width:48px;background:var(--panel-text)"></div></div>
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-7 · 64</span><div style="height:12px;width:64px;background:var(--panel-text)"></div></div>
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-8 · 96</span><div style="height:12px;width:96px;background:var(--panel-text)"></div></div>
-<div style="display:flex;align-items:center;gap:12px"><span class="t-micro" style="width:120px">SPACE-9 · 128</span><div style="height:12px;width:128px;background:var(--panel-text)"></div></div>
-</div>
+<h1 class="sr-only">Spacing scale</h1>
+<main class="sp-scale" aria-label="Spacing scale specimens">
+<div class="sp-step"><span class="t-micro">SPACE-1 · 4</span><div class="sp-bar" style="width:var(--space-1)"></div></div>
+<div class="sp-step"><span class="t-micro">SPACE-2 · 8</span><div class="sp-bar" style="width:var(--space-2)"></div></div>
+<div class="sp-step"><span class="t-micro">SPACE-3 · 16</span><div class="sp-bar" style="width:var(--space-3)"></div></div>
+<div class="sp-step"><span class="t-micro">SPACE-4 · 24</span><div class="sp-bar" style="width:var(--space-4)"></div></div>
+<div class="sp-step"><span class="t-micro">SPACE-5 · 32</span><div class="sp-bar" style="width:var(--space-5)"></div></div>
+<div class="sp-step"><span class="t-micro">SPACE-6 · 48</span><div class="sp-bar" style="width:var(--space-6)"></div></div>
+<div class="sp-step"><span class="t-micro">SPACE-7 · 64</span><div class="sp-bar" style="width:var(--space-7)"></div></div>
+<div class="sp-step"><span class="t-micro">SPACE-8 · 96</span><div class="sp-bar" style="width:var(--space-8)"></div></div>
+<div class="sp-step"><span class="t-micro">SPACE-9 · 128</span><div class="sp-bar" style="width:var(--space-9)"></div></div>
+</main>
 </body></html>