@zevra/ui 0.8.0 → 0.9.0

package/src/feedback.css

@@ -1,5 +1,6 @@
 /* Zevra UI — retours d'état : bandeaux, étiquettes, pastilles, absence,
- * travail en cours, curseur de flux.
+ * travail en cours, curseur de flux — et, depuis le 25/08/2026, la roue,
+ * le squelette et l'infobulle, longtemps refusés et enfin arbitrés.
  *
  * Dépend de tokens.css et de base.css (reset, fonte de corps, focus clavier
  * global). Indépendant des autres modules.
@@ -11,7 +12,8 @@
  *              --warn, --warn-soft, --warn-line, --warn-ink,
  *              --err, --err-soft, --err-line ;
  *   typo     — --font-display, --font-mono, --app, --app-sm,
- *              --app-h2, --mono, --mono-sm.
+ *              --app-h2, --mono, --mono-sm ;
+ *   ombre    — --shadow-menu (l'infobulle, qui flotte comme le menu).
  * Aucun autre. Il n'existe PAS de --ink-3…--ink-7, pas de --line-soft, pas de
  * --line-firm, pas d'échelles --text-* ni --mono-xs/--mono-2xs : une version
  * antérieure de cet en-tête les déclarait en dépendance, ce qui rendait le
@@ -37,11 +39,12 @@
  * d'un pixel ; c'est ce qui fait qu'un bandeau ample reste plus grand qu'un
  * bandeau courant, des deux côtés du seuil.
  *
- * Rien ici n'est interactif : pas de bouton de fermeture, pas de survol, pas
- * de champ. Les états :hover / :focus-visible / [disabled] / [aria-invalid]
- * n'ont donc aucune cible dans ce module — ils appartiennent aux boutons
- * (components.css) et aux champs (forms.css). Le focus clavier global de
- * base.css suffit au bandeau qu'on rend focusable pour l'annoncer.
+ * Presque rien ici n'est interactif : pas de bouton de fermeture, pas de
+ * champ. Les états [disabled] / [aria-invalid] n'ont aucune cible dans ce
+ * module — ils appartiennent aux boutons (components.css) et aux champs
+ * (forms.css). Le focus clavier global de base.css suffit au bandeau qu'on
+ * rend focusable pour l'annoncer. Seule exception, arbitrée le 25/08/2026 :
+ * l'infobulle, qui se montre par nature au survol et au focus de sa cible.
  */
 
 /* ─── Bandeaux d'état ───────────────────────────────────────────────────
@@ -67,15 +70,11 @@
    * nom de fichier à rallonge, identifiant, chemin. Sans coupure, il pousse
    * la page en défilement horizontal. */
   overflow-wrap: break-word;
-  /* Angle vif, comme au relevé.
-   * ⚠️ NON ARBITRÉ EN DA, et le module ne tranche pas à sa place : le
-   * `border-radius: 0` posé ici et sur .zv-badge est la valeur relevée, pas
-   * une « signature de la couche applicative ». Il entre en contradiction
-   * directe avec .zv-empty__action, qui renvoie au .zv-btn de
-   * components.css et donc à --r-btn (5px) : un écran vide affichera un
-   * bouton arrondi au milieu de blocs à angle vif. La règle doit monter
-   * dans DECISIONS.md ou tomber — elle ne peut pas rester implicite dans
-   * quatre modules. */
+  /* Angle vif, comme au relevé — et, depuis le 25/08/2026, comme tout le
+   * paquet : l'arbitrage DA « angle vif partout » (DECISIONS.md) a ramené
+   * les quatre tokens de rayon à 0. La contradiction longtemps signalée ici
+   * (un bouton arrondi au milieu de blocs vifs dans l'écran vide) est
+   * éteinte par cet arbitrage, pas par ce module. */
   border-radius: 0;
 }
 
@@ -204,7 +203,7 @@
   /* Un état ne se coupe jamais en deux lignes : « EN CHARGE » sur deux
    * lignes se lit comme deux états. */
   white-space: nowrap;
-  border-radius: 0; /* même arbitrage non tranché que .zv-alert, voir plus haut */
+  border-radius: 0; /* angle vif — relevé, et arbitré depuis (25/08/2026) */
 }
 
 /* Gabarit micro : niveau de log en tête de ligne, badge de la coque. À
@@ -421,8 +420,7 @@
 }
 
 /* L'action de l'écran vide (le bouton qui remplit la collection). Elle est
- * ici pour l'écart seul : le bouton lui-même vient de components.css — et
- * porte donc --r-btn, voir la contradiction signalée sur .zv-alert. */
+ * ici pour l'écart seul : le bouton lui-même vient de components.css. */
 .zv-empty__action {
   margin-top: 20px;
 }
