@zevra/ui 0.8.0 → 0.10.0

package/react/data.tsx

@@ -5,7 +5,13 @@
 // et en carte empilée en dessous, sans dupliquer le balisage. `Unwrap` est la
 // primitive qui rend cela possible.
 
-import type { AnchorHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react'
+import type {
+  AnchorHTMLAttributes,
+  CSSProperties,
+  DetailsHTMLAttributes,
+  HTMLAttributes,
+  ReactNode,
+} from 'react'
 import { cx } from './cx.js'
 
 type Div = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
@@ -298,3 +304,83 @@ export function FileType({ format, className, ...reste }: FileTypeProps) {
     </span>
   )
 }
+
+/* ─── Rangée dépliante ─────────────────────────────────────────────── */
+
+export interface FoldProps
+  extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'className' | 'open'> {
+  titre: ReactNode
+  /** Ouverte au premier rendu. L'état vit ensuite dans le NAVIGATEUR
+   *  (<details> natif) : pas de prop contrôlée, pas de JavaScript — le
+   *  clavier et l'annonce viennent avec. `open` est retiré des attributs :
+   *  deux canaux pour le même état, et c'est le silencieux qui gagnerait. */
+  ouvert?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+/** Le pliage de l'applicatif : options avancées, détail d'une ligne de
+ *  journal. La FAQ (contenu) reste le pliage de la VITRINE — question en
+ *  14px, respiration éditoriale ; celui-ci est un chrome dense. Le chevron
+ *  fait partie du composant, comme la flèche de LinkArrow. */
+export function Fold({ titre, ouvert, className, children, ...reste }: FoldProps) {
+  return (
+    <details className={cx('zv-fold', className)} open={ouvert} {...reste}>
+      <summary className="zv-fold__titre">
+        {titre}
+        <svg
+          className="zv-fold__chevron"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M6.67 9.33 L12 14.67 L17.33 9.33" />
+        </svg>
+      </summary>
+      <div className="zv-fold__corps">{children}</div>
+    </details>
+  )
+}
+
+/* ─── Touche de clavier ────────────────────────────────────────────── */
+
+/** Une touche, une seule : « ⌘K » est DEUX touches, donc deux `Kbd` — les
+ *  fondre dans une seule dessine une touche qui n'existe sur aucun
+ *  clavier. */
+export function Kbd({
+  className,
+  ...reste
+}: Omit<HTMLAttributes<HTMLElement>, 'className'> & { className?: string }) {
+  return <kbd className={cx('zv-kbd', className)} {...reste} />
+}
+
+/* ─── Code ─────────────────────────────────────────────────────────── */
+
+/** Code EN LIGNE, dans une phrase : `pnpm build`. Taille relative au texte
+ *  qui l'accueille. Pour un extrait de plusieurs lignes, `CodeBlock`. */
+export function Code({
+  className,
+  ...reste
+}: Omit<HTMLAttributes<HTMLElement>, 'className'> & { className?: string }) {
+  return <code className={cx('zv-code', className)} {...reste} />
+}
+
+/** Bloc de code. Chasse fixe RÉELLE (--font-code) : --font-mono est
+ *  proportionnelle et n'aligne pas du code. Aucune coloration syntaxique —
+ *  elle imposerait une palette entière que la charte n'a pas. Le bloc
+ *  défile en son sein : une ligne longue ne pousse jamais la page. */
+export function CodeBlock({
+  className,
+  children,
+  ...reste
+}: Omit<HTMLAttributes<HTMLPreElement>, 'className'> & { className?: string }) {
+  return (
+    <pre className={cx('zv-codeblock', className)} {...reste}>
+      <code>{children}</code>
+    </pre>
+  )
+}

package/react/feedback.tsx

@@ -227,3 +227,101 @@ export function Progress({ valeur, label, className, ...reste }: ProgressProps)
     </div>
   )
 }
