@zevra/ui 0.35.0 → 0.36.0

package/react/layout.tsx

@@ -1,4 +1,4 @@
-// Mise en page vitrine — page, gouttières, grille 12, sections, hero, frise
+// Mise en page vitrine : page, gouttières, grille 12, sections, hero, frise
 // d'étapes, statistiques, pieds de page, couches d'empilement.
 //
 // Couche VITRINE : une application n'a aucune raison de charger ce fichier.
@@ -34,7 +34,7 @@ export function Page({
 
 export interface GutterProps extends Div {
   /** `wide` pour une bande pleine largeur, `chrome` pour la barre de
-   *  navigation — qui ne s'aligne pas sur la colonne de texte. */
+   *  navigation : qui ne s'aligne pas sur la colonne de texte. */
   variante?: 'wide' | 'chrome'
   as?: ElementType
   className?: string
@@ -67,9 +67,9 @@ export function Grid12({ className, ...reste }: Div & { className?: string }) {
 export type Span12 = 3 | 4 | 5 | 6 | 7 | 8 | 9
 
 /** ⚠️ Seules ces sept portées existent : ce sont les découpes employées par
- *  la vitrine (5+7 vient du prototype experience.html — le glyphe en 5, le
+ *  la vitrine (5+7 vient du prototype experience.html, le glyphe en 5, le
  *  discours en 7). En ajouter une revient à ajouter une mise en page, pas
- *  une utilité — c'est une décision de DA. */
+ *  une utilité : c'est une décision de DA. */
 export function Col({
   span,
   className,
@@ -170,7 +170,7 @@ export function NavLinks({ className, ...reste }: Div & { className?: string })
  *  `AnchorHTMLAttributes` et non `HTMLAttributes` : sans quoi ils refusent
  *  `target`, `rel`, `download` et `hreflang`. Un lien sortant ne peut alors
  *  pas porter `rel="noopener"`, et un lien qui doit s'ouvrir à côté ne le
- *  peut pas non plus — une app consommatrice a dû écrire la classe à la main
+ *  peut pas non plus : une app consommatrice a dû écrire la classe à la main
  *  pour cette seule raison. (0.19.0) */
 export interface NavLinkProps
   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
@@ -181,7 +181,7 @@ export interface NavLinkProps
 }
 
 /** ⚠️ `.zv-navlink` est la navigation de VITRINE. L'entrée applicative
- *  s'appelle `SideLink` — les deux ne doivent jamais se recouvrir. */
+ *  s'appelle `SideLink` : les deux ne doivent jamais se recouvrir. */
 export function NavLink({ discret, className, ...reste }: NavLinkProps) {
   return (
     <a className={cx('zv-navlink', discret && 'zv-navlink--quiet', className)} {...reste} />
@@ -201,7 +201,7 @@ export function NavBurger({
   return <button type={type} className={cx('zv-nav__burger', className)} {...reste} />
 }
 
-/** Le contenu du tiroir de navigation vitrine — à poser dans `Drawer`. */
+/** Le contenu du tiroir de navigation vitrine : à poser dans `Drawer`. */
 export function NavDrawer({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-nav-drawer', className)} {...reste} />
 }
@@ -233,7 +233,7 @@ export function NavDrawerGroup({ className, ...reste }: Span & { className?: str
 /* ─── Entrées à menu déroulant ─────────────────────────────────────── */
 
 /** Une famille qui se déplie. Ouverture au survol ET au focus, en CSS seul :
- *  pas d'état à tenir, donc rien à hydrater — une barre de vitrine reste
+ *  pas d'état à tenir, donc rien à hydrater, une barre de vitrine reste
  *  rendue au serveur. */
 export function NavDropdown({ className, ...reste }: Span & { className?: string }) {
   return <span className={cx('zv-navdd', className)} {...reste} />
@@ -367,7 +367,7 @@ export function LockupWord({
 /* ─── Rail de lecture ──────────────────────────────────────────────── */
 
 /** La table des matières d'une page longue, posée sur le côté. Elle navigue
- *  (chaque entrée est une ancre) et elle suit — poser `data-zv-rail` et
+ *  (chaque entrée est une ancre) et elle suit : poser `data-zv-rail` et
  *  importer `@zevra/ui/rail.js` pour que l'entrée courante s'allume. Sans le
  *  module, le rail navigue toujours : rien ne casse, le suivi manque.
  *
@@ -392,7 +392,7 @@ export function Rail({
 }
 
 /** ⚠️ `href` doit désigner une ancre de la page (`#section`) : c'est elle
- *  que le module surveille, et c'est le balisage qui fait foi — il n'y a
+ *  que le module surveille, et c'est le balisage qui fait foi, il n'y a
  *  pas de liste de sections à tenir à jour ailleurs. */
 export function RailItem({
   courant,
@@ -420,7 +420,7 @@ export function RailItem({
 /* ─── Frise d'étapes ───────────────────────────────────────────────── */
 
 export interface StepsProps extends Div {
-  /** Avancement du rail, entre 0 et 1 — piloté au défilement. */
+  /** Avancement du rail, entre 0 et 1 : piloté au défilement. */
   avancement?: number
   className?: string
   children?: ReactNode
@@ -562,7 +562,7 @@ export function OnlyMobile({ className, ...reste }: Div & { className?: string }
 
 /** La bande AU-DESSUS de la barre de navigation : annonce de version,
  *  information réglementaire. UN SEUL par page, et jamais pour du marketing
- *  permanent — un bandeau qui ne part pas devient un bourrelet de chrome. */
+ *  permanent : un bandeau qui ne part pas devient un bourrelet de chrome. */
 export function Banner({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-banner', className)} {...reste} />
 }
@@ -577,7 +577,7 @@ export interface CarouselProps extends Div {
 }
 
 /** Défilement natif scroll-snap, AUCUN JavaScript : pas de flèches, pas de
- *  points. Le conteneur est focalisable — c'est lui que les flèches du
+ *  points. Le conteneur est focalisable : c'est lui que les flèches du
  *  clavier font défiler. La largeur des éléments vient du consommateur.
  *  ⚠️ Un carrousel reste un aveu d'espace : la règle de variété lui préfère
  *  une grille tant que le contenu tient. */
@@ -602,7 +602,7 @@ export function CarouselItem({ className, ...reste }: Div & { className?: string
  *  ⚠️ À poser À CÔTÉ de `NavLinks`, jamais DEDANS. `NavLinks` disparaît sous
  *  le point de rupture (et sous 1150px en `nav--riche`), remplacée par le
  *  burger : un compte placé dedans s'évanouit sur téléphone, et l'on ne peut
- *  plus se connecter — c'est pourtant la première chose qu'on y fait. */
+ *  plus se connecter, c'est pourtant la première chose qu'on y fait. */
 export function NavActions({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-nav__actions', className)} {...reste} />
 }
@@ -610,12 +610,12 @@ export function NavActions({ className, ...reste }: Div & { className?: string }
 /* ─── Lanceur d'applications ───────────────────────────────────────── */
 
 /** Le lanceur : passer d'un produit Zevra à l'autre, depuis n'importe lequel.
- *  Il se pose À DROITE de la barre, à côté du compte — c'est la convention
+ *  Il se pose À DROITE de la barre, à côté du compte : c'est la convention
  *  que tout le monde connaît, et ce n'est pas le moment d'en inventer une.
  *
  *  Ouvert au survol et au focus en CSS seul : la barre reste rendue au
  *  serveur, sans rien à hydrater. Une app qui préfère l'ouverture au CLIC
- *  (la convention des lanceurs) tient l'état elle-même et passe `ouvert` —
+ *  (la convention des lanceurs) tient l'état elle-même et passe `ouvert` :
  *  un état se dit en prop, il ne se peint pas depuis l'app. */
 export function Lanceur({
   label = 'Applications Zevra',
@@ -627,7 +627,7 @@ export function Lanceur({
 }: Div & {
   label?: string
   /** L'intitulé du panneau, avec le filet de spectre. Le passer à `null`
-   *  pour un panneau nu — mais c'est ce filet qui fait qu'un lanceur
+   *  pour un panneau nu : mais c'est ce filet qui fait qu'un lanceur
    *  ressemble à Zevra plutôt qu'à n'importe quel autre. */
   titre?: ReactNode
   ouvert?: boolean
@@ -668,7 +668,7 @@ export function LanceurGroupe({ className, ...reste }: Span & { className?: stri
   return <span className={cx('zv-lanceur__groupe', className)} {...reste} />
 }
 
-/** La grille de tuiles. Elle enveloppe les `LanceurApp` d'une même famille —
+/** La grille de tuiles. Elle enveloppe les `LanceurApp` d'une même famille :
  *  c'est ce qui permet à un panneau d'en porter plusieurs. */
 export function LanceurApps({ className, ...reste }: Span & { className?: string }) {
   return <span className={cx('zv-lanceur__apps', className)} {...reste} />
@@ -682,7 +682,7 @@ export interface LanceurAppProps
    *  qui ne connaît pas encore la suite : un nom de marque seul ne dit rien
    *  à un client qui découvre. */
   accroche?: string
-  /** Le glyphe du produit — `GLYPHES.memoire` de `@zevra/ui/glyphes`. Sans
+  /** Le glyphe du produit : `GLYPHES.memoire` de `@zevra/ui/glyphes`. Sans
    *  lui, la tuile porte l'initiale : une image qui ne charge pas ne doit
    *  pas laisser un trou. */
   glyphe?: string
@@ -732,7 +732,7 @@ export interface CompteProps extends Div {
   ouvert?: boolean
   label?: string
   className?: string
-  /** Les entrées du panneau — des `CompteLien`. */
+  /** Les entrées du panneau : des `CompteLien`. */
   children?: ReactNode
 }
 
@@ -743,7 +743,7 @@ export interface CompteProps extends Div {
  *
  *  ⚠️ Le panneau n'est pas un `role="menu"` : ce rôle promet une navigation
  *  aux flèches que le CSS seul ne peut pas tenir. Ce sont des liens dans un
- *  panneau, atteignables par la tabulation — une promesse tenue vaut mieux
+ *  panneau, atteignables par la tabulation : une promesse tenue vaut mieux
  *  qu'un rôle exact et menteur. */
 export function Compte({
   utilisateur,
@@ -799,7 +799,7 @@ export function Compte({
 }
 
 /** Une entrée du panneau de compte. Rendue en `<a>` avec `href`, en
- *  `<button>` sans — se déconnecter est une ACTION, pas une navigation, et
+ *  `<button>` sans : se déconnecter est une ACTION, pas une navigation, et
  *  un lien qui n'en est pas un se copie, s'ouvre dans un onglet et casse. */
 export function CompteLien({
   sortie,

package/react/navigation.tsx

@@ -1,8 +1,8 @@
-// Navigation applicative — colonne latérale, barre supérieure, fil d'Ariane,
+// Navigation applicative : colonne latérale, barre supérieure, fil d'Ariane,
 // menu, pagination, feuille de source, zones défilantes.
 //
 // Rien ici n'a d'état propre : l'entrée courante, la page courante, l'item
-// sélectionné viennent de l'appelant. Aucun « use client », donc — c'est ce
+// sélectionné viennent de l'appelant. Aucun « use client », donc : c'est ce
 // qui permet à une colonne de navigation Next de rester rendue au serveur.
 //
 // ⚠️ Les OVERLAYS (tiroir, modale, notification) sont dans overlays.tsx : eux
@@ -26,7 +26,7 @@ type Btn = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'>
 /* ─── Colonne latérale ─────────────────────────────────────────────── */
 
 /** Une colonne, un filet, rien d'autre : ni ombre, ni rayon. Une ombre ferait
- *  flotter une pièce qui ne bouge jamais. Elle défile pour son propre compte —
+ *  flotter une pièce qui ne bouge jamais. Elle défile pour son propre compte :
  *  une nav longue n'entraîne jamais le contenu. */
 export function Sidebar({ className, ...reste }: Div & { className?: string }) {
   return <aside className={cx('zv-sidebar', className)} {...reste} />
@@ -61,7 +61,7 @@ export interface SideLinkProps extends A {
   /** Pose `aria-current="page"` en plus de la classe : sans lui, l'entrée
    *  courante est marquée pour l'œil et muette au lecteur d'écran. */
   courant?: boolean
-  /** Rang mono ou glyphe, sur une colonne de largeur fixe — sinon les
+  /** Rang mono ou glyphe, sur une colonne de largeur fixe : sinon les
    *  libellés se décalent d'un groupe à l'autre. */
   num?: ReactNode
   className?: string
@@ -85,7 +85,7 @@ export function SideLink({ courant, num, className, children, ...reste }: SideLi
 
 /** Elle REMPLACE la colonne sous le point de rupture : masquée au-dessus,
  *  elle n'apparaît que dans le bloc mobile du CSS. Ne pas la conditionner en
- *  JavaScript — le rendu serveur ne connaît pas la largeur de l'écran. */
+ *  JavaScript : le rendu serveur ne connaît pas la largeur de l'écran. */
 export function Topbar({ className, ...reste }: Div & { className?: string }) {
   return <header className={cx('zv-topbar', className)} {...reste} />
 }
@@ -104,7 +104,7 @@ export function TopbarBurger({ className, type = 'button', ...reste }: Btn & { c
   return <button type={type} className={cx('zv-topbar__burger', className)} {...reste} />
 }
 
-/** Croix bordée du chrome — fermeture d'un tiroir, d'une feuille de source.
+/** Croix bordée du chrome : fermeture d'un tiroir, d'une feuille de source.
  *  Angles vifs : le rayon signale l'action, le chrome n'en est pas une. */
 export function ChromeButton({
   className,
@@ -125,7 +125,7 @@ export interface CrumbsProps extends Omit<A, 'children'> {
   className?: string
 }
 
-/** ⚠️ Le fil ENTIER est cliquable — c'est un seul nœud, pas une liste de
+/** ⚠️ Le fil ENTIER est cliquable : c'est un seul nœud, pas une liste de
  *  liens. Sans `href`, il se rend en `<span>` : un `<a>` sans cible reste
  *  annoncé comme un lien et déçoit. */
 export function Crumbs({
@@ -159,7 +159,7 @@ export function Crumbs({
 /* ─── Menu déroulant ───────────────────────────────────────────────── */
 
 /** À poser dans un `SelectAnchor` (forms) : c'est l'enveloppe qui ancre le
- *  menu, pas le déclencheur — l'ancrer sur le déclencheur casse sa largeur
+ *  menu, pas le déclencheur, l'ancrer sur le déclencheur casse sa largeur
  *  maximale calculée sur la fenêtre. */
 export function Menu({ className, ...reste }: Div & { className?: string; role?: string }) {
   return <div role="listbox" className={cx('zv-menu', className)} {...reste} />
@@ -185,13 +185,13 @@ export function MenuItem({ actif, className, type = 'button', ...reste }: MenuIt
 
 /* ─── Popover ──────────────────────────────────────────────────────── */
 
-/** Surface ancrée LIBRE — aide contextuelle, mini-formulaire de filtre.
+/** Surface ancrée LIBRE : aide contextuelle, mini-formulaire de filtre.
  *  Même ancre que le menu : à poser dans un `SelectAnchor`, rendu à
  *  l'ouverture seulement (`{ouvert && <Popover>…}`). Ce n'est PAS une
  *  infobulle : le popover s'ouvre au CLIC et peut porter de l'interactif ;
  *  l'infobulle (retours) se montre au survol et n'en porte jamais.
  *  ⚠️ Fermeture par clic extérieur et Échap : au composant appelant, comme
- *  pour le menu — et le déclencheur porte aria-expanded. */
+ *  pour le menu, et le déclencheur porte aria-expanded. */
 export function Popover({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-popover', className)} {...reste} />
 }
@@ -202,9 +202,9 @@ export interface TabsProps<T extends string> {
   onglets: readonly { id: T; label: ReactNode; compte?: ReactNode }[]
   actif: T
   onChange: (id: T) => void
-  /** « puces » (défaut) : la rangée de Seg — le motif des FILTRES, qui
-   *  restreignent une collection. « soulignes » : l'onglet au trait —
-   *  arbitré le 25/08/2026 (2 px, accent) — pour les VUES d'un même objet
+  /** « puces » (défaut) : la rangée de Seg, le motif des FILTRES, qui
+   *  restreignent une collection. « soulignes » : l'onglet au trait (
+   *  arbitré le 25/08/2026 (2 px, accent)) pour les VUES d'un même objet
    *  (Aperçu / Sources). */
   variante?: 'puces' | 'soulignes'
   /** Rangée qui défile au lieu de passer à la ligne (variante puces ; la
@@ -216,7 +216,7 @@ export interface TabsProps<T extends string> {
 }
 
 /** Deux dessins, une seule grammaire d'état. En puces, ce composant n'ajoute
- *  que l'ARIA au-dessus de `Seg` ; en soulignés, il pose `.zv-tabs-line` —
+ *  que l'ARIA au-dessus de `Seg` ; en soulignés, il pose `.zv-tabs-line` :
  *  l'arbitrage longtemps en attente, tranché le 25/08/2026 (DECISIONS.md).
  *  Les deux portent le contrat clavier du rôle : la rangée est UNE étape de
  *  tabulation (roving tabindex), les flèches passent d'un onglet à l'autre
@@ -371,7 +371,7 @@ export function CitePanel({
 
 export interface ScrollProps extends Div {
   /** Barre fine, aux couleurs du système. OPT-IN : par défaut la barre native
-   *  est conservée — sur macOS et iOS, l'habiller la rend permanente et elle
+   *  est conservée, sur macOS et iOS, l'habiller la rend permanente et elle
    *  mange une colonne. */
   habillee?: boolean
   className?: string
@@ -394,14 +394,14 @@ export function Scroll({ habillee, className, ...reste }: ScrollProps) {
 
 export interface TabbarProps extends Div {
   /** Le nom de la barre (« Sections ») : un <nav> anonyme de plus est une
-   *  énigme au lecteur d'écran — même règle que le label de `Carousel`. */
+   *  énigme au lecteur d'écran, même règle que le label de `Carousel`. */
   label: string
   className?: string
 }
 
 /** Barre basse de navigation, pour une application à trois ou quatre
  *  sections. N'existe que SOUS le point de rupture : au-dessus, la colonne
- *  latérale est là. CINQ entrées au maximum — au-delà, c'est le tiroir.
+ *  latérale est là. CINQ entrées au maximum : au-delà, c'est le tiroir.
  *  ⚠️ Elle est fixe : le gabarit qui la pose doit donner au contenu un
  *  padding-bottom à sa hauteur, sinon la dernière ligne se cache dessous. */
 export function Tabbar({ label, className, ...reste }: TabbarProps) {
@@ -411,7 +411,7 @@ export function Tabbar({ label, className, ...reste }: TabbarProps) {
 export interface TabbarItemProps extends A {
   /** Section courante : pose `aria-current="page"`, que le CSS suit. */
   courant?: boolean
-  /** L'icône au-dessus du libellé — un `<Icon>` du paquet. */
+  /** L'icône au-dessus du libellé : un `<Icon>` du paquet. */
   icone?: ReactNode
   className?: string
   children?: ReactNode

package/react/overlays.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-// Enrobages — voile, tiroir, modale, notification flottante.
+// Enrobages : voile, tiroir, modale, notification flottante.
 //
 // SEUL fichier du paquet marqué « use client », avec un hook. Tout ce qui vit
 // ici vole le regard à la page : il faut une touche Échap, un piège de focus
 // et un verrou de défilement, et rien de cela ne s'écrit en CSS.
 //
 // ⚠️ Ne PAS écrire `data-open={ouvert}` en React : cela rend `data-open="false"`,
-// que le sélecteur d'attribut du CSS considère comme PRÉSENT — le panneau
+// que le sélecteur d'attribut du CSS considère comme PRÉSENT : le panneau
 // resterait ouvert. Ces composants emploient la classe `--open`, prévue pour ça.
 
 import { useCallback, useEffect, useRef } from 'react'
@@ -22,7 +22,7 @@ const FOCUSABLES =
 export interface UseOverlayOptions {
   ouvert: boolean
   onClose: () => void
-  /** Le nœud à piéger. Sans lui, pas de piège — mais Échap fonctionne quand
+  /** Le nœud à piéger. Sans lui, pas de piège : mais Échap fonctionne quand
    *  même. */
   panneau?: RefObject<HTMLElement | null>
   /** Verrouille le défilement du document. Vrai pour une modale, vrai pour un
@@ -46,7 +46,7 @@ export function useOverlay({ ouvert, onClose, panneau, verrouille = true }: UseO
     // ⚠️ Le document du PANNEAU, pas `document` : un enrobage peut vivre dans
     // un autre document que celui du script (planche de composants rendue dans
     // un iframe, fenêtre détachée). Écouter `document` y poserait la touche
-    // Échap sur la page hôte — elle fermerait la modale d'à côté et pas
+    // Échap sur la page hôte : elle fermerait la modale d'à côté et pas
     // celle-ci. Sans panneau, on retombe sur le document courant.
     const docu = cible?.ownerDocument ?? document
     origine.current = docu.activeElement as HTMLElement | null
@@ -105,7 +105,7 @@ export function Scrim({ className, ...reste }: Div & { className?: string }) {
 export interface DrawerProps extends Omit<Div, 'title'> {
   ouvert: boolean
   onClose: () => void
-  /** Nom du dialogue — ce que le lecteur d'écran annonce à l'ouverture. */
+  /** Nom du dialogue : ce que le lecteur d'écran annonce à l'ouverture. */
   label?: string
   /** Croix de fermeture posée en absolu par-dessus la tête du panneau. */
   fermeture?: ReactNode
@@ -114,7 +114,7 @@ export interface DrawerProps extends Omit<Div, 'title'> {
 }
 
 /** ⚠️ Le tiroir n'existe QUE sous le point de rupture : au-dessus, la
- *  navigation est une colonne et il n'y a rien à ouvrir. Le CSS s'en charge —
+ *  navigation est une colonne et il n'y a rien à ouvrir. Le CSS s'en charge :
  *  ne pas conditionner le rendu sur la largeur en JavaScript, le serveur ne
  *  la connaît pas. */
 export function Drawer({
@@ -156,11 +156,11 @@ export interface ModalProps extends Omit<Div, 'title'> {
   titre?: ReactNode
   /** Actions de tête, à droite du titre (la croix, en général). */
   actions?: ReactNode
-  /** Pied d'actions. Il reste visible quand le corps défile — c'est tout
+  /** Pied d'actions. Il reste visible quand le corps défile : c'est tout
    *  l'intérêt du plafond de hauteur. */
   pied?: ReactNode
   /** 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. */
   danger?: boolean
   className?: string
   children?: ReactNode
@@ -231,7 +231,7 @@ export interface ToastProps extends Div {
 
 /** ⚠️ Ne remplace PAS `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é ». */
 export function Toast({ ton, className, ...reste }: ToastProps) {
   return <div className={cx('zv-toast', ton && `zv-toast--${ton}`, className)} {...reste} />
 }

package/react/select-menu.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-// Sélection DESSINÉE — le déclencheur a l'apparence d'un champ, et la liste
+// Sélection DESSINÉE : le déclencheur a l'apparence d'un champ, et la liste
 // est peinte par le paquet.
 //
 // ⚠️ POURQUOI CE COMPOSANT EXISTE, ALORS QUE `Select` (natif) EST LÀ.
 // Un <select> natif ne peut pas être habillé : sa liste déroulée est peinte
 // par le SYSTÈME, pas par la page. Sur un macOS en mode sombre elle sort en
-// menu noir au milieu d'une interface claire — aucun CSS ne corrige cela.
+// menu noir au milieu d'une interface claire : aucun CSS ne corrige cela.
 //
 // ⚠️ CE QUE ÇA COÛTE, ET QUI EST PAYÉ ICI. En remplaçant le contrôle natif,
 // on perd le clavier, l'annonce au lecteur d'écran et la liste système. Tout
@@ -39,7 +39,7 @@ export interface SelectMenuProps<T extends string = string> {
   onChange: (valeur: T) => void
   /** Affiché quand rien n'est choisi. */
   placeholder?: string
-  /** Identifiant du déclencheur — à faire correspondre au `htmlFor` du champ. */
+  /** Identifiant du déclencheur : à faire correspondre au `htmlFor` du champ. */
   id?: string
   /** Nom du contrôle, quand aucun intitulé visible ne le désigne. */
   label?: string

package/react/surfaces.tsx

@@ -1,10 +1,10 @@
-// Surfaces — halos, sols quadrillés, voiles de fondu, bandeau manifeste,
+// Surfaces : halos, sols quadrillés, voiles de fondu, bandeau manifeste,
 // glyphes. C'est ce qui distingue une page Zevra d'une page blanche bien
 // composée.
 //
 // ⚠️ TOUT est DÉCORATIF : posé en absolu derrière le contenu, sans capter le
 // pointeur, et masqué aux lecteurs d'écran. Ces composants posent
-// `aria-hidden` eux-mêmes — ne pas y mettre de texte à lire.
+// `aria-hidden` eux-mêmes : ne pas y mettre de texte à lire.
 //
 // ⚠️ Tous supposent un parent `position: relative; overflow: hidden`. Sans le
 // second, un halo de 1400px de large fait déborder la page.
@@ -17,7 +17,7 @@ type Div = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
 /* ─── Halo ambiant ─────────────────────────────────────────────────── */
 
 /** Le violet et le cyan du spectre, très dilués. Ce n'est PAS un emploi du
- *  spectre en aplat : c'est une lumière — elle ne compte pas dans les trois
+ *  spectre en aplat : c'est une lumière, elle ne compte pas dans les trois
  *  emplois autorisés. */
 export function Halo({
   place,
@@ -101,7 +101,7 @@ export function PanelNavy({ className, ...reste }: Div & { className?: string })
 }
 
 /** Repeint un texte pour une surface sombre. `Band` le fait déjà pour son
- *  contenu courant — cette classe sert aux cas isolés. */
+ *  contenu courant : cette classe sert aux cas isolés. */
 export function TextOnDark({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-text-on-dark', className)} {...reste} />
 }
@@ -143,15 +143,15 @@ export type Animation =
   | 'dot-active'
   | 'progress'
 
-/** Les neuf animations du paquet, nommées — plus un dosage. ⚠️ Elles sont
+/** Les neuf animations du paquet, nommées : plus un dosage. ⚠️ Elles sont
  *  pilotées AU DÉFILEMENT et réservées à la vitrine : le chrome applicatif
  *  n'anime rien. `prefers-reduced-motion` les coupe toutes, globalement,
  *  depuis base.css.
  *
  *  `option` échelonne les entrées d'une même rangée (`pop`, rangs 2 à 6),
- *  donne le coin d'arrivée (`converge` : tr, bl, br — le défaut vient du
+ *  donne le coin d'arrivée (`converge` : tr, bl, br (le défaut vient du
  *  haut-gauche), ou DOSE l'entrée (`rise` + « doux » : douze pixels au
- *  lieu de trente-deux, pour les blocs des pages intérieures — la home
+ *  lieu de trente-deux, pour les blocs des pages intérieures) la home
  *  garde l'entrée pleine). Passée à une autre animation, elle est
  *  ignorée. */
 export function anim(
@@ -170,10 +170,10 @@ export function anim(
 export interface SocialFrameProps extends Div {
   /** paysage 1200×630 (OpenGraph, lien LinkedIn) · carre 1080×1080 (post) ·
    *  story 1080×1920. FIGÉS en pixels : ce sont des planches qu'on CAPTURE,
-   *  pas des pages — elles ignorent le point de rupture, et c'est voulu. */
+   *  pas des pages, elles ignorent le point de rupture, et c'est voulu. */
   format?: 'paysage' | 'carre' | 'story'
   /** La planche sombre : le manifeste en fond. Les règles du fond sombre
-   *  s'appliquent — labels en `Mono ton="on-dark"`, jamais les neutres
+   *  s'appliquent : labels en `Mono ton="on-dark"`, jamais les neutres
    *  inversés. */
   manifeste?: boolean
   /** Le pied : wordmark à gauche, adresse en mono à droite. */
@@ -184,7 +184,7 @@ export interface SocialFrameProps extends Div {
 
 /** Planche d'export pour les réseaux. ⚠️ La règle « jamais de faux
  *  contenu » s'y applique au premier chef : un visuel social EST une
- *  publication — pas de chiffre inventé, pas de citation fabriquée. */
+ *  publication, pas de chiffre inventé, pas de citation fabriquée. */
 export function SocialFrame({
   format = 'paysage',
   manifeste,

package/react/typography.tsx

@@ -1,8 +1,8 @@
-// Typographie — titres, corps, kickers, labels mono, filets.
+// Typographie : titres, corps, kickers, labels mono, filets.
 //
 // La HIÉRARCHIE VISUELLE et le NIVEAU SÉMANTIQUE sont deux choses : une page
 // n'a qu'un <h1>, mais elle peut avoir plusieurs blocs à la taille du h1.
-// D'où `as` sur les titres — la taille est un choix de mise en page, la
+// D'où `as` sur les titres : la taille est un choix de mise en page, la
 // balise un choix de structure. Les confondre casse le plan du document pour
 // un lecteur d'écran sans que rien ne se voie à l'écran.
 
@@ -59,7 +59,7 @@ export const CardTitle = (p: Omit<HeadingProps, 'taille'>) => (
   <Heading taille="carte" {...p} />
 )
 
-/** Chiffre ou mot posé pour sa PRÉSENCE, hors de la hiérarchie des titres —
+/** Chiffre ou mot posé pour sa PRÉSENCE, hors de la hiérarchie des titres,
  *  d'où le `<div>` : un chiffre géant annoncé comme titre de section pollue
  *  le plan du document. */
 export function Display({ className, ...reste }: Div & { className?: string }) {
@@ -131,7 +131,7 @@ export function Em({
  *  `AnchorHTMLAttributes` et non `HTMLAttributes` : sans quoi ils refusent
  *  `target`, `rel`, `download` et `hreflang`. Un lien sortant ne peut alors
  *  pas porter `rel="noopener"`, et un lien qui doit s'ouvrir à côté ne le
- *  peut pas non plus — une app consommatrice a dû écrire la classe à la main
+ *  peut pas non plus : une app consommatrice a dû écrire la classe à la main
  *  pour cette seule raison. (0.19.0) */
 export function Link({
   className,
@@ -207,14 +207,14 @@ export interface MonoProps extends Span {
   /** Le ton, pas la taille : `label` est le gris d'intitulé, `ink` l'encre
    *  pleine, `muted` le gris secondaire, `on-dark` la bande manifeste. */
   ton?: 'label' | 'ink' | 'muted' | 'on-dark'
-  /** Le plus petit palier — badge dense, compteur de coque. */
+  /** Le plus petit palier : badge dense, compteur de coque. */
   micro?: boolean
   className?: string
 }
 
 /** Capitales espacées. ⚠️ Réservé aux LIBELLÉS : une date ou un nom de
  *  fichier passés en capitales espacées deviennent illisibles et s'alignent
- *  mal — pour ceux-là, c'est `Meta` (bas de casse, chasse tabulaire). */
+ *  mal, pour ceux-là, c'est `Meta` (bas de casse, chasse tabulaire). */
 export function Mono({ ton, micro, className, ...reste }: MonoProps) {
   return (
     <span

package/src/base.css

@@ -1,9 +1,9 @@
-/* Zevra UI — socle : reset, document, typographie, signature
+/* Zevra UI, socle : reset, document, typographie, signature
  * Dépend de tokens.css. À charger en premier.
  *
  * Chaque valeur ci-dessous est relevée dans les maquettes de la passation du
  * 23/08/2026. Quand deux planches divergent, l'arbitrage est écrit dans
- * DECISIONS.md — jamais tranché en silence.
+ * DECISIONS.md : jamais tranché en silence.
  *
  * POINT DE RUPTURE : 768px. Il ne vient PAS du relevé (les cinq maquettes sont
  * à largeur fixe, sans une seule media query). C'est la convention `md` du
@@ -32,7 +32,7 @@ body {
 /* ─── Liens ─────────────────────────────────────────────────────────────
  * Restreint aux liens SANS classe. Les maquettes stylent `a` nu, ce qui
  * repeint le libellé des boutons au survol (a:hover, 0-1-1, l'emporte sur
- * .zv-btn, 0-1-0) — bug visible dans Main.html et signalé au relevé. Le
+ * .zv-btn, 0-1-0) : bug visible dans Main.html et signalé au relevé. Le
  * périmètre est réduit plutôt que neutralisé par un :hover inventé. */
 
 a:not([class]) {
@@ -55,7 +55,7 @@ a:not([class]):hover {
 
 /* ─── Accessibilité ─────────────────────────────────────────────────────
  * HORS RELEVÉ, et assumé : aucune des cinq maquettes ne déclare d'état de
- * focus. Un système livré sans focus clavier est inutilisable au clavier —
+ * focus. Un système livré sans focus clavier est inutilisable au clavier :
  * on ne réplique pas cette lacune. Seules des valeurs existantes sont
  * employées. */
 
@@ -64,7 +64,7 @@ a:not([class]):hover {
   outline-offset: 2px;
 }
 
-/* Texte pour lecteurs d'écran seulement — la géométrie standard du motif,
+/* Texte pour lecteurs d'écran seulement : la géométrie standard du motif,
  * aucune valeur de charte. HORS RELEVÉ (25/08/2026) : ajouté avec la roue,
  * dont le libellé d'annonce doit être un TEXTE dans le flux (un aria-label
  * sur un span vide n'est pas annoncé par tous les lecteurs). */
@@ -161,7 +161,7 @@ a:not([class]):hover {
   color: var(--accent-deep);
   font-weight: 400;
   /* Le composant `Em` rend un vrai <em>, que le navigateur penche par
-   * défaut — et AUCUNE italique n'est chargée : Outfit n'en a pas, il en
+   * défaut, et AUCUNE italique n'est chargée : Outfit n'en a pas, il en
    * fabrique donc une oblique de synthèse. Sur un titre de 76px, ça se voit.
    * La charte ne demande à cette classe qu'un changement de couleur et de
    * graisse ; on remet donc la droite. (`.zv-inset em` portait déjà cette
@@ -220,7 +220,7 @@ a:not([class]):hover {
 }
 
 /* 12,5px : la note d'accompagnement d'un bloc ou d'une carte de
- * documentation. Le plus petit palier de texte courant du système — en
+ * documentation. Le plus petit palier de texte courant du système : en
  * dessous, on passe en label capitales. */
 .zv-note {
   margin: 0;
@@ -268,7 +268,7 @@ a:not([class]):hover {
 
 /* Accroche produit, posée sous le nom d'un glyphe : « Votre savoir,
  * interrogeable en une phrase ». Moins interlettrée que le label qu'elle
- * suit (0.14em contre 0.2em) — sinon la phrase se disloque. */
+ * suit (0.14em contre 0.2em) : sinon la phrase se disloque. */
 .zv-tagline {
   font-family: var(--font-mono);
   text-transform: uppercase;
@@ -296,7 +296,7 @@ a:not([class]):hover {
   width: var(--spec-filet);
   height: 2px;
   background: var(--spectre);
-  /* Angle vif comme tout le reste depuis le 25/08 — sur 2px de haut, le
+  /* Angle vif comme tout le reste depuis le 25/08 : sur 2px de haut, le
    * rayon d'1px du relevé ne se voyait de toute façon pas. */
   border-radius: 0;
 }
@@ -361,7 +361,7 @@ a:not([class]):hover {
   }
 
   /* .zv-body garde 15px : c'est déjà la taille du chapô mobile. Seule
-   * l'interligne se resserre — et --dense reste distinct, à 13px/1.45. */
+   * l'interligne se resserre : et --dense reste distinct, à 13px/1.45. */
   .zv-body {
     line-height: 1.55;
   }