rikiki-deck 0.6.0 → 0.7.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "rikiki-deck",
-  "version": "0.6.0",
+  "version": "0.7.2",
   "description": "A tiny Lit Web Components framework for technical presentations · zero-build for consumers, TypeScript for contributors.",
-  "author": "Cédric Chariere Fiedler <cedric@siliceum.com>",
+  "author": "Cédric Chariere Fiedler <chariere.fiedler.cedric@gmail.com>",
   "homepage": "https://rikiki.tordu-jardin.fr",
   "repository": {
     "type": "git",
@@ -13,12 +13,16 @@
   },
   "type": "module",
   "bin": {
-    "rikiki": "./bin/rikiki.mjs"
+    "rikiki": "bin/rikiki.mjs"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
+    "./check-api": {
+      "types": "./bin/lib/check-api.d.ts",
+      "import": "./bin/lib/check-api.mjs"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -32,6 +36,7 @@
   "files": [
     "dist",
     "bin",
+    "!bin/**/*.test.mjs",
     "tokens.css",
     "themes",
     "fonts",
@@ -43,35 +48,43 @@
     ".claude/skills/rikiki-debug"
   ],
   "scripts": {
-    "build": "node build-vendor.mjs && node build.mjs && node build-standalone.mjs && tsc --emitDeclarationOnly -p tsconfig.build.json",
+    "build": "node build-vendor.mjs && node build.mjs && node build-standalone.mjs && node build-types.mjs",
     "vendor": "node build-vendor.mjs",
     "watch": "node build.mjs --watch",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist",
     "bundle": "node bundle.mjs",
-    "deck": "node build/vite-deck.mjs",
-    "deck:example": "node build/vite-deck.mjs decks/example/deck.config.js",
+    "examples": "node scripts/rebuild-examples.mjs",
+    "readme": "node scripts/build-readme.mjs",
+    "deck": "node bin/rikiki.mjs assemble",
+    "deck:example": "node bin/rikiki.mjs assemble decks/example/deck.config.js",
     "test": "vitest run",
     "test:e2e": "playwright test",
     "test:smoke": "playwright test --grep @smoke",
-    "lint": "biome check src scripts",
-    "format": "biome format --write src scripts",
+    "release:smoke": "node scripts/release-smoke.mjs",
+    "lint": "biome check src scripts tools",
+    "format": "biome format --write src scripts tools",
     "bump": "node scripts/bump-version.mjs",
+    "new:component": "node scripts/new-component.mjs",
     "prepublishOnly": "npm run build && npm test"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@biomejs/biome": "^2.4.16",
     "@playwright/test": "^1.60.0",
     "esbuild": "^0.24.0",
     "lit": "^3.3.3",
     "marked": "^12.0.2",
-    "mermaid": "^10.9.6",
+    "mermaid": "^10.9.8",
+    "rolldown": "^1.1.1",
     "shiki": "^1.24.0",
     "typescript": "^5.6.0",
     "vitest": "^2.1.0"
   },
   "peerDependencies": {
-    "lit": "^3.3.3"
+    "lit": "^3.3.3",
+    "playwright": "^1.60.0",
+    "rolldown": "^1.1.1"
   },
   "keywords": [
     "lit",
@@ -82,7 +95,15 @@
     "rikiki"
   ],
   "license": "MIT",
-  "dependencies": {
-    "rolldown": "^1.1.1"
+  "peerDependenciesMeta": {
+    "rolldown": {
+      "optional": true
+    },
+    "playwright": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
   }
 }

package/themes/rikiki.css

@@ -37,6 +37,9 @@
 
   --rik-palette-mango-700: #b65820;
   --rik-palette-mango-500: #f07020;
+  /* The -100 step is the status FILL, and a fill has to be seen: measured
+     against the page it must clear a CIE76 delta E of 10, which lands every
+     hue at an alpha of 0.18. Enforced by scripts/theme-contrast.test.mjs. */
   --rik-palette-mango-200: rgba(240, 112, 32, 0.50);
   --rik-palette-mango-100: rgba(240, 112, 32, 0.18);
   --rik-palette-mango-50:  rgba(240, 112, 32, 0.06);
@@ -80,7 +83,9 @@
   /* Text */
   --rik-text-default:                 var(--rik-palette-ink-900);
   --rik-text-default--muted:          var(--rik-palette-ink-700);
-  --rik-text-default--faint:          var(--rik-palette-ink-500);
+  /* Text-grade · ink-500 measured 4.30:1 on the page, under AA body text.
+     Measured, not eyeballed · scripts/theme-contrast.test.mjs re-checks it. */
+  --rik-text-default--faint:          #75706c;
   --rik-text-inverse:                 var(--rik-palette-night-100);
   --rik-text-inverse--muted:          rgba(232, 228, 240, 0.72);
   --rik-text-inverse--faint:          rgba(232, 228, 240, 0.55);
@@ -96,7 +101,8 @@
   --rik-accent--soft:                 var(--rik-palette-mango-100);
   --rik-accent--faint:                var(--rik-palette-mango-50);
   --rik-accent--strong:               var(--rik-palette-mango-700);
-  --rik-accent__on:                   var(--rik-palette-paper-0);
+  /* Dark on accent · paper-0 on mango-500 measured 2.98:1. ink-900 gives 5.09. */
+  --rik-accent__on:                   var(--rik-palette-ink-900);
 
   /* Status · success */
   --rik-status-success:               var(--rik-palette-helico-500);
@@ -116,7 +122,7 @@
   /* Status · info (low-emphasis accent variant) */
   --rik-status-info:                  var(--rik-palette-mango-500);
   --rik-status-info__text:            var(--rik-palette-mango-700);
-  --rik-status-info__bg:              var(--rik-palette-mango-50);
+  --rik-status-info__bg:              var(--rik-palette-mango-100);
   --rik-status-info__bg--mid:         rgba(240, 112, 32, 0.12);
   --rik-status-info__bg--strong:      rgba(240, 112, 32, 0.20);
   --rik-status-info__border:          var(--rik-palette-mango-200);
@@ -134,7 +140,7 @@
   --rik-focus-ring--width:            2px;
   --rik-focus-ring--offset:           2px;
 
-  /* Link · mango-500 on paper is 3.2:1 (fails WCAG AA for body text).
+  /* Link · mango-500 on paper is 2.81:1 (fails WCAG AA for body text).
      Default link uses mango-700 (≥4.5:1); hover bumps to the brighter
      accent for visual feedback. */
   --rik-link:                         var(--rik-accent--strong);
@@ -150,6 +156,23 @@
   --rik-decor-lime:                   var(--rik-palette-lime-500);
   --rik-decor-canary:                 var(--rik-palette-canary-500);
 
+  /* Default vertical distribution of a slide body · a per-slide `spread`
+     attribute overrides it. Density is usually a per-slide judgement, which is
+     why this is a theme default and not a deck-level attribute. */
+
+  /* Text-grade tone companions · the plain tones are surface/decoration colors
+     and several of them sit under WCAG AA on the page. Anything that renders
+     TEXT in a tone (deck-punch, deck-stat) must route here instead.
+     Measured, not eyeballed · src/shared/contrast.test.ts fails if a value
+     drifts under the large-text threshold. */
+  --rik-status-success__text:       #00a282;
+  --rik-status-warn__text:          var(--rik-palette-warm-500);
+  --rik-status-danger__text:        var(--rik-palette-ember-500);
+  --rik-accent__text:               #e66b1f;
+  --rik-decor-orchid__text:         var(--rik-palette-orchid-500);
+  --rik-decor-lime__text:           #7a9a20;
+  --rik-decor-canary__text:         #00a281;
+
   /* Elevation */
   --rik-elevation-1:                  0 1px 2px rgba(6, 8, 15, 0.04);
   --rik-elevation-2:                  0 1px 3px rgba(6, 8, 15, 0.06), 0 4px 12px rgba(6, 8, 15, 0.06);
@@ -192,17 +215,31 @@
   --rik-text-3xl:                     3.815rem;    /* 1.25^6 */
   --rik-text-4xl:                     4.768rem;    /* 1.25^7 */
 
-  /* Legacy names · kept aligned to the new scale.
+  /* Semantic sizes · the roles, mapped onto the raw scale above.
+     The step between a statement and the reading size is the one axis ADR-002
+     leaves free, and it used to be spent on nothing: a slide title was 1.56x
+     the body, which is not two sizes but one size in two weights, and it is
+     why the decks read flat from the back of a room. The title is 2.44x now
+     and a chapter title 3.05x, both held under the clipping budget that
+     e2e/slide-budget.spec.ts measures.
+
+     Legacy names · kept aligned to the new scale.
      Fixed in 2026-05-20: --rik-font-size-mega was smaller than -big · the
      order is now monotonic (strong < big < mega < hook < stat). */
-  --rik-font-size-xs:                 var(--rik-text-2xs);
-  --rik-font-size-sm:                 var(--rik-text-xs);
+  /* Both of these used to sit under the legibility floor · the 8H rule puts
+     the smallest readable text at 1/50 of the screen height, which is 21.6px
+     on the 1080 canvas, and they resolved to 16.2px (1/66) and 20.3px (1/53).
+     A size nobody in the room can read is not a quiet tier, it is a tier that
+     is not there, and it was the size the micro-label tier lived at.
+     scripts/type-scale.test.mjs holds the floor now. */
+  --rik-font-size-xs:                 var(--rik-text-sm);
+  --rik-font-size-sm:                 var(--rik-text-sm);
   --rik-font-size-body:               var(--rik-text-base);  /* ≈32px · sized for projection */
   --rik-font-size-lead:               var(--rik-text-md);
   --rik-font-size-h2:                 var(--rik-text-md);
-  --rik-font-size-h1:                 var(--rik-text-lg);
-  --rik-font-size-section:            var(--rik-text-lg);
-  --rik-font-size-display:            var(--rik-text-xl);
+  --rik-font-size-h1:                 var(--rik-text-2xl);
+  --rik-font-size-section:            var(--rik-text-3xl);
+  --rik-font-size-display:            var(--rik-text-2xl);
   --rik-font-size-mono:               0.88rem;
   --rik-font-size-mono-sm:            var(--rik-text-xs);
 
@@ -247,6 +284,16 @@
   --rik-slide-padding-x:              4rem;
   --rik-title-block:                  4.5rem;
 
+  /* Slide-title voice · the four values the two shipped themes disagreed on,
+     each of them written twice in a light-DOM rule the other theme copied and
+     edited. A theme carries VALUES; the rule that consumes them is written
+     once. scripts/theme-parity.test.mjs keeps the two files structurally
+     identical so the next divergence cannot be silent. */
+  --rik-title-weight:                 800;
+  --rik-title-tracking:               -0.025em;
+  --rik-title-leading:                1.1;
+  --rik-rule-weight:                  4px;
+
   /* Code surface + syntax (BEM elements under "code") */
   --rik-code__bg:                     #0f0f10;
   --rik-code__border:                 #232325;
@@ -275,43 +322,55 @@
 /* ────────────────────────────────────────────────────────────────
    Minimal reset (don't override the padding of slotted components)
    ──────────────────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; }
-body, h1, h2, h3, h4, p, ul, ol, li, blockquote, pre, table, td, th,
-figure, dl, dd { margin: 0; padding: 0; }
+/* Scoped to the deck subtree · a host page that imports this theme to show an
+   embedded deck keeps its own box model and its own heading margins. */
+deck-root, deck-root *, deck-root *::before, deck-root *::after { box-sizing: border-box; }
+deck-root h1, deck-root h2, deck-root h3, deck-root h4, deck-root p,
+deck-root ul, deck-root ol, deck-root li, deck-root blockquote, deck-root pre,
+deck-root table, deck-root td, deck-root th, deck-root figure,
+deck-root dl, deck-root dd { margin: 0; padding: 0; }
 /* The rem baseline and the no-scroll reset are injected globally by deck-root
    (theme-independent · see _injectGlobals). The theme only owns the page surface
    and the type below. */
-html, body { background: var(--rik-surface-page); }
-body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
+/* Page surface · only when the deck IS the page. An embedded deck must not
+   repaint the document around it. */
+html:has(> body > deck-root), html:has(> body > deck-root) body {
+  background: var(--rik-surface-page);
+}
+html:has(> body > deck-root) body {
+  margin: 0;
+  font-family: var(--rik-font-sans);
+  color: var(--rik-text-default);
+}
 
 ::selection { background: var(--rik-selection__bg); color: var(--rik-selection__text); }
 
 /* ────────────────────────────────────────────────────────────────
    Light-DOM helpers (apply to slotted children of deck-* hosts)
    ──────────────────────────────────────────────────────────────── */
-.accent          { color: var(--rik-accent); }
-.accent-danger   { color: var(--rik-status-danger); }
-.accent-warn     { color: var(--rik-status-warn); }
-.accent-success  { color: var(--rik-status-success); }
-.accent-orchid   { color: var(--rik-decor-orchid); }
-.accent-lime     { color: var(--rik-decor-lime); }
-
-.sub {
+deck-root .accent { color: var(--rik-accent); }
+deck-root .accent-danger { color: var(--rik-status-danger); }
+deck-root .accent-warn { color: var(--rik-status-warn); }
+deck-root .accent-success { color: var(--rik-status-success); }
+deck-root .accent-orchid { color: var(--rik-decor-orchid); }
+deck-root .accent-lime { color: var(--rik-decor-lime); }
+
+deck-root .sub {
   font-size: var(--rik-font-size-h2);
   color: var(--rik-text-inverse--muted);
   line-height: 1.45;
   max-width: 60ch;
 }
-.display {
+deck-root .display {
   font-family: var(--rik-font-display);
   font-size: clamp(3rem, 7cqw, 5.5rem);
   font-weight: 900;
   line-height: 1.05;
   letter-spacing: -0.03em;
 }
-.display.danger      { color: var(--rik-status-danger); }
-.caption.on-dark     { color: var(--rik-text-inverse--muted); font-size: var(--rik-font-size-lead); }
-.lead {
+deck-root .display.danger { color: var(--rik-status-danger); }
+deck-root .caption.on-dark { color: var(--rik-text-inverse--muted); font-size: var(--rik-font-size-lead); }
+deck-root .lead {
   font-size: var(--rik-font-size-lead);
   color: var(--rik-text-default--faint);
   line-height: 1.5;
@@ -321,20 +380,20 @@ body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
 /* Slide titles (h1 in light DOM, slotted) */
 deck-feature > h1,
 deck-split > h1,
-deck-feature-cards > h1 {
+deck-root deck-feature-cards > h1 {
   font-family: var(--rik-font-display);
   font-size: var(--rik-font-size-h1);
-  font-weight: 800;
+  font-weight: var(--rik-title-weight);
   color: var(--rik-text-default);
-  letter-spacing: -0.025em;
-  line-height: 1.1;
+  letter-spacing: var(--rik-title-tracking);
+  line-height: var(--rik-title-leading);
   margin-bottom: var(--rik-space-4);
   padding-bottom: var(--rik-space-2);
-  border-bottom: 4px solid var(--rik-accent);
+  border-bottom: var(--rik-rule-weight) solid var(--rik-accent);
   display: inline-block;
   align-self: flex-start;
 }
-deck-cover > h1 {
+deck-root deck-cover > h1 {
   font-family: var(--rik-font-display);
   font-size: clamp(3.6rem, 9cqw, 8.5rem);
   font-weight: 900;
@@ -343,7 +402,7 @@ deck-cover > h1 {
   letter-spacing: -0.035em;
   margin-bottom: var(--rik-space-4);
 }
-deck-section > h1 {
+deck-root deck-section > h1 {
   font-family: var(--rik-font-display);
   font-size: var(--rik-font-size-section);
   font-weight: 900;
@@ -353,14 +412,14 @@ deck-section > h1 {
   max-width: 18ch;
   text-align: center;
 }
-deck-section > h1 em {
+deck-root deck-section > h1 em {
   color: var(--rik-text-inverse--muted);
   font-style: normal;
   font-weight: 700;
 }
 
 /* Slotted sub-headings */
-deck-cover > .sub, deck-cover > p.sub {
+deck-root deck-cover > .sub, deck-root deck-cover > p.sub {
   display: block;
   font-size: var(--rik-font-size-h2);
   color: var(--rik-text-inverse--muted);
@@ -371,7 +430,7 @@ deck-cover > .sub, deck-cover > p.sub {
 
 deck-feature > .lead,
 deck-split > .lead,
-deck-feature-cards > .lead {
+deck-root deck-feature-cards > .lead {
   display: block;
   font-size: var(--rik-font-size-lead);
   color: var(--rik-text-default--faint);
@@ -381,7 +440,7 @@ deck-feature-cards > .lead {
 }
 
 /* Inline code in light DOM (slotted) */
-deck-feature code, deck-split code, deck-feature-cards code, deck-md code {
+deck-root deck-feature code, deck-root deck-split code, deck-root deck-feature-cards code, deck-root deck-md code {
   font-family: var(--rik-font-mono);
   font-size: var(--rik-font-size-mono-sm);
   background: var(--rik-surface-tint);
@@ -389,17 +448,17 @@ deck-feature code, deck-split code, deck-feature-cards code, deck-md code {
   border-radius: var(--rik-radius-sm);
   color: var(--rik-text-default);
 }
-deck-code code { all: unset; }
+deck-root deck-code code { all: unset; }
 
 /* Light-DOM utility blocks */
-.card-text {
+deck-root .card-text {
   font-size: var(--rik-font-size-body);
   color: var(--rik-text-default--muted);
   line-height: 1.55;
   margin: 0;
 }
 
-table.dense {
+deck-root table.dense {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
@@ -410,7 +469,7 @@ table.dense {
   background: var(--rik-surface-raised--strong);
   box-shadow: var(--rik-elevation-2);
 }
-table.dense th {
+deck-root table.dense th {
   text-align: left;
   padding: 10px var(--rik-space-3);
   color: var(--rik-text-default--faint);
@@ -421,13 +480,80 @@ table.dense th {
   border-bottom: 1px solid var(--rik-border-default);
   background: var(--rik-surface-sunken);
 }
-table.dense td {
+deck-root table.dense td {
   padding: 10px var(--rik-space-3);
   border-bottom: 1px solid var(--rik-border-default);
   color: var(--rik-text-default--muted);
   line-height: 1.4;
 }
-table.dense tr:last-child td { border-bottom: none; }
-table.dense td.ok  { color: var(--rik-status-success);  font-weight: 700; }
-table.dense td.no  { color: var(--rik-status-danger); }
-table.dense td.meh { color: var(--rik-status-warn); }
+deck-root table.dense tr:last-child td { border-bottom: none; }
+deck-root table.dense td.ok { color: var(--rik-status-success);  font-weight: 700; }
+deck-root table.dense td.no { color: var(--rik-status-danger); }
+deck-root table.dense td.meh { color: var(--rik-status-warn); }
+
+/* deck-table · the table stays in the author's light DOM, so its rules live
+   here rather than in a shadow root. Scoped to the deck subtree like every
+   other helper.
+
+   The look is the extras direction applied to data (docs/design/adr-002): the
+   header is told apart by weight and one rule, rows by hairlines, and nothing
+   is filled except the single row that matters. A pale tint reads as nothing at projection distance
+   (the raised surface sits at 1.10 contrast against the page), so emphasis is
+   the inverse surface · a dark band across the row. */
+deck-root table[data-rik-table] {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+deck-root table[data-rik-table] thead th {
+  text-align: left;
+  font-weight: 700;
+  color: var(--rik-text-default--muted);
+  padding: 0 var(--rik-space-4) var(--rik-space-2);
+  border-bottom: 2px solid var(--rik-accent);
+}
+deck-root table[data-rik-table] tbody td {
+  padding: var(--rik-space-3) var(--rik-space-4);
+  border-bottom: 1px solid var(--rik-border-default);
+  color: var(--rik-text-default);
+  line-height: 1.35;
+}
+deck-root table[data-rik-table] tbody tr:last-child td { border-bottom: none; }
+
+/* The emphasised row · one dark band, the only filled thing on the slide. */
+deck-root table[data-rik-table] tr[data-mark] > td {
+  background: var(--deck-table-mark-bg, var(--rik-surface-inverse));
+  color: var(--deck-table-mark-color, var(--rik-text-inverse));
+  border-bottom-color: var(--deck-table-mark-bg, var(--rik-surface-inverse));
+  font-weight: 700;
+}
+deck-root table[data-rik-table] tr[data-mark] > td:first-child {
+  border-radius: var(--rik-radius-sm) 0 0 var(--rik-radius-sm);
+}
+deck-root table[data-rik-table] tr[data-mark] > td:last-child {
+  border-radius: 0 var(--rik-radius-sm) var(--rik-radius-sm) 0;
+}
+
+/* The emphasised column · colour and weight, never a second fill · two
+   overlapping tints is how a table stops having a hierarchy at all. */
+deck-root table[data-rik-table] td[data-mark],
+deck-root table[data-rik-table] th[data-mark] {
+  color: var(--deck-table-col-color, var(--rik-accent__text));
+  font-weight: 700;
+}
+deck-root table[data-rik-table] tr[data-mark] > td[data-mark] {
+  color: var(--deck-table-col-on-mark, var(--rik-accent));
+}
+
+deck-root table[data-rik-table] tr[data-pending] {
+  /* Hidden but still occupying its row · a table that grows makes the slide
+     jump under the audience. */
+  visibility: hidden;
+}
+@media print {
+  deck-root table[data-rik-table] tr[data-pending] { visibility: visible; }
+  deck-root table[data-rik-table] tr[data-mark] > td {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}