+
+/* ─── Roue ─────────────────────────────────────────────────────────── */
+
+export interface SpinnerProps extends Span {
+  /** En tête d'un panneau d'attente : la roue seule, plus grande. */
+  grand?: boolean
+  /** Ce qu'on attend, annoncé au lecteur d'écran. Sans lui la roue est
+   *  DÉCORATIVE et masquée — le bon défaut quand une phrase voisine dit
+   *  déjà le travail (`Loading`, ou le libellé d'un bouton `occupe`). */
+  label?: string
+  className?: string
+}
+
+/** Attente COURTE ET LOCALE : un bouton, une cellule, un panneau sans la
+ *  place d'une phrase. Pour l'attente d'un écran, préférer `Loading` — la
+ *  phrase qui dit le travail réel reste le motif par défaut du système.
+ *  Le libellé est un TEXTE masqué visuellement, pas un aria-label : sur un
+ *  span vide, l'aria-label n'est pas annoncé par tous les lecteurs. */
+export function Spinner({ grand, label, className, ...reste }: SpinnerProps) {
+  return (
+    <span
+      role={label ? 'status' : undefined}
+      aria-hidden={label ? undefined : true}
+      className={cx('zv-spinner', grand && 'zv-spinner--lg', className)}
+      {...reste}
+    >
+      {label && <span className="zv-sr-only">{label}</span>}
+    </span>
+  )
+}
+
+/* ─── Squelette ────────────────────────────────────────────────────── */
+
+export interface SkeletonProps extends Div {
+  /** Une ligne de texte (hauteur d'un cadratin) plutôt qu'un bloc libre. */
+  texte?: boolean
+  /** La géométrie vient du CONSOMMATEUR : un squelette qui invente ses
+   *  dimensions ne ressemble jamais au contenu qu'il annonce. */
+  largeur?: number | string
+  hauteur?: number | string
+  className?: string
+}
+
+/** Il ANNONCE une structure connue (la carte, la ligne qui va venir) — pour
+ *  un contenu dont la forme est inconnue, c'est `Loading` qui dit ce cas.
+ *  Le squelette est masqué aux lecteurs d'écran : c'est la zone qui charge
+ *  qui porte aria-busy, pas chaque os. */
+export function Skeleton({ texte, largeur, hauteur, className, style, ...reste }: SkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cx('zv-skeleton', texte && 'zv-skeleton--text', className)}
+      style={{ width: largeur, height: hauteur, ...style }}
+      {...reste}
+    />
+  )
+}
+
+/* ─── Infobulle ────────────────────────────────────────────────────── */
+
+export interface TooltipProps extends Span {
+  /** Le complément — un raccourci, une date exacte, une unité. JAMAIS le
+   *  nom de la commande : lui vit sur la cible (libellé ou aria-label), une
+   *  infobulle n'existe pas au doigt. */
+  contenu: ReactNode
+  /** Identifiant EXPLICITE, à répéter en `aria-describedby` sur la cible —
+   *  le contrat du couple htmlFor/id de Field, pour la même raison : pas de
+   *  useId, le composant reste rendu au serveur. */
+  id?: string
+  /** Sous la cible, pour les rares cas où le haut est occupé. */
+  bas?: boolean
+  className?: string
+  /** La cible. Elle doit être FOCALISABLE (un bouton, un lien) : c'est son
+   *  focus qui montre l'infobulle au clavier. */
+  children?: ReactNode
+}
+
+/** Échap ferme la bulle jusqu'au blur (WCAG 1.4.13) : la classe est posée
+ *  sur le nœud sans état React — le composant reste rendu au serveur, et
+ *  sans script la bulle reste simplement au comportement survol/focus. */
+export function Tooltip({ contenu, id, bas, className, children, ...reste }: TooltipProps) {
+  return (
+    <span
+      className={cx('zv-tooltip-hit', className)}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') e.currentTarget.classList.add('zv-tooltip-hit--off')
+      }}
+      onBlur={(e) => e.currentTarget.classList.remove('zv-tooltip-hit--off')}
+      onMouseLeave={(e) => e.currentTarget.classList.remove('zv-tooltip-hit--off')}
+      {...reste}
+    >
+      {children}
+      <span role="tooltip" id={id} className={cx('zv-tooltip', bas && 'zv-tooltip--bas')}>
+        {contenu}
+      </span>
+    </span>
+  )
+}

package/react/forms.tsx

