@zevra/ui 0.30.0 → 0.31.0

package/react/data.tsx

@@ -32,14 +32,28 @@ export interface TableProps extends Div {
   /** Gabarit de colonnes, en syntaxe `grid-template-columns`
    *  (ex. `'minmax(0,2fr) 120px 90px'`). Hérité par l'en-tête et les lignes. */
   gabarit?: string
+  /** Tableau de PROSE : les cellules reviennent à la ligne au lieu de
+   *  tronquer, et les colonnes s'alignent en haut.
+   *
+   *  ⚠️ À employer dès qu'une cellule porte une phrase plutôt qu'une donnée —
+   *  une clause de contrat, un fondement juridique, une garantie de
+   *  transfert. Tronquer une clause ne la raccourcit pas, ça la CACHE, et le
+   *  lecteur n'a aucun moyen de savoir qu'il manque quelque chose. Le défaut
+   *  (troncature) reste le bon choix pour une ligne de données, qui se balaye
+   *  du regard et dont les colonnes ne doivent pas danser. */
+  prose?: boolean
   className?: string
 }
 
 /** Le tableau défile DANS son cadre : sans ce confinement, une colonne trop
  *  large fait défiler la page entière et le rail de navigation part avec. */
-export function Table({ gabarit, className, style, ...reste }: TableProps) {
+export function Table({ gabarit, prose, className, style, ...reste }: TableProps) {
   return (
-    <div className={cx('zv-table', className)} style={cols(gabarit, style)} {...reste} />
+    <div
+      className={cx('zv-table', prose && 'zv-table--prose', className)}
+      style={cols(gabarit, style)}
+      {...reste}
+    />
   )
 }
 

package/src/data.css

@@ -100,6 +100,50 @@
   color: var(--label);
 }
 
+/* ─── Tableau de PROSE ─────────────────────────────────────────────────
+ * .zv-table tronque à l'ellipse, et c'est juste : une ligne de données se
+ * balaye du regard, une colonne qui danse en largeur est illisible.
+ *
+ * Mais tous les tableaux ne portent pas des données. Un contrat en porte qui
+ * contiennent des CLAUSES — durées de conservation et leur fondement, sous-
+ * traitants et leurs garanties de transfert. Là, tronquer ne « raccourcit »
+ * pas : ça CACHE le texte, et cacher une clause dans un document contractuel
+ * n'est pas un défaut d'affichage.
+ *
+ * D'où cette variante, et pas un `className` posé par l'app : le CSS du
+ * paquet est hors couche, il bat toute règle layered quelle que soit la
+ * spécificité — une app Tailwind qui poserait `whitespace-normal` sur une
+ * cellule n'obtiendrait RIEN, en silence. La règle du dépôt est que ce qui
+ * doit s'ajuster s'expose en variante ; la voici.
+ *
+ * (Relevé par la mise en page des documents légaux, 28/08/2026.) */
+
+.zv-table--prose .zv-cell {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  /* La prose se lit sur plusieurs lignes : il lui faut l'interligne du corps
+   * de texte, pas celui d'une cellule d'une ligne. */
+  line-height: 1.55;
+  /* Un terme long (une référence d'article, une URL de sous-traitant) ne doit
+   * pas élargir la colonne au-delà de sa piste. */
+  overflow-wrap: anywhere;
+}
+
+/* Les lignes cessent de centrer : à hauteurs inégales, une cellule d'une
+ * ligne flotterait au milieu d'une cellule de quatre. Elles s'alignent en
+ * haut, comme des paragraphes côte à côte. */
+.zv-table--prose .zv-row,
+.zv-table--prose .zv-table__head {
+  align-items: start;
+}
+
+/* Et elles respirent : 10px conviennent à une ligne, pas à un paragraphe. */
+.zv-table--prose .zv-row {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
 /* En-tête d'un tableau posé DANS une carte : la carte porte déjà son filet,
  * un second trait au-dessus ferait doublon. */
 .zv-table__head--inset {