@zevra/ui 0.29.1 → 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 {

package/src/layout.css

@@ -440,8 +440,21 @@
    * les entrées de nav posées sur ses lettres. Deux textes superposés, aucun
    * lisible. Signalé en recette sur mcp-factory.
    * Le dégradé n'est pas perdu : il vit sous la barre, là où il adoucit le
-   * passage sans se disputer la place avec la navigation. */
-  background: color-mix(in srgb, var(--paper) 92%, transparent);
+   * passage sans se disputer la place avec la navigation.
+   *
+   * L'OPACITÉ, elle, est retombée de 92 à 72 %. À 92 la barre était un
+   * bandeau blanc : ce qui passait dessous n'était plus qu'un fantôme, et
+   * le flou ne servait à rien puisqu'il n'y avait rien à voir au travers.
+   * C'est du verre qu'on veut, pas un cache — le rendu de
+   * landing.zevra.tech, qui fait toujours référence. À 72 avec un flou de
+   * 14, le contenu transparaît franchement ET les entrées de nav restent
+   * nettes. Comparé à l'écran sur un titre passant sous la barre, à 92, 72
+   * et 60 : 92 ne montre rien, 60 devient bavard.
+   *
+   * ⚠️ Baisser l'opacité SANS monter le flou rendrait la nav illisible :
+   * les deux vont ensemble. C'est le flou qui fait le verre ; l'opacité ne
+   * fait que doser ce qu'on en voit. */
+  background: color-mix(in srgb, var(--paper) 72%, transparent);
   /* ⚠️ LE PRÉFIXÉ D'ABORD. Lightning CSS — le compilateur de Tailwind v4,
    * donc celui de toutes nos applications Next — SUPPRIME `backdrop-filter`
    * non préfixé quand il précède la forme `-webkit-`. Or Firefox ne connaît
@@ -457,12 +470,16 @@
    * compilateur NUE, sans repli, et un navigateur qui l'ignore n'a alors
    * plus AUCUN fond sous une barre fixe — 3,5 % d'usage qui voyaient le
    * voile correctement et ne verraient plus rien. */
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
 }
 
 /* La frange de dégradé, posée SOUS la barre. `pointer-events: none` : elle
  * couvre le haut du contenu, elle ne doit rien intercepter. */
+/* Le prolongement du voile SOUS la barre : il éteint le verre au lieu de
+ * le couper net. Son sommet doit valoir EXACTEMENT l'opacité de la barre —
+ * sinon la jointure fait une marche, d'autant plus visible que la barre est
+ * translucide. Les deux valeurs bougent donc ensemble. */
 .zv-header::after {
   content: '';
   position: absolute;
@@ -472,11 +489,11 @@
   height: 24px;
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--paper) 92%, transparent),
+    color-mix(in srgb, var(--paper) 72%, transparent),
     color-mix(in srgb, var(--paper) 0%, transparent)
   );
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
   pointer-events: none;
 }