@@ -13,6 +13,7 @@
 
 import type {
   ButtonHTMLAttributes,
+  CSSProperties,
   HTMLAttributes,
   InputHTMLAttributes,
   ReactNode,
@@ -381,3 +382,92 @@ export function DropInput({
 }) {
   return <input type="file" className={cx('zv-drop__input', className)} {...reste} />
 }
+
+/* ─── Champ à affixe ───────────────────────────────────────────────── */
+
+export interface InputAffixProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  /** Préfixe, en mono label : « € », « HT ». Une unité est un libellé, pas
+   *  une donnée — elle ne se saisit pas, elle qualifie ce qui est saisi. */
+  avant?: ReactNode
+  /** Suffixe : « JOURS », « / MOIS », « .zevra.tech ». */
+  apres?: ReactNode
+  /** Identifiants EXPLICITES des affixes, à citer dans `aria-describedby`
+   *  sur le champ intérieur — le contrat htmlFor/id de `Field`, pour la
+   *  même raison : pas de useId, le composant reste rendu au serveur.
+   *  ⚠️ Sans ce câblage, un lecteur d'écran en mode formulaire entend
+   *  « 1200 » sans jamais apprendre qu'il s'agit d'euros HT — exactement le
+   *  défaut que le composant existe pour corriger. */
+  idAvant?: string
+  idApres?: string
+  className?: string
+  /** Le champ lui-même — un `<Input nu>` : c'est le CADRE qui fait le champ,
+   *  un `<Input>` bordé dessinerait deux cadres imbriqués. */
+  children?: ReactNode
+}
+
+/** Cadre à affixe : « 30 », seul dans un champ, ne dit pas s'il s'agit de
+ *  jours ou d'euros. Même grammaire que `Search` (cadre + champ nu) ; à ne
+ *  pas employer quand l'unité est déjà dans l'intitulé du champ — deux fois
+ *  la même unité se lisent comme deux informations. */
+export function InputAffix({
+  avant,
+  apres,
+  idAvant,
+  idApres,
+  className,
+  children,
+  ...reste
+}: InputAffixProps) {
+  return (
+    <div className={cx('zv-affix', className)} {...reste}>
+      {avant != null && (
+        <span className="zv-affix__add" id={idAvant}>
+          {avant}
+        </span>
+      )}
+      {children}
+      {apres != null && (
+        <span className="zv-affix__add" id={idApres}>
+          {apres}
+        </span>
+      )}
+    </div>
+  )
+}
+
+/* ─── Curseur ──────────────────────────────────────────────────────── */
+
+export interface RangeProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
+  className?: string
+}
+
+/** Curseur natif habillé (`<input type="range">`) : clavier, annonce et
+ *  bornes viennent du navigateur. Le remplissage de la piste est calculé
+ *  ici depuis value/min/max — une géométrie, comme la largeur de
+ *  `Progress`, pas une valeur de charte. En NON contrôlé, il reflète la
+ *  valeur initiale et ne suit plus le doigt : contrôler le champ dès que le
+ *  remplissage doit suivre.
+ *  ⚠️ Toujours accompagné d'un intitulé (`Field`) ET d'une valeur affichée
+ *  en clair : un curseur seul ne dit ni ce qu'il règle, ni sur combien. */
+export function Range({ className, style, min, max, value, defaultValue, ...reste }: RangeProps) {
+  const borneMin = Number(min ?? 0)
+  const borneMax = Number(max ?? 100)
+  const courant = Number(value ?? defaultValue ?? NaN)
+  const part = Number.isNaN(courant)
+    ? 0.5
+    : Math.min(1, Math.max(0, (courant - borneMin) / (borneMax - borneMin || 1)))
+  return (
+    <input
+      type="range"
+      min={min}
+      max={max}
+      value={value}
+      defaultValue={defaultValue}
+      className={cx('zv-range', className)}
+      style={{ ...style, '--zv-range-pos': `${part * 100}%` } as CSSProperties}
+      {...reste}
+    />
+  )
+}

package/react/icon-data.ts

@@ -4,28 +4,45 @@
 export type IconId =
   | 'accueil'
   | 'activite'
+  | 'aide'
   | 'app-couches'
   | 'archiver'
