@zevra/ui 0.46.1 → 0.48.0

package/react/grille.tsx

@@ -300,6 +300,11 @@ export interface DataGridProps<T> {
   /** La grille REMPLIT son parent (colonne flex à hauteur bornée) : seules
    *  les lignes défilent, la barre, les intitulés et les filtres restent. */
   remplir?: boolean
+  /** Posée À BORD d'une carte sans retrait (`Card padding="aucun"`) : la
+   *  barre d'outils et la pagination prennent le retrait de la carte, le
+   *  tableau court d'un bord à l'autre sans second cadre. Sans elle, la
+   *  recherche et les cases touchent la bordure. */
+  encadree?: boolean
   /** Sous les lignes, dans la zone qui défile : le déclencheur d'une liste
    *  infinie, qui charge la suite en entrant dans l'écran. */
   apresLignes?: ReactNode
@@ -1310,6 +1315,7 @@ export function DataGrid<T>({
   pied,
   dense,
   remplir,
+  encadree,
   apresLignes,
   envelopperTableau,
   barre = true,
@@ -1700,7 +1706,7 @@ export function DataGrid<T>({
   )
 
   return (
-    <div className={cx('zv-grille', remplir && 'zv-grille--remplir', className)}>
+    <div className={cx('zv-grille', remplir && 'zv-grille--remplir', encadree && 'zv-grille--encadree', className)}>
       {barre && (
         <div className="zv-grille__outils">
           {champRecherche ??

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/data.css

@@ -1442,6 +1442,34 @@
   gap: 14px;
 }
 
+/* La grille À BORD d'une carte sans retrait (27/10/2026, HORS RELEVÉ, voir
+ * DECISIONS.md). La barre et la pagination reprennent le retrait d'en-tête
+ * de carte (12 / 16 px, celui des écrans de gestion) ; le tableau court d'un
+ * bord à l'autre et rend son cadre à la carte : deux bordures accolées
+ * faisaient un trait double, et le rayon d'un cadre intérieur ne suit pas
+ * celui de la carte. Le filet du haut reste : il sépare la barre des
+ * intitulés. */
+.zv-grille--encadree {
+  gap: 0;
+}
+
+.zv-grille--encadree > .zv-grille__outils {
+  padding: 12px 16px;
+}
+
+/* Les coins du BAS suivent ceux de la carte, moins sa bordure : carrés, le
+ * fond blanc du tableau débordait sur l'arrondi et en masquait le filet.
+ * `max` : sous l'angle vif, le rayon de carte vaut 0 et le calcul serait
+ * négatif. */
+.zv-grille--encadree .zv-table {
+  border-width: 1px 0 0;
+  border-radius: 0 0 max(0px, calc(var(--r-card) - 1px)) max(0px, calc(var(--r-card) - 1px));
+}
+
+.zv-grille--encadree > .zv-pager {
+  padding: 12px 16px;
+}
+
 @media (max-width: 767px) {
   /* En cartes, l'épinglage, les poignées et la largeur minimale n'ont plus
    * de sens : la carte prend la largeur de l'écran. */

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