@@ -459,10 +457,11 @@
 
 /* ⚠️ STATIQUE, et c'est un choix. Aucune animation dans la source : ni
  * @keyframes, ni classe d'animation, la pastille ne bat pas. Lui ajouter un
- * pouls est l'invention la plus tentante de tout le relevé — et les
- * @keyframes du paquet (motion.css) sont réservées à la vitrine, pilotées au
- * défilement. Ne pas confondre `.zv-dot` avec `.zv-anim-dot-active` de
- * motion.css : ce dernier anime un point de méthode, pas un état. */
+ * pouls est l'invention la plus tentante de tout le relevé. Les boucles de
+ * ce module (roue, squelette) disent une ATTENTE ; la pastille dit un
+ * ÉTAT, et un état ne bat pas. Ne pas confondre `.zv-dot` avec
+ * `.zv-anim-dot-active` de motion.css — ce dernier anime un point de
+ * méthode de la vitrine, pas un état. */
 
 /* ─── Curseur de flux ───────────────────────────────────────────────────
  * Bloc collé à la fin du texte en cours de diffusion, sur le dernier
@@ -496,21 +495,173 @@
  * garde existe côté script). C'est un défaut de l'application, pas une
  * intention de charte : ne pas le répliquer dans une app neuve.
  *
- * ─── Manques assumés : roue, squelette, infobulle ───────────────────────
- * AUCUNE MATIÈRE PREMIÈRE dans les cinq écrans relevés. Ni .zv-spinner, ni
- * .zv-skeleton, ni .zv-tooltip ne sont écrits ici : les livrer supposerait
- * d'inventer une durée, une amplitude et une géométrie que personne n'a
- * arbitrées, et un système ment moins en affichant un trou qu'une valeur
- * plausible. Rien n'appelle d'infobulle et rien n'en propose : le nom de
- * document tronqué n'a même pas d'attribut title, les barres des graphiques
- * n'affichent aucune valeur au pointeur.
+ * ─── Roue, squelette, infobulle : les manques, comblés ──────────────────
+ * Longtemps REFUSÉS ici même, faute de matière première dans les cinq
+ * écrans relevés — un système ment moins en affichant un trou qu'une valeur
+ * plausible. Tranchés le 25/08/2026 (DECISIONS.md, « les manques comblés »)
+ * en reprenant TELLES QUELLES les contraintes que ce module posait pour ce
+ * jour-là : pas de dégradé spectre — donc un squelette en --hairline, pas
+ * un balayage spectral — et une infobulle en petit panneau blanc, filet
+ * --line, ombre --shadow-menu, texte --app-sm / --ink-2, la seule
+ * combinaison déjà présente ailleurs dans le système. Les trois blocs
+ * suivent ; ce qui restait à inventer (durées, amplitudes) est dit sur
+ * place. */
+
+/* ─── Roue ──────────────────────────────────────────────────────────────
+ * Pour l'attente COURTE ET LOCALE : un bouton, une cellule, un panneau qui
+ * n'a pas la place d'une phrase. Elle ne remplace PAS .zv-loading : la
+ * phrase qui dit le travail réel (« Recherche dans 4 812 documents… »)
+ * reste le motif par défaut du système.
  *
- * Contraintes à respecter le jour où la DA les tranche : pas de dégradé
- * spectre (réservé au filet de section, à la barre de progression et aux
- * points de méthode) — donc un squelette en --hairline, pas un balayage
- * spectral ; et une infobulle en petit panneau blanc, filet --line, ombre
- * --shadow-menu, texte --app-sm / --ink-2, qui est la seule combinaison déjà
- * présente ailleurs dans le système. */
+ * Géométrie empruntée, rien d'inventé sauf la durée : 16 px (la taille de
+ * .zv-icon), trait de 2 (l'épaisseur du jeu d'icônes), piste --accent-line,
+ * secteur --accent. 0,8 s linéaire — une rotation qui accélère se lit comme
+ * un à-coup. prefers-reduced-motion (base.css) la FIGE : l'anneau
+ * interrompu reste lisible immobile, c'est pour cela que le secteur est un
+ * quart et pas une moitié. */
+
+@keyframes zv-spin {
+  to {
+    rotate: 1turn;
+  }
+}
+
+.zv-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex: none;
+  border: 2px solid var(--accent-line);
+  border-top-color: var(--accent);
+  /* Rond de FORME, pas de style : c'est le cercle qui fait lire la
+   * rotation — même dérogation que la pastille d'état. */
+  border-radius: 9999px;
+  /* `rotate` et non `transform` : la propriété indépendante compose avec un
+   * éventuel transform de placement — la leçon des boucles de motion.css. */
+  animation: zv-spin 0.8s linear infinite;
+}
+
+/* En tête d'un panneau ou d'un écran d'attente : la roue seule, plus
+ * grande. Le trait ne grossit pas — même compensation optique que les
+ * icônes. */
+.zv-spinner--lg {
+  width: 24px;
+  height: 24px;
+}
+
+/* ─── Squelette ─────────────────────────────────────────────────────────
+ * L'aplat --hairline exigé — pas de balayage spectral, pas de dégradé de
+ * gris que la charte n'a pas. La pulsation est une OPACITÉ (1 → 0,55), pas
+ * une couleur : elle dit « en chargement » sans introduire de teinte.
+ * 1,8 s en ease-in-out, la respiration de zv-breathe plutôt que la courbe
+ * d'entrée — c'est une boucle, pas un mouvement.
+ *
+ * La géométrie vient du CONSOMMATEUR (largeur et hauteur en style, comme la
+ * largeur de Progress) : un squelette qui invente ses dimensions ne
+ * ressemble jamais au contenu qu'il annonce. Seule la variante --text fixe
+ * une hauteur d'un cadratin, pour mimer une ligne du texte courant.
+ *
+ * ⚠️ Un squelette ANNONCE une structure : ne jamais en poser un pour un
+ * contenu dont la forme est inconnue — c'est .zv-loading qui dit ce cas. */
+
+@keyframes zv-skeleton {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+.zv-skeleton {
+  display: block;
+  background: var(--hairline);
+  animation: zv-skeleton 1.8s ease-in-out infinite;
+}
+
+.zv-skeleton--text {
+  height: 1em;
+}
+
+/* ─── Infobulle ─────────────────────────────────────────────────────────
+ * La combinaison imposée par l'arbitrage : panneau blanc, filet --line,
+ * ombre --shadow-menu, texte --app-sm / --ink-2. Posée AU-DESSUS de la
+ * cible, centrée, à 6 px — au-dessus parce que le pointeur vient d'en bas
+ * et la masquerait en dessous.
+ *
+ * Elle se montre au survol et au focus de l'enveloppe (.zv-tooltip-hit),
+ * avec un retard de 300 ms à l'APPARITION seulement — sans lui, traverser
+ * une rangée d'icônes fait clignoter une infobulle par icône. La
+ * disparition, elle, est immédiate.
+ *
+ * Le masquage est `visibility` ET opacité, à dessein (WCAG 1.4.13) :
+ *   · cachée en visibility:hidden, la bulle ne capte pas le pointeur — pas
+ *     de zone de survol fantôme au-dessus de chaque cible ;
+ *   · visible, elle EST survolable : descendante de l'enveloppe, le
+ *     pointeur peut la traverser sans la fermer ;
+ *   · Échap la ferme — la façade pose --off jusqu'au blur, seul
+ *     comportement qui demande une ligne de script.
+ *
+ * ⚠️ Réservée à un COMPLÉMENT dispensable (un raccourci, une date exacte,
+ * une unité) : une commande n'a pas le droit de cacher son nom dans une
+ * infobulle, et le tactile ne survole pas. L'annonce passe par
+ * aria-describedby, que la façade React câble. */
+
+.zv-tooltip-hit {
+  position: relative;
+  display: inline-flex;
+}
+
+.zv-tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  /* La couche du menu (navigation.css) : une infobulle flotte au même
+   * étage que lui et ne le croise jamais. */
+  z-index: 60;
+  width: max-content;
+  max-width: 240px;
+  border: 1px solid var(--line);
+  background: var(--white);
+  box-shadow: var(--shadow-menu);
+  padding: 6px 10px;
+  font-size: var(--app-sm);
+  line-height: 1.5;
+  font-weight: 500;
+  color: var(--ink-2);
+  text-align: left;
+  opacity: 0;
+  visibility: hidden;
+  /* La visibilité bascule APRÈS le fondu de sortie, jamais pendant. */
+  transition:
+    opacity 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    visibility 0s linear 140ms;
+}
+
+.zv-tooltip-hit:hover > .zv-tooltip,
+.zv-tooltip-hit:focus-within > .zv-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 300ms, 300ms;
+}
+
+/* Fermée à Échap : posée par la façade, levée au blur ou à la sortie du
+ * pointeur. Déclarée APRÈS l'ouverture pour l'emporter à spécificité
+ * égale. */
+.zv-tooltip-hit--off > .zv-tooltip {
+  opacity: 0;
+  visibility: hidden;
+  transition-delay: 0s, 0s;
+}
+
+/* Sous la cible, pour les rares cas où le haut est occupé (première ligne
+ * d'un tableau sous son en-tête). */
+.zv-tooltip--bas {
+  bottom: auto;
+  top: calc(100% + 6px);
+}
 
 /* ─── Mobile ────────────────────────────────────────────────────────────
  * Un seul point de rupture, 768px, comme dans tous les modules du paquet.
@@ -555,6 +706,14 @@
     min-width: 0;
   }
 
+  /* Même garde-fou que le menu et le popover : plafonnée à l'écran, la
+   * bulle ne pousse jamais la page en défilement horizontal. Le centrage
+   * sur une cible collée au bord peut encore la décaler — limite connue,
+   * une variante d'ancrage latéral s'arbitrera si le cas se présente. */
+  .zv-tooltip {
+    max-width: calc(100vw - 40px);
+  }
+
   /* ⚠️ NON RELEVÉ : aucune variante `lg:` sur le padding de l'écran vide.
    * Ce resserrement est une décision de portage, prise parce que 32px de
    * gouttière sur 375px laissent 311px de contenu à un bloc qui porte un

package/src/forms.css

@@ -1,5 +1,7 @@
 /* Zevra UI — formulaires : champ, recherche, zone de texte, sélection,
- * case/radio, interrupteur, puces de filtre, zone de dépôt.
+ * case/radio, interrupteur, puces de filtre, zone de dépôt — et, depuis le
+ * 25/08/2026 (hors relevé, voir DECISIONS.md) : le champ à affixe et le
+ * curseur.
  *
  * DÉPEND de tokens.css (toutes les valeurs) et de base.css (reset
  * box-sizing, anneau :focus-visible). RIEN D'AUTRE : ce module ne lit ni
@@ -258,6 +260,61 @@
   color: var(--label);
 }
 
+/* ─── Champ à affixe ────────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). « 30 », seul dans un champ,
+ * ne dit pas s'il s'agit de jours ou d'euros. La grammaire est celle de
+ * .zv-search — le seul cadre-à-champ-nu du relevé : cadre --line, champ nu
+ * dedans, allumage :focus-within identique. L'affixe est en mono --label,
+ * comme les libellés de déclencheur : une unité est un libellé, pas une
+ * donnée. */
+
+.zv-affix {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  border: 1px solid var(--line);
+  background: var(--white);
+  padding-inline: 12px;
+  transition:
+    border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    box-shadow 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-affix:hover {
+  border-color: var(--accent-line);
+}
+
+/* Même prise de focus que le cadre de recherche : filet --accent plein,
+ * halo --accent-soft — et l'anneau du champ intérieur est remplacé par le
+ * cadre, pour la souris comme pour le clavier. */
+.zv-affix:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.zv-affix .zv-input--bare {
+  /* Le champ d'un formulaire, pas le composeur : il reprend le corps et le
+   * rythme vertical de .zv-input. */
+  font-size: var(--app);
+  padding-block: 9px;
+}
+
+.zv-affix .zv-input--bare:focus-visible {
+  outline: none;
+}
+
+.zv-affix__add {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--label);
+}
+
 /* ─── Zone de texte ─────────────────────────────────────────────────────
  * DÉCISION, PAS UN RELEVÉ : il n'existe AUCUN <textarea> dans l'application,
  * sur aucun des huit écrans ouverts. Le composeur du chat est un <input> où
@@ -570,6 +627,79 @@
   color: var(--accent);
 }
 
+/* ─── Curseur ───────────────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Aucune source ; dérivé de
+ * l'interrupteur redessiné : bouton CARRÉ de 14 px (la taille exacte du
+ * bouton du switch), --accent, --accent-deep au survol. La piste fait 3 px
+ * — la hauteur de .zv-progress — en --line, remplie en --accent jusqu'au
+ * curseur. PAS le spectre : la barre de progression est l'un des trois
+ * emplois autorisés, le curseur n'en est pas un.
+ *
+ * Le remplissage est peint par le FOND de l'input (un dégradé à arrêt
+ * franc), position portée par --zv-range-pos que la façade React calcule —
+ * une géométrie, comme la largeur de Progress, pas une valeur de charte.
+ * Sans elle, la piste s'affiche remplie à moitié : poser la variable, ou
+ * assumer le repli. Le bouton, lui, passe par les pseudo-éléments de
+ * chaque moteur — c'est le seul contrôle du paquet qui l'exige. */
+
+.zv-range {
+  --zv-range-pos: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: linear-gradient(90deg, var(--accent) var(--zv-range-pos), var(--line) 0);
+  background-repeat: no-repeat;
+  background-size: 100% 3px;
+  background-position: 0 center;
+  cursor: pointer;
+}
+
+.zv-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 0;
+  border-radius: 0;
+  background: var(--accent);
+  transition: background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: 0;
+  border-radius: 0;
+  background: var(--accent);
+}
+
+.zv-range:hover::-webkit-slider-thumb {
+  background: var(--accent-deep);
+}
+
+.zv-range:hover::-moz-range-thumb {
+  background: var(--accent-deep);
+}
+
+.zv-range[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.zv-range[disabled]:hover::-webkit-slider-thumb {
+  background: var(--accent);
+}
+
+.zv-range[disabled]:hover::-moz-range-thumb {
+  background: var(--accent);
+}
+
 /* ─── Puces de filtre ───────────────────────────────────────────────────
  * Le seul mécanisme de filtrage de l'application (bibliotheque-client.tsx:
  * 143-180, repertoire-client.tsx:79-94, logs-client.tsx:193-207).
@@ -912,6 +1042,12 @@
     padding-block: 12px;
   }
 
+  /* La piste ne bouge pas (le fond reste centré) : seule la boîte grandit
+   * pour faire une cible tactile. */
+  .zv-range {
+    height: var(--tap);
+  }
+
   .zv-drop {
     padding: 32px 16px;
   }

package/src/layout.css

@@ -167,6 +167,36 @@
   font-size: 17px;
 }
 
