@zevra/ui 0.47.0 → 0.48.0

package/react/icon.tsx

@@ -57,6 +57,9 @@ export interface IconButtonProps
    *  L'écrire pour l'ACTION (« Fermer le panneau ») et non pour le dessin
    *  (« Croix ») : c'est ce que le lecteur d'écran annonce. */
   label: string
+  /** Geste DESTRUCTIF (la corbeille d'une ligne) : grise au repos, rouge
+   *  sur fond pâle au survol, comme `variante="fantome-danger"`. */
+  danger?: boolean
   taille?: IconProps['taille']
   /** `arrondis` (option) ou `vifs` (défaut de la charte). Sans valeur, le
    *  composant suit son conteneur : voir `Angles`. */
@@ -68,6 +71,7 @@ export interface IconButtonProps
 export function IconButton({
   icone,
   label,
+  danger,
   taille = 'lg',
   angles,
   className,
@@ -79,7 +83,7 @@ export function IconButton({
     <button
       type={type}
       aria-label={label}
-      className={cx('zv-icon-btn', classeAngles(angles), className)}
+      className={cx('zv-icon-btn', danger && 'zv-icon-btn--danger', classeAngles(angles), className)}
       {...reste}
     >
       {icone ? <Icon nom={icone} taille={taille} /> : children}

package/src/icons.css

@@ -81,6 +81,17 @@
   color: var(--ink);
 }
 
+/* L'icône qui DÉTRUIT (27/10/2026, 0.48.0, HORS RELEVÉ, voir DECISIONS.md) :
+ * la corbeille d'une ligne. Grise au repos comme les autres ; au survol,
+ * l'encre --err sur le fond --err-soft, les teintes du fantôme destructif
+ * (`fantome-danger`). Pas d'aplat : une rangée de corbeilles rouges
+ * pleines crierait sur toute la liste. Le désactivé, déclaré plus bas à
+ * spécificité supérieure, l'emporte. */
+.zv-icon-btn--danger:hover {
+  background: var(--err-soft);
+  color: var(--err);
+}
+
 /* Désactivé. C'était la SEULE classe interactive du module sans cet état :
  * .zv-btn, .zv-chrome-btn, .zv-menu__item, .zv-pager__arrow, .zv-range et
  * les champs en ont tous un. Sans lui, un bouton fermé se rendait comme un