@zevra/ui 0.8.0 → 0.9.0

package/DECISIONS.md

@@ -279,3 +279,230 @@ prototype `experience.html` compose toutes ses scènes produit en `span 5`
 (glyphe) + `span 7` (discours), et c'est cette répartition qui équilibre
 l'air entre le visuel et le texte. `zv-col-5` et `zv-col-7` complètent donc
 le relevé ; en 4+8, le texte nage et le glyphe s'exile au bord.
+
+---
+
+## L'angle vif (25/08/2026)
+
+« Très carré, ça fait pro et inspire confiance » — arbitrage DA rendu sur
+pièces. Les quatre tokens de rayon (`--r-btn`, `--r-pill`, `--r-panel`,
+`--r-card`) sont ramenés à `0` et RESTENT nommés : rendre de la rondeur à
+l'une des quatre intentions doit rester une ligne à changer, pas une chasse
+dans douze fichiers. Seul survit le rond de FORME — pastille d'état, radio,
+halo, bouton d'interrupteur exclu (passé au carré), roue incluse — parce
+qu'il porte du sens là où le rayon ne portait que du style.
+
+Cet arbitrage SUCCÈDE au « rayon des cartes — clos » ci-dessus : la
+question tranchée là était la fidélité au relevé (16px contre 14 et 12),
+celle-ci est une décision de DA qui lui passe devant.
+
+---
+
+## Compléments du 25/08/2026 (0.9.0) — les manques comblés, hors relevé
+
+La demande : compléter le système au niveau d'une bibliothèque de référence
+(états d'interaction, contrôles absents, formats), en restant dans la charte.
+Tout ce qui suit est **HORS RELEVÉ** — dessiné dans les tokens existants,
+chaque écart dit — et se rejuge sur pièces avec la DA. Un seul token entre
+(`--font-code`, voir « Bloc de code ») ; aucune couleur nouvelle.
+
+### Les états de survol et d'appui des boutons
+
+Aucune maquette ne donne d'état `:hover` ni `:active` aux trois boutons —
+elles sont figées. Un bouton sans réaction se lit comme un décor (l'argument
+qui a déjà tranché pour `.zv-chrome-btn`). Arbitrages :
+
+- **le survol assombrit, l'appui assombrit davantage et rassoit** : les
+  teintes sont dérivées par `color-mix` (l'idiome que le voile emploie
+  déjà) des couleurs que le bouton porte déjà — le sommet de dégradé relevé
+  (`--zv-btn-haut`, #2b2bb4, sans token) et `--accent-deep`. Aucune teinte
+  nouvelle n'entre ;
+- à l'appui, l'ombre TOMBE et le liseré s'éteint : le bouton se rassoit sur
+  la page au lieu de flotter — aucun déplacement, c'est la lumière qui dit
+  l'enfoncement ;
+- le fantôme prend le filet `--accent` et l'appui pose `--accent-soft` en
+  fond ; l'encre s'éclaircit d'un cran (un aplat sombre ne peut pas
+  s'assombrir visiblement) ;
+- une seule transition, la courbe maison, 160 ms — coupée par
+  `prefers-reduced-motion` (base.css) ;
+- **aucun déplacement** : pas de translateY. Les entrées du système montent
+  au défilement ; un bouton qui saute au survol raconterait autre chose.
+
+### Le bouton destructif
+
+La modale destructive porte son filet `--err`, mais son action de
+confirmation restait un plein indigo : « Supprimer » s'y lisait comme
+n'importe quelle action. `zv-btn--danger` pose l'aplat `--err`, sans
+dégradé ni ombre indigo. **Il compte comme LE bouton plein de l'écran** — la
+règle « un seul plein par page » ne distingue pas les couleurs, elle compte
+les aplats.
+
+### L'attente d'un bouton
+
+Relevé de Mémoire, cette fois (le motif de balisage documenté dans
+feedback.css) : pendant l'action, le libellé change (« Connexion… ») et le
+bouton passe en `cursor-wait; opacity: .7` — valeurs reprises telles
+quelles. Le paquet le code sur `[aria-busy="true"]` — l'attribut qui rend
+l'attente audible ne coûte alors rien — et la façade React l'expose en prop
+`occupe`, qui pose `aria-disabled` et AVALE le clic plutôt que de poser
+`disabled` : un `disabled` sortirait le bouton du parcours clavier au
+moment précis où l'attente doit s'annoncer. Mémoire, elle, désactive ; cet
+écart-là est assumé.
+
+### L'onglet souligné — l'arbitrage attendu
+
+La question ouverte depuis le relevé Mémoire est tranchée ainsi :
+
+- **trait actif : 2 px, `--accent`**. 2 px est l'épaisseur des filets
+  dessinés du système (filet de spectre, rail d'étapes) ; l'accent est la
+  couleur de l'action, comme l'entrée de nav courante. PAS le spectre : un
+  quatrième emploi n'existe pas.
+- l'onglet inactif est `--ink-2` graisse 500, l'actif `--accent` graisse
+  600 — la grammaire exacte de `.zv-seg` ;
+- la rangée porte un filet bas `--line` d'un pixel que le trait actif
+  recouvre : l'onglet se lit comme posé SUR une ligne, pas souligné en l'air.
+
+`.zv-tabs-line` vit dans navigation.css, à l'emplacement que la note « ce
+module ne livre rien ici » réservait. La rangée de puces (`Tabs` en variante
+par défaut) reste le motif des filtres ; l'onglet souligné est celui des
+VUES d'un même objet (Aperçu / Sources).
+
+### Roue, squelette, infobulle — les trois manques assumés, livrés
+
+feedback.css les refusait faute de matière première, et posait les
+contraintes à respecter « le jour où la DA les tranche ». Ce jour : les
+contraintes sont reprises telles quelles, les valeurs restantes sont
+arbitrées ici.
+
+- **La roue** (`zv-spinner`) : anneau de 16 px — la taille de `.zv-icon` —
+  trait de 2 (l'épaisseur du jeu d'icônes), piste `--accent-line`, secteur
+  `--accent`, rotation 0,8 s linéaire. La variante `--lg` fait 24 px, la
+  grille du jeu d'icônes. Elle ne REMPLACE pas `.zv-loading` : la phrase
+  qui dit le travail reste le motif par défaut, la roue est pour l'attente
+  courte et locale (un bouton, une cellule). `prefers-reduced-motion` la
+  fige — l'anneau interrompu reste lisible immobile. Son libellé d'annonce
+  est un texte masqué (`.zv-sr-only`, base.css), pas un `aria-label` sur un
+  span vide, que tous les lecteurs n'annoncent pas.
+- **Le squelette** (`zv-skeleton`) : `--hairline`, comme exigé — pas de
+  balayage spectral. Pulsation d'OPACITÉ (1 → 0,55, 1,8 s) : animer la
+  couleur ferait un dégradé de gris que la charte n'a pas. La géométrie
+  vient du consommateur (largeur/hauteur en style) ; seule la variante
+  `--text` fixe une hauteur d'un cadratin de texte courant.
+- **L'infobulle** (`zv-tooltip`) : la combinaison imposée — panneau blanc,
+  filet `--line`, ombre `--shadow-menu`, texte `--app-sm`/`--ink-2` —
+  posée AU-DESSUS de la cible, centrée, à 6 px (le pointeur vient d'en bas
+  et la masquerait dessous ; `--bas` existe pour le rare cas inverse),
+  plafonnée à 240 px et, sous le seuil, à l'écran. L'apparition attend
+  300 ms — sans quoi traverser une rangée d'icônes fait clignoter une bulle
+  par icône — la disparition est immédiate. Trois exigences de WCAG 1.4.13
+  sont tenues : elle reste tant que le pointeur ou le focus y sont, elle
+  est survolable (le masquage par `visibility` évite les zones fantômes),
+  et Échap la ferme — la seule ligne de script du composant, posée sans
+  état. L'annonce passe par `aria-describedby`, câblée en identifiants
+  EXPLICITES comme le couple `htmlFor`/`id` de `Field` — pas de `useId`,
+  qui interdirait le rendu en composant serveur. Réservée à un COMPLÉMENT
+  dispensable : une commande n'a pas le droit de cacher son nom dans une
+  infobulle.
+
+### Le curseur (`zv-range`)
+
+Aucune source. Dérivé de l'interrupteur redessiné : bouton CARRÉ de 14 px
+(la taille exacte du bouton du switch), `--accent`, qui passe
+`--accent-deep` au survol ; piste de 3 px (la hauteur de `.zv-progress`),
+`--line`, remplie en `--accent` jusqu'au curseur. **Pas le spectre** : la
+barre de progression est un des trois emplois, le curseur n'en est pas un.
+Le remplissage se calcule dans la façade (pourcentage de position — une
+géométrie, comme la largeur de `Progress`, pas une valeur de charte).
+
+### L'affixe de champ (`zv-affix`)
+
+« 30 », seul dans un champ, ne dit pas s'il s'agit de jours ou d'euros. La
+grammaire est celle de `.zv-search`, le seul cadre-à-champ-nu du relevé :
+cadre `--line`, champ nu dedans, allumage `:focus-within` identique.
+L'affixe est en mono `--label` — une unité est un libellé, pas une donnée.
+
+### Le dépliant (`zv-fold`)
+
+La FAQ est le pliage de la vitrine ; l'applicatif n'en avait aucun (options
+avancées, détail d'une ligne de journal). Construit sur `<details>` natif :
+clavier et annonce viennent du navigateur, aucun JavaScript. Rangé dans
+data.css — c'est du contenu qui se déplie, pas de la navigation. Le chevron
+tourne, seule rotation du module, coupée par `prefers-reduced-motion`.
+
+### La touche (`zv-kbd`) et le bloc de code (`zv-codeblock`)
+
+Une documentation d'interface cite des raccourcis et des commandes ; le
+paquet n'avait ni l'un ni l'autre.
+
+- La touche : `--panel`, filet `--line` avec un bas de 2 px qui fait le
+  relief de la touche — géométrie, pas ombre.
+- **Le bloc de code introduit le seul token nouveau, `--font-code`**
+  (`ui-monospace / SF Mono / Menlo`). La raison est déjà écrite deux fois
+  dans le paquet : `--font-mono` (Space Grotesk) n'est PAS à chasse fixe, et
+  `tabular-nums` n'aligne que les chiffres — du code exige la chasse fixe
+  entière. Détourner `--font-mono` aurait menti ; un hexadécimal de pile de
+  polices en dur dans data.css aurait été la première valeur de charte hors
+  tokens. Le token est reflété dans le miroir JS, comme les autres.
+
+### Le popover (`zv-popover`)
+
+Le menu déroulant impose ses items ; il n'existait aucune surface ancrée
+LIBRE (aide contextuelle, mini-formulaire de filtre). Même ancre
+(`.zv-select-anchor`), même surface que `.zv-menu` (filet `--line`, ombre
+`--shadow-menu`), padding de panneau au lieu d'items. Fermeture par clic
+extérieur et Échap : au composant, comme pour le menu.
+
+### Le carrousel (`zv-carousel`)
+
+La bande de logos de la landing défile déjà — sans composant, chaque page
+réinvente le sien. Défilement natif `scroll-snap`, AUCUN JavaScript : pas de
+flèches (elles exigeraient un script et un arbitrage de dessin), pas de
+points. La barre de défilement est masquée, le clavier passe par le focus du
+conteneur. Un carrousel reste un aveu d'espace : la règle de variété lui
+préfère une grille tant que le contenu tient.
+
+### Le bandeau d'annonce (`zv-banner`)
+
+La bande au-dessus de la barre de navigation (annonce de version,
+information réglementaire). `--accent-soft` sur filet `--accent-line` — le
+ton information de l'alerte, en pleine largeur. Un seul par page, et
+JAMAIS pour du marketing permanent : un bandeau qui ne part pas devient un
+bourrelet de chrome.
+
+### La barre d'onglets mobile (`zv-tabbar`)
+
+Mémoire navigue au tiroir ; une application à trois ou quatre sections
+navigue plus vite par une barre basse. N'existe que SOUS le point de
+rupture (au-dessus, la colonne latérale est là), cibles `--tap`, icône +
+micro-label, état courant `--accent` sur `aria-current="page"`. Cinq
+entrées au maximum — au-delà, c'est le tiroir.
+
+### Les formats sociaux (`zv-social`)
+
+Les visuels LinkedIn/OpenGraph se refaisaient à la main, hors charte. Trois
+gabarits FIGÉS en pixels — paysage 1200×630 (OpenGraph et lien LinkedIn),
+carré 1080×1080 (post), story 1080×1920 — qui ne répondent à aucun point de
+rupture : ce sont des planches d'export, pas des pages. Ils composent les
+pièces existantes (bande manifeste, kicker, halo) et portent un pied
+wordmark + adresse. La règle « jamais de faux contenu » s'y applique au
+premier chef : un visuel social EST une publication.
+
+### Vingt et une icônes de plus
+
+Le jeu passe de 34 à 55. Les règles du jeu ne bougent pas : trait 2, bouts
+et jonctions arrondis, grille 24, `currentColor`. Les ajouts comblent les
+trous les plus fréquents — `chevron-haut` manquait au chevron près, et le
+catalogue citait `telecharger` en exemple sans qu'elle existe — plus le
+vocabulaire du métier : balance, livre-ouvert, diplome. Aucune icône
+pleine, aucune couleur.
+
+### Écarté, et pourquoi
+
+- **Le code de vérification (OTP)** : aucun écran du groupe n'en pose. Le
+  livrer supposerait d'inventer la gestion de focus inter-cases sans aucune
+  source — le jour où un écran d'authentification à code existe, c'est lui
+  qui tranche.
+- **Le sélecteur de date** : le natif (`.zv-input` sur `type="date"`) reste
+  le motif ; un calendrier maison est un projet, pas un complément.
+- **La barre de commande (⌘K)** : composable avec Modal + Search + Menu ;
+  un composant dédié attendra un usage réel.

package/dist/actions.d.ts

@@ -1,19 +1,29 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-/** Variantes de bouton. Une seule pleine par écran — c'est la règle de charte. */
-export type BoutonVariante = 'plein' | 'fantome' | 'encre';
+/** Variantes de bouton. Une seule pleine par écran — c'est la règle de
+ *  charte, et « danger » COMPTE comme la pleine : la règle compte les
+ *  aplats, pas les couleurs. « danger » est réservée à l'action destructive
+ *  (la confirmation d'une modale de suppression), jamais à une action
+ *  simplement importante. */
+export type BoutonVariante = 'plein' | 'fantome' | 'encre' | 'danger';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
     variante?: BoutonVariante;
     /** Hauteur réduite, pour une barre de navigation. */
     compact?: boolean;
     /** Pleine largeur — l'appel à l'action d'un écran mobile. */
     bloc?: boolean;
+    /** Attente pendant l'action : pose aria-busy et aria-disabled, et AVALE
+     *  le clic — sans poser `disabled`, qui sortirait le bouton du parcours
+     *  clavier au moment précis où l'attente doit s'annoncer.
+     *  ⚠️ Le LIBELLÉ doit changer avec elle (« Connexion… ») — c'est le motif
+     *  relevé de Mémoire : l'estompement seul ne dit pas ce qu'on attend. */
+    occupe?: boolean;
     /** Échappatoire assumée. À employer pour un ajustement de position, jamais
      *  pour redéfinir une couleur ou une taille : c'est par là que les apps
      *  recommencent à écrire leur propre charte. */
     className?: string;
     children?: ReactNode;
 }
-export declare function Button({ variante, compact, bloc, className, type, ...reste }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variante, compact, bloc, occupe, className, type, disabled, onClick, ...reste }: ButtonProps): import("react").JSX.Element;
 export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
     variante?: BoutonVariante;
     compact?: boolean;

package/dist/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../react/actions.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,kFAAkF;AAClF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAQ1D,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;oDAEgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAkB,EAClB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,+BAab;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;oEACoE;AACpE,wBAAgB,UAAU,CAAC,EACzB,QAAkB,EAClB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BAYjB;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACzD,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAOxE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;yEACyE;AACzE,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,+BAiBhB"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../react/actions.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAA;AAGd;;;;6BAI6B;AAC7B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AASrE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;6EAIyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;oDAEgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAkB,EAClB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,IAAe,EACf,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,WAAW,+BAyBb;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;oEACoE;AACpE,wBAAgB,UAAU,CAAC,EACzB,QAAkB,EAClB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BAYjB;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACzD,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAOxE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;yEACyE;AACzE,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,+BAiBhB"}

package/dist/actions.js

@@ -4,9 +4,16 @@ const VARIANTE_BOUTON = {
     plein: 'zv-btn',
     fantome: 'zv-btn--ghost',
     encre: 'zv-btn--ink',
+    danger: 'zv-btn--danger',
 };
-export function Button({ variante = 'plein', compact, bloc, className, type = 'button', ...reste }) {
-    return (_jsx("button", { type: type, className: cx(VARIANTE_BOUTON[variante], compact && 'zv-btn--sm', bloc && 'zv-btn--block', className), ...reste }));
+export function Button({ variante = 'plein', compact, bloc, occupe, className, type = 'button', disabled, onClick, ...reste }) {
+    return (_jsx("button", { type: type, "aria-busy": occupe || undefined, "aria-disabled": occupe || undefined, disabled: disabled, onClick: occupe
+            ? (e) => {
+                // Le clic est avalé, pas interdit : un `disabled` sortirait le
+                // bouton du parcours clavier pendant l'annonce de l'attente.
+                e.preventDefault();
+            }
+            : onClick, className: cx(VARIANTE_BOUTON[variante], compact && 'zv-btn--sm', bloc && 'zv-btn--block', className), ...reste }));
 }
 /** Le même bouton, mais qui navigue. Un <a> et un <button> ne s'échangent pas :
  *  l'un ouvre dans un onglet, se copie et s'indexe, l'autre non. */

package/dist/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","sourceRoot":"","sources":["../react/actions.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAK5B,MAAM,eAAe,GAAmC;IACtD,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,aAAa;CACrB,CAAA;AAgBD,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACI;IACZ,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,IAAI,YAAY,EACvB,IAAI,IAAI,eAAe,EACvB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAUD;oEACoE;AACpE,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,YACE,SAAS,EAAE,EAAE,CACX,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,IAAI,YAAY,EACvB,IAAI,IAAI,eAAe,EACvB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AASD,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IACvE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,SAAS,CAAC,KACjE,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAUD;yEACyE;AACzE,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACO;IACf,OAAO,CACL,aACE,SAAS,EAAE,EAAE,CACX,eAAe,EACf,SAAS,IAAI,wBAAwB,EACrC,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACT,eAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,aACzC,eAAM,CAAC,EAAC,UAAU,GAAG,EACrB,eAAM,CAAC,EAAC,eAAe,GAAG,IACtB,IACJ,CACL,CAAA;AACH,CAAC"}
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../react/actions.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAS5B,MAAM,eAAe,GAAmC;IACtD,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAsBD,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACI;IACZ,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,eACC,MAAM,IAAI,SAAS,mBACf,MAAM,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EACL,MAAM;YACJ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACJ,+DAA+D;gBAC/D,6DAA6D;gBAC7D,CAAC,CAAC,cAAc,EAAE,CAAA;YACpB,CAAC;YACH,CAAC,CAAC,OAAO,EAEb,SAAS,EAAE,EAAE,CACX,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,IAAI,YAAY,EACvB,IAAI,IAAI,eAAe,EACvB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAUD;oEACoE;AACpE,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,YACE,SAAS,EAAE,EAAE,CACX,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,IAAI,YAAY,EACvB,IAAI,IAAI,eAAe,EACvB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AASD,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IACvE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,SAAS,CAAC,KACjE,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAUD;yEACyE;AACzE,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACO;IACf,OAAO,CACL,aACE,SAAS,EAAE,EAAE,CACX,eAAe,EACf,SAAS,IAAI,wBAAwB,EACrC,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACT,eAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,aACzC,eAAM,CAAC,EAAC,UAAU,GAAG,EACrB,eAAM,CAAC,EAAC,eAAe,GAAG,IACtB,IACJ,CACL,CAAA;AACH,CAAC"}

package/dist/catalogue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"catalogue.d.ts","sourceRoot":"","sources":["../react/catalogue.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAsChD,MAAM,WAAW,OAAO;IACtB,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAA;IACd,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd;+BAC2B;IAC3B,MAAM,EAAE,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAA;IAC3C,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,OAAO,EAAE,CAAA;CACpB;AA+KD,eAAO,MAAM,SAAS,EAAE,eAAe,EAs/CtC,CAAA;AAMD,yEAAyE;AACzE,eAAO,MAAM,QAAQ,EAAE,CAAC,OAAO,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,EAEpD,CAAA"}
+{"version":3,"file":"catalogue.d.ts","sourceRoot":"","sources":["../react/catalogue.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAyChD,MAAM,WAAW,OAAO;IACtB,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAA;IACd,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd;+BAC2B;IAC3B,MAAM,EAAE,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAA;IAC3C,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,OAAO,EAAE,CAAA;CACpB;AA2OD,eAAO,MAAM,SAAS,EAAE,eAAe,EA6vDtC,CAAA;AAMD,yEAAyE;AACzE,eAAO,MAAM,QAAQ,EAAE,CAAC,OAAO,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,EAEpD,CAAA"}

package/dist/catalogue.js

@@ -16,15 +16,15 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import { Button, ButtonLink, ButtonRow, LinkArrow } from './actions.js';
 import { Callout, Card, Check, Divider, Ent, EntText, Faq, FaqItem, Flow, FlowStep, Glass, IndexItem, IndexList, Inset, MiniStat, MiniStatItem, Pill, Price, Quote, Rows, RowsItem, Src, SrcRow, StatCard, Tag, UiPreview, } from './content.js';
-import { Avatar, Break, Cell, Chip, ChipRow, Cite, CiteRow, FileType, KV, KVRow, List, ListMain, ListName, ListRow, Meta, MetaRow, Row, Table, TableHead, Trunc, Unwrap, } from './data.js';
-import { Alert, Badge, Caret, Dot, Empty, Loading, Progress, Status, } from './feedback.js';
-import { Checkbox, Drop, Field, Input, Radio, Search, Seg, SegGroup, Select, SelectAnchor, SelectTrigger, Switch, Textarea, } from './forms.js';
+import { Avatar, Break, Cell, Chip, ChipRow, Cite, CiteRow, Code, CodeBlock, FileType, Fold, KV, KVRow, Kbd, List, ListMain, ListName, ListRow, Meta, MetaRow, Row, Table, TableHead, Trunc, Unwrap, } from './data.js';
+import { Alert, Badge, Caret, Dot, Empty, Loading, Progress, Skeleton, Spinner, Status, Tooltip, } from './feedback.js';
+import { Checkbox, Drop, Field, Input, InputAffix, Radio, Range, Search, Seg, SegGroup, Select, SelectAnchor, SelectTrigger, Switch, Textarea, } from './forms.js';
 import { ICONES, Icon, IconButton, NOMS_ICONES } from './icon.js';
-import { CTA, Col, Footer, FooterMini, Grid, Grid12, Gutter, Hero, Nav, NavLink, NavLinks, NavLogo, ProofBar, SectionHead, SectionRule, SheetSection, Stat, Stats, Step, Steps, } from './layout.js';
-import { ChromeButton, CitePanel, Crumbs, Menu, MenuItem, Pager, PagerArrow, PagerRank, PagerStep, Scroll, SideGroup, SideLink, Sidebar, SidebarFoot, SidebarHead, Tabs, Topbar, TopbarTitle, } from './navigation.js';
+import { Banner, CTA, Carousel, CarouselItem, Col, Footer, FooterMini, Grid, Grid12, Gutter, Hero, Nav, NavLink, NavLinks, NavLogo, ProofBar, SectionHead, SectionRule, SheetSection, Stat, Stats, Step, Steps, } from './layout.js';
+import { ChromeButton, CitePanel, Crumbs, Menu, MenuItem, Pager, PagerArrow, PagerRank, PagerStep, Popover, Scroll, SideGroup, SideLink, Sidebar, SidebarFoot, SidebarHead, Tabs, Topbar, TopbarTitle, } from './navigation.js';
 import { Drawer, Modal, Toast, Toasts } from './overlays.js';
 import { SelectMenu } from './select-menu.js';
-import { Band, Fade, Glyph, GridFloor, Halo, PanelNavy, TextOnDark, anim } from './surfaces.js';
+import { Band, Fade, Glyph, GridFloor, Halo, PanelNavy, SocialFrame, TextOnDark, anim, } from './surfaces.js';
 import { Body, CardTitle, Display, Em, H1, H2, H3, Heading, Kicker, Lead, Link, Mono, Note, Rule, Spec, Tagline, } from './typography.js';
 /* ── Démonstrations qui ont besoin d'état ─────────────────────────── */
 function DemoSwitch() {
@@ -81,6 +81,22 @@ function DemoDrop() {
             setSurvol(false);
         } }));
 }
