@zevra/ui 0.34.0 → 0.36.0

package/src/data.css

@@ -1,17 +1,17 @@
-/* Zevra UI — données : tableaux, listes, cellules, métadonnées, citations
+/* Zevra UI (données : tableaux, listes, cellules, métadonnées, citations
  *
  * CE QUE PORTE LE MODULE
  *   le cadre de tableau et sa grille (.zv-table, .zv-table__head, .zv-row),
  *   les trois registres de cellule, le dégroupage mobile (.zv-unwrap), la
  *   liste sans colonnes, la métadonnée mono, le couple clé-valeur, la
  *   pastille d'initiales, les deux utilitaires de troncature, l'étiquette de
- *   catégorie, la puce de citation et la vignette de format — et, depuis le
+ *   catégorie, la puce de citation et la vignette de format) et, depuis le
  *   25/08/2026 (hors relevé, voir DECISIONS.md) : la rangée dépliante, la
  *   touche de clavier et le code, en ligne comme en bloc.
  *
  * DÉPENDANCES
- *   tokens.css — pour les seules variables qui y sont déclarées ;
- *   base.css   — reset (box-sizing), body, et le :focus-visible global, dont
+ *   tokens.css, pour les seules variables qui y sont déclarées ;
+ *   base.css, reset (box-sizing), body, et le :focus-visible global, dont
  *                ce module ne redéfinit ni la couleur ni l'épaisseur.
  *   Ni le reset, ni body, ni :root ne sont reposés ici.
  *
@@ -19,17 +19,17 @@
  *   la pagination (.zv-pager--foot, navigation.css) : le pied de tableau et
  *   le pied de pagination sont LE MÊME nœud dans la source (un seul
  *   conteneur flex, compteur à gauche, flèches à droite). La version de ce
- *   module a été supprimée, elle faisait doublon — les emboîter donnait deux
+ *   module a été supprimée, elle faisait doublon : les emboîter donnait deux
  *   space-between imbriqués et 24px de padding vertical.
  *   Aucun contrôle de formulaire non plus : [disabled] et [aria-invalid]
  *   n'ont pas d'objet ici, ils vivent dans forms.css.
  *
- * ÉCHELLES — comment lire les tailles ci-dessous
+ * ÉCHELLES : comment lire les tailles ci-dessous
  *   La source emploie des demi-pixels (9,5 / 10,5 / 11,5) que le paquet ne
  *   nomme pas. Deux rabattements, appliqués systématiquement :
- *   — registre TEXTE : plancher --app-sm (12px). Les paliers 10,5 et 11,5
+ *   - registre TEXTE : plancher --app-sm (12px). Les paliers 10,5 et 11,5
  *     relevés y remontent ; c'est une décision, pas un relevé.
- *   — micro-labels et glyphes (label de colonne, initiales, vignette) :
+ *   - micro-labels et glyphes (label de colonne, initiales, vignette) :
  *     l'échelle mono (--mono-lg 11 / --mono 10 / --mono-sm 9), employée là
  *     comme MESURE, la famille restant celle que la règle déclare.
  *   ⚠️ Toutes les tailles et tous les interlettrages mono de la source ont
@@ -47,7 +47,7 @@
  * Le tableau scrolle DANS son cadre : sans ce confinement, une colonne trop
  * large fait scroller la page entière et le rail de navigation part avec.
  * Angle vif et sans ombre : un tableau est une surface de travail, pas une
- * carte éditoriale. Aucun rayon n'est posé — la valeur par défaut est déjà 0,
+ * carte éditoriale. Aucun rayon n'est posé, la valeur par défaut est déjà 0,
  * il n'y a rien à annuler tant qu'on ne compose pas .zv-table avec .zv-card
  * (ce que ce module déconseille : ce sont deux intentions différentes). */
 
@@ -105,14 +105,14 @@
  * balaye du regard, une colonne qui danse en largeur est illisible.
  *
  * Mais tous les tableaux ne portent pas des données. Un contrat en porte qui
