@zevra/ui 0.57.0 → 0.57.1

package/src/forms.css

@@ -852,24 +852,65 @@
  * l'accent : le relief dit déjà l'état, un second signal ferait un bouton
  * plein de plus. Les rayons suivent --r-btn, donc `zv-arrondi`. */
 .zv-seg-group--segmente {
-  display: inline-flex;
-  flex-wrap: nowrap;
+  /* Le nombre de choix et le rang du choix courant, lus dans le balisage
+   * par :has() plus bas : l'indicateur s'en sert pour sa largeur et sa
+   * position. Deux à quatre choix. */
+  --zv-segments: 2;
+  --zv-segment: 0;
+  position: relative;
+  isolation: isolate;
+  /* Colonnes ÉGALES : c'est ce qui permet à un seul indicateur de glisser
+   * d'un choix à l'autre par un simple décalage. Chaque choix prend la
+   * largeur du plus long, comme tout sélecteur segmenté. */
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  /* Sans écart : celui des puces (6px) décalerait chaque colonne par
+   * rapport à l'indicateur, qui avance d'une colonne pleine. */
   gap: 0;
   border: 1px solid var(--line);
   border-radius: var(--r-btn);
   background: var(--hairline);
 }
 
-/* Bord à bord : le rail n'a pas de marge intérieure, et chaque choix
- * déborde d'un pixel sur son filet. Le choix courant occupe donc toute la
- * hauteur du rail et son filet se pose EXACTEMENT sur celui du rail, sans
- * couture ni double trait (demande de Joachim, 12/11/2026 : un écart entre
- * le bord et la pastille la faisait flotter). */
+.zv-seg-group--segmente:has(> .zv-seg:nth-child(3)) { --zv-segments: 3; }
+.zv-seg-group--segmente:has(> .zv-seg:nth-child(4)) { --zv-segments: 4; }
+.zv-seg-group--segmente:has(> .zv-seg:nth-child(2)[aria-pressed="true"], > .zv-seg--on:nth-child(2)) { --zv-segment: 1; }
+.zv-seg-group--segmente:has(> .zv-seg:nth-child(3)[aria-pressed="true"], > .zv-seg--on:nth-child(3)) { --zv-segment: 2; }
+.zv-seg-group--segmente:has(> .zv-seg:nth-child(4)[aria-pressed="true"], > .zv-seg--on:nth-child(4)) { --zv-segment: 3; }
+
+/* L'indicateur : UNE pastille, sous les libellés, qui GLISSE vers le
+ * choix courant (demande de Joachim, 12/11/2026 : un relief qui saute d'un
+ * bouton à l'autre ne dit pas qu'on a basculé). Bord à bord : elle déborde
+ * d'un pixel sur le filet du rail, de chaque côté, et se pose exactement
+ * dessus. Sa largeur vaut une colonne plus ces deux pixels ; décalée de
+ * (100 % - 2px) par rang, elle avance donc d'une colonne exactement.
+ * La courbe maison ; coupée par prefers-reduced-motion (base.css), où
+ * l'état final reste lisible sans. */
+.zv-seg-group--segmente::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: -1px;
+  bottom: -1px;
+  left: -1px;
+  width: calc(100% / var(--zv-segments) + 2px);
+  border: 1px solid var(--line);
+  border-radius: var(--r-btn);
+  background: var(--white);
+  box-shadow: var(--shadow-card);
+  transform: translateX(calc(var(--zv-segment) * (100% - 2px)));
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+/* Les choix ne peignent rien : c'est l'indicateur qui porte le relief.
+ * Le libellé du choix courant passe à l'encre (graisse 600 de la puce). */
 .zv-seg-group--segmente > .zv-seg {
-  margin: -1px;
+  justify-content: center;
   border-color: transparent;
   background: transparent;
   color: var(--ink-2);
+  transition: color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 .zv-seg-group--segmente > .zv-seg:hover {
@@ -878,9 +919,8 @@
 
 .zv-seg-group--segmente > .zv-seg--on,
 .zv-seg-group--segmente > .zv-seg[aria-pressed="true"] {
-  border-color: var(--line);
-  background: var(--white);
-  box-shadow: var(--shadow-card);
+  border-color: transparent;
+  background: transparent;
   color: var(--ink);
 }