@zevra/ui 0.46.1 → 0.47.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/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. */