@zevra/ui 0.5.0 → 0.7.0

package/src/forms.css

@@ -183,6 +183,15 @@
   border: 1px solid var(--line);
   background: var(--white);
   padding-inline: 13px;
+  /* La prise de focus s'ANIME (25/08) : sans transition, le cadre sautait
+   * d'un état à l'autre et le retour se lisait comme un défaut de rendu. */
+  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-search:hover {
+  border-color: var(--accent-line);
 }
 
 /* DÉRIVÉ : la bordure de focus relevée sur .zv-input, portée par le cadre.
@@ -196,16 +205,42 @@
  *   · supprimer ce filet priverait la souris de tout retour, alors que le
  *     relevé lui en donne un sur les champs bordés.
  * La redondance coûte moins cher que l'une ou l'autre perte. */
+/* ⚠️ REPRIS le 25/08/2026 — la DA jugeait la prise de focus « boff ». Elle
+ * l'était : le cadre passait à --accent-line, un filet si pâle qu'à côté de
+ * l'anneau du champ intérieur il ne se voyait pas. Trois corrections :
+ *   · le filet passe à --accent PLEIN, pas à sa version diluée ;
+ *   · un halo --accent-soft de 3px double le trait — c'est lui qui rend le
+ *     retour visible du coin de l'œil, sans déplacer un pixel de la mise en
+ *     page (box-shadow ne prend pas de place) ;
+ *   · la loupe s'allume avec le cadre : elle cesse d'être une invite grise
+ *     pour devenir la marque du champ actif.
+ *
+ * L'anneau :focus-visible du champ INTÉRIEUR est neutralisé ici, et
+ * seulement ici : le cadre le remplace, et il le remplace pour la souris
+ * comme pour le clavier. C'est ce qui lève la double marque assumée jusque-là
+ * — un seul objet à l'écran, un seul retour. Le champ nu reste parfaitement
+ * repérable au clavier, puisque c'est le cadre entier qui s'allume. */
 .zv-search:focus-within {
-  border-color: var(--accent-line);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.zv-search:focus-within .zv-search__icon {
+  stroke: var(--accent);
+}
+
+.zv-search__input:focus-visible {
+  outline: none;
 }
 
 .zv-search__icon {
   flex: none;
   width: 13px;
   height: 13px;
-  /* Même gris que le placeholder : la loupe est une invite, pas une donnée. */
+  /* Même gris que le placeholder : la loupe est une invite, pas une donnée.
+   * Elle s'allume avec le cadre — voir :focus-within plus bas. */
   stroke: var(--label);
+  transition: stroke 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 .zv-search__input {
@@ -279,6 +314,63 @@
   max-width: 100%;
 }
 
+/* Ancre pleine largeur : le cas d'un CHAMP de formulaire, où la liste doit
+ * tomber exactement sous le contrôle et faire la même largeur que lui. La
+ * variante en ligne ci-dessus reste celle des filtres, où le déclencheur se
+ * dimensionne sur son libellé. */
+.zv-select-anchor--block {
+  display: block;
+  width: 100%;
+}
+
+.zv-select-anchor--block .zv-menu {
+  width: 100%;
+  min-width: 0;
+}
+
+/* ─── Déclencheur de sélection DESSINÉE ─────────────────────────────────
+ * ⚠️ AJOUTÉ le 25/08/2026 : « le select, faut le designer jusque dans
+ * l'affichage de la liste » (DA, sur pièces).
+ *
+ * Le <select> natif (.zv-input--select) reste dans le paquet et garde son
+ * usage — mais il ne peut PAS être habillé : la 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,
+ * c'est une limite du contrôle.
+ *
+ * D'où ce déclencheur, qui a l'apparence exacte d'un champ et ouvre le
+ * .zv-menu du paquet. Ce qu'il COÛTE, et qu'il faut assumer en le
+ * choisissant : le clavier, l'annonce et la liste native sont à réimplémenter
+ * — c'est fait dans le composant React (SelectMenu), pas dans ce fichier.
+ * Un gabarit qui pose ces classes à la main sans ce travail livre un select
+ * inutilisable au clavier. Dans ce cas, prendre le natif. */
+.zv-input--trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  text-align: left;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-input--trigger:hover {
+  border-color: var(--accent-line);
+}
+
+/* Ouvert, le déclencheur reste marqué : sans cela, la liste flotte au-dessus
+ * d'un champ qui a l'air au repos, et on ne sait plus lequel elle sert. */
+.zv-input--trigger[aria-expanded='true'] {
+  border-color: var(--accent);
+}
+
+/* Le placeholder d'un déclencheur est du texte, pas un ::placeholder : il
+ * lui faut donc sa propre teinte, celle du champ vide. */
+.zv-input--trigger[data-vide='oui'] {
+  color: var(--label);
+}
+
 .zv-select {
   display: inline-flex;
   align-items: center;
@@ -384,37 +476,70 @@
  * elle est portée par l'aplat plein et par le libellé accolé, pas par cette
  * nuance-là. */
 
+/* ⚠️ REDESSINÉ le 25/08/2026 — la DA a tranché « switch horrible » sur
+ * pièces, et elle avait raison sur trois points :
+ *   · 28×16 avec un bouton rond de 12, c'est un jouet posé au milieu de
+ *     contrôles carrés de 16px de haut ; la ligne de réglage n'avait aucune
+ *     unité ;
+ *   · la piste éteinte était --accent-line, un indigo très pâle : éteint et
+ *     allumé se distinguaient par la SATURATION d'une même teinte, ce qui
+ *     tombe au premier écran mal calibré et disparaît en daltonisme ;
+ *   · le bouton rond contredisait l'arbitrage « carré » du même jour.
+ * La piste passe donc à 36×20, à angle vif, avec un filet qui la pose comme
+ * les champs voisins ; éteint elle est BLANCHE au filet gris, allumée elle
+ * est un aplat indigo plein. L'écart n'est plus une nuance, c'est un
+ * contraste. */
 .zv-switch {
   position: relative;
   display: inline-block;
-  width: 28px;
-  height: 16px;
+  width: 36px;
+  height: 20px;
   flex: none;
-  background: var(--accent-line);
+  border: 1px solid var(--line);
+  background: var(--white);
   /* La courbe est celle du paquet (motion.css, `--zv-easing`), recopiée en
    * clair : forms.css ne dépend pas de motion.css et n'a pas à en dépendre
    * pour une transition de couleur. Ce n'est PAS `ease` — le défaut d'un
    * framework tiers n'a rien à faire dans le système. */
-  transition: background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  transition:
+    background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    border-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-switch-hit:hover .zv-switch {
+  border-color: var(--accent-line);
 }
 
 .zv-switch--on {
+  border-color: var(--accent);
   background: var(--accent);
 }
 
+.zv-switch-hit:hover .zv-switch--on {
+  border-color: var(--accent-deep);
+  background: var(--accent-deep);
+}
+
+/* Bouton CARRÉ : le rond ici n'est pas une forme porteuse de sens (ce que
+ * sont la pastille d'état ou le radio), c'était un style — il tombe avec les
+ * autres rayons. Éteint il est gris comme un contrôle inactif, allumé il
+ * passe en blanc sur l'aplat indigo. */
 .zv-switch__knob {
   position: absolute;
   inset-block-start: 2px;
   inset-inline-start: 2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 9999px;
-  background: var(--white);
-  transition: inset-inline-start 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  width: 14px;
+  height: 14px;
+  border-radius: 0;
+  background: var(--label);
+  transition:
+    inset-inline-start 150ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 .zv-switch--on .zv-switch__knob {
-  inset-inline-start: 14px;
+  inset-inline-start: 18px;
+  background: var(--white);
 }
 
 /* Cible tactile portée par une enveloppe : agrandir la piste elle-même

package/src/layout.css

@@ -61,7 +61,9 @@
 
 .zv-col-3 { grid-column: span 3; }
 .zv-col-4 { grid-column: span 4; }
+.zv-col-5 { grid-column: span 5; }
 .zv-col-6 { grid-column: span 6; }
+.zv-col-7 { grid-column: span 7; }
 .zv-col-8 { grid-column: span 8; }
 .zv-col-9 { grid-column: span 9; }
 
@@ -520,7 +522,9 @@
 
   .zv-col-3,
   .zv-col-4,
+  .zv-col-5,
   .zv-col-6,
+  .zv-col-7,
   .zv-col-8,
   .zv-col-9,
   .zv-section-head__main,

package/src/navigation.css

@@ -429,6 +429,15 @@
   background: var(--hairline);
 }
 
+/* ⚠️ Option SURVOLÉE AU CLAVIER — ajoutée le 25/08/2026 avec la sélection
+ * dessinée. Ce n'est ni :hover (la souris n'est pas dessus) ni :focus (le
+ * focus reste sur le déclencheur, c'est aria-activedescendant qui porte
+ * l'annonce). Sans cette classe, parcourir la liste aux flèches ne se voit
+ * pas : le lecteur d'écran suit, l'œil non. */
+.zv-menu__item--survol {
+  background: var(--hairline);
+}
+
 .zv-menu__item:focus-visible {
   outline-offset: -2px;
 }

package/src/tokens.css

@@ -74,11 +74,27 @@
   --lead: 18px;
   --body: 15px;
 
-  /* Rayons */
-  --r-btn: 5px;
-  --r-pill: 3px;
-  --r-panel: 10px;
-  --r-card: 16px;
+  /* 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
+   * 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
+   * 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
+   * écrivent leur `border-radius` en clair, sans passer par un token. */
+  --r-btn: 0;
+  --r-pill: 0;
+  --r-panel: 0;
+  --r-card: 0;
 
   /* Ombres */
   --shadow-card: 0 2px 10px rgba(11, 16, 32, 0.05);

package/tokens/index.js

@@ -99,11 +99,17 @@ export const mesures = {
   specFilet: '56px',
 }
 
+/** 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 —
+ *  ne passe pas par ici : il porte du sens, pas du style. */
 export const rayons = {
-  btn: '5px',
-  pill: '3px',
-  panel: '10px',
-  card: '16px',
+  btn: '0',
+  pill: '0',
+  panel: '0',
+  card: '0',
 }
 
 export const ombres = {