+/* ─── Bandeau d'annonce ─────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). La bande AU-DESSUS de la
+ * barre de navigation : annonce de version, information réglementaire. Le
+ * ton information de l'alerte (--accent-soft sur --accent-line), en pleine
+ * largeur. UN SEUL par page, et jamais pour du marketing permanent : un
+ * bandeau qui ne part pas devient un bourrelet de chrome. */
+
+.zv-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--accent-line);
+  background: var(--accent-soft);
+  padding: 9px 20px;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: center;
+  color: var(--accent);
+}
+
+/* Le lien du bandeau se souligne : sur un fond déjà indigo, la couleur
+ * seule ne suffit plus à le distinguer du texte. */
+.zv-banner a {
+  color: var(--accent-deep);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
 /* ─── Chrome : navigation ───────────────────────────────────────────────*/
 
 .zv-nav {
@@ -433,6 +463,39 @@
   opacity: 0.72;
 }
 
+/* ─── Carrousel ─────────────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Défilement natif
+ * scroll-snap, AUCUN JavaScript : pas de flèches (elles exigeraient un
+ * script et un arbitrage de dessin), pas de points. Le clavier passe par le
+ * focus du conteneur, que la façade rend focalisable.
+ *
+ * La barre de défilement tombe — le rail visible transformerait la vitrine
+ * en fenêtre d'application. C'est un MASQUAGE, pas l'habillage que
+ * navigation.css refuse : aucune dimension inventée.
+ *
+ * ⚠️ Un carrousel reste un aveu d'espace : la règle de variété lui préfère
+ * une grille tant que le contenu tient. La largeur des éléments vient du
+ * consommateur — un carrousel qui la fixerait déciderait de la mise en page
+ * à la place de la grille. */
+
+.zv-carousel {
+  display: flex;
+  gap: 24px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.zv-carousel::-webkit-scrollbar {
+  display: none;
+}
+
+.zv-carousel__item {
+  flex: none;
+  min-width: 0;
+  scroll-snap-align: start;
+}
+
 /* ─── Pied de page réduit ───────────────────────────────────────────────
  * Pages secondaires. Le pied complet à quatre colonnes reste réservé à la
  * page d'accueil. */
@@ -507,6 +570,15 @@
     margin-right: 20px;
   }
 
+  .zv-banner {
+    padding: 8px 16px;
+    font-size: 12px;
+  }
+
+  .zv-carousel {
+    gap: 16px;
+  }
+
   .zv-grid-12,
   .zv-grid-3,
   .zv-section-head,