+function DemoRange() {
+    const [sources, setSources] = useState(12);
+    return (_jsx("div", { style: { maxWidth: 320 }, children: _jsx(Field, { label: "SOURCES INTERROG\u00C9ES", htmlFor: "ex-range", help: `${sources} sources sur 17`, children: _jsx(Range, { id: "ex-range", min: 1, max: 17, value: sources, onChange: (e) => setSources(Number(e.currentTarget.value)) }) }) }));
+}
+function DemoTabsLine() {
+    const [actif, setActif] = useState('apercu');
+    return (_jsx(Tabs, { variante: "soulignes", actif: actif, onChange: setActif, onglets: [
+            { id: 'apercu', label: 'Aperçu' },
+            { id: 'sources', label: 'Sources', compte: 12 },
+            { id: 'journal', label: 'Journal' },
+        ] }));
+}
+function DemoPopover() {
+    const [ouvert, setOuvert] = useState(false);
+    return (_jsxs(SelectAnchor, { children: [_jsx(Button, { variante: "fantome", compact: true, "aria-expanded": ouvert, onClick: () => setOuvert(!ouvert), children: "Colonnes affich\u00E9es" }), ouvert && (_jsx(Popover, { children: _jsx("div", { style: { display: 'grid', gap: 8 }, children: ['Nom', 'Taille', 'Statut'].map((c) => (_jsxs("label", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsx(Checkbox, { defaultChecked: c !== 'Taille' }), _jsx("span", { className: "zv-body zv-body--dense", children: c })] }, c))) }) }))] }));
+}
 /* ── Le catalogue ─────────────────────────────────────────────────── */
 export const CATALOGUE = [
     {
@@ -152,7 +168,7 @@ export const CATALOGUE = [
         nom: 'Actions',
         couche: 'commun',
         css: 'components.css',
-        resume: "Trois variantes, et UNE SEULE pleine par page : c'est ce qui fait que l'action principale se voit. Un écran à deux boutons pleins n'en a plus aucun.",
+        resume: "Quatre variantes, et UNE SEULE pleine par page — « danger » comprise, la règle compte les aplats, pas les couleurs : c'est ce qui fait que l'action principale se voit. Un écran à deux boutons pleins n'en a plus aucun.",
         exemples: [
             {
                 id: 'boutons',
@@ -174,6 +190,15 @@ export const CATALOGUE = [
 <ButtonLink href="/tarifs" variante="fantome">Voir les tarifs</ButtonLink>`,
                 rendu: (_jsxs("div", { style: { display: 'grid', gap: 10, maxWidth: 280 }, children: [_jsxs(ButtonRow, { children: [_jsx(Button, { compact: true, children: "Enregistrer" }), _jsx(ButtonLink, { href: "#", variante: "fantome", compact: true, children: "Voir les tarifs" })] }), _jsx(Button, { bloc: true, children: "Se connecter" })] })),
             },
+            {
+                id: 'etats',
+                nom: 'États',
+                resume: '« danger » COMPTE comme le bouton plein de la page — la règle compte les aplats, pas les couleurs ; à réserver à la confirmation destructive. « occupe » pose aria-busy et aria-disabled et AVALE le clic sans sortir le bouton du parcours clavier : le LIBELLÉ doit changer avec lui, l’estompement seul ne dit pas ce qu’on attend. Survol et appui sont dans le CSS, rien à câbler.',
+                code: `<Button variante="danger">Supprimer définitivement</Button>
+<Button occupe>Connexion…</Button>
+<Button variante="fantome" disabled>Envoyer</Button>`,
+                rendu: (_jsxs(ButtonRow, { children: [_jsx(Button, { variante: "danger", children: "Supprimer d\u00E9finitivement" }), _jsx(Button, { occupe: true, children: "Connexion\u2026" }), _jsx(Button, { variante: "fantome", disabled: true, children: "Envoyer" })] })),
+            },
             {
                 id: 'lien-fleche',
                 nom: 'Lien fléché',
@@ -261,6 +286,27 @@ export const CATALOGUE = [
 <Switch on={on} texte="ACTIVÉ" onClick={…} />`,
                 rendu: (_jsxs("div", { style: { display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsxs("label", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsx(Checkbox, { defaultChecked: true }), " ", _jsx("span", { className: "zv-body zv-body--dense", children: "Anonymiser" })] }), _jsxs("label", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsx(Radio, { name: "ex-r", defaultChecked: true }), " ", _jsx("span", { className: "zv-body zv-body--dense", children: "Tout" })] }), _jsx(DemoSwitch, {})] })),
             },
+            {
+                id: 'affixe',
+                nom: 'Champ à affixe',
+                resume: '« 30 », seul dans un champ, ne dit pas s’il s’agit de jours ou d’euros. Le champ intérieur est un <Input nu> : c’est le CADRE qui fait le champ. Les identifiants d’affixe (idAvant/idApres) se citent en aria-describedby sur le champ, sinon l’unité reste muette au lecteur d’écran. À ne pas employer quand l’unité est déjà dans l’intitulé.',
+                code: `<Field label="HONORAIRES" htmlFor="hono">
+  <InputAffix avant="€" apres="HT" idAvant="hono-avant" idApres="hono-apres">
+    <Input nu id="hono" type="number" defaultValue={1200}
+           aria-describedby="hono-avant hono-apres" />
+  </InputAffix>
+</Field>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 16, maxWidth: 320 }, children: [_jsx(Field, { label: "D\u00C9LAI DE R\u00C9PONSE", htmlFor: "ex-delai", children: _jsx(InputAffix, { apres: "JOURS", idApres: "ex-delai-apres", children: _jsx(Input, { nu: true, id: "ex-delai", type: "number", defaultValue: 30, "aria-describedby": "ex-delai-apres" }) }) }), _jsx(Field, { label: "HONORAIRES", htmlFor: "ex-hono", children: _jsx(InputAffix, { avant: "\u20AC", apres: "HT", idAvant: "ex-hono-avant", idApres: "ex-hono-apres", children: _jsx(Input, { nu: true, id: "ex-hono", type: "number", defaultValue: 1200, "aria-describedby": "ex-hono-avant ex-hono-apres" }) }) })] })),
+            },
+            {
+                id: 'curseur',
+                nom: 'Curseur',
+                resume: 'Natif habillé : clavier, bornes et annonce viennent du navigateur ; le remplissage suit la valeur en contrôlé. Toujours un intitulé ET la valeur affichée en clair — un curseur seul ne dit ni ce qu’il règle, ni sur combien. Pas de spectre sur la piste : ce n’est pas une barre de progression.',
+                code: `<Field label="SOURCES INTERROGÉES" htmlFor="prof" help={\`\${sources} sources sur 17\`}>
+  <Range id="prof" min={1} max={17} value={sources} onChange={…} />
+</Field>`,
+                rendu: _jsx(DemoRange, {}),
+            },
             {
                 id: 'puces',
                 nom: 'Puces de filtre',
@@ -286,7 +332,7 @@ export const CATALOGUE = [
         nom: 'Retours',
         couche: 'applicatif',
         css: 'feedback.css',
-        resume: "Rien n'est interactif ici. ⚠️ Ni roue, ni squelette, ni infobulle : le CSS n'en a aucun, parce que le relevé de production n'en contenait aucun. Le travail en cours se dit par « Loading », qui nomme ce qu'on attend.",
+        resume: "Rien n'y crie : le bandeau porte le ton, la pastille l'état, la phrase le travail. La roue, le squelette et l'infobulle — longtemps refusés faute de relevé — sont arbitrés depuis le 25/08/2026 (DECISIONS.md), chacun avec son périmètre écrit ; « Loading », qui nomme ce qu'on attend, reste le motif d'attente par défaut.",
         exemples: [
             {
                 id: 'alertes',
@@ -334,6 +380,34 @@ export const CATALOGUE = [
 <span>…réponse en cours<Caret /></span>`,
                 rendu: (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsx(Loading, { children: "Recherche dans 4 812 documents anonymis\u00E9s\u2026" }), _jsx(Progress, { valeur: 0.62, label: "Indexation" }), _jsxs("span", { className: "zv-body zv-body--dense", children: ["La clause de non-concurrence est limit\u00E9e \u00E0 vingt-quatre mois", _jsx(Caret, {})] })] })),
             },
+            {
+                id: 'roue',
+                nom: 'Roue',
+                resume: 'Attente COURTE et LOCALE : un bouton, une cellule, un panneau sans la place d’une phrase. Pour l’attente d’un écran, « Loading » reste le motif — la phrase dit sur quoi et sur combien. Sans label, la roue est décorative et masquée aux lecteurs d’écran.',
+                code: `<Spinner label="Vérification du dépôt…" />
+<Spinner grand />`,
+                rendu: (_jsxs("div", { style: { display: 'flex', gap: 16, alignItems: 'center' }, children: [_jsx(Spinner, { label: "V\u00E9rification du d\u00E9p\u00F4t\u2026" }), _jsx(Spinner, { grand: true })] })),
+            },
+            {
+                id: 'squelette',
+                nom: 'Squelette',
+                resume: 'Il ANNONCE une structure connue — la carte, la ligne qui va venir ; pour un contenu de forme inconnue, c’est « Loading ». La géométrie vient de l’appelant : un squelette qui invente ses dimensions ne ressemble jamais au contenu. C’est la zone qui charge qui porte aria-busy, pas chaque os.',
+                code: `<div aria-busy="true">
+  <Skeleton texte largeur="60%" />
+  <Skeleton texte />
+  <Skeleton hauteur={96} />
+</div>`,
+                rendu: (_jsxs("div", { "aria-busy": "true", style: { display: 'grid', gap: 10, maxWidth: 380 }, children: [_jsx(Skeleton, { texte: true, largeur: "60%" }), _jsx(Skeleton, { texte: true }), _jsx(Skeleton, { hauteur: 96 })] })),
+            },
+            {
+                id: 'infobulle',
+                nom: 'Infobulle',
+                resume: 'Un COMPLÉMENT dispensable — un raccourci, une date exacte, une unité : une commande n’a pas le droit d’y cacher son nom, et le tactile ne survole pas. Liage aria-describedby EXPLICITE (id), comme le htmlFor de Field — pas de useId, le rendu serveur reste possible. Apparition retardée de 300 ms, disparition immédiate, Échap la ferme.',
+                code: `<Tooltip id="th-date" contenu="Déposé le 12/08/2026 à 14 h 02">
+  <Button variante="fantome" compact aria-describedby="th-date">12 août</Button>
+</Tooltip>`,
+                rendu: (_jsx("div", { style: { paddingTop: 44 }, children: _jsx(Tooltip, { id: "ex-th-date", contenu: "D\u00E9pos\u00E9 le 12/08/2026 \u00E0 14 h 02", children: _jsx(Button, { variante: "fantome", compact: true, "aria-describedby": "ex-th-date", children: "12 ao\u00FBt" }) }) })),
+            },
         ],
     },
     {
@@ -521,6 +595,22 @@ export const CATALOGUE = [
                 code: `<FileType format="pdf" /> <FileType format="docx" />`,
                 rendu: (_jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx(FileType, { format: "pdf" }), _jsx(FileType, { format: "docx" })] })),
             },
+            {
+                id: 'depliant',
+                nom: 'Rangée dépliante',
+                resume: '<details> NATIF : clavier, annonce et état viennent du navigateur, aucun JavaScript. Le pliage APPLICATIF — options avancées, détail d’une ligne de journal ; la FAQ (contenu) reste celui de la vitrine. Plusieurs rangées se posent bord à bord, le filet mitoyen tombe seul.',
+                code: `<Fold titre="Options avancées">…</Fold>
+<Fold titre="Journal d'indexation" ouvert>…</Fold>`,
+                rendu: (_jsxs("div", { style: { maxWidth: 420 }, children: [_jsx(Fold, { titre: "Options avanc\u00E9es", children: "P\u00E9rim\u00E8tre, profondeur et sources exclues se r\u00E8glent par dossier, jamais par requ\u00EAte." }), _jsx(Fold, { titre: "Journal d\u2019indexation", ouvert: true, children: "Re\u00E7u, OCR, indexation : chaque \u00E9tape est dat\u00E9e, et l\u2019\u00E9chec d\u2019une page n\u2019interrompt pas les suivantes." })] })),
+            },
+            {
+                id: 'code',
+                nom: 'Code et raccourcis',
+                resume: 'La chasse fixe RÉELLE (--font-code) : --font-mono est proportionnelle et n’aligne pas du code, tabular-nums n’aligne que les chiffres. Aucune coloration syntaxique — elle imposerait une palette que la charte n’a pas. « ⌘K » fait DEUX touches, donc deux Kbd.',
+                code: `<Body>Lancer <Code>pnpm build</Code>, puis <Kbd>⌘</Kbd> <Kbd>K</Kbd>.</Body>
+<CodeBlock>claude mcp add --transport http zevra-design …</CodeBlock>`,
+                rendu: (_jsxs("div", { style: { display: 'grid', gap: 12, maxWidth: 520 }, children: [_jsxs(Body, { taille: "dense", children: ["Lancer ", _jsx(Code, { children: "pnpm build" }), ", puis ouvrir la recherche avec ", _jsx(Kbd, { children: "\u2318" }), ' ', _jsx(Kbd, { children: "K" }), "."] }), _jsx(CodeBlock, { children: 'claude mcp add --transport http zevra-design \\\n  https://mcp.design.zevra.tech/mcp --scope user' })] })),
+            },
         ],
     },
     {
@@ -563,14 +653,34 @@ export const CATALOGUE = [
             },
             {
                 id: 'onglets',
-                nom: 'Onglets',
-                resume: '⚠️ Il n’existe AUCUNE classe d’onglet dans le CSS : une rangée d’onglets EST une rangée de puces. Ce composant n’ajoute que l’ARIA, pas un style de plus. L’onglet souligné reste à arbitrer avec la DA.',
+                nom: 'Onglets en puces',
+                resume: 'La rangée de puces, grammaire d’état de Seg — le motif des FILTRES, qui restreignent une collection. Ce composant n’ajoute que l’ARIA. Pour les VUES d’un même objet, prendre la variante soulignée.',
                 code: `<Tabs actif={actif} onChange={setActif} onglets={[
   { id: 'apercu', label: 'Aperçu' },
   { id: 'sources', label: 'Sources', compte: 12 },
 ]} />`,
                 rendu: _jsx(DemoTabs, {}),
             },
+            {
+                id: 'onglets-soulignes',
+                nom: 'Onglets soulignés',
+                resume: 'L’arbitrage longtemps en attente, tranché le 25/08/2026 : trait actif de 2 px — l’épaisseur des filets dessinés du système — en accent, PAS en spectre (un quatrième emploi n’existe pas). Pour les VUES d’un même objet (Aperçu / Sources) ; pour filtrer, les puces.',
+                code: `<Tabs variante="soulignes" actif={actif} onChange={setActif} onglets={[
+  { id: 'apercu', label: 'Aperçu' },
+  { id: 'sources', label: 'Sources', compte: 12 },
+]} />`,
+                rendu: _jsx(DemoTabsLine, {}),
+            },
+            {
+                id: 'popover',
+                nom: 'Popover',
+                resume: 'Surface ancrée LIBRE — aide contextuelle, mini-formulaire de filtre — dans la même ancre que le menu (SelectAnchor). Ce n’est PAS une infobulle : le popover s’ouvre au CLIC et peut porter de l’interactif. Fermeture par clic extérieur et Échap : à l’appelant, comme pour le menu.',
+                code: `<SelectAnchor>
+  <Button variante="fantome" compact aria-expanded={ouvert} onClick={…}>Colonnes affichées</Button>
+  {ouvert && <Popover>…</Popover>}
+</SelectAnchor>`,
+                rendu: _jsx(DemoPopover, {}),
+            },
             {
                 id: 'pagination',
                 nom: 'Pagination',
@@ -650,7 +760,7 @@ export const CATALOGUE = [
         nom: 'Icônes',
         couche: 'commun',
         css: 'icons.css',
-        resume: "34 icônes TRACÉES, jamais pleines : trait 2, bouts arrondis, grille de 24. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
+        resume: "55 icônes TRACÉES, jamais pleines : trait 2, bouts arrondis, grille de 24. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
         exemples: [
             {
                 id: 'jeu',
@@ -831,6 +941,33 @@ export const CATALOGUE = [
 <OnlyMobile><NavBurger aria-label="Menu">…</NavBurger></OnlyMobile>`,
                 rendu: (_jsxs("div", { style: { display: 'flex', gap: 10 }, children: [_jsx("span", { className: "zv-only-desktop", children: _jsx(Badge, { ton: "accent", children: "VISIBLE \u2265 768" }) }), _jsx("span", { className: "zv-only-mobile", children: _jsx(Badge, { ton: "accent", children: "VISIBLE < 768" }) })] })),
             },
+            {
+                id: 'bandeau',
+                nom: 'Bandeau d’annonce',
+                resume: 'La bande AU-DESSUS de la barre de navigation : annonce de version, information réglementaire. UN SEUL par page, et jamais pour du marketing permanent — un bandeau qui ne part pas devient un bourrelet de chrome. Le lien s’y souligne : sur un fond déjà indigo, la couleur seule ne le distingue plus.',
+                code: `<Banner>
+  La charte 0.8 est en ligne — angles vifs sur tout le système.{' '}
+  <a href="/journal">Ce qui change</a>
+</Banner>`,
+                rendu: (_jsxs(Banner, { children: ["La charte 0.8 est en ligne \u2014 angles vifs sur tout le syst\u00E8me.", ' ', _jsx("a", { href: "#", children: "Ce qui change" })] })),
+            },
+            {
+                id: 'carrousel',
+                nom: 'Carrousel',
+                resume: 'Défilement natif scroll-snap, AUCUN JavaScript : pas de flèches, pas de points ; le conteneur prend le focus, et son label est OBLIGATOIRE — une région qui défile sans nom est une énigme au lecteur d’écran. Un carrousel reste un aveu d’espace : la règle de variété lui préfère une grille tant que le contenu tient.',
+                code: `<Carousel label="La suite Zevra">
+  <CarouselItem style={{ width: 260 }}>
+    <Card>…</Card>
+  </CarouselItem>
+  …
+</Carousel>`,
+                rendu: (_jsx("div", { style: { maxWidth: 560 }, children: _jsx(Carousel, { label: "La suite Zevra", children: [
+                            ['Mémoire', 'Votre savoir, interrogeable en une phrase.'],
+                            ['Lexform', 'Vos actes, anonymisés à la volée.'],
+                            ['Campus', 'La profession qui se rééquipe se forme.'],
+                            ['MCP juridique', 'Vos sources, branchées sur vos agents.'],
+                        ].map(([nom, phrase]) => (_jsx(CarouselItem, { style: { width: 240 }, children: _jsx(Card, { children: _jsxs("div", { style: { display: 'grid', gap: 8 }, children: [_jsx(CardTitle, { children: nom }), _jsx(Body, { taille: "dense", children: phrase })] }) }) }, nom))) }) })),
+            },
         ],
     },
     {
@@ -893,6 +1030,18 @@ export const CATALOGUE = [
 <div className={anim('converge', 'tr')}>…</div>`,
                 rendu: (_jsx("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap' }, children: ['rise', 'pop', 'filet', 'glyph-in', 'converge', 'breathe', 'drift', 'dot-active', 'progress'].map((nom) => (_jsx("span", { className: anim(nom), children: _jsx(Chip, { variante: "mono", children: nom }) }, nom))) })),
             },
+            {
+                id: 'format-social',
+                nom: 'Formats sociaux',
+                resume: 'Planches d’EXPORT — paysage 1200×630 (OpenGraph, lien LinkedIn), carré 1080 (post), story 1080×1920 — FIGÉES en pixels : on les capture, on ne les publie pas en HTML, et elles ignorent le point de rupture. Un visuel social EST une publication : jamais de faux chiffre ni de fausse citation. Rendue ici à l’échelle 0,35.',
+                code: `<SocialFrame manifeste pied={<><Mono ton="on-dark">ZEVRA</Mono><Mono ton="on-dark">zevra.tech</Mono></>}>
+  <Kicker surSombre><Mono ton="on-dark">Manifeste · Article 1ᵉʳ</Mono></Kicker>
+  <Heading taille="h2" as="p">
+    Émanciper les avocats et les juristes des outils qu'on leur <Em surSombre>impose</Em>.
+  </Heading>
+</SocialFrame>`,
+                rendu: (_jsx("div", { style: { width: 421, height: 221, overflow: 'hidden' }, children: _jsx("div", { style: { transform: 'scale(0.35)', transformOrigin: 'top left' }, children: _jsxs(SocialFrame, { manifeste: true, pied: _jsxs(_Fragment, { children: [_jsx(Mono, { ton: "on-dark", children: "ZEVRA" }), _jsx(Mono, { ton: "on-dark", children: "zevra.tech" })] }), children: [_jsx(Kicker, { surSombre: true, children: _jsx(Mono, { ton: "on-dark", children: "Manifeste \u00B7 Article 1\u1D49\u02B3" }) }), _jsxs(Heading, { taille: "h2", as: "p", children: ["\u00C9manciper les avocats et les juristes des outils qu\u2019on leur", ' ', _jsx(Em, { surSombre: true, children: "impose" }), "."] })] }) }) })),
+            },
         ],
     },
 ];