origam 2.17.0 → 2.18.0

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

@@ -11,8 +11,101 @@
  * 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.
+ *
+ * ⛔ Le deuxième bloc (media query, "AUTO mode") reste volontairement un
+ * SOUS-ENSEMBLE de 11 déclarations, pas une copie complète des 2731 du bloc
+ * 1 — c'est un fait préexistant à #807, non réévalué ici, et hors périmètre
+ * de ce ticket.
+ *
+ * ⛔ 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`.
  */
-[data-theme="dark"] {
+[data-theme="dark"],
+:root:not([data-theme])[data-mode="dark"] {
   --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 +115,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 +140,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 +155,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 +181,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%;
@@ -919,8 +1012,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);
@@ -1430,6 +1523,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);
@@ -1996,8 +2092,9 @@
   --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
   --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
   --origam-switch__track---color-error: var(--origam-color__feedback--danger---fg);
-  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
-  --origam-switch__track---border-width: var(--origam-border__width---0);
+  --origam-switch__track---border-color: var(--origam-color__border---default);
+  --origam-switch__track---border-style: solid;
+  --origam-switch__track---border-width: var(--origam-border__width---thin);
   --origam-switch__track---backdrop-filter: none;
   --origam-switch__thumb---size: 20px;
   --origam-switch__thumb---background-color: var(--origam-color__surface---default);
@@ -2744,7 +2841,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);
@@ -2754,15 +2851,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);
@@ -2779,12 +2876,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);
@@ -2794,7 +2891,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);
@@ -2820,7 +2917,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%;
@@ -3651,8 +3748,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);
@@ -4162,6 +4259,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);
@@ -4728,8 +4828,9 @@
     --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
     --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
     --origam-switch__track---color-error: var(--origam-color__feedback--danger---fg);
-    --origam-switch__track---border-color: rgba(0, 0, 0, 0);
-    --origam-switch__track---border-width: var(--origam-border__width---0);
+    --origam-switch__track---border-color: var(--origam-color__border---default);
+    --origam-switch__track---border-style: solid;
+    --origam-switch__track---border-width: var(--origam-border__width---thin);
     --origam-switch__track---backdrop-filter: none;
     --origam-switch__thumb---size: 20px;
     --origam-switch__thumb---background-color: var(--origam-color__surface---default);

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

@@ -11,6 +11,25 @@
  * 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.
  */
 :root,
 [data-theme="light"] {
@@ -20,7 +39,19 @@
   --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 +79,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 +120,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 +951,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 +1462,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);
@@ -1997,8 +2033,9 @@
   --origam-switch__track---background-color-disabled: var(--origam-color__surface---disabled);
   --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
   --origam-switch__track---color-error: var(--origam-color__feedback--danger---fg);
-  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
-  --origam-switch__track---border-width: var(--origam-border__width---0);
+  --origam-switch__track---border-color: var(--origam-color__border---default);
+  --origam-switch__track---border-style: solid;
+  --origam-switch__track---border-width: var(--origam-border__width---thin);
   --origam-switch__track---backdrop-filter: none;
   --origam-switch__thumb---size: 20px;
   --origam-switch__thumb---background-color: var(--origam-color__surface---default);

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)"
     }
   }
 }

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

@@ -83,6 +83,7 @@
       "pause": "Mettre le carrousel en pause",
       "play": "Lancer le carrousel",
       "slide": "diapositive",
+      "role_description": "carrousel",
       "aria_label": {
         "delimiter": "Diapositive {0} de {1}"
       }
@@ -286,7 +287,9 @@
     "command_palette": {
       "aria_label": "Palette de commandes",
       "placeholder": "Rechercher…",
-      "empty_text": "Aucun résultat"
+      "empty_text": "Aucun résultat",
+      "footer_navigate": "Naviguer",
+      "footer_select": "Sélectionner"
     },
     "chart": {
       "aria_label": "Graphique",
@@ -303,17 +306,22 @@
       "box_plot": {
         "aria_label": "boîte à moustaches",
         "desc_one": "Boîte à moustaches avec {count} catégorie.",
-        "desc_other": "Boîte à moustaches avec {count} catégories."
+        "desc_other": "Boîte à moustaches avec {count} catégories.",
+        "box_aria_label": "{0} : min={1} Q1={2} médiane={3} Q3={4} max={5}"
       },
       "bullet": {
         "aria_label": "graphique à puce",
         "desc_one": "Graphique à puce avec {count} indicateur.",
-        "desc_other": "Graphique à puce avec {count} indicateurs."
+        "desc_other": "Graphique à puce avec {count} indicateurs.",
+        "bullet_aria_label": "{0} : valeur {1}, cible {2}, {3} % d'atteinte"
       },
       "candlestick": {
         "aria_label": "graphique en chandeliers",
         "desc_one": "Graphique en chandeliers avec {count} chandelier.",
-        "desc_other": "Graphique en chandeliers avec {count} chandeliers."
+        "desc_other": "Graphique en chandeliers avec {count} chandeliers.",
+        "direction_bullish": "haussier",
+        "direction_bearish": "baissier",
+        "candle_aria_label": "{0} : {1}, ouverture {2}, plus haut {3}, plus bas {4}, clôture {5}"
       },
       "gauge": {
         "aria_label": "jauge",
@@ -344,12 +352,15 @@
         "aria_label": "diagramme de Pareto",
         "cumulative_label": "% cumulé",
         "desc_one": "Diagramme de Pareto avec {count} catégorie, triée par valeur décroissante.",
-        "desc_other": "Diagramme de Pareto avec {count} catégories, triées par valeur décroissante."
+        "desc_other": "Diagramme de Pareto avec {count} catégories, triées par valeur décroissante.",
+        "bar_aria_label": "{0} : {1} ({2} %, cumul {3} %)"
       },
       "pictorial": {
         "aria_label": "graphique pictural",
         "desc_one": "Graphique pictural avec {count} colonne.",
-        "desc_other": "Graphique pictural avec {count} colonnes."
+        "desc_other": "Graphique pictural avec {count} colonnes.",
+        "fill_column_aria_label": "{0} : {1} — {2} % du maximum",
+        "column_aria_label": "{0} : {1} ({2} icônes sur {3})"
       },
       "range_selector": {
         "aria_label": "Sélecteur de plage du graphique"
@@ -477,6 +488,10 @@
     "treeview": {
       "aria_label": "Arborescence de fichiers",
       "node_children_aria_label": "Contenu de {0}"
+    },
+    "slider_field": {
+      "thumb_start_aria_label": "{0} (début)",
+      "thumb_end_aria_label": "{0} (fin)"
     }
   }
 }

package/dist/src/assets/scss/main.scss

@@ -7,8 +7,16 @@
 //
 // Order matters: primitives must load first so semantic and component layers
 // can resolve their alias references. Light is loaded as the default theme;
-// dark is layered on top and activated by `data-theme="dark"` (or the
-// `prefers-color-scheme` media query handled inside the dark partial).
+// dark is layered on top and activated by `data-theme="dark"`, or by the
+// `@media (prefers-color-scheme: dark)` block that `tokens/_dark` carries at
+// its end — which matches only `:root:not([data-theme]):not([data-mode])`, so
+// it never overrides a page that pinned a choice on either axis.
+//
+// ⛔ That media query was MISSING from `_dark.scss` until #794 (it existed in
+// the CSS twin `tokens/dark.css` only). This very comment described it as
+// present for months while the compiled `main.css` — the `./styles` export —
+// shipped no automatic dark mode at all. Guard 27 (`token-twins`) now fails
+// on any divergence between a token sheet and its twin.
 
 @forward 'tokens/primitive';
 @forward 'tokens/light';