- * contiennent des CLAUSES — durées de conservation et leur fondement, sous-
+ * contiennent des CLAUSES : durées de conservation et leur fondement, sous-
  * traitants et leurs garanties de transfert. Là, tronquer ne « raccourcit »
  * pas : ça CACHE le texte, et cacher une clause dans un document contractuel
  * n'est pas un défaut d'affichage.
  *
  * D'où cette variante, et pas un `className` posé par l'app : le CSS du
  * paquet est hors couche, il bat toute règle layered quelle que soit la
- * spécificité — une app Tailwind qui poserait `whitespace-normal` sur une
+ * spécificité, une app Tailwind qui poserait `whitespace-normal` sur une
  * cellule n'obtiendrait RIEN, en silence. La règle du dépôt est que ce qui
  * doit s'ajuster s'expose en variante ; la voici.
  *
@@ -153,12 +153,12 @@
 
 /* ⚠️ Aucun tri : les intitulés sont inertes, sans indicateur ni gestionnaire.
  * Rien dans la source ne dit ce que trierait un clic ni comment se marque la
- * colonne active — un en-tête triable serait une décision, pas un style. */
+ * colonne active : un en-tête triable serait une décision, pas un style. */
 
 /* ─── Ligne de données ─────────────────────────────────────────────────
  * Une seule écriture de balisage pour deux mises en page : grille au-dessus
  * du seuil, carte empilée en dessous (voir .zv-unwrap et le bloc responsive).
- * Aucun zébrage nulle part dans la source — le survol est le seul repère de
+ * Aucun zébrage nulle part dans la source : le survol est le seul repère de
  * ligne, ce qui laisse le fond blanc porter la lecture. */
 
 .zv-row {
@@ -175,7 +175,7 @@
 /* La dernière ligne colle au cadre : son filet doublerait le trait de bordure
  * et épaissirait le bas du tableau. C'est déjà ce que fait la source côté
  * bibliothèque et côté import (`last:border-b-0`) ; seul le répertoire garde
- * le filet. Le module tranche pour le retrait — ce n'est donc pas une
+ * le filet. Le module tranche pour le retrait : ce n'est donc pas une
  * correction contre la production, c'est l'alignement sur sa majorité. */
 .zv-row:last-child {
   border-bottom: 0;
@@ -203,9 +203,9 @@
  * système qui n'en a que deux (blanc, survol). */
 
 /* ─── En-tête triable ──────────────────────────────────────────────────
- * ⚠️ HORS RELEVÉ — ajouté le 25/08/2026 avec l'adaptateur TanStack Table.
+ * ⚠️ HORS RELEVÉ : ajouté le 25/08/2026 avec l'adaptateur TanStack Table.
  * Aucun tableau de la production n'est triable ; l'intitulé y est du texte
- * inerte. Un en-tête qui trie DOIT être un <button> — c'est la seule façon
+ * inerte. Un en-tête qui trie DOIT être un <button> : c'est la seule façon
  * qu'il soit atteignable au clavier et annoncé comme actionnable.
  *
  * `font: inherit` plutôt qu'une police redite : l'en-tête a déjà la sienne
@@ -277,7 +277,7 @@
  *
  * ⚠️ CORRECTION DE FOND. La version précédente comptait sur --font-mono pour
  * aligner les colonnes de chiffres. Dans la source, --font-mono valait
- * `ui-monospace, Menlo` — une vraie chasse fixe. Dans CE paquet, --font-mono
+ * `ui-monospace, Menlo` : une vraie chasse fixe. Dans CE paquet, --font-mono
  * vaut « Space Grotesk », une grotesque PROPORTIONNELLE : le 1 y est plus
  * étroit que le 8, les unités ne tombent pas les unes sous les autres et
  * l'alignement annoncé n'existe pas.
@@ -285,7 +285,7 @@
  * Ce qui aligne réellement, c'est font-variant-numeric: tabular-nums : la
  * fonte sert alors ses chiffres à chasse égale, quelle que soit sa famille.
  * La famille mono est conservée ici pour le REGISTRE (valeur technique), pas
- * pour l'alignement — les deux ne sont plus confondus. */
+ * pour l'alignement : les deux ne sont plus confondus. */
 .zv-cell--num {
   /* Sans effet dans la grille ; utile sous 768px, où la cellule se retrouve
    * enfant d'un .zv-unwrap devenu flex et ne doit pas se laisser comprimer. */
@@ -312,7 +312,7 @@
   color: var(--label);
 }
 
-/* Même logique pour l'unité en clair — « 42 docs » en carte, « 42 » en
+/* Même logique pour l'unité en clair : « 42 docs » en carte, « 42 » en
  * tableau. Reste INLINE : elle appartient à la valeur, pas à sa ligne. */
 .zv-cell__unit {
   display: none;
@@ -322,7 +322,7 @@
  * La primitive structurelle du module : un groupe qui rassemble deux ou trois
  * cellules pour l'empilement mobile, puis s'efface (display: contents) et
  * rend ses enfants DIRECTEMENT à la grille du tableau. C'est ce qui permet
- * d'écrire le balisage une seule fois pour deux mises en page — sans lui, il
+ * d'écrire le balisage une seule fois pour deux mises en page : sans lui, il
  * faudrait dupliquer la rangée et les deux copies divergeraient.
  *
  * Quatre enveloppes de ce type dans la source, sur trois écrans indépendants :
@@ -364,7 +364,7 @@
  * 2 % du blanc de la liste : ce fond est, en pratique, INVISIBLE. Il est
  * conservé comme rappel discret, mais le signal « quelque chose est en train
  * de se passer » doit être porté par la jauge (.zv-progress) ou par le
- * libellé de la rangée — surtout pas par ce fond. */
+ * libellé de la rangée : surtout pas par ce fond. */
 .zv-list__row--upload {
   background: var(--panel);
 }
@@ -389,12 +389,12 @@
 }
 
 /* ⚠️ Aucun état interactif dans la source : ni survol de rangée, ni sélection,
- * ni focus. Une liste de fichiers n'y est pas cliquable — si elle le devient,
+ * ni focus. Une liste de fichiers n'y est pas cliquable : si elle le devient,
  * c'est .zv-row qu'il faut employer, pas cette rangée-ci. */
 
 /* ─── Métadonnée mono ──────────────────────────────────────────────────
  * Second registre mono du système, en BAS DE CASSE : taille de fichier, date,
- * horodatage, compteur, latence. Ni capitales ni interlettrage — c'est
+ * horodatage, compteur, latence. Ni capitales ni interlettrage, c'est
  * exactement ce qui le distingue de .zv-tag et .zv-mono (capitales,
  * 0,14–0,2em) : une date ou un nom de fichier passés en capitales espacées
  * deviennent illisibles et s'alignent mal.
@@ -496,7 +496,7 @@
 }
 
 /* Variante en grille (métadonnées d'une source citée) : deux colonnes des DEUX
- * côtés du seuil — ce sont quatre valeurs courtes, les empiler ferait une
+ * côtés du seuil, ce sont quatre valeurs courtes, les empiler ferait une
  * colonne inutilement longue. Le libellé passe au-dessus de la valeur. */
 .zv-kv--grid {
   display: grid;
@@ -513,7 +513,7 @@
 }
 
 /* En grille, la clé redevient un label de colonne : capitales, plus petit,
- * gris de label — et non plus l'accent de la variante en ligne. */
+ * gris de label, et non plus l'accent de la variante en ligne. */
 .zv-kv--grid .zv-kv__key {
   display: block;
   margin-bottom: 2px;
@@ -533,7 +533,7 @@
 /* ─── Pastille d'initiales ─────────────────────────────────────────────
  * CARRÉE, jamais ronde : le rond est un usage de réseau social, l'encre et le
  * papier posent des blocs. La teinte dit la NATURE de l'entité, elle n'est pas
- * décorative — la changer, c'est changer le sens.
+ * décorative : la changer, c'est changer le sens.
  *
  * 9,5px dans la source. Le paquet ne descend sous 12px que sur son échelle
  * mono : --mono-sm (9px) est employé ici comme MESURE, la pastille restant
@@ -577,12 +577,12 @@
 
 /* Règles d'initiales, à respecter côté appelant. Il y en a DEUX, et les
  * confondre change le rendu :
- *   — .zv-avatar (26px, entité du répertoire) : préfixes « M. | Me | SARL |
+ *   - .zv-avatar (26px, entité du répertoire) : préfixes « M. | Me | SARL |
  *     SCI | SA » retirés, découpe sur [espace ou &], AUCUN repli ;
- *   — .zv-avatar--sm (22px, organisation dans le chrome) : deux mots au plus,
+ *   - .zv-avatar--sm (22px, organisation dans le chrome) : deux mots au plus,
  *     mots-outils écartés (« cabinet », « étude », « office », « selarl »,
  *     « scp », « et », « de », « du », « des », « la », « le », « les »),
- *     repli sur « · » quand rien ne sort — sans ce repli, une pastille vide
+ *     repli sur « · » quand rien ne sort) sans ce repli, une pastille vide
  *     passe pour un défaut d'affichage.
  * Prescrire la seconde pour la première change les initiales du répertoire. */
 
@@ -601,7 +601,7 @@
   white-space: nowrap;
 }
 
-/* Revenir à la ligne : tout ce qui ne se devine pas coupé — adresses e-mail,
+/* Revenir à la ligne : tout ce qui ne se devine pas coupé, adresses e-mail,
  * noms de fichiers, jetons, messages d'erreur. Perdre la fin d'un message
  * d'erreur, c'est perdre l'incident. */
 .zv-break {
@@ -700,7 +700,7 @@
  * plusieurs. À trancher, pas à combler au hasard.
  * ⚠️ En production c'est un <span onClick> : inatteignable au clavier. Le
  * rendre focusable côté appelant (<button>) suffit à lui donner le contour de
- * base.css — c'est la correction à faire, pas un style à ajouter ici.
+ * base.css : c'est la correction à faire, pas un style à ajouter ici.
  * ⚠️ Recoupe .zv-src (components.css : mono capitales, fond blanc, filet
  * --accent-line, rayon 4px) : même rôle éditorial, aucune valeur commune. La
  * version applicative est remplie et à angle vif. Fusion ou dédoublement
@@ -709,11 +709,11 @@
 /* ─── Vignette de format ───────────────────────────────────────────────
  * ⚠️ HORS CHARTE, ET ASSUMÉ : --fmt-pdf et --fmt-docx sont le rouge Acrobat
  * et le bleu Word, pas --err ni --accent. Deux relevés indépendants les codent
- * à l'identique — c'est une intention (reconnaître le format d'un coup d'œil),
+ * à l'identique : c'est une intention (reconnaître le format d'un coup d'œil),
  * pas une dérive ; tokens.css les déclare et n'en autorise pas d'autre usage.
  * ⚠️ La source pose 7,5px, sous le plancher du paquet (--mono-sm, 9px).
  * Rabattu sur ce plancher : la vignette grossit d'un pixel et demi, ce qui
- * n'est PAS le relevé — à revoir à l'œil sur une rangée dense. Réservé à deux
+ * n'est PAS le relevé, à revoir à l'œil sur une rangée dense. Réservé à deux
  * ou quatre caractères en capitales, jamais à du texte.
  * L'interlettrage reste à 0,06em et non aux 0,14em du reste des capitales :
  * sur quatre caractères dans 30px de large, 0,14em déborde de la vignette.
@@ -724,7 +724,7 @@
   /* ⚠️ Une vignette posée dans une colonne flex (.zv-list__main) s'étire sur
    * toute la largeur si on ne l'en empêche pas : elle cesse alors d'être une
    * vignette et se lit comme une bande de couleur. Même raison que le
-   * `justify-self: start` de .zv-badge en grille — vu au rendu, pas à la
+   * `justify-self: start` de .zv-badge en grille : vu au rendu, pas à la
    * relecture. */
   align-self: start;
   padding: 2px 5px;
@@ -746,7 +746,7 @@
 
 /* ─── Rangée dépliante ─────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). La FAQ est le pliage de la
- * vitrine ; l'applicatif n'en avait aucun — options avancées, détail d'une
+ * vitrine ; l'applicatif n'en avait aucun : options avancées, détail d'une
  * ligne de journal. Construite sur <details> NATIF : le clavier, l'annonce
  * et l'état ouvert viennent du navigateur, aucun JavaScript.
  * Plusieurs rangées se suivent bord à bord : le filet mitoyen tombe. */
@@ -814,7 +814,7 @@
 /* ─── Touche de clavier ────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026). Une documentation d'interface cite des
  * raccourcis ; le paquet n'avait rien pour les poser. Le bas de 2 px fait
- * le relief de la touche — géométrie, pas ombre de charte, comme l'anneau
+ * le relief de la touche : géométrie, pas ombre de charte, comme l'anneau
  * du radio. */
 
 .zv-kbd {
@@ -831,7 +831,7 @@
 }
 
 /* ─── Code ─────────────────────────────────────────────────────────────
- * HORS RELEVÉ (25/08/2026, voir DECISIONS.md — c'est l'entrée qui a créé
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md : c'est l'entrée qui a créé
  * --font-code). --font-mono (Space Grotesk) est PROPORTIONNELLE : elle
  * porte le registre des labels, pas l'alignement, et tabular-nums n'aligne
  * que les chiffres. Du code exige la chasse fixe entière : --font-code, la
@@ -840,7 +840,7 @@
  * charte n'a pas. Le code se lit à l'encre sur panneau, comme un extrait. */
 
 /* En ligne, dans une phrase : `pnpm build`. Taille RELATIVE au texte qui
- * l'accueille — le même extrait sert dans un corps 15 et une note 12,5. */
+ * l'accueille : le même extrait sert dans un corps 15 et une note 12,5. */
 .zv-code {
   padding: 1px 5px;
   border: 1px solid var(--hairline);
@@ -875,7 +875,7 @@
 /* ─── Sous 768px ───────────────────────────────────────────────────────
  * Point de rupture unique de la charte. Les lignes cessent d'être des lignes :
  * une grille de six colonnes à 375px produit six colonnes illisibles, ou un
- * débordement horizontal de la page. Le balisage, lui, ne change pas — c'est
+ * débordement horizontal de la page. Le balisage, lui, ne change pas : c'est
  * .zv-unwrap qui rend l'inversion possible.
  *
  * ⚠️ La source coupe à 1024px (lg de Tailwind), pas à 768 : entre les deux,
@@ -903,7 +903,7 @@
 
   /* Le groupe redevient une boîte : ses deux ou trois cellules tiennent sur
    * une même ligne au lieu de s'empiler chacune sur la sienne.
-   * flex-wrap: wrap n'est pas optionnel — deux des quatre enveloppes de la
+   * flex-wrap: wrap n'est pas optionnel : deux des quatre enveloppes de la
    * source passent à la ligne, et sans lui la rangée taille + date + statut
    * déborde de la carte à 320px, c'est-à-dire exactement le défaut que le
    * passage en carte devait supprimer.
@@ -927,7 +927,7 @@
    * flex, intitulé à gauche et valeur à droite
    * (tableau-de-bord/page.tsx:120). Sans cela, « TAILLE » vient se coller à
    * « 2,4 Mo » et les deux se lisent comme un seul mot.
-   * `:has()` cible les seules cellules qui portent une étiquette — les
+   * `:has()` cible les seules cellules qui portent une étiquette : les
    * autres gardent leur flux. */
   .zv-cell:has(.zv-cell__label) {
     display: flex;