origam 2.18.0 → 2.18.2

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

@@ -64,10 +64,41 @@
  * 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.
+ * ⚠️ 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
@@ -103,9 +134,46 @@
  *
  * 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"],
-:root:not([data-theme])[data-mode="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);
@@ -675,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);
@@ -945,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);
@@ -1463,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);
@@ -3411,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);
@@ -3681,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);
@@ -4199,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);

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

@@ -30,9 +30,40 @@
  * 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);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -64,10 +64,41 @@
  * 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.
+ * ⚠️ 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
@@ -103,9 +134,46 @@
  *
  * 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"],
-:root:not([data-theme])[data-mode="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);
@@ -675,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);
@@ -945,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);
@@ -1463,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);
@@ -3411,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);
@@ -3681,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);
@@ -4199,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);

package/dist/src/assets/scss/tokens/_light.scss

@@ -30,9 +30,40 @@
  * 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);

package/dist/src/components/Btn/OrigamBtn.vue

@@ -62,7 +62,6 @@
 		          v-if="hasPrepend"
 		          key="prepend"
 		          class="origam-btn__prepend"
-		          @click="handleClickPrepend"
           >
             <slot name="prepend">
               <origam-avatar
@@ -101,7 +100,6 @@
 							v-if="hasAppend"
 							key="append"
 							class="origam-btn__append"
-							@click="handleClickAppend"
 					>
             <slot name="append">
              <origam-avatar
@@ -125,7 +123,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, StyleValue, toRef, useAttrs, useSlots, watchEffect } from "vue";
+import { computed, ref, StyleValue, toRef, useAttrs, useSlots, watchEffect } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
 import OrigamLoader from "../Loader/OrigamLoader.vue";
@@ -149,8 +147,6 @@ import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVariant } from "../../composables/Commons/variant.composable";
 import { warnMissingNativeControlName } from "../../utils/Commons/a11y.util";
-import { warnDeprecatedEmit } from "../../utils/Commons/color.util";
-import { ADJACENT_EMIT_REPLACEMENT } from "../../consts/Btn/btn.const";
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts/Btn/btn-toggle.const";
 import vContrast from "../../directives/Contrast/contrast.directive";
 import vRipple from "../../directives/Ripple/ripple.directive";
@@ -248,7 +244,7 @@ const props = defineProps({
   letterSpacing: { type: null, required: false }
 });
 const colorLocked = computed(() => props.color ? "true" : void 0);
