@zevra/ui 0.30.0 → 0.32.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/components.css

@@ -1362,3 +1362,124 @@
 .zv-legal__encart--important .zv-legal__encart-label {
   color: var(--warn-ink);
 }
+
+/* ─── Page d'erreur ─────────────────────────────────────────────────────
+ * HORS RELEVÉ (28/08/2026), voir DECISIONS.md « La page d'erreur ».
+ *
+ * Une page entière, pas un encart : 404, 403, 410, 500, maintenance. Elle
+ * est ICI et non dans feedback.css parce que la landing Astro en a besoin
+ * autant que les apps Next, et que components.css est le seul module que
+ * les deux couches chargent réellement — c'est lui qui porte le bouton.
+ *
+ * ⚠️ Le bloc ne pose AUCUN texte et n'embarque AUCUNE image. Le glyphe
+ * arrive en propriété (`@zevra/ui/glyphes`), la copie vient de l'app. Une
+ * plaisanterie câblée dans un design system part dans les sept apps, dans
+ * une seule langue, et n'en revient jamais. */
+
+.zv-errpage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* 70vh et non 100 : la page garde sa barre de navigation au-dessus et son
+   * pied en dessous — une erreur n'est pas une raison de perdre la sortie. */
+  min-height: 70vh;
+  padding: 72px 24px;
+  text-align: center;
+}
+
+/* La marque, en tête : sur une page qui n'a plus de contenu, c'est le seul
+ * repère qui dit encore où l'on se trouve. */
+.zv-errpage__glyphe {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+/* Le kicker, avec le filet de spectre — PREMIER de ses trois emplois
+ * autorisés. C'est là que le code d'erreur se dit, en mono comme toutes les
+ * métadonnées du système. */
+.zv-errpage__kicker {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.zv-errpage__titre {
+  margin-top: 16px;
+  font-family: var(--font-display);
+  font-size: var(--h3);
+  font-weight: 300;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  color: var(--ink);
+}
+
+.zv-errpage__texte {
+  /* La mesure bornée n'est pas décorative : centré et pleine largeur, ce
+   * paragraphe devient illisible dès 900px. Même raison qu'en
+   * .zv-empty__text, et même ordre de grandeur. */
+  margin: 14px auto 0;
+  max-width: 480px;
+  font-size: var(--lead);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* Deux actions au plus, et UN SEUL bouton plein : la sortie principale et
+ * un recours. Au-delà, la page d'erreur devient un menu. */
+.zv-errpage__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+/* La cote de l'incident : le code et le chemin demandé. Ce n'est pas un
+ * ornement — elle donne au visiteur de quoi signaler la panne et au support
+ * de quoi la retrouver. Sa forme est celle d'une référence de dossier, ce
+ * qui est la seule illustration dont cette maison ait besoin. */
+.zv-errpage__ref {
+  margin-top: 44px;
+  padding-top: 14px;
+  /* --line et NON --hairline : le cheveu (#eef1f8) est plus CLAIR que le
+   * papier (#f5f6fa), donc invisible dès que la page ne repose pas sur du
+   * blanc — et une page d'erreur repose sur le papier. Vu au navigateur ; le
+   * trait était bien là, et ne se voyait pas. */
+  border-top: 1px solid var(--line);
+  min-width: 220px;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+  /* Un chemin long ne doit pas pousser la page en défilement horizontal. */
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 767px) {
+  .zv-errpage {
+    min-height: 60vh;
+    padding: 48px 20px;
+  }
+
+  /* --h3 (38px) sur 320px de large coupe « introuvable » en deux. */
+  .zv-errpage__titre {
+    font-size: var(--card-title);
+  }
+
+  .zv-errpage__texte {
+    font-size: var(--body);
+  }
+
+  /* Empilées : côte à côte, deux boutons de 48px ne laissent pas la place
+   * aux libellés et se coupent. */
+  .zv-errpage__actions {
+    flex-direction: column;
+    align-self: stretch;
+  }
+}

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 {