@zevra/ui 0.56.0 → 0.57.0

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,50 @@
   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 {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  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 > .zv-seg {
+  margin: -1px;
+  border-color: transparent;
+  background: transparent;
+  color: var(--ink-2);
+}
+
+.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: var(--line);
+  background: var(--white);
+  box-shadow: var(--shadow-card);
+  color: var(--ink);
+}
+
 .zv-seg {
   border: 1px solid var(--line);
   border-radius: var(--r-btn);