origam 2.17.1 → 2.18.1

package/dist/src/assets/css/tokens/dark.css

@@ -11,8 +11,169 @@
  * This file is now HAND-MAINTAINED SOURCE: edit it directly. There is no
  * regeneration step, and no "do not edit" rule any more. A design-token
  * pipeline may be reintroduced later, once the DS is stable.
+ *
+ * ── TWO BLOCKS, ONE DECLARATION SET ────────────────────────────────────────
+ * 1. `[data-theme="dark"], :root:not([data-theme])[data-mode="dark"]`
+ *                                     — the theme asked for EXPLICITLY, on
+ *                                       EITHER axis (see #807 below).
+ * 2. `@media (prefers-color-scheme: dark) {
+ *        :root:not([data-theme]):not([data-mode]) }`
+ *                                     — AUTO mode: the OS preference, and
+ *                                       only while the page has expressed no
+ *                                       preference of its own, ON EITHER AXIS.
+ *
+ * ⛔ BOTH guards are load-bearing, and the second one is not optional.
+ * This DS is TWO-AXIS (see `useTheme`): `data-theme` carries the brand and
+ * `data-mode` carries light/dark. `applyModeToDocument()` ALWAYS writes a
+ * CONCRETE `data-mode`, and the Nuxt plugin OMITS `data-theme` when the
+ * brand resolves to `'auto'`. A page that pinned light therefore looks like
+ * `<html data-mode="light">` — no `data-theme` at all. With `:not([data-theme])`
+ * alone this media query MATCHES that page and repaints it dark against an
+ * explicit choice. Measured in Chromium before adding `:not([data-mode])`:
+ * OS dark + `data-mode="light"` → `rgb(10,10,10)` (the dark surface) instead
+ * of `rgb(255,255,255)`. The same shape is already used by `OrigamCode.vue`.
+ *
+ * Specificity: `:root:not([data-theme]):not([data-mode])` is (0,3,0) — enough
+ * to outrank light.css's `:root, [data-theme="light"]` (0,1,0) when nothing is
+ * pinned — while failing to match at all as soon as either axis is written.
+ *
+ * ── #807 — `data-mode="dark"` SEUL NE PEIGNAIT RIEN ────────────────────────
+ * Avant ce correctif, seule la matrice runtime (`apply-theme.util.ts`)
+ * émettait des règles `[data-mode="…"]` — les feuilles statiques n'en
+ * avaient AUCUNE. Un consommateur qui appelle `useTheme().setMode('dark')`
+ * sans avoir enregistré de thème de marque obtenait `<html data-mode="dark">`
+ * et restait en clair : les deux setters de `useTheme()` ne faisaient pas la
+ * même chose. Mesuré en Chromium sur `dist/src/assets/css/main.css` :
+ * `data-mode="dark"` seul → `rgb(255,255,255)` (surface claire) au lieu de
+ * `rgb(10,10,10)`.
+ *
+ * Le correctif AJOUTE UN SÉLECTEUR à la liste du bloc 1 existant plutôt que
+ * de dupliquer un troisième bloc de ~2730 déclarations (le coût que #807
+ * chiffrait pour l'approche naïve — `main.css` était déjà passé de 364 ko à
+ * 538 ko avec le second bloc). `:root:not([data-theme])[data-mode="dark"]`
+ * a la même spécificité (0,3,0) que le sélecteur du bloc média ci-dessus et
+ * matche exactement le même monde que lui côté "explicite" : `data-theme`
+ * absent, `data-mode="dark"` posé. Les deux blocs restent mutuellement
+ * exclusifs sur l'attribut `data-mode` (présent ici, absent là) donc ne se
+ * recouvrent jamais. `data-theme="light" data-mode="dark"` reste clair : la
+ * marque (`data-theme`) gouverne dès qu'elle est posée, `data-mode` seul ne
+ * bascule que l'absence de marque.
+ *
+ * ⛔ Le sélecteur 1 (bloc explicite) et le sélecteur du bloc média restent
+ * BYTE-DIFFÉRENTS de propos : le bloc 1 est INCONDITIONNEL (s'applique quel
+ * que soit `prefers-color-scheme`) tandis que le bloc média ne s'active que
+ * si NI `data-theme` NI `data-mode` ne sont posés. Ne pas les fusionner.
+ *
+ * ⚠️ Cette phrase disait « le deuxième bloc reste volontairement un
+ * SOUS-ENSEMBLE de 11 déclarations ». C'est FAUX depuis #794 : recompté le
+ * 2026-09-22 en parsant la feuille, les deux blocs portent **2731
+ * déclarations chacun**. La note décrivait un état antérieur que plus rien ne
+ * remesurait.
+ *
+ * ── #871 — POURQUOI `[data-mode="dark"]` REMPLACE `:root:not([data-theme])…` ─
+ * Le sélecteur précédent, `:root:not([data-theme])[data-mode="dark"]`, était
+ * ancré à la RACINE. Or les ~1 761 déclarations DÉRIVÉES de ce bloc
+ * (`--origam-title---color: var(--origam-color__text---primary)`) ne se
+ * ré-évaluent QUE sur un élément que le sélecteur matche : ailleurs, la
+ * valeur héritée est déjà SUBSTITUÉE. Un sous-arbre
+ * `<OrigamThemeProvider mode="dark">` — avec ou sans marque —
+ * basculait donc bien les ~60 tokens sémantiques (bloc runtime
+ * `[data-mode="dark"]` / `[data-theme="X"][data-mode="dark"]`) mais gardait
+ * les 1 761 dérivés GELÉS sur les valeurs CLAIRES de la racine. D'où le motif
+ * dominant de #871 : `rgb(10,10,10)` sur `rgb(10,10,10)`, texte et fond
+ * identiques.
+ *
+ * `[data-mode="dark"]` matche aussi bien la racine que n'importe quel
+ * sous-arbre, et subsume donc l'ancien sélecteur (une racine sans
+ * `data-theme` portant `data-mode="dark"` le matche).
+ *
+ * ⛔ Le `:not([data-theme="light"])` n'est PAS décoratif : il préserve la
+ * règle de #807 — « la marque gouverne dès qu'elle est posée » — pour la
+ * seule combinaison où les deux axes se contredisent,
+ * `data-theme="light" data-mode="dark"`, épinglée par le contrôle négatif de
+ * `packages/tests/e2e/tokens-prefers-color-scheme.spec.ts`.
+ *
+ * ⛔ Spécificité (0,2,0). Elle doit rester ≥ celle de `light.css`
+ * (`:root` / `[data-theme="light"]` / `[data-mode="light"]`, toutes (0,1,0))
+ * et ≤ celle du bloc runtime d'une marque sombre
+ * (`[data-theme="X"][data-mode="dark"]`, (0,2,0), injecté plus tard donc
+ * gagnant à égalité). Monter ou descendre ce sélecteur casse l'un des deux
+ * côtés.
+ *
+ * ⛔ The two blocks carry the SAME declarations, and this file is BYTE-IDENTICAL
+ * to its twin — the whole file, header included. The pair is
+ * `src/assets/css/tokens/dark.css` ⇄ `src/assets/scss/tokens/_dark.scss`, and
+ * the same holds for every other token pair.
+ *
+ * Why it matters here in particular: `main.css` — the `./styles` export, the
+ * entry a consumer gets by default — is compiled from the SCSS side. A block
+ * present in the CSS file and missing from the SCSS one ships a bundle with NO
+ * auto dark mode, while this file and the documentation both say otherwise.
+ * That was #794. `scripts/guards/token-twins.mjs` now fails on any divergence.
+ *
+ * ── #789 — CONTRASTE : POURQUOI CES PALIERS-LÀ ─────────────────────────────
+ * Mêmes couples `bg`/`fg` blanc qu'en clair, mêmes valeurs (success
+ * `green-700`, warning `amber-700`, info `#2563eb`). S'y ajoutent deux
+ * paliers PROPRES au sombre, mesurés en Chromium, alpha composité :
+ *
+ *     action--primary---bg        primary-500 #8b5cf6  4.23  →  primary-600  5.70
+ *     action--primary---bgHover   primary-400 #a78bfa  2.72  →  primary-700  7.10
+ *
+ * ⛔ Le `bgHover` sombre était la pire paire du jeu — 2.72:1 en texte blanc,
+ * pire que le fond au repos — et n'était signalé nulle part.
+ *
+ * ⚠️ CONTRAINTE DE PALETTE, mesurée : sur la surface sombre `#0a0a0a`, le
+ * SEUL palier violet qui tienne À LA FOIS le texte blanc à 4.5:1 et les 3:1
+ * non textuels de 1.4.11 contre la page est `primary---600` (blanc 5.70,
+ * page 3.47). Deux paliers distincts pour repos ET survol sont donc
+ * impossibles avec du texte blanc : `bgHover` à `primary---700` tombe à
+ * 2.79 contre la page. Arbitrage assumé — le survol est transitoire et
+ * désigné par le curseur, l'état au repos reste à 3.47. L'alternative
+ * (garder `#8b5cf6` et passer `primary---fg` à l'encre en sombre) tient les
+ * deux critères mais fait du primaire la seule intention à texte foncé.
+ *
+ * Mesure, témoins et non-régression :
+ * `packages/tests/e2e/token-intent-contrast.spec.ts`.
+ *
+ * ── #871 — SURFACE QUI NE BASCULE PAS × PREMIER PLAN QUI BASCULE ───────────
+ * Deuxième famille de défauts trouvée en rejouant le chiffrage, INDÉPENDANTE
+ * du mécanisme de sélecteur ci-dessus : elle se voit aussi bien en theming
+ * RACINE qu'en sous-arbre.
+ *
+ * `--origam-color__text---inverse` est défini comme l'opposé de
+ * `text---primary` : blanc en clair, encre en sombre. Posé sur une surface
+ * qui, elle, est épinglée à une PRIMITIVE (donc identique dans les deux
+ * modes), il est correct en clair et illisible en sombre :
+ *
+ *     system-bar   fond neutral-700 (#404040) · fg text---inverse → 1.91:1
+ *     tooltip      fond neutral-800 (#262626) · fg text---inverse → 1.31:1
+ *
+ * Le correctif se fait DANS CETTE FEUILLE UNIQUEMENT : `text---primary`, qui
+ * est clair en sombre par définition, sur une surface sombre. `light.css`
+ * n'est pas touché et garde `text---inverse`, qui y vaut blanc.
+ *
+ * ⛔ Premier essai, ÉCARTÉ PAR LA MESURE : passer les deux feuilles à
+ * `text---onColor`. Blanc dans les deux modes pour l'identité native, donc
+ * NO-OP apparent en clair — sauf qu'une marque est libre de redéfinir
+ * `onColor`, et `cartoon` le pose à `#3a2a2e` (brun foncé). Le « no-op » a
+ * mesuré **+2 violations en mode CLAIR** (system-bar cartoon, 1.31:1). La
+ * leçon vaut au-delà de ce ticket : sur cette famille, un token sémantique
+ * n'est jamais « le même dans les deux modes » — seules les 8 identités
+ * mesurées le disent.
+ *
+ * Symétriquement, `--origam-bottom-nav---background` était épinglé à
+ * `neutral---200` (#e6e6e6) dans les DEUX modes : une dalle claire au milieu
+ * d'une UI sombre, avec un `text---primary` presque blanc par-dessus
+ * (1.03:1). Il passe au token sémantique `surface---overlay`, qui bascule.
+ * Le bloc clair n'est pas touché.
+ *
+ * ⚠️ Non traité ici : `video__controls`, `video--error`, `audio__cover-label`,
+ * `media-scrubber__tooltip`, `media-volume-control__tooltip` sont eux aussi
+ * épinglés à une primitive neutre sombre — mais leur premier plan ne bascule
+ * pas, donc aucun d'eux n'est ressorti de la mesure. Non vérifié un par un.
  */
-[data-theme="dark"] {
+[data-theme="dark"],
+[data-mode="dark"]:not([data-theme="light"]) {
   --origam-color__surface---default: var(--origam-color__neutral---950);
   --origam-color__surface---raised: var(--origam-color__neutral---900);
   --origam-color__surface---overlay: var(--origam-color__neutral---800);
@@ -22,15 +183,15 @@
   --origam-color__text---primary: var(--origam-color__neutral---50);
   --origam-color__text---secondary: var(--origam-color__neutral---400);
   --origam-color__text---disabled: var(--origam-color__neutral---600);
-  --origam-color__text---inverse: var(--origam-color__neutral---900);
+  --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
   --origam-color__text---onColor: var(--origam-color__neutral---0);
   --origam-color__border---default: var(--origam-color__neutral---700);
   --origam-color__border---subtle: var(--origam-color__neutral---800);
   --origam-color__border---strong: var(--origam-color__neutral---400);
   --origam-color__border---focus: var(--origam-color__primary---400);
-  --origam-color__action--primary---bg: var(--origam-color__primary---500);
+  --origam-color__action--primary---bg: var(--origam-color__primary---600);
   --origam-color__accent---base: var(--origam-color__action--primary---bg);
-  --origam-color__action--primary---bgHover: var(--origam-color__primary---400);
+  --origam-color__action--primary---bgHover: var(--origam-color__primary---700);
   --origam-color__action--primary---bgSubtle: var(--origam-color__primary---900);
   --origam-color__action--primary---bgDisabled: var(--origam-color__neutral---800);
   --origam-color__action--primary---fg: var(--origam-color__neutral---0);
@@ -47,12 +208,12 @@
   --origam-color__action--ghost---bgDisabled: rgba(0, 0, 0, 0);
   --origam-color__action--ghost---fg: var(--origam-color__primary---400);
   --origam-color__action--ghost---fgDisabled: var(--origam-color__neutral---600);
-  --origam-color__feedback--success---bg: var(--origam-color__green---500);
+  --origam-color__feedback--success---bg: var(--origam-color__green---700);
   --origam-color__feedback--success---bgSubtle: var(--origam-color__neutral---900);
   --origam-color__feedback--success---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--success---fgSubtle: var(--origam-color__green---400);
   --origam-color__feedback--success---border: var(--origam-color__green---500);
-  --origam-color__feedback--warning---bg: var(--origam-color__amber---600);
+  --origam-color__feedback--warning---bg: var(--origam-color__amber---700);
   --origam-color__feedback--warning---bgSubtle: var(--origam-color__neutral---900);
   --origam-color__feedback--warning---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--warning---fgSubtle: var(--origam-color__amber---400);
@@ -62,7 +223,7 @@
   --origam-color__feedback--danger---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--danger---fgSubtle: var(--origam-color__red---400);
   --origam-color__feedback--danger---border: var(--origam-color__red---400);
-  --origam-color__feedback--info---bg: var(--origam-color__blue---500);
+  --origam-color__feedback--info---bg: #2563eb;
   --origam-color__feedback--info---bgSubtle: var(--origam-color__neutral---900);
   --origam-color__feedback--info---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--info---fgSubtle: var(--origam-color__blue---400);
@@ -88,7 +249,7 @@
   --origam-btn---border-style: solid;
   --origam-btn---border-color: currentColor;
   --origam-btn---position: relative;
-  --origam-btn---density: 0;
+  --origam-btn---density: 0px;
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
@@ -582,7 +743,7 @@
   --origam-bottom-nav---density: 0px;
   --origam-bottom-nav---max-width: 100%;
   --origam-bottom-nav---height: var(--origam-space---12);
-  --origam-bottom-nav---background: var(--origam-color__neutral---200);
+  --origam-bottom-nav---background: var(--origam-color__surface---overlay);
   --origam-bottom-nav---color: var(--origam-color__text---primary);
   --origam-bottom-nav---box-shadow: var(--origam-shadow---none);
   --origam-bottom-nav---padding-block-start: var(--origam-space---2);
@@ -852,7 +1013,7 @@
   --origam-system-bar---height-window: 32px;
   --origam-system-bar---padding-inline: var(--origam-space---2);
   --origam-system-bar---background: var(--origam-color__neutral---700);
-  --origam-system-bar---color: var(--origam-color__text---inverse);
+  --origam-system-bar---color: var(--origam-color__text---primary);
   --origam-system-bar---font-size: var(--origam-font__size---sm);
   --origam-system-bar---font-weight: var(--origam-font__weight---regular);
   --origam-system-bar---letter-spacing: var(--origam-font__letterSpacing---wide);
@@ -919,8 +1080,8 @@
   --origam-field__input---padding-block-filled: 20px;
   --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
   --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-  --origam-field__input---padding-start: 0;
-  --origam-field__input---padding-end: 0;
+  --origam-field__input---padding-start: 0px;
+  --origam-field__input---padding-end: 0px;
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
   --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -1370,7 +1531,7 @@
   --origam-menu---offset-left: var(--origam-space---0);
   --origam-menu---offset-right: var(--origam-space---0);
   --origam-tooltip---background-color: var(--origam-color__neutral---800);
-  --origam-tooltip---color: var(--origam-color__text---inverse);
+  --origam-tooltip---color: var(--origam-color__text---primary);
   --origam-tooltip---backdrop-filter: none;
   --origam-tooltip---font-size: var(--origam-font__size---sm);
   --origam-tooltip---font-weight: var(--origam-font__weight---medium);
@@ -1430,6 +1591,9 @@
   --origam-table__header-cell---padding-inline: var(--origam-space---4);
   --origam-table__header-cell---border-bottom-color: var(--origam-color__border---default);
   --origam-table__header-cell---border-bottom-width: var(--origam-border__width---2);
+  /* #840 — see light.css: derived from the density-aware padding-block
+     token so it can't drift out of sync with it. */
+  --origam-table__header-cell---height: calc((2 * var(--origam-table__header-cell---padding-block, 12px)) + var(--origam-table__header-cell---border-bottom-width, 2px) + 18px);
   --origam-table__cell---padding-block: var(--origam-space---3);
   --origam-table__cell---padding-inline: var(--origam-space---4);
   --origam-table__cell---border-color: var(--origam-color__border---subtle);
@@ -2745,7 +2909,7 @@
   --origam-tab-panels__panel--focus---outline-color: currentColor;
 }
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
+  :root:not([data-theme]):not([data-mode]) {
     --origam-color__surface---default: var(--origam-color__neutral---950);
     --origam-color__surface---raised: var(--origam-color__neutral---900);
     --origam-color__surface---overlay: var(--origam-color__neutral---800);
@@ -2755,15 +2919,15 @@
     --origam-color__text---primary: var(--origam-color__neutral---50);
     --origam-color__text---secondary: var(--origam-color__neutral---400);
     --origam-color__text---disabled: var(--origam-color__neutral---600);
-    --origam-color__text---inverse: var(--origam-color__neutral---900);
+    --origam-color__text---inverse: var(--origam-color__neutral---950); /* #615 — voir light.css : le bloc runtime de `origamDarkTheme` pose #0a0a0a */
     --origam-color__text---onColor: var(--origam-color__neutral---0);
     --origam-color__border---default: var(--origam-color__neutral---700);
     --origam-color__border---subtle: var(--origam-color__neutral---800);
     --origam-color__border---strong: var(--origam-color__neutral---400);
     --origam-color__border---focus: var(--origam-color__primary---400);
-    --origam-color__action--primary---bg: var(--origam-color__primary---500);
+    --origam-color__action--primary---bg: var(--origam-color__primary---600);
     --origam-color__accent---base: var(--origam-color__action--primary---bg);
-    --origam-color__action--primary---bgHover: var(--origam-color__primary---400);
+    --origam-color__action--primary---bgHover: var(--origam-color__primary---700);
     --origam-color__action--primary---bgSubtle: var(--origam-color__primary---900);
     --origam-color__action--primary---bgDisabled: var(--origam-color__neutral---800);
     --origam-color__action--primary---fg: var(--origam-color__neutral---0);
@@ -2780,12 +2944,12 @@
     --origam-color__action--ghost---bgDisabled: rgba(0, 0, 0, 0);
     --origam-color__action--ghost---fg: var(--origam-color__primary---400);
     --origam-color__action--ghost---fgDisabled: var(--origam-color__neutral---600);
-    --origam-color__feedback--success---bg: var(--origam-color__green---500);
+    --origam-color__feedback--success---bg: var(--origam-color__green---700);
     --origam-color__feedback--success---bgSubtle: var(--origam-color__neutral---900);
     --origam-color__feedback--success---fg: var(--origam-color__neutral---0);
     --origam-color__feedback--success---fgSubtle: var(--origam-color__green---400);
     --origam-color__feedback--success---border: var(--origam-color__green---500);
-    --origam-color__feedback--warning---bg: var(--origam-color__amber---600);
+    --origam-color__feedback--warning---bg: var(--origam-color__amber---700);
     --origam-color__feedback--warning---bgSubtle: var(--origam-color__neutral---900);
     --origam-color__feedback--warning---fg: var(--origam-color__neutral---0);
     --origam-color__feedback--warning---fgSubtle: var(--origam-color__amber---400);
@@ -2795,7 +2959,7 @@
     --origam-color__feedback--danger---fg: var(--origam-color__neutral---0);
     --origam-color__feedback--danger---fgSubtle: var(--origam-color__red---400);
     --origam-color__feedback--danger---border: var(--origam-color__red---400);
-    --origam-color__feedback--info---bg: var(--origam-color__blue---500);
+    --origam-color__feedback--info---bg: #2563eb;
     --origam-color__feedback--info---bgSubtle: var(--origam-color__neutral---900);
     --origam-color__feedback--info---fg: var(--origam-color__neutral---0);
     --origam-color__feedback--info---fgSubtle: var(--origam-color__blue---400);
@@ -2821,7 +2985,7 @@
     --origam-btn---border-style: solid;
     --origam-btn---border-color: currentColor;
     --origam-btn---position: relative;
-    --origam-btn---density: 0;
+    --origam-btn---density: 0px;
     --origam-btn---width: auto;
     --origam-btn---min-width: 64px;
     --origam-btn---max-width: 100%;
@@ -3315,7 +3479,7 @@
     --origam-bottom-nav---density: 0px;
     --origam-bottom-nav---max-width: 100%;
     --origam-bottom-nav---height: var(--origam-space---12);
-    --origam-bottom-nav---background: var(--origam-color__neutral---200);
+    --origam-bottom-nav---background: var(--origam-color__surface---overlay);
     --origam-bottom-nav---color: var(--origam-color__text---primary);
     --origam-bottom-nav---box-shadow: var(--origam-shadow---none);
     --origam-bottom-nav---padding-block-start: var(--origam-space---2);
@@ -3585,7 +3749,7 @@
     --origam-system-bar---height-window: 32px;
     --origam-system-bar---padding-inline: var(--origam-space---2);
     --origam-system-bar---background: var(--origam-color__neutral---700);
-    --origam-system-bar---color: var(--origam-color__text---inverse);
+    --origam-system-bar---color: var(--origam-color__text---primary);
     --origam-system-bar---font-size: var(--origam-font__size---sm);
     --origam-system-bar---font-weight: var(--origam-font__weight---regular);
     --origam-system-bar---letter-spacing: var(--origam-font__letterSpacing---wide);
@@ -3652,8 +3816,8 @@
     --origam-field__input---padding-block-filled: 20px;
     --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
     --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-    --origam-field__input---padding-start: 0;
-    --origam-field__input---padding-end: 0;
+    --origam-field__input---padding-start: 0px;
+    --origam-field__input---padding-end: 0px;
     --origam-field__input---opacity: 0.7;
     --origam-field__label---font-size: 0.75em;
     --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -4103,7 +4267,7 @@
     --origam-menu---offset-left: var(--origam-space---0);
     --origam-menu---offset-right: var(--origam-space---0);
     --origam-tooltip---background-color: var(--origam-color__neutral---800);
-    --origam-tooltip---color: var(--origam-color__text---inverse);
+    --origam-tooltip---color: var(--origam-color__text---primary);
     --origam-tooltip---backdrop-filter: none;
     --origam-tooltip---font-size: var(--origam-font__size---sm);
     --origam-tooltip---font-weight: var(--origam-font__weight---medium);
@@ -4163,6 +4327,9 @@
     --origam-table__header-cell---padding-inline: var(--origam-space---4);
     --origam-table__header-cell---border-bottom-color: var(--origam-color__border---default);
     --origam-table__header-cell---border-bottom-width: var(--origam-border__width---2);
+    /* #840 — see light.css: derived from the density-aware padding-block
+       token so it can't drift out of sync with it. */
+    --origam-table__header-cell---height: calc((2 * var(--origam-table__header-cell---padding-block, 12px)) + var(--origam-table__header-cell---border-bottom-width, 2px) + 18px);
     --origam-table__cell---padding-block: var(--origam-space---3);
     --origam-table__cell---padding-inline: var(--origam-space---4);
     --origam-table__cell---border-color: var(--origam-color__border---subtle);

package/dist/src/assets/css/tokens/light.css

@@ -11,16 +11,78 @@
  * This file is now HAND-MAINTAINED SOURCE: edit it directly. There is no
  * regeneration step, and no "do not edit" rule any more. A design-token
  * pipeline may be reintroduced later, once the DS is stable.
+ *
+ * ── #789 — CONTRASTE : POURQUOI CES PALIERS-LÀ ─────────────────────────────
+ * `feedback--{success,warning,info}---bg` portent tous un `---fg` BLANC. Le
+ * couple doit donc tenir 4.5:1 (WCAG AA, texte). Mesuré en Chromium, alpha
+ * composité, avec témoins calculables à la main :
+ *
+ *     success   green-500 #4caf50  2.78  →  green-700 #15803d  5.02
+ *     warning   amber-600 #fb8c00  2.37  →  amber-700 #b45309  5.02
+ *     info      blue-500  #2196f3  3.12  →            #2563eb  5.17
+ *
+ * ⛔ Ne pas « re-éclaircir » ces trois paliers sans remesurer : sur cette
+ * palette, aucun palier plus clair ne tient AA avec du texte blanc. La
+ * mesure et ses témoins vivent dans
+ * `packages/tests/e2e/token-intent-contrast.spec.ts` — elle rougit ici.
+ *
+ * `info---bg` est le seul littéral du lot : `#2563eb` n'existe pas dans la
+ * palette primitive (son `blue---600` vaut `#1d4ed8`, soit le 700 de
+ * Tailwind). La valeur est celle de `origam.theme.ts`, ce qui ferme du même
+ * coup la divergence feuille ↔ thème que #793 suit.
+ *
+ * ── #871 — POURQUOI `[data-mode="light"]` DANS LA LISTE ────────────────────
+ * Les ~1 792 déclarations DÉRIVÉES de ce bloc — la forme
+ * `--origam-title---color: var(--origam-color__text---primary)` —
+ * ne se ré-évaluent QUE sur un élément que ce sélecteur matche. Sur tout autre
+ * élément, la valeur héritée est déjà SUBSTITUÉE — c'est la sémantique des
+ * custom properties, pas un bug : `--a: var(--b)` posé à `:root`, `--b`
+ * réécrit sur un enfant, et `--a` garde sur l'enfant la valeur calculée à la
+ * racine.
+ *
+ * Sans `[data-mode="light"]`, un sous-arbre `<OrigamThemeProvider mode="light">`
+ * à l'intérieur d'une page sombre gardait donc les 1 792 dérivés GELÉS sur les
+ * valeurs sombres de la racine. C'est le pendant clair du défaut mesuré en
+ * sombre par #871.
+ *
+ * ⛔ SPÉCIFICITÉ (0,1,0), VOLONTAIREMENT. Le bloc runtime d'une marque claire
+ * (`applyThemes()` sérialise `[data-theme="cartoon"]` sans `data-mode`) est
+ * lui aussi (0,1,0) et est injecté dans `<head>` APRÈS cette feuille : à
+ * égalité, l'ordre source tranche et la marque gagne. Monter ce sélecteur à
+ * (0,2,0) (p. ex. `[data-mode="light"]:not([data-theme="dark"])`) le ferait
+ * perdre, et cette feuille repeindrait par-dessus chaque marque claire.
+ *
+ * ── #871 — `system-bar` / `tooltip` : RIEN NE CHANGE ICI ──────────────────
+ * Ces deux composants peignent une surface SOMBRE dans les deux modes
+ * (`neutral---700` / `neutral---800`) et lisent `text---inverse`, qui vaut
+ * blanc EN CLAIR — correct, donc inchangé. C'est en SOMBRE que le même token
+ * vaut de l'encre et rend le texte illisible ; le correctif est donc dans
+ * `dark.css` seul. Voir son en-tête, y compris la piste écartée (passer les
+ * DEUX feuilles à `text---onColor`, qui a mesuré +2 violations en clair sur
+ * la marque `cartoon`).
  */
 :root,
-[data-theme="light"] {
+[data-theme="light"],
+[data-mode="light"] {
   --origam-color__surface---default: var(--origam-color__neutral---0);
   --origam-color__surface---raised: var(--origam-color__neutral---0);
   --origam-color__surface---overlay: var(--origam-color__neutral---100);
   --origam-color__surface---sunken: var(--origam-color__neutral---50);
   --origam-color__surface---disabled: var(--origam-color__neutral---200);
   --origam-color__surface---inverse: var(--origam-color__neutral---900);
-  --origam-color__text---primary: var(--origam-color__neutral---900);
+  /* #615 — `950`, PAS `900`. Cette feuille NE gagne PAS la cascade au niveau
+     document : `createOrigam()` appelle `applyThemes()`, qui serialise
+     `origamLightTheme` (src/themes/origam.theme.ts) en un bloc `:root { … }`
+     injecte dans <head> APRES cette feuille. A specificite egale (0,1,0) c'est
+     l'ordre source qui tranche, donc le bloc runtime gagne — et il pose
+     `#0a0a0a`, soit neutral-950. Tant que cette ligne disait `900`, le meme
+     theme « light » peignait DEUX couleurs : `#0a0a0a` a la racine et
+     `#171717` dans un sous-arbre `<OrigamThemeProvider theme="light">` (ou
+     `[data-theme="light"]` matche alors que `:root` ne matche plus). Les deux
+     valeurs mesurees en Chromium ; le contraste sur `surface.default` passe de
+     17.93:1 a 19.80:1. Si cette ligne doit revenir a `900`, c'est
+     `origam.theme.ts` qu'il faut changer AVEC, sinon la divergence revient. */
+  --origam-color__text---primary: var(--origam-color__neutral---950);
   --origam-color__text---secondary: var(--origam-color__neutral---600);
   --origam-color__text---disabled: var(--origam-color__neutral---400);
   --origam-color__text---inverse: var(--origam-color__neutral---0);
@@ -48,26 +110,26 @@
   --origam-color__action--ghost---bgDisabled: rgba(0, 0, 0, 0);
   --origam-color__action--ghost---fg: var(--origam-color__primary---600);
   --origam-color__action--ghost---fgDisabled: var(--origam-color__neutral---400);
-  --origam-color__feedback--success---bg: var(--origam-color__green---500);
+  --origam-color__feedback--success---bg: var(--origam-color__green---700);
   --origam-color__feedback--success---bgSubtle: var(--origam-color__green---50);
   --origam-color__feedback--success---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--success---fgSubtle: var(--origam-color__green---700);
-  --origam-color__feedback--success---border: var(--origam-color__green---500);
-  --origam-color__feedback--warning---bg: var(--origam-color__amber---600);
+  --origam-color__feedback--success---border: var(--origam-color__green---700);
+  --origam-color__feedback--warning---bg: var(--origam-color__amber---700);
   --origam-color__feedback--warning---bgSubtle: var(--origam-color__amber---50);
   --origam-color__feedback--warning---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--warning---fgSubtle: var(--origam-color__amber---700);
-  --origam-color__feedback--warning---border: var(--origam-color__amber---600);
+  --origam-color__feedback--warning---border: var(--origam-color__amber---700);
   --origam-color__feedback--danger---bg: var(--origam-color__red---600);
   --origam-color__feedback--danger---bgSubtle: var(--origam-color__red---50);
   --origam-color__feedback--danger---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--danger---fgSubtle: var(--origam-color__red---700);
   --origam-color__feedback--danger---border: var(--origam-color__red---400);
-  --origam-color__feedback--info---bg: var(--origam-color__blue---500);
+  --origam-color__feedback--info---bg: #2563eb;
   --origam-color__feedback--info---bgSubtle: var(--origam-color__blue---50);
   --origam-color__feedback--info---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--info---fgSubtle: var(--origam-color__blue---700);
-  --origam-color__feedback--info---border: var(--origam-color__blue---500);
+  --origam-color__feedback--info---border: #2563eb;
   --origam-color__overlay---scrim: var(--origam-color---white);
   --origam-gradient---sunset: linear-gradient(135deg, #ff7e5f, #feb47b);
   --origam-gradient---ocean: linear-gradient(135deg, #2193b0, #6dd5ed);
@@ -89,7 +151,7 @@
   --origam-btn---border-style: solid;
   --origam-btn---border-color: currentColor;
   --origam-btn---position: relative;
-  --origam-btn---density: 0;
+  --origam-btn---density: 0px;
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
@@ -920,8 +982,8 @@
   --origam-field__input---padding-block-filled: 20px;
   --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
   --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-  --origam-field__input---padding-start: 0;
-  --origam-field__input---padding-end: 0;
+  --origam-field__input---padding-start: 0px;
+  --origam-field__input---padding-end: 0px;
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
   --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -1431,6 +1493,11 @@
   --origam-table__header-cell---padding-inline: var(--origam-space---4);
   --origam-table__header-cell---border-bottom-color: var(--origam-color__border---default);
   --origam-table__header-cell---border-bottom-width: var(--origam-border__width---2);
+  /* #840 — derived from the SAME density-aware padding-block token, so it
+     never drifts out of sync with it: 2 * padding-block + border-bottom
+     + 18px (measured content-box line height of a single-line header
+     cell in Chromium, constant across the 3 density rungs). */
+  --origam-table__header-cell---height: calc((2 * var(--origam-table__header-cell---padding-block, 12px)) + var(--origam-table__header-cell---border-bottom-width, 2px) + 18px);
   --origam-table__cell---padding-block: var(--origam-space---3);
   --origam-table__cell---padding-inline: var(--origam-space---4);
   --origam-table__cell---border-color: var(--origam-color__border---subtle);

package/dist/src/assets/locales/en.json

@@ -83,6 +83,7 @@
       "pause": "Pause the carousel",
       "play": "Play the carousel",
       "slide": "slide",
+      "role_description": "carousel",
       "aria_label": {
         "delimiter": "Carousel slide {0} of {1}"
       }
@@ -286,7 +287,9 @@
     "command_palette": {
       "aria_label": "Command palette",
       "placeholder": "Search…",
-      "empty_text": "No results"
+      "empty_text": "No results",
+      "footer_navigate": "Navigate",
+      "footer_select": "Select"
     },
     "chart": {
       "aria_label": "Chart",
@@ -303,17 +306,22 @@
       "box_plot": {
         "aria_label": "box plot chart",
         "desc_one": "Box plot with {count} category.",
-        "desc_other": "Box plot with {count} categories."
+        "desc_other": "Box plot with {count} categories.",
+        "box_aria_label": "{0}: min={1} Q1={2} median={3} Q3={4} max={5}"
       },
       "bullet": {
         "aria_label": "bullet chart",
         "desc_one": "Bullet chart with {count} indicator.",
-        "desc_other": "Bullet chart with {count} indicators."
+        "desc_other": "Bullet chart with {count} indicators.",
+        "bullet_aria_label": "{0}: value {1}, target {2}, {3}% achievement"
       },
       "candlestick": {
         "aria_label": "candlestick chart",
         "desc_one": "Candlestick chart with {count} candle.",
-        "desc_other": "Candlestick chart with {count} candles."
+        "desc_other": "Candlestick chart with {count} candles.",
+        "direction_bullish": "bullish",
+        "direction_bearish": "bearish",
+        "candle_aria_label": "{0}: {1}, open {2}, high {3}, low {4}, close {5}"
       },
       "gauge": {
         "aria_label": "gauge chart",
@@ -344,12 +352,15 @@
         "aria_label": "Pareto chart",
         "cumulative_label": "Cumulative %",
         "desc_one": "Pareto chart with {count} category, sorted descending by value.",
-        "desc_other": "Pareto chart with {count} categories, sorted descending by value."
+        "desc_other": "Pareto chart with {count} categories, sorted descending by value.",
+        "bar_aria_label": "{0}: {1} ({2}%, cumulative {3}%)"
       },
       "pictorial": {
         "aria_label": "pictorial chart",
         "desc_one": "Pictorial chart with {count} column.",
-        "desc_other": "Pictorial chart with {count} columns."
+        "desc_other": "Pictorial chart with {count} columns.",
+        "fill_column_aria_label": "{0}: {1} — {2}% of maximum",
+        "column_aria_label": "{0}: {1} ({2} of {3} icons)"
       },
       "range_selector": {
         "aria_label": "Chart range selector"
@@ -477,6 +488,10 @@
     "treeview": {
       "aria_label": "File tree",
       "node_children_aria_label": "{0} contents"
+    },
+    "slider_field": {
+      "thumb_start_aria_label": "{0} (start)",
+      "thumb_end_aria_label": "{0} (end)"
     }
   }
 }