-defineEmits(["click:append", "click:prepend", "group:selected"]);
+defineEmits(["group:selected"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const origamProgressRef = ref();
@@ -312,17 +308,9 @@ const {
 } = useStateEffect(props, isHover, isActive, hoverState, activeState, isDisabled, toRef(props, "flat"));
 const { variantClasses } = useVariant(props);
 const {
-  onClickPrepend: handleClickPrepend,
-  onClickAppend: handleClickAppend,
-  isPrependClickable,
-  isAppendClickable,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);
-onMounted(() => {
-  if (isPrependClickable.value) warnDeprecatedEmit("OrigamBtn", "click:prepend", ADJACENT_EMIT_REPLACEMENT);
-  if (isAppendClickable.value) warnDeprecatedEmit("OrigamBtn", "click:append", ADJACENT_EMIT_REPLACEMENT);
-});
 const handleClick = (e) => {
   if (isDisabled.value || link.isLink.value && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || attrs.target === "_blank")) return;
   link.navigate?.(e);

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -136,7 +136,6 @@
 import OrigamDataTableGroupHeaderRow from "./OrigamDataTableGroupHeaderRow.vue";
 import OrigamDataTableRow from "./OrigamDataTableRow.vue";
 import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
-import { useDisplay } from "../../composables/Commons/display.composable";
 import { useExpanded } from "../../composables/DataTable/expand.composable";
 import { useGroupBy } from "../../composables/DataTable/group.composable";
 import { useHeaders } from "../../composables/DataTable/headers.composable";
@@ -186,7 +185,6 @@ const { columns } = useHeaders();
 const { expandOnClick, toggleExpand, isExpanded } = useExpanded();
 const { isSelected, toggleSelect } = useSelection();
 const { toggleGroup, isGroupOpen } = useGroupBy();
-const { mobile } = useDisplay(props);
 const { startIndex } = usePagination();
 const slotProps = (item, index) => {
   return {
@@ -235,20 +233,32 @@ const itemSlotProps = (item, index) => {
         onClick: expandOnClick.value ? () => {
           toggleExpand(item);
         } : void 0,
-        index,
         item,
         cellProps: props.cellProps,
-        // Forward `mobileBreakpoint` so each row's own
-        // `useDisplay(props)` resolves to the SAME
-        // threshold the table-level resolved. Pre-fix
-        // only `mobile: mobile.value` was passed but the
-        // row's interface declares `mobileBreakpoint`,
-        // not `mobile` — so the row fell back to the
-        // global `'lg'` (1280px), forcing mobile mode
-        // on every viewport <1280px regardless of what
-        // the consumer set on the DataTable.
+        /*********************************************************
+         * Forward `mobileBreakpoint` — never `mobile` (#371)
+         *
+         * @description
+         * `IDataTableRowProps` (extends `IDisplayProps`)
+         * declares `mobileBreakpoint`, not `index` or
+         * `mobile`. Each row resolves its OWN `mobile` from
+         * `mobileBreakpoint` via its own `useDisplay(props)`
+         * call — passing a precomputed `mobile` here was
+         * always dead weight, and passing `index` was never
+         * read by the row at all. Both fell through
+         * `<OrigamDataTableRow>`'s undeclared-key path
+         * straight into `$attrs`, which its
+         * `v-bind="$attrs"` root then serialised as literal
+         * DOM attributes on every rendered `<tr>`:
+         * `index="0" mobile="false"`.
+         *
+         * @description
+         * A prior fix (mobileBreakpoint forwarding) added
+         * the correct key without removing the stale one it
+         * replaced — same shape as the point-1 closure leak
+         * in this same file's `groupHeaderRowProps()`.
+         ********************************************************/
         mobileBreakpoint: props.mobileBreakpoint,
-        mobile: mobile.value,
         "aria-rowindex": startIndex.value + index + 2
       },
       getPrefixedEventHandlers(attrs, ":row", () => slotPropsLocal),

package/dist/src/interfaces/Btn/btn.interface.d.ts

@@ -1,5 +1,5 @@
 import type { IActiveProps } from '../Commons/active.interface';
-import type { IAdjacentEmits, IAdjacentProps, IAdjacentSlots } from '../Commons/adjacent.interface';
+import type { IAdjacentProps, IAdjacentSlots } from '../Commons/adjacent.interface';
 import type { IBorderProps } from '../Commons/border.interface';
 import type { IBgColorProps, IColorProps } from '../Commons/color.interface';
 import type { ICommonsComponentProps, ITagProps } from '../Commons/commons.interface';
@@ -40,12 +40,12 @@ export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColor
 /**
  * Emit signatures for `<OrigamBtn>`.
  *
- * ⛔ DEPRECATED SURFACE (#443) — `click:prepend` / `click:append`, inherited
- * from {@link IAdjacentEmits}, are **deprecated and will be removed in
- * v3.0.0**. They still fire for now so no consumer breaks silently, and
- * `<OrigamBtn>` warns once per emit in dev builds.
+ * ⛔ REMOVED SURFACE (#443, #577) — `click:prepend` / `click:append` used to
+ * be inherited from `IAdjacentEmits`. They are GONE, not merely typed
+ * away: `<OrigamBtn>` no longer relays a click from the prepend/append zone
+ * at all (see `OrigamBtn.vue`, the spans carry no `@click` any more).
  *
- * They were never reachable by keyboard: the emit is bound to the
+ * They were never reachable by keyboard: the emit was bound to the
  * `origam-btn__prepend` / `origam-btn__append` `<span>`, while a keyboard
  * activation synthesises its click on the component ROOT, which never
  * reaches a descendant listener. The fix `useAdjacent` applies on the other
@@ -55,11 +55,8 @@ export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColor
  *
  * Two actions are two buttons: compose them with `<origam-btn-group>`. The
  * `prepend` / `append` SLOTS are unaffected — see {@link IBtnSlots}.
- *
- * @deprecated The inherited `click:prepend` / `click:append` only. Drop
- * `IAdjacentEmits` from this interface in v3.0.0.
  */
-export interface IBtnEmits extends IAdjacentEmits, IGroupEmits {
+export interface IBtnEmits extends IGroupEmits {
 }
 /** Slot signatures for `<OrigamBtn>`. */
 export interface IBtnSlots extends IAdjacentSlots {

package/dist/src/nuxt/module.cjs

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 var _nodeFs = require("node:fs");
 var _nodePath = require("node:path");
 var _kit = require("@nuxt/kit");
+var _origam = require("../themes/origam.theme.cjs");
 const MODULE_NAME = "origam-nuxt";
 const CONFIG_KEY = "origam";
 const NUXT_COMPOSABLES_BLOCKLIST = /* @__PURE__ */new Set(["useRoute", "useRouter", "useLink", "useHydration"]);
-const DEFAULT_THEMES = [];
+const DEFAULT_THEMES = _origam.origamTheme;
 const DEFAULT_MODES = ["light", "dark"];
 const DEFAULTS = {
   themes: DEFAULT_THEMES,

package/dist/src/nuxt/module.js

@@ -1,6 +1,7 @@
 import { readdirSync, readFileSync, statSync } from "node:fs";
 import { join } from "node:path";
 import { addComponentsDir, addImports, addPlugin, createResolver, defineNuxtModule } from "@nuxt/kit";
+import { origamTheme } from "../themes/origam.theme.js";
 const MODULE_NAME = "origam-nuxt";
 const CONFIG_KEY = "origam";
 const NUXT_COMPOSABLES_BLOCKLIST = /* @__PURE__ */ new Set([
@@ -9,7 +10,7 @@ const NUXT_COMPOSABLES_BLOCKLIST = /* @__PURE__ */ new Set([
   "useLink",
   "useHydration"
 ]);
-const DEFAULT_THEMES = [];
+const DEFAULT_THEMES = origamTheme;
 const DEFAULT_MODES = ["light", "dark"];
 const DEFAULTS = {
   themes: DEFAULT_THEMES,

package/dist/src/origam.cjs

@@ -11,7 +11,6 @@ var _consts = require("./consts/index.cjs");
 var origamDirectives = _interopRequireWildcard(require("./directives/index.cjs"));
 var _contrast = require("./directives/Contrast/contrast.directive.cjs");
 var _utils = require("./utils/index.cjs");
-var _origam = require("./themes/origam.theme.cjs");
 require("@mdi/font/css/materialdesignicons.css");
 var _vue = require("vue");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -28,7 +27,7 @@ function createOrigam(origam = {}) {
     directives = origamDirectives
   } = options;
   const suppliedThemes = [...(options.theme ? [options.theme] : []), ...(options.themes ?? [])];
-  const allThemes = [..._origam.origamTheme, ...suppliedThemes];
+  const allThemes = [...suppliedThemes];
   const installedThemes = (0, _utils.installedThemesFromList)(allThemes);
   const defaultsRef = (0, _composables.createDefaults)({});
   defaultsRef.value = activeDefaultsFor(allThemes, allThemes[0]?.name ?? "", void 0);

package/dist/src/origam.js

@@ -24,7 +24,6 @@ import {
 import * as origamDirectives from "./directives/index.js";
 import { setContrastConfig } from "./directives/Contrast/contrast.directive.js";
 import { applyThemes, installedThemesFromList, mergeDeep } from "./utils/index.js";
-import { origamTheme } from "./themes/origam.theme.js";
 import "@mdi/font/css/materialdesignicons.css";
 import { defineComponent, effectScope, nextTick, reactive } from "vue";
 export function createOrigam(origam = {}) {
@@ -39,7 +38,7 @@ export function createOrigam(origam = {}) {
     ...options.theme ? [options.theme] : [],
     ...options.themes ?? []
   ];
-  const allThemes = [...origamTheme, ...suppliedThemes];
+  const allThemes = [...suppliedThemes];
   const installedThemes = installedThemesFromList(allThemes);
   const defaultsRef = createDefaults({});
   defaultsRef.value = activeDefaultsFor(allThemes, allThemes[0]?.name ?? "", void 0);

package/dist/src/utils/Commons/a11y.util.d.ts

@@ -3,9 +3,9 @@
  *
  * @description
  * ⛔ issues #747 / #653 / #660. Same once-per-key, `import.meta.env.DEV`-gated
- * shape as `warnUnsupportedProp` / `warnDeprecatedEmit` (`color.util.ts`), but
- * filed here rather than grown as a fifth warning inside a colour utility —
- * these two say nothing about colour.
+ * shape as `warnUnsupportedProp` (`color.util.ts`), but filed here rather
+ * than grown as a fifth warning inside a colour utility — these two say
+ * nothing about colour.
  *
  * Both warnings are SILENT in production builds. They exist to tell the
  * developer what to add, at the moment they can still add it; shipping the

package/dist/src/utils/Commons/color.util.cjs

@@ -40,7 +40,6 @@ exports.rawBgExprWithState = rawBgExprWithState;
 exports.toHex = toHex;
 exports.tokenForegroundForIntent = tokenForegroundForIntent;
 exports.tokenStylesForIntent = tokenStylesForIntent;
-exports.warnDeprecatedEmit = warnDeprecatedEmit;
 exports.warnDeprecatedProp = warnDeprecatedProp;
 exports.warnLegacyColor = warnLegacyColor;
 exports.warnUnsupportedProp = warnUnsupportedProp;
@@ -431,13 +430,4 @@ function warnUnsupportedProp(component, prop, reason) {
   if (_warnedUnsupportedPropKeys.has(key)) return;
   _warnedUnsupportedPropKeys.add(key);
   console.warn(`[origam] <${component}> prop "${prop}" has no effect on this component: ${reason}`);
-}
-const _warnedDeprecatedEmitKeys = /* @__PURE__ */new Set();
-function warnDeprecatedEmit(component, emit, replacement, removalVersion = "v3.0.0") {
-  if (typeof console === "undefined") return;
-  if (!process.env?.DEV) return;
-  const key = `${component}::${emit}`;
-  if (_warnedDeprecatedEmitKeys.has(key)) return;
-  _warnedDeprecatedEmitKeys.add(key);
-  console.warn(`[origam] <${component}> emit "${emit}" is deprecated and will be removed in ${removalVersion}. ${replacement}`);
 }