+  | 'attention'
+  | 'balance'
   | 'base-de-donnees'
   | 'bouclier-verifie'
   | 'cadenas'
   | 'cadrer'
+  | 'calendrier'
   | 'chevron-bas'
   | 'chevron-droit'
   | 'chevron-gauche'
+  | 'chevron-haut'
   | 'coche'
   | 'copier'
   | 'corbeille'
+  | 'courriel'
   | 'cube'
   | 'deconnexion'
   | 'depot-fichier'
+  | 'diplome'
   | 'dossier'
   | 'eclair'
+  | 'envoyer'
+  | 'epingle'
   | 'equipe'
   | 'etincelles'
+  | 'etoile'
   | 'fermer'
+  | 'fichier'
+  | 'filtre'
+  | 'globe'
+  | 'graphique'
   | 'horloge'
+  | 'imprimante'
+  | 'info'
   | 'lien-externe'
+  | 'livre-ouvert'
   | 'menu'
   | 'moins'
   | 'oeil'
@@ -35,33 +52,54 @@ export type IconId =
   | 'reglages'
   | 'reseau'
   | 'taches'
+  | 'telecharger'
+  | 'telephone'
+  | 'tri'
   | 'trois-points'
+  | 'utilisateur'
 
 export const CORPS: Record<IconId, string> = {
   'accueil': "<path d=\"M4 10.67 L12 4 L20 10.67 V20 H4 Z\" /><path d=\"M9.33 20 V13.33 H14.67 V20\" />",
   'activite': "<path d=\"M3.33 12 H8 L10.67 5.33 L14 18.67 L16 12 H20.67\" />",
+  'aide': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M9.33 9.33 A2.67 2.67 0 0 1 14.53 10.13 C14.53 11.87 12 12.27 12 14\" /><circle cx=\"12\" cy=\"17.07\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" />",
   'app-couches': "<path d=\"M12 2.67 L20 6.67 L12 10.67 L4 6.67 Z\" /><path d=\"M4 12 L12 16 L20 12\" /><path d=\"M4 17.33 L12 21.33 L20 17.33\" />",
   'archiver': "<rect x=\"3.33\" y=\"4\" width=\"17.33\" height=\"4.67\" rx=\"1.07\" /><path d=\"M5.33 8.67 V18.93 A1.07 1.07 0 0 0 6.4 20 H17.6 A1.07 1.07 0 0 0 18.67 18.93 V8.67\" /><path d=\"M9.33 12.67 H14.67\" />",
+  'attention': "<path d=\"M10.67 3.87 L2.53 17.87 A1.55 1.55 0 0 0 3.87 20.19 H20.13 A1.55 1.55 0 0 0 21.47 17.87 L13.33 3.87 A1.54 1.54 0 0 0 10.67 3.87 Z\" /><path d=\"M12 9.33 V13.33\" /><circle cx=\"12\" cy=\"16.53\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" />",
+  'balance': "<path d=\"M12 3.33 V20.67\" /><path d=\"M8.67 20.67 H15.33\" /><path d=\"M5.33 6 H18.67\" /><path d=\"M6.67 6 L3.33 13.33\" /><path d=\"M6.67 6 L10 13.33\" /><path d=\"M3.33 13.33 A3.33 3.33 0 0 0 10 13.33\" /><path d=\"M17.33 6 L14 13.33\" /><path d=\"M17.33 6 L20.67 13.33\" /><path d=\"M14 13.33 A3.33 3.33 0 0 0 20.67 13.33\" />",
   'base-de-donnees': "<ellipse cx=\"12\" cy=\"6\" rx=\"7.33\" ry=\"2.67\" /><path d=\"M4.67 6 V12 C4.67 13.47 7.87 14.67 12 14.67 C16.13 14.67 19.33 13.47 19.33 12 V6\" /><path d=\"M4.67 12 V18 C4.67 19.47 7.87 20.67 12 20.67 C16.13 20.67 19.33 19.47 19.33 18 V12\" />",
   'bouclier-verifie': "<path d=\"M12 2.67 L20 6 V12 C20 16.67 16.67 19.73 12 21.33 C7.33 19.73 4 16.67 4 12 V6 Z\" /><path d=\"M8.67 12 L11.07 14.4 L15.33 10\" />",
   'cadenas': "<rect x=\"4.67\" y=\"10.67\" width=\"14.67\" height=\"9.33\" rx=\"1.6\" /><path d=\"M8 10.67 V7.33 A4 4 0 0 1 16 7.33 V10.67\" /><circle cx=\"12\" cy=\"15.33\" r=\"1.33\" />",
   'cadrer': "<path d=\"M4 8 V4 H8\" /><path d=\"M20 8 V4 H16\" /><path d=\"M4 16 V20 H8\" /><path d=\"M20 16 V20 H16\" />",
+  'calendrier': "<rect x=\"3.33\" y=\"4.67\" width=\"17.33\" height=\"16\" rx=\"1.33\" /><path d=\"M3.33 9.33 H20.67\" /><path d=\"M8 2.67 V6.67\" /><path d=\"M16 2.67 V6.67\" />",
   'chevron-bas': "<path d=\"M6.67 9.33 L12 14.67 L17.33 9.33\" />",
   'chevron-droit': "<path d=\"M9.33 4 L17.33 12 L9.33 20\" />",
   'chevron-gauche': "<path d=\"M14.67 4 L6.67 12 L14.67 20\" />",
+  'chevron-haut': "<path d=\"M6.67 14.67 L12 9.33 L17.33 14.67\" />",
   'coche': "<path d=\"M5 12.4 L9.4 16.8 L19 6.8\" />",
   'copier': "<rect x=\"4\" y=\"4\" width=\"12\" height=\"12\" rx=\"1.6\" /><path d=\"M8 16 V18.93 A1.07 1.07 0 0 0 9.07 20 H18.93 A1.07 1.07 0 0 0 20 18.93 V9.07 A1.07 1.07 0 0 0 18.93 8 H16\" />",
   'corbeille': "<path d=\"M4 6.67 H20\" /><path d=\"M9.33 6.67 V4.67 A1.33 1.33 0 0 1 10.67 3.33 H13.33 A1.33 1.33 0 0 1 14.67 4.67 V6.67\" /><path d=\"M6 6.67 L6.93 18.93 A1.33 1.33 0 0 0 8.27 20 H15.73 A1.33 1.33 0 0 0 17.07 18.93 L18 6.67\" /><path d=\"M10 10.67 V16.67\" /><path d=\"M14 10.67 V16.67\" />",
+  'courriel': "<rect x=\"2.67\" y=\"5.33\" width=\"18.67\" height=\"13.33\" rx=\"1.33\" /><path d=\"M2.67 7.33 L12 13.33 L21.33 7.33\" />",
   'cube': "<path d=\"M3.33 8 L12 4 L20.67 8 V16 L12 20 L3.33 16 Z\" /><path d=\"M3.33 8 L12 12 L20.67 8\" /><path d=\"M12 12 V20\" />",
   'deconnexion': "<path d=\"M14.67 4 H5.33 V20 H14.67\" /><path d=\"M10.67 12 H20\" /><path d=\"M16.67 8 L20.67 12 L16.67 16\" />",
   'depot-fichier': "<path d=\"M12 3.2 V14.4\" /><polyline points=\"7.6,10 12,14.4 16.4,10\" /><path d=\"M4 16.8 v2.4 a1.6 1.6 0 0 0 1.6 1.6 h12.8 a1.6 1.6 0 0 0 1.6-1.6 v-2.4\" />",
+  'diplome': "<path d=\"M2.67 9.33 L12 4.67 L21.33 9.33 L12 14 Z\" /><path d=\"M6.67 11.6 V16 C6.67 17.47 9.07 18.67 12 18.67 C14.93 18.67 17.33 17.47 17.33 16 V11.6\" /><path d=\"M21.33 9.33 V14.67\" />",
   'dossier': "<path d=\"M1.41 6.64a1.69 1.69 0 0 1 1.69-1.69h4.8l2.12 2.4h10.87a1.69 1.69 0 0 1 1.69 1.69v9.88a1.69 1.69 0 0 1-1.69 1.69H3.11A1.69 1.69 0 0 1 1.41 20.33V6.64Z\" />",
   'eclair': "<path d=\"M13.33 2.67 L5.33 13.33 H12 L10.67 21.33 L18.67 10.67 H12 Z\" />",
+  'envoyer': "<path d=\"M21.33 2.67 L10.67 13.33\" /><path d=\"M21.33 2.67 L14.67 21.33 L10.67 13.33 L2.67 9.33 Z\" />",
+  'epingle': "<path d=\"M12 21.33 C7.56 16.89 5.33 13.42 5.33 10.67 A6.67 6.67 0 0 1 18.67 10.67 C18.67 13.42 16.44 16.89 12 21.33 Z\" /><circle cx=\"12\" cy=\"10.67\" r=\"2.4\" />",
   'equipe': "<circle cx=\"9.33\" cy=\"8\" r=\"3.33\" /><path d=\"M3.33 20 C3.33 15.33 6 13.33 9.33 13.33 C12.67 13.33 15.33 15.33 15.33 20\" /><path d=\"M16 5.33 A2.93 2.93 0 0 1 16 11.07\" /><path d=\"M17.33 13.6 C19.73 14.27 20.67 16.4 20.67 20\" />",
   'etincelles': "<path d=\"M12 2.67 L13.87 8.8 L20 10.67 L13.87 12.53 L12 18.67 L10.13 12.53 L4 10.67 L10.13 8.8 Z\" /><path d=\"M19.33 16.67 L20 18.67 L22 19.33 L20 20 L19.33 22 L18.67 20 L16.67 19.33 L18.67 18.67 Z\" />",
+  'etoile': "<path d=\"M12 3.33 L14.67 8.53 L20.4 9.37 L16.2 13.4 L17.2 19.07 L12 16.4 L6.8 19.07 L7.8 13.4 L3.6 9.37 L9.33 8.53 Z\" />",
   'fermer': "<path d=\"M5.33 5.33 L18.67 18.67\" /><path d=\"M18.67 5.33 L5.33 18.67\" />",
+  'fichier': "<path d=\"M13.33 2.67 H6.67 A1.33 1.33 0 0 0 5.33 4 V20 A1.33 1.33 0 0 0 6.67 21.33 H17.33 A1.33 1.33 0 0 0 18.67 20 V8 Z\" /><path d=\"M13.33 2.67 V8 H18.67\" />",
+  'filtre': "<path d=\"M2.67 4 H21.33 L14.67 12.27 V18.67 L9.33 21.33 V12.27 Z\" />",
+  'globe': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M3.33 12 H20.67\" /><path d=\"M12 3.33 C14.22 5.64 15.47 8.71 15.47 12 C15.47 15.29 14.22 18.36 12 20.67 C9.78 18.36 8.53 15.29 8.53 12 C8.53 8.71 9.78 5.64 12 3.33 Z\" />",
+  'graphique': "<path d=\"M4 4 V20 H20\" /><path d=\"M8.67 20 V12.67\" /><path d=\"M12.67 20 V8\" /><path d=\"M16.67 20 V15.33\" />",
   'horloge': "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M12 6.67 V12 L15.33 14\" />",
+  'imprimante': "<path d=\"M6.67 8 V3.33 H17.33 V8\" /><path d=\"M6.67 17.33 H4.67 A1.33 1.33 0 0 1 3.33 16 V10.67 A1.33 1.33 0 0 1 4.67 9.33 H19.33 A1.33 1.33 0 0 1 20.67 10.67 V16 A1.33 1.33 0 0 1 19.33 17.33 H17.33\" /><rect x=\"6.67\" y=\"13.33\" width=\"10.67\" height=\"7.33\" rx=\"0.8\" />",
+  'info': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M12 11.33 V16\" /><circle cx=\"12\" cy=\"8\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" />",
   'lien-externe': "<path d=\"M10.67 4 H4 V20 H20 V13.33\" /><path d=\"M14.67 4 H20 V9.33\" /><path d=\"M20 4 L12 12\" />",
+  'livre-ouvert': "<path d=\"M2.67 5.33 C5.33 4.67 7.78 4.89 12 6.67 C16.22 4.89 18.67 4.67 21.33 5.33 V18 C18.67 17.33 16.22 17.56 12 19.33 C7.78 17.56 5.33 17.33 2.67 18 Z\" /><path d=\"M12 6.67 V19.33\" />",
   'menu': "<path d=\"M0 5.33 H24\" /><path d=\"M0 12 H24\" /><path d=\"M0 18.67 H24\" />",
   'moins': "<path d=\"M4 12 H20\" />",
   'oeil': "<path d=\"M2 12 C5.33 6.67 8.67 4.67 12 4.67 C15.33 4.67 18.67 6.67 22 12 C18.67 17.33 15.33 19.33 12 19.33 C8.67 19.33 5.33 17.33 2 12 Z\" /><circle cx=\"12\" cy=\"12\" r=\"2.67\" />",
@@ -71,7 +109,11 @@ export const CORPS: Record<IconId, string> = {
   'reglages': "<circle cx=\"12\" cy=\"12\" r=\"2.93\" /><path d=\"M12 2 V4.67 M12 19.33 V22 M2 12 H4.67 M19.33 12 H22 M4.8 4.8 L6.67 6.67 M17.33 17.33 L19.2 19.2 M19.2 4.8 L17.33 6.67 M6.67 17.33 L4.8 19.2\" />",
   'reseau': "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M4 12 H20\" /><path d=\"M12 4 C14.67 8 14.67 16 12 20\" /><path d=\"M12 4 C9.33 8 9.33 16 12 20\" />",
   'taches': "<path d=\"M4.67 6.67 L6.67 8.67 L10 5.33\" /><path d=\"M4.67 16 L6.67 18 L10 14.67\" /><path d=\"M13.33 7.33 H20\" /><path d=\"M13.33 16.67 H20\" />",
+  'telecharger': "<path d=\"M12 3.33 V15.33\" /><polyline points=\"6.67,10 12,15.33 17.33,10\" /><path d=\"M4.67 20.67 H19.33\" />",
+  'telephone': "<path d=\"M20.67 16.93 V19.33 A1.6 1.6 0 0 1 18.93 20.93 C16.13 20.67 13.47 19.67 11.2 18.13 C9.09 16.71 7.29 14.91 5.87 12.8 C4.33 10.52 3.33 7.85 3.07 5.05 A1.6 1.6 0 0 1 4.67 3.33 H7.07 A1.6 1.6 0 0 1 8.67 4.71 C8.79 5.83 9.04 6.93 9.4 7.97 A1.6 1.6 0 0 1 9.04 9.65 L8 10.69 C9.32 13.01 11.03 14.71 13.33 16 L14.37 14.96 A1.6 1.6 0 0 1 16.05 14.6 C17.09 14.96 18.19 15.21 19.31 15.33 A1.6 1.6 0 0 1 20.67 16.93 Z\" />",
+  'tri': "<path d=\"M8 4 V20\" /><path d=\"M4.67 7.33 L8 4 L11.33 7.33\" /><path d=\"M16 20 V4\" /><path d=\"M12.67 16.67 L16 20 L19.33 16.67\" />",
   'trois-points': "<circle cx=\"5.33\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"18.67\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" />",
+  'utilisateur': "<circle cx=\"12\" cy=\"8\" r=\"3.33\" /><path d=\"M5.33 20 C5.33 15.33 8.33 13.33 12 13.33 C15.67 13.33 18.67 15.33 18.67 20\" />",
 }
 
 /** Nom lisible de chaque icône — sert de titre accessible par défaut à
@@ -79,28 +121,45 @@ export const CORPS: Record<IconId, string> = {
 export const NOMS: Record<IconId, string> = {
   'accueil': "Accueil",
   'activite': "Activité (pouls)",
+  'aide': "Aide",
   'app-couches': "Application (couches)",
   'archiver': "Archiver",
+  'attention': "Attention (avertissement)",
+  'balance': "Balance (justice)",
   'base-de-donnees': "Base de données",
   'bouclier-verifie': "Bouclier vérifié (authentification)",
   'cadenas': "Cadenas (secret)",
   'cadrer': "Cadrer (ajuster à la vue)",
+  'calendrier': "Calendrier",
   'chevron-bas': "Chevron bas",
   'chevron-droit': "Chevron droit",
   'chevron-gauche': "Chevron gauche",
+  'chevron-haut': "Chevron haut",
   'coche': "Coche",
   'copier': "Copier",
   'corbeille': "Corbeille (supprimer)",
+  'courriel': "Courriel",
   'cube': "Cube (stockage objet)",
   'deconnexion': "Déconnexion",
   'depot-fichier': "Dépôt de fichier (zone de glisser-déposer)",
+  'diplome': "Diplôme (Campus)",
   'dossier': "Dossier",
   'eclair': "Éclair (action rapide)",
+  'envoyer': "Envoyer",
+  'epingle': "Épingle (lieu)",
   'equipe': "Équipe (membres)",
   'etincelles': "Étincelles (IA)",
+  'etoile': "Étoile (favori)",
   'fermer': "Fermer",
+  'fichier': "Fichier (document)",
+  'filtre': "Filtre",
+  'globe': "Globe (international)",
+  'graphique': "Graphique (barres)",
   'horloge': "Horloge (intégration continue)",
+  'imprimante': "Imprimante",
+  'info': "Information",
   'lien-externe': "Lien externe",
+  'livre-ouvert': "Livre ouvert (formation)",
   'menu': "Menu (hamburger)",
   'moins': "Moins",
   'oeil': "Œil (afficher)",
@@ -110,5 +169,9 @@ export const NOMS: Record<IconId, string> = {
   'reglages': "Réglages",
   'reseau': "Réseau (entrée / globe)",
   'taches': "Tâches (liste à cocher)",
+  'telecharger': "Télécharger",
+  'telephone': "Téléphone",
+  'tri': "Tri",
   'trois-points': "Trois points (menu contextuel)",
+  'utilisateur': "Utilisateur",
 }

package/react/icon.tsx

@@ -1,4 +1,4 @@
-// Icônes — jeu de 34, tracées, sur grille de 24.
+// Icônes — jeu de 55, tracées, sur grille de 24.
 //
 // Le corps du tracé est INLINÉ (voir scripts/build-icon-react.mjs) : pas de
 // <use href="…sprite.svg">, donc rien à résoudre côté bundler et rien à
@@ -12,7 +12,7 @@ import { CORPS, NOMS, type IconId } from './icon-data.js'
 export type { IconId }
 export { NOMS as NOMS_ICONES }
 
-/** Les 34 identifiants, triés — pour construire une planche ou un sélecteur. */
+/** Les 55 identifiants, triés — pour construire une planche ou un sélecteur. */
 export const ICONES = Object.keys(CORPS) as IconId[]
 
 export interface IconProps

package/react/layout.tsx

@@ -346,3 +346,42 @@ export function OnlyDesktop({ className, ...reste }: Div & { className?: string
 export function OnlyMobile({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-only-mobile', className)} {...reste} />
 }
+
+/* ─── Bandeau d'annonce ────────────────────────────────────────────── */
+
+/** 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. */
+export function Banner({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-banner', className)} {...reste} />
+}
+
+/* ─── Carrousel ────────────────────────────────────────────────────── */
+
+export interface CarouselProps extends Div {
+  /** Ce que la rangée contient (« Nos produits ») : une région qui défile
+   *  sans nom est une énigme au lecteur d'écran. */
+  label: string
+  className?: string
+}
+
+/** Défilement natif scroll-snap, AUCUN JavaScript : pas de flèches, pas de
+ *  points. Le conteneur est focalisable — c'est lui que les flèches du
+ *  clavier font défiler. La largeur des éléments vient du consommateur.
+ *  ⚠️ Un carrousel reste un aveu d'espace : la règle de variété lui préfère
+ *  une grille tant que le contenu tient. */
+export function Carousel({ label, className, ...reste }: CarouselProps) {
+  return (
+    <div
+      role="region"
+      aria-label={label}
+      tabIndex={0}
+      className={cx('zv-carousel', className)}
+      {...reste}
+    />
+  )
+}
+
+export function CarouselItem({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-carousel__item', className)} {...reste} />
+}