@zevra/ui 0.55.2 → 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/react/icon.tsx

@@ -99,15 +99,21 @@ export interface IconTileProps
   /** Titre accessible. Sans lui la tuile est DÉCORATIVE, le bon défaut :
    *  elle accompagne un libellé qui la nomme déjà. */
   titre?: string
+  /**
+   * Tuile d'un MODULE parmi des tuiles de marque (Marketplace) : papier blanc
+   * sans filet, icône à l'encre accent à la taille d'un logo. Hors d'une
+   * grille de marques, garder la tuile indigo pâle par défaut.
+   */
+  module?: boolean
   className?: string
 }
 
 /** La pastille carrée qui porte une icône devant un argument de la vitrine
  *  (liste de garanties, grille d'atouts). UNE par argument, jamais en décor
  *  isolé : une tuile sans libellé voisin est un rébus. */
-export function IconTile({ nom, titre, className, ...reste }: IconTileProps) {
+export function IconTile({ nom, titre, module, className, ...reste }: IconTileProps) {
   return (
-    <span className={cx('zv-icon-tile', className)} {...reste}>
+    <span className={cx('zv-icon-tile', module && 'zv-icon-tile--module', className)} {...reste}>
       <Icon nom={nom} titre={titre} />
     </span>
   )

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);

package/src/icons.css

@@ -162,6 +162,23 @@
   object-fit: contain;
 }
 
+/* La tuile d'un MODULE (DECISIONS, « La tuile de module », 09/11/2026).
+ * HORS RELEVÉ. Dans une grille de marques (la Marketplace de Tésope), un
+ * module maison n'a pas de logo : la tuile d'icône indigo pâle y rompait
+ * l'alignement des tuiles blanches. Même papier blanc sans filet que la tuile
+ * de service, l'icône tracée à l'encre accent, à 60 % comme un logo : la
+ * grille reste homogène, et rien n'imite une marque. */
+.zv-icon-tile--module {
+  border-color: transparent;
+  background: var(--white);
+  color: var(--accent);
+}
+
+.zv-icon-tile--module .zv-icon {
+  width: 60%;
+  height: 60%;
+}
+
 /* À fond plein, la marque couvre toute la tuile : pas de papier blanc
  * dessous, qui pointerait aux coins sous l'option arrondie. */
 .zv-icon-tile--logo-plein {