@zevra/ui 0.35.0 → 0.37.0

package/react/content.tsx

@@ -1,4 +1,4 @@
-// Contenu — surfaces, badges et blocs éditoriaux. Sans état, donc sans
+// Contenu : surfaces, badges et blocs éditoriaux. Sans état, donc sans
 // « use client ».
 
 import type { ElementType, HTMLAttributes, ReactNode } from 'react'
@@ -8,7 +8,7 @@ type Div = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
 type Span = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>
 
 export interface CardProps extends Div {
-  /** Retrait intérieur. Sans, la carte est nue — à toi de poser le tien. */
+  /** Retrait intérieur. Sans, la carte est nue : à toi de poser le tien. */
   padding?: 'aucun' | 'normal' | 'large'
   /** Filet coloré : un état porté par la bordure, pas par un fond. */
   etat?: 'ok' | 'err'
@@ -80,7 +80,7 @@ export interface SrcProps extends Span {
   className?: string
 }
 
-/** Puce de source — BOSS, Judilibre, KALI. */
+/** Puce de source : BOSS, Judilibre, KALI. */
 export function Src({ attenue, className, ...reste }: SrcProps) {
   return (
     <span
@@ -154,7 +154,7 @@ export interface QuoteProps extends Div {
 }
 
 /** ⚠️ RÈGLE DE CHARTE : jamais de fausse citation. Tant qu'un verbatim client
- *  n'a pas été recueilli, ce bloc reste en réserve — un placeholder crédible
+ *  n'a pas été recueilli, ce bloc reste en réserve : un placeholder crédible
  *  finit toujours par partir en production. */
 export function Quote({ auteur, className, children, ...reste }: QuoteProps) {
   return (
@@ -172,7 +172,7 @@ export interface PriceProps extends Div {
   unite?: ReactNode
   /** La mention sous la carte. */
   note?: ReactNode
-  /** La formule recommandée — bandeau indigo. Trois cartes par page au plus. */
+  /** La formule recommandée : bandeau indigo. Trois cartes par page au plus. */
   recommande?: boolean
   className?: string
   children?: ReactNode
@@ -262,7 +262,7 @@ export interface FaqItemProps
  *  et la recherche du navigateur (⌘F) l'ouvre toute seule pour montrer ce
  *  qu'elle a trouvé.
  *
- *  ⚠️ La réponse reste DANS LE DOM quand la question est fermée — `details`
+ *  ⚠️ La réponse reste DANS LE DOM quand la question est fermée : `details`
  *  la masque, il ne la retire pas. C'est ce qui permet à une page de porter
  *  un balisage `FAQPage` honnête : ce que le moteur lit est bien ce que le
  *  visiteur peut ouvrir. Un accordéon qui démonte son contenu annoncerait
@@ -272,7 +272,7 @@ export interface FaqItemProps
  *  de `LinkArrow` : recopié à la main, il finit par diverger.
  *
  *  `question` accepte un TITRE (`<h3>Ma question</h3>`) : une FAQ de vitrine
- *  veut ses questions dans le plan du document — c'est ce que lisent les
+ *  veut ses questions dans le plan du document, c'est ce que lisent les
  *  moteurs, et ce que parcourt un lecteur d'écran qui saute de titre en
  *  titre. Le CSS lui retire ce que le navigateur lui met : le niveau reste
  *  au balisage, l'apparence au système. */
@@ -319,7 +319,7 @@ export interface UiPreviewProps extends Div {
 
 /** La preuve produit : une question, une réponse, ses sources.
  *  ⚠️ RÈGLE DE CHARTE : toujours de VRAIES données réalistes, jamais de
- *  lorem — c'est ce bloc qui porte la crédibilité de la page. */
+ *  lorem, c'est ce bloc qui porte la crédibilité de la page. */
 export function UiPreview({
   question,
   sources,
@@ -353,7 +353,7 @@ export function Check({ className, ...reste }: Span & { className?: string }) {
 }
 
 /* ─── Blocs éditoriaux ─────────────────────────────────────────────────
- * HORS RELEVÉ — ajoutés à la demande de la DA (règle de variété du
+ * HORS RELEVÉ, ajoutés à la demande de la DA (règle de variété du
  * 24/08/2026 : jamais deux blocs de même forme qui se suivent, 80 % de
  * formes différentes par page). Quatre façons de poser du contenu SANS
  * carte, pour que les grilles de cartes redeviennent un choix et non un
@@ -384,7 +384,7 @@ export function RowsItem({ cle, className, children, ...reste }: RowsItemProps)
 }
 
 export interface IndexListProps extends Div {
-  /** Grille de trois, sans filets — l'espace fait la séparation. */
+  /** Grille de trois, sans filets : l'espace fait la séparation. */
   cols?: boolean
   className?: string
 }
@@ -416,14 +416,14 @@ export function IndexItem({ num, className, children, ...reste }: IndexItemProps
   )
 }
 
-/** Déroulé vertical — la déclinaison verticale de `Steps`, pour les
+/** Déroulé vertical : la déclinaison verticale de `Steps`, pour les
  *  méthodes qui se lisent comme un récit. */
 export function Flow({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-flow', className)} {...reste} />
 }
 
 export interface FlowStepProps extends Div {
-  /** Les points reprennent les couleurs des points de méthode — l'un des
+  /** Les points reprennent les couleurs des points de méthode : l'un des
    *  trois emplois autorisés du spectre. Sans teinte : iris. */
   teinte?: 'violet' | 'cyan'
   className?: string
@@ -446,7 +446,7 @@ export interface CalloutProps extends Div {
 
 /** Encart d'appel sur accent-soft : l'offre transverse qui doit se voir
  *  sans crier (remise, renvoi vers une autre page). L'action se passe en
- *  enfant — elle se range à droite, et tombe sous le titre sur mobile. */
+ *  enfant : elle se range à droite, et tombe sous le titre sur mobile. */
 export function Callout({ titre, className, children, ...reste }: CalloutProps) {
   return (
     <div className={cx('zv-callout', className)} {...reste}>
@@ -460,7 +460,7 @@ export interface MediaProps extends Div {
   /** Rapport du cadre. Quatre, et pas davantage : un cinquième se demande. */
   ratio?: '16-9' | '4-3' | '1-1' | '3-2'
   /**
-   * L'image est CONTENUE au lieu de remplir — un logo, un schéma, une pièce
+   * L'image est CONTENUE au lieu de remplir : un logo, un schéma, une pièce
    * qu'on ne peut pas rogner. Le papier passe alors derrière : il restera du
    * vide, autant qu'il soit choisi.
    */
@@ -498,7 +498,7 @@ export interface MediaImgProps
 }
 
 /**
- * L'image d'un cadre. `alt` est OBLIGATOIRE — vide pour une image
+ * L'image d'un cadre. `alt` est OBLIGATOIRE, vide pour une image
  * décorative, décrite sinon : c'est un choix, pas un oubli.
  *
  * Un produit qui optimise ses images (next/image) pose la classe
@@ -537,14 +537,14 @@ export function MediaCoin({ gauche, haut, className, children, ...reste }: Media
 }
 
 /** Voile de lecture : un titre posé SUR une image n'est lisible qu'au-dessus
- *  d'un dégradé. Il ne capte pas le pointeur — le cadre reste cliquable. */
+ *  d'un dégradé. Il ne capte pas le pointeur : le cadre reste cliquable. */
 export function MediaVoile({ className, ...reste }: Span & { className?: string }) {
   return <span aria-hidden="true" className={cx('zv-media__voile', className)} {...reste} />
 }
 
 /* ─── Page légale ──────────────────────────────────────────────────────
  * La FORME d'un document contractuel. Le TEXTE vit dans @zevra/legal,
- * versionné et archivé — ce composant n'en dépend pas : il décrit la forme
+ * versionné et archivé, ce composant n'en dépend pas : il décrit la forme
  * qu'il sait rendre, et le typage structurel de TypeScript fait le reste.
  * C'est délibéré : le design system ne doit pas dépendre du contenu, sinon
  * une correction de clause deviendrait une livraison de charte. */
@@ -582,8 +582,8 @@ export interface DocumentLegalRendu {
 }
 
 /* ⚠️ POURQUOI dangerouslySetInnerHTML EST ACCEPTABLE ICI, ET SEULEMENT ICI.
- * Le texte porte trois balises et trois seulement — <strong>, <em>,
- * <a href> — qui ont un sens JURIDIQUE : une clause mise en avant par
+ * Le texte porte trois balises et trois seulement (<strong>, <em>,
+ * <a href>) qui ont un sens JURIDIQUE : une clause mise en avant par
  * l'auteur, un renvoi vers un autre contrat. Les retirer appauvrirait le
  * document ; les rendre en texte brut afficherait des chevrons.
  * Ce contenu vient d'un dépôt versionné, JAMAIS d'une saisie utilisateur, et
@@ -671,7 +671,7 @@ function BlocRendu({ bloc }: { bloc: BlocLegal }) {
 
 /** Le rendu d'un document contractuel. Le sommaire ne fait PAS partie du
  *  composant : il se pose à côté avec `Rail`, dont les ancres sont les `id`
- *  de section — c'est ce qui permet de le placer en marge sur la vitrine et
+ *  de section, c'est ce qui permet de le placer en marge sur la vitrine et
  *  de l'omettre dans un tunnel d'inscription.
  *
  *  ⚠️ Ne jamais tronquer un document contractuel derrière un « voir plus » :
@@ -736,10 +736,10 @@ export interface PageErreurProps extends Div {
    *  seul le code s'affiche.
    *
    *  ⚠️ EN PROP, et pas en dur : une 404 anglaise de Mémoire affichait
-   *  « Erreur 404 ». Le composant est censé ne porter aucun texte — c'est
-   *  écrit dans son arbitrage —, et il en portait quand même. */
+   *  « Erreur 404 ». Le composant est censé ne porter aucun texte, c'est
+   *  écrit dans son arbitrage, et il en portait quand même. */
   libelle?: string
-  /** L'URL du glyphe — `GLYPHES.memoire` de `@zevra/ui/glyphes`. Sur une
+  /** L'URL du glyphe : `GLYPHES.memoire` de `@zevra/ui/glyphes`. Sur une
    *  page qui n'a plus de contenu, c'est le seul repère qui dise encore où
    *  l'on se trouve. */
   glyphe?: string
@@ -751,14 +751,14 @@ export interface PageErreurProps extends Div {
    *  ⚠️ Il valait `"Zevra"` en dur jusqu'à la 0.33.0 : sur la 404 de
    *  Mémoire, un lecteur d'écran annonçait « Zevra » devant le M de Mémoire,
    *  et aucune prop ne permettait de le corriger. Une valeur qu'une app aura
-   *  légitimement besoin d'ajuster ne se pose pas en dur — c'est la règle du
+   *  légitimement besoin d'ajuster ne se pose pas en dur : c'est la règle du
    *  dépôt, et celle-ci l'enfreignait. */
   glypheAlt?: string
   /** Le titre. ⚠️ Il dit la panne EN CLAIR : « Page introuvable », pas un
    *  jeu de mots. L'esprit vient dans le texte, jamais avant l'information. */
   titre: ReactNode
   /** Les actions : un bouton plein pour la sortie, un fantôme pour le
-   *  recours. Deux au plus — au-delà, la page d'erreur devient un menu. */
+   *  recours. Deux au plus : au-delà, la page d'erreur devient un menu. */
   actions?: ReactNode
   /** La cote de l'incident (`GET /dossier/2019`). Elle donne au visiteur de
    *  quoi signaler la panne et au support de quoi la retrouver. */
@@ -769,12 +769,12 @@ export interface PageErreurProps extends Div {
 }
 
 /**
- * Une page entière d'erreur — 404, 403, 410, 500, maintenance.
+ * Une page entière d'erreur : 404, 403, 410, 500, maintenance.
  *
  * ⚠️ ELLE NE PORTE AUCUN TEXTE PAR DÉFAUT, et c'est délibéré : une
  * plaisanterie câblée dans un design system part dans les sept apps, dans
- * une seule langue, et n'en revient jamais. La copie de référence — celle
- * qui plaisante en vocabulaire juridique — vit dans l'exemple du catalogue,
+ * une seule langue, et n'en revient jamais. La copie de référence, celle
+ * qui plaisante en vocabulaire juridique, vit dans l'exemple du catalogue,
  * là où on la lit avant de la copier.
  */
 export function PageErreur({