@zevra/ui 0.56.0 → 0.57.1

package/react/forms.tsx

@@ -275,13 +275,18 @@ export interface SegGroupProps
   /** Rangée qui défile au lieu de passer à la ligne. À poser explicitement :
    *  par défaut les puces s'enroulent. */
   rail?: boolean
+  /** Sélecteur SEGMENTÉ : un rail qui contient deux à quatre choix
+   *  exclusifs, le choix courant posé en relief dessus (« Recherche globale
+   *  | Recherche textuelle »). Pour un MODE, jamais pour filtrer une
+   *  collection : là, ce sont les puces. Une seule rangée, sans compte. */
+  segmente?: boolean
   className?: string
 }
 
-export function SegGroup({ rail, className, ...reste }: SegGroupProps) {
+export function SegGroup({ rail, segmente, className, ...reste }: SegGroupProps) {
   return (
     <div
-      className={cx('zv-seg-group', rail && 'zv-seg-group--rail', className)}
+      className={cx('zv-seg-group', rail && 'zv-seg-group--rail', segmente && 'zv-seg-group--segmente', className)}
       {...reste}
     />
   )

package/src/forms.css

@@ -840,6 +840,90 @@
   overflow-x: auto;
 }
 
+/* Sélecteur SEGMENTÉ (DECISIONS, 12/11/2026, 0.57.0). HORS RELEVÉ : aucune
+ * planche ne le porte. Demandé par Tésope pour la palette de recherche
+ * (« Recherche globale | Recherche textuelle »), sur le modèle du sélecteur
+ * « Conversation | Cowork » de Claude : UN rail qui contient les choix, le
+ * choix courant posé en RELIEF dessus. Un mode, pas un filtre : la puce
+ * reste le seul mécanisme de filtrage.
+ * Dérivé : le rail est un aplat de --hairline cerné de --line (la surface
+ * en retrait du système), le choix courant le papier blanc et l'ombre de
+ * carte (ce qui est posé dessus). Le choix courant reste à l'ENCRE et non à
+ * 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 {
+  /* 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);
+}
+
+.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 {
+  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 {
+  color: var(--ink);
+}
+
+.zv-seg-group--segmente > .zv-seg--on,
+.zv-seg-group--segmente > .zv-seg[aria-pressed="true"] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ink);
+}
+
 .zv-seg {
   border: 1px solid var(--line);
   border-radius: var(--r-btn);