@zevra/ui 0.34.0 → 0.36.0

package/src/overlays.css

@@ -1,11 +1,11 @@
-/* Zevra UI — enrobages : voile, tiroir, modale, notification
+/* Zevra UI, enrobages : voile, tiroir, modale, notification
  * Dépend de tokens.css et base.css.
  *
  * Ce module est COMMUN aux deux couches. Une page vitrine a besoin d'un
  * tiroir pour son menu mobile ; une application en a besoin pour sa
  * navigation. Les laisser dans navigation.css obligeait une landing à
  * charger la barre latérale, la pagination et les tableaux pour obtenir un
- * bouton burger — c'est ce qui a motivé cette séparation.
+ * bouton burger : c'est ce qui a motivé cette séparation.
  *
  * Tout ce qui vit ici se pose PAR-DESSUS la page et lui vole le regard. D'où
  * une règle commune : rien ne s'ouvre sans un moyen évident d'en sortir, et
@@ -15,7 +15,7 @@
  * Empilement, dans l'ordre : voile 60, tiroir 80, modale 90, notification 100.
  * Les couches inférieures (2, 5, 40, 50) sont dans layout.css.
  *
- * OUVERTURE — deux écritures équivalentes, au choix du gabarit :
+ * OUVERTURE, deux écritures équivalentes, au choix du gabarit :
  *
  *   <div class="zv-drawer" data-open>          en HTML, en Astro
  *   <div class="zv-drawer zv-drawer--open">    en React, en Vue
@@ -24,14 +24,14 @@
  * attribut booléen y demande `{...(ouvert ? {'data-open': ''} : {})}`, là où
  * une classe conditionnelle est le geste habituel. Ne PAS employer
  * `data-open={ouvert}` en React : il rend `data-open="false"`, que le
- * sélecteur d'attribut considère comme présent — le panneau resterait
+ * sélecteur d'attribut considère comme présent, le panneau resterait
  * ouvert.
  */
 
 /* ─── Voile ─────────────────────────────────────────────────────────────
  * Toujours l'encre de charte diluée, jamais un noir pur : la page est
  * bleutée, un gris neutre y ferait un trou sale. Le voile n'existe que sous
- * le seuil (cf. bloc mobile) — au-dessus, tiroir et feuille sont des colonnes,
+ * le seuil (cf. bloc mobile) : au-dessus, tiroir et feuille sont des colonnes,
  * elles n'occultent rien. */
 
 .zv-scrim {
@@ -45,7 +45,7 @@
 /* ─── Tiroir de navigation ──────────────────────────────────────────────*/
 
 /* Tiroir ou modale ouverts : la page derrière ne défile plus. `:has()` est
- * le seul chemin CSS pour verrouiller le body depuis un état descendant —
+ * le seul chemin CSS pour verrouiller le body depuis un état descendant :
  * sans lui, la molette fait défiler le fond sous le voile et le panneau
  * semble dériver. */
 html:has(.zv-drawer[data-open]),
@@ -78,7 +78,7 @@ html:has(.zv-modal--open) {
  * Et il redescend au sol : son z-index de 60 est la couche qu'il occupe
  * quand il est SEUL sur la page. À l'intérieur d'un enrobage, qui ouvre son
  * propre contexte d'empilement, ce 60 l'emportait sur le panneau et voilait
- * le tiroir par-dessus — il paraissait délavé, derrière son propre écran. */
+ * le tiroir par-dessus : il paraissait délavé, derrière son propre écran. */
 .zv-drawer .zv-scrim {
   z-index: 0;
   opacity: 0;
@@ -123,12 +123,12 @@ html:has(.zv-modal--open) {
 }
 
 /* ⚠️ TENSION ASSUMÉE, à arbitrer. Les deux courbes ci-dessus sont celles du
- * relevé — voile en cubic-bezier(.4,0,.2,1), panneau en ease-out, même durée.
+ * relevé : voile en cubic-bezier(.4,0,.2,1), panneau en ease-out, même durée.
  * Leur asymétrie ne se voit pas, elle s'entend : le panneau arrive avant que
  * le voile ait fini de se poser. Elles ne sont donc PAS la courbe unique
  * --zv-easing que motion.css impose à la vitrine. Défendable (motion.css régit
  * neuf animations de page, pas le chrome applicatif), mais c'est une divergence
- * écrite ici plutôt qu'une variable empruntée en silence — d'autant que ce
+ * écrite ici plutôt qu'une variable empruntée en silence : d'autant que ce
  * module doit rester utilisable sans motion.css.
  * La coupure prefers-reduced-motion est déjà globale dans base.css : ne pas la
  * reposer ici, elle neutralise ces deux transitions comme les autres. */
@@ -146,7 +146,7 @@ html:has(.zv-modal--open) {
  *   · à l'ouverture, `body { overflow: hidden }` RESTAURÉ à sa valeur
  *     précédente à la fermeture, jamais remis à '' aveuglément : c'est ce qui
  *     évite de casser une page qui gérait déjà son propre défilement ;
- *   · l'état ouvert mémorise la ROUTE d'ouverture, pas un booléen — changer de
+ *   · l'état ouvert mémorise la ROUTE d'ouverture, pas un booléen, changer de
  *     page referme alors le tiroir sans effet ni rendu en cascade. Le
  *     composant a donc besoin de la route courante, pas d'une prop `open`.
  * ⚠️ MANQUE en production, à combler côté composant : piège de focus dans le
@@ -154,7 +154,7 @@ html:has(.zv-modal--open) {
 
 
 /* ─── Modale ────────────────────────────────────────────────────────────
- * ⚠️ HORS RELEVÉ. Aucune modale dans les sources de Mémoire — l'application
+ * ⚠️ HORS RELEVÉ. Aucune modale dans les sources de Mémoire : l'application
  * n'en emploie pas. Celle-ci est DÉRIVÉE de la carte et du tiroir, sans
  * introduire une seule valeur nouvelle : elle réemploie --r-card,
  * --shadow-panel et le voile ci-dessus.
@@ -187,7 +187,7 @@ html:has(.zv-modal--open) {
  *
  * .zv-scrim est masqué par défaut et ne s'affiche que sous le seuil : c'est
  * juste pour le tiroir, qui n'existe qu'en mobile. La modale, elle, existe
- * partout — sans cette règle, elle s'ouvrait en desktop sans rien occulter.
+ * partout : sans cette règle, elle s'ouvrait en desktop sans rien occulter.
  * Le z-index revient à 0 pour la même raison que sur le tiroir. */
 .zv-modal .zv-scrim {
   z-index: 0;
@@ -250,7 +250,7 @@ html:has(.zv-modal--open) {
 }
 
 /* Modale destructive : le filet haut porte l'avertissement, pas un fond
- * rouge — une surface d'alerte pleine rendrait le texte pénible à lire. */
+ * rouge, une surface d'alerte pleine rendrait le texte pénible à lire. */
 .zv-modal--danger .zv-modal__panel {
   border-top: 3px solid var(--err);
 }
@@ -262,7 +262,7 @@ html:has(.zv-modal--open) {
  *
  * Elle ne remplace PAS .zv-alert : une erreur de formulaire se dit à côté du
  * champ, jamais dans un coin qui disparaît. Réserver ce composant à ce qui
- * est vrai après coup — « copié », « enregistré », « envoyé ». */
+ * est vrai après coup : « copié », « enregistré », « envoyé ». */
 
 .zv-toasts {
   position: fixed;

package/src/rail.js

@@ -1,8 +1,8 @@
-/* Zevra UI — rail.js : le rail de lecture suit la section en cours.
+/* Zevra UI, rail.js : le rail de lecture suit la section en cours.
  *
  * Rôle exact, et rien d'autre : poser `.zv-rail__item--on` et
  * `aria-current` sur l'entrée dont la section est à l'écran. La navigation
- * elle-même est du HTML — chaque entrée est une ancre, et elle fonctionne
+ * elle-même est du HTML : chaque entrée est une ancre, et elle fonctionne
  * sans ce module.
  *
  * Le contrat, en un attribut :
@@ -12,25 +12,25 @@
  * Rien à déclarer d'autre : l'ordre des entrées, leurs cibles et leur
  * nombre se lisent dans le balisage. Un rail dont une ancre ne résout pas
  * garde l'entrée cliquable et l'ignore au suivi, plutôt que de décaler
- * tout le reste — c'est le décalage silencieux qui coûte cher.
+ * tout le reste : c'est le décalage silencieux qui coûte cher.
  *
  * ─── Pourquoi pas un IntersectionObserver ───────────────────────────────
  * Parce que les ancres d'un rail sont souvent des points MATÉRIELS de 1px
  * posés en tête de section. Réduit à sa bande centrale, l'observateur ne
- * les voit traverser que pendant quelques images — un défilement rapide
+ * les voit traverser que pendant quelques images : un défilement rapide
  * saute la bande entière et l'entrée ne s'allume jamais. On lit donc la
  * position : l'entrée courante est la DERNIÈRE dont l'ancre a passé la
  * ligne de lecture. C'est déterministe, quelle que soit la vitesse.
  *
  * S'importe une fois par page : `import '@zevra/ui/rail.js'`. Sans lui, le
- * rail navigue mais ne suit pas — dégradation douce, pas de page cassée.
+ * rail navigue mais ne suit pas : dégradation douce, pas de page cassée.
  */
 (() => {
   if (typeof document === 'undefined') return
   /* ⚠️ Le drapeau d'armement ne doit JAMAIS reprendre le nom de l'attribut
    * qui désigne un rail. Il s'appelait `data-zv-rail`, comme le composant :
    * posé sur <html>, il faisait de la PAGE ENTIÈRE un rail. Sur une page
-   * sans rail — la seule où ça se voit —, `a[href^="#"]` ramassait alors
+   * sans rail, la seule où ça se voit, `a[href^="#"]` ramassait alors
    * tous les liens d'ancre, boutons compris, et le premier d'entre eux
    * recevait `.zv-rail__item--on` : un appel à l'action en indigo sur fond
    * indigo, illisible. Constaté sur /bootcamp. */

package/src/surfaces.css

@@ -1,4 +1,4 @@
-/* Zevra UI — surfaces : halos, sols quadrillés, voiles, bandeau manifeste —
+/* Zevra UI (surfaces : halos, sols quadrillés, voiles, bandeau manifeste)
  * et, depuis le 25/08/2026 (hors relevé, voir DECISIONS.md), les formats
  * sociaux. Dépend de tokens.css. Indépendant des autres modules.
  *
@@ -7,7 +7,7 @@
  * en absolu derrière le contenu, ne captent jamais le pointeur, et n'ont
  * pas à être lues par un lecteur d'écran (les poser en aria-hidden) ; elles
  * supposent un parent `position: relative; overflow: hidden`.
- * ⚠️ Les formats sociaux, eux, sont du CONTENU — une planche d'export qui
+ * ⚠️ Les formats sociaux, eux, sont du CONTENU, une planche d'export qui
  * porte un texte : jamais d'aria-hidden sur eux.
  */
 
@@ -138,7 +138,7 @@
   z-index: 1;
 }
 
-/* L'emphase de base.css pose --ink sur les strong de zv-body/zv-lead — sur
+/* L'emphase de base.css pose --ink sur les strong de zv-body/zv-lead : sur
  * le navy du manifeste, cette encre disparaît dans le fond. Dans la bande,
  * l'emphase hérite de la couleur ambiante (blanc), et seule la graisse la
  * distingue. */
@@ -184,14 +184,14 @@
  * h1 y devenait carrément invisible.
  *
  * La règle ne visait que `.zv-band` et deux classes. Les autres surfaces
- * sombres du système — le panneau navy, l'enveloppe .zv-text-on-dark, la
- * planche sociale — n'étaient pas couvertes, et les trois autres paliers de
+ * sombres du système (le panneau navy, l'enveloppe .zv-text-on-dark, la
+ * planche sociale) n'étaient pas couvertes, et les trois autres paliers de
  * texte non plus. Corrigé le 27/08/2026 : une seule liste, toutes les
  * surfaces, tous les paliers.
  *
  * Ce qui reste EXPLICITE et ne s'adapte pas tout seul : les labels mono
  * (`Mono ton="on-dark"`) et la mise en valeur (`Em surSombre`). Ceux-là
- * changent de RÔLE sur fond sombre, pas seulement de clarté — c'est une
+ * changent de RÔLE sur fond sombre, pas seulement de clarté : c'est une
  * décision de rédaction, elle se pose à la main. */
 :is(.zv-band, .zv-panel-navy, .zv-text-on-dark, .zv-social--manifeste)
   :is(.zv-body, .zv-lead, .zv-rule, .zv-note),
@@ -215,7 +215,7 @@
 }
 
 /* ─── Glyphes ───────────────────────────────────────────────────────────
- * Les glyphes produit se posent toujours avec leur ombre portée — c'est
+ * Les glyphes produit se posent toujours avec leur ombre portée : c'est
  * elle qui les décolle du papier. Jamais de recoloration ni d'inclinaison. */
 
 .zv-glyph {
@@ -241,14 +241,14 @@
 
 /* ─── Formats sociaux ───────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Trois planches d'EXPORT aux
- * dimensions des réseaux — paysage 1200×630 (OpenGraph, lien LinkedIn),
+ * dimensions des réseaux : paysage 1200×630 (OpenGraph, lien LinkedIn),
  * carré 1080×1080 (post), story 1080×1920. FIGÉES en pixels, hors du point
  * de rupture : ce sont des planches qu'on CAPTURE, pas des pages qu'on
- * publie en HTML — la seule dérogation du paquet à l'interdit des largeurs
+ * publie en HTML, la seule dérogation du paquet à l'interdit des largeurs
  * fixes, et elle est là pour ça.
  *
- * Elles composent les pièces existantes — bande par --manifeste, halo, sol,
- * kicker, display — et portent un pied wordmark + adresse. La règle
+ * Elles composent les pièces existantes (bande par --manifeste, halo, sol,
+ * kicker, display) et portent un pied wordmark + adresse. La règle
  * « jamais de faux contenu » s'y applique au premier chef : un visuel
  * social EST une publication. */
 

package/src/tokens.css

@@ -1,4 +1,4 @@
-/* Zevra — Design tokens « Encre & Papier »
+/* Zevra, Design tokens « Encre & Papier »
  * Source : passation DA du 23/08/2026 (canvas Claude Design « Zevra DA Encre
  * et Papier »). Ce fichier est la SOURCE DE VÉRITÉ des valeurs de marque :
  * toute app doit lire ces variables plutôt que recopier un hexadécimal.
@@ -11,7 +11,7 @@
 :root {
   /* Largeur de page. Le relevé de la passation a été fait sur une trame de
    * 1440 : au-delà, les enveloppes (zv-gutter et variantes) se centrent au
-   * lieu de s'étirer — un hero qui colle au bord gauche d'un écran de
+   * lieu de s'étirer, un hero qui colle au bord gauche d'un écran de
    * 2 560 px ne raconte plus une page, il raconte un débordement. */
   --page-max: 1440px;
 
@@ -19,7 +19,7 @@
   --ink: #0b1020;
   /* Niveau intermédiaire, entre l'encre et le gris : titre de colonne,
    * valeur de cellule, segment de fil d'Ariane. L'interface applicative en a
-   * besoin, la vitrine non — d'où son absence des premières planches.
+   * besoin, la vitrine non : d'où son absence des premières planches.
    * Contraste 7,05 sur papier : conforme AA sur texte normal. */
   --ink-2: #4a5468;
   --muted: #5a637a;
@@ -46,11 +46,11 @@
   --lavande: #b8a8f8;
   --spectre: linear-gradient(90deg, #8a3af8, #2f6ef8 55%, #14c2f8);
 
-  /* Fond sombre (bande manifeste) — dégradé type logo */
+  /* Fond sombre (bande manifeste) : dégradé type logo */
   --manifeste: linear-gradient(135deg, #06063a 0%, #0b0b5e 28%, #1e1b8c 55%, #3d36d6 80%, #2080f0 100%);
   --accent-on-dark: #a5b4fc;
 
-  /* États — trois familles symétriques : le ton plein (texte, icône), le
+  /* États, trois familles symétriques : le ton plein (texte, icône), le
    * fond atténué (bandeau d'alerte) et le filet (bordure de carte).
    * Relevés dans l'application Mémoire, où ils servent déjà en production. */
   --ok: #1c6b4a;
@@ -61,19 +61,19 @@
   --warn-line: #ebdcb4;
   /* L'ambre plein est trop clair pour du texte sur fond atténué : il lui
    * faut une déclinaison sombre. --ok et --err, eux, sont déjà assez
-   * contrastés pour servir de couleur de texte — d'où l'asymétrie. */
+   * contrastés pour servir de couleur de texte : d'où l'asymétrie. */
   --warn-ink: #8a6d1e;
   --err: #b5202c;
   --err-soft: #fdece9;
   --err-line: #efc9cd;
 
-  /* Typo — Google Fonts : Outfit (display), Public Sans (texte), Space Grotesk (labels) */
+  /* Typo, Google Fonts : Outfit (display), Public Sans (texte), Space Grotesk (labels) */
   --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;   /* titres 200-400 */
   --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif; /* 400/600 */
   --font-mono: "Space Grotesk", "Menlo", monospace;                /* labels caps, 0.18-0.2em */
   /* Chasse fixe RÉELLE, pour le code seulement. --font-mono (Space Grotesk)
    * est proportionnelle : elle porte le REGISTRE des labels, pas
-   * l'alignement — du code exige la chasse fixe entière, que tabular-nums
+   * l'alignement, du code exige la chasse fixe entière, que tabular-nums
    * ne donne qu'aux chiffres. Pile système, aucune fonte chargée.
    * HORS RELEVÉ (25/08/2026), voir DECISIONS.md « Bloc de code ». */
   --font-code: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
@@ -86,22 +86,22 @@
   --lead: 18px;
   --body: 15px;
 
-  /* Rayons — ARBITRÉS À ZÉRO le 25/08/2026.
+  /* Rayons : ARBITRÉS À ZÉRO le 25/08/2026.
    *
    * La DA a tranché sur pièces : « très carré, ça fait pro et inspire
    * confiance » ; le rond disait « flexible, jovial », qui n'est pas ce que
    * vend Zevra. Le relevé donnait 5/3/10/16px, hérités d'un état antérieur
-   * de la charte — et déjà contredits sur place, puisque les champs de
+   * de la charte : et déjà contredits sur place, puisque les champs de
    * saisie, les étiquettes et les pastilles d'initiales étaient à angle vif
    * depuis le premier jour. Les quatre tokens s'alignent sur eux.
    *
    * ⚠️ Les tokens RESTENT, à zéro : ils nomment quatre intentions
    * distinctes (action, pastille, panneau flottant, carte). Le jour où la DA
-   * veut rendre de la rondeur à l'une d'elles, c'est une ligne ici — pas une
+   * veut rendre de la rondeur à l'une d'elles, c'est une ligne ici : pas une
    * chasse aux `border-radius` dans douze fichiers.
    *
    * ⚠️ Ce qui n'est PAS concerné : le rond de forme, qui porte du sens et
-   * non du style — pastille d'état, bouton d'interrupteur, radio, halo. Ils
+   * non du style, pastille d'état, bouton d'interrupteur, radio, halo. Ils
    * écrivent leur `border-radius` en clair, sans passer par un token. */
   --r-btn: 0;
   --r-pill: 0;
@@ -130,7 +130,7 @@
   --app: 13px;      /* texte courant : cellule, carte, champ de saisie */
   --app-sm: 12px;   /* mention secondaire : statut, aide, note de contexte */
 
-  /* Titres applicatifs — au-dessus, --card-title (24px) fait le titre de page */
+  /* Titres applicatifs : au-dessus, --card-title (24px) fait le titre de page */
   --app-h2: 20px;   /* titre de fiche, d'état vide, d'interstice */
   --app-h3: 16px;   /* titre de panneau latéral, de feuille de source */
 
@@ -143,7 +143,7 @@
   --tap: 40px;      /* cible tactile minimale, sous le point de rupture */
   --topbar-h: 52px; /* hauteur de la barre supérieure applicative */
 
-  /* Ombre de menu déroulant — la seule surface qui flotte au-dessus du
+  /* Ombre de menu déroulant : la seule surface qui flotte au-dessus du
    * contenu sans être une carte ; ni --shadow-card ni --shadow-panel ne
    * conviennent, l'une est trop plate, l'autre trop théâtrale. */
   --shadow-menu: 0 8px 24px rgba(11, 16, 32, 0.1);

package/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * Zevra — tokens de la DA « Encre & Papier », en JavaScript.
+ * Zevra : tokens de la DA « Encre & Papier », en JavaScript.
  *
  * ⚠️ MIROIR de src/tokens.css, pas une seconde source. Le CSS fait foi pour
  * tout ce qui s'affiche ; cet export existe pour les usages où l'on ne peut
@@ -22,13 +22,13 @@ export const couleurs = {
   panel: '#fbfcfe',
   white: '#ffffff',
 
-  // Indigo — l'action
+  // Indigo : l'action
   accentDeep: '#1e1b8c',
   accent: '#2a2aa8',
   accentLine: '#c9d6f5',
   accentSoft: '#eaf1ff',
 
-  // Spectre produit — usage restreint (filets, progression, points)
+  // Spectre produit : usage restreint (filets, progression, points)
   violet: '#8a3af8',
   iris: '#5848f8',
   bleu: '#2f6ef8',
@@ -49,7 +49,7 @@ export const couleurs = {
   err: '#b5202c',
   errSoft: '#fdece9',
   errLine: '#efc9cd',
-  // Couleurs de format de fichier — hors charte, voir tokens.css.
+  // Couleurs de format de fichier : hors charte, voir tokens.css.
   fmtPdf: '#c4362b',
   fmtDocx: '#2a5ba8',
 }
@@ -72,7 +72,7 @@ export const polices = {
   display: '"Outfit", "Helvetica Neue", Arial, sans-serif',
   texte: '"Public Sans", "Helvetica Neue", Arial, sans-serif',
   mono: '"Space Grotesk", "Menlo", monospace',
-  // Chasse fixe réelle, pour le code seulement — voir tokens.css.
+  // Chasse fixe réelle, pour le code seulement : voir tokens.css.
   code: 'ui-monospace, "SF Mono", "Menlo", "Consolas", monospace',
 }
 
@@ -83,7 +83,7 @@ export const tailles = {
   cardTitle: '24px',
   lead: '18px',
   body: '15px',
-  // Échelle applicative — plus serrée que la vitrine, voir tokens.css.
+  // Échelle applicative : plus serrée que la vitrine, voir tokens.css.
   appLg: '14px',
   app: '13px',
   appSm: '12px',
@@ -103,11 +103,11 @@ export const mesures = {
   pageMax: '1440px',
 }
 
-/** Rayons — À ZÉRO depuis l'arbitrage DA du 25/08/2026 (« très carré, ça
+/** Rayons : À ZÉRO depuis l'arbitrage DA du 25/08/2026 (« très carré, ça
  *  fait pro et inspire confiance »). Les quatre clés restent : elles nomment
  *  quatre intentions distinctes, et rendre de la rondeur à l'une d'elles
  *  doit rester une ligne à changer, pas une chasse dans douze fichiers.
- *  Le rond de FORME — pastille d'état, bouton d'interrupteur, radio, halo —
+ *  Le rond de FORME (pastille d'état, bouton d'interrupteur, radio, halo)
  *  ne passe pas par ici : il porte du sens, pas du style. */
 export const rayons = {
   btn: '0',