diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e6319c..0c0c0d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,69 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/), et le p
   `utils.overlay-motion` s'il vit dans le calque supérieur, `useUiMotion` s'il quitte le DOM.
   C'est la question qu'on se pose en vrai, et elle n'était écrite nulle part.
 
+- `core/ripple` (`@4sh/ui-kit-react/ripple`) : l'onde de pression. `UiRippleProvider` l'active
+  pour toute l'application, `useUiRippleScope()` pour un sous-arbre, `useUiRipple()` pour un
+  élément, et `launchRipple()` la lance sans pression. Elle se règle par les seules propriétés
+  `--ui-ripple-*`, et respecte le mouvement réduit comme `data-motion="off"`. Les quatorze
+  composants équipés, `ui-button`, `ui-menu`, `ui-context-menu`, `ui-sidebar-menu`, `ui-tabs`,
+  `ui-bottom-tab-bar`, `ui-paginator`, `ui-select`, `ui-autocomplete`, `ui-datepicker`,
+  `ui-toggle-button`, `ui-segment-control`, `ui-toggle-block` et `ui-file-upload`, reçoivent
+  une prop `ripple`, vraie par défaut : sans activation, elle ne produit rien.
+
+- `ui-editor` : champ de texte riche, sur un `contenteditable` et les commandes d'édition
+  natives du navigateur, **sans moteur tiers** : le kit reste à ses deux dépendances. Police,
+  taille, couleurs et surlignage s'écrivent en classes adossées aux jetons, alignement,
+  listes, retrait, lien et bloc de code en balisage. La valeur est du HTML, nettoyé par
+  `sanitizeHtml`, le portage du `DomSanitizer` d'Angular, exporté pour l'afficher ailleurs.
+
+  Trois écarts avec le kit Angular, déclarés à corriger de son côté : il perd l'alignement et
+  le retrait quand une valeur enregistrée lui revient ; recolorer un passage qui contient un
+  mot déjà coloré laissait ce mot inchangé ; et appliquer une police, une taille ou une
+  couleur désélectionnait le texte. Au passage, `ui-select` transmet `tabIndex` à son
+  déclencheur.
+
+- `ui-sidebar` : barre latérale applicative. Statique, elle pousse le contenu et se replie en
+  rail d'icônes, qui peut flotter ouvert au survol et au focus ; superposée, c'est un
+  `<dialog>` natif, avec son voile, son piège de focus et `Échap`. Elle passe de l'une à
+  l'autre sous un point de rupture (`responsive`). En-tête et pied reçoivent l'état de la
+  barre. Livre `ui-sidebar-menu`, menu déclaratif à sections, groupes repliables et entrée
+  courante, et `useUiSidebarTrigger()` pour un déclencheur placé hors de la barre, sous
+  `UiSidebarProvider`.
+
+  Deux écarts avec le kit Angular, déclarés à corriger de son côté : il pose `aria-modal`
+  sur un `<aside>`, dont le rôle ne le prend pas en charge, et deux de ses menus sur une page
+  produisent des identifiants en double.
+
+- `ui-file-upload` : téléversement de fichiers, en champ compact ou en zone de
+  glisser-déposer, sur un `<input type="file">` natif. Validation côté client par type,
+  taille et nombre ; envoi intégré par `XMLHttpRequest` avec sa progression, ou délégué à
+  l'application par `customUpload`. `renderFile`, `renderContent` et `renderToolbar`
+  remplacent chacun une partie du rendu. Livre aussi `ui-file-upload-list`, la ligne de
+  fichier, dans le même point d'entrée.
+
+  Avec `name`, la sélection part avec le formulaire natif qui entoure le composant. Le kit
+  Angular pose ce nom sur un sélecteur qu'il vide après chaque choix, si bien qu'un
+  formulaire y reçoit un fichier vide : mesuré, et déclaré à corriger de son côté. Même
+  chose pour la couleur des erreurs : le kit Angular prend le contenu de la surface d'erreur
+  forte, qui est blanc, si bien que le message de refus et le texte d'une ligne en erreur ne
+  se voyaient pas. Ils suivent ici le jeton d'erreur de la famille formulaire, lisible dans
+  les deux modes.
+
+- `ui-image` : image consciente du thème et de la marque, avec son repli, sa vignette et sa
+  vue agrandie. Trois sources : une URL distante, une image locale résolue par la table du
+  projet selon le mode et la marque, ou une URL protégée cherchée par la fonction que
+  l'application fournit, ce dont a besoin un point d'accès derrière un en-tête d'autorisation.
+
+  Un SVG **local** est inliné, ce qui lui fait hériter du CSS et de `currentColor`. Là où le
+  kit Angular n'a d'autre choix que `bypassSecurityTrustHtml()`, sa seule exception de
+  sécurité, cette version convertit le balisage en **éléments React** : rien n'est écrit en
+  HTML, donc le registre de `docs/SECURITY-PRACTICES.md` reste vide. Le nettoyage, lui, est
+  gardé et testé à part.
+
+  `preview` fait de l'image un bouton qui ouvre la vue agrandie, un `<dialog>` natif : zoom,
+  rotation et déplacement, à la souris comme au clavier, un zoom qu'on ne peut pas déplacer
+  au clavier étant un zoom qu'on ne peut pas lire.
+
 - `ui-bottom-sheet` : panneau qui glisse depuis le bord bas de l'écran, sur le même socle que
   `ui-modal` et `ui-drawer`, le `<dialog>` natif : le voile et le positionneur du kit Angular
   disparaissent, `::backdrop` fait le premier et les insets du dialogue font le second. Ce qui
diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md
index 586271b..e5f1593 100644
--- a/docs/DECISIONS.md
+++ b/docs/DECISIONS.md
@@ -234,6 +234,21 @@ bloquant dès le premier composant.
 React ne se conçoit pas de zéro, il porte la logique clavier de son homologue. C'est moins
 cher que de réinventer, et c'est la seule manière de rendre la parité vérifiable.
 
+### Appliquée : l'éditeur riche, 23 septembre
+
+`ui-editor` était gardé pour la fin comme un arbitrage de dépendance, sur la prémisse
+qu'« aucun éditeur riche ne s'écrit dans `core/` ». Le kit Angular la contredit : son éditeur
+n'a pas de moteur, c'est un `contenteditable` et un module de commandes natives, 10,5 kB
+compressés. Mesurés contre lui : Tiptap, 105 kB pour son seul kit de base et 24 paquets ;
+Lexical, 62 kB pour son cœur ; Slate, 50 kB, sérialiseur HTML à écrire.
+
+**Retenu : aucun moteur**, et c'est ce principe qui tranche. Le comportement de l'éditeur ET
+le format de sa valeur font partie du contrat : les deux stacks écrivent le même HTML, dont la
+police, la taille et les couleurs sont des classes adossées aux jetons. Un moteur aurait écrit
+son propre schéma, en styles en ligne par défaut. Un moteur ne redeviendrait pertinent que
+pour un besoin absent aujourd'hui (tableaux, édition collaborative, mentions), et ce serait
+alors une décision pour tout le Design System.
+
 ## D7, Mode copie : un CLI maison ET un registry compatible shadcn
 
 **Retenu : les deux.** Un registry statique publié sur Pages à côté du Storybook, plus un
diff --git a/docs/DUAL-ENGINE.md b/docs/DUAL-ENGINE.md
index cd70efc..34d232e 100644
--- a/docs/DUAL-ENGINE.md
+++ b/docs/DUAL-ENGINE.md
@@ -35,77 +35,98 @@ doit être vérifié à la main, et le cahier des charges du contrôle qui l'aut
 Une divergence écrite est un choix ; une divergence découverte est un bug. Celles-ci sont
 volontaires, et chacune porte sa raison.
 
-| Sujet                                                  | Divergence                                                                                                                                                                                                                                                                                                                            | Pourquoi                                                                                                                                                                                                                                                                                                                                                                        |
-| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ui-radio` · `aria-invalid`                            | Angular le pose, React **non**.                                                                                                                                                                                                                                                                                                       | La spécification ARIA ne le supporte pas sur le rôle `radio`, et c'est cohérent : la validité porte sur le choix, donc sur le groupe. Signalé par `jsx-a11y`. **À corriger côté Angular.**                                                                                                                                                                                      |
-| `ui-radio` · règle CSS de l'état coché                 | React ajoute `&-input:checked + &-box &-dot` à côté de `._checked`.                                                                                                                                                                                                                                                                   | React a un mode **non contrôlé** qu'Angular n'a pas : un bouton radio ne peut pas observer la désélection de ses voisins, donc aucune classe calculée ne peut être juste. Le sélecteur natif, lui, l'est toujours. Additif : le comportement contrôlé est inchangé.                                                                                                             |
-| `ui-toggle` · `aria-checked`                           | Angular le pose, React **non**.                                                                                                                                                                                                                                                                                                       | Sur un `<input type="checkbox">`, l'état coché natif est déjà exposé quel que soit le `role`. Un doublon qui peut diverger de l'état réel donne un comportement indéfini.                                                                                                                                                                                                       |
-| `ui-progress-bar` · `valuePosition="bottom"`           | React aligne la piste en `stretch`, Angular en `flex-end`.                                                                                                                                                                                                                                                                            | En colonne, `align-items` gouverne l'axe horizontal : le `flex-end` ramenait la piste à sa largeur de contenu, soit **zéro**, et la barre disparaissait. Mesuré ici, la SCSS étant reprise à l'octet près. React étire la piste et n'aligne à droite que le libellé, ce qui garde l'intention d'origine. **À corriger côté Angular.**                                           |
-| `ui-modal` · structure et empilement                   | React rend un `<dialog>` **natif** ; Angular reconstruit un scrim, un positionneur et un piège de focus CDK. React n'expose donc **ni `autoZIndex` ni `baseZIndex`**.                                                                                                                                                                 | Le calque supérieur empile les dialogues dans leur ordre d'ouverture, sans z-index : garder ces deux props serait promettre un réglage sans effet. Le piège de focus, la restitution du focus, l'inertie du fond et Échap sont également natifs. Le DOM diverge, l'API publique et le rendu visuel non. Mesuré avant d'être décidé, voir « Spécifications / Couches et focus ». |
-| `ui-popover` · pilotage                                | Angular s'appelle par des **méthodes** (`show`, `hide`, `toggle`) et pose lui-même `aria-expanded` sur le déclencheur ; React est **contrôlé** (`open` / `defaultOpen` / `onOpenChange`) et rend le déclencheur par `trigger`.                                                                                                        | Muter le DOM d'un élément que React possède est un anti-motif : l'attribut serait réécrit au rendu suivant. La prop de rendu donne le même service en restant dans le modèle du framework, et aligne le composant sur le contrat contrôlé du reste du kit.                                                                                                                      |
-| `ui-tooltip` · forme et props                          | Angular est une **directive** (`[uiTooltip]`) ; React est un composant à `trigger`. React n'expose **ni `escape` ni `tooltipContext`**.                                                                                                                                                                                               | React n'a pas de directives. `escape={false}` liait du HTML brut : `content` accepte n'importe quel nœud, ce qui couvre le besoin sans jamais injecter de HTML, et respecte l'interdiction de `dangerouslySetInnerHTML`. `tooltipContext` n'a plus d'objet, une fermeture faisant le travail d'un contexte de gabarit.                                                          |
-| `ui-popover` et `ui-tooltip` · calque                  | React place les panneaux dans le **calque supérieur** (`popover`, ou `<dialog>` en modal) ; Angular les monte dans un overlay CDK.                                                                                                                                                                                                    | Mesuré : le panneau échappe alors au rognage d'un ancêtre en `overflow: hidden` sans z-index (vérifié à 320 px de large dans un cadre de 220 px), et `popover="auto"` donne la fermeture au clic extérieur sans une ligne de JavaScript.                                                                                                                                        |
-| `ui-select` · chevron en mode éditable                 | React rend un **bouton** nommé (`ui-select-toggle`, mixin `field-action`) ; Angular rend une icône décorative dont le clic est capté par une enveloppe.                                                                                                                                                                               | En mode éditable, le chevron est la SEULE façon d'ouvrir le panneau à la souris : il doit donc exister au clavier. La version Angular n'y est pas atteignable. C'est `jsx-a11y` qui a signalé le clic sur un élément non interactif, et le corriger a amélioré le composant plutôt que de le contourner. **À corriger côté Angular.**                                           |
-| `ui-chip` · priorité du `role`                         | React laisse GAGNER un `role` fourni par l'appelant ; Angular garde le sien.                                                                                                                                                                                                                                                          | Côté Angular, l'hôte `<ui-chip>` et le span interne sont deux éléments, donc les deux rôles cohabitent. Ici c'est le même élément : sans cette priorité, une puce servant d'`option` dans `ui-autocomplete` verrait son rôle remplacé par `group`, et la liste perdrait ses options. Additif : sans `role` fourni, rien ne change.                                              |
-| `utils.field-action` · géométrie                       | React annule l'inset vertical du champ `_auto-height` et donne une largeur explicite ; Angular garde `aspect-ratio: 1` sans annulation.                                                                                                                                                                                               | Mesuré : l'action s'arrêtait à la boîte de contenu (32 px pour une boîte de 40), et sa largeur retombait à celle de l'icône (20 px), **sous le minimum de cible de WCAG 2.5.8**. Visible sur tout champ `_auto-height` portant une action (`ui-input-tags`, `ui-select` et `ui-autocomplete` en multiple). **À corriger côté Angular.**                                         |
-| `ui-menu` · pilotage du popup                          | Angular s'appelle par des **méthodes** (`toggle(event)`, `show`, `hide`) et expose un `uid` pour que le déclencheur y branche son `aria-controls` ; React est **contrôlé** (`open` / `defaultOpen` / `onOpenChange`) et rend le déclencheur par `trigger`, qui reçoit `aria-haspopup`, `aria-expanded` et `aria-controls` tout faits. | Même arbitrage que `ui-popover`, et pour la même raison : le kit React ne mute pas le DOM d'un élément que React possède. La prop de rendu donne le même service en restant dans le modèle du framework.                                                                                                                                                                        |
-| `ui-menu` · liens et route active                      | Angular a `routerLink`, `queryParams`, `queryParamsHandling` et `routerLinkActive` ; React a `render` sur l'item, plus `active`.                                                                                                                                                                                                      | Le kit n'impose aucun routeur, comme sur `ui-button` et `ui-link` : `render` reçoit les props que le menu aurait posées sur son `<a>`. Et l'appelant est le seul à savoir si l'entrée est celle de la page courante, d'où `active` en remplacement d'une directive de routeur.                                                                                                  |
-| `ui-menu` · prop `tabindex`                            | Angular expose le `tabindex` de l'arrêt de tabulation ; React **non**.                                                                                                                                                                                                                                                                | En React, `...rest` transmet déjà `tabIndex` au panneau : une prop du même nom qui atterrirait sur une entrée serait un piège. L'arrêt de tabulation reste à 0, ce qui est le motif menu de l'APG.                                                                                                                                                                              |
-| `ui-menu` · calque et mouvement                        | React place le popup et les sous-menus en cascade dans le **calque supérieur** (`popover="manual"`) et anime l'entrée et la sortie en CSS pur ; Angular les monte dans un overlay CDK et pilote le mouvement par une directive.                                                                                                       | Même mesure que pour `ui-popover` et `ui-tooltip` : plus de z-index, plus de rognage par un ancêtre en `overflow: hidden`, et une sortie animée sans garder soi-même le nœud dans le DOM. **Un `popover="manual"` ne restitue pas le focus** en se fermant, contrairement à `auto` : mesuré, et le composant s'en charge donc explicitement.                                    |
-| `ui-context-menu` · pilotage                           | Angular expose `show(event)`, `hide()` et `toggle(event)` ; React se gouverne seul, avec `onOpen` et `onClose` pour observer.                                                                                                                                                                                                         | Un menu contextuel n'a pas d'état utile sans les coordonnées qui vont avec, et l'événement d'ouverture porte les deux à la fois. Un panneau ouvert par programme est `ui-menu` en mode `popup`, qui est contrôlé. Aucune poignée impérative dans le kit React.                                                                                                                  |
-| `ui-table` · comportements de colonne                  | Angular attache par **directives** (`uiSortableColumn`, `uiSelectableRow`, `uiFrozenColumn`, `uiResizableColumn`, `uiRowToggler`, `uiReorderableRow`) ; React passe des **fabriques de props** au balisage projeté, plus un contexte pour les contrôles.                                                                              | React n'a pas de directives, et un crochet ne convient pas non plus : une ligne se rend dans une boucle dont la longueur varie, et un crochet appelé un nombre variable de fois est interdit. Une fabrique de props est sans état, donc sûre dans une boucle, et rend exactement ce qu'une directive posait sur l'hôte.                                                         |
-| `ui-table` · colonnes figées                           | Angular a une directive et un `ResizeObserver` par cellule ; React calcule les décalages une fois par ligne, au même endroit que ses autres mesures.                                                                                                                                                                                  | Le tableau voit la ligne entière, donc il n'a rien de plus à observer, et une colonne figée n'est plus qu'une classe côté appelant. Moins de code pour le même rendu.                                                                                                                                                                                                           |
-| `ui-table` · poignée de redimensionnement              | Angular l'**injecte dans le DOM** depuis sa directive ; React la rend, `<UiTableColumnResizer />`.                                                                                                                                                                                                                                    | React possède le balisage : y injecter un nœud serait écrasé au rendu suivant. Même arbitrage que sur `ui-popover`, qui ne mute pas le DOM de son déclencheur.                                                                                                                                                                                                                  |
-| `ui-table` · état de tri                               | Angular a trois entrées (`sortField`, `sortOrder`, `multiSortMeta`) ; React a une valeur contrôlable, `sort`.                                                                                                                                                                                                                         | Le tri EST une chose, et le découpage n'était gratuit que grâce aux signaux. Une valeur unique se branche sur le contrat contrôlé du kit, et `onSortChange` porte le mode, ce dont un appelant en mode serveur a besoin.                                                                                                                                                        |
-| `ui-table` · zone défilante et clavier                 | Angular pose `tabindex` dès que `scrollable` ; React ne le pose que si la zone déborde **et** ne contient rien de focalisable.                                                                                                                                                                                                        | axe exige qu'une région défilante soit atteignable, mais un arrêt de tabulation sur une zone dont le contenu l'est déjà n'encombre que le parcours clavier. Même contrat que `ui-modal`. **À corriger côté Angular.**                                                                                                                                                           |
-| `ui-table` · encapsulation                             | Angular doit sortir de l'encapsulation (`ViewEncapsulation.None`) pour que ses styles atteignent le balisage projeté ; React n'a rien à désactiver.                                                                                                                                                                                   | Le kit React n'a pas d'encapsulation : le préfixe `ui-` EST le namespace (décision D5). Ce que la version Angular obtient par une dérogation est ici l'état normal.                                                                                                                                                                                                             |
-| `ui-menu` · clic sur un parent de cascade              | Angular **bascule** le sous-menu au clic ; React l'**ouvre**, sans le refermer.                                                                                                                                                                                                                                                       | À la souris, le survol a déjà ouvert le panneau avant que le clic arrive : une bascule le referme donc aussitôt, et cliquer un parent paraît sans effet. Le défaut est présent à l'identique côté Angular, la forme du code y étant la même. **À corriger côté Angular.**                                                                                                       |
-| `ui-menu` · survol après une activation                | React ignore un `mouseenter` qui n'a pas été précédé d'un `pointermove` ; Angular le traite.                                                                                                                                                                                                                                          | Masquer un panneau change l'élément sous le pointeur, et le navigateur émet alors un `mouseenter` sans que l'utilisateur ait bougé. Mesuré : 7 ms après la fermeture d'un sous-menu, son parent en reçoit un et le rouvre. Même code côté Angular, donc même défaut. **À corriger côté Angular.**                                                                               |
-| `ui-context-menu` · cible                              | Angular prend un `target` (élément ou `ElementRef`) ou `global` ; React rend la zone par `trigger` et lui passe la `ref`, ou prend `global`.                                                                                                                                                                                          | Une prop de rendu remplace la variable de référence de template, comme sur `ui-tooltip`, qui était une directive. Le composant ne va pas chercher un élément qu'il ne rend pas.                                                                                                                                                                                                 |
-| `core/motion` · forme de la brique                     | Angular est une **directive** (`uiMotion`) qui donne des noms de classes à `animate.enter` / `animate.leave` ; React est un crochet, `useUiMotion`, qui retient lui-même le nœud sortant.                                                                                                                                             | React n'a pas de directives, et surtout pas d'équivalent d'`animate.leave` : un élément quitte le DOM dès que l'appelant cesse de le rendre. Le crochet rend donc `present`, vrai pendant toute la sortie. Les classes, les préréglages et les keyframes, eux, sont les MÊMES des deux côtés : c'est la partie qui compte pour la parité visuelle.                              |
-| `ui-avatar-group` · portée des styles                  | Angular sort de l'encapsulation (`ViewEncapsulation.None`) pour viser l'élément `ui-avatar` projeté ; React vise la CLASSE `.ui-avatar`.                                                                                                                                                                                              | Le kit React n'a pas d'encapsulation, le préfixe `ui-` ÉTANT le namespace (décision D5), et les sélecteurs d'élément nu y sont interdits parce qu'ils fuiraient sur toute la page. Ce qu'Angular obtient par dérogation est ici l'état normal.                                                                                                                                  |
-| `ui-input-group` · reformage des items                 | Angular écrit des styles EN LIGNE sur chaque item depuis un `MutationObserver` ; React le fait en CSS pur, par un sélecteur d'enfant.                                                                                                                                                                                                 | Même raison : un sélecteur scopé ne peut pas atteindre du contenu projeté côté Angular, d'où l'observateur. Ici le sélecteur passe, donc le composant n'a plus aucun JavaScript, et il suit les `@if`/`@for` de l'appelant sans rien observer.                                                                                                                                  |
-| `ui-button-split` · nom du modèle                      | Angular l'appelle `model` ; React l'appelle `items`.                                                                                                                                                                                                                                                                                  | Le `ui-menu` React nomme déjà ses entrées `items`, et c'est le MÊME type qui circule. Deux noms pour la même donnée dans le même kit coûterait plus cher que l'écart avec Angular, que la règle « le sens jamais » autorise explicitement.                                                                                                                                      |
-| `ui-button-split` · pilotage et poignées               | Angular expose `tabindex`, `buttonProps`, `focus()` et `hide()`, plus `menuShow` / `menuHide` ; React expose `open` / `defaultOpen` / `onOpenChange` et rien d'impératif.                                                                                                                                                             | Mêmes arbitrages que `ui-popover` et `ui-menu`, dont ce composant n'est qu'un assemblage : `...rest` remplace `buttonProps`, aucune poignée impérative dans le kit React, et `onOpenChange` dit à lui seul ce que disaient `menuShow` et `menuHide`.                                                                                                                            |
-| `ui-tabs` · élément hôte de l'onglet                   | Angular a un hôte `ui-tab` en `display: contents` autour d'un `.ui-tab-button` ; React rend le bouton seul, et `.ui-tab` EST ce bouton.                                                                                                                                                                                               | React ne rend pas d'élément hôte : les règles qui vivaient sur `:host` se fondent dans la classe racine, comme partout ailleurs dans ce kit (décision D5). `.ui-tab-button` n'a donc plus d'élément à décrire. Les sous-éléments `.ui-tab-icon` et `.ui-tab-label` sont inchangés.                                                                                              |
-| `ui-tabs` · prop `tabindex`                            | Angular expose le `tabindex` de l'arrêt de tabulation ; React **non**.                                                                                                                                                                                                                                                                | Même arbitrage que sur `ui-menu` : `...rest` transmet déjà `tabIndex` à la racine, donc une prop du même nom qui atterrirait sur un onglet serait un piège. L'arrêt reste à 0, ce qui est le motif Tabs de l'APG.                                                                                                                                                               |
-| `ui-tabs` · prop `ripple`                              | Angular l'expose et pose `data-ripple` sur chaque onglet ; React **non**.                                                                                                                                                                                                                                                             | Même écart que `ui-button` : le moteur d'onde de pression (`core/ripple`) n'est pas porté. Son arrivée ajoutera la prop, ce qui sera une évolution MINEURE et non une rupture.                                                                                                                                                                                                  |
-| `ui-tabs` · panneau focalisable                        | Angular pose `tabindex="0"` sur tout panneau ; React ne le garde que si le panneau ne contient rien de focalisable.                                                                                                                                                                                                                   | C'est ce que dit le motif Tabs de l'APG, et le même contrat que `ui-table` et `ui-modal` appliquent déjà ici : un arrêt de tabulation devant un contenu déjà atteignable n'encombre que le parcours clavier. **À corriger côté Angular.**                                                                                                                                       |
-| `ui-tabs` · valeur « aucun onglet actif »              | Angular l'écrit `undefined` ; React l'écrit `null`.                                                                                                                                                                                                                                                                                   | Le contrat contrôlé du kit lit `value === undefined` comme « non contrôlé » : sans ce partage, un conteneur contrôlé sans sélection basculerait en non contrôlé. Même choix que `ui-segment-control`, dont la valeur vide est déjà `null`.                                                                                                                                      |
-| `ui-tabs` · hooks d'indicateur hérités                 | Angular honore encore `--ui-tabs-active-bar-color` et `-size` en repli ; React ne connaît que `--ui-tabs-indicator-*`.                                                                                                                                                                                                                | Ce sont les noms d'AVANT le renommage côté Angular, gardés une version pour ses consommateurs. Ce dépôt n'a jamais publié les anciens : les replier ici serait promettre une compatibilité avec un passé qu'il n'a pas.                                                                                                                                                         |
-| `ui-accordion` · en-tête                               | Angular a un slot `uiAccordionHeader` **en plus** d'une entrée texte `header`, et un marqueur `uiAccordionContent` ; React n'a qu'une prop `header` de type `ReactNode`.                                                                                                                                                              | Une prop `ReactNode` couvre le titre texte et l'en-tête riche du même coup : le slot n'a plus d'objet, et le corps est déjà `children`. React n'a pas de directives, donc pas de marqueur non plus.                                                                                                                                                                             |
-| `ui-accordion` · valeur « rien d'ouvert »              | Angular l'écrit `undefined` ; React l'écrit `null`.                                                                                                                                                                                                                                                                                   | Même arbitrage que `ui-tabs` : dans le contrat contrôlé du kit, `undefined` veut dire « non contrôlé ». Les deux sens ne peuvent pas partager une valeur.                                                                                                                                                                                                                       |
-| `ui-accordion` · sorties et poignée                    | Angular a `opened` / `closed` et une méthode `focus()` sur le panneau ; React a `onPanelOpen` / `onPanelClose` et **aucune** poignée impérative.                                                                                                                                                                                      | Le préfixe `on` est la convention de sortie du kit, et le clavier du groupe déplace lui-même le focus : une poignée publique n'aurait aucun appelant. Aucune API impérative dans le kit React, comme sur `ui-popover` et `ui-menu`.                                                                                                                                             |
-| `ui-toast` · forme du magasin                          | Angular injecte un service `UiToastService` (`providedIn: 'root'`) ; React exporte un singleton de module, `uiToast`, plus le crochet de lecture `useUiToasts`.                                                                                                                                                                       | Une notification se déclenche aussi depuis un intercepteur HTTP ou un gestionnaire d'erreurs, c'est-à-dire hors de tout composant. Un contexte obligerait à poser un fournisseur à la racine et resterait inatteignable de là ; un module rend le même service sans rien imposer.                                                                                               |
-| `ui-toast` · routage des messages                      | Angular l'appelle `key`, sur le conteneur comme sur le message ; React l'appelle `channel`.                                                                                                                                                                                                                                           | `key` est **réservé** par React pour l'identité d'un élément : une prop de ce nom n'atteindrait jamais le composant. Renommé des deux côtés du contrat pour que le message et la pile parlent pareil.                                                                                                                                                                           |
-| `ui-toast` · contenu sur mesure                        | Angular passe un `TemplateRef` par l'entrée `template` ; React passe `renderToast(message, { close })`.                                                                                                                                                                                                                               | React n'a pas de `TemplateRef`, et le kit prend une prop de rendu pour tout slot paramétré. Le contexte `$implicit` / `closeFn` devient les deux arguments.                                                                                                                                                                                                                     |
-| `ui-toast` · calque et empilement                      | Angular pose la pile en `fixed` à un z-index, et expose `autoZIndex` et `baseZIndex` ; React la place dans le **calque supérieur** (`popover="manual"`) et n'expose ni l'un ni l'autre.                                                                                                                                               | Mesuré : `ui-modal` est ici un `<dialog>` **natif**, donc dans ce calque, et aucun z-index ne passe devant. La pile s'y remontre à chaque nouveau message, le calque empilant dans l'ordre d'affichage. Garder les deux props serait promettre un réglage sans effet, comme sur `ui-modal`. `contained` reste en z-index.                                                       |
-| `ui-toast` · compte à rebours d'une file               | Angular arme le délai **à l'arrivée**, même pour un message au-delà de `stackVisibleLimit` ; React l'arme **quand la carte paraît**.                                                                                                                                                                                                  | Côté Angular un message en file expire sans avoir jamais été affiché, ce que sa propre doc ne décrit pas (« les autres attendent leur tour »). Ici il attend vraiment son tour. **À corriger côté Angular.**                                                                                                                                                                    |
-| `ui-toast` · pointeur de la bande                      | Angular rend le pointeur à la **bande** qui porte chaque carte ; React le rend à la **carte**.                                                                                                                                                                                                                                        | Mesuré : la bande fait toute la largeur de la pile alors que la carte fait sa largeur de contenu. Elle avale donc les clics de la page à côté de la carte, et suspend le compte à rebours dès que le pointeur passe sur la même ligne. Même piège que sur `ui-tooltip`. **À corriger côté Angular.**                                                                            |
-| `ui-input-otp` · `aria-invalid` du groupe              | Angular le pose sur l'hôte `role="group"` ; React ne le pose que sur les **cases**.                                                                                                                                                                                                                                                   | Le rôle `group` ne supporte pas `aria-invalid`, qui appartient aux widgets de saisie : les cases sont les contrôles réels, et c'est là qu'il veut dire quelque chose. Signalé par `jsx-a11y`. **À corriger côté Angular.**                                                                                                                                                      |
-| `ui-input-otp` · entrée au montage                     | Angular l'appelle `autofocus` ; React l'appelle `focusOnMount`, et passe par une ref de rappel plutôt que par l'attribut natif.                                                                                                                                                                                                       | `jsx-a11y/no-autofocus` refuse le nom `autoFocus` sur n'importe quel élément, y compris un composant du kit : garder le nom d'Angular ferait échouer le lint de **chaque consommateur**. Le nom retenu dit d'ailleurs mieux ce qui se passe, l'attribut natif n'étant pas utilisé.                                                                                              |
-| `ui-input-otp` · case sur mesure                       | Angular projette un `TemplateRef` nommé `#input` dont le contexte porte `events` ; React passe `renderCell(context)`, dont le contexte EST les gestionnaires.                                                                                                                                                                         | React n'a pas de `TemplateRef`, et le kit prend une prop de rendu pour tout slot paramétré. Étaler le contexte sur un `<input>` suffit alors à garder le comportement du groupe.                                                                                                                                                                                                |
-| `ui-knob` · prop `required`                            | Angular l'expose et pose `aria-required` ; React ne l'expose **pas**.                                                                                                                                                                                                                                                                 | Le rôle `slider` ne supporte pas `aria-required` : la prop ne posait donc rien d'effectif. Une prop sans effet est pire qu'absente, elle promet une contrainte qui n'existe pas. Signalé par `jsx-a11y`. **À corriger côté Angular.**                                                                                                                                           |
-| `ui-knob` · sortie `knobChange`                        | Angular émet à la fois le modèle et `knobChange` ; React n'a que `onValueChange`.                                                                                                                                                                                                                                                     | Les deux portaient exactement la même chose au même instant. Le contrat contrôlé du kit rapporte déjà tout changement, d'où qu'il vienne, clavier ou glissement.                                                                                                                                                                                                                |
-| `ui-input-otp` et `ui-knob` · poignées                 | Angular expose une méthode publique `focus()` ; React n'en expose aucune.                                                                                                                                                                                                                                                             | Aucune API impérative dans le kit React, comme sur `ui-popover`, `ui-menu` et `ui-context-menu`. `ref` donne l'élément racine, et le reste se fait par les props.                                                                                                                                                                                                               |
-| `ui-breadcrumb` · liens et routeur                     | Angular a `routerLink`, `queryParams` et `fragment` sur chaque maillon ; React a `render`, qui reçoit les props que le fil aurait posées sur son `<a>`.                                                                                                                                                                               | Le kit n'impose aucun routeur, comme sur `ui-button`, `ui-link` et `ui-menu`. Reverser les props sur le composant de lien du projet couvre tous les routeurs sans en connaître aucun.                                                                                                                                                                                           |
-| `ui-breadcrumb` · séparateur et contenu                | Angular a l'entrée texte `separator` **et** un gabarit `#separator`, plus un gabarit `#item` ; React a une prop `separator` de type `ReactNode` et `renderItem`.                                                                                                                                                                      | Une prop `ReactNode` couvre la chaîne et le nœud du même coup : le second gabarit n'a plus d'objet. Même arbitrage que sur l'en-tête de `ui-accordion`.                                                                                                                                                                                                                         |
-| `ui-swatch-picker` · pilotage du popup                 | Angular s'appelle par des **méthodes** (`toggle(event)`, `show`, `hide`) et expose un `uid` pour que le déclencheur y branche son `aria-controls` ; React est **contrôlé** (`open` / `defaultOpen` / `onOpenChange`) et rend le déclencheur par `trigger`, qui reçoit `aria-haspopup`, `aria-expanded` et `aria-controls` tout faits. | Même arbitrage que `ui-popover` et `ui-menu`, et pour la même raison : le kit React ne mute pas le DOM d'un élément que React possède.                                                                                                                                                                                                                                          |
-| `ui-swatch-picker` · calque du panneau                 | React place le panneau dans le **calque supérieur** (`popover="manual"`) ; Angular le monte dans un overlay CDK.                                                                                                                                                                                                                      | Même mesure que pour `ui-popover`, `ui-tooltip` et `ui-menu` : plus de z-index à arbitrer, et plus de rognage par un ancêtre en `overflow: hidden`. Vérifié ici dans un cadre de 80 px. **Un `popover="manual"` ne restitue pas le focus**, donc le composant s'en charge, et seulement si le focus était dans le panneau.                                                      |
-| `ui-swatch-picker` · nom de la pastille vide           | Angular écrit « Aucune couleur » en dur ; React l'expose par `clearLabel`.                                                                                                                                                                                                                                                            | Le kit ne porte aucun catalogue de traduction, mais toute chaîne visible doit pouvoir être remplacée par l'application. Additif : le défaut est le même.                                                                                                                                                                                                                        |
-| `ui-speed-dial` · pilotage                             | Angular a un modèle `visible` à double sens et les méthodes `show`, `hide`, `toggle` et `focus`, plus les sorties `opened` et `closed` ; React est **contrôlé** (`open` / `defaultOpen` / `onOpenChange`) et n'expose aucune poignée.                                                                                                 | Même arbitrage que `ui-popover`, `ui-menu` et `ui-swatch-picker`. `onOpenChange` porte déjà les deux sorties, qui disaient la même chose au même instant.                                                                                                                                                                                                                       |
-| `ui-speed-dial` · sortie des actions                   | Angular anime l'entrée ET la sortie de chaque action, et doit remettre le délai à zéro sur la sortie ; React anime l'entrée par action et fait disparaître la **liste entière**.                                                                                                                                                      | Le kit Angular a essayé la sortie décalée puis l'a annulée : une action au délai plus court finit avant ses voisines, perd sa classe de sortie et revient à pleine opacité le temps qu'elles terminent, ce qui se lit comme un clignotement. Faire partir la liste donne le départ groupé gratuitement, et la règle `[class*='-leave']` disparaît.                              |
-| `ui-speed-dial` et `ui-bottom-tab-bar` · prop `ripple` | Angular les expose et posent `data-ripple` ; React **non**.                                                                                                                                                                                                                                                                           | Même écart que `ui-button` et `ui-tabs` : le moteur d'onde de pression (`core/ripple`) n'est pas porté. Son arrivée ajoutera les props, ce qui sera une évolution MINEURE et non une rupture.                                                                                                                                                                                   |
-| `ui-speed-dial` et `ui-bottom-tab-bar` · routeur       | Angular a `routerLink` sur l'action et sur l'onglet ; React a `render`.                                                                                                                                                                                                                                                               | Le kit n'impose aucun routeur, comme sur `ui-button`, `ui-link`, `ui-menu` et `ui-breadcrumb`.                                                                                                                                                                                                                                                                                  |
-| `ui-bottom-tab-bar` · éléments hôtes                   | Angular a trois hôtes en `display: contents`, autour de la barre, de l'onglet et du bouton flottant ; React n'en a aucun.                                                                                                                                                                                                             | Décision D5 : sans encapsulation, `.ui-bottom-tab-bar` EST le `<nav>` et `.ui-bottom-tab` EST le contrôle natif. Les trois hôtes n'ont nulle part où vivre, et les trois règles qui les neutralisaient non plus.                                                                                                                                                                |
-| `ui-stepper` · séquence des étapes                     | Angular la lit dans sa projection (`contentChildren`) ; React la lit dans les `children`.                                                                                                                                                                                                                                             | React a ses enfants sous la main comme une **valeur** : la séquence est une fonction pure, sans état ni effet, et juste dès le premier rendu, là où une requête de projection ne se résout qu'après. La contrepartie est qu'un `UiStep` enveloppé dans un composant de l'appelant n'est pas vu, ce que la doc dit.                                                              |
-| `ui-stepper` · pilotage de la progression              | Angular expose les méthodes `next()` et `prev()` sur le composant, appelées par une référence de gabarit ; React expose le crochet `useUiStepper()`.                                                                                                                                                                                  | Un bouton « Suivant » vit DANS un panneau : il lit le contexte, là où une poignée devrait être descendue depuis le parent. Le crochet rend en plus `isFirst` et `isLast`, que l'appelant recalculait.                                                                                                                                                                           |
-| `ui-stepper` · valeur de l'item                        | Angular propage la valeur du `ui-step-item` à ses enfants par un effet qui écrit dans leurs modèles ; React la prête par un contexte.                                                                                                                                                                                                 | Écrire dans l'entrée d'un enfant est un aller-retour que React n'a pas : le contexte dit la même chose sans mutation, et la valeur est disponible au rendu de l'enfant plutôt qu'au tour suivant.                                                                                                                                                                               |
-| `ui-bottom-sheet` · structure et empilement            | React rend un `<dialog>` **natif** ; Angular construit un voile, un positionneur et un piège de focus CDK. React n'expose donc **ni `autoZIndex` ni `baseZIndex`**, ni `trapFocus` ni `focusOnShow`.                                                                                                                                  | Même arbitrage que `ui-modal`, et pour les mêmes raisons mesurées : le calque supérieur empile dans l'ordre d'ouverture, sans z-index, et le piège de focus, la restitution du focus, l'inertie du fond et Échap sont natifs. Garder ces quatre props serait promettre des réglages sans effet.                                                                                 |
-| `ui-bottom-sheet` · zones projetées                    | Angular a trois directives marqueurs (`uiBottomSheetHeader`, `-Content`, `-Footer`) ; React a `header`, `footer` et `children`.                                                                                                                                                                                                       | React n'a pas de directives, et le kit passe des props `ReactNode` pour les slots statiques. Même forme que `ui-drawer` et `ui-modal`, dont ce panneau partage le socle.                                                                                                                                                                                                        |
-| `ui-bottom-sheet` · `contained` et le voile            | Angular garde son voile en `position: absolute` ; React rend le panneau **non modal**, donc sans arrière-plan.                                                                                                                                                                                                                        | Le calque supérieur est relatif à la fenêtre, jamais à un ancêtre : un panneau cantonné ne peut pas y vivre. Le kit ne reconstruit pas un voile pour cet unique cas, ce qui ramènerait le z-index qu'on vient de retirer. Même comportement que `ui-drawer`.                                                                                                                    |
-| `ui-bottom-sheet` · fin d'animation                    | Angular émet `opened` et `closed` à la FIN de la transition, mesurée puis doublée d'un délai de secours ; React émet `onShow` et `onHide` au changement d'état.                                                                                                                                                                       | Le kit React laisse la CSS animer et n'attend rien : il n'y a donc ni minuterie de secours, ni durée à relire dans le style calculé. Un appelant qui a besoin de la fin exacte écoute `transitionend`, ce que le composant ne peut pas faire à sa place sans deviner quelle propriété compte.                                                                                   |
-| `ui-bottom-sheet` · focus dirigé                       | Angular réessaie cinq fois de trouver `autoFocusElement` ; React interroge une fois.                                                                                                                                                                                                                                                  | Le contenu projeté d'Angular arrive un tour après l'ouverture, d'où les tentatives. En React les enfants sont rendus avant que l'effet ne tire : une seule requête suffit, et son échec est un vrai avertissement plutôt qu'un abandon après cinq essais.                                                                                                                       |
+| Sujet                                                           | Divergence                                                                                                                                                                                                                                                                                                                                                                                                                             | Pourquoi                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ui-radio` · `aria-invalid`                                     | Angular le pose, React **non**.                                                                                                                                                                                                                                                                                                                                                                                                        | La spécification ARIA ne le supporte pas sur le rôle `radio`, et c'est cohérent : la validité porte sur le choix, donc sur le groupe. Signalé par `jsx-a11y`. **À corriger côté Angular.**                                                                                                                                                                                                                                           |
+| `ui-radio` · règle CSS de l'état coché                          | React ajoute `&-input:checked + &-box &-dot` à côté de `._checked`.                                                                                                                                                                                                                                                                                                                                                                    | React a un mode **non contrôlé** qu'Angular n'a pas : un bouton radio ne peut pas observer la désélection de ses voisins, donc aucune classe calculée ne peut être juste. Le sélecteur natif, lui, l'est toujours. Additif : le comportement contrôlé est inchangé.                                                                                                                                                                  |
+| `ui-toggle` · `aria-checked`                                    | Angular le pose, React **non**.                                                                                                                                                                                                                                                                                                                                                                                                        | Sur un `<input type="checkbox">`, l'état coché natif est déjà exposé quel que soit le `role`. Un doublon qui peut diverger de l'état réel donne un comportement indéfini.                                                                                                                                                                                                                                                            |
+| `ui-progress-bar` · `valuePosition="bottom"`                    | React aligne la piste en `stretch`, Angular en `flex-end`.                                                                                                                                                                                                                                                                                                                                                                             | En colonne, `align-items` gouverne l'axe horizontal : le `flex-end` ramenait la piste à sa largeur de contenu, soit **zéro**, et la barre disparaissait. Mesuré ici, la SCSS étant reprise à l'octet près. React étire la piste et n'aligne à droite que le libellé, ce qui garde l'intention d'origine. **À corriger côté Angular.**                                                                                                |
+| `ui-modal` · structure et empilement                            | React rend un `<dialog>` **natif** ; Angular reconstruit un scrim, un positionneur et un piège de focus CDK. React n'expose donc **ni `autoZIndex` ni `baseZIndex`**.                                                                                                                                                                                                                                                                  | Le calque supérieur empile les dialogues dans leur ordre d'ouverture, sans z-index : garder ces deux props serait promettre un réglage sans effet. Le piège de focus, la restitution du focus, l'inertie du fond et Échap sont également natifs. Le DOM diverge, l'API publique et le rendu visuel non. Mesuré avant d'être décidé, voir « Spécifications / Couches et focus ».                                                      |
+| `ui-popover` · pilotage                                         | Angular s'appelle par des **méthodes** (`show`, `hide`, `toggle`) et pose lui-même `aria-expanded` sur le déclencheur ; React est **contrôlé** (`open` / `defaultOpen` / `onOpenChange`) et rend le déclencheur par `trigger`.                                                                                                                                                                                                         | Muter le DOM d'un élément que React possède est un anti-motif : l'attribut serait réécrit au rendu suivant. La prop de rendu donne le même service en restant dans le modèle du framework, et aligne le composant sur le contrat contrôlé du reste du kit.                                                                                                                                                                           |
+| `ui-tooltip` · forme et props                                   | Angular est une **directive** (`[uiTooltip]`) ; React est un composant à `trigger`. React n'expose **ni `escape` ni `tooltipContext`**.                                                                                                                                                                                                                                                                                                | React n'a pas de directives. `escape={false}` liait du HTML brut : `content` accepte n'importe quel nœud, ce qui couvre le besoin sans jamais injecter de HTML, et respecte l'interdiction de `dangerouslySetInnerHTML`. `tooltipContext` n'a plus d'objet, une fermeture faisant le travail d'un contexte de gabarit.                                                                                                               |
+| `ui-popover` et `ui-tooltip` · calque                           | React place les panneaux dans le **calque supérieur** (`popover`, ou `<dialog>` en modal) ; Angular les monte dans un overlay CDK.                                                                                                                                                                                                                                                                                                     | Mesuré : le panneau échappe alors au rognage d'un ancêtre en `overflow: hidden` sans z-index (vérifié à 320 px de large dans un cadre de 220 px), et `popover="auto"` donne la fermeture au clic extérieur sans une ligne de JavaScript.                                                                                                                                                                                             |
+| `ui-select` · chevron en mode éditable                          | React rend un **bouton** nommé (`ui-select-toggle`, mixin `field-action`) ; Angular rend une icône décorative dont le clic est capté par une enveloppe.                                                                                                                                                                                                                                                                                | En mode éditable, le chevron est la SEULE façon d'ouvrir le panneau à la souris : il doit donc exister au clavier. La version Angular n'y est pas atteignable. C'est `jsx-a11y` qui a signalé le clic sur un élément non interactif, et le corriger a amélioré le composant plutôt que de le contourner. **À corriger côté Angular.**                                                                                                |
+| `ui-chip` · priorité du `role`                                  | React laisse GAGNER un `role` fourni par l'appelant ; Angular garde le sien.                                                                                                                                                                                                                                                                                                                                                           | Côté Angular, l'hôte `<ui-chip>` et le span interne sont deux éléments, donc les deux rôles cohabitent. Ici c'est le même élément : sans cette priorité, une puce servant d'`option` dans `ui-autocomplete` verrait son rôle remplacé par `group`, et la liste perdrait ses options. Additif : sans `role` fourni, rien ne change.                                                                                                   |
+| `utils.field-action` · géométrie                                | React annule l'inset vertical du champ `_auto-height` et donne une largeur explicite ; Angular garde `aspect-ratio: 1` sans annulation.                                                                                                                                                                                                                                                                                                | Mesuré : l'action s'arrêtait à la boîte de contenu (32 px pour une boîte de 40), et sa largeur retombait à celle de l'icône (20 px), **sous le minimum de cible de WCAG 2.5.8**. Visible sur tout champ `_auto-height` portant une action (`ui-input-tags`, `ui-select` et `ui-autocomplete` en multiple). **À corriger côté Angular.**                                                                                              |
+| `ui-menu` · pilotage du popup                                   | Angular s'appelle par des **méthodes** (`toggle(event)`, `show`, `hide`) et expose un `uid` pour que le déclencheur y branche son `aria-controls` ; React est **contrôlé** (`open` / `defaultOpen` / `onOpenChange`) et rend le déclencheur par `trigger`, qui reçoit `aria-haspopup`, `aria-expanded` et `aria-controls` tout faits.                                                                                                  | Même arbitrage que `ui-popover`, et pour la même raison : le kit React ne mute pas le DOM d'un élément que React possède. La prop de rendu donne le même service en restant dans le modèle du framework.                                                                                                                                                                                                                             |
+| `ui-menu` · liens et route active                               | Angular a `routerLink`, `queryParams`, `queryParamsHandling` et `routerLinkActive` ; React a `render` sur l'item, plus `active`.                                                                                                                                                                                                                                                                                                       | Le kit n'impose aucun routeur, comme sur `ui-button` et `ui-link` : `render` reçoit les props que le menu aurait posées sur son `<a>`. Et l'appelant est le seul à savoir si l'entrée est celle de la page courante, d'où `active` en remplacement d'une directive de routeur.                                                                                                                                                       |
+| `ui-menu` · prop `tabindex`                                     | Angular expose le `tabindex` de l'arrêt de tabulation ; React **non**.                                                                                                                                                                                                                                                                                                                                                                 | En React, `...rest` transmet déjà `tabIndex` au panneau : une prop du même nom qui atterrirait sur une entrée serait un piège. L'arrêt de tabulation reste à 0, ce qui est le motif menu de l'APG.                                                                                                                                                                                                                                   |
+| `ui-menu` · calque et mouvement                                 | React place le popup et les sous-menus en cascade dans le **calque supérieur** (`popover="manual"`) et anime l'entrée et la sortie en CSS pur ; Angular les monte dans un overlay CDK et pilote le mouvement par une directive.                                                                                                                                                                                                        | Même mesure que pour `ui-popover` et `ui-tooltip` : plus de z-index, plus de rognage par un ancêtre en `overflow: hidden`, et une sortie animée sans garder soi-même le nœud dans le DOM. **Un `popover="manual"` ne restitue pas le focus** en se fermant, contrairement à `auto` : mesuré, et le composant s'en charge donc explicitement.                                                                                         |
+| `ui-context-menu` · pilotage                                    | Angular expose `show(event)`, `hide()` et `toggle(event)` ; React se gouverne seul, avec `onOpen` et `onClose` pour observer.                                                                                                                                                                                                                                                                                                          | Un menu contextuel n'a pas d'état utile sans les coordonnées qui vont avec, et l'événement d'ouverture porte les deux à la fois. Un panneau ouvert par programme est `ui-menu` en mode `popup`, qui est contrôlé. Aucune poignée impérative dans le kit React.                                                                                                                                                                       |
+| `ui-table` · comportements de colonne                           | Angular attache par **directives** (`uiSortableColumn`, `uiSelectableRow`, `uiFrozenColumn`, `uiResizableColumn`, `uiRowToggler`, `uiReorderableRow`) ; React passe des **fabriques de props** au balisage projeté, plus un contexte pour les contrôles.                                                                                                                                                                               | React n'a pas de directives, et un crochet ne convient pas non plus : une ligne se rend dans une boucle dont la longueur varie, et un crochet appelé un nombre variable de fois est interdit. Une fabrique de props est sans état, donc sûre dans une boucle, et rend exactement ce qu'une directive posait sur l'hôte.                                                                                                              |
+| `ui-table` · colonnes figées                                    | Angular a une directive et un `ResizeObserver` par cellule ; React calcule les décalages une fois par ligne, au même endroit que ses autres mesures.                                                                                                                                                                                                                                                                                   | Le tableau voit la ligne entière, donc il n'a rien de plus à observer, et une colonne figée n'est plus qu'une classe côté appelant. Moins de code pour le même rendu.                                                                                                                                                                                                                                                                |
+| `ui-table` · poignée de redimensionnement                       | Angular l'**injecte dans le DOM** depuis sa directive ; React la rend, `<UiTableColumnResizer />`.                                                                                                                                                                                                                                                                                                                                     | React possède le balisage : y injecter un nœud serait écrasé au rendu suivant. Même arbitrage que sur `ui-popover`, qui ne mute pas le DOM de son déclencheur.                                                                                                                                                                                                                                                                       |
+| `ui-table` · état de tri                                        | Angular a trois entrées (`sortField`, `sortOrder`, `multiSortMeta`) ; React a une valeur contrôlable, `sort`.                                                                                                                                                                                                                                                                                                                          | Le tri EST une chose, et le découpage n'était gratuit que grâce aux signaux. Une valeur unique se branche sur le contrat contrôlé du kit, et `onSortChange` porte le mode, ce dont un appelant en mode serveur a besoin.                                                                                                                                                                                                             |
+| `ui-table` · zone défilante et clavier                          | Angular pose `tabindex` dès que `scrollable` ; React ne le pose que si la zone déborde **et** ne contient rien de focalisable.                                                                                                                                                                                                                                                                                                         | axe exige qu'une région défilante soit atteignable, mais un arrêt de tabulation sur une zone dont le contenu l'est déjà n'encombre que le parcours clavier. Même contrat que `ui-modal`. **À corriger côté Angular.**                                                                                                                                                                                                                |
+| `ui-table` · encapsulation                                      | Angular doit sortir de l'encapsulation (`ViewEncapsulation.None`) pour que ses styles atteignent le balisage projeté ; React n'a rien à désactiver.                                                                                                                                                                                                                                                                                    | Le kit React n'a pas d'encapsulation : le préfixe `ui-` EST le namespace (décision D5). Ce que la version Angular obtient par une dérogation est ici l'état normal.                                                                                                                                                                                                                                                                  |
+| `ui-menu` · clic sur un parent de cascade                       | Angular **bascule** le sous-menu au clic ; React l'**ouvre**, sans le refermer.                                                                                                                                                                                                                                                                                                                                                        | À la souris, le survol a déjà ouvert le panneau avant que le clic arrive : une bascule le referme donc aussitôt, et cliquer un parent paraît sans effet. Le défaut est présent à l'identique côté Angular, la forme du code y étant la même. **À corriger côté Angular.**                                                                                                                                                            |
+| `ui-menu` · survol après une activation                         | React ignore un `mouseenter` qui n'a pas été précédé d'un `pointermove` ; Angular le traite.                                                                                                                                                                                                                                                                                                                                           | Masquer un panneau change l'élément sous le pointeur, et le navigateur émet alors un `mouseenter` sans que l'utilisateur ait bougé. Mesuré : 7 ms après la fermeture d'un sous-menu, son parent en reçoit un et le rouvre. Même code côté Angular, donc même défaut. **À corriger côté Angular.**                                                                                                                                    |
+| `ui-context-menu` · cible                                       | Angular prend un `target` (élément ou `ElementRef`) ou `global` ; React rend la zone par `trigger` et lui passe la `ref`, ou prend `global`.                                                                                                                                                                                                                                                                                           | Une prop de rendu remplace la variable de référence de template, comme sur `ui-tooltip`, qui était une directive. Le composant ne va pas chercher un élément qu'il ne rend pas.                                                                                                                                                                                                                                                      |
+| `core/motion` · forme de la brique                              | Angular est une **directive** (`uiMotion`) qui donne des noms de classes à `animate.enter` / `animate.leave` ; React est un crochet, `useUiMotion`, qui retient lui-même le nœud sortant.                                                                                                                                                                                                                                              | React n'a pas de directives, et surtout pas d'équivalent d'`animate.leave` : un élément quitte le DOM dès que l'appelant cesse de le rendre. Le crochet rend donc `present`, vrai pendant toute la sortie. Les classes, les préréglages et les keyframes, eux, sont les MÊMES des deux côtés : c'est la partie qui compte pour la parité visuelle.                                                                                   |
+| `ui-avatar-group` · portée des styles                           | Angular sort de l'encapsulation (`ViewEncapsulation.None`) pour viser l'élément `ui-avatar` projeté ; React vise la CLASSE `.ui-avatar`.                                                                                                                                                                                                                                                                                               | Le kit React n'a pas d'encapsulation, le préfixe `ui-` ÉTANT le namespace (décision D5), et les sélecteurs d'élément nu y sont interdits parce qu'ils fuiraient sur toute la page. Ce qu'Angular obtient par dérogation est ici l'état normal.                                                                                                                                                                                       |
+| `ui-input-group` · reformage des items                          | Angular écrit des styles EN LIGNE sur chaque item depuis un `MutationObserver` ; React le fait en CSS pur, par un sélecteur d'enfant.                                                                                                                                                                                                                                                                                                  | Même raison : un sélecteur scopé ne peut pas atteindre du contenu projeté côté Angular, d'où l'observateur. Ici le sélecteur passe, donc le composant n'a plus aucun JavaScript, et il suit les `@if`/`@for` de l'appelant sans rien observer.                                                                                                                                                                                       |
+| `ui-button-split` · nom du modèle                               | Angular l'appelle `model` ; React l'appelle `items`.                                                                                                                                                                                                                                                                                                                                                                                   | Le `ui-menu` React nomme déjà ses entrées `items`, et c'est le MÊME type qui circule. Deux noms pour la même donnée dans le même kit coûterait plus cher que l'écart avec Angular, que la règle « le sens jamais » autorise explicitement.                                                                                                                                                                                           |
+| `ui-button-split` · pilotage et poignées                        | Angular expose `tabindex`, `buttonProps`, `focus()` et `hide()`, plus `menuShow` / `menuHide` ; React expose `open` / `defaultOpen` / `onOpenChange` et rien d'impératif.                                                                                                                                                                                                                                                              | Mêmes arbitrages que `ui-popover` et `ui-menu`, dont ce composant n'est qu'un assemblage : `...rest` remplace `buttonProps`, aucune poignée impérative dans le kit React, et `onOpenChange` dit à lui seul ce que disaient `menuShow` et `menuHide`.                                                                                                                                                                                 |
+| `ui-tabs` · élément hôte de l'onglet                            | Angular a un hôte `ui-tab` en `display: contents` autour d'un `.ui-tab-button` ; React rend le bouton seul, et `.ui-tab` EST ce bouton.                                                                                                                                                                                                                                                                                                | React ne rend pas d'élément hôte : les règles qui vivaient sur `:host` se fondent dans la classe racine, comme partout ailleurs dans ce kit (décision D5). `.ui-tab-button` n'a donc plus d'élément à décrire. Les sous-éléments `.ui-tab-icon` et `.ui-tab-label` sont inchangés.                                                                                                                                                   |
+| `ui-tabs` · prop `tabindex`                                     | Angular expose le `tabindex` de l'arrêt de tabulation ; React **non**.                                                                                                                                                                                                                                                                                                                                                                 | Même arbitrage que sur `ui-menu` : `...rest` transmet déjà `tabIndex` à la racine, donc une prop du même nom qui atterrirait sur un onglet serait un piège. L'arrêt reste à 0, ce qui est le motif Tabs de l'APG.                                                                                                                                                                                                                    |
+| `ui-tabs` · panneau focalisable                                 | Angular pose `tabindex="0"` sur tout panneau ; React ne le garde que si le panneau ne contient rien de focalisable.                                                                                                                                                                                                                                                                                                                    | C'est ce que dit le motif Tabs de l'APG, et le même contrat que `ui-table` et `ui-modal` appliquent déjà ici : un arrêt de tabulation devant un contenu déjà atteignable n'encombre que le parcours clavier. **À corriger côté Angular.**                                                                                                                                                                                            |
+| `ui-tabs` · valeur « aucun onglet actif »                       | Angular l'écrit `undefined` ; React l'écrit `null`.                                                                                                                                                                                                                                                                                                                                                                                    | Le contrat contrôlé du kit lit `value === undefined` comme « non contrôlé » : sans ce partage, un conteneur contrôlé sans sélection basculerait en non contrôlé. Même choix que `ui-segment-control`, dont la valeur vide est déjà `null`.                                                                                                                                                                                           |
+| `ui-tabs` · hooks d'indicateur hérités                          | Angular honore encore `--ui-tabs-active-bar-color` et `-size` en repli ; React ne connaît que `--ui-tabs-indicator-*`.                                                                                                                                                                                                                                                                                                                 | Ce sont les noms d'AVANT le renommage côté Angular, gardés une version pour ses consommateurs. Ce dépôt n'a jamais publié les anciens : les replier ici serait promettre une compatibilité avec un passé qu'il n'a pas.                                                                                                                                                                                                              |
+| `ui-accordion` · en-tête                                        | Angular a un slot `uiAccordionHeader` **en plus** d'une entrée texte `header`, et un marqueur `uiAccordionContent` ; React n'a qu'une prop `header` de type `ReactNode`.                                                                                                                                                                                                                                                               | Une prop `ReactNode` couvre le titre texte et l'en-tête riche du même coup : le slot n'a plus d'objet, et le corps est déjà `children`. React n'a pas de directives, donc pas de marqueur non plus.                                                                                                                                                                                                                                  |
+| `ui-accordion` · valeur « rien d'ouvert »                       | Angular l'écrit `undefined` ; React l'écrit `null`.                                                                                                                                                                                                                                                                                                                                                                                    | Même arbitrage que `ui-tabs` : dans le contrat contrôlé du kit, `undefined` veut dire « non contrôlé ». Les deux sens ne peuvent pas partager une valeur.                                                                                                                                                                                                                                                                            |
+| `ui-accordion` · sorties et poignée                             | Angular a `opened` / `closed` et une méthode `focus()` sur le panneau ; React a `onPanelOpen` / `onPanelClose` et **aucune** poignée impérative.                                                                                                                                                                                                                                                                                       | Le préfixe `on` est la convention de sortie du kit, et le clavier du groupe déplace lui-même le focus : une poignée publique n'aurait aucun appelant. Aucune API impérative dans le kit React, comme sur `ui-popover` et `ui-menu`.                                                                                                                                                                                                  |
+| `ui-toast` · forme du magasin                                   | Angular injecte un service `UiToastService` (`providedIn: 'root'`) ; React exporte un singleton de module, `uiToast`, plus le crochet de lecture `useUiToasts`.                                                                                                                                                                                                                                                                        | Une notification se déclenche aussi depuis un intercepteur HTTP ou un gestionnaire d'erreurs, c'est-à-dire hors de tout composant. Un contexte obligerait à poser un fournisseur à la racine et resterait inatteignable de là ; un module rend le même service sans rien imposer.                                                                                                                                                    |
+| `ui-toast` · routage des messages                               | Angular l'appelle `key`, sur le conteneur comme sur le message ; React l'appelle `channel`.                                                                                                                                                                                                                                                                                                                                            | `key` est **réservé** par React pour l'identité d'un élément : une prop de ce nom n'atteindrait jamais le composant. Renommé des deux côtés du contrat pour que le message et la pile parlent pareil.                                                                                                                                                                                                                                |
+| `ui-toast` · contenu sur mesure                                 | Angular passe un `TemplateRef` par l'entrée `template` ; React passe `renderToast(message, { close })`.                                                                                                                                                                                                                                                                                                                                | React n'a pas de `TemplateRef`, et le kit prend une prop de rendu pour tout slot paramétré. Le contexte `$implicit` / `closeFn` devient les deux arguments.                                                                                                                                                                                                                                                                          |
+| `ui-toast` · calque et empilement                               | Angular pose la pile en `fixed` à un z-index, et expose `autoZIndex` et `baseZIndex` ; React la place dans le **calque supérieur** (`popover="manual"`) et n'expose ni l'un ni l'autre.                                                                                                                                                                                                                                                | Mesuré : `ui-modal` est ici un `<dialog>` **natif**, donc dans ce calque, et aucun z-index ne passe devant. La pile s'y remontre à chaque nouveau message, le calque empilant dans l'ordre d'affichage. Garder les deux props serait promettre un réglage sans effet, comme sur `ui-modal`. `contained` reste en z-index.                                                                                                            |
+| `ui-toast` · compte à rebours d'une file                        | Angular arme le délai **à l'arrivée**, même pour un message au-delà de `stackVisibleLimit` ; React l'arme **quand la carte paraît**.                                                                                                                                                                                                                                                                                                   | Côté Angular un message en file expire sans avoir jamais été affiché, ce que sa propre doc ne décrit pas (« les autres attendent leur tour »). Ici il attend vraiment son tour. **À corriger côté Angular.**                                                                                                                                                                                                                         |
+| `ui-toast` · pointeur de la bande                               | Angular rend le pointeur à la **bande** qui porte chaque carte ; React le rend à la **carte**.                                                                                                                                                                                                                                                                                                                                         | Mesuré : la bande fait toute la largeur de la pile alors que la carte fait sa largeur de contenu. Elle avale donc les clics de la page à côté de la carte, et suspend le compte à rebours dès que le pointeur passe sur la même ligne. Même piège que sur `ui-tooltip`. **À corriger côté Angular.**                                                                                                                                 |
+| `ui-input-otp` · `aria-invalid` du groupe                       | Angular le pose sur l'hôte `role="group"` ; React ne le pose que sur les **cases**.                                                                                                                                                                                                                                                                                                                                                    | Le rôle `group` ne supporte pas `aria-invalid`, qui appartient aux widgets de saisie : les cases sont les contrôles réels, et c'est là qu'il veut dire quelque chose. Signalé par `jsx-a11y`. **À corriger côté Angular.**                                                                                                                                                                                                           |
+| `ui-input-otp` · entrée au montage                              | Angular l'appelle `autofocus` ; React l'appelle `focusOnMount`, et passe par une ref de rappel plutôt que par l'attribut natif.                                                                                                                                                                                                                                                                                                        | `jsx-a11y/no-autofocus` refuse le nom `autoFocus` sur n'importe quel élément, y compris un composant du kit : garder le nom d'Angular ferait échouer le lint de **chaque consommateur**. Le nom retenu dit d'ailleurs mieux ce qui se passe, l'attribut natif n'étant pas utilisé.                                                                                                                                                   |
+| `ui-input-otp` · case sur mesure                                | Angular projette un `TemplateRef` nommé `#input` dont le contexte porte `events` ; React passe `renderCell(context)`, dont le contexte EST les gestionnaires.                                                                                                                                                                                                                                                                          | React n'a pas de `TemplateRef`, et le kit prend une prop de rendu pour tout slot paramétré. Étaler le contexte sur un `<input>` suffit alors à garder le comportement du groupe.                                                                                                                                                                                                                                                     |
+| `ui-knob` · prop `required`                                     | Angular l'expose et pose `aria-required` ; React ne l'expose **pas**.                                                                                                                                                                                                                                                                                                                                                                  | Le rôle `slider` ne supporte pas `aria-required` : la prop ne posait donc rien d'effectif. Une prop sans effet est pire qu'absente, elle promet une contrainte qui n'existe pas. Signalé par `jsx-a11y`. **À corriger côté Angular.**                                                                                                                                                                                                |
+| `ui-knob` · sortie `knobChange`                                 | Angular émet à la fois le modèle et `knobChange` ; React n'a que `onValueChange`.                                                                                                                                                                                                                                                                                                                                                      | Les deux portaient exactement la même chose au même instant. Le contrat contrôlé du kit rapporte déjà tout changement, d'où qu'il vienne, clavier ou glissement.                                                                                                                                                                                                                                                                     |
+| `ui-input-otp` et `ui-knob` · poignées                          | Angular expose une méthode publique `focus()` ; React n'en expose aucune.                                                                                                                                                                                                                                                                                                                                                              | Aucune API impérative dans le kit React, comme sur `ui-popover`, `ui-menu` et `ui-context-menu`. `ref` donne l'élément racine, et le reste se fait par les props.                                                                                                                                                                                                                                                                    |
+| `ui-breadcrumb` · liens et routeur                              | Angular a `routerLink`, `queryParams` et `fragment` sur chaque maillon ; React a `render`, qui reçoit les props que le fil aurait posées sur son `<a>`.                                                                                                                                                                                                                                                                                | Le kit n'impose aucun routeur, comme sur `ui-button`, `ui-link` et `ui-menu`. Reverser les props sur le composant de lien du projet couvre tous les routeurs sans en connaître aucun.                                                                                                                                                                                                                                                |
+| `ui-breadcrumb` · séparateur et contenu                         | Angular a l'entrée texte `separator` **et** un gabarit `#separator`, plus un gabarit `#item` ; React a une prop `separator` de type `ReactNode` et `renderItem`.                                                                                                                                                                                                                                                                       | Une prop `ReactNode` couvre la chaîne et le nœud du même coup : le second gabarit n'a plus d'objet. Même arbitrage que sur l'en-tête de `ui-accordion`.                                                                                                                                                                                                                                                                              |
+| `ui-swatch-picker` · pilotage du popup                          | Angular s'appelle par des **méthodes** (`toggle(event)`, `show`, `hide`) et expose un `uid` pour que le déclencheur y branche son `aria-controls` ; React est **contrôlé** (`open` / `defaultOpen` / `onOpenChange`) et rend le déclencheur par `trigger`, qui reçoit `aria-haspopup`, `aria-expanded` et `aria-controls` tout faits.                                                                                                  | Même arbitrage que `ui-popover` et `ui-menu`, et pour la même raison : le kit React ne mute pas le DOM d'un élément que React possède.                                                                                                                                                                                                                                                                                               |
+| `ui-swatch-picker` · calque du panneau                          | React place le panneau dans le **calque supérieur** (`popover="manual"`) ; Angular le monte dans un overlay CDK.                                                                                                                                                                                                                                                                                                                       | Même mesure que pour `ui-popover`, `ui-tooltip` et `ui-menu` : plus de z-index à arbitrer, et plus de rognage par un ancêtre en `overflow: hidden`. Vérifié ici dans un cadre de 80 px. **Un `popover="manual"` ne restitue pas le focus**, donc le composant s'en charge, et seulement si le focus était dans le panneau.                                                                                                           |
+| `ui-swatch-picker` · nom de la pastille vide                    | Angular écrit « Aucune couleur » en dur ; React l'expose par `clearLabel`.                                                                                                                                                                                                                                                                                                                                                             | Le kit ne porte aucun catalogue de traduction, mais toute chaîne visible doit pouvoir être remplacée par l'application. Additif : le défaut est le même.                                                                                                                                                                                                                                                                             |
+| `ui-speed-dial` · pilotage                                      | Angular a un modèle `visible` à double sens et les méthodes `show`, `hide`, `toggle` et `focus`, plus les sorties `opened` et `closed` ; React est **contrôlé** (`open` / `defaultOpen` / `onOpenChange`) et n'expose aucune poignée.                                                                                                                                                                                                  | Même arbitrage que `ui-popover`, `ui-menu` et `ui-swatch-picker`. `onOpenChange` porte déjà les deux sorties, qui disaient la même chose au même instant.                                                                                                                                                                                                                                                                            |
+| `ui-speed-dial` · sortie des actions                            | Angular anime l'entrée ET la sortie de chaque action, et doit remettre le délai à zéro sur la sortie ; React anime l'entrée par action et fait disparaître la **liste entière**.                                                                                                                                                                                                                                                       | Le kit Angular a essayé la sortie décalée puis l'a annulée : une action au délai plus court finit avant ses voisines, perd sa classe de sortie et revient à pleine opacité le temps qu'elles terminent, ce qui se lit comme un clignotement. Faire partir la liste donne le départ groupé gratuitement, et la règle `[class*='-leave']` disparaît.                                                                                   |
+| `ui-speed-dial` et `ui-bottom-tab-bar` · routeur                | Angular a `routerLink` sur l'action et sur l'onglet ; React a `render`.                                                                                                                                                                                                                                                                                                                                                                | Le kit n'impose aucun routeur, comme sur `ui-button`, `ui-link`, `ui-menu` et `ui-breadcrumb`.                                                                                                                                                                                                                                                                                                                                       |
+| `ui-bottom-tab-bar` · éléments hôtes                            | Angular a trois hôtes en `display: contents`, autour de la barre, de l'onglet et du bouton flottant ; React n'en a aucun.                                                                                                                                                                                                                                                                                                              | Décision D5 : sans encapsulation, `.ui-bottom-tab-bar` EST le `<nav>` et `.ui-bottom-tab` EST le contrôle natif. Les trois hôtes n'ont nulle part où vivre, et les trois règles qui les neutralisaient non plus.                                                                                                                                                                                                                     |
+| `ui-stepper` · séquence des étapes                              | Angular la lit dans sa projection (`contentChildren`) ; React la lit dans les `children`.                                                                                                                                                                                                                                                                                                                                              | React a ses enfants sous la main comme une **valeur** : la séquence est une fonction pure, sans état ni effet, et juste dès le premier rendu, là où une requête de projection ne se résout qu'après. La contrepartie est qu'un `UiStep` enveloppé dans un composant de l'appelant n'est pas vu, ce que la doc dit.                                                                                                                   |
+| `ui-stepper` · pilotage de la progression                       | Angular expose les méthodes `next()` et `prev()` sur le composant, appelées par une référence de gabarit ; React expose le crochet `useUiStepper()`.                                                                                                                                                                                                                                                                                   | Un bouton « Suivant » vit DANS un panneau : il lit le contexte, là où une poignée devrait être descendue depuis le parent. Le crochet rend en plus `isFirst` et `isLast`, que l'appelant recalculait.                                                                                                                                                                                                                                |
+| `ui-stepper` · valeur de l'item                                 | Angular propage la valeur du `ui-step-item` à ses enfants par un effet qui écrit dans leurs modèles ; React la prête par un contexte.                                                                                                                                                                                                                                                                                                  | Écrire dans l'entrée d'un enfant est un aller-retour que React n'a pas : le contexte dit la même chose sans mutation, et la valeur est disponible au rendu de l'enfant plutôt qu'au tour suivant.                                                                                                                                                                                                                                    |
+| `ui-bottom-sheet` · structure et empilement                     | React rend un `<dialog>` **natif** ; Angular construit un voile, un positionneur et un piège de focus CDK. React n'expose donc **ni `autoZIndex` ni `baseZIndex`**, ni `trapFocus` ni `focusOnShow`.                                                                                                                                                                                                                                   | Même arbitrage que `ui-modal`, et pour les mêmes raisons mesurées : le calque supérieur empile dans l'ordre d'ouverture, sans z-index, et le piège de focus, la restitution du focus, l'inertie du fond et Échap sont natifs. Garder ces quatre props serait promettre des réglages sans effet.                                                                                                                                      |
+| `ui-bottom-sheet` · zones projetées                             | Angular a trois directives marqueurs (`uiBottomSheetHeader`, `-Content`, `-Footer`) ; React a `header`, `footer` et `children`.                                                                                                                                                                                                                                                                                                        | React n'a pas de directives, et le kit passe des props `ReactNode` pour les slots statiques. Même forme que `ui-drawer` et `ui-modal`, dont ce panneau partage le socle.                                                                                                                                                                                                                                                             |
+| `ui-bottom-sheet` · `contained` et le voile                     | Angular garde son voile en `position: absolute` ; React rend le panneau **non modal**, donc sans arrière-plan.                                                                                                                                                                                                                                                                                                                         | Le calque supérieur est relatif à la fenêtre, jamais à un ancêtre : un panneau cantonné ne peut pas y vivre. Le kit ne reconstruit pas un voile pour cet unique cas, ce qui ramènerait le z-index qu'on vient de retirer. Même comportement que `ui-drawer`.                                                                                                                                                                         |
+| `ui-bottom-sheet` · fin d'animation                             | Angular émet `opened` et `closed` à la FIN de la transition, mesurée puis doublée d'un délai de secours ; React émet `onShow` et `onHide` au changement d'état.                                                                                                                                                                                                                                                                        | Le kit React laisse la CSS animer et n'attend rien : il n'y a donc ni minuterie de secours, ni durée à relire dans le style calculé. Un appelant qui a besoin de la fin exacte écoute `transitionend`, ce que le composant ne peut pas faire à sa place sans deviner quelle propriété compte.                                                                                                                                        |
+| `ui-bottom-sheet` · focus dirigé                                | Angular réessaie cinq fois de trouver `autoFocusElement` ; React interroge une fois.                                                                                                                                                                                                                                                                                                                                                   | Le contenu projeté d'Angular arrive un tour après l'ouverture, d'où les tentatives. En React les enfants sont rendus avant que l'effet ne tire : une seule requête suffit, et son échec est un vrai avertissement plutôt qu'un abandon après cinq essais.                                                                                                                                                                            |
+| `ui-image` · SVG inliné                                         | Angular assainit puis appelle `bypassSecurityTrustHtml()`, **la seule exception de sécurité du kit** ; React convertit le balisage en **éléments React**.                                                                                                                                                                                                                                                                              | L'assainisseur d'Angular supprime `<svg>` en entier, ce qui ne laisse que le contournement. React n'a pas ce problème : `inlineSvgToReact()` analyse dans un document détaché, nettoie, puis construit des éléments. Rien n'est écrit en HTML, donc le registre de `docs/SECURITY-PRACTICES.md` reste vide.                                                                                                                          |
+| `ui-image` · table des images et fetch                          | Angular injecte `UI_IMAGE_ASSETS` et s'appuie sur `HttpClient`, donc sur les intercepteurs de l'application ; React passe par `UiImageProvider`, qui prend la table ET la fonction `fetchSecured`.                                                                                                                                                                                                                                     | React n'a pas de client HTTP injecté : une image protégée a besoin de la fonction qui sait poser le jeton, et c'est l'application qui la détient. La table suit le même chemin, un contexte étant le pendant React d'un jeton d'injection.                                                                                                                                                                                           |
+| `ui-image` · mode et marque                                     | Angular injecte `ThemeService` et `BrandService` ; React lit `data-theme` et `data-brand` sur `<html>`.                                                                                                                                                                                                                                                                                                                                | C'est là que le fournisseur les pose, et c'est ce que lisent les jetons : lire l'attribut marche donc aussi quand un script d'amorçage ou une barre d'outils l'a posé sans passer par lui. Mesuré : exiger le fournisseur faisait échouer les treize stories du composant, une image devant pouvoir afficher une URL distante sans rien autour.                                                                                      |
+| `ui-image` · rendu de l'image                                   | Angular passe par `NgOptimizedImage`, avec une branche à part pour les charges `data:` et `blob:` qu'il refuse ; React rend un `<img>` ordinaire, avec `loading` et `fetchpriority`.                                                                                                                                                                                                                                                   | React n'a pas d'équivalent de cette directive, et les deux attributs natifs couvrent ce que `priority` promettait. La branche de contournement disparaît avec elle.                                                                                                                                                                                                                                                                  |
+| `ui-image-preview` · socle                                      | Angular construit un masque plus un piège de focus CDK ; React rend un `<dialog>` natif.                                                                                                                                                                                                                                                                                                                                               | Même arbitrage que `ui-modal`, `ui-drawer` et `ui-bottom-sheet` : le piège de focus, la restitution du focus, `Échap` et l'empilement sont natifs, et `::backdrop` fait le masque.                                                                                                                                                                                                                                                   |
+| `ui-file-upload` · sorties                                      | Angular émet `selected`, `filesChange`, `uploadHandler`, `uploaded`, `uploadError`, `removed` et `cleared` ; React appelle `onFilesSelect`, `onFilesChange`, `onCustomUpload`, `onUploadComplete`, `onUploadError`, `onRemove` et `onClear`.                                                                                                                                                                                           | Même sens, un nom par sortie. Trois s'écartent de la simple préfixation : `onSelect` est déjà l'événement DOM de sélection de texte, `onUploadHandler` décrirait la fonction et non l'instant, et `onUploaded` se lirait mal à côté de `onUploadError`.                                                                                                                                                                              |
+| `ui-file-upload` · pilotage                                     | Angular expose `choose()`, `upload()`, `remove()` et `clear()` sur le composant, et la sélection par le signal `files` ; React n'expose **aucune poignée** : les actions passent par les props de rendu, la sélection par `onFilesChange`. Les fichiers du modèle sont immuables (`readonly`).                                                                                                                                         | Même arbitrage que `ui-popover` et `ui-speed-dial`. La barre d'actions qui appelle `upload()` vit DANS le composant, via `renderToolbar`, qui reçoit les quatre actions. Un fichier est remplacé à chaque changement d'état, jamais modifié en place, ce que le kit Angular faisait déjà en pratique sans que le type le dise.                                                                                                       |
+| `ui-file-upload` · gabarits                                     | Angular a `fileTemplate`, `contentTemplate` et `toolbarTemplate`, dont le contexte passe par `$implicit` ; React a `renderFile`, `renderContent` et `renderToolbar`, qui reçoivent la donnée PUIS un objet d'actions.                                                                                                                                                                                                                  | React n'a pas de `TemplateRef` : une prop de rendu en est le pendant, comme sur `ui-input-otp` et `ui-toast`. L'ordre des arguments reprend celui du contexte Angular, la variable implicite d'abord.                                                                                                                                                                                                                                |
+| `ui-file-upload` · `name` et formulaire natif                   | Angular pose `name` sur le sélecteur, qu'il vide après chaque choix : un formulaire natif reçoit alors un fichier **vide**. React laisse le sélecteur sans nom et rend, avec `name`, un second champ caché qui porte la sélection courante.                                                                                                                                                                                            | Mesuré : nom `''`, 0 octet, dans le `FormData` d'un formulaire qui entoure le composant. Le vidage est nécessaire, sans lui un nouveau choix du même fichier ne redéclenche pas `change` ; c'est donc un second champ qui soumet. Additif sans `name`. **À corriger côté Angular.**                                                                                                                                                  |
+| `ui-file-upload` · élément de liste                             | Angular stylise `li` sous `.ui-file-upload-content` ; React pose la classe `ui-file-upload-item` sur son `<li>`.                                                                                                                                                                                                                                                                                                                       | Décision D5 : sans encapsulation, un sélecteur d'élément atteindrait aussi les `<li>` que l'application rend par `renderContent` ou `renderFile`.                                                                                                                                                                                                                                                                                    |
+| `ui-file-upload` et `ui-file-upload-list` · couleur des erreurs | Angular colore le message de refus et le texte d'une ligne en erreur avec `--informative-errorhigh-content-default` ; React avec `--form-error-content-default`.                                                                                                                                                                                                                                                                       | Le premier est le contenu posé SUR la surface d'erreur forte : blanc, donc invisible sur le fond neutre des deux, mesuré à 1:1. `informative-errorlow-content`, celui de `ui-helper`, ne varie pas avec le mode et tombe à 2.74:1 en sombre. Le jeton d'erreur de la famille formulaire suit le mode : au moins 4.51:1 en clair, 12.26:1 en sombre. **À corriger côté Angular.**                                                     |
+| `ui-sidebar` · présentation superposée                          | Angular construit un voile, un positionneur, un piège de focus CDK, pose `aria-modal` sur l'`<aside>` et empile par `baseZIndex` ; React rend un `<dialog>` **natif**, qui EST le panneau, et n'expose pas `baseZIndex`.                                                                                                                                                                                                               | Même arbitrage que `ui-drawer` : le piège de focus, sa restitution, l'inertie de l'arrière-plan, `Échap` et l'empilement sont natifs, et `::backdrop` fait le voile. `aria-modal` n'est pas pris en charge par le rôle `complementary` d'un `<aside>`, seulement par `dialog` : c'est le rôle du `<dialog>` qui porte la modalité. **À corriger côté Angular.**                                                                      |
+| `ui-sidebar` · sans voile                                       | Angular garde le piège de focus sans voile : la page reçoit le pointeur mais pas le clavier. React rend le panneau **non modal** (`show()`) : ni piège, ni inertie, ni blocage du défilement.                                                                                                                                                                                                                                          | Le pointeur et le clavier doivent avoir le même accès : un clavier piégé pendant que la souris circule librement est incohérent. Même traitement pour `contained`, qui rend le panneau non modal sans voile, comme `ui-drawer` et `ui-bottom-sheet`.                                                                                                                                                                                 |
+| `ui-sidebar` · pilotage                                         | Angular a les modèles `collapsed` et `visible`, les méthodes `toggle`, `open`, `close` et `focus`, la directive `[uiSidebarTrigger]` qui désigne l'instance, et les sorties `shown` et `hidden` ; React a les couples contrôlés `collapsed` et `visible`, `UiSidebarProvider` avec `useUiSidebarTrigger()`, `useUiSidebar()` et `getUiSidebarTriggerProps()`, et `onShow`, `onHide`. `focus()` passe par la ref, posée sur le panneau. | React n'a pas de référence de gabarit vers une instance. Un déclencheur vit souvent HORS de la barre : le fournisseur rend son état lisible autour d'elle, comme le fait un contexte pour ses descendants. La barre publie dans un magasin et non dans un état du fournisseur, pour qu'un enfant ne rende pas tout l'arbre deux fois.                                                                                                |
+| `ui-sidebar` · en-tête et pied                                  | Angular projette les gabarits `#header` et `#footer`, qui reçoivent `collapsed` en contexte ; React a `header` et `footer`, un nœud ou une fonction qui reçoit l'état de la barre.                                                                                                                                                                                                                                                     | React n'a pas de `TemplateRef`. La fonction reçoit l'état entier plutôt que le seul repli : l'en-tête peut ainsi porter le déclencheur, par `getUiSidebarTriggerProps()`.                                                                                                                                                                                                                                                            |
+| `ui-sidebar-menu` · routeur                                     | Angular a `routerLink`, `queryParams` et `routerLinkActiveExact` sur l'entrée, et calcule l'entrée courante par `routerLinkActive` ; React a `render`, et l'application pose `active`.                                                                                                                                                                                                                                                 | Le kit n'impose aucun routeur, comme sur `ui-button`, `ui-breadcrumb` et `ui-bottom-tab-bar`.                                                                                                                                                                                                                                                                                                                                        |
+| `ui-sidebar-menu` · identifiants                                | Angular dérive les identifiants de section et de groupe de la seule position (`n-0-h`) ; React les préfixe par l'instance.                                                                                                                                                                                                                                                                                                             | Deux menus sur une page, ce que fait la double barre, produisaient des identifiants en double, et `aria-labelledby` désignait le premier trouvé. Le test des deux menus tombe sans le préfixe. **À corriger côté Angular.**                                                                                                                                                                                                          |
+| `ui-sidebar-menu` · rôles de liste                              | Angular pose `role="list"` sur les `<ul>` et `role="listitem"` sur les `<li>` ; React garde le premier et retire le second.                                                                                                                                                                                                                                                                                                            | Le rôle de liste explicite sert : Safari retire la sémantique d'une liste en `list-style: none`, d'où une exception d'une ligne à `jsx-a11y/no-redundant-roles`. Celui d'un `<li>` est vraiment redondant, un élément de liste le tenant de son parent.                                                                                                                                                                              |
+| `ui-editor` · nettoyage de la valeur                            | Angular passe la valeur par son `DomSanitizer`, qui retire tout attribut `style` ; React par `sanitizeHtml`, son portage exact, qui garde en plus un `style` réduit à l'alignement et au retrait. Une entrée instable rend une chaîne vide au lieu de lever.                                                                                                                                                                           | Mesuré dans Chromium : l'alignement s'écrit `style="text-align: …"` et le retrait `<blockquote style="margin: …">`. Avec la liste stricte d'Angular, le test d'aller-retour de l'alignement tombe : **l'éditeur Angular perd l'alignement et le retrait dès qu'une valeur enregistrée lui revient.** Aucune `url()` ne passe par le style réduit. Lever sur une valeur stockée ferait planter le champ. **À corriger côté Angular.** |
+| `ui-editor` · écriture dans la zone                             | Angular écrit `innerHTML` dans la zone et analyse dans des `<template>`, trois exceptions de sécurité ; React analyse par `DOMParser` et insère des nœuds, sans aucune.                                                                                                                                                                                                                                                                | Même résultat, sans API qui écrive du HTML. Seul le collage garde `execCommand('insertHTML')`, comme Angular, pour l'annulation native ; c'est l'unique exception du kit React, inscrite au registre et vérifiée par le lint.                                                                                                                                                                                                        |
+| `ui-editor` · conversion des marqueurs                          | Angular remplace le `<font>` d'une commande par une classe, et s'arrête là ; React retire aussi les classes de la même famille restées à l'intérieur, et repose la sélection sur le texte mis en forme.                                                                                                                                                                                                                                | Mesuré dans le navigateur : recolorer un paragraphe qui contient un mot rouge laissait ce mot rouge, sa classe étant plus proche du texte. Et remplacer l'élément qui portait la sélection l'effondrait : une seconde mise en forme demandait de resélectionner. Un test par défaut, chacun tombe sans sa correction. **À corriger côté Angular.**                                                                                   |
+| `ui-editor` · API                                               | Angular a `maxlength`, `readonly`, les sorties `valueChange`, `editorFocus`, `editorBlur` et `selectionChange`, et la méthode `focus()` ; React a `maxLength`, `readOnly`, `onValueChange`, les `onFocus` et `onBlur` natifs de la zone, `onSelectionChange`, et une ref sur la zone.                                                                                                                                                  | Les noms suivent les attributs natifs et le contrat contrôlé du kit, comme `ui-textarea`. Les nuanciers annoncent `aria-haspopup="listbox"` et `aria-controls`, par le déclencheur de `ui-swatch-picker`, là où Angular posait `aria-haspopup="true"`.                                                                                                                                                                               |
+| `core/ripple` · activation                                      | Angular active l'onde par `provideUiRipple()` et les directives `[uiRipple]` et `[uiRippleScope]`, et lance une onde par `UiRippleEngine.launch()` ; React par `UiRippleProvider`, les crochets `useUiRipple()` et `useUiRippleScope()`, qui rendent une `ref` et `data-ripple` à reverser, et `launchRipple()`.                                                                                                                       | React n'a ni fournisseur d'environnement ni directive. Le moteur, lui, est le même, en DOM pur, et le contrat des composants aussi : les quatorze composants équipés posent `data-ripple` sur les mêmes cibles, et une pression ne produit qu'une onde, même entre deux copies du kit.                                                                                                                                               |
 
 ## Reporter une évolution de jeton
 
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index b1b1594..0106fb5 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -38,13 +38,13 @@ La liste est longue parce que chaque entrée a coûté du temps une fois.
 | ----- | ------------------------------- | ----------------------------------------- |
 | 0     | Socle et décisions              | ✅ terminée                               |
 | 1     | Le patron, de bout en bout      | ✅ terminée (`ui-icon`, puis `ui-button`) |
-| 2     | Fondation transverse            | 🟡 **en cours** : voir ci-dessous         |
-| 3     | La vague des composants         | 🟡 58 sur 62                              |
+| 2     | Fondation transverse            | ✅ terminée (`core/ripple` en dernier)    |
+| 3     | La vague des composants         | ✅ 62 sur 62                              |
 | 4     | Mode copie et registry          | ⬜ pas commencée                          |
 | 5     | MCP, doc publique, publication  | ⬜ pas commencée                          |
 | 6     | Contrôle de parité entre stacks | ⬜ pas commencée                          |
 
-**Chiffres du jour** : 58 composants, 67 points d'entrée publics, 7 garde-fous en CI,
+**Chiffres du jour** : 62 composants, 72 points d'entrée publics, 7 garde-fous en CI,
 **deux** dépendances runtime (`@floating-ui/react-dom` et `@tanstack/react-virtual`, un seul
 fichier chacune).
 
@@ -79,7 +79,7 @@ elles, ont été exécutées avant d'y être écrites.
 | `core/virtual` | ✅ `use-ui-virtual-list` (TanStack Virtual, un seul fichier l'importe)                                                                                                                                                                                                               |
 | `core/forms`   | ✅ `useControllableState`, `useUiField`, types partagés, moteur de masque                                                                                                                                                                                                            |
 | `core/motion`  | ✅ jetons, `motion-transition`, `motion-reduce`, `overlay-motion` (entrée et sortie d'un panneau du calque supérieur, en CSS pur), `overlay-motion-enter` (entrée seule), et `useUiMotion` pour l'entrée et la sortie d'un élément HORS calque supérieur (listes, accordéon, toast). |
-| `core/ripple`  | ⬜ 338 lignes à porter                                                                                                                                                                                                                                                               |
+| `core/ripple`  | ✅ moteur sans React, `UiRippleProvider`, `useUiRipple`, `useUiRippleScope`, `launchRipple` ; prop `ripple` sur les quatorze composants équipés                                                                                                                                      |
 
 ---
 
@@ -89,8 +89,17 @@ elles, ont été exécutées avant d'y être écrites.
 les vingt composants listés dans `docs/components-index.md` sont tous portés. Le kit couvre
 donc la majorité des écrans d'un projet réel.
 
-**Il reste 4 composants sur les 62.** Ne pas confondre les deux comptes, ce qui a déjà induit
-en erreur : le kit COMPLET, encore loin, et ce noyau, désormais atteint.
+**Les phases 2 et 3 sont closes le 23 septembre** : les 62 composants sont portés, et
+`core/ripple`, la dernière brique, a donné la prop `ripple` aux quatorze composants équipés.
+La suite du plan est la phase 4, le mode copie et le registry (décision D7) ; sortir un
+`0.1.0` avant, ou non, est une décision à prendre.
+
+Restent ouverts, hors du plan : `format:check` absent de la CI (quatre fichiers ont dérivé),
+la page `specifications/responsive.mdx` qui documente Gridaflex, absent de ce dépôt, et les
+trois constats signalés le 23 septembre (contraste des jetons `informative-*low-content` en
+sombre, garde axe aveugle au contraste 1:1, test intermittent de `ui-tooltip`).
+
+Ce qui suit est l'historique de la vague, gardé pour ses mesures.
 
 **La vague continue**, décidée le 21 septembre plutôt que de sortir le `0.1.0` tout de suite.
 
@@ -98,34 +107,33 @@ L'ordre suit le **coût**, pas la famille : les briques `core/` dont dépendent
 sont déjà là (sauf deux, voir plus bas), donc rien n'oblige à grouper par famille. Taille
 mesurée sur le starter Angular, `.ts` (hors `.spec`) + `.html` + `.scss` :
 
-| Composant              | Lignes | Famille       | Ce dont il dépend, et son état ici                                  |
-| ---------------------- | ------ | ------------- | ------------------------------------------------------------------- |
-| ✅ `ui-avatar-group`   | 53     | `informative` | `ui-avatar` ✅. Fait le 21 septembre                                |
-| ✅ `ui-input-group`    | 199    | `forms`       | `core/forms` ✅. Fait le 21 septembre                               |
-| ✅ `ui-button-split`   | 249    | `actions`     | `ui-button` ✅, `ui-menu` ✅. Fait le 21 septembre                  |
-| ✅ `ui-accordion`      | 432    | `informative` | `ui-icon` ✅, `ui-separator` ✅. Fait le 22 septembre               |
-| ✅ `ui-input-otp`      | 485    | `forms`       | `core/forms` ✅. Fait le 22 septembre                               |
-| ✅ `ui-knob`           | 489    | `forms`       | `core/forms` ✅. Fait le 22 septembre                               |
-| ✅ `ui-breadcrumb`     | 523    | `navigation`  | `ui-icon` ✅, routeur par `render`. Fait le 22 septembre            |
-| ✅ `ui-swatch-picker`  | 534    | `forms`       | `core/overlay` ✅. Fait le 22 septembre                             |
-| ✅ `ui-speed-dial`     | 703    | `actions`     | `ui-button` ✅, `ui-tooltip` ✅, `ui-menu` ✅. Fait le 22 septembre |
-| ✅ `ui-bottom-tab-bar` | 720    | `navigation`  | `ui-icon` ✅, routeur par `render`. Fait le 22 septembre            |
-| ✅ `ui-stepper`        | 773    | `navigation`  | `ui-icon` ✅. Fait le 22 septembre                                  |
-| ✅ `ui-toast`          | 780    | `informative` | `ui-icon` ✅, `core/motion` ✅. Fait le 22 septembre                |
-| ✅ `ui-bottom-sheet`   | 1041   | `layout`      | `core/overlay` ✅. Fait le 22 septembre                             |
-| `ui-image`             | 1167   | `base`        | rien, mais gros                                                     |
-| `ui-file-upload`       | 1227   | `forms`       | `ui-button` ✅, `ui-progress-bar` ✅                                |
-| `ui-sidebar`           | 1472   | `navigation`  | `ui-menu` ✅, `core/overlay` ✅                                     |
-| `ui-editor`            | 1780   | `forms`       | moteur de texte riche : **arbitrage de dépendance** avant de coder  |
+| Composant              | Lignes | Famille       | Ce dont il dépend, et son état ici                                          |
+| ---------------------- | ------ | ------------- | --------------------------------------------------------------------------- |
+| ✅ `ui-avatar-group`   | 53     | `informative` | `ui-avatar` ✅. Fait le 21 septembre                                        |
+| ✅ `ui-input-group`    | 199    | `forms`       | `core/forms` ✅. Fait le 21 septembre                                       |
+| ✅ `ui-button-split`   | 249    | `actions`     | `ui-button` ✅, `ui-menu` ✅. Fait le 21 septembre                          |
+| ✅ `ui-accordion`      | 432    | `informative` | `ui-icon` ✅, `ui-separator` ✅. Fait le 22 septembre                       |
+| ✅ `ui-input-otp`      | 485    | `forms`       | `core/forms` ✅. Fait le 22 septembre                                       |
+| ✅ `ui-knob`           | 489    | `forms`       | `core/forms` ✅. Fait le 22 septembre                                       |
+| ✅ `ui-breadcrumb`     | 523    | `navigation`  | `ui-icon` ✅, routeur par `render`. Fait le 22 septembre                    |
+| ✅ `ui-swatch-picker`  | 534    | `forms`       | `core/overlay` ✅. Fait le 22 septembre                                     |
+| ✅ `ui-speed-dial`     | 703    | `actions`     | `ui-button` ✅, `ui-tooltip` ✅, `ui-menu` ✅. Fait le 22 septembre         |
+| ✅ `ui-bottom-tab-bar` | 720    | `navigation`  | `ui-icon` ✅, routeur par `render`. Fait le 22 septembre                    |
+| ✅ `ui-stepper`        | 773    | `navigation`  | `ui-icon` ✅. Fait le 22 septembre                                          |
+| ✅ `ui-toast`          | 780    | `informative` | `ui-icon` ✅, `core/motion` ✅. Fait le 22 septembre                        |
+| ✅ `ui-bottom-sheet`   | 1041   | `layout`      | `core/overlay` ✅. Fait le 22 septembre                                     |
+| ✅ `ui-image`          | 1167   | `base`        | rien, mais gros. Fait le 22 septembre                                       |
+| ✅ `ui-file-upload`    | 1227   | `forms`       | `ui-button` ✅, `ui-spinner` ✅. Fait le 23 septembre                       |
+| ✅ `ui-sidebar`        | 1472   | `navigation`  | `ui-badge` ✅, `ui-tooltip` ✅, `core/overlay` ✅. Fait le 23 septembre     |
+| ✅ `ui-editor`         | 1780   | `forms`       | aucun moteur : `contenteditable` et commandes natives. Fait le 23 septembre |
 
 Un seul verrou reste :
 
 - ✅ **`core/motion` hors calque supérieur** est levé le 22 septembre : `useUiMotion` retient
   le nœud sortant le temps de son animation. `ui-accordion` et `ui-toast`, qui l'attendaient,
   sont portés le même jour.
-- **`ui-editor` demande un arbitrage de dépendance** au sens de D6 : aucun éditeur riche ne
-  s'écrit dans `core/`, donc c'est une décision d'architecture, pas une tâche de portage.
-  À garder pour la fin.
+- ✅ **L'arbitrage de dépendance de `ui-editor`** est rendu le 23 septembre : aucun moteur.
+  La prémisse était fausse, le kit Angular n'en a pas non plus ; voir le journal.
 
 Cette liste se **dérive**, ce qui vaut mieux que de la tenir à jour de mémoire :
 
@@ -174,10 +182,6 @@ Résumé pour ne pas avoir à ouvrir le fichier. La justification, elle, est dan
 
 Une dette écrite n'est pas une dette : c'est un choix. Ce qui suit est assumé, pas oublié.
 
-- **`core/ripple` non porté**, donc `ui-button`, `ui-tabs`, `ui-speed-dial` et
-  `ui-bottom-tab-bar` n'ont pas de prop `ripple` alors que la version Angular en a une. Quatre
-  composants attendent désormais cette brique. Son arrivée sera une évolution mineure, pas une
-  rupture.
 - **Un test de `ui-tooltip` est instable à froid.** « la bulle fermée n'occupe aucune place à
   l'écran » a échoué deux fois sur deux exécutions complètes lancées après un
   `rm -rf node_modules/.vite`, et passe à chaque fois seule ou à chaud (`:popover-open` vrai
@@ -545,6 +549,57 @@ Ne pas les repayer. Chacun est documenté sur place, dans le fichier concerné.
   HAUT et qu'on rend collé en haut de la page met ses actions hors écran : le clic attend, puis
   échoue sur « waiting for element to be visible ». Donner de la marge au montage du test plutôt
   que chercher un défaut de rendu.
+- **Un volet de navigateur masqué diffère `loading="lazy"`.** Quand le volet n'est pas affiché,
+  `document.visibilityState` vaut `hidden` et Chromium ne lance pas les images paresseuses : une
+  mesure prise en JavaScript lit `complete: false` indéfiniment, et on conclut à tort que le
+  composant ne charge rien. C'est la capture d'écran qui force le rendu, donc le chargement.
+  Vérifier une image dans le volet demande soit une capture d'abord, soit une sonde `new Image()`
+  qui, elle, n'est pas paresseuse. Le piège est retors parce qu'il désigne un faux coupable : on
+  se met à soupçonner l'adresse en échec, alors qu'une sonde isolée montre qu'elle répond en
+  quelques dizaines de millisecondes.
+- **axe ne voit pas un texte de la couleur de son fond.** Un contraste de 1:1 part dans les
+  cas `incomplete` (motif `equalRatio`), jamais dans `violations`, un texte invisible étant
+  souvent masqué exprès : le contrôle bloquant des stories passe donc au vert. Payé sur la
+  ligne en erreur de `ui-file-upload-list`, blanche sur blanc. Et un message qui n'existe
+  qu'après une interaction n'est pas audité du tout. Vérifier un état d'erreur, c'est mesurer
+  son contraste, en clair **et** en sombre.
+- **`*high-content` est le contenu posé SUR la surface `*high`, pas une couleur de texte.**
+  `--informative-errorhigh-content-default` vaut blanc, fait pour un fond rouge. Pour un texte
+  d'erreur sur fond neutre, c'est le jeton de la famille qui sert : `--form-error-content-default`
+  pour un champ, qui suit le mode. `informative-*low-content`, lui, ne varie pas avec le mode.
+- **Une divergence se compte dans l'homologue, pas de mémoire.** `DUAL-ENGINE.md` déclarait six
+  composants privés de `ripple` ; `grep data-ripple` dans le kit Angular en trouve treize, plus
+  `ui-context-menu` qui transmet la prop. Sept avaient perdu leur marqueur sans le dire, et la
+  ligne attribuait à tort la prop à `ui-speed-dial`, qui la tient de `ui-button`.
+- **Le projet TypeScript de Storybook compile en JSX classique, et embarque ce qu'il importe.**
+  Un fichier du kit importé par `preview.tsx` y est vérifié avec `"jsx": "react"` et refuse
+  son JSX. Depuis la prévisualisation, n'importer que des modules sans JSX : le moteur de
+  `core/ripple`, pas `UiRippleProvider`.
+- **Formater un dossier entier touche des fichiers qu'on n'a pas écrits.** `prettier --write`
+  sur `src/` a reformaté `ui-modal.test.tsx`, l'un des fichiers qui dérivaient déjà. Ne passer
+  le formateur que sur les fichiers modifiés.
+- **Une prémisse de la feuille de route se vérifie dans le code Angular.** `ui-editor` a été
+  gardé pour la fin comme « arbitrage de dépendance », au motif qu'aucun éditeur riche ne
+  s'écrit dans `core/`. Le kit Angular n'a jamais eu de moteur. Lire l'homologue avant de
+  cadrer une décision, pas après.
+- **Remplacer l'élément qui porte la sélection l'effondre.** Dans un `contenteditable`, une
+  conversion qui remplace un nœud (le `<font>` d'une commande, par exemple) laisse la sélection
+  repliée à l'endroit du retrait : le texte tout juste mis en forme n'est plus sélectionné. La
+  reposer explicitement sur le résultat.
+- **Le `onBeforeInput` de React n'a pas d'`inputType`.** C'est une émulation à partir de
+  `keypress` et de `textInput`. Pour savoir si une saisie insère ou supprime, écouter le
+  `beforeinput` natif.
+- **`<label for>` ne nomme pas une zone éditable.** Seuls les éléments étiquetables le sont : une
+  `<div contenteditable>` reste sans nom accessible malgré le libellé visible. Le libellé doit
+  devenir son `aria-label`.
+- **Une barre latérale statique rendue seule mesure zéro de haut.** Son rail s'étire dans une
+  rangée flex, et son panneau est positionné en absolu pour pouvoir flotter : hors d'une rangée
+  qui a une hauteur, rien ne lui en donne. Les clics de Playwright attendent alors « visible,
+  enabled and stable » sans fin. Donner au test la mise en page d'une application.
+- **Vider un `<input type="file">` vide aussi ce qu'il soumet.** La remise à zéro qui permet de
+  choisir à nouveau le même fichier retire la sélection du formulaire natif, qui reçoit un
+  fichier vide. Un champ ne peut pas servir aux deux : `ui-file-upload` en rend un second,
+  caché, pour la soumission.
 
 ---
 
@@ -1529,6 +1584,16 @@ Trois choses trouvées en regardant le rendu, dans cet ordre :
   Le piège est écrit dans ce fichier depuis une session précédente, et je l'ai repayé quand
   même : un résultat négatif obtenu juste après une édition se revérifie après
   `rm -rf node_modules/.vite`.
+- **Un crochet qui JETTE sans fournisseur rend un composant inutilisable ailleurs.**
+  `useUiTheme()` lève une erreur hors de `UiThemeProvider`, ce qui est juste pour un
+  composant de thème et faux pour une image : les treize stories de `ui-image` ont échoué
+  d'un coup, la `preview` de Storybook posant `data-theme` à la main sans passer par le
+  fournisseur. Lire l'ATTRIBUT sur `<html>`, qui est de toute façon ce que lisent les jetons,
+  marche dans les trois cas : fournisseur, script d'amorçage, barre d'outils.
+- **Une charge au niveau du module rend les tests dépendants de leur ordre.** Le cache de
+  SVG de `ui-image` fait son travail, et c'est justement pour ça qu'un test « le fichier est
+  introuvable » passait en vert : le test précédent avait mis le même nom en cache. Donner
+  un nom différent par cas, ou vider le cache, mais ne pas croire un vert obtenu ainsi.
 
 Trois écarts d'API déclarés dans `docs/DUAL-ENGINE.md`, plus deux de structure : la classe
 `.ui-tab-button` disparaît (React n'a pas d'élément hôte, donc `.ui-tab` EST le bouton), et un
@@ -1823,3 +1888,172 @@ composant d'aide qui rend `<Machin {...props}>texte</Machin>` écrase le `childr
 passe : le champ à focaliser n'existait tout simplement pas, et je cherchais un défaut de
 focus. Et tout ce qui vit hors d'un dialogue modal est inerte, y compris le bouton qu'un test
 pose à côté pour le piloter.
+
+### 2026-09-23 : `ui-image`, et l'exception de sécurité qui n'a pas eu lieu
+
+Le plus gros morceau restant hors `ui-editor`, et celui qui portait la seule **exception de
+sécurité** du kit Angular. `docs/SECURITY-PRACTICES.md` l'avait anticipée sans la concéder :
+« quand il arrivera, il devra soit refaire la démonstration au cas par cas, soit passer par
+une autre voie : un `<img src>`, ou un composant React qui construit les nœuds SVG en JSX
+plutôt que de coller une chaîne. Reprendre l'exception parce qu'elle existe côté Angular
+n'est pas un argument recevable. »
+
+C'est la seconde voie qui a été prise. `inlineSvgToReact()` analyse le balisage dans un
+document détaché, donc inerte, le nettoie (scripts, `foreignObject`, SMIL, gestionnaires
+d'événements, références non navigationnelles), puis construit des **éléments React**. Le
+vecteur hérite bien du CSS et de `currentColor`, ce qui est tout l'intérêt de l'inlining, et
+il n'y a **rien à contourner** : le registre reste vide. Neuf tests portent le nettoyage, y
+compris la vérification qu'un `<script>` inséré ne laisse ni exécution ni texte derrière lui.
+
+Deux autres choses disparaissent avec le portage. `NgOptimizedImage` et la branche de
+contournement que ses refus imposaient pour les charges `data:` et `blob:` : un `<img>` avec
+`loading` et `fetchpriority` couvre ce que `priority` promettait. Et le `::ng-deep` qui
+ciblait le SVG inliné, que l'absence d'encapsulation rend inutile.
+
+**Deux pièges payés, et le premier est instructif.** `useUiTheme()` lève une erreur hors de
+son fournisseur, ce qui est juste pour un composant de thème et faux pour une image : les
+treize stories ont échoué d'un coup, la `preview` de Storybook posant `data-theme` à la main.
+La bonne source est l'ATTRIBUT sur `<html>`, qui est de toute façon ce que lisent les jetons,
+et qu'un `MutationObserver` suffit à suivre. Le second : le cache de SVG au niveau du module
+faisait passer en vert un test « fichier introuvable », le test précédent ayant mis le même
+nom en cache.
+
+Il reste trois composants : `ui-file-upload` (1227), `ui-sidebar` (1472), et `ui-editor`
+(1780), ce dernier étant l'arbitrage de dépendance gardé pour la fin.
+
+### 2026-09-23 : `ui-file-upload`, et deux défauts hérités qu'aucun contrôle ne voyait
+
+Porté avec sa ligne de fichier, `ui-file-upload-list`, dans un seul point d'entrée. Le
+comportement suit Angular : un `<input type="file">` natif masqué porte la sélection, toute la
+surface accepte le dépôt, la validation porte sur le type, la taille et le nombre, et l'envoi
+passe par `XMLHttpRequest` ou par la fonction de l'application. Les trois gabarits deviennent
+des props de rendu ; les méthodes publiques, des actions qu'elles reçoivent.
+
+**La sélection vit à deux endroits, écrits ensemble.** L'état pour le rendu, une référence
+pour les lectures synchrones : une notification doit recevoir la sélection À JOUR, et `auto`
+enchaîne l'envoi dans le même geste. Un modificateur de `setState` ne peut ni l'un ni
+l'autre, et il s'exécute deux fois en mode strict, ce qui créerait deux fois chaque URL
+d'objet. Vérifié en retirant la lecture synchrone : trois tests tombent. Les rappels d'une
+requête, qui tirent longtemps après le rendu qui l'a lancée, lisent les props par une seconde
+référence ; sans elle, le test du rappel changé en vol tombe, et lui seul. Transmettre ces
+actions aux props de rendu déclenche `react-hooks/refs`, faute pour la règle de savoir que
+l'appelant ne les invoquera pas au rendu : même faux positif que `ui-swatch-picker`, même
+traitement, une exception justifiée par appel.
+
+**Premier défaut : `name` ne soumettait rien.** Le sélecteur est vidé après chaque choix, et
+c'est sur lui qu'Angular pose le nom. Mesuré dans un `FormData` : un fichier de nom vide,
+zéro octet. Un second champ, caché et rendu seulement avec `name`, porte ici la sélection
+courante ; le test du formulaire tombe sans lui.
+
+**Second défaut : les erreurs étaient invisibles.** Le message de refus et le texte d'une
+ligne en erreur prenaient `--informative-errorhigh-content-default`, blanc, sur un fond
+neutre. Le contrôle axe des stories est passé au vert quand même, et c'est la leçon rangée
+dans les pièges : un contraste de 1:1 est « à revoir » pour axe, pas une violation. Le jeton
+d'erreur de la famille formulaire le remplace, mesuré à 4.51:1 au pire en clair et 12.26:1 en
+sombre. Le jeton que prend `ui-helper`, essayé d'abord, ne tenait pas en sombre : 2.74:1.
+
+Au passage, un constat qui dépasse ce composant : en sombre, `ui-helper` passe sous le seuil
+AA pour quatre de ses cinq niveaux, les jetons `informative-*low-content` ne variant pas avec
+le mode. Signalé à part, non corrigé ici.
+
+39 tests unitaires, 12 stories auditées. Il reste deux composants : `ui-sidebar` (1472) et
+`ui-editor` (1780), ce dernier étant l'arbitrage de dépendance gardé pour la fin.
+
+### 2026-09-23 : `ui-sidebar`, et le déclencheur qui vit ailleurs
+
+Porté avec son menu, `ui-sidebar-menu`, et le pendant de sa directive de déclenchement. La
+présentation statique reprend le DOM d'Angular, rail dans le flux et panneau qui peut
+flotter ; la présentation superposée suit `ui-drawer` : le `<dialog>` natif EST le panneau,
+et le voile, le positionneur, le piège de focus et le z-index d'Angular disparaissent.
+
+**Le déclencheur est la vraie question de ce portage.** Angular le relie par une référence de
+gabarit (`[uiSidebarTrigger]="sb"`), que React n'a pas, et il vit souvent HORS de la barre.
+`UiSidebarProvider` rend l'état de la barre lisible autour d'elle ; la barre y publie par un
+magasin et `useSyncExternalStore`, pas par un état du fournisseur, qu'un enfant ferait rendre
+deux fois. `useUiSidebarTrigger()` en tire `aria-controls`, `aria-expanded` et la bascule.
+Défaut attrapé avant le test : le menu lisait d'abord cet état publié, si bien qu'un menu
+autonome posé à côté d'une barre se serait replié avec elle. Il ne lit plus que la barre qui
+le contient ; le test du menu voisin tombe sans ça.
+
+**Six choix vérifiés en les retirant**, chacun couvert par son test : la portée du menu,
+l'identifiant préfixé par l'instance, le test de boîte du clic sur le voile (un clic sur le
+bord du panneau vise aussi le `<dialog>`), `Échap` par `keydown` (un dialogue non modal ne
+reçoit pas `cancel`), la remise à faux de `visible` quand la barre repasse en statique, et
+`onHide` suivi sur l'état plutôt que sur le dialogue, qui disparaît sans se fermer.
+
+**Deux défauts Angular, déclarés.** `aria-modal` posé sur un `<aside>`, dont le rôle ne le
+prend pas en charge ; et des identifiants de section qui ne dépendent que de la position,
+donc en double dès que deux menus partagent une page, ce que fait justement la double barre.
+
+**Une exception de lint, et un oubli réparé.** `jsx-a11y/no-redundant-roles` refusait
+`role="list"`, qu'Angular pose parce que Safari retire la sémantique d'une liste en
+`list-style: none`. Une ligne de configuration l'autorise sur `<ul>`, et seulement là. Le rôle
+est rétabli au passage sur `ui-file-upload`, où je l'avais retiré sans le déclarer.
+
+Payé deux fois ce qui était déjà écrit : un `pointerenter` fabriqué ne déclenche pas le
+`onPointerEnter` de React, et le piège figurait dans la liste. Et un nouveau : rendue seule,
+une barre statique mesure zéro de haut.
+
+33 tests unitaires, 5 stories auditées. Il reste un composant : `ui-editor` (1780), qui
+demande d'abord un arbitrage de dépendance au sens de D6.
+
+### 2026-09-23 : `ui-editor`, et l'arbitrage qui n'en était pas un
+
+Le dernier composant, gardé pour la fin comme un arbitrage de dépendance au sens de D6. La
+mesure l'a dissous : **le kit Angular n'a pas de moteur**. Son éditeur est un
+`contenteditable` et 659 lignes de commandes natives confinées dans un module, 10,5 kB
+compressés. Contre lui, Tiptap pèse 105 kB pour son seul kit de base, Lexical 62 kB pour son
+cœur. Proposé, choisi : aucun moteur. D6 porte désormais la décision, avec ses chiffres.
+
+**Le nettoyage est un portage, pas une réinvention.** `sanitizeHtml` reprend le `DomSanitizer`
+d'Angular, lu dans ses sources : mêmes listes, même filtrage des URL, même boucle anti-mXSS.
+Une valeur stockée se rend donc à l'identique dans les deux stacks. Rien n'écrit de HTML :
+analyse par `DOMParser` dans un document inerte, insertion par nœuds. Les trois exceptions de
+sécurité d'Angular disparaissent ; seul reste le collage par `insertHTML`, pour que Ctrl+Z
+l'annule, désormais refusé par le lint sauf exception inscrite. Au passage, le registre de
+sécurité affirmait qu'Angular portait « exactement une » exception : il en porte cinq.
+
+**Trois défauts hérités, mesurés puis corrigés.** Chromium aligne en `style`, que le
+sanitizer d'Angular retire : l'alignement ne survivait pas au rechargement d'une valeur. Le
+style est ici réduit à l'alignement et au retrait ; avec la liste stricte, le test
+d'aller-retour tombe. Les deux autres se sont vus seulement à la souris, dans Storybook :
+recolorer un paragraphe qui contient un mot rouge laissait ce mot rouge, et chaque police,
+taille ou couleur désélectionnait le texte. Un test par défaut, chacun tombe sans sa
+correction.
+
+**Cinq choix vérifiés en les retirant** : l'écho de la saisie qui ne réécrit pas le DOM, le
+libellé qui nomme la zone, le style réduit, le `beforeinput` natif de `maxLength`, et le
+`tabIndex` que `ui-select` transmet désormais à son déclencheur, sans quoi la barre d'outils
+n'a pas d'arrêt de tabulation unique.
+
+33 tests unitaires, 19 stories auditées. **Les 62 composants sont portés.** Reste
+`core/ripple`, qui ajoutera la prop `ripple` à six composants.
+
+### 2026-09-23 : `core/ripple`, et les phases 2 et 3 closes
+
+La dernière brique. Le moteur Angular était déjà du DOM pur : un écouteur `pointerdown`
+passif par liaison, une couche de découpe par hôte, une `<span>` par onde. Il se porte presque
+tel quel, sans React ; `UiRippleProvider`, `useUiRipple()` et `useUiRippleScope()` remplacent
+le fournisseur d'environnement et les deux directives. Les crochets posent leur liaison une
+fois et relisent leurs réglages à chaque pression. Le symbole qui marque une pression déjà
+servie est global, donc deux copies du kit dans une page ne font toujours qu'une onde.
+
+**L'inventaire était faux.** `DUAL-ENGINE.md` déclarait six composants sans `ripple`. Le
+kit Angular en marque quatorze. Sept autres l'avaient perdu **sans le dire** : `ui-select`,
+`ui-autocomplete`, `ui-datepicker`, `ui-menu`, `ui-paginator`, `ui-toggle-button`,
+`ui-segment-control` et `ui-toggle-block`. Tous reçoivent maintenant la prop, sur les cibles
+exactes d'Angular : pas les incréments d'heure du calendrier, pas les navigateurs de
+`ui-tabs`, pas un bloc désactivé ; l'action de la barre basse garde sa propre prop.
+
+**Un seul test de contrat** couvre les quatorze, à l'image du tableau Angular : cible par
+cible, `"on"` par défaut, `"off"` avec `ripple={false}`, plus une onde de bout en bout sous le
+fournisseur. Vérifié en retirant un marqueur, puis la condition de `ui-toggle-block` : le cas
+concerné tombe à chaque fois. L'interrupteur de Storybook existait déjà ; il manquait le moteur,
+installé depuis `ripple-toolbar.ts` par le seul moteur, le projet TypeScript du manager
+refusant le JSX du fournisseur.
+
+Au passage, la page Angular annonce une opacité de `0.12`, sa SCSS en porte `0.34` : la page
+React donne la valeur réelle.
+
+32 tests unitaires (15 pour le moteur, 17 pour le contrat des quatorze) et deux stories auditées. **Les phases 2 et 3 sont
+closes.** La suite du plan est la phase 4, le mode copie.
diff --git a/docs/SECURITY-PRACTICES.md b/docs/SECURITY-PRACTICES.md
index 3110480..93216a9 100644
--- a/docs/SECURITY-PRACTICES.md
+++ b/docs/SECURITY-PRACTICES.md
@@ -17,12 +17,13 @@ assainissement.
 
 ### Ce qui est interdit
 
-| API                             | Pourquoi                                                           |
-| ------------------------------- | ------------------------------------------------------------------ |
-| `dangerouslySetInnerHTML`       | Injecte le HTML fourni sans le vérifier. Le nom dit ce qu'il fait. |
-| `el.innerHTML` / `el.outerHTML` | Écriture DOM directe : rien ne l'assainit, jamais.                 |
-| `el.insertAdjacentHTML()`       | Idem.                                                              |
-| `eval()` / `new Function()`     | Évaluation de code à la volée.                                     |
+| API                                  | Pourquoi                                                           |
+| ------------------------------------ | ------------------------------------------------------------------ |
+| `dangerouslySetInnerHTML`            | Injecte le HTML fourni sans le vérifier. Le nom dit ce qu'il fait. |
+| `el.innerHTML` / `el.outerHTML`      | Écriture DOM directe : rien ne l'assainit, jamais.                 |
+| `el.insertAdjacentHTML()`            | Idem.                                                              |
+| `document.execCommand('insertHTML')` | Insère la chaîne telle quelle, comme `innerHTML`.                  |
+| `eval()` / `new Function()`          | Évaluation de code à la volée.                                     |
 
 ⚠️ Un piège propre à React : une valeur interpolée dans un attribut `href` ou `src` n'est
 **pas** protégée contre le schéma `javascript:`. Un lien dont l'URL vient de l'extérieur
@@ -53,18 +54,36 @@ Une exception sans les trois n'est pas une exception, c'est un oubli.
 
 ## 2. Registre des exceptions
 
-**Le kit n'en porte aucune à ce jour.**
-
-Côté Angular, le kit en porte exactement une (`ui-image`, pour du SVG inline). Le
-composant équivalent n'existe pas encore ici : quand il arrivera, il devra soit refaire la
-démonstration au cas par cas, soit passer par une autre voie : un `<img src>` sur un
-fichier SVG, ou un composant React qui construit les nœuds SVG en JSX plutôt que de coller
-une chaîne. Reprendre l'exception « parce qu'elle existe côté Angular » n'est pas un
-argument recevable.
-
-| Fichier    | Exception | Raison | Ce qui assainit la valeur |
-| ---------- | --------- | ------ | ------------------------- |
-| _(aucune)_ |           |        |                           |
+**Le kit en porte une seule**, dans `ui-editor`.
+
+Côté Angular, le kit en porte cinq, dans deux composants : deux dans `ui-image`, pour du SVG
+inline, et trois dans `ui-editor`, qui analyse du HTML dans un `<template>` détaché et écrit
+sa valeur dans la zone éditable (mesuré le 23 septembre, par `EXCEPTION JUSTIFIÉE` dans ses
+sources). Ce dépôt a fait tomber les cinq, et n'en garde qu'une, d'une autre nature.
+
+- **`ui-image`** inline ses SVG locaux par la voie que ce document désignait d'avance :
+  `inlineSvgToReact()` analyse le balisage dans un document détaché, le nettoie, puis
+  construit des **éléments React**. Rien n'est écrit en HTML. Le nettoyage reste
+  indispensable, et il est testé à part (`ui-image-svg.test.tsx`) : le modèle de menace n'est
+  pas « les images du kit », c'est un projet qui sert `assets/img/` depuis un CDN, ou qui
+  laisse un client déposer son logo dans un dossier de marque.
+- **`ui-editor`** analyse avec `DOMParser`, dans un document inerte, et écrit sa valeur dans la
+  zone par des **nœuds** (`replaceChildren`), jamais par `innerHTML`. Les trois exceptions
+  d'Angular disparaissent. La valeur passe par `sanitizeHtml`, le portage testé du
+  `DomSanitizer` d'Angular (`ui-editor-sanitize.test.ts`).
+
+Reste le **collage** : il insère par `execCommand('insertHTML')`, seule façon d'insérer du
+balisage que l'annulation native enregistre, pour que Ctrl+Z annule un collage. Une insertion
+par `Range` n'aurait demandé aucune exception, au prix de cette annulation. L'appel est
+désormais refusé par le lint comme les autres, ce qui rend l'exception vérifiée et pas
+seulement déclarée.
+
+| Fichier                                                                          | Exception                      | Raison                                      | Ce qui assainit la valeur                                                                                                                       |
+| -------------------------------------------------------------------------------- | ------------------------------ | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `packages/ui-kit-react/src/forms/ui-editor/ui-editor-commands.ts` (`insertHtml`) | `execCommand('insertHTML', …)` | Le collage doit rester annulable par Ctrl+Z | `sanitizeHtml(normalizeHtml(…))` : balises de l'éditeur seules, puis le portage du `DomSanitizer`. Seul appelant : `onPaste` de `ui-editor.tsx` |
+
+---------- | --------- | ------ | ------------------------- |
+| _(aucune)_ | | | |
 
 ---
 
diff --git a/docs/components-index.md b/docs/components-index.md
index 0ef2330..67e2c0a 100644
--- a/docs/components-index.md
+++ b/docs/components-index.md
@@ -13,7 +13,9 @@
 
 - ✅ `ui-icon` : Icône par son nom (`sm`→`xl`, solid/outline), décorative par défaut,
   famille de police configurable par provider. **Patron de référence du kit.**
-- ⬜ `ui-image` : Image responsive multi-format, clair/sombre par marque
+- ✅ `ui-image` : Image consciente du thème et de la marque, avec repli, vignette et vue
+  agrandie. Un SVG local est converti en **éléments React** plutôt que collé en HTML, donc
+  sans exception de sécurité ; `secured` passe par le fetch de l'application : Image responsive multi-format, clair/sombre par marque
 
 ## actions
 
@@ -84,7 +86,15 @@
 - ✅ `ui-swatch-picker` : Grille de couleurs, en ligne ou en popup du calque supérieur.
   Chaque pastille pointe une variable `--primitives-*`, donc la marque change la grille.
   Motif listbox, clavier de grille à deux axes, `trigger` pour le déclencheur
-- ⬜ `ui-file-upload` · `ui-editor`
+- ✅ `ui-file-upload` : Téléversement en champ compact ou en zone de dépôt, sur un
+  `<input type="file">` natif. Validation par type, taille et nombre ; envoi intégré par
+  `XMLHttpRequest` ou délégué à l'application ; la sélection suit un formulaire natif
+- ✅ `ui-file-upload-list` : La ligne de fichier, livrée dans le point d'entrée de
+  `ui-file-upload`. Vignette ou icône, `ui-spinner` et barre de progression pendant l'envoi
+- ✅ `ui-editor` : Texte riche sur un `contenteditable`, sans moteur tiers : les commandes
+  natives sont confinées dans un module. Police, taille et couleurs s'écrivent en classes
+  adossées aux jetons ; la valeur est du HTML, nettoyé par le portage du `DomSanitizer`
+  d'Angular
 
 ## informative
 
@@ -146,7 +156,10 @@
 - ✅ `ui-bottom-tab-bar` : Barre de navigation basse des appareils tactiles, avec son bouton
   d'action surélevé. Réserve l'incrustation système, cible tactile de 44 px, et
   `aria-current="page"` plutôt que `role="tab"`, qui exigerait un panneau
-- ⬜ `ui-sidebar`
+- ✅ `ui-sidebar` : Barre latérale applicative. Statique, elle pousse le contenu et se replie en
+  rail d'icônes, qui peut flotter ouvert au survol ; superposée, c'est un `<dialog>` natif.
+  Livre `ui-sidebar-menu` (sections, groupes repliables, entrée courante) et le crochet
+  `useUiSidebarTrigger()` pour un déclencheur placé hors de la barre
 
 ## table
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e32c367..f8cb1ad 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -43,6 +43,13 @@ const UNSAFE_HTML = [
     selector: "CallExpression[callee.property.name='insertAdjacentHTML']",
     message: "insertAdjacentHTML n'assainit rien. Passez par du JSX.",
   },
+  {
+    selector:
+      "CallExpression[callee.property.name='execCommand'][arguments.0.value=/^inserthtml$/i]",
+    message:
+      "execCommand('insertHTML') insère la chaîne telle quelle, comme innerHTML. " +
+      'Voir docs/SECURITY-PRACTICES.md avant de lever une exception.',
+  },
   {
     selector: "NewExpression[callee.name='Function'], CallExpression[callee.name='eval']",
     message: 'Évaluation de code à la volée : interdite.',
@@ -83,6 +90,12 @@ export default tseslint.config(
 
       'no-restricted-syntax': ['error', ...UNSAFE_HTML],
 
+      // `role="list"` sur un `<ul>` n'est redondant que sur le papier : Safari
+      // (WebKit) retire la sémantique de liste d'une liste en `list-style: none`,
+      // ce que font toutes les listes du kit. Le rôle explicite la rend. Le reste
+      // de la règle, `nav` compris (son réglage par défaut), s'applique.
+      'jsx-a11y/no-redundant-roles': ['error', { nav: ['navigation'], ul: ['list'] }],
+
       // Le kit n'expose que des composants fonctionnels typés : un `any` y
       // fuiterait dans la surface publique.
       '@typescript-eslint/no-explicit-any': 'error',
diff --git a/figma/README.md b/figma/README.md
index d3e1afc..2654b25 100644
--- a/figma/README.md
+++ b/figma/README.md
@@ -10,7 +10,7 @@ The components' `--ui-*` variables, in the same DTCG shape as
 one too. Generated by `pnpm docs:config`; `docs:config:check` fails if it is stale.
 
 **These are not design tokens.** A token belongs to the system (`--units-sm`); a
-component variable belongs to one component, and 1074 of the 1217 entries merely _alias_ a
+component variable belongs to one component, and 1264 of the 1427 entries merely _alias_ a
 token. Hence a **dedicated collection** (`$extensions.com.4sh.ui-kit.figmaCollection`)
 rather than adding them to `semantics` or `metrics`.
 
@@ -38,7 +38,7 @@ rather than adding them to `semantics` or `metrics`.
   variables are `remote`, hence read-only (see `CLAUDE.md`).
 - Keep the aliases as aliases: that is what preserves brand, light/dark and responsive.
 - Literal values are in `px` (converted from `rem`, base 16), like the token files.
-- `$extensions.com.4sh.ui-kit.skipped` lists 50 entries with nothing to create: `calc()`
+- `$extensions.com.4sh.ui-kit.skipped` lists 60 entries with nothing to create: `calc()`
   expressions, multi-value CSS shorthands, relative units (`em`, `ch`, `%`), duration /
   easing / cursor / z-index, and internal plumbing.
 
diff --git a/figma/component-vars.json b/figma/component-vars.json
index 30db661..38c789c 100644
--- a/figma/component-vars.json
+++ b/figma/component-vars.json
@@ -10,11 +10,11 @@
         "Mode 1"
       ],
       "counts": {
-        "tokens": 1217,
-        "alias": 1074,
-        "literal": 143,
-        "skipped": 50,
-        "derivedDescriptions": 197
+        "tokens": 1427,
+        "alias": 1264,
+        "literal": 163,
+        "skipped": 60,
+        "derivedDescriptions": 223
       },
       "aliasTargets": [
         "metrics",
@@ -94,6 +94,26 @@
           "component": "ui-datepicker",
           "reason": "`--shadow-default-md` n'est pas un token du pipeline : rien à aliaser."
         },
+        {
+          "cssVar": "--ui-editor-link-text-decoration",
+          "component": "ui-editor",
+          "reason": "sans équivalent variable Figma (durée, easing, curseur, plan d’empilement, ratio)."
+        },
+        {
+          "cssVar": "--ui-editor-min-height",
+          "component": "ui-editor",
+          "reason": "expression calc() : une variable Figma ne porte pas de calcul."
+        },
+        {
+          "cssVar": "--ui-editor-select-width",
+          "component": "ui-editor",
+          "reason": "unité relative `ch` : sa valeur dépend du contexte de rendu, une variable Figma ne peut pas la porter."
+        },
+        {
+          "cssVar": "--ui-editor-swatch-indicator-color",
+          "component": "ui-editor",
+          "reason": "pilotée par une entrée Angular du composant : le thème ne vaudrait que pour les exemplaires qui ne s’en servent pas."
+        },
         {
           "cssVar": "--ui-empty-state-max-width",
           "component": "ui-empty-state",
@@ -144,6 +164,26 @@
           "component": "ui-icon",
           "reason": "`--_scale` n'est pas un token du pipeline : rien à aliaser."
         },
+        {
+          "cssVar": "--ui-image-object-fit",
+          "component": "ui-image",
+          "reason": "sans équivalent variable Figma (durée, easing, curseur, plan d’empilement, ratio)."
+        },
+        {
+          "cssVar": "--ui-image-preview-media-max-height",
+          "component": "ui-image",
+          "reason": "unité relative `%` : sa valeur dépend du contexte de rendu, une variable Figma ne peut pas la porter."
+        },
+        {
+          "cssVar": "--ui-image-preview-media-max-width",
+          "component": "ui-image",
+          "reason": "unité relative `%` : sa valeur dépend du contexte de rendu, une variable Figma ne peut pas la porter."
+        },
+        {
+          "cssVar": "--ui-image-preview-media-shadow",
+          "component": "ui-image",
+          "reason": "`--shadow-default-lg` n'est pas un token du pipeline : rien à aliaser."
+        },
         {
           "cssVar": "--ui-input-group-item-radius",
           "component": "ui-input-group",
@@ -204,6 +244,16 @@
           "component": "ui-select",
           "reason": "expression calc() : une variable Figma ne porte pas de calcul."
         },
+        {
+          "cssVar": "--ui-sidebar-menu-item-size",
+          "component": "ui-sidebar",
+          "reason": "hook sans défaut : point de surcharge pur, le composant ne pose rien."
+        },
+        {
+          "cssVar": "--ui-sidebar-z-index",
+          "component": "ui-sidebar",
+          "reason": "sans équivalent variable Figma (durée, easing, curseur, plan d’empilement, ratio)."
+        },
         {
           "cssVar": "--ui-speed-dial-item-delay",
           "component": "ui-speed-dial",
@@ -10224,12 +10274,12 @@
       }
     }
   },
-  "empty-state": {
-    "actions": {
+  "editor": {
+    "block": {
       "gap": {
         "$value": "{metrics.units.sm}",
         "$type": "dimension",
-        "$description": "Espacement entre les actions.",
+        "$description": "Espace entre deux paragraphes ou blocs.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -10237,69 +10287,48 @@
               "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-actions-gap)"
+              "WEB": "var(--ui-editor-block-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-actions-gap",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "cssVar": "--ui-editor-block-gap",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "desc": {
-      "font-size": {
-        "$value": "{responsive.size.typography.text.default}",
-        "$type": "dimension",
-        "$description": "Taille de police de `ui-empty-state`, desc.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "FONT_SIZE"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-empty-state-desc-font-size)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-desc-font-size",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-            "descriptionSource": "derived"
-          }
-        }
-      },
-      "font-size-small": {
-        "$value": "{responsive.size.typography.text.md}",
-        "$type": "dimension",
-        "$description": "Taille de police de `ui-empty-state`, desc (variante `small`).",
+    "bold": {
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse appliquée par l'outil « gras ».",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "STRING",
             "scopes": [
-              "FONT_SIZE"
+              "FONT_WEIGHT",
+              "FONT_STYLE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-desc-font-size-small)"
+              "WEB": "var(--ui-editor-bold-weight)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-desc-font-size-small",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-editor-bold-weight",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
         }
       }
     },
-    "description": {
+    "code": {
       "color": {
-        "$value": "{semantics.global.text.muted}",
+        "$value": "{semantics.global.text.default}",
         "$type": "color",
-        "$description": "Couleur de la description.",
+        "$description": "Couleur du texte d'un bloc de code.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -10307,435 +10336,358 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-description-color)"
+              "WEB": "var(--ui-editor-code-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-description-color",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "cssVar": "--ui-editor-code-color",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
       },
-      "weight": {
-        "$value": "{typography.weight.regular}",
+      "font-family": {
+        "$value": "{typography.fontFamily.monospace}",
         "$type": "string",
-        "$description": "Graisse de la description.",
+        "$description": "Famille typographique des blocs de code.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "STRING",
             "scopes": [
-              "FONT_WEIGHT",
-              "FONT_STYLE"
+              "FONT_FAMILY"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-description-weight)"
+              "WEB": "var(--ui-editor-code-font-family)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-description-weight",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "cssVar": "--ui-editor-code-font-family",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du composant.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_FAMILY"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-empty-state-font-family)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-empty-state-font-family",
-          "component": "ui-empty-state",
-          "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "gap": {
-      "$value": "{metrics.units.lg}",
-      "$type": "dimension",
-      "$description": "Espacement de `ui-empty-state`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-empty-state-gap)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-empty-state-gap",
-          "component": "ui-empty-state",
-          "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "gap-small": {
-      "$value": "{metrics.units.default}",
-      "$type": "dimension",
-      "$description": "Espacement de `ui-empty-state` (variante `small`).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-empty-state-gap-small)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-empty-state-gap-small",
-          "component": "ui-empty-state",
-          "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "media": {
-      "color": {
-        "$value": "{semantics.global.text.muted}",
-        "$type": "color",
-        "$description": "Couleur de la zone visuelle (l’icône utilise `currentColor`).",
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille de police d'un bloc de code.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-media-color)"
+              "WEB": "var(--ui-editor-code-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-media-color",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "cssVar": "--ui-editor-code-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
       },
-      "size": {
-        "$value": "{metrics.units.4xl}",
+      "padding-x": {
+        "$value": "{metrics.units.md}",
         "$type": "dimension",
-        "$description": "Taille de `ui-empty-state`, media.",
+        "$description": "Inset horizontal d'un bloc de code.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-media-size)"
+              "WEB": "var(--ui-editor-code-padding-x)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-media-size",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-editor-code-padding-x",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
         }
       },
-      "size-small": {
-        "$value": "{metrics.units.2xl}",
+      "padding-y": {
+        "$value": "{metrics.units.sm}",
         "$type": "dimension",
-        "$description": "Taille de `ui-empty-state`, media (variante `small`).",
+        "$description": "Inset vertical d'un bloc de code.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-media-size-small)"
+              "WEB": "var(--ui-editor-code-padding-y)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-media-size-small",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-editor-code-padding-y",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "text": {
-      "gap": {
-        "$value": "{metrics.units.xs}",
+      },
+      "radius": {
+        "$value": "{metrics.radius.xs}",
         "$type": "dimension",
-        "$description": "Espacement titre ↔ description.",
+        "$description": "Rayon des coins d'un bloc de code.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-text-gap)"
+              "WEB": "var(--ui-editor-code-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-text-gap",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "cssVar": "--ui-editor-code-radius",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "title": {
-      "color": {
-        "$value": "{semantics.global.text.default}",
+      },
+      "surface": {
+        "$value": "{semantics.global.background.muted}",
         "$type": "color",
-        "$description": "Couleur du titre.",
+        "$description": "Fond d'un bloc de code.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "TEXT_FILL"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-title-color)"
+              "WEB": "var(--ui-editor-code-surface)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-title-color",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "cssVar": "--ui-editor-code-surface",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      },
-      "font-family": {
-        "$value": "{typography.fontFamily.title}",
-        "$type": "string",
-        "$description": "Famille typographique du titre.",
+      }
+    },
+    "count": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur du compteur de caractères.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "STRING",
+            "resolvedType": "COLOR",
             "scopes": [
-              "FONT_FAMILY"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-title-font-family)"
+              "WEB": "var(--ui-editor-count-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-title-font-family",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "cssVar": "--ui-editor-count-color",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
       },
-      "font-size": {
-        "$value": "{responsive.size.typography.title.default}",
-        "$type": "dimension",
-        "$description": "Taille de police de `ui-empty-state`, title.",
+      "color-disabled": {
+        "$value": "{semantics.form.high.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur du compteur, champ désactivé.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "FONT_SIZE"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-title-font-size)"
+              "WEB": "var(--ui-editor-count-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-title-font-size",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-editor-count-color-disabled",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
         }
       },
-      "font-size-small": {
-        "$value": "{responsive.size.typography.title.md}",
-        "$type": "dimension",
-        "$description": "Taille de police de `ui-empty-state`, title (variante `small`).",
+      "color-over": {
+        "$value": "{semantics.form.error.content.default}",
+        "$type": "color",
+        "$description": "Couleur du compteur une fois la limite dépassée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "FONT_SIZE"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-title-font-size-small)"
+              "WEB": "var(--ui-editor-count-color-over)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-title-font-size-small",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-editor-count-color-over",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
         }
       },
-      "weight": {
-        "$value": "{typography.weight.bold}",
+      "font-family": {
+        "$value": "{typography.fontFamily.base}",
         "$type": "string",
-        "$description": "Graisse du titre.",
+        "$description": "Famille typographique du compteur.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "STRING",
             "scopes": [
-              "FONT_WEIGHT",
-              "FONT_STYLE"
+              "FONT_FAMILY"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-empty-state-title-weight)"
+              "WEB": "var(--ui-editor-count-font-family)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-empty-state-title-weight",
-            "component": "ui-empty-state",
-            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "cssVar": "--ui-editor-count-font-family",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      }
-    }
-  },
-  "field": {
-    "box": {
-      "gap": {
-        "$value": "{metrics.units.sm}",
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.md}",
         "$type": "dimension",
-        "$description": "Espace entre le contrôle et ses affixes.",
+        "$description": "Taille de police du compteur de caractères.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-box-gap)"
+              "WEB": "var(--ui-editor-count-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-box-gap",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-count-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "float-label": {
-      "color": {
-        "$value": "{semantics.form.low.content.default}",
-        "$type": "color",
-        "$description": "Couleur du libellé flottant au repos, où il tient le rôle du placeholder.",
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.sm}",
+        "$type": "dimension",
+        "$description": "Taille de police du compteur de caractères, variante `small`.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "TEXT_FILL"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-color)"
+              "WEB": "var(--ui-editor-count-font-size-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-color",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-count-font-size-small",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      },
-      "color-disabled": {
-        "$value": "{semantics.form.high.content.disabled}",
-        "$type": "color",
-        "$description": "Couleur du libellé flottant désactivé, dans les trois positions.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "TEXT_FILL"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-color-disabled)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-color-disabled",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
-            "descriptionSource": "scss"
+      }
+    },
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
+      "$type": "dimension",
+      "$description": "Taille de police du texte saisi.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-editor-font-size)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-editor-font-size",
+          "component": "ui-editor",
+          "entryPoint": "@4sh/ui-kit-react/ui-editor",
+          "descriptionSource": "scss"
         }
-      },
-      "color-focus": {
-        "$value": "{semantics.form.high.content.focused}",
-        "$type": "color",
-        "$description": "Couleur du libellé flottant quand le champ a le focus.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "TEXT_FILL"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-color-focus)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-color-focus",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+      }
+    },
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police du texte saisi, variante `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-editor-font-size-small)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-editor-font-size-small",
+          "component": "ui-editor",
+          "entryPoint": "@4sh/ui-kit-react/ui-editor",
+          "descriptionSource": "scss"
         }
-      },
-      "color-raised": {
-        "$value": "{semantics.form.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur du libellé flottant en position haute.",
+      }
+    },
+    "heading-1": {
+      "font-size": {
+        "$value": "{responsive.size.typography.title.lg}",
+        "$type": "dimension",
+        "$description": "Taille de police du titre 1.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "TEXT_FILL"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-color-raised)"
+              "WEB": "var(--ui-editor-heading-1-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-color-raised",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-editor-heading-1-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
         }
-      },
+      }
+    },
+    "heading-2": {
       "font-size": {
-        "$value": "{responsive.size.typography.text.sm}",
+        "$value": "{responsive.size.typography.title.md}",
         "$type": "dimension",
-        "$description": "Taille de police du libellé flottant en position haute.",
+        "$description": "Taille de police du titre 2.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -10743,133 +10695,162 @@
               "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-font-size)"
+              "WEB": "var(--ui-editor-heading-2-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-font-size",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-heading-2-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      },
-      "line-height": {
-        "$value": "1.25",
-        "$type": "number",
-        "$description": "Interligne du libellé flottant : c'est lui qui fixe la hauteur de la bande réservée.",
+      }
+    },
+    "heading-3": {
+      "font-size": {
+        "$value": "{responsive.size.typography.title.sm}",
+        "$type": "dimension",
+        "$description": "Taille de police du titre 3.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "LINE_HEIGHT"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-line-height)"
+              "WEB": "var(--ui-editor-heading-3-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-line-height",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-heading-3-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      },
-      "offset-x": {
-        "$value": "{metrics.units.md}",
-        "$type": "dimension",
-        "$description": "Décalage horizontal du libellé flottant, aligné sur l'inset du contrôle.",
+      }
+    },
+    "heading": {
+      "font-family": {
+        "$value": "{typography.fontFamily.title}",
+        "$type": "string",
+        "$description": "Famille typographique des titres.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "STRING",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FONT_FAMILY"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-offset-x)"
+              "WEB": "var(--ui-editor-heading-font-family)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-offset-x",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-heading-font-family",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
       },
-      "offset-y": {
-        "$value": "{metrics.units.2xs}",
-        "$type": "dimension",
-        "$description": "Respiration au-dessus du libellé flottant dans la boîte, variante `in`.",
+      "line-height": {
+        "$value": "1.25",
+        "$type": "number",
+        "$description": "Interlignage des titres.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "LINE_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-offset-y)"
+              "WEB": "var(--ui-editor-heading-line-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-offset-y",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-heading-line-height",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
       },
-      "padding-x": {
-        "$value": "{metrics.units.2xs}",
-        "$type": "dimension",
-        "$description": "Inset horizontal du libellé flottant, variante `on` : c'est lui qui entaille le trait.",
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse des titres.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "STRING",
             "scopes": [
-              "GAP"
+              "FONT_WEIGHT",
+              "FONT_STYLE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-float-label-padding-x)"
+              "WEB": "var(--ui-editor-heading-weight)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-float-label-padding-x",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-heading-weight",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus.",
+    "line-height": {
+      "$value": "1.5",
+      "$type": "number",
+      "$description": "Interlignage du texte saisi.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "STROKE_FLOAT"
+            "LINE_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-field-focus-ring-width)"
+            "WEB": "var(--ui-editor-line-height)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-focus-ring-width",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "cssVar": "--ui-editor-line-height",
+          "component": "ui-editor",
+          "entryPoint": "@4sh/ui-kit-react/ui-editor",
           "descriptionSource": "scss"
         }
       }
     },
-    "footer": {
+    "link": {
+      "color": {
+        "$value": "{semantics.global.text.brand}",
+        "$type": "color",
+        "$description": "Couleur d'un lien inséré.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-link-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-link-color",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "list-item": {
       "gap": {
-        "$value": "{metrics.units.sm}",
+        "$value": "{metrics.units.2xs}",
         "$type": "dimension",
-        "$description": "Espace entre le message et le compteur, dans le pied.",
+        "$description": "Espace entre deux éléments de liste.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -10877,44 +10858,68 @@
               "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-footer-gap)"
+              "WEB": "var(--ui-editor-list-item-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-footer-gap",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-list-item-gap",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "gap": {
-      "$value": "{metrics.units.xs}",
-      "$type": "dimension",
-      "$description": "Gouttière verticale entre le libellé, la boîte et le pied.",
+    "list": {
+      "padding-inline-start": {
+        "$value": "{metrics.units.xl}",
+        "$type": "dimension",
+        "$description": "Retrait des puces et numéros de liste.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-list-padding-inline-start)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-list-padding-inline-start",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "max-height": {
+      "$value": "none",
+      "$type": "string",
+      "$description": "Hauteur au-delà de laquelle la zone défile plutôt que de grandir.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "GAP"
+            "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-field-gap)"
+            "WEB": "var(--ui-editor-max-height)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-gap",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "cssVar": "--ui-editor-max-height",
+          "component": "ui-editor",
+          "entryPoint": "@4sh/ui-kit-react/ui-editor",
           "descriptionSource": "scss"
         }
       }
     },
-    "gap-small": {
-      "$value": "{metrics.units.xs}",
+    "padding-x": {
+      "$value": "{metrics.units.md}",
       "$type": "dimension",
-      "$description": "Gouttière verticale, variante `small`.",
+      "$description": "Inset horizontal de la zone de saisie.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -10922,110 +10927,156 @@
             "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-field-gap-small)"
+            "WEB": "var(--ui-editor-padding-x)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-gap-small",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "cssVar": "--ui-editor-padding-x",
+          "component": "ui-editor",
+          "entryPoint": "@4sh/ui-kit-react/ui-editor",
           "descriptionSource": "scss"
         }
       }
     },
-    "height": {
-      "$value": "{responsive.size.components.default}",
+    "padding-y": {
+      "$value": "{metrics.units.default}",
       "$type": "dimension",
-      "$description": "Hauteur de la boîte de champ.",
+      "$description": "Inset vertical de la zone de saisie.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-field-height)"
+            "WEB": "var(--ui-editor-padding-y)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-height",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "cssVar": "--ui-editor-padding-y",
+          "component": "ui-editor",
+          "entryPoint": "@4sh/ui-kit-react/ui-editor",
           "descriptionSource": "scss"
         }
       }
     },
-    "height-small": {
-      "$value": "{responsive.size.components.sm}",
+    "padding-y-small": {
+      "$value": "{metrics.units.md}",
       "$type": "dimension",
-      "$description": "Hauteur de la boîte de champ, variante `small`.",
+      "$description": "Inset vertical de la zone de saisie, variante `small`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-field-height-small)"
+            "WEB": "var(--ui-editor-padding-y-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-height-small",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "cssVar": "--ui-editor-padding-y-small",
+          "component": "ui-editor",
+          "entryPoint": "@4sh/ui-kit-react/ui-editor",
           "descriptionSource": "scss"
         }
       }
     },
-    "min-height-multiline": {
-      "$value": "{responsive.size.components.sm}",
-      "$type": "dimension",
-      "$description": "Hauteur minimale de la boîte multiligne (`ui-textarea`).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "WIDTH_HEIGHT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-min-height-multiline)"
+    "placeholder": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur du texte indicatif.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-placeholder-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-placeholder-color",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-family": {
+        "$value": "{typography.fontFamily.base}",
+        "$type": "string",
+        "$description": "Famille typographique du texte indicatif.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_FAMILY"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-placeholder-font-family)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-placeholder-font-family",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-min-height-multiline",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss"
         }
       }
     },
-    "min-height-multiline-small": {
-      "$value": "{responsive.size.components.sm}",
-      "$type": "dimension",
-      "$description": "Hauteur minimale de la boîte multiligne, variante `small`.",
+    "radius": {
+      "$value": "inherit",
+      "$type": "string",
+      "$description": "Rayon des coins de l'éditeur, aligné par défaut sur la boîte de champ.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "CORNER_RADIUS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-field-min-height-multiline-small)"
+            "WEB": "var(--ui-editor-radius)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-min-height-multiline-small",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "cssVar": "--ui-editor-radius",
+          "component": "ui-editor",
+          "entryPoint": "@4sh/ui-kit-react/ui-editor",
           "descriptionSource": "scss"
         }
       }
     },
-    "padding-y-auto": {
+    "separator": {
+      "color": {
+        "$value": "{semantics.form.low.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur d'un séparateur d'outils.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-separator-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-separator-color",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      },
       "height": {
-        "$value": "{metrics.units.xs}",
+        "$value": "{responsive.size.typography.text.default}",
         "$type": "dimension",
-        "$description": "Inset vertical de la boîte à hauteur automatique (valeurs enveloppées de `ui-select`).",
+        "$description": "Hauteur d'un séparateur d'outils.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -11033,816 +11084,1100 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-field-padding-y-auto-height)"
+              "WEB": "var(--ui-editor-separator-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-field-padding-y-auto-height",
-            "component": "ui-field",
-            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "cssVar": "--ui-editor-separator-height",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "radius": {
-      "$value": "{metrics.radius.sm}",
-      "$type": "dimension",
-      "$description": "Rayon exposé pour reformer les coins (utilisé par `ui-input-group`).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "CORNER_RADIUS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-radius)"
+      },
+      "width": {
+        "$value": "{metrics.stroke.sm}",
+        "$type": "dimension",
+        "$description": "Épaisseur d'un séparateur d'outils.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-separator-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-separator-width",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-radius",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss"
         }
       }
     },
-    "stroke": {
-      "$value": "{semantics.form.high.stroke.default}",
-      "$type": "color",
-      "$description": "Couleur de bordure de la boîte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-stroke)"
+    "size-default": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.default}",
+        "$type": "dimension",
+        "$description": "Taille de police du texte « Normal ».",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-size-default-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-size-default-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-stroke",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
       }
     },
-    "stroke-disabled": {
-      "$value": "{semantics.form.high.stroke.disabled}",
-      "$type": "color",
-      "$description": "Couleur de bordure de la boîte désactivée.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-stroke-disabled)"
+    "size-lg": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.lg}",
+        "$type": "dimension",
+        "$description": "Taille de police du texte « Grand ».",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-size-lg-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-size-lg-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-stroke-disabled",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss"
         }
       }
     },
-    "stroke-focus": {
-      "$value": "{semantics.form.high.stroke.focused}",
-      "$type": "color",
-      "$description": "Couleur de bordure au focus (elle teinte aussi l'anneau).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-stroke-focus)"
+    "size-sm": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.sm}",
+        "$type": "dimension",
+        "$description": "Taille de police du texte « Petit ».",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-size-sm-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-size-sm-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-stroke-focus",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
       }
     },
-    "stroke-hover": {
-      "$value": "{semantics.form.high.stroke.hover}",
-      "$type": "color",
-      "$description": "Couleur de bordure au survol.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-stroke-hover)"
+    "size-xl": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.xl}",
+        "$type": "dimension",
+        "$description": "Taille de police du texte « Très grand ».",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-size-xl-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-size-xl-font-size",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-stroke-hover",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
       }
     },
-    "stroke-width": {
-      "$value": "{metrics.stroke.default}",
-      "$type": "dimension",
-      "$description": "Épaisseur de bordure de la boîte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-stroke-width)"
+    "swatch-indicator": {
+      "height": {
+        "$value": "{metrics.stroke.lg}",
+        "$type": "dimension",
+        "$description": "Épaisseur du liseré indiquant la couleur active sous les outils couleur/surlignage.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-swatch-indicator-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-swatch-indicator-height",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-stroke-width",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss"
         }
-      }
-    },
-    "surface": {
-      "$value": "{semantics.form.high.surface.default}",
-      "$type": "color",
-      "$description": "Fond de la boîte de champ.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-surface)"
+      },
+      "offset-x": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Décalage horizontal du liseré, de part et d'autre de l'icône.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-swatch-indicator-offset-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-swatch-indicator-offset-x",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-surface",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss"
         }
       }
     },
-    "surface-disabled": {
-      "$value": "{semantics.form.high.surface.disabled}",
-      "$type": "color",
-      "$description": "Fond de la boîte désactivée.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-field-surface-disabled)"
+    "toolbar": {
+      "gap": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Espace entre deux outils.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-toolbar-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-toolbar-gap",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-field-surface-disabled",
-          "component": "ui-field",
-          "entryPoint": "@4sh/ui-kit-react/ui-field",
-          "descriptionSource": "scss"
-        }
-      }
-    }
-  },
-  "focus-ring-width": {
-    "$value": "{metrics.units.2xs}",
-    "$type": "dimension",
-    "$description": "Anneau de focus des actions (suit `--ui-focus-ring-width`).",
-    "$extensions": {
-      "com.figma": {
-        "resolvedType": "FLOAT",
-        "scopes": [
-          "STROKE_FLOAT"
-        ],
-        "codeSyntax": {
-          "WEB": "var(--ui-focus-ring-width)"
         }
       },
-      "com.4sh.ui-kit": {
-        "cssVar": "--ui-focus-ring-width",
-        "component": "ui-config",
-        "entryPoint": "@4sh/ui-kit-react/styles",
-        "descriptionSource": "scss"
-      }
-    }
-  },
-  "form-control": {
-    "gap": {
-      "$value": "{metrics.units.sm}",
-      "$type": "dimension",
-      "$description": "Espace entre un contrôle et son libellé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-gap)"
+      "padding-x": {
+        "$value": "{metrics.units.xs}",
+        "$type": "dimension",
+        "$description": "Inset horizontal de la barre d'outils.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-toolbar-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-toolbar-padding-x",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding-y": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Inset vertical de la barre d'outils.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-toolbar-padding-y)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-toolbar-padding-y",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke": {
+        "$value": "{semantics.form.low.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur du trait séparant la barre d'outils de la zone de saisie.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-toolbar-stroke)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-toolbar-stroke",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-width": {
+        "$value": "{metrics.stroke.default}",
+        "$type": "dimension",
+        "$description": "Épaisseur de ce trait.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "STROKE_FLOAT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-toolbar-stroke-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-toolbar-stroke-width",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface": {
+        "$value": "{semantics.global.background.muted}",
+        "$type": "color",
+        "$description": "Fond de la barre d'outils.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-toolbar-surface)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-toolbar-surface",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-gap",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
         }
       }
     },
-    "size": {
-      "$value": "{responsive.size.components.2xs}",
-      "$type": "dimension",
-      "$description": "Côté d'un contrôle carré (case à cocher, radio).",
+    "toolbar-select": {
+      "surface-hover": {
+        "$value": "{semantics.form.low.surface.hover}",
+        "$type": "color",
+        "$description": "Fond d'un sélecteur de la barre d'outils au survol.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-toolbar-select-surface-hover)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-toolbar-select-surface-hover",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit-react/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    }
+  },
+  "empty-state": {
+    "actions": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement entre les actions.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-actions-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-actions-gap",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "desc": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.default}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-empty-state`, desc.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-desc-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-desc-font-size",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-empty-state`, desc (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-desc-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-desc-font-size-small",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "derived"
+          }
+        }
+      }
+    },
+    "description": {
+      "color": {
+        "$value": "{semantics.global.text.muted}",
+        "$type": "color",
+        "$description": "Couleur de la description.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-description-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-description-color",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "weight": {
+        "$value": "{typography.weight.regular}",
+        "$type": "string",
+        "$description": "Graisse de la description.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-description-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-description-weight",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du composant.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-control-size)"
+            "WEB": "var(--ui-empty-state-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-size",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-empty-state-font-family",
+          "component": "ui-empty-state",
+          "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
           "descriptionSource": "scss"
         }
       }
     },
-    "stroke": {
-      "$value": "{semantics.form.high.stroke.default}",
-      "$type": "color",
-      "$description": "Couleur de bordure d'un contrôle de sélection.",
+    "gap": {
+      "$value": "{metrics.units.lg}",
+      "$type": "dimension",
+      "$description": "Espacement de `ui-empty-state`.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "STROKE_COLOR"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-control-stroke)"
+            "WEB": "var(--ui-empty-state-gap)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-stroke",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+          "cssVar": "--ui-empty-state-gap",
+          "component": "ui-empty-state",
+          "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+          "descriptionSource": "derived"
         }
       }
     },
-    "stroke-checked": {
-      "$value": "{semantics.form.high.stroke.checked}",
-      "$type": "color",
-      "$description": "Couleur de bordure d'un contrôle coché ou indéterminé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-stroke-checked)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-stroke-checked",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
-        }
-      }
-    },
-    "stroke-disabled": {
-      "$value": "{semantics.form.high.stroke.disabled}",
-      "$type": "color",
-      "$description": "Couleur de bordure d'un contrôle désactivé.",
+    "gap-small": {
+      "$value": "{metrics.units.default}",
+      "$type": "dimension",
+      "$description": "Espacement de `ui-empty-state` (variante `small`).",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "STROKE_COLOR"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-control-stroke-disabled)"
+            "WEB": "var(--ui-empty-state-gap-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-stroke-disabled",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+          "cssVar": "--ui-empty-state-gap-small",
+          "component": "ui-empty-state",
+          "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+          "descriptionSource": "derived"
         }
       }
     },
-    "stroke-focus": {
-      "$value": "{semantics.form.high.stroke.focused}",
-      "$type": "color",
-      "$description": "Couleur de bordure au focus clavier ; elle teinte aussi l'anneau.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-stroke-focus)"
+    "media": {
+      "color": {
+        "$value": "{semantics.global.text.muted}",
+        "$type": "color",
+        "$description": "Couleur de la zone visuelle (l’icône utilise `currentColor`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-media-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-media-color",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-stroke-focus",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
-      }
-    },
-    "stroke-hover": {
-      "$value": "{semantics.form.high.stroke.hover}",
-      "$type": "color",
-      "$description": "Couleur de bordure au survol.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-stroke-hover)"
+      },
+      "size": {
+        "$value": "{metrics.units.4xl}",
+        "$type": "dimension",
+        "$description": "Taille de `ui-empty-state`, media.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-media-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-media-size",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-stroke-hover",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
-      }
-    },
-    "surface": {
-      "$value": "{semantics.form.high.surface.default}",
-      "$type": "color",
-      "$description": "Fond d'un contrôle de sélection.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-surface)"
+      },
+      "size-small": {
+        "$value": "{metrics.units.2xl}",
+        "$type": "dimension",
+        "$description": "Taille de `ui-empty-state`, media (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-media-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-media-size-small",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-surface",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
       }
     },
-    "surface-checked": {
-      "$value": "{semantics.form.high.surface.checked}",
-      "$type": "color",
-      "$description": "Fond d'un contrôle de sélection coché ou indéterminé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-surface-checked)"
+    "text": {
+      "gap": {
+        "$value": "{metrics.units.xs}",
+        "$type": "dimension",
+        "$description": "Espacement titre ↔ description.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-text-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-text-gap",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-surface-checked",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
       }
     },
-    "surface-disabled": {
-      "$value": "{semantics.form.high.surface.disabled}",
-      "$type": "color",
-      "$description": "Fond d'un contrôle de sélection désactivé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-surface-disabled)"
+    "title": {
+      "color": {
+        "$value": "{semantics.global.text.default}",
+        "$type": "color",
+        "$description": "Couleur du titre.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "TEXT_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-title-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-title-color",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-surface-disabled",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
-      }
-    },
-    "surface-hover": {
-      "$value": "{semantics.form.high.surface.hover}",
-      "$type": "color",
-      "$description": "Fond d'un contrôle de sélection au survol.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-surface-hover)"
+      },
+      "font-family": {
+        "$value": "{typography.fontFamily.title}",
+        "$type": "string",
+        "$description": "Famille typographique du titre.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_FAMILY"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-title-font-family)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-title-font-family",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-surface-hover",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
-      }
-    }
-  },
-  "form-control-marker": {
-    "color": {
-      "$value": "{semantics.form.high.content.checked}",
-      "$type": "color",
-      "$description": "Couleur du marqueur (coche, point radio).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-marker-color)"
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.title.default}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-empty-state`, title.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-title-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-title-font-size",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-marker-color",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
-      }
-    },
-    "color-disabled": {
-      "$value": "{semantics.form.high.content.disabled}",
-      "$type": "color",
-      "$description": "Couleur du marqueur désactivé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-control-marker-color-disabled)"
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.title.md}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-empty-state`, title (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-title-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-title-font-size-small",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-control-marker-color-disabled",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
-      }
-    }
-  },
-  "form-field-action": {
-    "color": {
-      "$value": "{semantics.form.low.content.default}",
-      "$type": "color",
-      "$description": "Couleur d'un bouton d'action dans un champ (œil, effacer).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-field-action-color)"
+      },
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse du titre.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-empty-state-title-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-empty-state-title-weight",
+            "component": "ui-empty-state",
+            "entryPoint": "@4sh/ui-kit-react/ui-empty-state",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-action-color",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
         }
       }
-    },
-    "color-disabled": {
-      "$value": "{semantics.form.high.content.disabled}",
-      "$type": "color",
-      "$description": "Couleur d'un bouton d'action désactivé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-field-action-color-disabled)"
+    }
+  },
+  "field": {
+    "box": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espace entre le contrôle et ses affixes.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-box-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-box-gap",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-action-color-disabled",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
         }
       }
     },
-    "color-focus": {
-      "$value": "{semantics.form.high.content.focused}",
-      "$type": "color",
-      "$description": "Couleur d'un bouton d'action au focus clavier.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-field-action-color-focus)"
+    "float-label": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur du libellé flottant au repos, où il tient le rôle du placeholder.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "TEXT_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-color",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-action-color-focus",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
         }
-      }
-    },
-    "color-hover": {
-      "$value": "{semantics.form.high.content.hover}",
-      "$type": "color",
-      "$description": "Couleur d'un bouton d'action au survol.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-field-action-color-hover)"
+      },
+      "color-disabled": {
+        "$value": "{semantics.form.high.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur du libellé flottant désactivé, dans les trois positions.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "TEXT_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-color-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-color-disabled",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-focus": {
+        "$value": "{semantics.form.high.content.focused}",
+        "$type": "color",
+        "$description": "Couleur du libellé flottant quand le champ a le focus.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "TEXT_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-color-focus)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-color-focus",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+          }
+        }
+      },
+      "color-raised": {
+        "$value": "{semantics.form.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du libellé flottant en position haute.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "TEXT_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-color-raised)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-color-raised",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+          }
+        }
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.sm}",
+        "$type": "dimension",
+        "$description": "Taille de police du libellé flottant en position haute.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-font-size",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "line-height": {
+        "$value": "1.25",
+        "$type": "number",
+        "$description": "Interligne du libellé flottant : c'est lui qui fixe la hauteur de la bande réservée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "LINE_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-line-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-line-height",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "offset-x": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Décalage horizontal du libellé flottant, aligné sur l'inset du contrôle.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-offset-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-offset-x",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "offset-y": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Respiration au-dessus du libellé flottant dans la boîte, variante `in`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-offset-y)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-offset-y",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding-x": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Inset horizontal du libellé flottant, variante `on` : c'est lui qui entaille le trait.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-float-label-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-float-label-padding-x",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-action-color-hover",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
         }
       }
     },
-    "surface-focus": {
-      "$value": "{semantics.form.high.surface.focused}",
-      "$type": "color",
-      "$description": "Fond d'un bouton d'action au focus clavier ; c'est lui qui dit quel bouton tient le focus.",
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-action-surface-focus)"
+            "WEB": "var(--ui-field-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-action-surface-focus",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-focus-ring-width",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "surface-hover": {
-      "$value": "{semantics.form.high.surface.hover}",
-      "$type": "color",
-      "$description": "Fond d'un bouton d'action au survol.",
+    "footer": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espace entre le message et le compteur, dans le pied.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-footer-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-footer-gap",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "gap": {
+      "$value": "{metrics.units.xs}",
+      "$type": "dimension",
+      "$description": "Gouttière verticale entre le libellé, la boîte et le pied.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-action-surface-hover)"
+            "WEB": "var(--ui-field-gap)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-action-surface-hover",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
-        }
-      }
-    }
-  },
-  "form-field-affix": {
-    "color": {
-      "$value": "{semantics.form.low.content.default}",
-      "$type": "color",
-      "$description": "Couleur d'un affixe (icône décorative, unité).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-field-affix-color)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-affix-color",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "color-disabled": {
-      "$value": "{semantics.form.high.content.disabled}",
-      "$type": "color",
-      "$description": "Couleur d'un affixe, champ désactivé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-field-affix-color-disabled)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-affix-color-disabled",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
-        }
-      }
-    }
-  },
-  "form-field": {
-    "color": {
-      "$value": "{semantics.form.high.content.default}",
-      "$type": "color",
-      "$description": "Couleur du texte saisi dans un champ.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-field-color)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-color",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-gap",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "color-disabled": {
-      "$value": "{semantics.form.high.content.disabled}",
-      "$type": "color",
-      "$description": "Couleur du texte saisi, champ désactivé.",
+    "gap-small": {
+      "$value": "{metrics.units.xs}",
+      "$type": "dimension",
+      "$description": "Gouttière verticale, variante `small`.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "ALL_FILLS"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-color-disabled)"
+            "WEB": "var(--ui-field-gap-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-color-disabled",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-gap-small",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du texte saisi dans un champ.",
+    "height": {
+      "$value": "{responsive.size.components.default}",
+      "$type": "dimension",
+      "$description": "Hauteur de la boîte de champ.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_FAMILY"
+            "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-font-family)"
+            "WEB": "var(--ui-field-height)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-font-family",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-height",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "gap": {
-      "$value": "{metrics.units.sm}",
+    "height-small": {
+      "$value": "{responsive.size.components.sm}",
       "$type": "dimension",
-      "$description": "Espace entre le contrôle et ses affixes.",
+      "$description": "Hauteur de la boîte de champ, variante `small`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "GAP"
+            "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-gap)"
+            "WEB": "var(--ui-field-height-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-gap",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-height-small",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "height": {
-      "$value": "{responsive.size.components.default}",
+    "min-height-multiline": {
+      "$value": "{responsive.size.components.sm}",
       "$type": "dimension",
-      "$description": "Hauteur de la boîte de champ.",
+      "$description": "Hauteur minimale de la boîte multiligne (`ui-textarea`).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -11850,21 +12185,21 @@
             "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-height)"
+            "WEB": "var(--ui-field-min-height-multiline)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-height",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-min-height-multiline",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "height-small": {
+    "min-height-multiline-small": {
       "$value": "{responsive.size.components.sm}",
       "$type": "dimension",
-      "$description": "Hauteur de la boîte de champ, variante `small`.",
+      "$description": "Hauteur minimale de la boîte multiligne, variante `small`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -11872,43 +12207,45 @@
             "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-height-small)"
+            "WEB": "var(--ui-field-min-height-multiline-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-height-small",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-min-height-multiline-small",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "padding-x": {
-      "$value": "{metrics.units.md}",
-      "$type": "dimension",
-      "$description": "Inset horizontal de la boîte de champ.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-form-field-padding-x)"
+    "padding-y-auto": {
+      "height": {
+        "$value": "{metrics.units.xs}",
+        "$type": "dimension",
+        "$description": "Inset vertical de la boîte à hauteur automatique (valeurs enveloppées de `ui-select`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-field-padding-y-auto-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-field-padding-y-auto-height",
+            "component": "ui-field",
+            "entryPoint": "@4sh/ui-kit-react/ui-field",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-padding-x",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
         }
       }
     },
     "radius": {
       "$value": "{metrics.radius.sm}",
       "$type": "dimension",
-      "$description": "Rayon des coins de la boîte de champ.",
+      "$description": "Rayon exposé pour reformer les coins (utilisé par `ui-input-group`).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -11916,135 +12253,137 @@
             "CORNER_RADIUS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-radius)"
+            "WEB": "var(--ui-field-radius)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-radius",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-radius",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "form-field-placeholder": {
-    "color": {
-      "$value": "{semantics.form.low.content.default}",
+    },
+    "stroke": {
+      "$value": "{semantics.form.high.stroke.default}",
       "$type": "color",
-      "$description": "Couleur du texte d'invite (placeholder).",
+      "$description": "Couleur de bordure de la boîte.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
           "scopes": [
-            "ALL_FILLS"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-placeholder-color)"
+            "WEB": "var(--ui-field-stroke)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-placeholder-color",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-field-stroke",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
       }
-    }
-  },
-  "form-field-spinner": {
-    "color": {
-      "$value": "{semantics.form.low.content.default}",
+    },
+    "stroke-disabled": {
+      "$value": "{semantics.form.high.stroke.disabled}",
       "$type": "color",
-      "$description": "Couleur des flèches du compteur.",
+      "$description": "Couleur de bordure de la boîte désactivée.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
           "scopes": [
-            "ALL_FILLS"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-spinner-color)"
+            "WEB": "var(--ui-field-stroke-disabled)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-spinner-color",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-stroke-disabled",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "color-disabled": {
-      "$value": "{semantics.form.high.content.disabled}",
+    "stroke-focus": {
+      "$value": "{semantics.form.high.stroke.focused}",
       "$type": "color",
-      "$description": "Couleur des flèches du compteur désactivé.",
+      "$description": "Couleur de bordure au focus (elle teinte aussi l'anneau).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
           "scopes": [
-            "ALL_FILLS"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-spinner-color-disabled)"
+            "WEB": "var(--ui-field-stroke-focus)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-spinner-color-disabled",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-field-stroke-focus",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
       }
     },
-    "color-hover": {
-      "$value": "{semantics.form.high.content.hover}",
+    "stroke-hover": {
+      "$value": "{semantics.form.high.stroke.hover}",
       "$type": "color",
-      "$description": "Couleur des flèches du compteur au survol.",
+      "$description": "Couleur de bordure au survol.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
           "scopes": [
-            "ALL_FILLS"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-spinner-color-hover)"
+            "WEB": "var(--ui-field-stroke-hover)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-spinner-color-hover",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-field-stroke-hover",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "3 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
         }
       }
     },
-    "stroke": {
-      "$value": "{semantics.form.high.stroke.default}",
-      "$type": "color",
-      "$description": "Couleur des séparateurs du compteur (haut/bas).",
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
+      "$type": "dimension",
+      "$description": "Épaisseur de bordure de la boîte.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "STROKE_COLOR"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-spinner-stroke)"
+            "WEB": "var(--ui-field-stroke-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-spinner-stroke",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-stroke-width",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
     },
-    "surface-hover": {
-      "$value": "{semantics.form.high.surface.hover}",
+    "surface": {
+      "$value": "{semantics.form.high.surface.default}",
       "$type": "color",
-      "$description": "Fond d'une flèche du compteur au survol.",
+      "$description": "Fond de la boîte de champ.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
@@ -12053,115 +12392,4753 @@
             "SHAPE_FILL"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-field-spinner-surface-hover)"
+            "WEB": "var(--ui-field-surface)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-field-spinner-surface-hover",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-field-surface",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "form-textarea": {
-    "min-height": {
-      "$value": "{responsive.size.components.sm}",
-      "$type": "dimension",
-      "$description": "Hauteur minimale d'une boîte multiligne.",
+    },
+    "surface-disabled": {
+      "$value": "{semantics.form.high.surface.disabled}",
+      "$type": "color",
+      "$description": "Fond de la boîte désactivée.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "FRAME_FILL",
+            "SHAPE_FILL"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-textarea-min-height)"
+            "WEB": "var(--ui-field-surface-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-field-surface-disabled",
+          "component": "ui-field",
+          "entryPoint": "@4sh/ui-kit-react/ui-field",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "file-upload": {
+    "browse": {
+      "color": {
+        "$value": "{semantics.actions.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du lien de parcours.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-color",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-disabled": {
+        "$value": "{semantics.actions.high.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur du lien de parcours désactivé.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-color-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-color-disabled",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.default}",
+        "$type": "dimension",
+        "$description": "Taille du libellé du bouton de sélection.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-font-size",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille du libellé du bouton de sélection, taille `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-font-size-small",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding-x": {
+        "$value": "{metrics.units.default}",
+        "$type": "dimension",
+        "$description": "Inset horizontal du bouton de sélection.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-padding-x",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding-x-small": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Inset horizontal du bouton de sélection, taille `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-padding-x-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-padding-x-small",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface": {
+        "$value": "{semantics.actions.high.surface.default}",
+        "$type": "color",
+        "$description": "Fond du lien de parcours.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-surface)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-surface",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface-disabled": {
+        "$value": "{semantics.actions.high.surface.disabled}",
+        "$type": "color",
+        "$description": "Fond du lien de parcours désactivé.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-surface-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-surface-disabled",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface-hover": {
+        "$value": "{semantics.actions.high.surface.hover}",
+        "$type": "color",
+        "$description": "Fond du lien de parcours au survol.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-surface-hover)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-surface-hover",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse du lien de parcours.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-browse-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-browse-weight",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "color": {
+      "$value": "{semantics.form.high.content.default}",
+      "$type": "color",
+      "$description": "Couleur du texte du déclencheur.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-color",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-disabled": {
+      "$value": "{semantics.form.high.content.disabled}",
+      "$type": "color",
+      "$description": "Couleur du texte du déclencheur désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-color-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-color-disabled",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "content": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement entre les lignes de fichier.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-content-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-content-gap",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "field": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.default}",
+        "$type": "dimension",
+        "$description": "Taille du libellé en présentation compacte.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-field-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-field-font-size",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille du libellé en présentation compacte, taille `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-field-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-field-font-size-small",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement libellé ↔ bouton de sélection.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-field-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-field-gap",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "height": {
+        "$value": "{responsive.size.components.default}",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-file-upload`, field.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-field-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-field-height",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "height-small": {
+        "$value": "{responsive.size.components.sm}",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-file-upload`, field (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-field-height-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-field-height-small",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "padding-x": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Inset horizontal du libellé en présentation compacte.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-field-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-field-padding-x",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "field-text": {
+      "weight": {
+        "$value": "{typography.weight.regular}",
+        "$type": "string",
+        "$description": "Graisse du texte du champ.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-field-text-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-field-text-weight",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "focus-ring": {
+      "color": {
+        "$value": "{semantics.form.high.stroke.focused}",
+        "$type": "color",
+        "$description": "Couleur de l'anneau de focus.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-focus-ring-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-focus-ring-color",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-focus-ring-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-focus-ring-width",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du nom.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-font-family",
+          "component": "ui-file-upload-list",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{metrics.units.default}",
+      "$type": "dimension",
+      "$description": "Espacement entre la zone, la barre d'outils et la liste.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-gap)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-gap",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "item": {
+      "focus-ring-width": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Épaisseur de l'anneau de focus du bouton de retrait.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "STROKE_FLOAT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-focus-ring-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-focus-ring-width",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "gap": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Espacement de `ui-file-upload-list`, item.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-gap",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "gap-small": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement de `ui-file-upload-list`, item (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-gap-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-gap-small",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "padding-x": {
+        "$value": "{metrics.units.default}",
+        "$type": "dimension",
+        "$description": "Inset horizontal de `ui-file-upload-list`, item.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-padding-x",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "padding-x-small": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Inset horizontal de `ui-file-upload-list`, item (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-padding-x-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-padding-x-small",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "padding-y": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Inset vertical de `ui-file-upload-list`, item.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-padding-y)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-padding-y",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "padding-y-small": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Inset vertical de `ui-file-upload-list`, item (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-padding-y-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-padding-y-small",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "radius": {
+        "$value": "{metrics.radius.lg}",
+        "$type": "dimension",
+        "$description": "Rayon des coins de `ui-file-upload-list`, item.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-radius",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "radius-small": {
+        "$value": "{metrics.radius.md}",
+        "$type": "dimension",
+        "$description": "Rayon des coins de `ui-file-upload-list`, item (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-radius-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-radius-small",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "stroke-width": {
+        "$value": "{metrics.stroke.default}",
+        "$type": "dimension",
+        "$description": "Épaisseur de bordure d'une ligne.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "STROKE_FLOAT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-stroke-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-stroke-width",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "item-infos": {
+      "gap": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Espacement nom ↔ métadonnées.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-infos-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-infos-gap",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "item-media": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement vignette ↔ informations.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-media-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-media-gap",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "size": {
+        "$value": "40px",
+        "$type": "dimension",
+        "$description": "Taille de `ui-file-upload-list`, item-media.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-media-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-media-size",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "size-small": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Taille de `ui-file-upload-list`, item-media (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-media-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-media-size-small",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      }
+    },
+    "item-meta": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.sm}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-file-upload-list`, item-meta.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-meta-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-meta-font-size",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.sm}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-file-upload-list`, item-meta (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-meta-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-meta-font-size-small",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      }
+    },
+    "item-name": {
+      "font-size": {
+        "$value": "{responsive.size.typography.title.sm}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-file-upload-list`, item-name.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-name-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-name-font-size",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-file-upload-list`, item-name (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-name-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-name-font-size-small",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      }
+    },
+    "item-progress": {
+      "color": {
+        "$value": "{semantics.global.text.default}",
+        "$type": "color",
+        "$description": "Couleur de la portion remplie de la barre de progression.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-progress-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-progress-color",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "height": {
+        "$value": "{metrics.stroke.default}",
+        "$type": "dimension",
+        "$description": "Épaisseur de la barre de progression.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-progress-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-progress-height",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "item-remove": {
+      "padding": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Inset du bouton de retrait.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-remove-padding)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-remove-padding",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "radius": {
+        "$value": "{metrics.radius.sm}",
+        "$type": "dimension",
+        "$description": "Rayon du bouton de retrait.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-remove-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-remove-radius",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "item-thumb": {
+      "radius": {
+        "$value": "{metrics.radius.sm}",
+        "$type": "dimension",
+        "$description": "Rayon de la vignette d'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-item-thumb-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-item-thumb-radius",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "list": {
+      "color": {
+        "$value": "{semantics.form.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du texte d'une ligne de fichier (vignette et métadonnées comprises).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-color",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-error": {
+        "$value": "{semantics.form.error.content.default}",
+        "$type": "color",
+        "$description": "Couleur du texte d'une ligne en erreur.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-color-error)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-color-error",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke": {
+        "$value": "{semantics.form.high.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur de bordure d'une ligne de fichier.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-stroke)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-stroke",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-error": {
+        "$value": "{semantics.informative.errorHigh.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur de bordure d'une ligne en erreur.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-stroke-error)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-stroke-error",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface": {
+        "$value": "{semantics.form.high.surface.default}",
+        "$type": "color",
+        "$description": "Fond d'une ligne de fichier.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-surface)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-surface",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "list-progress": {
+      "surface": {
+        "$value": "{semantics.form.high.surface.hover}",
+        "$type": "color",
+        "$description": "Fond de la piste de progression.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-progress-surface)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-progress-surface",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "list-remove": {
+      "color": {
+        "$value": "{semantics.form.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du bouton de retrait.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-remove-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-remove-color",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-hover": {
+        "$value": "{semantics.global.text.default}",
+        "$type": "color",
+        "$description": "Couleur du bouton de retrait au survol.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-remove-color-hover)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-remove-color-hover",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "list-remove-focus-ring": {
+      "color": {
+        "$value": "{semantics.form.high.stroke.focused}",
+        "$type": "color",
+        "$description": "Couleur de l'anneau de focus du bouton de retrait.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-list-remove-focus-ring-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-list-remove-focus-ring-color",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "message": {
+      "color": {
+        "$value": "{semantics.form.error.content.default}",
+        "$type": "color",
+        "$description": "Couleur d'un message d'erreur.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "TEXT_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-message-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-message-color",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille d'un message.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-message-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-message-font-size",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "messages": {
+      "gap": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Espacement entre les messages.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-messages-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-messages-gap",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "meta": {
+      "weight": {
+        "$value": "{typography.weight.light}",
+        "$type": "string",
+        "$description": "Graisse des métadonnées.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-meta-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-meta-weight",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "name": {
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse du nom.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-name-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-name-weight",
+            "component": "ui-file-upload-list",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "placeholder": {
+      "opacity": {
+        "$value": "0.75",
+        "$type": "number",
+        "$description": "Opacité du texte indicatif tant qu'aucun fichier n'est choisi.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "OPACITY"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-placeholder-opacity)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-placeholder-opacity",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "radius": {
+      "$value": "{metrics.radius.sm}",
+      "$type": "dimension",
+      "$description": "Rayon de la zone de dépôt.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-radius)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-radius",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "stroke": {
+      "$value": "{semantics.form.high.stroke.default}",
+      "$type": "color",
+      "$description": "Couleur de bordure du déclencheur.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-stroke)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-stroke",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "stroke-disabled": {
+      "$value": "{semantics.form.high.stroke.disabled}",
+      "$type": "color",
+      "$description": "Couleur de bordure du déclencheur désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-stroke-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-stroke-disabled",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "stroke-dragging": {
+      "$value": "{semantics.form.high.stroke.focused}",
+      "$type": "color",
+      "$description": "Couleur de bordure de la zone pendant un survol de dépôt.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-stroke-dragging)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-stroke-dragging",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "stroke-focus": {
+      "$value": "{semantics.form.high.stroke.focused}",
+      "$type": "color",
+      "$description": "Couleur de bordure au focus clavier.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-stroke-focus)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-stroke-focus",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "stroke-hover": {
+      "$value": "{semantics.form.high.stroke.hover}",
+      "$type": "color",
+      "$description": "Couleur de bordure du déclencheur au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-stroke-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-stroke-hover",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
+      "$type": "dimension",
+      "$description": "Épaisseur de bordure de la zone de dépôt.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-stroke-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-stroke-width",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "surface": {
+      "$value": "{semantics.form.high.surface.default}",
+      "$type": "color",
+      "$description": "Fond du déclencheur (champ compact comme zone de dépôt).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-surface)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-surface",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "surface-disabled": {
+      "$value": "{semantics.form.high.surface.disabled}",
+      "$type": "color",
+      "$description": "Fond du déclencheur désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-surface-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-surface-disabled",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "surface-dragging": {
+      "$value": "{semantics.form.high.surface.focused}",
+      "$type": "color",
+      "$description": "Fond de la zone pendant un survol de dépôt.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-surface-dragging)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-surface-dragging",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "surface-hover": {
+      "$value": "{semantics.form.high.surface.hover}",
+      "$type": "color",
+      "$description": "Fond du déclencheur au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-file-upload-surface-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-file-upload-surface-hover",
+          "component": "ui-file-upload",
+          "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "toolbar": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement entre les actions de la barre d'outils.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-toolbar-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-toolbar-gap",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "zone-content": {
+      "gap": {
+        "$value": "{metrics.units.xs}",
+        "$type": "dimension",
+        "$description": "Espacement titre ↔ indication.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-content-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-content-gap",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "zone": {
+      "gap": {
+        "$value": "{metrics.units.lg}",
+        "$type": "dimension",
+        "$description": "Espacement icône ↔ contenu de la zone de dépôt.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-gap",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "gap-small": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement icône ↔ contenu de la zone de dépôt, taille `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-gap-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-gap-small",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "min-height": {
+        "$value": "112px",
+        "$type": "dimension",
+        "$description": "Hauteur minimale de `ui-file-upload`, zone.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-min-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-min-height",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "min-height-small": {
+        "$value": "94px",
+        "$type": "dimension",
+        "$description": "Hauteur minimale de `ui-file-upload`, zone (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-min-height-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-min-height-small",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "padding": {
+        "$value": "{metrics.units.default}",
+        "$type": "dimension",
+        "$description": "Inset de la zone de dépôt.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-padding)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-padding",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "zone-hint": {
+      "color": {
+        "$value": "{semantics.global.text.muted}",
+        "$type": "color",
+        "$description": "Couleur de l'indication secondaire de la zone.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-hint-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-hint-color",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille de l'indication sous le titre.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-hint-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-hint-font-size",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.sm}",
+        "$type": "dimension",
+        "$description": "Taille de l'indication sous le titre, taille `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-hint-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-hint-font-size-small",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "zone-link": {
+      "color": {
+        "$value": "{semantics.actions.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur du lien de la zone.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-link-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-link-color",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse du lien de la zone.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-link-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-link-weight",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "zone-title": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.default}",
+        "$type": "dimension",
+        "$description": "Taille du titre de la zone de dépôt.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-title-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-title-font-size",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille du titre de la zone de dépôt, taille `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-title-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-title-font-size-small",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "gap": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Espacement entre les fragments du titre de la zone.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-title-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-title-gap",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "weight": {
+        "$value": "{typography.weight.regular}",
+        "$type": "string",
+        "$description": "Graisse du titre de la zone.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-file-upload-zone-title-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-file-upload-zone-title-weight",
+            "component": "ui-file-upload",
+            "entryPoint": "@4sh/ui-kit-react/ui-file-upload",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    }
+  },
+  "focus-ring-width": {
+    "$value": "{metrics.units.2xs}",
+    "$type": "dimension",
+    "$description": "Anneau de focus des actions (suit `--ui-focus-ring-width`).",
+    "$extensions": {
+      "com.figma": {
+        "resolvedType": "FLOAT",
+        "scopes": [
+          "STROKE_FLOAT"
+        ],
+        "codeSyntax": {
+          "WEB": "var(--ui-focus-ring-width)"
+        }
+      },
+      "com.4sh.ui-kit": {
+        "cssVar": "--ui-focus-ring-width",
+        "component": "ui-config",
+        "entryPoint": "@4sh/ui-kit-react/styles",
+        "descriptionSource": "scss"
+      }
+    }
+  },
+  "form-control": {
+    "gap": {
+      "$value": "{metrics.units.sm}",
+      "$type": "dimension",
+      "$description": "Espace entre un contrôle et son libellé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-gap)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-gap",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "size": {
+      "$value": "{responsive.size.components.2xs}",
+      "$type": "dimension",
+      "$description": "Côté d'un contrôle carré (case à cocher, radio).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-size)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-size",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "stroke": {
+      "$value": "{semantics.form.high.stroke.default}",
+      "$type": "color",
+      "$description": "Couleur de bordure d'un contrôle de sélection.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-stroke)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-stroke",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "stroke-checked": {
+      "$value": "{semantics.form.high.stroke.checked}",
+      "$type": "color",
+      "$description": "Couleur de bordure d'un contrôle coché ou indéterminé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-stroke-checked)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-stroke-checked",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "stroke-disabled": {
+      "$value": "{semantics.form.high.stroke.disabled}",
+      "$type": "color",
+      "$description": "Couleur de bordure d'un contrôle désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-stroke-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-stroke-disabled",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "stroke-focus": {
+      "$value": "{semantics.form.high.stroke.focused}",
+      "$type": "color",
+      "$description": "Couleur de bordure au focus clavier ; elle teinte aussi l'anneau.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-stroke-focus)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-stroke-focus",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "stroke-hover": {
+      "$value": "{semantics.form.high.stroke.hover}",
+      "$type": "color",
+      "$description": "Couleur de bordure au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-stroke-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-stroke-hover",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "surface": {
+      "$value": "{semantics.form.high.surface.default}",
+      "$type": "color",
+      "$description": "Fond d'un contrôle de sélection.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-surface)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-surface",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "surface-checked": {
+      "$value": "{semantics.form.high.surface.checked}",
+      "$type": "color",
+      "$description": "Fond d'un contrôle de sélection coché ou indéterminé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-surface-checked)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-surface-checked",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "surface-disabled": {
+      "$value": "{semantics.form.high.surface.disabled}",
+      "$type": "color",
+      "$description": "Fond d'un contrôle de sélection désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-surface-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-surface-disabled",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "surface-hover": {
+      "$value": "{semantics.form.high.surface.hover}",
+      "$type": "color",
+      "$description": "Fond d'un contrôle de sélection au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-surface-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-surface-hover",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    }
+  },
+  "form-control-marker": {
+    "color": {
+      "$value": "{semantics.form.high.content.checked}",
+      "$type": "color",
+      "$description": "Couleur du marqueur (coche, point radio).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-marker-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-marker-color",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "color-disabled": {
+      "$value": "{semantics.form.high.content.disabled}",
+      "$type": "color",
+      "$description": "Couleur du marqueur désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-control-marker-color-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-control-marker-color-disabled",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    }
+  },
+  "form-field-action": {
+    "color": {
+      "$value": "{semantics.form.low.content.default}",
+      "$type": "color",
+      "$description": "Couleur d'un bouton d'action dans un champ (œil, effacer).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-action-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-action-color",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-disabled": {
+      "$value": "{semantics.form.high.content.disabled}",
+      "$type": "color",
+      "$description": "Couleur d'un bouton d'action désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-action-color-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-action-color-disabled",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-focus": {
+      "$value": "{semantics.form.high.content.focused}",
+      "$type": "color",
+      "$description": "Couleur d'un bouton d'action au focus clavier.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-action-color-focus)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-action-color-focus",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-hover": {
+      "$value": "{semantics.form.high.content.hover}",
+      "$type": "color",
+      "$description": "Couleur d'un bouton d'action au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-action-color-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-action-color-hover",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "surface-focus": {
+      "$value": "{semantics.form.high.surface.focused}",
+      "$type": "color",
+      "$description": "Fond d'un bouton d'action au focus clavier ; c'est lui qui dit quel bouton tient le focus.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-action-surface-focus)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-action-surface-focus",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "surface-hover": {
+      "$value": "{semantics.form.high.surface.hover}",
+      "$type": "color",
+      "$description": "Fond d'un bouton d'action au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-action-surface-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-action-surface-hover",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "form-field-affix": {
+    "color": {
+      "$value": "{semantics.form.low.content.default}",
+      "$type": "color",
+      "$description": "Couleur d'un affixe (icône décorative, unité).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-affix-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-affix-color",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-disabled": {
+      "$value": "{semantics.form.high.content.disabled}",
+      "$type": "color",
+      "$description": "Couleur d'un affixe, champ désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-affix-color-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-affix-color-disabled",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "form-field": {
+    "color": {
+      "$value": "{semantics.form.high.content.default}",
+      "$type": "color",
+      "$description": "Couleur du texte saisi dans un champ.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-color",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-disabled": {
+      "$value": "{semantics.form.high.content.disabled}",
+      "$type": "color",
+      "$description": "Couleur du texte saisi, champ désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-color-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-color-disabled",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du texte saisi dans un champ.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-font-family",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{metrics.units.sm}",
+      "$type": "dimension",
+      "$description": "Espace entre le contrôle et ses affixes.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-gap)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-gap",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "height": {
+      "$value": "{responsive.size.components.default}",
+      "$type": "dimension",
+      "$description": "Hauteur de la boîte de champ.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-height)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-height",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "height-small": {
+      "$value": "{responsive.size.components.sm}",
+      "$type": "dimension",
+      "$description": "Hauteur de la boîte de champ, variante `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-height-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-height-small",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "padding-x": {
+      "$value": "{metrics.units.md}",
+      "$type": "dimension",
+      "$description": "Inset horizontal de la boîte de champ.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-padding-x)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-padding-x",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "radius": {
+      "$value": "{metrics.radius.sm}",
+      "$type": "dimension",
+      "$description": "Rayon des coins de la boîte de champ.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-radius)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-radius",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "form-field-placeholder": {
+    "color": {
+      "$value": "{semantics.form.low.content.default}",
+      "$type": "color",
+      "$description": "Couleur du texte d'invite (placeholder).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-placeholder-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-placeholder-color",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "form-field-spinner": {
+    "color": {
+      "$value": "{semantics.form.low.content.default}",
+      "$type": "color",
+      "$description": "Couleur des flèches du compteur.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-spinner-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-spinner-color",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-disabled": {
+      "$value": "{semantics.form.high.content.disabled}",
+      "$type": "color",
+      "$description": "Couleur des flèches du compteur désactivé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-spinner-color-disabled)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-spinner-color-disabled",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-hover": {
+      "$value": "{semantics.form.high.content.hover}",
+      "$type": "color",
+      "$description": "Couleur des flèches du compteur au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-spinner-color-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-spinner-color-hover",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "stroke": {
+      "$value": "{semantics.form.high.stroke.default}",
+      "$type": "color",
+      "$description": "Couleur des séparateurs du compteur (haut/bas).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-spinner-stroke)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-spinner-stroke",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "surface-hover": {
+      "$value": "{semantics.form.high.surface.hover}",
+      "$type": "color",
+      "$description": "Fond d'une flèche du compteur au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-field-spinner-surface-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-field-spinner-surface-hover",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "form-textarea": {
+    "min-height": {
+      "$value": "{responsive.size.components.sm}",
+      "$type": "dimension",
+      "$description": "Hauteur minimale d'une boîte multiligne.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-textarea-min-height)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-textarea-min-height",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "min-height-small": {
+      "$value": "{responsive.size.components.sm}",
+      "$type": "dimension",
+      "$description": "Hauteur minimale d'une boîte multiligne, variante `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-textarea-min-height-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-textarea-min-height-small",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "padding-y": {
+      "$value": "{metrics.units.default}",
+      "$type": "dimension",
+      "$description": "Inset vertical d'une boîte multiligne.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-textarea-padding-y)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-textarea-padding-y",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "padding-y-small": {
+      "$value": "{metrics.units.md}",
+      "$type": "dimension",
+      "$description": "Inset vertical d'une boîte multiligne, variante `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-form-textarea-padding-y-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-form-textarea-padding-y-small",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "helper": {
+    "color": {
+      "$value": "{semantics.form.low.content.default}",
+      "$type": "color",
+      "$description": "Couleur de `ui-helper`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-helper-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-helper-color",
+          "component": "ui-helper",
+          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "descriptionSource": "derived",
+          "perInstance": true,
+          "note": "5 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du composant.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-helper-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-helper-font-family",
+          "component": "ui-helper",
+          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-helper`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-helper-font-size)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-helper-font-size",
+          "component": "ui-helper",
+          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-helper` (variante `small`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-helper-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-helper-font-size-small",
+          "component": "ui-helper",
+          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{metrics.units.xs}",
+      "$type": "dimension",
+      "$description": "Espacement icône ↔ message.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-helper-gap)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-helper-gap",
+          "component": "ui-helper",
+          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "weight": {
+      "$value": "{typography.weight.regular}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_WEIGHT",
+            "FONT_STYLE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-helper-weight)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-helper-weight",
+          "component": "ui-helper",
+          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "icon": {
+    "size-default": {
+      "$value": "{responsive.size.typography.icon.default}",
+      "$type": "dimension",
+      "$description": "Taille de `ui-icon` (variante `default`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-icon-size-default)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-icon-size-default",
+          "component": "ui-icon",
+          "entryPoint": "@4sh/ui-kit-react/ui-icon",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "size-lg": {
+      "$value": "{responsive.size.typography.icon.lg}",
+      "$type": "dimension",
+      "$description": "Taille de `ui-icon` (variante `lg`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-icon-size-lg)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-icon-size-lg",
+          "component": "ui-icon",
+          "entryPoint": "@4sh/ui-kit-react/ui-icon",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "size-md": {
+      "$value": "{responsive.size.typography.icon.md}",
+      "$type": "dimension",
+      "$description": "Taille de `ui-icon` (variante `md`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-icon-size-md)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-icon-size-md",
+          "component": "ui-icon",
+          "entryPoint": "@4sh/ui-kit-react/ui-icon",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "size-sm": {
+      "$value": "{responsive.size.typography.icon.sm}",
+      "$type": "dimension",
+      "$description": "Taille de `ui-icon` (variante `sm`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-icon-size-sm)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-icon-size-sm",
+          "component": "ui-icon",
+          "entryPoint": "@4sh/ui-kit-react/ui-icon",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "size-xl": {
+      "$value": "{responsive.size.typography.icon.xl}",
+      "$type": "dimension",
+      "$description": "Taille de `ui-icon` (variante `xl`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-icon-size-xl)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-icon-size-xl",
+          "component": "ui-icon",
+          "entryPoint": "@4sh/ui-kit-react/ui-icon",
+          "descriptionSource": "derived"
+        }
+      }
+    }
+  },
+  "image": {
+    "indicator": {
+      "background": {
+        "$value": "{primitives.black.50}",
+        "$type": "color",
+        "$description": "Voile posé sur l'image au survol de l'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-indicator-background)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-indicator-background",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color": {
+        "$value": "{primitives.white.base}",
+        "$type": "color",
+        "$description": "Couleur de l'indicateur d'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-indicator-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-indicator-color",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.lg}",
+        "$type": "dimension",
+        "$description": "Taille de l'indicateur d'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-indicator-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-indicator-font-size",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "placeholder": {
+      "color": {
+        "$value": "{semantics.global.text.muted}",
+        "$type": "color",
+        "$description": "Couleur de l'icône de la vignette de repli.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-placeholder-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-placeholder-color",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "min-height": {
+        "$value": "{metrics.units.xl}",
+        "$type": "dimension",
+        "$description": "Hauteur minimale de la vignette.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-placeholder-min-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-placeholder-min-height",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "min-width": {
+        "$value": "{metrics.units.xl}",
+        "$type": "dimension",
+        "$description": "Largeur minimale de la vignette, visible même sans dimension imposée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-placeholder-min-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-placeholder-min-width",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "radius": {
+        "$value": "{metrics.radius.default}",
+        "$type": "dimension",
+        "$description": "Rayon des coins de la vignette.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-placeholder-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-placeholder-radius",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface": {
+        "$value": "{semantics.global.background.muted}",
+        "$type": "color",
+        "$description": "Fond de la vignette de repli.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-placeholder-surface)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-placeholder-surface",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "preview-action": {
+      "color": {
+        "$value": "{primitives.white.base}",
+        "$type": "color",
+        "$description": "Couleur d'une action de l'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-action-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-action-color",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "opacity-disabled": {
+        "$value": "0.4",
+        "$type": "number",
+        "$description": "Opacité d'une action indisponible.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "OPACITY"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-action-opacity-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-action-opacity-disabled",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "radius": {
+        "$value": "{metrics.radius.full}",
+        "$type": "dimension",
+        "$description": "Rayon d'une action.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-action-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-action-radius",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "size": {
+        "$value": "36px",
+        "$type": "dimension",
+        "$description": "Côté de la cible tactile d'une action.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-action-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-action-size",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface-hover": {
+        "$value": "{primitives.white.20}",
+        "$type": "color",
+        "$description": "Fond d'une action au survol.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-action-surface-hover)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-action-surface-hover",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "preview-action-focus-ring": {
+      "color": {
+        "$value": "{semantics.global.border.focus}",
+        "$type": "color",
+        "$description": "Couleur de l'anneau de focus d'une action.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-action-focus-ring-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-action-focus-ring-color",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "preview": {
+      "focus-ring-width": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Épaisseur de l'anneau de focus des actions de l'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "STROKE_FLOAT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-focus-ring-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-focus-ring-width",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "gap": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Espace entre la barre d'actions et l'image.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-gap",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding": {
+        "$value": "{metrics.units.lg}",
+        "$type": "dimension",
+        "$description": "Retrait autour de l'image agrandie.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-padding)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-padding",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "preview-mask": {
+      "background": {
+        "$value": "{primitives.black.80}",
+        "$type": "color",
+        "$description": "Assombrissement du fond de l'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-mask-background)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-mask-background",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "preview-media": {
+      "max-height-rotated": {
+        "$value": "100cqw",
+        "$type": "string",
+        "$description": "Hauteur maximale de l'image après un quart de tour.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-media-max-height-rotated)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-media-max-height-rotated",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "max-width-rotated": {
+        "$value": "100cqh",
+        "$type": "string",
+        "$description": "Largeur maximale de l'image après un quart de tour.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-media-max-width-rotated)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-media-max-width-rotated",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "preview-toolbar": {
+      "background": {
+        "$value": "{primitives.black.50}",
+        "$type": "color",
+        "$description": "Fond de la barre d'actions.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-toolbar-background)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-toolbar-background",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "gap": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Espacement entre les actions.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-toolbar-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-toolbar-gap",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Retrait de la barre d'actions.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-toolbar-padding)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-toolbar-padding",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "radius": {
+        "$value": "{metrics.radius.full}",
+        "$type": "dimension",
+        "$description": "Rayon de la barre d'actions.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-preview-toolbar-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-preview-toolbar-radius",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "trigger-focus-ring": {
+      "color": {
+        "$value": "{semantics.global.border.focus}",
+        "$type": "color",
+        "$description": "Couleur de l'anneau de focus du déclencheur d'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-trigger-focus-ring-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-trigger-focus-ring-color",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "trigger": {
+      "focus-ring-width": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Épaisseur de l'anneau de focus du déclencheur d'aperçu.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "STROKE_FLOAT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-trigger-focus-ring-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-trigger-focus-ring-width",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "radius": {
+        "$value": "0",
+        "$type": "number",
+        "$description": "Rayon du déclencheur d'aperçu, que le voile suit.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-image-trigger-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-image-trigger-radius",
+            "component": "ui-image",
+            "entryPoint": "@4sh/ui-kit-react/ui-image",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    }
+  },
+  "input-date": {
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police du contrôle, variante `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-date-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-date-font-size-small",
+          "component": "ui-input-date",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-date",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "input": {
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique de l'unité.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-font-family",
+          "component": "ui-input",
+          "entryPoint": "@4sh/ui-kit-react/ui-input",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police du contrôle et de l'unité, variante `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-font-size-small",
+          "component": "ui-input",
+          "entryPoint": "@4sh/ui-kit-react/ui-input",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "unit": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.default}",
+        "$type": "dimension",
+        "$description": "Taille de police de l'unité affichée dans le champ.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-unit-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-unit-font-size",
+            "component": "ui-input",
+            "entryPoint": "@4sh/ui-kit-react/ui-input",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    }
+  },
+  "input-group": {
+    "addon": {
+      "color": {
+        "$value": "{semantics.global.text.muted}",
+        "$type": "color",
+        "$description": "Couleur du texte d'une cellule.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-color",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.default}",
+        "$type": "dimension",
+        "$description": "Taille du texte d'une cellule.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-font-size",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille du texte d'une cellule, variante `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-font-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-font-size-small",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espace entre deux contenus d'une cellule.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-gap",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "height": {
+        "$value": "{responsive.size.components.default}",
+        "$type": "dimension",
+        "$description": "Hauteur d'une cellule, alignée sur la boîte de champ.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-height",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "height-small": {
+        "$value": "{responsive.size.components.sm}",
+        "$type": "dimension",
+        "$description": "Hauteur d'une cellule, variante `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-height-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-height-small",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding-x": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Inset horizontal du contenu d'une cellule.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-padding-x",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke": {
+        "$value": "{semantics.form.high.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur de bordure d'une cellule.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-stroke)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-stroke",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-width": {
+        "$value": "{metrics.stroke.default}",
+        "$type": "dimension",
+        "$description": "Épaisseur de bordure d'une cellule.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "STROKE_FLOAT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-stroke-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-stroke-width",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface": {
+        "$value": "{semantics.global.background.muted}",
+        "$type": "color",
+        "$description": "Fond d'une cellule.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-group-addon-surface)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-group-addon-surface",
+            "component": "ui-input-group",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du composant.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-group-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-group-font-family",
+          "component": "ui-input-group",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "overlap": {
+      "$value": "{metrics.stroke.default}",
+      "$type": "dimension",
+      "$description": "Recouvrement de deux items voisins, égal à la largeur de bordure pour que le trait partagé ne double pas.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-group-overlap)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-group-overlap",
+          "component": "ui-input-group",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "radius": {
+      "$value": "{metrics.radius.sm}",
+      "$type": "dimension",
+      "$description": "Rayon des coins extérieurs du groupe.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-group-radius)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-group-radius",
+          "component": "ui-input-group",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "input-mask": {
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police du contrôle, variante `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-mask-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-mask-font-size-small",
+          "component": "ui-input-mask",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-mask",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "input-number": {
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique de l'unité.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-number-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-number-font-family",
+          "component": "ui-input-number",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-number",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille du texte (saisie et unité) en variante `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-number-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-number-font-size-small",
+          "component": "ui-input-number",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-number",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "spinner": {
+      "width": {
+        "$value": "30px",
+        "$type": "dimension",
+        "$description": "Largeur de la colonne du spinner (mixin partagé `utils.field-spinner($btn, $width)`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-number-spinner-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-number-spinner-width",
+            "component": "ui-input-number",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-number",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "unit": {
+      "font-size": {
+        "$value": "{responsive.size.typography.text.default}",
+        "$type": "dimension",
+        "$description": "Taille du texte de l'unité.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-number-unit-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-number-unit-font-size",
+            "component": "ui-input-number",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-number",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    }
+  },
+  "input-otp": {
+    "cell": {
+      "color": {
+        "$value": "{semantics.form.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du caractère saisi.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-color",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-disabled": {
+        "$value": "{semantics.form.high.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur du caractère d'une case désactivée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-color-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-color-disabled",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "size": {
+        "$value": "{responsive.size.components.default}",
+        "$type": "dimension",
+        "$description": "Taille de `ui-input-otp`, cell.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-size",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "size-large": {
+        "$value": "{responsive.size.components.xl}",
+        "$type": "dimension",
+        "$description": "Taille de `ui-input-otp`, cell (variante `large`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-size-large)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-size-large",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "size-small": {
+        "$value": "{responsive.size.components.sm}",
+        "$type": "dimension",
+        "$description": "Taille de `ui-input-otp`, cell (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-size-small",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "stroke": {
+        "$value": "{semantics.form.high.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur de bordure d'une case.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-stroke)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-stroke",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-disabled": {
+        "$value": "{semantics.form.high.stroke.disabled}",
+        "$type": "color",
+        "$description": "Couleur de bordure d'une case désactivée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-stroke-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-stroke-disabled",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-focus": {
+        "$value": "{semantics.form.high.stroke.focused}",
+        "$type": "color",
+        "$description": "Couleur de bordure au focus ; elle teinte aussi l'anneau.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-stroke-focus)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-stroke-focus",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-focus-invalid": {
+        "$value": "{semantics.form.error.stroke.focused}",
+        "$type": "color",
+        "$description": "Couleur de bordure d'une case en erreur, au focus.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-stroke-focus-invalid)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-stroke-focus-invalid",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-hover": {
+        "$value": "{semantics.form.high.stroke.hover}",
+        "$type": "color",
+        "$description": "Couleur de bordure au survol.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-stroke-hover)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-stroke-hover",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-hover-invalid": {
+        "$value": "{semantics.form.error.stroke.hover}",
+        "$type": "color",
+        "$description": "Couleur de bordure d'une case en erreur, au survol.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-stroke-hover-invalid)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-stroke-hover-invalid",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "stroke-invalid": {
+        "$value": "{semantics.form.error.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur de bordure d'une case en erreur.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-stroke-invalid)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-stroke-invalid",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface": {
+        "$value": "{semantics.form.high.surface.default}",
+        "$type": "color",
+        "$description": "Fond d'une case.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-surface)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-surface",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface-disabled": {
+        "$value": "{semantics.form.high.surface.disabled}",
+        "$type": "color",
+        "$description": "Fond d'une case désactivée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-otp-cell-surface-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-otp-cell-surface-disabled",
+            "component": "ui-input-otp",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-textarea-min-height",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
-          "descriptionSource": "scss"
         }
       }
     },
-    "min-height-small": {
-      "$value": "{responsive.size.components.sm}",
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
       "$type": "dimension",
-      "$description": "Hauteur minimale d'une boîte multiligne, variante `small`.",
+      "$description": "Largeur de l'anneau de focus.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-form-textarea-min-height-small)"
+            "WEB": "var(--ui-input-otp-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-form-textarea-min-height-small",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-input-otp-focus-ring-width",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "helper": {
-    "color": {
-      "$value": "{semantics.form.low.content.default}",
-      "$type": "color",
-      "$description": "Couleur de `ui-helper`.",
+    },
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du composant.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "STRING",
           "scopes": [
-            "ALL_FILLS"
+            "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-helper-color)"
+            "WEB": "var(--ui-input-otp-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-helper-color",
-          "component": "ui-helper",
-          "entryPoint": "@4sh/ui-kit-react/ui-helper",
-          "descriptionSource": "derived",
-          "perInstance": true,
-          "note": "5 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+          "cssVar": "--ui-input-otp-font-family",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "descriptionSource": "scss"
         }
       }
     },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du composant.",
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-input-otp`.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_FAMILY"
+            "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-helper-font-family)"
+            "WEB": "var(--ui-input-otp-font-size)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-helper-font-family",
-          "component": "ui-helper",
-          "entryPoint": "@4sh/ui-kit-react/ui-helper",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-input-otp-font-size",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "descriptionSource": "derived"
         }
       }
     },
-    "font-size": {
-      "$value": "{responsive.size.typography.text.default}",
+    "font-size-large": {
+      "$value": "{responsive.size.typography.text.lg}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-helper`.",
+      "$description": "Taille de police de `ui-input-otp` (variante `large`).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -12169,13 +17146,13 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-helper-font-size)"
+            "WEB": "var(--ui-input-otp-font-size-large)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-helper-font-size",
-          "component": "ui-helper",
-          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "cssVar": "--ui-input-otp-font-size-large",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
           "descriptionSource": "derived"
         }
       }
@@ -12183,7 +17160,7 @@
     "font-size-small": {
       "$value": "{responsive.size.typography.text.md}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-helper` (variante `small`).",
+      "$description": "Taille de police de `ui-input-otp` (variante `small`).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -12191,21 +17168,21 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-helper-font-size-small)"
+            "WEB": "var(--ui-input-otp-font-size-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-helper-font-size-small",
-          "component": "ui-helper",
-          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "cssVar": "--ui-input-otp-font-size-small",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
           "descriptionSource": "derived"
         }
       }
     },
     "gap": {
-      "$value": "{metrics.units.xs}",
+      "$value": "{metrics.units.sm}",
       "$type": "dimension",
-      "$description": "Espacement icône ↔ message.",
+      "$description": "Espace entre les cases.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -12213,158 +17190,180 @@
             "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-helper-gap)"
+            "WEB": "var(--ui-input-otp-gap)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-helper-gap",
-          "component": "ui-helper",
-          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "cssVar": "--ui-input-otp-gap",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
           "descriptionSource": "scss"
         }
       }
     },
-    "weight": {
-      "$value": "{typography.weight.regular}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
+    "radius": {
+      "$value": "{metrics.radius.sm}",
+      "$type": "dimension",
+      "$description": "Rayon des cases, aligné sur `ui-field`.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
+            "CORNER_RADIUS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-helper-weight)"
+            "WEB": "var(--ui-input-otp-radius)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-helper-weight",
-          "component": "ui-helper",
-          "entryPoint": "@4sh/ui-kit-react/ui-helper",
+          "cssVar": "--ui-input-otp-radius",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "icon": {
-    "size-default": {
-      "$value": "{responsive.size.typography.icon.default}",
+    },
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
       "$type": "dimension",
-      "$description": "Taille de `ui-icon` (variante `default`).",
+      "$description": "Épaisseur de la bordure.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-icon-size-default)"
+            "WEB": "var(--ui-input-otp-stroke-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-icon-size-default",
-          "component": "ui-icon",
-          "entryPoint": "@4sh/ui-kit-react/ui-icon",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-input-otp-stroke-width",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "descriptionSource": "scss"
         }
       }
     },
-    "size-lg": {
-      "$value": "{responsive.size.typography.icon.lg}",
-      "$type": "dimension",
-      "$description": "Taille de `ui-icon` (variante `lg`).",
+    "weight": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "FONT_WEIGHT",
+            "FONT_STYLE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-icon-size-lg)"
+            "WEB": "var(--ui-input-otp-weight)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-icon-size-lg",
-          "component": "ui-icon",
-          "entryPoint": "@4sh/ui-kit-react/ui-icon",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-input-otp-weight",
+          "component": "ui-input-otp",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "input-tags": {
+    "empty": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur du message « aucun résultat ».",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-empty-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-empty-color",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
         }
       }
     },
-    "size-md": {
-      "$value": "{responsive.size.typography.icon.md}",
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
       "$type": "dimension",
-      "$description": "Taille de `ui-icon` (variante `md`).",
+      "$description": "Épaisseur de l'anneau de focus d'un tag.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-icon-size-md)"
+            "WEB": "var(--ui-input-tags-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-icon-size-md",
-          "component": "ui-icon",
-          "entryPoint": "@4sh/ui-kit-react/ui-icon",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-input-tags-focus-ring-width",
+          "component": "ui-input-tags",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+          "descriptionSource": "scss"
         }
       }
     },
-    "size-sm": {
-      "$value": "{responsive.size.typography.icon.sm}",
-      "$type": "dimension",
-      "$description": "Taille de `ui-icon` (variante `sm`).",
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du composant.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-icon-size-sm)"
+            "WEB": "var(--ui-input-tags-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-icon-size-sm",
-          "component": "ui-icon",
-          "entryPoint": "@4sh/ui-kit-react/ui-icon",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-input-tags-font-family",
+          "component": "ui-input-tags",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+          "descriptionSource": "scss"
         }
       }
     },
-    "size-xl": {
-      "$value": "{responsive.size.typography.icon.xl}",
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
       "$type": "dimension",
-      "$description": "Taille de `ui-icon` (variante `xl`).",
+      "$description": "Taille de police de `ui-input-tags`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-icon-size-xl)"
+            "WEB": "var(--ui-input-tags-font-size)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-icon-size-xl",
-          "component": "ui-icon",
-          "entryPoint": "@4sh/ui-kit-react/ui-icon",
+          "cssVar": "--ui-input-tags-font-size",
+          "component": "ui-input-tags",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
           "descriptionSource": "derived"
         }
       }
-    }
-  },
-  "input-date": {
+    },
     "font-size-small": {
       "$value": "{responsive.size.typography.text.md}",
       "$type": "dimension",
-      "$description": "Taille de police du contrôle, variante `small`.",
+      "$description": "Taille de police de `ui-input-tags` (variante `small`).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -12372,182 +17371,476 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-date-font-size-small)"
+            "WEB": "var(--ui-input-tags-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-tags-font-size-small",
+          "component": "ui-input-tags",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "group": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur d'un en-tête de groupe.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-group-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-group-color",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "font-size": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille du texte d'un en-tête de groupe.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "FONT_SIZE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-group-font-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-group-font-size",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "height": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Hauteur d'un en-tête de groupe.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-group-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-group-height",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "input": {
+      "min-width": {
+        "$value": "80px",
+        "$type": "dimension",
+        "$description": "Largeur minimale de la zone de saisie restante.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-input-min-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-input-min-width",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "option-check": {
+      "color": {
+        "$value": "{semantics.form.high.content.checked}",
+        "$type": "color",
+        "$description": "Couleur de la coche d'une suggestion déjà saisie.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-check-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-check-color",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "option": {
+      "color": {
+        "$value": "{semantics.form.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du texte d'une suggestion.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-color",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-disabled": {
+        "$value": "{semantics.form.high.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur du texte d'une suggestion désactivée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-color-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-color-disabled",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-selected": {
+        "$value": "{semantics.form.high.content.checked}",
+        "$type": "color",
+        "$description": "Couleur du texte d'une suggestion déjà saisie.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-color-selected)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-color-selected",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement entre le libellé et la coche d'une option.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-gap",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "height": {
+        "$value": "40px",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-input-tags`, option.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-height",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-date-font-size-small",
-          "component": "ui-input-date",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-date",
-          "descriptionSource": "scss"
         }
-      }
-    }
-  },
-  "input": {
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique de l'unité.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_FAMILY"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-font-family)"
+      },
+      "height-small": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-input-tags`, option (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-height-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-height-small",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-font-family",
-          "component": "ui-input",
-          "entryPoint": "@4sh/ui-kit-react/ui-input",
-          "descriptionSource": "scss"
         }
-      }
-    },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
-      "$type": "dimension",
-      "$description": "Taille de police du contrôle et de l'unité, variante `small`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-font-size-small)"
+      },
+      "padding-x": {
+        "$value": "{metrics.units.default}",
+        "$type": "dimension",
+        "$description": "Inset horizontal de `ui-input-tags`, option.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-padding-x",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-font-size-small",
-          "component": "ui-input",
-          "entryPoint": "@4sh/ui-kit-react/ui-input",
-          "descriptionSource": "scss"
         }
-      }
-    },
-    "unit": {
-      "font-size": {
-        "$value": "{responsive.size.typography.text.default}",
+      },
+      "padding-x-small": {
+        "$value": "{metrics.units.md}",
         "$type": "dimension",
-        "$description": "Taille de police de l'unité affichée dans le champ.",
+        "$description": "Inset horizontal de `ui-input-tags`, option (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_SIZE"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-unit-font-size)"
+              "WEB": "var(--ui-input-tags-option-padding-x-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-unit-font-size",
-            "component": "ui-input",
-            "entryPoint": "@4sh/ui-kit-react/ui-input",
+            "cssVar": "--ui-input-tags-option-padding-x-small",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "radius": {
+        "$value": "{metrics.radius.sm}",
+        "$type": "dimension",
+        "$description": "Rayon d'une option.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-option-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-option-radius",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
-      }
-    }
-  },
-  "input-group": {
-    "addon": {
-      "color": {
-        "$value": "{semantics.global.text.muted}",
+      },
+      "surface-hover": {
+        "$value": "{semantics.global.background.default-hover}",
         "$type": "color",
-        "$description": "Couleur du texte d'une cellule.",
+        "$description": "Fond d'une suggestion survolée ou active au clavier.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-color)"
+              "WEB": "var(--ui-input-tags-option-surface-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-color",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "cssVar": "--ui-input-tags-option-surface-hover",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
-      },
-      "font-size": {
-        "$value": "{responsive.size.typography.text.default}",
+      }
+    },
+    "panel": {
+      "gap": {
+        "$value": "{metrics.units.xs}",
         "$type": "dimension",
-        "$description": "Taille du texte d'une cellule.",
+        "$description": "Espacement entre les groupes du panneau.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_SIZE"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-font-size)"
+              "WEB": "var(--ui-input-tags-panel-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-font-size",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "cssVar": "--ui-input-tags-panel-gap",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
       },
-      "font-size-small": {
-        "$value": "{responsive.size.typography.text.md}",
+      "padding": {
+        "$value": "{metrics.units.xs}",
         "$type": "dimension",
-        "$description": "Taille du texte d'une cellule, variante `small`.",
+        "$description": "Inset du panneau de suggestions.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_SIZE"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-font-size-small)"
+              "WEB": "var(--ui-input-tags-panel-padding)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-font-size-small",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "cssVar": "--ui-input-tags-panel-padding",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
       },
-      "gap": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Espace entre deux contenus d'une cellule.",
+      "stroke": {
+        "$value": "{semantics.form.high.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur de bordure du panneau de suggestions.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-panel-stroke)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-panel-stroke",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "surface": {
+        "$value": "{semantics.form.high.surface.default}",
+        "$type": "color",
+        "$description": "Fond du panneau de suggestions.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-input-tags-panel-surface)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-input-tags-panel-surface",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "remove": {
+      "opacity": {
+        "$value": "0.7",
+        "$type": "number",
+        "$description": "Opacité de la croix de retrait au repos.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "OPACITY"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-gap)"
+              "WEB": "var(--ui-input-tags-remove-opacity)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-gap",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "cssVar": "--ui-input-tags-remove-opacity",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
-      },
-      "height": {
-        "$value": "{responsive.size.components.default}",
+      }
+    },
+    "scroller": {
+      "max-height": {
+        "$value": "200px",
         "$type": "dimension",
-        "$description": "Hauteur d'une cellule, alignée sur la boîte de champ.",
+        "$description": "Hauteur maximale de `ui-input-tags`, scroller.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -12555,21 +17848,21 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-height)"
+              "WEB": "var(--ui-input-tags-scroller-max-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-height",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-input-tags-scroller-max-height",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "derived"
           }
         }
       },
-      "height-small": {
-        "$value": "{responsive.size.components.sm}",
+      "max-height-small": {
+        "$value": "180px",
         "$type": "dimension",
-        "$description": "Hauteur d'une cellule, variante `small`.",
+        "$description": "Hauteur maximale de `ui-input-tags`, scroller (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -12577,248 +17870,111 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-height-small)"
+              "WEB": "var(--ui-input-tags-scroller-max-height-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-height-small",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-input-tags-scroller-max-height-small",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "derived"
           }
         }
-      },
-      "padding-x": {
-        "$value": "{metrics.units.md}",
-        "$type": "dimension",
-        "$description": "Inset horizontal du contenu d'une cellule.",
+      }
+    },
+    "tag": {
+      "color": {
+        "$value": "{semantics.form.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un tag rendu par `renderItem`.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-padding-x)"
+              "WEB": "var(--ui-input-tags-tag-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-padding-x",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "cssVar": "--ui-input-tags-tag-color",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
       },
-      "stroke": {
-        "$value": "{semantics.form.high.stroke.default}",
-        "$type": "color",
-        "$description": "Couleur de bordure d'une cellule.",
+      "font-size": {
+        "$value": "{responsive.size.typography.text.md}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-input-tags`, tag.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "STROKE_COLOR"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-stroke)"
+              "WEB": "var(--ui-input-tags-tag-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-stroke",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-input-tags-tag-font-size",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "derived"
           }
         }
       },
-      "stroke-width": {
-        "$value": "{metrics.stroke.default}",
+      "gap": {
+        "$value": "{metrics.units.xs}",
         "$type": "dimension",
-        "$description": "Épaisseur de bordure d'une cellule.",
+        "$description": "Espacement entre les tags saisis.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "STROKE_FLOAT"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-stroke-width)"
+              "WEB": "var(--ui-input-tags-tag-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-stroke-width",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
+            "cssVar": "--ui-input-tags-tag-gap",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.global.background.muted}",
-        "$type": "color",
-        "$description": "Fond d'une cellule.",
+      "gap-custom": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Espacement interne d'un tag rendu par `renderTag`.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-group-addon-surface)"
+              "WEB": "var(--ui-input-tags-tag-gap-custom)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-group-addon-surface",
-            "component": "ui-input-group",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-group",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du composant.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_FAMILY"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-group-font-family)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-group-font-family",
-          "component": "ui-input-group",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-group",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "overlap": {
-      "$value": "{metrics.stroke.default}",
-      "$type": "dimension",
-      "$description": "Recouvrement de deux items voisins, égal à la largeur de bordure pour que le trait partagé ne double pas.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-group-overlap)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-group-overlap",
-          "component": "ui-input-group",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-group",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "radius": {
-      "$value": "{metrics.radius.sm}",
-      "$type": "dimension",
-      "$description": "Rayon des coins extérieurs du groupe.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "CORNER_RADIUS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-group-radius)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-group-radius",
-          "component": "ui-input-group",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-group",
-          "descriptionSource": "scss"
-        }
-      }
-    }
-  },
-  "input-mask": {
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
-      "$type": "dimension",
-      "$description": "Taille de police du contrôle, variante `small`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-mask-font-size-small)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-mask-font-size-small",
-          "component": "ui-input-mask",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-mask",
-          "descriptionSource": "scss"
-        }
-      }
-    }
-  },
-  "input-number": {
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique de l'unité.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_FAMILY"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-number-font-family)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-number-font-family",
-          "component": "ui-input-number",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-number",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
-      "$type": "dimension",
-      "$description": "Taille du texte (saisie et unité) en variante `small`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-number-font-size-small)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-number-font-size-small",
-          "component": "ui-input-number",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-number",
-          "descriptionSource": "scss"
+            "cssVar": "--ui-input-tags-tag-gap-custom",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "scss"
+          }
         }
-      }
-    },
-    "spinner": {
-      "width": {
-        "$value": "30px",
+      },
+      "height": {
+        "$value": "24px",
         "$type": "dimension",
-        "$description": "Largeur de la colonne du spinner (mixin partagé `utils.field-spinner($btn, $width)`).",
+        "$description": "Hauteur de `ui-input-tags`, tag.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -12826,49 +17982,45 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-number-spinner-width)"
+              "WEB": "var(--ui-input-tags-tag-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-number-spinner-width",
-            "component": "ui-input-number",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-number",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-input-tags-tag-height",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "descriptionSource": "derived"
           }
         }
-      }
-    },
-    "unit": {
-      "font-size": {
-        "$value": "{responsive.size.typography.text.default}",
+      },
+      "radius": {
+        "$value": "{metrics.radius.full}",
         "$type": "dimension",
-        "$description": "Taille du texte de l'unité.",
+        "$description": "Rayon d'un tag.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_SIZE"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-number-unit-font-size)"
+              "WEB": "var(--ui-input-tags-tag-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-number-unit-font-size",
-            "component": "ui-input-number",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-number",
+            "cssVar": "--ui-input-tags-tag-radius",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
       }
-    }
-  },
-  "input-otp": {
-    "cell": {
+    },
+    "tag-focus-ring": {
       "color": {
-        "$value": "{semantics.form.high.content.default}",
+        "$value": "{semantics.form.high.stroke.focused}",
         "$type": "color",
-        "$description": "Couleur du caractère saisi.",
+        "$description": "Teinte de l'anneau de focus d'un tag.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -12876,21 +18028,48 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-color)"
+              "WEB": "var(--ui-input-tags-tag-focus-ring-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-color",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-input-tags-tag-focus-ring-color",
+            "component": "ui-input-tags",
+            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
             "descriptionSource": "scss"
           }
         }
-      },
-      "color-disabled": {
-        "$value": "{semantics.form.high.content.disabled}",
+      }
+    },
+    "weight": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_WEIGHT",
+            "FONT_STYLE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-input-tags-weight)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-input-tags-weight",
+          "component": "ui-input-tags",
+          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "knob": {
+    "focus-ring": {
+      "color": {
+        "$value": "{semantics.actions.high.stroke.focused}",
         "$type": "color",
-        "$description": "Couleur du caractère d'une case désactivée.",
+        "$description": "Couleur de l'anneau de focus.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -12898,302 +18077,487 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-color-disabled)"
+              "WEB": "var(--ui-knob-focus-ring-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-color-disabled",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-focus-ring-color",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
       },
-      "size": {
-        "$value": "{responsive.size.components.default}",
-        "$type": "dimension",
-        "$description": "Taille de `ui-input-otp`, cell.",
+      "color-invalid": {
+        "$value": "{semantics.form.error.stroke.focused}",
+        "$type": "color",
+        "$description": "Couleur de l'anneau de focus en erreur.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-size)"
+              "WEB": "var(--ui-knob-focus-ring-color-invalid)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-size",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-knob-focus-ring-color-invalid",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
+            "descriptionSource": "scss"
           }
         }
-      },
-      "size-large": {
-        "$value": "{responsive.size.components.xl}",
-        "$type": "dimension",
-        "$description": "Taille de `ui-input-otp`, cell (variante `large`).",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-size-large)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-size-large",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
-            "descriptionSource": "derived"
+      }
+    },
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-focus-ring-width)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-focus-ring-width",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
         }
-      },
-      "size-small": {
-        "$value": "{responsive.size.components.sm}",
-        "$type": "dimension",
-        "$description": "Taille de `ui-input-otp`, cell (variante `small`).",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-size-small)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-size-small",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
-            "descriptionSource": "derived"
+      }
+    },
+    "font-size": {
+      "$value": "{responsive.size.typography.title.md}",
+      "$type": "dimension",
+      "$description": "Taille de la valeur centrale.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-font-size)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-font-size",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size-large": {
+      "$value": "{responsive.size.typography.title.default}",
+      "$type": "dimension",
+      "$description": "Taille de la valeur centrale, taille `large`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-font-size-large)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-font-size-large",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.lg}",
+      "$type": "dimension",
+      "$description": "Taille de la valeur centrale, taille `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-font-size-small",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "radius": {
+      "$value": "{metrics.radius.full}",
+      "$type": "dimension",
+      "$description": "Rayon de la zone focalisable.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-radius)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-radius",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
         }
-      },
-      "stroke": {
-        "$value": "{semantics.form.high.stroke.default}",
+      }
+    },
+    "range": {
+      "color": {
+        "$value": "{semantics.global.background.muted}",
         "$type": "color",
-        "$description": "Couleur de bordure d'une case.",
+        "$description": "Couleur de la piste.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-stroke)"
+              "WEB": "var(--ui-knob-range-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-stroke",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-range-color",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
-      },
-      "stroke-disabled": {
-        "$value": "{semantics.form.high.stroke.disabled}",
+      }
+    },
+    "size": {
+      "$value": "100px",
+      "$type": "dimension",
+      "$description": "Diamètre du cadran.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-size)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-size",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "size-large": {
+      "$value": "140px",
+      "$type": "dimension",
+      "$description": "Diamètre du cadran, taille `large`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-size-large)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-size-large",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "size-small": {
+      "$value": "70px",
+      "$type": "dimension",
+      "$description": "Diamètre du cadran, taille `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-size-small",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "text": {
+      "color": {
+        "$value": "{semantics.global.text.default}",
         "$type": "color",
-        "$description": "Couleur de bordure d'une case désactivée.",
+        "$description": "Couleur de la valeur centrale.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "TEXT_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-stroke-disabled)"
+              "WEB": "var(--ui-knob-text-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-stroke-disabled",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-text-color",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
       },
-      "stroke-focus": {
-        "$value": "{semantics.form.high.stroke.focused}",
+      "color-disabled": {
+        "$value": "{semantics.global.text.muted}",
         "$type": "color",
-        "$description": "Couleur de bordure au focus ; elle teinte aussi l'anneau.",
+        "$description": "Couleur de la valeur centrale, cadran désactivé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "TEXT_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-stroke-focus)"
+              "WEB": "var(--ui-knob-text-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-stroke-focus",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-text-color-disabled",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
-      },
-      "stroke-focus-invalid": {
-        "$value": "{semantics.form.error.stroke.focused}",
+      }
+    },
+    "value": {
+      "color": {
+        "$value": "{semantics.actions.high.surface.default}",
         "$type": "color",
-        "$description": "Couleur de bordure d'une case en erreur, au focus.",
+        "$description": "Couleur de l'arc rempli.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-stroke-focus-invalid)"
+              "WEB": "var(--ui-knob-value-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-stroke-focus-invalid",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-value-color",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
       },
-      "stroke-hover": {
-        "$value": "{semantics.form.high.stroke.hover}",
+      "color-disabled": {
+        "$value": "{semantics.actions.high.surface.disabled}",
         "$type": "color",
-        "$description": "Couleur de bordure au survol.",
+        "$description": "Couleur de l'arc rempli, cadran désactivé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-stroke-hover)"
+              "WEB": "var(--ui-knob-value-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-stroke-hover",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-value-color-disabled",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
       },
-      "stroke-hover-invalid": {
-        "$value": "{semantics.form.error.stroke.hover}",
+      "color-hover": {
+        "$value": "{semantics.actions.high.surface.hover}",
         "$type": "color",
-        "$description": "Couleur de bordure d'une case en erreur, au survol.",
+        "$description": "Couleur de l'arc rempli au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-stroke-hover-invalid)"
+              "WEB": "var(--ui-knob-value-color-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-stroke-hover-invalid",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-value-color-hover",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
       },
-      "stroke-invalid": {
-        "$value": "{semantics.form.error.stroke.default}",
+      "color-hover-invalid": {
+        "$value": "{semantics.form.error.content.hover}",
         "$type": "color",
-        "$description": "Couleur de bordure d'une case en erreur.",
+        "$description": "Couleur de l'arc rempli en erreur, au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-stroke-invalid)"
+              "WEB": "var(--ui-knob-value-color-hover-invalid)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-stroke-invalid",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-value-color-hover-invalid",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.form.high.surface.default}",
+      "color-invalid": {
+        "$value": "{semantics.form.error.content.default}",
         "$type": "color",
-        "$description": "Fond d'une case.",
+        "$description": "Couleur de l'arc rempli en erreur.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-surface)"
+              "WEB": "var(--ui-knob-value-color-invalid)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-surface",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-value-color-invalid",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-disabled": {
-        "$value": "{semantics.form.high.surface.disabled}",
+      "color-pressed": {
+        "$value": "{semantics.actions.high.surface.pressed}",
         "$type": "color",
-        "$description": "Fond d'une case désactivée.",
+        "$description": "Couleur de l'arc rempli pendant le glissement.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-otp-cell-surface-disabled)"
+              "WEB": "var(--ui-knob-value-color-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-otp-cell-surface-disabled",
-            "component": "ui-input-otp",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+            "cssVar": "--ui-knob-value-color-pressed",
+            "component": "ui-knob",
+            "entryPoint": "@4sh/ui-kit-react/ui-knob",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Largeur de l'anneau de focus.",
+    "weight": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_WEIGHT",
+            "FONT_STYLE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-knob-weight)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-knob-weight",
+          "component": "ui-knob",
+          "entryPoint": "@4sh/ui-kit-react/ui-knob",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "label": {
+    "color": {
+      "$value": "var(--form-high-content-default, var(--global-text-default))",
+      "$type": "color",
+      "$description": "Couleur du texte, pilotable par un composant de formulaire parent (hover, disabled…).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-label-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-label-color",
+          "component": "ui-label",
+          "entryPoint": "@4sh/ui-kit-react/ui-label",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+        }
+      }
+    },
+    "color-disabled": {
+      "$value": "{semantics.form.high.content.disabled}",
+      "$type": "color",
+      "$description": "Couleur du texte désactivé, lue aussi par les contrôles de formulaire qui peignent leur propre libellé.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "STROKE_FLOAT"
+            "ALL_FILLS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-focus-ring-width)"
+            "WEB": "var(--ui-label-color-disabled)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-focus-ring-width",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "cssVar": "--ui-label-color-disabled",
+          "component": "ui-label",
+          "entryPoint": "@4sh/ui-kit-react/ui-label",
           "descriptionSource": "scss"
         }
       }
@@ -13209,21 +18573,21 @@
             "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-font-family)"
+            "WEB": "var(--ui-label-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-font-family",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "cssVar": "--ui-label-font-family",
+          "component": "ui-label",
+          "entryPoint": "@4sh/ui-kit-react/ui-label",
           "descriptionSource": "scss"
         }
       }
     },
     "font-size": {
-      "$value": "{responsive.size.typography.text.default}",
+      "$value": "{responsive.size.typography.text.md}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-input-otp`.",
+      "$description": "Taille de police du libellé.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -13231,21 +18595,21 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-font-size)"
+            "WEB": "var(--ui-label-font-size)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-font-size",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-label-font-size",
+          "component": "ui-label",
+          "entryPoint": "@4sh/ui-kit-react/ui-label",
+          "descriptionSource": "scss"
         }
       }
     },
-    "font-size-large": {
-      "$value": "{responsive.size.typography.text.lg}",
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.sm}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-input-otp` (variante `large`).",
+      "$description": "Taille de police du libellé, variante `small`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -13253,158 +18617,202 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-font-size-large)"
+            "WEB": "var(--ui-label-font-size-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-font-size-large",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-label-font-size-small",
+          "component": "ui-label",
+          "entryPoint": "@4sh/ui-kit-react/ui-label",
+          "descriptionSource": "scss"
         }
       }
     },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
+    "gap": {
+      "$value": "{metrics.units.xs}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-input-otp` (variante `small`).",
+      "$description": "Espace entre le texte et son marqueur.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_SIZE"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-font-size-small)"
+            "WEB": "var(--ui-label-gap)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-font-size-small",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-label-gap",
+          "component": "ui-label",
+          "entryPoint": "@4sh/ui-kit-react/ui-label",
+          "descriptionSource": "scss"
         }
       }
     },
-    "gap": {
-      "$value": "{metrics.units.sm}",
-      "$type": "dimension",
-      "$description": "Espace entre les cases.",
+    "marker": {
+      "color": {
+        "$value": "{semantics.informative.errorLow.content.default}",
+        "$type": "color",
+        "$description": "Couleur du marqueur « requis ».",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-label-marker-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-label-marker-color",
+            "component": "ui-label",
+            "entryPoint": "@4sh/ui-kit-react/ui-label",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "weight": {
+      "$value": "{typography.weight.regular}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "GAP"
+            "FONT_WEIGHT",
+            "FONT_STYLE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-gap)"
+            "WEB": "var(--ui-label-weight)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-gap",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "cssVar": "--ui-label-weight",
+          "component": "ui-label",
+          "entryPoint": "@4sh/ui-kit-react/ui-label",
           "descriptionSource": "scss"
         }
       }
-    },
-    "radius": {
-      "$value": "{metrics.radius.sm}",
-      "$type": "dimension",
-      "$description": "Rayon des cases, aligné sur `ui-field`.",
+    }
+  },
+  "link": {
+    "color": {
+      "$value": "{semantics.actions.low.content.default}",
+      "$type": "color",
+      "$description": "Couleur du lien.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "CORNER_RADIUS"
+            "ALL_FILLS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-radius)"
+            "WEB": "var(--ui-link-color)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-radius",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "cssVar": "--ui-link-color",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
           "descriptionSource": "scss"
         }
       }
     },
-    "stroke-width": {
-      "$value": "{metrics.stroke.default}",
-      "$type": "dimension",
-      "$description": "Épaisseur de la bordure.",
+    "color-disabled": {
+      "$value": "{semantics.actions.low.content.disabled}",
+      "$type": "color",
+      "$description": "Couleur du lien désactivé (soulignement compris).",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "STROKE_FLOAT"
+            "ALL_FILLS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-stroke-width)"
+            "WEB": "var(--ui-link-color-disabled)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-stroke-width",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "cssVar": "--ui-link-color-disabled",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
           "descriptionSource": "scss"
         }
       }
     },
-    "weight": {
-      "$value": "{typography.weight.bold}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
+    "color-focus": {
+      "$value": "{semantics.actions.low.content.focused}",
+      "$type": "color",
+      "$description": "Couleur du lien au focus clavier ; elle teinte aussi l'anneau.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "COLOR",
           "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
+            "ALL_FILLS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-otp-weight)"
+            "WEB": "var(--ui-link-color-focus)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-otp-weight",
-          "component": "ui-input-otp",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-otp",
+          "cssVar": "--ui-link-color-focus",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "input-tags": {
-    "empty": {
-      "color": {
-        "$value": "{semantics.form.low.content.default}",
-        "$type": "color",
-        "$description": "Couleur du message « aucun résultat ».",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-empty-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-empty-color",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+    },
+    "color-hover": {
+      "$value": "{semantics.actions.low.content.hover}",
+      "$type": "color",
+      "$description": "Couleur du lien au survol.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-link-color-hover)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-link-color-hover",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "color-pressed": {
+      "$value": "{semantics.actions.low.content.pressed}",
+      "$type": "color",
+      "$description": "Couleur du lien enfoncé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-link-color-pressed)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-link-color-pressed",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "descriptionSource": "scss"
         }
       }
     },
     "focus-ring-width": {
       "$value": "{metrics.units.2xs}",
       "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus d'un tag.",
+      "$description": "Épaisseur de l'anneau de focus",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -13412,13 +18820,13 @@
             "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-tags-focus-ring-width)"
+            "WEB": "var(--ui-link-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-tags-focus-ring-width",
-          "component": "ui-input-tags",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+          "cssVar": "--ui-link-focus-ring-width",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
           "descriptionSource": "scss"
         }
       }
@@ -13434,13 +18842,13 @@
             "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-tags-font-family)"
+            "WEB": "var(--ui-link-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-tags-font-family",
-          "component": "ui-input-tags",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+          "cssVar": "--ui-link-font-family",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
           "descriptionSource": "scss"
         }
       }
@@ -13448,7 +18856,7 @@
     "font-size": {
       "$value": "{responsive.size.typography.text.default}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-input-tags`.",
+      "$description": "Taille de police de `ui-link`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -13456,13 +18864,13 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-tags-font-size)"
+            "WEB": "var(--ui-link-font-size)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-tags-font-size",
-          "component": "ui-input-tags",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+          "cssVar": "--ui-link-font-size",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
           "descriptionSource": "derived"
         }
       }
@@ -13470,7 +18878,7 @@
     "font-size-small": {
       "$value": "{responsive.size.typography.text.md}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-input-tags` (variante `small`).",
+      "$description": "Taille de police de `ui-link` (variante `small`).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -13478,66 +18886,66 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-input-tags-font-size-small)"
+            "WEB": "var(--ui-link-font-size-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-tags-font-size-small",
-          "component": "ui-input-tags",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+          "cssVar": "--ui-link-font-size-small",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
           "descriptionSource": "derived"
         }
       }
     },
-    "group": {
-      "color": {
-        "$value": "{semantics.form.low.content.default}",
-        "$type": "color",
-        "$description": "Couleur d'un en-tête de groupe.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-group-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-group-color",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+    "gap": {
+      "$value": "{metrics.units.sm}",
+      "$type": "dimension",
+      "$description": "Espacement icône ↔ libellé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-link-gap)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-link-gap",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "descriptionSource": "scss"
         }
-      },
-      "font-size": {
-        "$value": "{responsive.size.typography.text.md}",
-        "$type": "dimension",
-        "$description": "Taille du texte d'un en-tête de groupe.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "FONT_SIZE"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-group-font-size)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-group-font-size",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+      }
+    },
+    "radius": {
+      "$value": "{metrics.radius.2xs}",
+      "$type": "dimension",
+      "$description": "Rayon de la zone de focus.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-link-radius)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-link-radius",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "descriptionSource": "scss"
         }
-      },
-      "height": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Hauteur d'un en-tête de groupe.",
+      }
+    },
+    "underline": {
+      "thickness": {
+        "$value": "from-font",
+        "$type": "string",
+        "$description": "Épaisseur du soulignement.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -13545,47 +18953,48 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-group-height)"
+              "WEB": "var(--ui-link-underline-thickness)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-group-height",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-link-underline-thickness",
+            "component": "ui-link",
+            "entryPoint": "@4sh/ui-kit-react/ui-link",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "input": {
-      "min-width": {
-        "$value": "80px",
-        "$type": "dimension",
-        "$description": "Largeur minimale de la zone de saisie restante.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-input-min-width)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-input-min-width",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+    "weight": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_WEIGHT",
+            "FONT_STYLE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-link-weight)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-link-weight",
+          "component": "ui-link",
+          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "descriptionSource": "scss"
         }
       }
-    },
-    "option-check": {
+    }
+  },
+  "menu": {
+    "action": {
       "color": {
-        "$value": "{semantics.form.high.content.checked}",
+        "$value": "{semantics.navigation.high.content.default}",
         "$type": "color",
-        "$description": "Couleur de la coche d'une suggestion déjà saisie.",
+        "$description": "Couleur d'une entrée de menu.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -13593,23 +19002,23 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-check-color)"
+              "WEB": "var(--ui-menu-action-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-check-color",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-menu-action-color",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
-      }
-    },
-    "option": {
-      "color": {
-        "$value": "{semantics.form.high.content.default}",
+      },
+      "color-active": {
+        "$value": "{semantics.navigation.high.content.active}",
         "$type": "color",
-        "$description": "Couleur du texte d'une suggestion.",
+        "$description": "Couleur de l'entrée courante : elle n'est lisible que sur le fond `surface-active` qui l'accompagne.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -13617,21 +19026,23 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-color)"
+              "WEB": "var(--ui-menu-action-color-active)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-color",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-menu-action-color-active",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
       "color-disabled": {
-        "$value": "{semantics.form.high.content.disabled}",
+        "$value": "{semantics.navigation.high.content.disabled}",
         "$type": "color",
-        "$description": "Couleur du texte d'une suggestion désactivée.",
+        "$description": "Couleur d'une entrée désactivée.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -13639,21 +19050,23 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-color-disabled)"
+              "WEB": "var(--ui-menu-action-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-color-disabled",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-menu-action-color-disabled",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "color-selected": {
-        "$value": "{semantics.form.high.content.checked}",
+      "color-hover": {
+        "$value": "{semantics.navigation.high.content.hover}",
         "$type": "color",
-        "$description": "Couleur du texte d'une suggestion déjà saisie.",
+        "$description": "Couleur d'une entrée au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -13661,200 +19074,306 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-color-selected)"
+              "WEB": "var(--ui-menu-action-color-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-color-selected",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-menu-action-color-hover",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "gap": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Espacement entre le libellé et la coche d'une option.",
+      "color-pressed": {
+        "$value": "{semantics.navigation.high.content.active}",
+        "$type": "color",
+        "$description": "Couleur d'une entrée enfoncée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-gap)"
+              "WEB": "var(--ui-menu-action-color-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-gap",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-menu-action-color-pressed",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "height": {
-        "$value": "40px",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-input-tags`, option.",
+      "surface-active": {
+        "$value": "{semantics.navigation.high.surface.active}",
+        "$type": "color",
+        "$description": "Fond de l'entrée correspondant à la route courante.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-height)"
+              "WEB": "var(--ui-menu-action-surface-active)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-height",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-menu-action-surface-active",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "height-small": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-input-tags`, option (variante `small`).",
+      "surface-disabled": {
+        "$value": "{semantics.navigation.high.surface.disabled}",
+        "$type": "color",
+        "$description": "Fond d'une entrée désactivée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-height-small)"
+              "WEB": "var(--ui-menu-action-surface-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-height-small",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-menu-action-surface-disabled",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "padding-x": {
-        "$value": "{metrics.units.default}",
-        "$type": "dimension",
-        "$description": "Inset horizontal de `ui-input-tags`, option.",
+      "surface-hover": {
+        "$value": "{semantics.navigation.high.surface.hover}",
+        "$type": "color",
+        "$description": "Fond d'une entrée au survol (et d'un parent dont le sous-menu est ouvert).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-padding-x)"
+              "WEB": "var(--ui-menu-action-surface-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-padding-x",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-menu-action-surface-hover",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "padding-x-small": {
-        "$value": "{metrics.units.md}",
-        "$type": "dimension",
-        "$description": "Inset horizontal de `ui-input-tags`, option (variante `small`).",
+      "surface-pressed": {
+        "$value": "{semantics.navigation.high.surface.active}",
+        "$type": "color",
+        "$description": "Fond d'une entrée enfoncée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-padding-x-small)"
+              "WEB": "var(--ui-menu-action-surface-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-padding-x-small",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-menu-action-surface-pressed",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "radius": {
-        "$value": "{metrics.radius.sm}",
-        "$type": "dimension",
-        "$description": "Rayon d'une option.",
+      "weight": {
+        "$value": "{typography.weight.regular}",
+        "$type": "string",
+        "$description": "Graisse de l'action.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "STRING",
             "scopes": [
-              "CORNER_RADIUS"
+              "FONT_WEIGHT",
+              "FONT_STYLE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-radius)"
+              "WEB": "var(--ui-menu-action-weight)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-radius",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-menu-action-weight",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "scss"
           }
         }
-      },
-      "surface-hover": {
-        "$value": "{semantics.global.background.default-hover}",
+      }
+    },
+    "action-focus-ring": {
+      "color": {
+        "$value": "{semantics.global.border.focus}",
         "$type": "color",
-        "$description": "Fond d'une suggestion survolée ou active au clavier.",
+        "$description": "Couleur de l'anneau de focus d'une action.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-option-surface-hover)"
+              "WEB": "var(--ui-menu-action-focus-ring-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-option-surface-hover",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-menu-action-focus-ring-color",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "panel": {
-      "gap": {
-        "$value": "{metrics.units.xs}",
-        "$type": "dimension",
-        "$description": "Espacement entre les groupes du panneau.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-panel-gap)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-panel-gap",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-menu-focus-ring-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-menu-focus-ring-width",
+          "component": "ui-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique de l'action.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-menu-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-menu-font-family",
+          "component": "ui-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-menu`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-menu-font-size)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-menu-font-size",
+          "component": "ui-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-menu` (variante `small`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-menu-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-menu-font-size-small",
+          "component": "ui-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Écart entre deux entrées.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-menu-gap)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-menu-gap",
+          "component": "ui-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "descriptionSource": "scss"
         }
-      },
-      "padding": {
-        "$value": "{metrics.units.xs}",
+      }
+    },
+    "group": {
+      "indent": {
+        "$value": "{metrics.units.default}",
         "$type": "dimension",
-        "$description": "Inset du panneau de suggestions.",
+        "$description": "Indentation d'un groupe imbriqué.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -13862,226 +19381,160 @@
               "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-panel-padding)"
+              "WEB": "var(--ui-menu-group-indent)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-panel-padding",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-menu-group-indent",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "scss"
           }
         }
-      },
-      "stroke": {
-        "$value": "{semantics.form.high.stroke.default}",
+      }
+    },
+    "header": {
+      "color": {
+        "$value": "{semantics.navigation.high.content.default}",
         "$type": "color",
-        "$description": "Couleur de bordure du panneau de suggestions.",
+        "$description": "Couleur d'un intitulé de groupe.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-panel-stroke)"
+              "WEB": "var(--ui-menu-header-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-panel-stroke",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-menu-header-color",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.form.high.surface.default}",
-        "$type": "color",
-        "$description": "Fond du panneau de suggestions.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-panel-surface)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-panel-surface",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "remove": {
-      "opacity": {
-        "$value": "0.7",
-        "$type": "number",
-        "$description": "Opacité de la croix de retrait au repos.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "OPACITY"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-remove-opacity)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-remove-opacity",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "scroller": {
-      "max-height": {
-        "$value": "200px",
+      "font-size": {
+        "$value": "{responsive.size.typography.text.md}",
         "$type": "dimension",
-        "$description": "Hauteur maximale de `ui-input-tags`, scroller.",
+        "$description": "Taille de police de `ui-menu`, header.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-scroller-max-height)"
+              "WEB": "var(--ui-menu-header-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-scroller-max-height",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-menu-header-font-size",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "derived"
           }
         }
       },
-      "max-height-small": {
-        "$value": "180px",
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.sm}",
         "$type": "dimension",
-        "$description": "Hauteur maximale de `ui-input-tags`, scroller (variante `small`).",
+        "$description": "Taille de police de `ui-menu`, header (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-scroller-max-height-small)"
+              "WEB": "var(--ui-menu-header-font-size-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-scroller-max-height-small",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-menu-header-font-size-small",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "derived"
           }
         }
-      }
-    },
-    "tag": {
-      "color": {
-        "$value": "{semantics.form.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur du texte d'un tag rendu par `renderItem`.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-tag-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-tag-color",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
-          }
-        }
       },
-      "font-size": {
-        "$value": "{responsive.size.typography.text.md}",
+      "height": {
+        "$value": "32px",
         "$type": "dimension",
-        "$description": "Taille de police de `ui-input-tags`, tag.",
+        "$description": "Hauteur de `ui-menu`, header.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_SIZE"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-tag-font-size)"
+              "WEB": "var(--ui-menu-header-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-tag-font-size",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-menu-header-height",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "derived"
           }
         }
       },
-      "gap": {
-        "$value": "{metrics.units.xs}",
+      "height-small": {
+        "$value": "24px",
         "$type": "dimension",
-        "$description": "Espacement entre les tags saisis.",
+        "$description": "Hauteur de `ui-menu`, header (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-tag-gap)"
+              "WEB": "var(--ui-menu-header-height-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-tag-gap",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-menu-header-height-small",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "derived"
           }
         }
       },
-      "gap-custom": {
-        "$value": "{metrics.units.2xs}",
-        "$type": "dimension",
-        "$description": "Espacement interne d'un tag rendu par `renderTag`.",
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse de l'en-tête.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "STRING",
             "scopes": [
-              "GAP"
+              "FONT_WEIGHT",
+              "FONT_STYLE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-tag-gap-custom)"
+              "WEB": "var(--ui-menu-header-weight)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-tag-gap-custom",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-menu-header-weight",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "scss"
           }
         }
-      },
+      }
+    },
+    "item": {
       "height": {
-        "$value": "24px",
+        "$value": "40px",
         "$type": "dimension",
-        "$description": "Hauteur de `ui-input-tags`, tag.",
+        "$description": "Hauteur de `ui-menu`, item.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -14089,295 +19542,110 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-tag-height)"
+              "WEB": "var(--ui-menu-item-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-tag-height",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
+            "cssVar": "--ui-menu-item-height",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "derived"
           }
         }
       },
-      "radius": {
-        "$value": "{metrics.radius.full}",
+      "height-small": {
+        "$value": "32px",
         "$type": "dimension",
-        "$description": "Rayon d'un tag.",
+        "$description": "Hauteur de `ui-menu`, item (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "CORNER_RADIUS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-input-tags-tag-radius)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-tag-radius",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "tag-focus-ring": {
-      "color": {
-        "$value": "{semantics.form.high.stroke.focused}",
-        "$type": "color",
-        "$description": "Teinte de l'anneau de focus d'un tag.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-input-tags-tag-focus-ring-color)"
+              "WEB": "var(--ui-menu-item-height-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-input-tags-tag-focus-ring-color",
-            "component": "ui-input-tags",
-            "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "weight": {
-      "$value": "{typography.weight.bold}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-input-tags-weight)"
+            "cssVar": "--ui-menu-item-height-small",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-input-tags-weight",
-          "component": "ui-input-tags",
-          "entryPoint": "@4sh/ui-kit-react/ui-input-tags",
-          "descriptionSource": "scss"
         }
-      }
-    }
-  },
-  "knob": {
-    "focus-ring": {
-      "color": {
-        "$value": "{semantics.actions.high.stroke.focused}",
-        "$type": "color",
-        "$description": "Couleur de l'anneau de focus.",
+      },
+      "padding-x": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Inset horizontal de `ui-menu`, item.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-focus-ring-color)"
+              "WEB": "var(--ui-menu-item-padding-x)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-focus-ring-color",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-menu-item-padding-x",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "derived"
           }
         }
       },
-      "color-invalid": {
-        "$value": "{semantics.form.error.stroke.focused}",
-        "$type": "color",
-        "$description": "Couleur de l'anneau de focus en erreur.",
+      "padding-x-small": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Inset horizontal de `ui-menu`, item (variante `small`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-focus-ring-color-invalid)"
+              "WEB": "var(--ui-menu-item-padding-x-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-focus-ring-color-invalid",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-knob-focus-ring-width)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-focus-ring-width",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-size": {
-      "$value": "{responsive.size.typography.title.md}",
-      "$type": "dimension",
-      "$description": "Taille de la valeur centrale.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-knob-font-size)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-font-size",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-size-large": {
-      "$value": "{responsive.size.typography.title.default}",
-      "$type": "dimension",
-      "$description": "Taille de la valeur centrale, taille `large`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-knob-font-size-large)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-font-size-large",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.lg}",
-      "$type": "dimension",
-      "$description": "Taille de la valeur centrale, taille `small`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-knob-font-size-small)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-font-size-small",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "radius": {
-      "$value": "{metrics.radius.full}",
-      "$type": "dimension",
-      "$description": "Rayon de la zone focalisable.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "CORNER_RADIUS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-knob-radius)"
+            "cssVar": "--ui-menu-item-padding-x-small",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-radius",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
         }
-      }
-    },
-    "range": {
-      "color": {
-        "$value": "{semantics.global.background.muted}",
-        "$type": "color",
-        "$description": "Couleur de la piste.",
+      },
+      "radius": {
+        "$value": "{metrics.radius.sm}",
+        "$type": "dimension",
+        "$description": "Rayon des entrées.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-range-color)"
+              "WEB": "var(--ui-menu-item-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-range-color",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
+            "cssVar": "--ui-menu-item-radius",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "size": {
-      "$value": "100px",
-      "$type": "dimension",
-      "$description": "Diamètre du cadran.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "WIDTH_HEIGHT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-knob-size)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-size",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "size-large": {
-      "$value": "140px",
+    "min-width": {
+      "$value": "210px",
       "$type": "dimension",
-      "$description": "Diamètre du cadran, taille `large`.",
+      "$description": "Largeur minimale de `ui-menu`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -14385,21 +19653,21 @@
             "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-knob-size-large)"
+            "WEB": "var(--ui-menu-min-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-size-large",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-menu-min-width",
+          "component": "ui-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "descriptionSource": "derived"
         }
       }
     },
-    "size-small": {
-      "$value": "70px",
+    "min-width-small": {
+      "$value": "160px",
       "$type": "dimension",
-      "$description": "Diamètre du cadran, taille `small`.",
+      "$description": "Largeur minimale de `ui-menu` (variante `small`).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -14407,134 +19675,95 @@
             "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-knob-size-small)"
+            "WEB": "var(--ui-menu-min-width-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-size-small",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-menu-min-width-small",
+          "component": "ui-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "descriptionSource": "derived"
         }
       }
     },
-    "text": {
-      "color": {
-        "$value": "{semantics.global.text.default}",
-        "$type": "color",
-        "$description": "Couleur de la valeur centrale.",
+    "panel": {
+      "padding": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Gouttière interne du panneau (**partagée** avec les autres panneaux flottants).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "TEXT_FILL"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-text-color)"
+              "WEB": "var(--ui-menu-panel-padding)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-text-color",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
+            "cssVar": "--ui-menu-panel-padding",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "scss"
           }
         }
       },
-      "color-disabled": {
-        "$value": "{semantics.global.text.muted}",
+      "surface": {
+        "$value": "{semantics.global.background.default}",
         "$type": "color",
-        "$description": "Couleur de la valeur centrale, cadran désactivé.",
+        "$description": "Fond opaque du panneau (le jeton de surface `navigation` est transparent par nature).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "TEXT_FILL"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-text-color-disabled)"
+              "WEB": "var(--ui-menu-panel-surface)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-text-color-disabled",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
+            "cssVar": "--ui-menu-panel-surface",
+            "component": "ui-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-menu",
             "descriptionSource": "scss"
           }
         }
       }
-    },
-    "value": {
-      "color": {
-        "$value": "{semantics.actions.high.surface.default}",
-        "$type": "color",
-        "$description": "Couleur de l'arc rempli.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-knob-value-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-value-color",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "color-disabled": {
-        "$value": "{semantics.actions.high.surface.disabled}",
-        "$type": "color",
-        "$description": "Couleur de l'arc rempli, cadran désactivé.",
+    }
+  },
+  "modal": {
+    "action": {
+      "size": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Taille de la cible tactile des boutons d'en-tête.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-value-color-disabled)"
+              "WEB": "var(--ui-modal-action-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-value-color-disabled",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
+            "cssVar": "--ui-modal-action-size",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
             "descriptionSource": "scss"
           }
         }
-      },
+      }
+    },
+    "close": {
       "color-hover": {
-        "$value": "{semantics.actions.high.surface.hover}",
-        "$type": "color",
-        "$description": "Couleur de l'arc rempli au survol.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-knob-value-color-hover)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-value-color-hover",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "color-hover-invalid": {
-        "$value": "{semantics.form.error.content.hover}",
+        "$value": "{semantics.global.text.muted-hover}",
         "$type": "color",
-        "$description": "Couleur de l'arc rempli en erreur, au survol.",
+        "$description": "Couleur du bouton de fermeture au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -14542,43 +19771,46 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-value-color-hover-invalid)"
+              "WEB": "var(--ui-modal-close-color-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-value-color-hover-invalid",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
+            "cssVar": "--ui-modal-close-color-hover",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
             "descriptionSource": "scss"
           }
         }
       },
-      "color-invalid": {
-        "$value": "{semantics.form.error.content.default}",
+      "surface-hover": {
+        "$value": "{semantics.global.background.muted-hover}",
         "$type": "color",
-        "$description": "Couleur de l'arc rempli en erreur.",
+        "$description": "Fond du bouton de fermeture au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-value-color-invalid)"
+              "WEB": "var(--ui-modal-close-surface-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-value-color-invalid",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
+            "cssVar": "--ui-modal-close-surface-hover",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
             "descriptionSource": "scss"
           }
         }
-      },
-      "color-pressed": {
-        "$value": "{semantics.actions.high.surface.pressed}",
+      }
+    },
+    "close-focus-ring": {
+      "color": {
+        "$value": "{semantics.global.border.focus}",
         "$type": "color",
-        "$description": "Couleur de l'arc rempli pendant le glissement.",
+        "$description": "Couleur de l'anneau de focus du bouton de fermeture.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -14586,47 +19818,22 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-knob-value-color-pressed)"
+              "WEB": "var(--ui-modal-close-focus-ring-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-knob-value-color-pressed",
-            "component": "ui-knob",
-            "entryPoint": "@4sh/ui-kit-react/ui-knob",
+            "cssVar": "--ui-modal-close-focus-ring-color",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "weight": {
-      "$value": "{typography.weight.bold}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-knob-weight)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-knob-weight",
-          "component": "ui-knob",
-          "entryPoint": "@4sh/ui-kit-react/ui-knob",
-          "descriptionSource": "scss"
-        }
-      }
-    }
-  },
-  "label": {
+      }
+    },
     "color": {
-      "$value": "var(--form-high-content-default, var(--global-text-default))",
+      "$value": "{semantics.global.text.default}",
       "$type": "color",
-      "$description": "Couleur du texte, pilotable par un composant de formulaire parent (hover, disabled…).",
+      "$description": "Couleur du texte de la boîte.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
@@ -14634,37 +19841,81 @@
             "ALL_FILLS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-label-color)"
+            "WEB": "var(--ui-modal-color)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-label-color",
-          "component": "ui-label",
-          "entryPoint": "@4sh/ui-kit-react/ui-label",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+          "cssVar": "--ui-modal-color",
+          "component": "ui-modal",
+          "entryPoint": "@4sh/ui-kit-react/ui-modal",
+          "descriptionSource": "scss"
         }
       }
     },
-    "color-disabled": {
-      "$value": "{semantics.form.high.content.disabled}",
-      "$type": "color",
-      "$description": "Couleur du texte désactivé, lue aussi par les contrôles de formulaire qui peignent leur propre libellé.",
+    "dialog": {
+      "padding": {
+        "$value": "{metrics.units.lg}",
+        "$type": "dimension",
+        "$description": "Inset du dialogue.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-modal-dialog-padding)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-modal-dialog-padding",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "radius": {
+        "$value": "{metrics.radius.md}",
+        "$type": "dimension",
+        "$description": "Rayon du dialogue.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-modal-dialog-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-modal-dialog-radius",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus des boutons d'en-tête.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "ALL_FILLS"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-label-color-disabled)"
+            "WEB": "var(--ui-modal-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-label-color-disabled",
-          "component": "ui-label",
-          "entryPoint": "@4sh/ui-kit-react/ui-label",
+          "cssVar": "--ui-modal-focus-ring-width",
+          "component": "ui-modal",
+          "entryPoint": "@4sh/ui-kit-react/ui-modal",
           "descriptionSource": "scss"
         }
       }
@@ -14680,452 +19931,349 @@
             "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-label-font-family)"
+            "WEB": "var(--ui-modal-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-label-font-family",
-          "component": "ui-label",
-          "entryPoint": "@4sh/ui-kit-react/ui-label",
+          "cssVar": "--ui-modal-font-family",
+          "component": "ui-modal",
+          "entryPoint": "@4sh/ui-kit-react/ui-modal",
           "descriptionSource": "scss"
         }
       }
     },
-    "font-size": {
-      "$value": "{responsive.size.typography.text.md}",
-      "$type": "dimension",
-      "$description": "Taille de police du libellé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-label-font-size)"
+    "footer": {
+      "stroke": {
+        "$value": "{semantics.global.border.subtle}",
+        "$type": "color",
+        "$description": "Couleur du trait séparant le pied.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "STROKE_COLOR"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-modal-footer-stroke)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-modal-footer-stroke",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-label-font-size",
-          "component": "ui-label",
-          "entryPoint": "@4sh/ui-kit-react/ui-label",
-          "descriptionSource": "scss"
         }
       }
     },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.sm}",
-      "$type": "dimension",
-      "$description": "Taille de police du libellé, variante `small`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-label-font-size-small)"
+    "header": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement entre les éléments de l'en-tête.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-modal-header-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-modal-header-gap",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-label-font-size-small",
-          "component": "ui-label",
-          "entryPoint": "@4sh/ui-kit-react/ui-label",
-          "descriptionSource": "scss"
         }
       }
     },
-    "gap": {
-      "$value": "{metrics.units.xs}",
-      "$type": "dimension",
-      "$description": "Espace entre le texte et son marqueur.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-label-gap)"
+    "mask": {
+      "background": {
+        "$value": "{primitives.black.50}",
+        "$type": "color",
+        "$description": "Assombrissement de l'arrière-plan.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-modal-mask-background)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-modal-mask-background",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "padding": {
+        "$value": "{metrics.units.lg}",
+        "$type": "dimension",
+        "$description": "Inset entre le bord de l'écran et le dialogue.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-modal-mask-padding)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-modal-mask-padding",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-label-gap",
-          "component": "ui-label",
-          "entryPoint": "@4sh/ui-kit-react/ui-label",
-          "descriptionSource": "scss"
         }
       }
     },
-    "marker": {
+    "resize-handle": {
       "color": {
-        "$value": "{semantics.informative.errorLow.content.default}",
+        "$value": "{semantics.global.text.muted}",
         "$type": "color",
-        "$description": "Couleur du marqueur « requis ».",
+        "$description": "Couleur de la poignée de redimensionnement.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-modal-resize-handle-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-modal-resize-handle-color",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "size": {
+        "$value": "16px",
+        "$type": "dimension",
+        "$description": "Taille de la poignée de redimensionnement.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-label-marker-color)"
+              "WEB": "var(--ui-modal-resize-handle-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-label-marker-color",
-            "component": "ui-label",
-            "entryPoint": "@4sh/ui-kit-react/ui-label",
+            "cssVar": "--ui-modal-resize-handle-size",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "weight": {
-      "$value": "{typography.weight.regular}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-label-weight)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-label-weight",
-          "component": "ui-label",
-          "entryPoint": "@4sh/ui-kit-react/ui-label",
-          "descriptionSource": "scss"
-        }
-      }
-    }
-  },
-  "link": {
-    "color": {
-      "$value": "{semantics.actions.low.content.default}",
-      "$type": "color",
-      "$description": "Couleur du lien.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-link-color)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-color",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "color-disabled": {
-      "$value": "{semantics.actions.low.content.disabled}",
-      "$type": "color",
-      "$description": "Couleur du lien désactivé (soulignement compris).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-link-color-disabled)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-color-disabled",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "color-focus": {
-      "$value": "{semantics.actions.low.content.focused}",
+    "stroke": {
+      "$value": "{semantics.global.border.subtle}",
       "$type": "color",
-      "$description": "Couleur du lien au focus clavier ; elle teinte aussi l'anneau.",
+      "$description": "Couleur de bordure de la boîte.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
           "scopes": [
-            "ALL_FILLS"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-link-color-focus)"
+            "WEB": "var(--ui-modal-stroke)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-color-focus",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "cssVar": "--ui-modal-stroke",
+          "component": "ui-modal",
+          "entryPoint": "@4sh/ui-kit-react/ui-modal",
           "descriptionSource": "scss"
         }
       }
     },
-    "color-hover": {
-      "$value": "{semantics.actions.low.content.hover}",
-      "$type": "color",
-      "$description": "Couleur du lien au survol.",
+    "stroke-width": {
+      "$value": "{metrics.stroke.sm}",
+      "$type": "dimension",
+      "$description": "Épaisseur de bordure du dialogue.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "ALL_FILLS"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-link-color-hover)"
+            "WEB": "var(--ui-modal-stroke-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-color-hover",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "cssVar": "--ui-modal-stroke-width",
+          "component": "ui-modal",
+          "entryPoint": "@4sh/ui-kit-react/ui-modal",
           "descriptionSource": "scss"
         }
       }
     },
-    "color-pressed": {
-      "$value": "{semantics.actions.low.content.pressed}",
+    "surface": {
+      "$value": "{semantics.global.background.default}",
       "$type": "color",
-      "$description": "Couleur du lien enfoncé.",
+      "$description": "Fond de la boîte.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
           "scopes": [
-            "ALL_FILLS"
+            "FRAME_FILL",
+            "SHAPE_FILL"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-link-color-pressed)"
+            "WEB": "var(--ui-modal-surface)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-color-pressed",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "cssVar": "--ui-modal-surface",
+          "component": "ui-modal",
+          "entryPoint": "@4sh/ui-kit-react/ui-modal",
           "descriptionSource": "scss"
         }
       }
     },
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-link-focus-ring-width)"
+    "title": {
+      "font-family": {
+        "$value": "{typography.fontFamily.title}",
+        "$type": "string",
+        "$description": "Famille typographique du titre.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_FAMILY"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-modal-title-font-family)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-modal-title-font-family",
+            "component": "ui-modal",
+            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-focus-ring-width",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
-          "descriptionSource": "scss"
         }
       }
     },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
+    "weight": {
+      "$value": "{typography.weight.bold}",
       "$type": "string",
-      "$description": "Famille typographique du composant.",
+      "$description": "Graisse du titre.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "STRING",
           "scopes": [
-            "FONT_FAMILY"
+            "FONT_WEIGHT",
+            "FONT_STYLE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-link-font-family)"
+            "WEB": "var(--ui-modal-weight)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-font-family",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "cssVar": "--ui-modal-weight",
+          "component": "ui-modal",
+          "entryPoint": "@4sh/ui-kit-react/ui-modal",
           "descriptionSource": "scss"
         }
       }
-    },
-    "font-size": {
-      "$value": "{responsive.size.typography.text.default}",
-      "$type": "dimension",
-      "$description": "Taille de police de `ui-link`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-link-font-size)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-font-size",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
-      "$type": "dimension",
-      "$description": "Taille de police de `ui-link` (variante `small`).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-link-font-size-small)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-font-size-small",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "gap": {
-      "$value": "{metrics.units.sm}",
+    }
+  },
+  "motion": {
+    "distance": {
+      "$value": "8px",
       "$type": "dimension",
-      "$description": "Espacement icône ↔ libellé.",
+      "$description": "Distance du glissement d’entrée et de sortie, pour un exemplaire.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "GAP"
+            "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-link-gap)"
+            "WEB": "var(--ui-motion-distance)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-gap",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-motion-distance",
+          "component": "système de motion",
+          "entryPoint": "@4sh/ui-kit/motion",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "poignée transverse (motion / panneaux flottants) : à poser sur l’élément visé, un composant qui a son propre réglage l’emporte."
         }
       }
-    },
-    "radius": {
-      "$value": "{metrics.radius.2xs}",
-      "$type": "dimension",
-      "$description": "Rayon de la zone de focus.",
+    }
+  },
+  "nudger": {
+    "font-family": {
+      "$value": "{typography.fontFamily.title}",
+      "$type": "string",
+      "$description": "Famille typographique de la valeur.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "CORNER_RADIUS"
+            "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-link-radius)"
+            "WEB": "var(--ui-nudger-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-radius",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "cssVar": "--ui-nudger-font-family",
+          "component": "ui-nudger",
+          "entryPoint": "@4sh/ui-kit-react/ui-nudger",
           "descriptionSource": "scss"
         }
       }
     },
-    "underline": {
-      "thickness": {
-        "$value": "from-font",
-        "$type": "string",
-        "$description": "Épaisseur du soulignement.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-link-underline-thickness)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-link-underline-thickness",
-            "component": "ui-link",
-            "entryPoint": "@4sh/ui-kit-react/ui-link",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "weight": {
-      "$value": "{typography.weight.bold}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
+    "gap": {
+      "$value": "{metrics.units.default}",
+      "$type": "dimension",
+      "$description": "Espacement entre les boutons et la valeur.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-link-weight)"
+            "WEB": "var(--ui-nudger-gap)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-link-weight",
-          "component": "ui-link",
-          "entryPoint": "@4sh/ui-kit-react/ui-link",
+          "cssVar": "--ui-nudger-gap",
+          "component": "ui-nudger",
+          "entryPoint": "@4sh/ui-kit-react/ui-nudger",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "menu": {
-    "action": {
+    },
+    "value": {
       "color": {
-        "$value": "{semantics.navigation.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur d'une entrée de menu.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-action-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-color",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
-          }
-        }
-      },
-      "color-active": {
-        "$value": "{semantics.navigation.high.content.active}",
+        "$value": "{semantics.form.high.content.default}",
         "$type": "color",
-        "$description": "Couleur de l'entrée courante : elle n'est lisible que sur le fond `surface-active` qui l'accompagne.",
+        "$description": "Couleur de la valeur.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -15133,47 +20281,21 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-action-color-active)"
+              "WEB": "var(--ui-nudger-value-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-color-active",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-nudger-value-color",
+            "component": "ui-nudger",
+            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "descriptionSource": "scss"
           }
         }
       },
       "color-disabled": {
-        "$value": "{semantics.navigation.high.content.disabled}",
-        "$type": "color",
-        "$description": "Couleur d'une entrée désactivée.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-action-color-disabled)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-color-disabled",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
-          }
-        }
-      },
-      "color-hover": {
-        "$value": "{semantics.navigation.high.content.hover}",
+        "$value": "{semantics.form.high.content.disabled}",
         "$type": "color",
-        "$description": "Couleur d'une entrée au survol.",
+        "$description": "Couleur de la valeur désactivée.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -15181,23 +20303,21 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-action-color-hover)"
+              "WEB": "var(--ui-nudger-value-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-color-hover",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-nudger-value-color-disabled",
+            "component": "ui-nudger",
+            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "descriptionSource": "scss"
           }
         }
       },
-      "color-pressed": {
-        "$value": "{semantics.navigation.high.content.active}",
+      "color-invalid": {
+        "$value": "{semantics.form.error.content.default}",
         "$type": "color",
-        "$description": "Couleur d'une entrée enfoncée.",
+        "$description": "Couleur de la valeur en erreur.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -15205,193 +20325,135 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-action-color-pressed)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-color-pressed",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
-          }
-        }
-      },
-      "surface-active": {
-        "$value": "{semantics.navigation.high.surface.active}",
-        "$type": "color",
-        "$description": "Fond de l'entrée correspondant à la route courante.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-action-surface-active)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-surface-active",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
-          }
-        }
-      },
-      "surface-disabled": {
-        "$value": "{semantics.navigation.high.surface.disabled}",
-        "$type": "color",
-        "$description": "Fond d'une entrée désactivée.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-action-surface-disabled)"
+              "WEB": "var(--ui-nudger-value-color-invalid)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-surface-disabled",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-nudger-value-color-invalid",
+            "component": "ui-nudger",
+            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "descriptionSource": "scss"
           }
         }
       },
-      "surface-hover": {
-        "$value": "{semantics.navigation.high.surface.hover}",
-        "$type": "color",
-        "$description": "Fond d'une entrée au survol (et d'un parent dont le sous-menu est ouvert).",
+      "font-size": {
+        "$value": "{responsive.size.typography.title.xl}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-nudger`, value.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-action-surface-hover)"
+              "WEB": "var(--ui-nudger-value-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-surface-hover",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-nudger-value-font-size",
+            "component": "ui-nudger",
+            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "descriptionSource": "derived"
           }
         }
       },
-      "surface-pressed": {
-        "$value": "{semantics.navigation.high.surface.active}",
-        "$type": "color",
-        "$description": "Fond d'une entrée enfoncée.",
+      "font-size-small": {
+        "$value": "{responsive.size.typography.title.lg}",
+        "$type": "dimension",
+        "$description": "Taille de police de `ui-nudger`, value (variante `small`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-action-surface-pressed)"
+              "WEB": "var(--ui-nudger-value-font-size-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-surface-pressed",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-nudger-value-font-size-small",
+            "component": "ui-nudger",
+            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "descriptionSource": "derived"
           }
         }
       },
-      "weight": {
-        "$value": "{typography.weight.regular}",
-        "$type": "string",
-        "$description": "Graisse de l'action.",
+      "min-width": {
+        "$value": "40px",
+        "$type": "dimension",
+        "$description": "Largeur minimale de `ui-nudger`, value.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "STRING",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_WEIGHT",
-              "FONT_STYLE"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-action-weight)"
+              "WEB": "var(--ui-nudger-value-min-width)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-weight",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-nudger-value-min-width",
+            "component": "ui-nudger",
+            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "descriptionSource": "derived"
           }
         }
-      }
-    },
-    "action-focus-ring": {
-      "color": {
-        "$value": "{semantics.global.border.focus}",
-        "$type": "color",
-        "$description": "Couleur de l'anneau de focus d'une action.",
+      },
+      "min-width-small": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Largeur minimale de `ui-nudger`, value (variante `small`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-action-focus-ring-color)"
+              "WEB": "var(--ui-nudger-value-min-width-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-action-focus-ring-color",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-nudger-value-min-width-small",
+            "component": "ui-nudger",
+            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "descriptionSource": "derived"
           }
         }
       }
     },
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus.",
+    "weight": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse de la valeur.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "STROKE_FLOAT"
+            "FONT_WEIGHT",
+            "FONT_STYLE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-menu-focus-ring-width)"
+            "WEB": "var(--ui-nudger-weight)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-menu-focus-ring-width",
-          "component": "ui-menu",
-          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "cssVar": "--ui-nudger-weight",
+          "component": "ui-nudger",
+          "entryPoint": "@4sh/ui-kit-react/ui-nudger",
           "descriptionSource": "scss"
         }
       }
-    },
+    }
+  },
+  "overlay-panel": {
     "font-family": {
       "$value": "{typography.fontFamily.base}",
       "$type": "string",
-      "$description": "Famille typographique de l'action.",
+      "$description": "Famille typographique du contenu des panneaux flottants.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "STRING",
@@ -15399,427 +20461,323 @@
             "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-menu-font-family)"
+            "WEB": "var(--ui-overlay-panel-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-menu-font-family",
-          "component": "ui-menu",
-          "entryPoint": "@4sh/ui-kit-react/ui-menu",
+          "cssVar": "--ui-overlay-panel-font-family",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
           "descriptionSource": "scss"
         }
       }
     },
-    "font-size": {
-      "$value": "{responsive.size.typography.text.default}",
+    "padding": {
+      "$value": "{metrics.units.sm}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-menu`.",
+      "$description": "Gouttière interne des panneaux flottants.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_SIZE"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-menu-font-size)"
+            "WEB": "var(--ui-overlay-panel-padding)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-menu-font-size",
-          "component": "ui-menu",
-          "entryPoint": "@4sh/ui-kit-react/ui-menu",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-overlay-panel-padding",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
         }
       }
     },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
+    "radius": {
+      "$value": "{metrics.radius.default}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-menu` (variante `small`).",
+      "$description": "Rayon des coins des panneaux flottants.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_SIZE"
+            "CORNER_RADIUS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-menu-font-size-small)"
+            "WEB": "var(--ui-overlay-panel-radius)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-menu-font-size-small",
-          "component": "ui-menu",
-          "entryPoint": "@4sh/ui-kit-react/ui-menu",
-          "descriptionSource": "derived"
+          "cssVar": "--ui-overlay-panel-radius",
+          "component": "ui-config",
+          "entryPoint": "@4sh/ui-kit-react/styles",
+          "descriptionSource": "scss"
         }
       }
-    },
-    "gap": {
-      "$value": "{metrics.units.2xs}",
+    }
+  },
+  "overlay": {
+    "radius": {
+      "$value": "{metrics.radius.default}",
       "$type": "dimension",
-      "$description": "Écart entre deux entrées.",
+      "$description": "Rayon des coins du panneau flottant, pour un exemplaire.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "GAP"
+            "CORNER_RADIUS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-menu-gap)"
+            "WEB": "var(--ui-overlay-radius)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-menu-gap",
-          "component": "ui-menu",
-          "entryPoint": "@4sh/ui-kit-react/ui-menu",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "group": {
-      "indent": {
-        "$value": "{metrics.units.default}",
-        "$type": "dimension",
-        "$description": "Indentation d'un groupe imbriqué.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-group-indent)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-group-indent",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss"
-          }
+          "cssVar": "--ui-overlay-radius",
+          "component": "panneaux flottants",
+          "entryPoint": "@4sh/ui-kit/overlay",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "poignée transverse (motion / panneaux flottants) : à poser sur l’élément visé, un composant qui a son propre réglage l’emporte."
         }
       }
     },
-    "header": {
-      "color": {
-        "$value": "{semantics.navigation.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur d'un intitulé de groupe.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-header-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-header-color",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
-          }
-        }
-      },
-      "font-size": {
-        "$value": "{responsive.size.typography.text.md}",
-        "$type": "dimension",
-        "$description": "Taille de police de `ui-menu`, header.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "FONT_SIZE"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-header-font-size)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-header-font-size",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "derived"
-          }
-        }
-      },
-      "font-size-small": {
-        "$value": "{responsive.size.typography.text.sm}",
-        "$type": "dimension",
-        "$description": "Taille de police de `ui-menu`, header (variante `small`).",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "FONT_SIZE"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-header-font-size-small)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-header-font-size-small",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "derived"
+    "stroke": {
+      "$value": "{semantics.form.high.stroke.default}",
+      "$type": "color",
+      "$description": "Couleur de bordure du panneau flottant, pour un exemplaire.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-overlay-stroke)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-overlay-stroke",
+          "component": "panneaux flottants",
+          "entryPoint": "@4sh/ui-kit/overlay",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "poignée transverse (motion / panneaux flottants) : à poser sur l’élément visé, un composant qui a son propre réglage l’emporte."
         }
-      },
-      "height": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-menu`, header.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-header-height)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-header-height",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "derived"
+      }
+    },
+    "surface": {
+      "$value": "{semantics.form.high.surface.default}",
+      "$type": "color",
+      "$description": "Fond du panneau flottant, pour un exemplaire.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-overlay-surface)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-overlay-surface",
+          "component": "panneaux flottants",
+          "entryPoint": "@4sh/ui-kit/overlay",
+          "descriptionSource": "scss",
+          "perInstance": true,
+          "note": "poignée transverse (motion / panneaux flottants) : à poser sur l’élément visé, un composant qui a son propre réglage l’emporte."
         }
-      },
-      "height-small": {
-        "$value": "24px",
+      }
+    }
+  },
+  "paginator": {
+    "bar": {
+      "gap": {
+        "$value": "{metrics.units.2xl}",
         "$type": "dimension",
-        "$description": "Hauteur de `ui-menu`, header (variante `small`).",
+        "$description": "Écart entre les blocs de la barre.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-menu-header-height-small)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-header-height-small",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "derived"
-          }
-        }
-      },
-      "weight": {
-        "$value": "{typography.weight.bold}",
-        "$type": "string",
-        "$description": "Graisse de l'en-tête.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "STRING",
-            "scopes": [
-              "FONT_WEIGHT",
-              "FONT_STYLE"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-header-weight)"
+              "WEB": "var(--ui-paginator-bar-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-header-weight",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "cssVar": "--ui-paginator-bar-gap",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "item": {
-      "height": {
-        "$value": "40px",
+    "blocks": {
+      "gap": {
+        "$value": "{metrics.units.default}",
         "$type": "dimension",
-        "$description": "Hauteur de `ui-menu`, item.",
+        "$description": "Écart interne d'un bloc.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-item-height)"
+              "WEB": "var(--ui-paginator-blocks-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-item-height",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-paginator-blocks-gap",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "descriptionSource": "scss"
           }
         }
-      },
-      "height-small": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-menu`, item (variante `small`).",
+      }
+    },
+    "button": {
+      "color": {
+        "$value": "{semantics.navigation.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un bouton.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-item-height-small)"
+              "WEB": "var(--ui-paginator-button-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-item-height-small",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-paginator-button-color",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "descriptionSource": "scss"
           }
         }
       },
-      "padding-x": {
-        "$value": "{metrics.units.md}",
-        "$type": "dimension",
-        "$description": "Inset horizontal de `ui-menu`, item.",
+      "color-focus": {
+        "$value": "{semantics.navigation.high.content.focused}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un bouton au focus clavier.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-item-padding-x)"
+              "WEB": "var(--ui-paginator-button-color-focus)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-item-padding-x",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-paginator-button-color-focus",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "descriptionSource": "scss"
           }
         }
       },
-      "padding-x-small": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Inset horizontal de `ui-menu`, item (variante `small`).",
+      "color-hover": {
+        "$value": "{semantics.navigation.high.content.hover}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un bouton au survol.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-item-padding-x-small)"
+              "WEB": "var(--ui-paginator-button-color-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-item-padding-x-small",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-paginator-button-color-hover",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "descriptionSource": "scss"
           }
         }
       },
-      "radius": {
-        "$value": "{metrics.radius.sm}",
-        "$type": "dimension",
-        "$description": "Rayon des entrées.",
+      "color-pressed": {
+        "$value": "{semantics.navigation.high.content.pressed}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un bouton enfoncé.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "CORNER_RADIUS"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-item-radius)"
+              "WEB": "var(--ui-paginator-button-color-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-item-radius",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "cssVar": "--ui-paginator-button-color-pressed",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "min-width": {
-      "$value": "210px",
-      "$type": "dimension",
-      "$description": "Largeur minimale de `ui-menu`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "WIDTH_HEIGHT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-menu-min-width)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-menu-min-width",
-          "component": "ui-menu",
-          "entryPoint": "@4sh/ui-kit-react/ui-menu",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "min-width-small": {
-      "$value": "160px",
-      "$type": "dimension",
-      "$description": "Largeur minimale de `ui-menu` (variante `small`).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "WIDTH_HEIGHT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-menu-min-width-small)"
+      },
+      "radius": {
+        "$value": "{metrics.radius.default}",
+        "$type": "dimension",
+        "$description": "Rayon des boutons.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-paginator-button-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-paginator-button-radius",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-menu-min-width-small",
-          "component": "ui-menu",
-          "entryPoint": "@4sh/ui-kit-react/ui-menu",
-          "descriptionSource": "derived"
         }
-      }
-    },
-    "panel": {
-      "padding": {
-        "$value": "{metrics.units.sm}",
+      },
+      "size": {
+        "$value": "32px",
         "$type": "dimension",
-        "$description": "Gouttière interne du panneau (**partagée** avec les autres panneaux flottants).",
+        "$description": "Taille des contrôles, et largeur minimale des numéros.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-panel-padding)"
+              "WEB": "var(--ui-paginator-button-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-panel-padding",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "cssVar": "--ui-paginator-button-size",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
       },
       "surface": {
-        "$value": "{semantics.global.background.default}",
+        "$value": "{semantics.navigation.high.surface.default}",
         "$type": "color",
-        "$description": "Fond opaque du panneau (le jeton de surface `navigation` est transparent par nature).",
+        "$description": "Fond d'un bouton (flèche comme numéro de page).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -15828,71 +20786,67 @@
               "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-menu-panel-surface)"
+              "WEB": "var(--ui-paginator-button-surface)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-menu-panel-surface",
-            "component": "ui-menu",
-            "entryPoint": "@4sh/ui-kit-react/ui-menu",
+            "cssVar": "--ui-paginator-button-surface",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
-      }
-    }
-  },
-  "modal": {
-    "action": {
-      "size": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Taille de la cible tactile des boutons d'en-tête.",
+      },
+      "surface-focus": {
+        "$value": "{semantics.navigation.high.surface.focused}",
+        "$type": "color",
+        "$description": "Fond d'un bouton au focus clavier.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-action-size)"
+              "WEB": "var(--ui-paginator-button-surface-focus)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-action-size",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-button-surface-focus",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "close": {
-      "color-hover": {
-        "$value": "{semantics.global.text.muted-hover}",
+      },
+      "surface-hover": {
+        "$value": "{semantics.navigation.high.surface.hover}",
         "$type": "color",
-        "$description": "Couleur du bouton de fermeture au survol.",
+        "$description": "Fond d'un bouton au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-close-color-hover)"
+              "WEB": "var(--ui-paginator-button-surface-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-close-color-hover",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-button-surface-hover",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-hover": {
-        "$value": "{semantics.global.background.muted-hover}",
+      "surface-pressed": {
+        "$value": "{semantics.navigation.high.surface.pressed}",
         "$type": "color",
-        "$description": "Fond du bouton de fermeture au survol.",
+        "$description": "Fond d'un bouton enfoncé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -15901,23 +20855,23 @@
               "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-close-surface-hover)"
+              "WEB": "var(--ui-paginator-button-surface-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-close-surface-hover",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-button-surface-pressed",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "close-focus-ring": {
+    "button-focus-ring": {
       "color": {
-        "$value": "{semantics.global.border.focus}",
+        "$value": "{semantics.navigation.high.stroke.focused}",
         "$type": "color",
-        "$description": "Couleur de l'anneau de focus du bouton de fermeture.",
+        "$description": "Couleur de l'anneau de focus d'un bouton.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -15925,81 +20879,84 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-close-focus-ring-color)"
+              "WEB": "var(--ui-paginator-button-focus-ring-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-close-focus-ring-color",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-button-focus-ring-color",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "color": {
-      "$value": "{semantics.global.text.default}",
-      "$type": "color",
-      "$description": "Couleur du texte de la boîte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "ALL_FILLS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-modal-color)"
+    "control": {
+      "color-disabled": {
+        "$value": "{semantics.navigation.high.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur d'une flèche désactivée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-paginator-control-color-disabled)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-paginator-control-color-disabled",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-modal-color",
-          "component": "ui-modal",
-          "entryPoint": "@4sh/ui-kit-react/ui-modal",
-          "descriptionSource": "scss"
         }
-      }
-    },
-    "dialog": {
-      "padding": {
-        "$value": "{metrics.units.lg}",
-        "$type": "dimension",
-        "$description": "Inset du dialogue.",
+      },
+      "surface-disabled": {
+        "$value": "{semantics.navigation.high.surface.disabled}",
+        "$type": "color",
+        "$description": "Fond d'une flèche désactivée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-dialog-padding)"
+              "WEB": "var(--ui-paginator-control-surface-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-dialog-padding",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-control-surface-disabled",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
-      },
-      "radius": {
-        "$value": "{metrics.radius.md}",
-        "$type": "dimension",
-        "$description": "Rayon du dialogue.",
+      }
+    },
+    "ellipsis": {
+      "color": {
+        "$value": "{semantics.navigation.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur des points de suspension.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "CORNER_RADIUS"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-dialog-radius)"
+              "WEB": "var(--ui-paginator-ellipsis-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-dialog-radius",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-ellipsis-color",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
@@ -16008,7 +20965,7 @@
     "focus-ring-width": {
       "$value": "{metrics.units.2xs}",
       "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus des boutons d'en-tête.",
+      "$description": "Anneau de focus des boutons.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -16016,13 +20973,13 @@
             "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-modal-focus-ring-width)"
+            "WEB": "var(--ui-paginator-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-modal-focus-ring-width",
-          "component": "ui-modal",
-          "entryPoint": "@4sh/ui-kit-react/ui-modal",
+          "cssVar": "--ui-paginator-focus-ring-width",
+          "component": "ui-paginator",
+          "entryPoint": "@4sh/ui-kit-react/ui-paginator",
           "descriptionSource": "scss"
         }
       }
@@ -16038,70 +20995,90 @@
             "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-modal-font-family)"
+            "WEB": "var(--ui-paginator-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-modal-font-family",
-          "component": "ui-modal",
-          "entryPoint": "@4sh/ui-kit-react/ui-modal",
+          "cssVar": "--ui-paginator-font-family",
+          "component": "ui-paginator",
+          "entryPoint": "@4sh/ui-kit-react/ui-paginator",
           "descriptionSource": "scss"
         }
       }
     },
-    "footer": {
-      "stroke": {
-        "$value": "{semantics.global.border.subtle}",
+    "numbers": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Écart entre deux numéros de page.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-paginator-numbers-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-paginator-numbers-gap",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "page": {
+      "color-current": {
+        "$value": "{semantics.navigation.high.content.active}",
         "$type": "color",
-        "$description": "Couleur du trait séparant le pied.",
+        "$description": "Couleur de la page courante : elle n'est lisible que sur le fond `surface-active` qui l'accompagne.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-footer-stroke)"
+              "WEB": "var(--ui-paginator-page-color-current)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-footer-stroke",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-page-color-current",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "header": {
-      "gap": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Espacement entre les éléments de l'en-tête.",
+      },
+      "color-disabled": {
+        "$value": "{semantics.actions.low.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur d'un numéro de page désactivé.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-header-gap)"
+              "WEB": "var(--ui-paginator-page-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-header-gap",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-page-color-disabled",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "mask": {
-      "background": {
-        "$value": "{primitives.black.50}",
+      },
+      "surface-current": {
+        "$value": "{semantics.navigation.high.surface.active}",
         "$type": "color",
-        "$description": "Assombrissement de l'arrière-plan.",
+        "$description": "Fond de la page courante, tenu dans tous les états.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -16110,45 +21087,46 @@
               "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-mask-background)"
+              "WEB": "var(--ui-paginator-page-surface-current)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-mask-background",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-page-surface-current",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
       },
-      "padding": {
-        "$value": "{metrics.units.lg}",
-        "$type": "dimension",
-        "$description": "Inset entre le bord de l'écran et le dialogue.",
+      "surface-disabled": {
+        "$value": "{semantics.actions.low.surface.disabled}",
+        "$type": "color",
+        "$description": "Fond d'un numéro de page désactivé.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-mask-padding)"
+              "WEB": "var(--ui-paginator-page-surface-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-mask-padding",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-page-surface-disabled",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "resize-handle": {
+    "report": {
       "color": {
         "$value": "{semantics.global.text.muted}",
         "$type": "color",
-        "$description": "Couleur de la poignée de redimensionnement.",
+        "$description": "Couleur du rapport « 1 - 10 sur 120 ».",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -16156,21 +21134,72 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-resize-handle-color)"
+              "WEB": "var(--ui-paginator-report-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-resize-handle-color",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-paginator-report-color",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
             "descriptionSource": "scss"
           }
         }
-      },
+      }
+    },
+    "slot": {
+      "color": {
+        "$value": "{semantics.global.text.muted}",
+        "$type": "color",
+        "$description": "Couleur du texte des zones libres de début et de fin.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-paginator-slot-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-paginator-slot-color",
+            "component": "ui-paginator",
+            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "weight": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_WEIGHT",
+            "FONT_STYLE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-paginator-weight)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-paginator-weight",
+          "component": "ui-paginator",
+          "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "popover": {
+    "arrow": {
       "size": {
-        "$value": "16px",
+        "$value": "8px",
         "$type": "dimension",
-        "$description": "Taille de la poignée de redimensionnement.",
+        "$description": "Diamètre de la flèche, synchronisé avec `ARROW_GAP` dans le `.tsx`",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -16178,341 +21207,457 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-modal-resize-handle-size)"
+              "WEB": "var(--ui-popover-arrow-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-resize-handle-size",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
+            "cssVar": "--ui-popover-arrow-size",
+            "component": "ui-popover",
+            "entryPoint": "@4sh/ui-kit-react/ui-popover",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "stroke": {
-      "$value": "{semantics.global.border.subtle}",
+    "color": {
+      "$value": "{semantics.global.text.default}",
       "$type": "color",
-      "$description": "Couleur de bordure de la boîte.",
+      "$description": "Couleur du texte du panneau.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "COLOR",
           "scopes": [
-            "STROKE_COLOR"
+            "ALL_FILLS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-modal-stroke)"
+            "WEB": "var(--ui-popover-color)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-modal-stroke",
-          "component": "ui-modal",
-          "entryPoint": "@4sh/ui-kit-react/ui-modal",
+          "cssVar": "--ui-popover-color",
+          "component": "ui-popover",
+          "entryPoint": "@4sh/ui-kit-react/ui-popover",
           "descriptionSource": "scss"
         }
       }
     },
-    "stroke-width": {
-      "$value": "{metrics.stroke.sm}",
+    "max-width": {
+      "$value": "320px",
       "$type": "dimension",
-      "$description": "Épaisseur de bordure du dialogue.",
+      "$description": "Largeur maximale avant retour à la ligne (le placement garde le panneau dans le viewport)",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "STROKE_FLOAT"
+            "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-modal-stroke-width)"
+            "WEB": "var(--ui-popover-max-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-modal-stroke-width",
-          "component": "ui-modal",
-          "entryPoint": "@4sh/ui-kit-react/ui-modal",
+          "cssVar": "--ui-popover-max-width",
+          "component": "ui-popover",
+          "entryPoint": "@4sh/ui-kit-react/ui-popover",
           "descriptionSource": "scss"
         }
       }
     },
-    "surface": {
-      "$value": "{semantics.global.background.default}",
-      "$type": "color",
-      "$description": "Fond de la boîte.",
+    "padding": {
+      "$value": "{metrics.units.md}",
+      "$type": "dimension",
+      "$description": "Espacement interne du contenu projeté",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-modal-surface)"
+            "WEB": "var(--ui-popover-padding)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-modal-surface",
-          "component": "ui-modal",
-          "entryPoint": "@4sh/ui-kit-react/ui-modal",
+          "cssVar": "--ui-popover-padding",
+          "component": "ui-popover",
+          "entryPoint": "@4sh/ui-kit-react/ui-popover",
           "descriptionSource": "scss"
         }
       }
     },
-    "title": {
-      "font-family": {
-        "$value": "{typography.fontFamily.title}",
-        "$type": "string",
-        "$description": "Famille typographique du titre.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "STRING",
-            "scopes": [
-              "FONT_FAMILY"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-modal-title-font-family)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-modal-title-font-family",
-            "component": "ui-modal",
-            "entryPoint": "@4sh/ui-kit-react/ui-modal",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "weight": {
-      "$value": "{typography.weight.bold}",
-      "$type": "string",
-      "$description": "Graisse du titre.",
+    "stroke": {
+      "$value": "{semantics.global.border.default}",
+      "$type": "color",
+      "$description": "Couleur de bordure du panneau.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "COLOR",
           "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-modal-weight)"
+            "WEB": "var(--ui-popover-stroke)"
           }
         },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-modal-weight",
-          "component": "ui-modal",
-          "entryPoint": "@4sh/ui-kit-react/ui-modal",
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-popover-stroke",
+          "component": "ui-popover",
+          "entryPoint": "@4sh/ui-kit-react/ui-popover",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "motion": {
-    "distance": {
-      "$value": "8px",
-      "$type": "dimension",
-      "$description": "Distance du glissement d’entrée et de sortie, pour un exemplaire.",
+    },
+    "surface": {
+      "$value": "{semantics.global.background.default}",
+      "$type": "color",
+      "$description": "Fond du panneau.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "FRAME_FILL",
+            "SHAPE_FILL"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-motion-distance)"
+            "WEB": "var(--ui-popover-surface)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-motion-distance",
-          "component": "système de motion",
-          "entryPoint": "@4sh/ui-kit/motion",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "poignée transverse (motion / panneaux flottants) : à poser sur l’élément visé, un composant qui a son propre réglage l’emporte."
+          "cssVar": "--ui-popover-surface",
+          "component": "ui-popover",
+          "entryPoint": "@4sh/ui-kit-react/ui-popover",
+          "descriptionSource": "scss"
         }
       }
     }
   },
-  "nudger": {
-    "font-family": {
-      "$value": "{typography.fontFamily.title}",
-      "$type": "string",
-      "$description": "Famille typographique de la valeur.",
+  "progress-bar": {
+    "color": {
+      "$value": "{semantics.informative.highlightHigh.Surface.default}",
+      "$type": "color",
+      "$description": "Couleur de la barre de progression.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "COLOR",
           "scopes": [
-            "FONT_FAMILY"
+            "ALL_FILLS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-nudger-font-family)"
+            "WEB": "var(--ui-progress-bar-color)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-nudger-font-family",
-          "component": "ui-nudger",
-          "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+          "cssVar": "--ui-progress-bar-color",
+          "component": "ui-progress-bar",
+          "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
           "descriptionSource": "scss"
         }
       }
     },
-    "gap": {
-      "$value": "{metrics.units.default}",
-      "$type": "dimension",
-      "$description": "Espacement entre les boutons et la valeur.",
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du libellé.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "GAP"
+            "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-nudger-gap)"
+            "WEB": "var(--ui-progress-bar-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-nudger-gap",
-          "component": "ui-nudger",
-          "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+          "cssVar": "--ui-progress-bar-font-family",
+          "component": "ui-progress-bar",
+          "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
           "descriptionSource": "scss"
         }
       }
     },
-    "value": {
+    "label": {
       "color": {
-        "$value": "{semantics.form.high.content.default}",
+        "$value": "{semantics.global.text.default}",
         "$type": "color",
-        "$description": "Couleur de la valeur.",
+        "$description": "Couleur du libellé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "TEXT_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-nudger-value-color)"
+              "WEB": "var(--ui-progress-bar-label-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-nudger-value-color",
-            "component": "ui-nudger",
-            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "cssVar": "--ui-progress-bar-label-color",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
             "descriptionSource": "scss"
           }
         }
       },
-      "color-disabled": {
-        "$value": "{semantics.form.high.content.disabled}",
+      "weight": {
+        "$value": "{typography.weight.regular}",
+        "$type": "string",
+        "$description": "Graisse du libellé.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-progress-bar-label-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-progress-bar-label-weight",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "track": {
+      "height": {
+        "$value": "8px",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-progress-bar`, track.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-progress-bar-track-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-progress-bar-track-height",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "height-small": {
+        "$value": "4px",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-progress-bar`, track (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-progress-bar-track-height-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-progress-bar-track-height-small",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "radius": {
+        "$value": "{metrics.radius.xs}",
+        "$type": "dimension",
+        "$description": "Rayon des coins de `ui-progress-bar`, track.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-progress-bar-track-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-progress-bar-track-radius",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "radius-small": {
+        "$value": "{metrics.radius.2xs}",
+        "$type": "dimension",
+        "$description": "Rayon des coins de `ui-progress-bar`, track (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-progress-bar-track-radius-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-progress-bar-track-radius-small",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "surface": {
+        "$value": "{semantics.global.border.default}",
         "$type": "color",
-        "$description": "Couleur de la valeur désactivée.",
+        "$description": "Fond de la piste (et d'un segment non franchi).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-nudger-value-color-disabled)"
+              "WEB": "var(--ui-progress-bar-track-surface)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-nudger-value-color-disabled",
-            "component": "ui-nudger",
-            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "cssVar": "--ui-progress-bar-track-surface",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
             "descriptionSource": "scss"
           }
         }
-      },
-      "color-invalid": {
-        "$value": "{semantics.form.error.content.default}",
+      }
+    },
+    "value-label": {
+      "color": {
+        "$value": "{semantics.informative.highlightHigh.Content.default}",
         "$type": "color",
-        "$description": "Couleur de la valeur en erreur.",
+        "$description": "Couleur du libellé de valeur posé sur la barre.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "TEXT_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-progress-bar-value-label-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-progress-bar-value-label-color",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse du libellé de valeur.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-nudger-value-color-invalid)"
+              "WEB": "var(--ui-progress-bar-value-label-weight)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-nudger-value-color-invalid",
-            "component": "ui-nudger",
-            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+            "cssVar": "--ui-progress-bar-value-label-weight",
+            "component": "ui-progress-bar",
+            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
             "descriptionSource": "scss"
           }
         }
-      },
-      "font-size": {
-        "$value": "{responsive.size.typography.title.xl}",
+      }
+    }
+  },
+  "radio": {
+    "box": {
+      "radius": {
+        "$value": "{metrics.radius.full}",
         "$type": "dimension",
-        "$description": "Taille de police de `ui-nudger`, value.",
+        "$description": "Rayon des coins du cercle.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_SIZE"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-nudger-value-font-size)"
+              "WEB": "var(--ui-radio-box-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-nudger-value-font-size",
-            "component": "ui-nudger",
-            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-radio-box-radius",
+            "component": "ui-radio",
+            "entryPoint": "@4sh/ui-kit-react/ui-radio",
+            "descriptionSource": "scss"
           }
         }
       },
-      "font-size-small": {
-        "$value": "{responsive.size.typography.title.lg}",
+      "size": {
+        "$value": "{responsive.size.components.2xs}",
         "$type": "dimension",
-        "$description": "Taille de police de `ui-nudger`, value (variante `small`).",
+        "$description": "Diamètre du cercle radio",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_SIZE"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-nudger-value-font-size-small)"
+              "WEB": "var(--ui-radio-box-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-nudger-value-font-size-small",
-            "component": "ui-nudger",
-            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-radio-box-size",
+            "component": "ui-radio",
+            "entryPoint": "@4sh/ui-kit-react/ui-radio",
+            "descriptionSource": "scss"
           }
         }
-      },
-      "min-width": {
-        "$value": "40px",
+      }
+    },
+    "dot": {
+      "radius": {
+        "$value": "{metrics.radius.full}",
         "$type": "dimension",
-        "$description": "Largeur minimale de `ui-nudger`, value.",
+        "$description": "Rayon des coins du point sélectionné.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-nudger-value-min-width)"
+              "WEB": "var(--ui-radio-dot-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-nudger-value-min-width",
-            "component": "ui-nudger",
-            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-radio-dot-radius",
+            "component": "ui-radio",
+            "entryPoint": "@4sh/ui-kit-react/ui-radio",
+            "descriptionSource": "scss"
           }
         }
       },
-      "min-width-small": {
-        "$value": "32px",
+      "size": {
+        "$value": "{metrics.units.md}",
         "$type": "dimension",
-        "$description": "Largeur minimale de `ui-nudger`, value (variante `small`).",
+        "$description": "Diamètre du point sélectionné (spécifique radio)",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -16520,47 +21665,44 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-nudger-value-min-width-small)"
+              "WEB": "var(--ui-radio-dot-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-nudger-value-min-width-small",
-            "component": "ui-nudger",
-            "entryPoint": "@4sh/ui-kit-react/ui-nudger",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-radio-dot-size",
+            "component": "ui-radio",
+            "entryPoint": "@4sh/ui-kit-react/ui-radio",
+            "descriptionSource": "scss"
           }
         }
       }
     },
-    "weight": {
-      "$value": "{typography.weight.bold}",
-      "$type": "string",
-      "$description": "Graisse de la valeur.",
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-nudger-weight)"
+            "WEB": "var(--ui-radio-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-nudger-weight",
-          "component": "ui-nudger",
-          "entryPoint": "@4sh/ui-kit-react/ui-nudger",
+          "cssVar": "--ui-radio-focus-ring-width",
+          "component": "ui-radio",
+          "entryPoint": "@4sh/ui-kit-react/ui-radio",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "overlay-panel": {
+    },
     "font-family": {
       "$value": "{typography.fontFamily.base}",
       "$type": "string",
-      "$description": "Famille typographique du contenu des panneaux flottants.",
+      "$description": "Famille typographique du libellé.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "STRING",
@@ -16568,167 +21710,66 @@
             "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-overlay-panel-font-family)"
+            "WEB": "var(--ui-radio-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-overlay-panel-font-family",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-radio-font-family",
+          "component": "ui-radio",
+          "entryPoint": "@4sh/ui-kit-react/ui-radio",
           "descriptionSource": "scss"
         }
       }
     },
-    "padding": {
-      "$value": "{metrics.units.sm}",
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
       "$type": "dimension",
-      "$description": "Gouttière interne des panneaux flottants.",
+      "$description": "Taille de police du label.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "GAP"
+            "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-overlay-panel-padding)"
+            "WEB": "var(--ui-radio-font-size)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-overlay-panel-padding",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-radio-font-size",
+          "component": "ui-radio",
+          "entryPoint": "@4sh/ui-kit-react/ui-radio",
           "descriptionSource": "scss"
         }
       }
     },
-    "radius": {
-      "$value": "{metrics.radius.default}",
+    "gap": {
+      "$value": "{metrics.units.sm}",
       "$type": "dimension",
-      "$description": "Rayon des coins des panneaux flottants.",
+      "$description": "Espace entre le cercle et le label",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "CORNER_RADIUS"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-overlay-panel-radius)"
+            "WEB": "var(--ui-radio-gap)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-overlay-panel-radius",
-          "component": "ui-config",
-          "entryPoint": "@4sh/ui-kit-react/styles",
+          "cssVar": "--ui-radio-gap",
+          "component": "ui-radio",
+          "entryPoint": "@4sh/ui-kit-react/ui-radio",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "overlay": {
-    "radius": {
-      "$value": "{metrics.radius.default}",
-      "$type": "dimension",
-      "$description": "Rayon des coins du panneau flottant, pour un exemplaire.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "CORNER_RADIUS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-overlay-radius)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-overlay-radius",
-          "component": "panneaux flottants",
-          "entryPoint": "@4sh/ui-kit/overlay",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "poignée transverse (motion / panneaux flottants) : à poser sur l’élément visé, un composant qui a son propre réglage l’emporte."
-        }
-      }
-    },
-    "stroke": {
-      "$value": "{semantics.form.high.stroke.default}",
-      "$type": "color",
-      "$description": "Couleur de bordure du panneau flottant, pour un exemplaire.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-overlay-stroke)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-overlay-stroke",
-          "component": "panneaux flottants",
-          "entryPoint": "@4sh/ui-kit/overlay",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "poignée transverse (motion / panneaux flottants) : à poser sur l’élément visé, un composant qui a son propre réglage l’emporte."
-        }
-      }
-    },
-    "surface": {
-      "$value": "{semantics.form.high.surface.default}",
-      "$type": "color",
-      "$description": "Fond du panneau flottant, pour un exemplaire.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-overlay-surface)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-overlay-surface",
-          "component": "panneaux flottants",
-          "entryPoint": "@4sh/ui-kit/overlay",
-          "descriptionSource": "scss",
-          "perInstance": true,
-          "note": "poignée transverse (motion / panneaux flottants) : à poser sur l’élément visé, un composant qui a son propre réglage l’emporte."
-        }
-      }
-    }
-  },
-  "paginator": {
-    "bar": {
-      "gap": {
-        "$value": "{metrics.units.2xl}",
-        "$type": "dimension",
-        "$description": "Écart entre les blocs de la barre.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-paginator-bar-gap)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-bar-gap",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
-            "descriptionSource": "scss"
-          }
-        }
-      }
     },
-    "blocks": {
+    "label": {
       "gap": {
-        "$value": "{metrics.units.default}",
+        "$value": "{metrics.units.2xs}",
         "$type": "dimension",
-        "$description": "Écart interne d'un bloc.",
+        "$description": "Espacement libellé ↔ marqueur requis.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -16736,45 +21777,23 @@
               "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-blocks-gap)"
+              "WEB": "var(--ui-radio-label-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-blocks-gap",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-radio-label-gap",
+            "component": "ui-radio",
+            "entryPoint": "@4sh/ui-kit-react/ui-radio",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "button": {
+    "required": {
       "color": {
-        "$value": "{semantics.navigation.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur du texte d'un bouton.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-color",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "color-focus": {
-        "$value": "{semantics.navigation.high.content.focused}",
+        "$value": "{semantics.informative.errorLow.content.default}",
         "$type": "color",
-        "$description": "Couleur du texte d'un bouton au focus clavier.",
+        "$description": "Couleur du marqueur « requis ».",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -16782,43 +21801,47 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-color-focus)"
+              "WEB": "var(--ui-radio-required-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-color-focus",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-radio-required-color",
+            "component": "ui-radio",
+            "entryPoint": "@4sh/ui-kit-react/ui-radio",
             "descriptionSource": "scss"
           }
         }
-      },
-      "color-hover": {
-        "$value": "{semantics.navigation.high.content.hover}",
-        "$type": "color",
-        "$description": "Couleur du texte d'un bouton au survol.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-color-hover)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-color-hover",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
-            "descriptionSource": "scss"
+      }
+    },
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
+      "$type": "dimension",
+      "$description": "Épaisseur de la bordure du cercle.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-radio-stroke-width)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-radio-stroke-width",
+          "component": "ui-radio",
+          "entryPoint": "@4sh/ui-kit-react/ui-radio",
+          "descriptionSource": "scss"
         }
-      },
-      "color-pressed": {
-        "$value": "{semantics.navigation.high.content.pressed}",
+      }
+    }
+  },
+  "rating": {
+    "focus-ring": {
+      "color": {
+        "$value": "{semantics.form.high.stroke.focused}",
         "$type": "color",
-        "$description": "Couleur du texte d'un bouton enfoncé.",
+        "$description": "Teinte de l'anneau de focus (rendu à 50 % d'opacité).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -16826,21 +21849,21 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-color-pressed)"
+              "WEB": "var(--ui-rating-focus-ring-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-color-pressed",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-focus-ring-color",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
       },
       "radius": {
-        "$value": "{metrics.radius.default}",
+        "$value": "{metrics.radius.sm}",
         "$type": "dimension",
-        "$description": "Rayon des boutons.",
+        "$description": "Rayon de l'anneau de focus autour des étoiles.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -16848,137 +21871,267 @@
               "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-radius)"
+              "WEB": "var(--ui-rating-focus-ring-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-radius",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-focus-ring-radius",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
-      },
-      "size": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Taille des contrôles, et largeur minimale des numéros.",
+      }
+    },
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-rating-focus-ring-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-rating-focus-ring-width",
+          "component": "ui-rating",
+          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Espacement entre étoiles.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-rating-gap)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-rating-gap",
+          "component": "ui-rating",
+          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap-lg": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Espacement entre étoiles, taille `lg`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-rating-gap-lg)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-rating-gap-lg",
+          "component": "ui-rating",
+          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap-md": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Espacement entre étoiles, taille `md`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-rating-gap-md)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-rating-gap-md",
+          "component": "ui-rating",
+          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap-sm": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Espacement entre étoiles, taille `sm`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-rating-gap-sm)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-rating-gap-sm",
+          "component": "ui-rating",
+          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap-xl": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Espacement entre étoiles, taille `xl`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-rating-gap-xl)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-rating-gap-xl",
+          "component": "ui-rating",
+          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "icon": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur d'une étoile vide.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-size)"
+              "WEB": "var(--ui-rating-icon-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-size",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-icon-color",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.navigation.high.surface.default}",
+      "color-disabled": {
+        "$value": "{semantics.form.low.content.disabled}",
         "$type": "color",
-        "$description": "Fond d'un bouton (flèche comme numéro de page).",
+        "$description": "Couleur d'une étoile vide, composant désactivé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-surface)"
+              "WEB": "var(--ui-rating-icon-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-surface",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-icon-color-disabled",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-focus": {
-        "$value": "{semantics.navigation.high.surface.focused}",
+      "color-invalid": {
+        "$value": "{semantics.form.error.content.default}",
         "$type": "color",
-        "$description": "Fond d'un bouton au focus clavier.",
+        "$description": "Couleur d'une étoile vide en erreur.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-surface-focus)"
+              "WEB": "var(--ui-rating-icon-color-invalid)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-surface-focus",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-icon-color-invalid",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-hover": {
-        "$value": "{semantics.navigation.high.surface.hover}",
-        "$type": "color",
-        "$description": "Fond d'un bouton au survol.",
+      "padding": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Inset de la zone de clic d'une étoile.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-surface-hover)"
+              "WEB": "var(--ui-rating-icon-padding)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-surface-hover",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-icon-padding",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-pressed": {
-        "$value": "{semantics.navigation.high.surface.pressed}",
-        "$type": "color",
-        "$description": "Fond d'un bouton enfoncé.",
+      "radius": {
+        "$value": "{metrics.radius.full}",
+        "$type": "dimension",
+        "$description": "Rayon de la zone de clic d'une étoile.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-surface-pressed)"
+              "WEB": "var(--ui-rating-icon-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-surface-pressed",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-icon-radius",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "button-focus-ring": {
+    "icon-fill": {
       "color": {
-        "$value": "{semantics.navigation.high.stroke.focused}",
+        "$value": "{semantics.form.high.content.checked}",
         "$type": "color",
-        "$description": "Couleur de l'anneau de focus d'un bouton.",
+        "$description": "Couleur de la portion remplie d'une étoile.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -16986,23 +22139,21 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-button-focus-ring-color)"
+              "WEB": "var(--ui-rating-icon-fill-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-button-focus-ring-color",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-icon-fill-color",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "control": {
+      },
       "color-disabled": {
-        "$value": "{semantics.navigation.high.content.disabled}",
+        "$value": "{semantics.form.high.content.disabled}",
         "$type": "color",
-        "$description": "Couleur d'une flèche désactivée.",
+        "$description": "Couleur de la portion remplie, composant désactivé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -17010,114 +22161,159 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-control-color-disabled)"
+              "WEB": "var(--ui-rating-icon-fill-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-control-color-disabled",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-icon-fill-color-disabled",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-disabled": {
-        "$value": "{semantics.navigation.high.surface.disabled}",
+      "color-invalid": {
+        "$value": "{semantics.form.error.content.checked}",
         "$type": "color",
-        "$description": "Fond d'une flèche désactivée.",
+        "$description": "Couleur de la portion remplie en erreur.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-control-surface-disabled)"
+              "WEB": "var(--ui-rating-icon-fill-color-invalid)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-control-surface-disabled",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-rating-icon-fill-color-invalid",
+            "component": "ui-rating",
+            "entryPoint": "@4sh/ui-kit-react/ui-rating",
             "descriptionSource": "scss"
           }
         }
       }
-    },
-    "ellipsis": {
-      "color": {
-        "$value": "{semantics.navigation.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur des points de suspension.",
+    }
+  },
+  "read-only": {
+    "field": {
+      "height": {
+        "$value": "{responsive.size.components.default}",
+        "$type": "dimension",
+        "$description": "Hauteur de la zone de valeur en `matchField` (taille `default`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-ellipsis-color)"
+              "WEB": "var(--ui-read-only-field-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-ellipsis-color",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-read-only-field-height",
+            "component": "ui-read-only",
+            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "height-small": {
+        "$value": "{responsive.size.components.sm}",
+        "$type": "dimension",
+        "$description": "Idem pour la taille `small`.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-read-only-field-height-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-read-only-field-height-small",
+            "component": "ui-read-only",
+            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du composant.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-read-only-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-read-only-font-family",
+          "component": "ui-read-only",
+          "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
       "$type": "dimension",
-      "$description": "Anneau de focus des boutons.",
+      "$description": "Taille de police de `ui-read-only`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "STROKE_FLOAT"
+            "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-paginator-focus-ring-width)"
+            "WEB": "var(--ui-read-only-font-size)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-paginator-focus-ring-width",
-          "component": "ui-paginator",
-          "entryPoint": "@4sh/ui-kit-react/ui-paginator",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-read-only-font-size",
+          "component": "ui-read-only",
+          "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+          "descriptionSource": "derived"
         }
       }
     },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du composant.",
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-read-only` (variante `small`).",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_FAMILY"
+            "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-paginator-font-family)"
+            "WEB": "var(--ui-read-only-font-size-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-paginator-font-family",
-          "component": "ui-paginator",
-          "entryPoint": "@4sh/ui-kit-react/ui-paginator",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-read-only-font-size-small",
+          "component": "ui-read-only",
+          "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+          "descriptionSource": "derived"
         }
       }
     },
-    "numbers": {
+    "label": {
       "gap": {
         "$value": "{metrics.units.sm}",
         "$type": "dimension",
-        "$description": "Écart entre deux numéros de page.",
+        "$description": "Écart label→valeur en mode `matchField` (sinon compact).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -17125,115 +22321,45 @@
               "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-numbers-gap)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-numbers-gap",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "page": {
-      "color-current": {
-        "$value": "{semantics.navigation.high.content.active}",
-        "$type": "color",
-        "$description": "Couleur de la page courante : elle n'est lisible que sur le fond `surface-active` qui l'accompagne.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-paginator-page-color-current)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-page-color-current",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "color-disabled": {
-        "$value": "{semantics.actions.low.content.disabled}",
-        "$type": "color",
-        "$description": "Couleur d'un numéro de page désactivé.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-paginator-page-color-disabled)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-page-color-disabled",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "surface-current": {
-        "$value": "{semantics.navigation.high.surface.active}",
-        "$type": "color",
-        "$description": "Fond de la page courante, tenu dans tous les états.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-paginator-page-surface-current)"
+              "WEB": "var(--ui-read-only-label-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-page-surface-current",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-read-only-label-gap",
+            "component": "ui-read-only",
+            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-disabled": {
-        "$value": "{semantics.actions.low.surface.disabled}",
-        "$type": "color",
-        "$description": "Fond d'un numéro de page désactivé.",
+      "width": {
+        "$value": "auto",
+        "$type": "string",
+        "$description": "Largeur de la colonne du libellé en disposition horizontale (`auto` : elle épouse le texte).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-page-surface-disabled)"
+              "WEB": "var(--ui-read-only-label-width)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-page-surface-disabled",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-read-only-label-width",
+            "component": "ui-read-only",
+            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "report": {
+    "value": {
       "color": {
-        "$value": "{semantics.global.text.muted}",
+        "$value": "{semantics.global.text.default}",
         "$type": "color",
-        "$description": "Couleur du rapport « 1 - 10 sur 120 ».",
+        "$description": "Couleur de la valeur.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -17241,23 +22367,21 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-report-color)"
+              "WEB": "var(--ui-read-only-value-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-report-color",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-read-only-value-color",
+            "component": "ui-read-only",
+            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "slot": {
-      "color": {
+      },
+      "color-fallback": {
         "$value": "{semantics.global.text.muted}",
         "$type": "color",
-        "$description": "Couleur du texte des zones libres de début et de fin.",
+        "$description": "Couleur de la valeur de repli (« — »).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -17265,22 +22389,22 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-paginator-slot-color)"
+              "WEB": "var(--ui-read-only-value-color-fallback)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-paginator-slot-color",
-            "component": "ui-paginator",
-            "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+            "cssVar": "--ui-read-only-value-color-fallback",
+            "component": "ui-read-only",
+            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
             "descriptionSource": "scss"
           }
         }
       }
     },
     "weight": {
-      "$value": "{typography.weight.bold}",
+      "$value": "{typography.weight.regular}",
       "$type": "string",
-      "$description": "Graisse du texte.",
+      "$description": "Graisse de la valeur.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "STRING",
@@ -17289,436 +22413,402 @@
             "FONT_STYLE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-paginator-weight)"
+            "WEB": "var(--ui-read-only-weight)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-paginator-weight",
-          "component": "ui-paginator",
-          "entryPoint": "@4sh/ui-kit-react/ui-paginator",
+          "cssVar": "--ui-read-only-weight",
+          "component": "ui-read-only",
+          "entryPoint": "@4sh/ui-kit-react/ui-read-only",
           "descriptionSource": "scss"
         }
       }
     }
   },
-  "popover": {
-    "arrow": {
-      "size": {
-        "$value": "8px",
-        "$type": "dimension",
-        "$description": "Diamètre de la flèche, synchronisé avec `ARROW_GAP` dans le `.tsx`",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-popover-arrow-size)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-popover-arrow-size",
-            "component": "ui-popover",
-            "entryPoint": "@4sh/ui-kit-react/ui-popover",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "color": {
-      "$value": "{semantics.global.text.default}",
-      "$type": "color",
-      "$description": "Couleur du texte du panneau.",
+  "segment-control": {
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus des segments.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "ALL_FILLS"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-popover-color)"
+            "WEB": "var(--ui-segment-control-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-popover-color",
-          "component": "ui-popover",
-          "entryPoint": "@4sh/ui-kit-react/ui-popover",
+          "cssVar": "--ui-segment-control-focus-ring-width",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
           "descriptionSource": "scss"
         }
       }
     },
-    "max-width": {
-      "$value": "320px",
-      "$type": "dimension",
-      "$description": "Largeur maximale avant retour à la ligne (le placement garde le panneau dans le viewport)",
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du composant.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "WIDTH_HEIGHT"
+            "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-popover-max-width)"
+            "WEB": "var(--ui-segment-control-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-popover-max-width",
-          "component": "ui-popover",
-          "entryPoint": "@4sh/ui-kit-react/ui-popover",
+          "cssVar": "--ui-segment-control-font-family",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
           "descriptionSource": "scss"
         }
       }
     },
-    "padding": {
-      "$value": "{metrics.units.md}",
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
       "$type": "dimension",
-      "$description": "Espacement interne du contenu projeté",
+      "$description": "Taille de police de `ui-segment-control`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "GAP"
+            "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-popover-padding)"
+            "WEB": "var(--ui-segment-control-font-size)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-popover-padding",
-          "component": "ui-popover",
-          "entryPoint": "@4sh/ui-kit-react/ui-popover",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-segment-control-font-size",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+          "descriptionSource": "derived"
         }
       }
     },
-    "stroke": {
-      "$value": "{semantics.global.border.default}",
-      "$type": "color",
-      "$description": "Couleur de bordure du panneau.",
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-segment-control` (variante `small`).",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "STROKE_COLOR"
+            "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-popover-stroke)"
+            "WEB": "var(--ui-segment-control-font-size-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-popover-stroke",
-          "component": "ui-popover",
-          "entryPoint": "@4sh/ui-kit-react/ui-popover",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "surface": {
-      "$value": "{semantics.global.background.default}",
-      "$type": "color",
-      "$description": "Fond du panneau.",
+          "cssVar": "--ui-segment-control-font-size-small",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "gap": {
+      "$value": "0",
+      "$type": "number",
+      "$description": "Espacement entre les segments.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL"
+            "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-popover-surface)"
+            "WEB": "var(--ui-segment-control-gap)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-popover-surface",
-          "component": "ui-popover",
-          "entryPoint": "@4sh/ui-kit-react/ui-popover",
+          "cssVar": "--ui-segment-control-gap",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
           "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "progress-bar": {
-    "color": {
-      "$value": "{semantics.informative.highlightHigh.Surface.default}",
-      "$type": "color",
-      "$description": "Couleur de la barre de progression.",
+    },
+    "min-height": {
+      "$value": "44px",
+      "$type": "dimension",
+      "$description": "Hauteur minimale de `ui-segment-control`.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "COLOR",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "ALL_FILLS"
+            "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-progress-bar-color)"
+            "WEB": "var(--ui-segment-control-min-height)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-progress-bar-color",
-          "component": "ui-progress-bar",
-          "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-segment-control-min-height",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+          "descriptionSource": "derived"
         }
       }
     },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du libellé.",
+    "min-height-small": {
+      "$value": "40px",
+      "$type": "dimension",
+      "$description": "Hauteur minimale de `ui-segment-control` (variante `small`).",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "STRING",
+          "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_FAMILY"
+            "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-progress-bar-font-family)"
+            "WEB": "var(--ui-segment-control-min-height-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-progress-bar-font-family",
-          "component": "ui-progress-bar",
-          "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
-          "descriptionSource": "scss"
+          "cssVar": "--ui-segment-control-min-height-small",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+          "descriptionSource": "derived"
         }
       }
     },
-    "label": {
+    "option": {
       "color": {
-        "$value": "{semantics.global.text.default}",
+        "$value": "{semantics.actions.low.content.default}",
         "$type": "color",
-        "$description": "Couleur du libellé.",
+        "$description": "Couleur du texte d'un segment non sélectionné.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "TEXT_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-label-color)"
+              "WEB": "var(--ui-segment-control-option-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-label-color",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "cssVar": "--ui-segment-control-option-color",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
       },
-      "weight": {
-        "$value": "{typography.weight.regular}",
-        "$type": "string",
-        "$description": "Graisse du libellé.",
+      "color-disabled": {
+        "$value": "{semantics.actions.low.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un segment désactivé.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "STRING",
+            "resolvedType": "COLOR",
             "scopes": [
-              "FONT_WEIGHT",
-              "FONT_STYLE"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-label-weight)"
+              "WEB": "var(--ui-segment-control-option-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-label-weight",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "cssVar": "--ui-segment-control-option-color-disabled",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "track": {
-      "height": {
-        "$value": "8px",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-progress-bar`, track.",
+      },
+      "color-hover": {
+        "$value": "{semantics.actions.low.content.hover}",
+        "$type": "color",
+        "$description": "Couleur du texte au survol.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-track-height)"
+              "WEB": "var(--ui-segment-control-option-color-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-track-height",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-segment-control-option-color-hover",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "height-small": {
-        "$value": "4px",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-progress-bar`, track (variante `small`).",
+      "color-pressed": {
+        "$value": "{semantics.actions.low.content.pressed}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un segment enfoncé.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-track-height-small)"
+              "WEB": "var(--ui-segment-control-option-color-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-track-height-small",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-segment-control-option-color-pressed",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "radius": {
-        "$value": "{metrics.radius.xs}",
-        "$type": "dimension",
-        "$description": "Rayon des coins de `ui-progress-bar`, track.",
+      "color-selected": {
+        "$value": "{semantics.actions.high.content.default}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un segment sélectionné.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "CORNER_RADIUS"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-track-radius)"
+              "WEB": "var(--ui-segment-control-option-color-selected)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-track-radius",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-segment-control-option-color-selected",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "scss"
           }
         }
       },
-      "radius-small": {
-        "$value": "{metrics.radius.2xs}",
-        "$type": "dimension",
-        "$description": "Rayon des coins de `ui-progress-bar`, track (variante `small`).",
+      "color-selected-disabled": {
+        "$value": "{semantics.actions.high.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur du texte d'un segment sélectionné et désactivé.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "CORNER_RADIUS"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-track-radius-small)"
+              "WEB": "var(--ui-segment-control-option-color-selected-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-track-radius-small",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-segment-control-option-color-selected-disabled",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "scss"
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.global.border.default}",
-        "$type": "color",
-        "$description": "Fond de la piste (et d'un segment non franchi).",
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement icône et libellé dans un segment.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-track-surface)"
+              "WEB": "var(--ui-segment-control-option-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-track-surface",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
+            "cssVar": "--ui-segment-control-option-gap",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "value-label": {
-      "color": {
-        "$value": "{semantics.informative.highlightHigh.Content.default}",
-        "$type": "color",
-        "$description": "Couleur du libellé de valeur posé sur la barre.",
+      },
+      "min-height": {
+        "$value": "36px",
+        "$type": "dimension",
+        "$description": "Hauteur minimale de `ui-segment-control`, option.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "TEXT_FILL"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-value-label-color)"
+              "WEB": "var(--ui-segment-control-option-min-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-value-label-color",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-segment-control-option-min-height",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "derived"
           }
         }
       },
-      "weight": {
-        "$value": "{typography.weight.bold}",
-        "$type": "string",
-        "$description": "Graisse du libellé de valeur.",
+      "min-height-small": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Hauteur minimale de `ui-segment-control`, option (variante `small`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "STRING",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_WEIGHT",
-              "FONT_STYLE"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-progress-bar-value-label-weight)"
+              "WEB": "var(--ui-segment-control-option-min-height-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-progress-bar-value-label-weight",
-            "component": "ui-progress-bar",
-            "entryPoint": "@4sh/ui-kit-react/ui-progress-bar",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-segment-control-option-min-height-small",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "derived"
           }
         }
-      }
-    }
-  },
-  "radio": {
-    "box": {
-      "radius": {
-        "$value": "{metrics.radius.full}",
+      },
+      "min-width": {
+        "$value": "36px",
         "$type": "dimension",
-        "$description": "Rayon des coins du cercle.",
+        "$description": "Largeur minimale de `ui-segment-control`, option.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "CORNER_RADIUS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-radio-box-radius)"
+              "WEB": "var(--ui-segment-control-option-min-width)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-radio-box-radius",
-            "component": "ui-radio",
-            "entryPoint": "@4sh/ui-kit-react/ui-radio",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-segment-control-option-min-width",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "derived"
           }
         }
       },
-      "size": {
-        "$value": "{responsive.size.components.2xs}",
+      "min-width-small": {
+        "$value": "32px",
         "$type": "dimension",
-        "$description": "Diamètre du cercle radio",
+        "$description": "Largeur minimale de `ui-segment-control`, option (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -17726,296 +22816,210 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-radio-box-size)"
+              "WEB": "var(--ui-segment-control-option-min-width-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-radio-box-size",
-            "component": "ui-radio",
-            "entryPoint": "@4sh/ui-kit-react/ui-radio",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-segment-control-option-min-width-small",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "derived"
           }
         }
-      }
-    },
-    "dot": {
-      "radius": {
-        "$value": "{metrics.radius.full}",
+      },
+      "padding-x": {
+        "$value": "{metrics.units.default}",
         "$type": "dimension",
-        "$description": "Rayon des coins du point sélectionné.",
+        "$description": "Inset horizontal de `ui-segment-control`, option.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "CORNER_RADIUS"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-radio-dot-radius)"
+              "WEB": "var(--ui-segment-control-option-padding-x)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-radio-dot-radius",
-            "component": "ui-radio",
-            "entryPoint": "@4sh/ui-kit-react/ui-radio",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-segment-control-option-padding-x",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "derived"
           }
         }
       },
-      "size": {
+      "padding-x-small": {
         "$value": "{metrics.units.md}",
         "$type": "dimension",
-        "$description": "Diamètre du point sélectionné (spécifique radio)",
+        "$description": "Inset horizontal de `ui-segment-control`, option (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-radio-dot-size)"
+              "WEB": "var(--ui-segment-control-option-padding-x-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-radio-dot-size",
-            "component": "ui-radio",
-            "entryPoint": "@4sh/ui-kit-react/ui-radio",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-radio-focus-ring-width)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-radio-focus-ring-width",
-          "component": "ui-radio",
-          "entryPoint": "@4sh/ui-kit-react/ui-radio",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du libellé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_FAMILY"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-radio-font-family)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-radio-font-family",
-          "component": "ui-radio",
-          "entryPoint": "@4sh/ui-kit-react/ui-radio",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-size": {
-      "$value": "{responsive.size.typography.text.default}",
-      "$type": "dimension",
-      "$description": "Taille de police du label.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-radio-font-size)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-radio-font-size",
-          "component": "ui-radio",
-          "entryPoint": "@4sh/ui-kit-react/ui-radio",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "gap": {
-      "$value": "{metrics.units.sm}",
-      "$type": "dimension",
-      "$description": "Espace entre le cercle et le label",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-radio-gap)"
+            "cssVar": "--ui-segment-control-option-padding-x-small",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-radio-gap",
-          "component": "ui-radio",
-          "entryPoint": "@4sh/ui-kit-react/ui-radio",
-          "descriptionSource": "scss"
         }
-      }
-    },
-    "label": {
-      "gap": {
-        "$value": "{metrics.units.2xs}",
+      },
+      "radius": {
+        "$value": "{metrics.radius.sm}",
         "$type": "dimension",
-        "$description": "Espacement libellé ↔ marqueur requis.",
+        "$description": "Rayon des coins d'un segment.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-radio-label-gap)"
+              "WEB": "var(--ui-segment-control-option-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-radio-label-gap",
-            "component": "ui-radio",
-            "entryPoint": "@4sh/ui-kit-react/ui-radio",
+            "cssVar": "--ui-segment-control-option-radius",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "required": {
-      "color": {
-        "$value": "{semantics.informative.errorLow.content.default}",
+      },
+      "surface-disabled": {
+        "$value": "{semantics.actions.high.surface.disabled}",
         "$type": "color",
-        "$description": "Couleur du marqueur « requis ».",
+        "$description": "Fond d'un segment sélectionné et désactivé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-radio-required-color)"
+              "WEB": "var(--ui-segment-control-option-surface-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-radio-required-color",
-            "component": "ui-radio",
-            "entryPoint": "@4sh/ui-kit-react/ui-radio",
+            "cssVar": "--ui-segment-control-option-surface-disabled",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "stroke-width": {
-      "$value": "{metrics.stroke.default}",
-      "$type": "dimension",
-      "$description": "Épaisseur de la bordure du cercle.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-radio-stroke-width)"
+      },
+      "surface-hover": {
+        "$value": "{semantics.actions.low.surface.hover}",
+        "$type": "color",
+        "$description": "Fond d'un segment au survol.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-segment-control-option-surface-hover)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-segment-control-option-surface-hover",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-radio-stroke-width",
-          "component": "ui-radio",
-          "entryPoint": "@4sh/ui-kit-react/ui-radio",
-          "descriptionSource": "scss"
         }
-      }
-    }
-  },
-  "rating": {
-    "focus-ring": {
-      "color": {
-        "$value": "{semantics.form.high.stroke.focused}",
+      },
+      "surface-pressed": {
+        "$value": "{semantics.actions.low.surface.pressed}",
         "$type": "color",
-        "$description": "Teinte de l'anneau de focus (rendu à 50 % d'opacité).",
+        "$description": "Fond d'un segment enfoncé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-rating-focus-ring-color)"
+              "WEB": "var(--ui-segment-control-option-surface-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-focus-ring-color",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-segment-control-option-surface-pressed",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "radius": {
-        "$value": "{metrics.radius.sm}",
-        "$type": "dimension",
-        "$description": "Rayon de l'anneau de focus autour des étoiles.",
+      "surface-selected": {
+        "$value": "{semantics.actions.high.surface.default}",
+        "$type": "color",
+        "$description": "Fond d'un segment sélectionné, mode `multiple` (sans indicateur glissant).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "CORNER_RADIUS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-rating-focus-ring-radius)"
+              "WEB": "var(--ui-segment-control-option-surface-selected)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-focus-ring-radius",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
+            "cssVar": "--ui-segment-control-option-surface-selected",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-rating-focus-ring-width)"
+    "option-focus-ring": {
+      "color": {
+        "$value": "{semantics.actions.low.stroke.focused}",
+        "$type": "color",
+        "$description": "Couleur de l'anneau de focus d'un segment.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-segment-control-option-focus-ring-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-segment-control-option-focus-ring-color",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-rating-focus-ring-width",
-          "component": "ui-rating",
-          "entryPoint": "@4sh/ui-kit-react/ui-rating",
-          "descriptionSource": "scss"
         }
       }
     },
-    "gap": {
-      "$value": "{metrics.units.2xs}",
+    "padding": {
+      "$value": "{metrics.units.xs}",
       "$type": "dimension",
-      "$description": "Espacement entre étoiles.",
+      "$description": "Gouttière interne autour des segments.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -18023,244 +23027,252 @@
             "GAP"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-rating-gap)"
+            "WEB": "var(--ui-segment-control-padding)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-rating-gap",
-          "component": "ui-rating",
-          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "cssVar": "--ui-segment-control-padding",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
           "descriptionSource": "scss"
         }
       }
     },
-    "gap-lg": {
-      "$value": "{metrics.units.2xs}",
+    "radius": {
+      "$value": "{metrics.radius.md}",
       "$type": "dimension",
-      "$description": "Espacement entre étoiles, taille `lg`.",
+      "$description": "Rayon des coins de la piste.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "GAP"
+            "CORNER_RADIUS"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-rating-gap-lg)"
+            "WEB": "var(--ui-segment-control-radius)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-rating-gap-lg",
-          "component": "ui-rating",
-          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "cssVar": "--ui-segment-control-radius",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
           "descriptionSource": "scss"
         }
       }
     },
-    "gap-md": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Espacement entre étoiles, taille `md`.",
+    "stroke": {
+      "$value": "{semantics.global.border.default}",
+      "$type": "color",
+      "$description": "Couleur de bordure de la piste.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "GAP"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-rating-gap-md)"
+            "WEB": "var(--ui-segment-control-stroke)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-rating-gap-md",
-          "component": "ui-rating",
-          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "cssVar": "--ui-segment-control-stroke",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
           "descriptionSource": "scss"
         }
       }
     },
-    "gap-sm": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Espacement entre étoiles, taille `sm`.",
+    "stroke-invalid": {
+      "$value": "{semantics.form.error.stroke.default}",
+      "$type": "color",
+      "$description": "Couleur de bordure de la piste en erreur.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "GAP"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-rating-gap-sm)"
+            "WEB": "var(--ui-segment-control-stroke-invalid)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-rating-gap-sm",
-          "component": "ui-rating",
-          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "cssVar": "--ui-segment-control-stroke-invalid",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
           "descriptionSource": "scss"
         }
       }
     },
-    "gap-xl": {
-      "$value": "{metrics.units.2xs}",
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
       "$type": "dimension",
-      "$description": "Espacement entre étoiles, taille `xl`.",
+      "$description": "Épaisseur de la bordure de la piste.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "GAP"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-rating-gap-xl)"
+            "WEB": "var(--ui-segment-control-stroke-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-rating-gap-xl",
-          "component": "ui-rating",
-          "entryPoint": "@4sh/ui-kit-react/ui-rating",
+          "cssVar": "--ui-segment-control-stroke-width",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
           "descriptionSource": "scss"
         }
       }
     },
-    "icon": {
-      "color": {
-        "$value": "{semantics.form.low.content.default}",
-        "$type": "color",
-        "$description": "Couleur d'une étoile vide.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-rating-icon-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-icon-color",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "color-disabled": {
-        "$value": "{semantics.form.low.content.disabled}",
-        "$type": "color",
-        "$description": "Couleur d'une étoile vide, composant désactivé.",
+    "thumb": {
+      "radius": {
+        "$value": "{metrics.radius.sm}",
+        "$type": "dimension",
+        "$description": "Rayon des coins de l'indicateur glissant.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-rating-icon-color-disabled)"
+              "WEB": "var(--ui-segment-control-thumb-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-icon-color-disabled",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
+            "cssVar": "--ui-segment-control-thumb-radius",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
       },
-      "color-invalid": {
-        "$value": "{semantics.form.error.content.default}",
+      "surface": {
+        "$value": "{semantics.actions.high.surface.default}",
         "$type": "color",
-        "$description": "Couleur d'une étoile vide en erreur.",
+        "$description": "Fond de l'indicateur glissant.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-rating-icon-color-invalid)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-icon-color-invalid",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "padding": {
-        "$value": "{metrics.units.2xs}",
-        "$type": "dimension",
-        "$description": "Inset de la zone de clic d'une étoile.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-rating-icon-padding)"
+              "WEB": "var(--ui-segment-control-thumb-surface)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-icon-padding",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
+            "cssVar": "--ui-segment-control-thumb-surface",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
       },
-      "radius": {
-        "$value": "{metrics.radius.full}",
-        "$type": "dimension",
-        "$description": "Rayon de la zone de clic d'une étoile.",
+      "surface-disabled": {
+        "$value": "{semantics.actions.high.surface.disabled}",
+        "$type": "color",
+        "$description": "Fond de l'indicateur glissant désactivé.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "CORNER_RADIUS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-rating-icon-radius)"
+              "WEB": "var(--ui-segment-control-thumb-surface-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-icon-radius",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
+            "cssVar": "--ui-segment-control-thumb-surface-disabled",
+            "component": "ui-segment-control",
+            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "icon-fill": {
-      "color": {
-        "$value": "{semantics.form.high.content.checked}",
-        "$type": "color",
-        "$description": "Couleur de la portion remplie d'une étoile.",
+    "weight": {
+      "$value": "{typography.weight.regular}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_WEIGHT",
+            "FONT_STYLE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-segment-control-weight)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-segment-control-weight",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "weight-selected": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_WEIGHT",
+            "FONT_STYLE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-segment-control-weight-selected)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-segment-control-weight-selected",
+          "component": "ui-segment-control",
+          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "select": {
+    "checkbox-icon": {
+      "size": {
+        "$value": "{responsive.size.typography.icon.sm}",
+        "$type": "dimension",
+        "$description": "Taille de la coche dans la case (mode `checkbox`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-rating-icon-fill-color)"
+              "WEB": "var(--ui-select-checkbox-icon-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-icon-fill-color",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
+            "cssVar": "--ui-select-checkbox-icon-size",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      },
-      "color-disabled": {
-        "$value": "{semantics.form.high.content.disabled}",
+      }
+    },
+    "checkbox-marker": {
+      "color": {
+        "$value": "{semantics.form.high.content.checked}",
         "$type": "color",
-        "$description": "Couleur de la portion remplie, composant désactivé.",
+        "$description": "Couleur de la coche de la case.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -18268,47 +23280,45 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-rating-icon-fill-color-disabled)"
+              "WEB": "var(--ui-select-checkbox-marker-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-icon-fill-color-disabled",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
+            "cssVar": "--ui-select-checkbox-marker-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      },
-      "color-invalid": {
-        "$value": "{semantics.form.error.content.checked}",
-        "$type": "color",
-        "$description": "Couleur de la portion remplie en erreur.",
+      }
+    },
+    "checkbox": {
+      "radius": {
+        "$value": "{metrics.radius.xs}",
+        "$type": "dimension",
+        "$description": "Rayon de la case visuelle (mode `checkbox`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-rating-icon-fill-color-invalid)"
+              "WEB": "var(--ui-select-checkbox-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-rating-icon-fill-color-invalid",
-            "component": "ui-rating",
-            "entryPoint": "@4sh/ui-kit-react/ui-rating",
+            "cssVar": "--ui-select-checkbox-radius",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      }
-    }
-  },
-  "read-only": {
-    "field": {
-      "height": {
-        "$value": "{responsive.size.components.default}",
+      },
+      "size": {
+        "$value": "18px",
         "$type": "dimension",
-        "$description": "Hauteur de la zone de valeur en `matchField` (taille `default`).",
+        "$description": "Taille de la case visuelle (mode `checkbox`)",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -18316,382 +23326,159 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-read-only-field-height)"
+              "WEB": "var(--ui-select-checkbox-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-read-only-field-height",
-            "component": "ui-read-only",
-            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+            "cssVar": "--ui-select-checkbox-size",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "height-small": {
-        "$value": "{responsive.size.components.sm}",
-        "$type": "dimension",
-        "$description": "Idem pour la taille `small`.",
+      "stroke": {
+        "$value": "{semantics.form.high.stroke.default}",
+        "$type": "color",
+        "$description": "Couleur de bordure de la case (mode `multiple`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-read-only-field-height-small)"
+              "WEB": "var(--ui-select-checkbox-stroke)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-read-only-field-height-small",
-            "component": "ui-read-only",
-            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+            "cssVar": "--ui-select-checkbox-stroke",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du composant.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_FAMILY"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-read-only-font-family)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-read-only-font-family",
-          "component": "ui-read-only",
-          "entryPoint": "@4sh/ui-kit-react/ui-read-only",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-size": {
-      "$value": "{responsive.size.typography.text.default}",
-      "$type": "dimension",
-      "$description": "Taille de police de `ui-read-only`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-read-only-font-size)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-read-only-font-size",
-          "component": "ui-read-only",
-          "entryPoint": "@4sh/ui-kit-react/ui-read-only",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
-      "$type": "dimension",
-      "$description": "Taille de police de `ui-read-only` (variante `small`).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-read-only-font-size-small)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-read-only-font-size-small",
-          "component": "ui-read-only",
-          "entryPoint": "@4sh/ui-kit-react/ui-read-only",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "label": {
-      "gap": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Écart label→valeur en mode `matchField` (sinon compact).",
+      },
+      "stroke-checked": {
+        "$value": "{semantics.form.high.stroke.checked}",
+        "$type": "color",
+        "$description": "Couleur de bordure de la case cochée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-read-only-label-gap)"
+              "WEB": "var(--ui-select-checkbox-stroke-checked)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-read-only-label-gap",
-            "component": "ui-read-only",
-            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+            "cssVar": "--ui-select-checkbox-stroke-checked",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "width": {
-        "$value": "auto",
-        "$type": "string",
-        "$description": "Largeur de la colonne du libellé en disposition horizontale (`auto` : elle épouse le texte).",
+      "stroke-disabled": {
+        "$value": "{semantics.form.high.stroke.disabled}",
+        "$type": "color",
+        "$description": "Couleur de bordure de la case désactivée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-read-only-label-width)"
+              "WEB": "var(--ui-select-checkbox-stroke-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-read-only-label-width",
-            "component": "ui-read-only",
-            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+            "cssVar": "--ui-select-checkbox-stroke-disabled",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "value": {
-      "color": {
-        "$value": "{semantics.global.text.default}",
+      },
+      "surface": {
+        "$value": "{semantics.form.high.surface.default}",
         "$type": "color",
-        "$description": "Couleur de la valeur.",
+        "$description": "Fond de la case (mode `multiple`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-read-only-value-color)"
+              "WEB": "var(--ui-select-checkbox-surface)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-read-only-value-color",
-            "component": "ui-read-only",
-            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+            "cssVar": "--ui-select-checkbox-surface",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "color-fallback": {
-        "$value": "{semantics.global.text.muted}",
+      "surface-disabled": {
+        "$value": "{semantics.form.high.surface.disabled}",
         "$type": "color",
-        "$description": "Couleur de la valeur de repli (« — »).",
+        "$description": "Fond de la case désactivée.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-read-only-value-color-fallback)"
+              "WEB": "var(--ui-select-checkbox-surface-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-read-only-value-color-fallback",
-            "component": "ui-read-only",
-            "entryPoint": "@4sh/ui-kit-react/ui-read-only",
+            "cssVar": "--ui-select-checkbox-surface-disabled",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "weight": {
-      "$value": "{typography.weight.regular}",
-      "$type": "string",
-      "$description": "Graisse de la valeur.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-read-only-weight)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-read-only-weight",
-          "component": "ui-read-only",
-          "entryPoint": "@4sh/ui-kit-react/ui-read-only",
-          "descriptionSource": "scss"
-        }
-      }
-    }
-  },
-  "segment-control": {
-    "focus-ring-width": {
-      "$value": "{metrics.units.2xs}",
-      "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus des segments.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-focus-ring-width)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-focus-ring-width",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du composant.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_FAMILY"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-font-family)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-font-family",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "font-size": {
-      "$value": "{responsive.size.typography.text.default}",
-      "$type": "dimension",
-      "$description": "Taille de police de `ui-segment-control`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-font-size)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-font-size",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
-      "$type": "dimension",
-      "$description": "Taille de police de `ui-segment-control` (variante `small`).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "FONT_SIZE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-font-size-small)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-font-size-small",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "gap": {
-      "$value": "0",
-      "$type": "number",
-      "$description": "Espacement entre les segments.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-gap)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-gap",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "min-height": {
-      "$value": "44px",
-      "$type": "dimension",
-      "$description": "Hauteur minimale de `ui-segment-control`.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "WIDTH_HEIGHT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-min-height)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-min-height",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "derived"
-        }
-      }
-    },
-    "min-height-small": {
-      "$value": "40px",
-      "$type": "dimension",
-      "$description": "Hauteur minimale de `ui-segment-control` (variante `small`).",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "WIDTH_HEIGHT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-min-height-small)"
+    "checkmark": {
+      "color": {
+        "$value": "{semantics.form.high.content.checked}",
+        "$type": "color",
+        "$description": "Couleur de la coche de l'option sélectionnée.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-checkmark-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-checkmark-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-min-height-small",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "derived"
         }
       }
     },
-    "option": {
+    "clear": {
       "color": {
-        "$value": "{semantics.actions.low.content.default}",
+        "$value": "{semantics.form.low.content.default}",
         "$type": "color",
-        "$description": "Couleur du texte d'un segment non sélectionné.",
+        "$description": "Couleur du bouton d'effacement.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -18699,21 +23486,21 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-color)"
+              "WEB": "var(--ui-select-clear-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-color",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-clear-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
       "color-disabled": {
-        "$value": "{semantics.actions.low.content.disabled}",
+        "$value": "{semantics.form.high.content.disabled}",
         "$type": "color",
-        "$description": "Couleur du texte d'un segment désactivé.",
+        "$description": "Couleur du bouton d'effacement désactivé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -18721,21 +23508,43 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-color-disabled)"
+              "WEB": "var(--ui-select-clear-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-color-disabled",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-clear-color-disabled",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-focus": {
+        "$value": "{semantics.form.high.content.focused}",
+        "$type": "color",
+        "$description": "Couleur du bouton d'effacement au focus clavier.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-clear-color-focus)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-clear-color-focus",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
       "color-hover": {
-        "$value": "{semantics.actions.low.content.hover}",
+        "$value": "{semantics.form.high.content.hover}",
         "$type": "color",
-        "$description": "Couleur du texte au survol.",
+        "$description": "Couleur du bouton d'effacement au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -18743,23 +23552,67 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-color-hover)"
+              "WEB": "var(--ui-select-clear-color-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-color-hover",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-select-clear-color-hover",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
         }
       },
-      "color-pressed": {
-        "$value": "{semantics.actions.low.content.pressed}",
+      "radius": {
+        "$value": "{metrics.radius.full}",
+        "$type": "dimension",
+        "$description": "Rayon du bouton d'effacement.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-clear-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-clear-radius",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "size": {
+        "$value": "{responsive.size.components.2xs}",
+        "$type": "dimension",
+        "$description": "Taille du bouton d'effacement.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-clear-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-clear-size",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "clear-focus-ring": {
+      "color": {
+        "$value": "{semantics.form.high.stroke.focused}",
         "$type": "color",
-        "$description": "Couleur du texte d'un segment enfoncé.",
+        "$description": "Teinte de l'anneau de focus du bouton d'effacement.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -18767,341 +23620,540 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-color-pressed)"
+              "WEB": "var(--ui-select-clear-focus-ring-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-color-pressed",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-select-clear-focus-ring-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "empty": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur du message « aucun résultat ».",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-empty-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-empty-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "filter": {
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espacement icône ↔ saisie dans le filtre.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-filter-gap)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-filter-gap",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "height": {
+        "$value": "{responsive.size.components.sm}",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-select`, filter.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-filter-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-filter-height",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "height-small": {
+        "$value": "{responsive.size.components.xs}",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-select`, filter (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-filter-height-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-filter-height-small",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "padding-x": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Inset horizontal du contenu du filtre.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-filter-padding-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-filter-padding-x",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
         }
       },
-      "color-selected": {
-        "$value": "{semantics.actions.high.content.default}",
+      "stroke": {
+        "$value": "{semantics.form.high.stroke.default}",
         "$type": "color",
-        "$description": "Couleur du texte d'un segment sélectionné.",
+        "$description": "Couleur de bordure du champ de filtre.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-color-selected)"
+              "WEB": "var(--ui-select-filter-stroke)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-color-selected",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-filter-stroke",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "color-selected-disabled": {
-        "$value": "{semantics.actions.high.content.disabled}",
+      "stroke-focus": {
+        "$value": "{semantics.form.high.stroke.focused}",
         "$type": "color",
-        "$description": "Couleur du texte d'un segment sélectionné et désactivé.",
+        "$description": "Couleur de bordure du filtre au focus.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-color-selected-disabled)"
+              "WEB": "var(--ui-select-filter-stroke-focus)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-color-selected-disabled",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-filter-stroke-focus",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "gap": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Espacement icône et libellé dans un segment.",
+      "stroke-hover": {
+        "$value": "{semantics.form.high.stroke.hover}",
+        "$type": "color",
+        "$description": "Couleur de bordure du filtre au survol.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-gap)"
+              "WEB": "var(--ui-select-filter-stroke-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-gap",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-filter-stroke-hover",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "min-height": {
-        "$value": "36px",
+      "stroke-width": {
+        "$value": "{metrics.stroke.sm}",
         "$type": "dimension",
-        "$description": "Hauteur minimale de `ui-segment-control`, option.",
+        "$description": "Épaisseur de la bordure du filtre.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "STROKE_FLOAT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-min-height)"
+              "WEB": "var(--ui-select-filter-stroke-width)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-min-height",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-select-filter-stroke-width",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
         }
       },
-      "min-height-small": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Hauteur minimale de `ui-segment-control`, option (variante `small`).",
+      "surface": {
+        "$value": "{semantics.form.high.surface.default}",
+        "$type": "color",
+        "$description": "Fond du champ de filtre.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-min-height-small)"
+              "WEB": "var(--ui-select-filter-surface)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-min-height-small",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-select-filter-surface",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
         }
-      },
-      "min-width": {
-        "$value": "36px",
-        "$type": "dimension",
-        "$description": "Largeur minimale de `ui-segment-control`, option.",
+      }
+    },
+    "filter-icon": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur de la loupe du filtre.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-min-width)"
+              "WEB": "var(--ui-select-filter-icon-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-min-width",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-select-filter-icon-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
         }
-      },
-      "min-width-small": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Largeur minimale de `ui-segment-control`, option (variante `small`).",
+      }
+    },
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus (bouton d'effacement).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-select-focus-ring-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-select-focus-ring-width",
+          "component": "ui-select",
+          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du déclencheur.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-select-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-select-font-family",
+          "component": "ui-select",
+          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-select`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-select-font-size)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-select-font-size",
+          "component": "ui-select",
+          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille de police de `ui-select` (variante `small`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-select-font-size-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-select-font-size-small",
+          "component": "ui-select",
+          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "group": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
+        "$type": "color",
+        "$description": "Couleur d'un en-tête de groupe.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-min-width-small)"
+              "WEB": "var(--ui-select-group-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-min-width-small",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-select-group-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
         }
       },
-      "padding-x": {
-        "$value": "{metrics.units.default}",
+      "font-size": {
+        "$value": "{responsive.size.typography.text.md}",
         "$type": "dimension",
-        "$description": "Inset horizontal de `ui-segment-control`, option.",
+        "$description": "Taille de police de `ui-select`, group.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-padding-x)"
+              "WEB": "var(--ui-select-group-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-padding-x",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-group-font-size",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "derived"
           }
         }
       },
-      "padding-x-small": {
-        "$value": "{metrics.units.md}",
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.sm}",
         "$type": "dimension",
-        "$description": "Inset horizontal de `ui-segment-control`, option (variante `small`).",
+        "$description": "Taille de police de `ui-select`, group (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-padding-x-small)"
+              "WEB": "var(--ui-select-group-font-size-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-padding-x-small",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-group-font-size-small",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "derived"
           }
         }
       },
-      "radius": {
-        "$value": "{metrics.radius.sm}",
+      "height": {
+        "$value": "32px",
         "$type": "dimension",
-        "$description": "Rayon des coins d'un segment.",
+        "$description": "Hauteur de `ui-select`, group.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "CORNER_RADIUS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-radius)"
+              "WEB": "var(--ui-select-group-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-radius",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-select-group-height",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "derived"
           }
         }
       },
-      "surface-disabled": {
-        "$value": "{semantics.actions.high.surface.disabled}",
-        "$type": "color",
-        "$description": "Fond d'un segment sélectionné et désactivé.",
+      "height-small": {
+        "$value": "24px",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-select`, group (variante `small`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-surface-disabled)"
+              "WEB": "var(--ui-select-group-height-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-surface-disabled",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-select-group-height-small",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "derived"
           }
         }
-      },
-      "surface-hover": {
-        "$value": "{semantics.actions.low.surface.hover}",
+      }
+    },
+    "header": {
+      "color": {
+        "$value": "{semantics.form.high.content.default}",
         "$type": "color",
-        "$description": "Fond d'un segment au survol.",
+        "$description": "Couleur du texte des zones d'en-tête et de pied projetées.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-surface-hover)"
+              "WEB": "var(--ui-select-header-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-surface-hover",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-select-header-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
         }
       },
-      "surface-pressed": {
-        "$value": "{semantics.actions.low.surface.pressed}",
-        "$type": "color",
-        "$description": "Fond d'un segment enfoncé.",
+      "padding-x": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Inset horizontal des zones d'en-tête et de pied projetées.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-surface-pressed)"
+              "WEB": "var(--ui-select-header-padding-x)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-surface-pressed",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+            "cssVar": "--ui-select-header-padding-x",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
           }
         }
       },
-      "surface-selected": {
-        "$value": "{semantics.actions.high.surface.default}",
-        "$type": "color",
-        "$description": "Fond d'un segment sélectionné, mode `multiple` (sans indicateur glissant).",
+      "padding-y": {
+        "$value": "{metrics.units.xs}",
+        "$type": "dimension",
+        "$description": "Inset vertical des zones d'en-tête et de pied projetées.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-surface-selected)"
+              "WEB": "var(--ui-select-header-padding-y)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-surface-selected",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-header-padding-y",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "option-focus-ring": {
+    "option": {
       "color": {
-        "$value": "{semantics.actions.low.stroke.focused}",
+        "$value": "{semantics.form.high.content.default}",
         "$type": "color",
-        "$description": "Couleur de l'anneau de focus d'un segment.",
+        "$description": "Couleur du texte d'une option.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -19109,301 +24161,175 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-option-focus-ring-color)"
+              "WEB": "var(--ui-select-option-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-option-focus-ring-color",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-            "descriptionSource": "scss",
-            "perInstance": true,
-            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
-          }
-        }
-      }
-    },
-    "padding": {
-      "$value": "{metrics.units.xs}",
-      "$type": "dimension",
-      "$description": "Gouttière interne autour des segments.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "GAP"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-padding)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-padding",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "radius": {
-      "$value": "{metrics.radius.md}",
-      "$type": "dimension",
-      "$description": "Rayon des coins de la piste.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "CORNER_RADIUS"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-radius)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-radius",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "stroke": {
-      "$value": "{semantics.global.border.default}",
-      "$type": "color",
-      "$description": "Couleur de bordure de la piste.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-stroke)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-stroke",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "stroke-invalid": {
-      "$value": "{semantics.form.error.stroke.default}",
-      "$type": "color",
-      "$description": "Couleur de bordure de la piste en erreur.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "COLOR",
-          "scopes": [
-            "STROKE_COLOR"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-stroke-invalid)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-stroke-invalid",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "stroke-width": {
-      "$value": "{metrics.stroke.default}",
-      "$type": "dimension",
-      "$description": "Épaisseur de la bordure de la piste.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-stroke-width)"
-          }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-stroke-width",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
-        }
-      }
-    },
-    "thumb": {
-      "radius": {
-        "$value": "{metrics.radius.sm}",
-        "$type": "dimension",
-        "$description": "Rayon des coins de l'indicateur glissant.",
+            "cssVar": "--ui-select-option-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "color-disabled": {
+        "$value": "{semantics.form.high.content.disabled}",
+        "$type": "color",
+        "$description": "Couleur du texte d'une option désactivée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "CORNER_RADIUS"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-thumb-radius)"
+              "WEB": "var(--ui-select-option-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-thumb-radius",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-option-color-disabled",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.actions.high.surface.default}",
+      "color-selected": {
+        "$value": "{semantics.form.high.content.checked}",
         "$type": "color",
-        "$description": "Fond de l'indicateur glissant.",
+        "$description": "Couleur du texte de l'option sélectionnée.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-thumb-surface)"
+              "WEB": "var(--ui-select-option-color-selected)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-thumb-surface",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-option-color-selected",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-disabled": {
-        "$value": "{semantics.actions.high.surface.disabled}",
-        "$type": "color",
-        "$description": "Fond de l'indicateur glissant désactivé.",
+      "gap": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Espace entre case/contenu/coche dans une ligne",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-segment-control-thumb-surface-disabled)"
+              "WEB": "var(--ui-select-option-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-segment-control-thumb-surface-disabled",
-            "component": "ui-segment-control",
-            "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
+            "cssVar": "--ui-select-option-gap",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      }
-    },
-    "weight": {
-      "$value": "{typography.weight.regular}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-weight)"
+      },
+      "height": {
+        "$value": "40px",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-select`, option.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-option-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-option-height",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-weight",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
         }
-      }
-    },
-    "weight-selected": {
-      "$value": "{typography.weight.bold}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-segment-control-weight-selected)"
+      },
+      "height-small": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Hauteur de `ui-select`, option (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-option-height-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-option-height-small",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "derived"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-segment-control-weight-selected",
-          "component": "ui-segment-control",
-          "entryPoint": "@4sh/ui-kit-react/ui-segment-control",
-          "descriptionSource": "scss"
         }
-      }
-    }
-  },
-  "select": {
-    "checkbox-icon": {
-      "size": {
-        "$value": "{responsive.size.typography.icon.sm}",
+      },
+      "padding-x": {
+        "$value": "{metrics.units.default}",
         "$type": "dimension",
-        "$description": "Taille de la coche dans la case (mode `checkbox`).",
+        "$description": "Inset horizontal de `ui-select`, option.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-icon-size)"
+              "WEB": "var(--ui-select-option-padding-x)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-icon-size",
+            "cssVar": "--ui-select-option-padding-x",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "descriptionSource": "derived"
           }
         }
-      }
-    },
-    "checkbox-marker": {
-      "color": {
-        "$value": "{semantics.form.high.content.checked}",
-        "$type": "color",
-        "$description": "Couleur de la coche de la case.",
+      },
+      "padding-x-small": {
+        "$value": "{metrics.units.md}",
+        "$type": "dimension",
+        "$description": "Inset horizontal de `ui-select`, option (variante `small`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-marker-color)"
+              "WEB": "var(--ui-select-option-padding-x-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-marker-color",
+            "cssVar": "--ui-select-option-padding-x-small",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "descriptionSource": "derived"
           }
         }
-      }
-    },
-    "checkbox": {
+      },
       "radius": {
-        "$value": "{metrics.radius.xs}",
+        "$value": "{metrics.radius.sm}",
         "$type": "dimension",
-        "$description": "Rayon de la case visuelle (mode `checkbox`).",
+        "$description": "Rayon d'une ligne d'option",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -19411,132 +24337,159 @@
               "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-radius)"
+              "WEB": "var(--ui-select-option-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-radius",
+            "cssVar": "--ui-select-option-radius",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "size": {
-        "$value": "18px",
-        "$type": "dimension",
-        "$description": "Taille de la case visuelle (mode `checkbox`)",
+      "surface-hover": {
+        "$value": "{semantics.global.background.default-hover}",
+        "$type": "color",
+        "$description": "Fond d'une option survolée ou active au clavier.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-size)"
+              "WEB": "var(--ui-select-option-surface-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-size",
+            "cssVar": "--ui-select-option-surface-hover",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "stroke": {
-        "$value": "{semantics.form.high.stroke.default}",
+      "surface-selected": {
+        "$value": "{semantics.form.high.surface.hover}",
         "$type": "color",
-        "$description": "Couleur de bordure de la case (mode `multiple`).",
+        "$description": "Fond de l'option sélectionnée.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-stroke)"
+              "WEB": "var(--ui-select-option-surface-selected)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-stroke",
+            "cssVar": "--ui-select-option-surface-selected",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      },
-      "stroke-checked": {
-        "$value": "{semantics.form.high.stroke.checked}",
+      }
+    },
+    "overflow": {
+      "color": {
+        "$value": "{semantics.form.low.content.default}",
         "$type": "color",
-        "$description": "Couleur de bordure de la case cochée.",
+        "$description": "Couleur de l'indicateur « +N » de débordement.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "COLOR",
+            "scopes": [
+              "ALL_FILLS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-select-overflow-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-select-overflow-color",
+            "component": "ui-select",
+            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "panel": {
+      "gap": {
+        "$value": "{metrics.units.xs}",
+        "$type": "dimension",
+        "$description": "Espacement entre les groupes du panneau.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "STROKE_COLOR"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-stroke-checked)"
+              "WEB": "var(--ui-select-panel-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-stroke-checked",
+            "cssVar": "--ui-select-panel-gap",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "stroke-disabled": {
-        "$value": "{semantics.form.high.stroke.disabled}",
-        "$type": "color",
-        "$description": "Couleur de bordure de la case désactivée.",
+      "padding": {
+        "$value": "{metrics.units.xs}",
+        "$type": "dimension",
+        "$description": "Inset du panneau d'options.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "STROKE_COLOR"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-stroke-disabled)"
+              "WEB": "var(--ui-select-panel-padding)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-stroke-disabled",
+            "cssVar": "--ui-select-panel-padding",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.form.high.surface.default}",
+      "stroke": {
+        "$value": "{semantics.form.high.stroke.default}",
         "$type": "color",
-        "$description": "Fond de la case (mode `multiple`).",
+        "$description": "Couleur de bordure du panneau d'options.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-surface)"
+              "WEB": "var(--ui-select-panel-stroke)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-surface",
+            "cssVar": "--ui-select-panel-stroke",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface-disabled": {
-        "$value": "{semantics.form.high.surface.disabled}",
+      "surface": {
+        "$value": "{semantics.form.high.surface.default}",
         "$type": "color",
-        "$description": "Fond de la case désactivée.",
+        "$description": "Fond du panneau d'options.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -19545,11 +24498,11 @@
               "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkbox-surface-disabled)"
+              "WEB": "var(--ui-select-panel-surface)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkbox-surface-disabled",
+            "cssVar": "--ui-select-panel-surface",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
@@ -19557,11 +24510,11 @@
         }
       }
     },
-    "checkmark": {
+    "placeholder": {
       "color": {
-        "$value": "{semantics.form.high.content.checked}",
+        "$value": "{semantics.form.low.content.default}",
         "$type": "color",
-        "$description": "Couleur de la coche de l'option sélectionnée.",
+        "$description": "Couleur du texte d'invite.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -19569,11 +24522,11 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-checkmark-color)"
+              "WEB": "var(--ui-select-placeholder-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-checkmark-color",
+            "cssVar": "--ui-select-placeholder-color",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
@@ -19581,55 +24534,79 @@
         }
       }
     },
-    "clear": {
-      "color": {
-        "$value": "{semantics.form.low.content.default}",
-        "$type": "color",
-        "$description": "Couleur du bouton d'effacement.",
+    "scroller": {
+      "max-height": {
+        "$value": "312px",
+        "$type": "dimension",
+        "$description": "Hauteur maximale de `ui-select`, scroller.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-clear-color)"
+              "WEB": "var(--ui-select-scroller-max-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-clear-color",
+            "cssVar": "--ui-select-scroller-max-height",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "descriptionSource": "derived"
           }
         }
       },
-      "color-disabled": {
-        "$value": "{semantics.form.high.content.disabled}",
-        "$type": "color",
-        "$description": "Couleur du bouton d'effacement désactivé.",
+      "max-height-small": {
+        "$value": "256px",
+        "$type": "dimension",
+        "$description": "Hauteur maximale de `ui-select`, scroller (variante `small`).",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "FLOAT",
             "scopes": [
-              "ALL_FILLS"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-clear-color-disabled)"
+              "WEB": "var(--ui-select-scroller-max-height-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-clear-color-disabled",
+            "cssVar": "--ui-select-scroller-max-height-small",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "descriptionSource": "derived"
           }
         }
-      },
-      "color-focus": {
-        "$value": "{semantics.form.high.content.focused}",
+      }
+    },
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
+      "$type": "dimension",
+      "$description": "Épaisseur de bordure (case visuelle)",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-select-stroke-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-select-stroke-width",
+          "component": "ui-select",
+          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "trigger": {
+      "color": {
+        "$value": "{semantics.form.high.content.default}",
         "$type": "color",
-        "$description": "Couleur du bouton d'effacement au focus clavier.",
+        "$description": "Couleur du texte du déclencheur.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -19637,21 +24614,21 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-clear-color-focus)"
+              "WEB": "var(--ui-select-trigger-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-clear-color-focus",
+            "cssVar": "--ui-select-trigger-color",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
       },
-      "color-hover": {
-        "$value": "{semantics.form.high.content.hover}",
+      "color-disabled": {
+        "$value": "{semantics.form.high.content.disabled}",
         "$type": "color",
-        "$description": "Couleur du bouton d'effacement au survol.",
+        "$description": "Couleur du texte du déclencheur désactivé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -19659,291 +24636,348 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-clear-color-hover)"
+              "WEB": "var(--ui-select-trigger-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-clear-color-hover",
+            "cssVar": "--ui-select-trigger-color-disabled",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      },
-      "radius": {
-        "$value": "{metrics.radius.full}",
+      }
+    },
+    "values": {
+      "gap": {
+        "$value": "{metrics.units.xs}",
         "$type": "dimension",
-        "$description": "Rayon du bouton d'effacement.",
+        "$description": "Espacement entre les valeurs affichées dans le déclencheur (mode `multiple`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "CORNER_RADIUS"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-clear-radius)"
+              "WEB": "var(--ui-select-values-gap)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-clear-radius",
+            "cssVar": "--ui-select-values-gap",
             "component": "ui-select",
             "entryPoint": "@4sh/ui-kit-react/ui-select",
             "descriptionSource": "scss"
           }
         }
-      },
-      "size": {
-        "$value": "{responsive.size.components.2xs}",
-        "$type": "dimension",
-        "$description": "Taille du bouton d'effacement.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-clear-size)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-clear-size",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+      }
+    },
+    "weight": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_WEIGHT",
+            "FONT_STYLE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-select-weight)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-select-weight",
+          "component": "ui-select",
+          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "descriptionSource": "scss"
+        }
+      }
+    }
+  },
+  "separator": {
+    "font-family": {
+      "$value": "{typography.fontFamily.base}",
+      "$type": "string",
+      "$description": "Famille typographique du libellé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "STRING",
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-separator-font-family)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-separator-font-family",
+          "component": "ui-separator",
+          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size": {
+      "$value": "{responsive.size.typography.text.default}",
+      "$type": "dimension",
+      "$description": "Taille du libellé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-separator-font-size)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-separator-font-size",
+          "component": "ui-separator",
+          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "font-size-small": {
+      "$value": "{responsive.size.typography.text.md}",
+      "$type": "dimension",
+      "$description": "Taille du libellé en taille `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-separator-font-size-small)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-separator-font-size-small",
+          "component": "ui-separator",
+          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "descriptionSource": "scss"
         }
       }
     },
-    "clear-focus-ring": {
-      "color": {
-        "$value": "{semantics.form.high.stroke.focused}",
-        "$type": "color",
-        "$description": "Teinte de l'anneau de focus du bouton d'effacement.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-clear-focus-ring-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-clear-focus-ring-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+    "gap": {
+      "$value": "{metrics.units.sm}",
+      "$type": "dimension",
+      "$description": "Espacement filet ↔ libellé.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-separator-gap)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-separator-gap",
+          "component": "ui-separator",
+          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "descriptionSource": "scss"
         }
       }
     },
-    "empty": {
+    "label": {
       "color": {
-        "$value": "{semantics.form.low.content.default}",
+        "$value": "{semantics.global.text.default}",
         "$type": "color",
-        "$description": "Couleur du message « aucun résultat ».",
+        "$description": "Couleur du libellé.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "TEXT_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-empty-color)"
+              "WEB": "var(--ui-separator-label-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-empty-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-separator-label-color",
+            "component": "ui-separator",
+            "entryPoint": "@4sh/ui-kit-react/ui-separator",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "filter": {
-      "gap": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Espacement icône ↔ saisie dans le filtre.",
+    "line": {
+      "stroke": {
+        "$value": "{semantics.global.border.default}",
+        "$type": "color",
+        "$description": "Couleur du trait.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-filter-gap)"
+              "WEB": "var(--ui-separator-line-stroke)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-gap",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-separator-line-stroke",
+            "component": "ui-separator",
+            "entryPoint": "@4sh/ui-kit-react/ui-separator",
             "descriptionSource": "scss"
           }
         }
-      },
-      "height": {
-        "$value": "{responsive.size.components.sm}",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-select`, filter.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-filter-height)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-height",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "derived"
-          }
-        }
-      },
-      "height-small": {
-        "$value": "{responsive.size.components.xs}",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-select`, filter (variante `small`).",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-filter-height-small)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-height-small",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "derived"
+      }
+    },
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
+      "$type": "dimension",
+      "$description": "Épaisseur du filet.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-separator-stroke-width)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-separator-stroke-width",
+          "component": "ui-separator",
+          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "descriptionSource": "scss"
         }
-      },
-      "padding-x": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Inset horizontal du contenu du filtre.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-filter-padding-x)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-padding-x",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+      }
+    },
+    "stroke-width-small": {
+      "$value": "{metrics.stroke.sm}",
+      "$type": "dimension",
+      "$description": "Épaisseur du filet en taille `small`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-separator-stroke-width-small)"
           }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-separator-stroke-width-small",
+          "component": "ui-separator",
+          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "descriptionSource": "scss"
         }
-      },
-      "stroke": {
-        "$value": "{semantics.form.high.stroke.default}",
-        "$type": "color",
-        "$description": "Couleur de bordure du champ de filtre.",
+      }
+    }
+  },
+  "sidebar": {
+    "action": {
+      "weight": {
+        "$value": "{typography.weight.regular}",
+        "$type": "string",
+        "$description": "Graisse de l'action.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "COLOR",
+            "resolvedType": "STRING",
             "scopes": [
-              "STROKE_COLOR"
+              "FONT_WEIGHT",
+              "FONT_STYLE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-filter-stroke)"
+              "WEB": "var(--ui-sidebar-action-weight)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-stroke",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-action-weight",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
-      },
-      "stroke-focus": {
-        "$value": "{semantics.form.high.stroke.focused}",
+      }
+    },
+    "backdrop": {
+      "background": {
+        "$value": "{primitives.black.50}",
         "$type": "color",
-        "$description": "Couleur de bordure du filtre au focus.",
+        "$description": "Fond du voile en présentation superposée.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-filter-stroke-focus)"
+              "WEB": "var(--ui-sidebar-backdrop-background)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-stroke-focus",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-backdrop-background",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
-      },
-      "stroke-hover": {
-        "$value": "{semantics.form.high.stroke.hover}",
+      }
+    },
+    "close": {
+      "color-hover": {
+        "$value": "{semantics.global.text.muted-hover}",
         "$type": "color",
-        "$description": "Couleur de bordure du filtre au survol.",
+        "$description": "Couleur du bouton de fermeture au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-filter-stroke-hover)"
+              "WEB": "var(--ui-sidebar-close-color-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-stroke-hover",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-close-color-hover",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
       },
-      "stroke-width": {
-        "$value": "{metrics.stroke.sm}",
+      "size": {
+        "$value": "32px",
         "$type": "dimension",
-        "$description": "Épaisseur de la bordure du filtre.",
+        "$description": "Taille de la cible tactile du bouton de fermeture.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "STROKE_FLOAT"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-filter-stroke-width)"
+              "WEB": "var(--ui-sidebar-close-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-stroke-width",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-close-size",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.form.high.surface.default}",
+      "surface-hover": {
+        "$value": "{semantics.global.background.muted-hover}",
         "$type": "color",
-        "$description": "Fond du champ de filtre.",
+        "$description": "Fond du bouton de fermeture au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -19952,23 +24986,23 @@
               "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-filter-surface)"
+              "WEB": "var(--ui-sidebar-close-surface-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-surface",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-close-surface-hover",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "filter-icon": {
+    "close-focus-ring": {
       "color": {
-        "$value": "{semantics.form.low.content.default}",
+        "$value": "{semantics.global.border.focus}",
         "$type": "color",
-        "$description": "Couleur de la loupe du filtre.",
+        "$description": "Couleur de l'anneau de focus du bouton de fermeture.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -19976,22 +25010,44 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-filter-icon-color)"
+              "WEB": "var(--ui-sidebar-close-focus-ring-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-filter-icon-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-close-focus-ring-color",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
       }
     },
+    "color": {
+      "$value": "{semantics.global.text.default}",
+      "$type": "color",
+      "$description": "Couleur du texte du panneau.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "COLOR",
+          "scopes": [
+            "ALL_FILLS"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-sidebar-color)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-sidebar-color",
+          "component": "ui-sidebar",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+          "descriptionSource": "scss"
+        }
+      }
+    },
     "focus-ring-width": {
       "$value": "{metrics.units.2xs}",
       "$type": "dimension",
-      "$description": "Épaisseur de l'anneau de focus (bouton d'effacement).",
+      "$description": "Épaisseur de l'anneau de focus.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -19999,13 +25055,13 @@
             "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-select-focus-ring-width)"
+            "WEB": "var(--ui-sidebar-focus-ring-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-select-focus-ring-width",
-          "component": "ui-select",
-          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "cssVar": "--ui-sidebar-focus-ring-width",
+          "component": "ui-sidebar-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "scss"
         }
       }
@@ -20013,7 +25069,7 @@
     "font-family": {
       "$value": "{typography.fontFamily.base}",
       "$type": "string",
-      "$description": "Famille typographique du déclencheur.",
+      "$description": "Famille typographique du composant.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "STRING",
@@ -20021,13 +25077,13 @@
             "FONT_FAMILY"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-select-font-family)"
+            "WEB": "var(--ui-sidebar-font-family)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-select-font-family",
-          "component": "ui-select",
-          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "cssVar": "--ui-sidebar-font-family",
+          "component": "ui-sidebar-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "scss"
         }
       }
@@ -20035,7 +25091,7 @@
     "font-size": {
       "$value": "{responsive.size.typography.text.default}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-select`.",
+      "$description": "Taille de police de `ui-sidebar-menu`.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -20043,13 +25099,13 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-select-font-size)"
+            "WEB": "var(--ui-sidebar-font-size)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-select-font-size",
-          "component": "ui-select",
-          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "cssVar": "--ui-sidebar-font-size",
+          "component": "ui-sidebar-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "derived"
         }
       }
@@ -20057,7 +25113,7 @@
     "font-size-small": {
       "$value": "{responsive.size.typography.text.md}",
       "$type": "dimension",
-      "$description": "Taille de police de `ui-select` (variante `small`).",
+      "$description": "Taille de police de `ui-sidebar-menu` (variante `small`).",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
@@ -20065,66 +25121,70 @@
             "FONT_SIZE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-select-font-size-small)"
+            "WEB": "var(--ui-sidebar-font-size-small)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-select-font-size-small",
-          "component": "ui-select",
-          "entryPoint": "@4sh/ui-kit-react/ui-select",
+          "cssVar": "--ui-sidebar-font-size-small",
+          "component": "ui-sidebar-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "derived"
         }
       }
     },
-    "group": {
-      "color": {
-        "$value": "{semantics.form.low.content.default}",
+    "footer": {
+      "stroke": {
+        "$value": "{semantics.global.border.subtle}",
         "$type": "color",
-        "$description": "Couleur d'un en-tête de groupe.",
+        "$description": "Couleur du trait au-dessus du pied.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-group-color)"
+              "WEB": "var(--ui-sidebar-footer-stroke)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-group-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-footer-stroke",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
-      },
-      "font-size": {
-        "$value": "{responsive.size.typography.text.md}",
+      }
+    },
+    "group": {
+      "indent": {
+        "$value": "{metrics.units.lg}",
         "$type": "dimension",
-        "$description": "Taille de police de `ui-select`, group.",
+        "$description": "Retrait des items d'un sous-groupe.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "FONT_SIZE"
+              "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-group-font-size)"
+              "WEB": "var(--ui-sidebar-group-indent)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-group-font-size",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "derived"
+            "cssVar": "--ui-sidebar-group-indent",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss"
           }
         }
-      },
-      "font-size-small": {
+      }
+    },
+    "header": {
+      "font-size": {
         "$value": "{responsive.size.typography.text.sm}",
         "$type": "dimension",
-        "$description": "Taille de police de `ui-select`, group (variante `small`).",
+        "$description": "Taille de police de `ui-sidebar-menu`, header.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -20132,223 +25192,91 @@
               "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-group-font-size-small)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-group-font-size-small",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "derived"
-          }
-        }
-      },
-      "height": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$description": "Hauteur de `ui-select`, group.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-group-height)"
+              "WEB": "var(--ui-sidebar-header-font-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-group-height",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-header-font-size",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "derived"
           }
         }
       },
-      "height-small": {
-        "$value": "24px",
+      "font-size-small": {
+        "$value": "{responsive.size.typography.text.sm}",
         "$type": "dimension",
-        "$description": "Hauteur de `ui-select`, group (variante `small`).",
+        "$description": "Taille de police de `ui-sidebar-menu`, header (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "FONT_SIZE"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-group-height-small)"
+              "WEB": "var(--ui-sidebar-header-font-size-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-group-height-small",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-header-font-size-small",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "derived"
           }
         }
-      }
-    },
-    "header": {
-      "color": {
-        "$value": "{semantics.form.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur du texte des zones d'en-tête et de pied projetées.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-header-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-header-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "padding-x": {
-        "$value": "{metrics.units.sm}",
-        "$type": "dimension",
-        "$description": "Inset horizontal des zones d'en-tête et de pied projetées.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-header-padding-x)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-header-padding-x",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "padding-y": {
-        "$value": "{metrics.units.xs}",
-        "$type": "dimension",
-        "$description": "Inset vertical des zones d'en-tête et de pied projetées.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-header-padding-y)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-header-padding-y",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "option": {
-      "color": {
-        "$value": "{semantics.form.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur du texte d'une option.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-option-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "color-disabled": {
-        "$value": "{semantics.form.high.content.disabled}",
-        "$type": "color",
-        "$description": "Couleur du texte d'une option désactivée.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-option-color-disabled)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-color-disabled",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
-          }
-        }
       },
-      "color-selected": {
-        "$value": "{semantics.form.high.content.checked}",
+      "stroke": {
+        "$value": "{semantics.global.border.subtle}",
         "$type": "color",
-        "$description": "Couleur du texte de l'option sélectionnée.",
+        "$description": "Couleur du trait sous l'en-tête.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-color-selected)"
+              "WEB": "var(--ui-sidebar-header-stroke)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-color-selected",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-header-stroke",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
-      },
-      "gap": {
-        "$value": "{metrics.units.sm}",
+      }
+    },
+    "icon-slot": {
+      "size": {
+        "$value": "20px",
         "$type": "dimension",
-        "$description": "Espace entre case/contenu/coche dans une ligne",
+        "$description": "Largeur réservée à l'icône d'un item.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
             "scopes": [
-              "GAP"
+              "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-gap)"
+              "WEB": "var(--ui-sidebar-icon-slot-size)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-gap",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-icon-slot-size",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
-      },
+      }
+    },
+    "item": {
       "height": {
         "$value": "40px",
         "$type": "dimension",
-        "$description": "Hauteur de `ui-select`, option.",
+        "$description": "Hauteur de `ui-sidebar-menu`, item.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -20356,13 +25284,13 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-height)"
+              "WEB": "var(--ui-sidebar-item-height)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-height",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-item-height",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "derived"
           }
         }
@@ -20370,7 +25298,7 @@
       "height-small": {
         "$value": "32px",
         "$type": "dimension",
-        "$description": "Hauteur de `ui-select`, option (variante `small`).",
+        "$description": "Hauteur de `ui-sidebar-menu`, item (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -20378,21 +25306,21 @@
               "WIDTH_HEIGHT"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-height-small)"
+              "WEB": "var(--ui-sidebar-item-height-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-height-small",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-item-height-small",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "derived"
           }
         }
       },
       "padding-x": {
-        "$value": "{metrics.units.default}",
+        "$value": "{metrics.units.md}",
         "$type": "dimension",
-        "$description": "Inset horizontal de `ui-select`, option.",
+        "$description": "Inset horizontal de `ui-sidebar-menu`, item.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -20400,21 +25328,21 @@
               "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-padding-x)"
+              "WEB": "var(--ui-sidebar-item-padding-x)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-padding-x",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-item-padding-x",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "derived"
           }
         }
       },
       "padding-x-small": {
-        "$value": "{metrics.units.md}",
+        "$value": "{metrics.units.sm}",
         "$type": "dimension",
-        "$description": "Inset horizontal de `ui-select`, option (variante `small`).",
+        "$description": "Inset horizontal de `ui-sidebar-menu`, item (variante `small`).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -20422,13 +25350,13 @@
               "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-padding-x-small)"
+              "WEB": "var(--ui-sidebar-item-padding-x-small)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-padding-x-small",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-item-padding-x-small",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "derived"
           }
         }
@@ -20436,7 +25364,7 @@
       "radius": {
         "$value": "{metrics.radius.sm}",
         "$type": "dimension",
-        "$description": "Rayon d'une ligne d'option",
+        "$description": "Rayon d'un item.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -20444,69 +25372,71 @@
               "CORNER_RADIUS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-radius)"
+              "WEB": "var(--ui-sidebar-item-radius)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-radius",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-item-radius",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
-      },
-      "surface-hover": {
-        "$value": "{semantics.global.background.default-hover}",
+      }
+    },
+    "menu-action": {
+      "color": {
+        "$value": "{semantics.navigation.high.content.default}",
         "$type": "color",
-        "$description": "Fond d'une option survolée ou active au clavier.",
+        "$description": "Couleur d'une action de menu.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-surface-hover)"
+              "WEB": "var(--ui-sidebar-menu-action-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-surface-hover",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-action-color",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "surface-selected": {
-        "$value": "{semantics.form.high.surface.hover}",
+      "color-active": {
+        "$value": "{semantics.navigation.high.content.active}",
         "$type": "color",
-        "$description": "Fond de l'option sélectionnée.",
+        "$description": "Couleur de l'entrée courante : elle n'est lisible que sur le fond `surface-active` qui l'accompagne.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "FRAME_FILL",
-              "SHAPE_FILL"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-option-surface-selected)"
+              "WEB": "var(--ui-sidebar-menu-action-color-active)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-option-surface-selected",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-action-color-active",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
-      }
-    },
-    "overflow": {
-      "color": {
-        "$value": "{semantics.form.low.content.default}",
+      },
+      "color-disabled": {
+        "$value": "{semantics.navigation.high.content.disabled}",
         "$type": "color",
-        "$description": "Couleur de l'indicateur « +N » de débordement.",
+        "$description": "Couleur d'une action désactivée.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -20514,89 +25444,96 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-overflow-color)"
+              "WEB": "var(--ui-sidebar-menu-action-color-disabled)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-overflow-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-action-color-disabled",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
-      }
-    },
-    "panel": {
-      "gap": {
-        "$value": "{metrics.units.xs}",
-        "$type": "dimension",
-        "$description": "Espacement entre les groupes du panneau.",
+      },
+      "color-hover": {
+        "$value": "{semantics.navigation.high.content.hover}",
+        "$type": "color",
+        "$description": "Couleur d'une action au survol.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-panel-gap)"
+              "WEB": "var(--ui-sidebar-menu-action-color-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-panel-gap",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-action-color-hover",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "padding": {
-        "$value": "{metrics.units.xs}",
-        "$type": "dimension",
-        "$description": "Inset du panneau d'options.",
+      "color-pressed": {
+        "$value": "{semantics.navigation.high.content.active}",
+        "$type": "color",
+        "$description": "Couleur d'une action enfoncée.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "GAP"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-panel-padding)"
+              "WEB": "var(--ui-sidebar-menu-action-color-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-panel-padding",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-action-color-pressed",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "stroke": {
-        "$value": "{semantics.form.high.stroke.default}",
+      "surface-active": {
+        "$value": "{semantics.navigation.high.surface.active}",
         "$type": "color",
-        "$description": "Couleur de bordure du panneau d'options.",
+        "$description": "Fond de l'entrée correspondant à la route courante.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "STROKE_COLOR"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-panel-stroke)"
+              "WEB": "var(--ui-sidebar-menu-action-surface-active)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-panel-stroke",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-action-surface-active",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       },
-      "surface": {
-        "$value": "{semantics.form.high.surface.default}",
+      "surface-hover": {
+        "$value": "{semantics.navigation.high.surface.hover}",
         "$type": "color",
-        "$description": "Fond du panneau d'options.",
+        "$description": "Fond d'une action au survol.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -20605,115 +25542,74 @@
               "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-panel-surface)"
+              "WEB": "var(--ui-sidebar-menu-action-surface-hover)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-panel-surface",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-action-surface-hover",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
-      }
-    },
-    "placeholder": {
-      "color": {
-        "$value": "{semantics.form.low.content.default}",
+      },
+      "surface-pressed": {
+        "$value": "{semantics.navigation.high.surface.active}",
         "$type": "color",
-        "$description": "Couleur du texte d'invite.",
+        "$description": "Fond d'une action enfoncée.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "FRAME_FILL",
+              "SHAPE_FILL"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-placeholder-color)"
+              "WEB": "var(--ui-sidebar-menu-action-surface-pressed)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-placeholder-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-action-surface-pressed",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
       }
     },
-    "scroller": {
-      "max-height": {
-        "$value": "312px",
-        "$type": "dimension",
-        "$description": "Hauteur maximale de `ui-select`, scroller.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "WIDTH_HEIGHT"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-select-scroller-max-height)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-scroller-max-height",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "derived"
-          }
-        }
-      },
-      "max-height-small": {
-        "$value": "256px",
-        "$type": "dimension",
-        "$description": "Hauteur maximale de `ui-select`, scroller (variante `small`).",
+    "menu-action-focus-ring": {
+      "color": {
+        "$value": "{semantics.global.border.focus}",
+        "$type": "color",
+        "$description": "Couleur de l'anneau de focus d'une action.",
         "$extensions": {
           "com.figma": {
-            "resolvedType": "FLOAT",
+            "resolvedType": "COLOR",
             "scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-scroller-max-height-small)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-scroller-max-height-small",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "derived"
-          }
-        }
-      }
-    },
-    "stroke-width": {
-      "$value": "{metrics.stroke.default}",
-      "$type": "dimension",
-      "$description": "Épaisseur de bordure (case visuelle)",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "FLOAT",
-          "scopes": [
-            "STROKE_FLOAT"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-select-stroke-width)"
+              "WEB": "var(--ui-sidebar-menu-action-focus-ring-color)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-sidebar-menu-action-focus-ring-color",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-select-stroke-width",
-          "component": "ui-select",
-          "entryPoint": "@4sh/ui-kit-react/ui-select",
-          "descriptionSource": "scss"
         }
       }
     },
-    "trigger": {
+    "menu-section-header": {
       "color": {
-        "$value": "{semantics.form.high.content.default}",
+        "$value": "{semantics.navigation.high.content.default}",
         "$type": "color",
-        "$description": "Couleur du texte du déclencheur.",
+        "$description": "Couleur d'un intitulé de section.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
@@ -20721,45 +25617,75 @@
               "ALL_FILLS"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-trigger-color)"
+              "WEB": "var(--ui-sidebar-menu-section-header-color)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-trigger-color",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
-            "descriptionSource": "scss"
+            "cssVar": "--ui-sidebar-menu-section-header-color",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
           }
         }
-      },
-      "color-disabled": {
-        "$value": "{semantics.form.high.content.disabled}",
+      }
+    },
+    "menu-separator": {
+      "stroke": {
+        "$value": "{semantics.navigation.high.stroke.default}",
         "$type": "color",
-        "$description": "Couleur du texte du déclencheur désactivé.",
+        "$description": "Couleur d'un séparateur de menu.",
         "$extensions": {
           "com.figma": {
             "resolvedType": "COLOR",
             "scopes": [
-              "ALL_FILLS"
+              "STROKE_COLOR"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-trigger-color-disabled)"
+              "WEB": "var(--ui-sidebar-menu-separator-stroke)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-trigger-color-disabled",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-menu-separator-stroke",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss",
+            "perInstance": true,
+            "note": "2 défauts selon la variante rendue : en déclarer un seul écraserait les autres."
+          }
+        }
+      }
+    },
+    "rail": {
+      "width": {
+        "$value": "72px",
+        "$type": "dimension",
+        "$description": "Largeur du rail d’icônes replié.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-sidebar-rail-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-sidebar-rail-width",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "values": {
-      "gap": {
-        "$value": "{metrics.units.xs}",
+    "region": {
+      "padding": {
+        "$value": "{metrics.units.md}",
         "$type": "dimension",
-        "$description": "Espacement entre les valeurs affichées dans le déclencheur (mode `multiple`).",
+        "$description": "Inset des régions (en-tête, corps, pied).",
         "$extensions": {
           "com.figma": {
             "resolvedType": "FLOAT",
@@ -20767,219 +25693,175 @@
               "GAP"
             ],
             "codeSyntax": {
-              "WEB": "var(--ui-select-values-gap)"
+              "WEB": "var(--ui-sidebar-region-padding)"
             }
           },
           "com.4sh.ui-kit": {
-            "cssVar": "--ui-select-values-gap",
-            "component": "ui-select",
-            "entryPoint": "@4sh/ui-kit-react/ui-select",
+            "cssVar": "--ui-sidebar-region-padding",
+            "component": "ui-sidebar",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
             "descriptionSource": "scss"
           }
         }
       }
     },
-    "weight": {
-      "$value": "{typography.weight.bold}",
-      "$type": "string",
-      "$description": "Graisse du texte.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_WEIGHT",
-            "FONT_STYLE"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-select-weight)"
+    "section-header": {
+      "weight": {
+        "$value": "{typography.weight.bold}",
+        "$type": "string",
+        "$description": "Graisse de l'en-tête de section.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "STRING",
+            "scopes": [
+              "FONT_WEIGHT",
+              "FONT_STYLE"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-sidebar-section-header-weight)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-sidebar-section-header-weight",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-select-weight",
-          "component": "ui-select",
-          "entryPoint": "@4sh/ui-kit-react/ui-select",
-          "descriptionSource": "scss"
         }
       }
-    }
-  },
-  "separator": {
-    "font-family": {
-      "$value": "{typography.fontFamily.base}",
-      "$type": "string",
-      "$description": "Famille typographique du libellé.",
-      "$extensions": {
-        "com.figma": {
-          "resolvedType": "STRING",
-          "scopes": [
-            "FONT_FAMILY"
-          ],
-          "codeSyntax": {
-            "WEB": "var(--ui-separator-font-family)"
+    },
+    "separator": {
+      "width": {
+        "$value": "{metrics.stroke.sm}",
+        "$type": "dimension",
+        "$description": "Épaisseur d'un séparateur.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-sidebar-separator-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-sidebar-separator-width",
+            "component": "ui-sidebar-menu",
+            "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
+            "descriptionSource": "scss"
           }
-        },
-        "com.4sh.ui-kit": {
-          "cssVar": "--ui-separator-font-family",
-          "component": "ui-separator",
-          "entryPoint": "@4sh/ui-kit-react/ui-separator",
-          "descriptionSource": "scss"
         }
       }
     },
-    "font-size": {
-      "$value": "{responsive.size.typography.text.default}",
-      "$type": "dimension",
-      "$description": "Taille du libellé.",
+    "stroke": {
+      "$value": "{semantics.global.border.subtle}",
+      "$type": "color",
+      "$description": "Couleur du trait qui fait face au contenu, quel que soit le bord d'accroche.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "FONT_SIZE"
+            "STROKE_COLOR"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-separator-font-size)"
+            "WEB": "var(--ui-sidebar-stroke)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-separator-font-size",
-          "component": "ui-separator",
-          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "cssVar": "--ui-sidebar-stroke",
+          "component": "ui-sidebar",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "scss"
         }
       }
     },
-    "font-size-small": {
-      "$value": "{responsive.size.typography.text.md}",
+    "stroke-width": {
+      "$value": "{metrics.stroke.sm}",
       "$type": "dimension",
-      "$description": "Taille du libellé en taille `small`.",
+      "$description": "Épaisseur de bordure du panneau.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "FONT_SIZE"
+            "STROKE_FLOAT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-separator-font-size-small)"
+            "WEB": "var(--ui-sidebar-stroke-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-separator-font-size-small",
-          "component": "ui-separator",
-          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "cssVar": "--ui-sidebar-stroke-width",
+          "component": "ui-sidebar",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "scss"
         }
       }
     },
-    "gap": {
-      "$value": "{metrics.units.sm}",
-      "$type": "dimension",
-      "$description": "Espacement filet ↔ libellé.",
+    "surface": {
+      "$value": "{semantics.global.background.default}",
+      "$type": "color",
+      "$description": "Fond du panneau.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "COLOR",
           "scopes": [
-            "GAP"
+            "FRAME_FILL",
+            "SHAPE_FILL"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-separator-gap)"
+            "WEB": "var(--ui-sidebar-surface)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-separator-gap",
-          "component": "ui-separator",
-          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "cssVar": "--ui-sidebar-surface",
+          "component": "ui-sidebar",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "scss"
         }
       }
     },
-    "label": {
-      "color": {
-        "$value": "{semantics.global.text.default}",
-        "$type": "color",
-        "$description": "Couleur du libellé.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "TEXT_FILL"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-separator-label-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-separator-label-color",
-            "component": "ui-separator",
-            "entryPoint": "@4sh/ui-kit-react/ui-separator",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "line": {
-      "stroke": {
-        "$value": "{semantics.global.border.default}",
-        "$type": "color",
-        "$description": "Couleur du trait.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "STROKE_COLOR"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-separator-line-stroke)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-separator-line-stroke",
-            "component": "ui-separator",
-            "entryPoint": "@4sh/ui-kit-react/ui-separator",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
-    "stroke-width": {
-      "$value": "{metrics.stroke.default}",
-      "$type": "dimension",
-      "$description": "Épaisseur du filet.",
+    "weight": {
+      "$value": "{typography.weight.bold}",
+      "$type": "string",
+      "$description": "Graisse du texte.",
       "$extensions": {
         "com.figma": {
-          "resolvedType": "FLOAT",
+          "resolvedType": "STRING",
           "scopes": [
-            "STROKE_FLOAT"
+            "FONT_WEIGHT",
+            "FONT_STYLE"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-separator-stroke-width)"
+            "WEB": "var(--ui-sidebar-weight)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-separator-stroke-width",
-          "component": "ui-separator",
-          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "cssVar": "--ui-sidebar-weight",
+          "component": "ui-sidebar-menu",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "scss"
         }
       }
     },
-    "stroke-width-small": {
-      "$value": "{metrics.stroke.sm}",
+    "width": {
+      "$value": "280px",
       "$type": "dimension",
-      "$description": "Épaisseur du filet en taille `small`.",
+      "$description": "Largeur du panneau déployé.",
       "$extensions": {
         "com.figma": {
           "resolvedType": "FLOAT",
           "scopes": [
-            "STROKE_FLOAT"
+            "WIDTH_HEIGHT"
           ],
           "codeSyntax": {
-            "WEB": "var(--ui-separator-stroke-width-small)"
+            "WEB": "var(--ui-sidebar-width)"
           }
         },
         "com.4sh.ui-kit": {
-          "cssVar": "--ui-separator-stroke-width-small",
-          "component": "ui-separator",
-          "entryPoint": "@4sh/ui-kit-react/ui-separator",
+          "cssVar": "--ui-sidebar-width",
+          "component": "ui-sidebar",
+          "entryPoint": "@4sh/ui-kit-react/ui-sidebar",
           "descriptionSource": "scss"
         }
       }
diff --git a/packages/ui-kit-react/README.fr.md b/packages/ui-kit-react/README.fr.md
index 4a46be1..7c812ed 100644
--- a/packages/ui-kit-react/README.fr.md
+++ b/packages/ui-kit-react/README.fr.md
@@ -46,17 +46,17 @@ import { UiIcon } from '@4sh/ui-kit-react/ui-icon';
 
 ## Les familles
 
-| Famille       | Composants                                                                                                                                                                                                                                                                                                                                                                            |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `base`        | `ui-icon`                                                                                                                                                                                                                                                                                                                                                                             |
-| `actions`     | `ui-button`, `ui-button-split`, `ui-link`, `ui-speed-dial`                                                                                                                                                                                                                                                                                                                            |
-| `forms`       | `ui-autocomplete`, `ui-checkbox`, `ui-datepicker`, `ui-field`, `ui-input`, `ui-input-date`, `ui-input-group`, `ui-input-mask`, `ui-input-number`, `ui-input-otp`, `ui-input-tags`, `ui-knob`, `ui-label`, `ui-nudger`, `ui-radio`, `ui-rating`, `ui-segment-control`, `ui-select`, `ui-slider`, `ui-swatch-picker`, `ui-textarea`, `ui-toggle`, `ui-toggle-block`, `ui-toggle-button` |
-| `informative` | `ui-accordion`, `ui-alert`, `ui-avatar`, `ui-avatar-group`, `ui-badge`, `ui-chip`, `ui-empty-state`, `ui-helper`, `ui-progress-bar`, `ui-read-only`, `ui-separator`, `ui-skeleton`, `ui-spinner`, `ui-tag`, `ui-toast`, `ui-tooltip`                                                                                                                                                  |
-| `layout`      | `ui-bottom-sheet`, `ui-card`, `ui-drawer`, `ui-modal`, `ui-popover`                                                                                                                                                                                                                                                                                                                   |
-| `navigation`  | `ui-bottom-tab-bar`, `ui-breadcrumb`, `ui-context-menu`, `ui-menu`, `ui-stepper`, `ui-tabs`                                                                                                                                                                                                                                                                                           |
-| `table`       | `ui-paginator`, `ui-table`                                                                                                                                                                                                                                                                                                                                                            |
-
-**58 composants** sur les 62 du Design System. Feuille de route :
+| Famille       | Composants                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `base`        | `ui-icon`, `ui-image`                                                                                                                                                                                                                                                                                                                                                                                                |
+| `actions`     | `ui-button`, `ui-button-split`, `ui-link`, `ui-speed-dial`                                                                                                                                                                                                                                                                                                                                                           |
+| `forms`       | `ui-autocomplete`, `ui-checkbox`, `ui-datepicker`, `ui-editor`, `ui-field`, `ui-file-upload`, `ui-input`, `ui-input-date`, `ui-input-group`, `ui-input-mask`, `ui-input-number`, `ui-input-otp`, `ui-input-tags`, `ui-knob`, `ui-label`, `ui-nudger`, `ui-radio`, `ui-rating`, `ui-segment-control`, `ui-select`, `ui-slider`, `ui-swatch-picker`, `ui-textarea`, `ui-toggle`, `ui-toggle-block`, `ui-toggle-button` |
+| `informative` | `ui-accordion`, `ui-alert`, `ui-avatar`, `ui-avatar-group`, `ui-badge`, `ui-chip`, `ui-empty-state`, `ui-helper`, `ui-progress-bar`, `ui-read-only`, `ui-separator`, `ui-skeleton`, `ui-spinner`, `ui-tag`, `ui-toast`, `ui-tooltip`                                                                                                                                                                                 |
+| `layout`      | `ui-bottom-sheet`, `ui-card`, `ui-drawer`, `ui-modal`, `ui-popover`                                                                                                                                                                                                                                                                                                                                                  |
+| `navigation`  | `ui-bottom-tab-bar`, `ui-breadcrumb`, `ui-context-menu`, `ui-menu`, `ui-sidebar`, `ui-stepper`, `ui-tabs`                                                                                                                                                                                                                                                                                                            |
+| `table`       | `ui-paginator`, `ui-table`                                                                                                                                                                                                                                                                                                                                                                                           |
+
+**62 composants** sur les 62 du Design System. Feuille de route :
 `docs/components-index.md`.
 
 ## Entrées transverses
diff --git a/packages/ui-kit-react/README.md b/packages/ui-kit-react/README.md
index bc32d58..f91b4c4 100644
--- a/packages/ui-kit-react/README.md
+++ b/packages/ui-kit-react/README.md
@@ -46,17 +46,17 @@ component between families is never a breaking change for you.
 
 ## Families
 
-| Family        | Components                                                                                                                                                                                                                                                                                                                                                                            |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `base`        | `ui-icon`                                                                                                                                                                                                                                                                                                                                                                             |
-| `actions`     | `ui-button`, `ui-button-split`, `ui-link`, `ui-speed-dial`                                                                                                                                                                                                                                                                                                                            |
-| `forms`       | `ui-autocomplete`, `ui-checkbox`, `ui-datepicker`, `ui-field`, `ui-input`, `ui-input-date`, `ui-input-group`, `ui-input-mask`, `ui-input-number`, `ui-input-otp`, `ui-input-tags`, `ui-knob`, `ui-label`, `ui-nudger`, `ui-radio`, `ui-rating`, `ui-segment-control`, `ui-select`, `ui-slider`, `ui-swatch-picker`, `ui-textarea`, `ui-toggle`, `ui-toggle-block`, `ui-toggle-button` |
-| `informative` | `ui-accordion`, `ui-alert`, `ui-avatar`, `ui-avatar-group`, `ui-badge`, `ui-chip`, `ui-empty-state`, `ui-helper`, `ui-progress-bar`, `ui-read-only`, `ui-separator`, `ui-skeleton`, `ui-spinner`, `ui-tag`, `ui-toast`, `ui-tooltip`                                                                                                                                                  |
-| `layout`      | `ui-bottom-sheet`, `ui-card`, `ui-drawer`, `ui-modal`, `ui-popover`                                                                                                                                                                                                                                                                                                                   |
-| `navigation`  | `ui-bottom-tab-bar`, `ui-breadcrumb`, `ui-context-menu`, `ui-menu`, `ui-stepper`, `ui-tabs`                                                                                                                                                                                                                                                                                           |
-| `table`       | `ui-paginator`, `ui-table`                                                                                                                                                                                                                                                                                                                                                            |
-
-**58 components** out of the Design System's 62. Roadmap: `docs/components-index.md`.
+| Family        | Components                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `base`        | `ui-icon`, `ui-image`                                                                                                                                                                                                                                                                                                                                                                                                |
+| `actions`     | `ui-button`, `ui-button-split`, `ui-link`, `ui-speed-dial`                                                                                                                                                                                                                                                                                                                                                           |
+| `forms`       | `ui-autocomplete`, `ui-checkbox`, `ui-datepicker`, `ui-editor`, `ui-field`, `ui-file-upload`, `ui-input`, `ui-input-date`, `ui-input-group`, `ui-input-mask`, `ui-input-number`, `ui-input-otp`, `ui-input-tags`, `ui-knob`, `ui-label`, `ui-nudger`, `ui-radio`, `ui-rating`, `ui-segment-control`, `ui-select`, `ui-slider`, `ui-swatch-picker`, `ui-textarea`, `ui-toggle`, `ui-toggle-block`, `ui-toggle-button` |
+| `informative` | `ui-accordion`, `ui-alert`, `ui-avatar`, `ui-avatar-group`, `ui-badge`, `ui-chip`, `ui-empty-state`, `ui-helper`, `ui-progress-bar`, `ui-read-only`, `ui-separator`, `ui-skeleton`, `ui-spinner`, `ui-tag`, `ui-toast`, `ui-tooltip`                                                                                                                                                                                 |
+| `layout`      | `ui-bottom-sheet`, `ui-card`, `ui-drawer`, `ui-modal`, `ui-popover`                                                                                                                                                                                                                                                                                                                                                  |
+| `navigation`  | `ui-bottom-tab-bar`, `ui-breadcrumb`, `ui-context-menu`, `ui-menu`, `ui-sidebar`, `ui-stepper`, `ui-tabs`                                                                                                                                                                                                                                                                                                            |
+| `table`       | `ui-paginator`, `ui-table`                                                                                                                                                                                                                                                                                                                                                                                           |
+
+**62 components** out of the Design System's 62. Roadmap: `docs/components-index.md`.
 
 ## Cross-cutting entry points
 
diff --git a/packages/ui-kit-react/package.json b/packages/ui-kit-react/package.json
index 69330c5..9c505a1 100644
--- a/packages/ui-kit-react/package.json
+++ b/packages/ui-kit-react/package.json
@@ -61,6 +61,10 @@
       "types": "./dist/core/overlay/index.d.ts",
       "import": "./dist/overlay.js"
     },
+    "./ripple": {
+      "types": "./dist/core/ripple/index.d.ts",
+      "import": "./dist/ripple.js"
+    },
     "./theming": {
       "types": "./dist/core/theming/index.d.ts",
       "import": "./dist/theming.js"
@@ -97,6 +101,10 @@
       "types": "./dist/base/ui-icon/index.d.ts",
       "import": "./dist/ui-icon.js"
     },
+    "./ui-image": {
+      "types": "./dist/base/ui-image/index.d.ts",
+      "import": "./dist/ui-image.js"
+    },
     "./ui-autocomplete": {
       "types": "./dist/forms/ui-autocomplete/index.d.ts",
       "import": "./dist/ui-autocomplete.js"
@@ -109,10 +117,18 @@
       "types": "./dist/forms/ui-datepicker/index.d.ts",
       "import": "./dist/ui-datepicker.js"
     },
+    "./ui-editor": {
+      "types": "./dist/forms/ui-editor/index.d.ts",
+      "import": "./dist/ui-editor.js"
+    },
     "./ui-field": {
       "types": "./dist/forms/ui-field/index.d.ts",
       "import": "./dist/ui-field.js"
     },
+    "./ui-file-upload": {
+      "types": "./dist/forms/ui-file-upload/index.d.ts",
+      "import": "./dist/ui-file-upload.js"
+    },
     "./ui-input": {
       "types": "./dist/forms/ui-input/index.d.ts",
       "import": "./dist/ui-input.js"
@@ -293,6 +309,10 @@
       "types": "./dist/navigation/ui-menu/index.d.ts",
       "import": "./dist/ui-menu.js"
     },
+    "./ui-sidebar": {
+      "types": "./dist/navigation/ui-sidebar/index.d.ts",
+      "import": "./dist/ui-sidebar.js"
+    },
     "./ui-stepper": {
       "types": "./dist/navigation/ui-stepper/index.d.ts",
       "import": "./dist/ui-stepper.js"
diff --git a/packages/ui-kit-react/src/actions/ui-button/ui-button.tsx b/packages/ui-kit-react/src/actions/ui-button/ui-button.tsx
index 3d2d7b5..977449c 100644
--- a/packages/ui-kit-react/src/actions/ui-button/ui-button.tsx
+++ b/packages/ui-kit-react/src/actions/ui-button/ui-button.tsx
@@ -38,6 +38,8 @@ export interface UiButtonRootProps {
   role?: string;
   'aria-label'?: string;
   'aria-disabled'?: 'true';
+  /** Marqueur de l'onde de pression, lu par `UiRippleProvider`. */
+  'data-ripple': 'on' | 'off';
   onClick: MouseEventHandler<HTMLElement>;
   /**
    * Typé pour une ancre, et non pour `HTMLElement` : `render` existe pour
@@ -84,6 +86,12 @@ interface UiButtonOwnProps {
   expanded?: boolean;
   /** Présentation en pilule. */
   rounded?: boolean;
+  /**
+   * Onde de pression, quand elle est activée (`UiRippleProvider` ou
+   * `useUiRippleScope`). `false` la coupe sur ce bouton, activation globale
+   * comprise. Sans activation, le marqueur ne produit rien.
+   */
+  ripple?: boolean;
   disabled?: boolean;
   /** URL. Sa présence fait rendre un `<a>` au lieu d'un `<button>`. */
   href?: string;
@@ -165,6 +173,7 @@ export function UiButton({
   loadingIcon = 'circle-notch',
   expanded = false,
   rounded = false,
+  ripple = true,
   disabled = false,
   href,
   target,
@@ -279,6 +288,7 @@ export function UiButton({
       role: 'button',
       'aria-label': accessibleLabel,
       'aria-disabled': disabled ? 'true' : undefined,
+      'data-ripple': ripple ? 'on' : 'off',
       onClick: handleClick,
       ref: ref as Ref<HTMLAnchorElement> | undefined,
     };
@@ -306,6 +316,7 @@ export function UiButton({
       tabIndex={tabIndex}
       aria-busy={loading ? true : undefined}
       aria-label={accessibleLabel}
+      data-ripple={ripple ? 'on' : 'off'}
       onClick={handleClick}
     >
       {inner}
diff --git a/packages/ui-kit-react/src/base/ui-image/index.ts b/packages/ui-kit-react/src/base/ui-image/index.ts
new file mode 100644
index 0000000..b0022db
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/index.ts
@@ -0,0 +1,10 @@
+export {
+  UiImage,
+  UiImageProvider,
+  type UiImageProps,
+  type UiImageProviderProps,
+  type UiImageConfig,
+  type UiImageAssetsMap,
+} from './ui-image';
+export { UiImagePreview, type UiImagePreviewProps } from './ui-image-preview';
+export { inlineSvgToReact } from './ui-image-svg';
diff --git a/packages/ui-kit-react/src/base/ui-image/ui-image-preview.tsx b/packages/ui-kit-react/src/base/ui-image/ui-image-preview.tsx
new file mode 100644
index 0000000..f3f823c
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/ui-image-preview.tsx
@@ -0,0 +1,369 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+  type PointerEvent,
+  type WheelEvent,
+} from 'react';
+
+import { UiIcon } from '../ui-icon';
+import { useUiScrollLock } from '../../core/overlay';
+import { cx } from '../../core/utils';
+
+import './ui-image.scss';
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+/** La vue au repos : ni zoom, ni rotation, ni déplacement. */
+const NEUTRAL = { scale: 1, rotation: 0, x: 0, y: 0 };
+
+/** Pas de déplacement d'une flèche du clavier, en px. */
+const PAN_STEP = 24;
+
+export interface UiImagePreviewProps extends Omit<
+  ComponentPropsWithRef<'dialog'>,
+  'open' | 'onClose' | 'children'
+> {
+  /** Ouverture imposée. Renseignée, l'aperçu est **contrôlé**. */
+  visible?: boolean;
+  defaultVisible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+
+  /** URL de l'image à agrandir, déjà résolue : `http(s)`, `blob:` ou `data:`. */
+  src: string;
+  /** Texte alternatif. Vide, l'image est décorative. */
+  alt?: string;
+  /** Nom accessible du dialogue. */
+  'aria-label'?: string;
+
+  /** Pas de zoom d'un clic, d'un cran de molette ou d'une frappe sur `+` et `-`. */
+  zoomStep?: number;
+  minZoom?: number;
+  maxZoom?: number;
+
+  /** Proposer une action de téléchargement dans la barre. */
+  downloadable?: boolean;
+  /** Nom de fichier proposé par cette action. */
+  downloadName?: string;
+  /** Fermer au clic sur le fond, autour de l'image. */
+  dismissableMask?: boolean;
+
+  zoomInAriaLabel?: string;
+  zoomOutAriaLabel?: string;
+  rotateLeftAriaLabel?: string;
+  rotateRightAriaLabel?: string;
+  resetAriaLabel?: string;
+  downloadAriaLabel?: string;
+  closeAriaLabel?: string;
+}
+
+/**
+ * ui-image-preview : la vue agrandie qu'ouvre le mode `preview` de `ui-image`.
+ *
+ * Une scène qui porte l'image et une barre d'actions, et trois transformations
+ * qu'une seule `transform` applique : déplacement, échelle, rotation. Le zoom
+ * s'atteint au pointeur, barre et molette, comme au clavier, `+`, `-`, `0`, `r`
+ * et les flèches pour déplacer : un zoom qu'on ne peut pas déplacer au clavier
+ * est un zoom qu'on ne peut pas lire.
+ *
+ * Bâti sur le `<dialog>` natif, comme les panneaux de la famille `layout` : le
+ * piège de focus, la restitution du focus et `Échap` viennent du navigateur.
+ */
+export function UiImagePreview({
+  visible,
+  defaultVisible = false,
+  onVisibleChange,
+  src,
+  alt = '',
+  zoomStep = 0.25,
+  minZoom = 0.5,
+  maxZoom = 4,
+  downloadable = false,
+  downloadName,
+  dismissableMask = true,
+  zoomInAriaLabel = 'Zoom avant',
+  zoomOutAriaLabel = 'Zoom arrière',
+  rotateLeftAriaLabel = 'Pivoter vers la gauche',
+  rotateRightAriaLabel = 'Pivoter vers la droite',
+  resetAriaLabel = "Réinitialiser l'affichage",
+  downloadAriaLabel = "Télécharger l'image",
+  closeAriaLabel = "Fermer l'aperçu",
+  className,
+  ref,
+  ...rest
+}: UiImagePreviewProps) {
+  const innerRef = useRef<HTMLDialogElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
+  const ariaLabel = rest['aria-label'] ?? "Aperçu de l'image";
+  delete rest['aria-label'];
+
+  const [open, setOpen] = useState(visible ?? defaultVisible);
+  const isControlled = visible !== undefined;
+  const isOpen = isControlled ? visible : open;
+  const setVisible = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setOpen(next);
+      onVisibleChange?.(next);
+    },
+    [isControlled, onVisibleChange],
+  );
+
+  // Les trois transformations vivent dans UN état : elles se remettent à neuf
+  // ensemble, et un seul `setState` suffit à l'ajustement au rendu ci-dessous.
+  const [view, setView] = useState(NEUTRAL);
+  const scale = view.scale;
+  const rotation = view.rotation;
+  const pan = view;
+
+  // Une nouvelle image, ou une réouverture, repart de la vue neutre : garder le
+  // zoom de la précédente n'a aucun sens. Ajusté PENDANT le rendu, là où un
+  // effet peindrait d'abord l'ancienne vue.
+  const viewKey = `${src}|${isOpen}`;
+  const [lastViewKey, setLastViewKey] = useState(viewKey);
+  if (lastViewKey !== viewKey) {
+    setLastViewKey(viewKey);
+    setView(NEUTRAL);
+  }
+
+  useUiScrollLock(isOpen);
+
+  // L'état pilote le calque, jamais l'inverse : un `<dialog>` s'ouvre par une
+  // méthode, et l'attribut `open` posé en JSX le rendrait sans calque supérieur.
+  useEffect(() => {
+    const dialog = innerRef.current;
+    if (!dialog) return;
+    if (isOpen && !dialog.open) dialog.showModal();
+    else if (!isOpen && dialog.open) dialog.close();
+  }, [isOpen]);
+
+  useEffect(() => {
+    const dialog = innerRef.current;
+    if (!dialog) return;
+    const onClose = () => setVisible(false);
+    const onCancel = (event: Event) => {
+      event.preventDefault();
+      setVisible(false);
+    };
+    dialog.addEventListener('close', onClose);
+    dialog.addEventListener('cancel', onCancel);
+    return () => {
+      dialog.removeEventListener('close', onClose);
+      dialog.removeEventListener('cancel', onCancel);
+    };
+  });
+
+  const applyScale = useCallback(
+    (value: number) => {
+      const next = clamp(Number(value.toFixed(4)), minZoom, maxZoom);
+      // Retour au cadrage : le déplacement laisserait sinon l'image de côté.
+      setView((current) =>
+        next <= 1 ? { ...current, scale: next, x: 0, y: 0 } : { ...current, scale: next },
+      );
+    },
+    [minZoom, maxZoom],
+  );
+
+  const reset = useCallback(() => setView(NEUTRAL), []);
+
+  const canZoomIn = scale < maxZoom;
+  const canZoomOut = scale > minZoom;
+  const canPan = scale > 1;
+  const pristine = scale === 1 && rotation === 0 && pan.x === 0 && pan.y === 0;
+  /** Un quart de tour : ce qui est dessiné ne suit plus les axes de la boîte. */
+  const quarterTurned = rotation % 180 !== 0;
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDialogElement>) => {
+    switch (event.key) {
+      case '+':
+      case '=':
+        applyScale(scale + zoomStep);
+        break;
+      case '-':
+        applyScale(scale - zoomStep);
+        break;
+      case '0':
+        reset();
+        break;
+      case 'r':
+      case 'R':
+        setView((v) => ({ ...v, rotation: v.rotation + 90 }));
+        break;
+      case 'ArrowLeft':
+        setView((v) => ({ ...v, x: v.x - PAN_STEP }));
+        break;
+      case 'ArrowRight':
+        setView((v) => ({ ...v, x: v.x + PAN_STEP }));
+        break;
+      case 'ArrowUp':
+        setView((v) => ({ ...v, y: v.y - PAN_STEP }));
+        break;
+      case 'ArrowDown':
+        setView((v) => ({ ...v, y: v.y + PAN_STEP }));
+        break;
+      default:
+        // Échap est laissé au dialogue, et `Tab` au piège de focus natif.
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const onWheel = (event: WheelEvent<HTMLDivElement>) => {
+    applyScale(scale + (event.deltaY < 0 ? zoomStep : -zoomStep));
+  };
+
+  // --- Déplacement au glissement -------------------------------------------
+  const drag = useRef<{ x: number; y: number; panX: number; panY: number } | null>(null);
+
+  const onPointerDown = (event: PointerEvent<HTMLImageElement>) => {
+    if (!canPan || event.button !== 0) return;
+    drag.current = { x: event.clientX, y: event.clientY, panX: pan.x, panY: pan.y };
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    event.preventDefault();
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLImageElement>) => {
+    const origin = drag.current;
+    if (!origin) return;
+    setView((v) => ({
+      ...v,
+      x: origin.panX + (event.clientX - origin.x),
+      y: origin.panY + (event.clientY - origin.y),
+    }));
+  };
+
+  const onPointerUp = (event: PointerEvent<HTMLImageElement>) => {
+    if (!drag.current) return;
+    drag.current = null;
+    event.currentTarget.releasePointerCapture?.(event.pointerId);
+  };
+
+  /** Un appui qui atterrit sur la scène, et non sur l'image, est un appui dehors. */
+  const onStagePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (dismissableMask && event.target === stageRef.current) setVisible(false);
+  };
+
+  return (
+    <dialog
+      {...rest}
+      ref={(node) => {
+        innerRef.current = node;
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+      }}
+      className={cx('ui-image-preview', className)}
+      aria-label={ariaLabel || undefined}
+      onKeyDown={onKeyDown}
+    >
+      {/*
+        Une action indisponible est `aria-disabled`, jamais `disabled` : un vrai
+        `disabled` laisse tomber le focus sur le corps dès que le bouton qui le
+        porte atteint une borne, et `Échap` n'atteint plus le dialogue. Les
+        gestionnaires bornent, donc un appui à la borne ne fait rien.
+      */}
+      <div className="ui-image-preview-toolbar">
+        <button
+          type="button"
+          className="ui-image-preview-action"
+          aria-label={zoomOutAriaLabel || undefined}
+          aria-disabled={!canZoomOut || undefined}
+          onClick={() => applyScale(scale - zoomStep)}
+        >
+          <UiIcon name="magnifying-glass-minus" size="sm" />
+        </button>
+
+        <button
+          type="button"
+          className="ui-image-preview-action"
+          aria-label={zoomInAriaLabel || undefined}
+          aria-disabled={!canZoomIn || undefined}
+          onClick={() => applyScale(scale + zoomStep)}
+        >
+          <UiIcon name="magnifying-glass-plus" size="sm" />
+        </button>
+
+        <button
+          type="button"
+          className="ui-image-preview-action"
+          aria-label={rotateLeftAriaLabel || undefined}
+          onClick={() => setView((v) => ({ ...v, rotation: v.rotation - 90 }))}
+        >
+          <UiIcon name="rotate-left" size="sm" />
+        </button>
+
+        <button
+          type="button"
+          className="ui-image-preview-action"
+          aria-label={rotateRightAriaLabel || undefined}
+          onClick={() => setView((v) => ({ ...v, rotation: v.rotation + 90 }))}
+        >
+          <UiIcon name="rotate-right" size="sm" />
+        </button>
+
+        <button
+          type="button"
+          className="ui-image-preview-action"
+          aria-label={resetAriaLabel || undefined}
+          aria-disabled={pristine || undefined}
+          onClick={reset}
+        >
+          <UiIcon name="arrows-rotate" size="sm" />
+        </button>
+
+        {downloadable && (
+          <a
+            className="ui-image-preview-action"
+            href={src}
+            download={downloadName || ''}
+            aria-label={downloadAriaLabel || undefined}
+            target="_blank"
+            rel="noopener"
+          >
+            <UiIcon name="download" size="sm" />
+          </a>
+        )}
+
+        <button
+          type="button"
+          className="ui-image-preview-action"
+          aria-label={closeAriaLabel || undefined}
+          onClick={() => setVisible(false)}
+        >
+          <UiIcon name="xmark" size="sm" />
+        </button>
+      </div>
+
+      {/* La scène est la cible du clic extérieur : un appui qui l'atteint, et
+          non l'image, referme. Échap en est l'équivalent clavier. */}
+      <div
+        ref={stageRef}
+        className="ui-image-preview-stage"
+        onPointerDown={onStagePointerDown}
+        onWheel={onWheel}
+      >
+        <img
+          className={cx(
+            'ui-image-preview-media',
+            canPan && '_pannable',
+            quarterTurned && '_rotated',
+          )}
+          src={src}
+          alt={alt}
+          style={{
+            transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale}) rotate(${rotation}deg)`,
+          }}
+          draggable={false}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+        />
+      </div>
+    </dialog>
+  );
+}
diff --git a/packages/ui-kit-react/src/base/ui-image/ui-image-svg.test.tsx b/packages/ui-kit-react/src/base/ui-image/ui-image-svg.test.tsx
new file mode 100644
index 0000000..1bb4077
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/ui-image-svg.test.tsx
@@ -0,0 +1,120 @@
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { inlineSvgToReact } from './ui-image-svg';
+
+/** Rend le résultat de la conversion, pour l'inspecter dans le DOM. */
+const monter = (raw: string) => render(<div data-hote="">{inlineSvgToReact(raw)}</div>);
+
+const SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>';
+
+test('le balisage devient de vrais nœuds SVG', async () => {
+  const screen = await monter(SVG);
+  const svg = screen.container.querySelector('svg')!;
+
+  expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+  expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+  expect(svg.querySelector('circle')).toHaveAttribute('r', '10');
+});
+
+// Tout l'intérêt de l'inlining : le vecteur hérite du CSS environnant, ce qu'un
+// `<img>` ne permet pas.
+test('le SVG inliné hérite de la couleur du texte', async () => {
+  const screen = await render(
+    <div style={{ color: 'rgb(1, 2, 3)' }}>
+      {inlineSvgToReact(
+        '<svg viewBox="0 0 10 10"><rect width="10" height="10" fill="currentColor"/></svg>',
+      )}
+    </div>,
+  );
+
+  expect(getComputedStyle(screen.container.querySelector('rect')!).fill).toBe('rgb(1, 2, 3)');
+});
+
+test('sans balise svg, rien n’est rendu', async () => {
+  expect(inlineSvgToReact('<div>pas un svg</div>')).toBeNull();
+  expect(inlineSvgToReact('')).toBeNull();
+});
+
+// --- Nettoyage -------------------------------------------------------------
+// Le modèle de menace n'est pas « les images du kit » : c'est un projet qui sert
+// ses images depuis un CDN, ou qui laisse un client déposer son logo.
+test('les balises exécutables sont retirées avec leur contenu', async () => {
+  const screen = await monter(
+    '<svg viewBox="0 0 10 10">' +
+      '<script>window.__pwned = 1</script>' +
+      '<foreignObject><div>html</div></foreignObject>' +
+      '<animate attributeName="fill" to="red"/>' +
+      '<circle r="1"/>' +
+      '</svg>',
+  );
+  const svg = screen.container.querySelector('svg')!;
+
+  expect(svg.querySelector('script')).toBeNull();
+  expect(svg.querySelector('foreignObject')).toBeNull();
+  expect(svg.querySelector('animate')).toBeNull();
+  expect(svg.querySelector('circle')).not.toBeNull();
+  expect((window as unknown as { __pwned?: number }).__pwned).toBeUndefined();
+  expect(svg.textContent).not.toContain('window.__pwned');
+});
+
+test('les gestionnaires d’événements sont retirés', async () => {
+  const screen = await monter(
+    '<svg viewBox="0 0 10 10" onload="window.__pwned = 1"><circle r="1" onclick="alert(1)"/></svg>',
+  );
+  const svg = screen.container.querySelector('svg')!;
+
+  expect(svg.hasAttribute('onload')).toBe(false);
+  expect(svg.querySelector('circle')!.hasAttribute('onclick')).toBe(false);
+});
+
+// Une référence reste dans le document, ou navigue en http(s) : `javascript:` et
+// `data:` n'ont rien à faire dans un attribut de lien.
+test('seules les références sûres survivent', async () => {
+  const screen = await monter(
+    '<svg viewBox="0 0 10 10">' +
+      '<use href="#icone"/>' +
+      '<a href="https://example.com"><circle r="1"/></a>' +
+      '<a href="javascript:alert(1)" id="mauvais"><circle r="2"/></a>' +
+      '<image href="data:text/html,pwn" id="charge"/>' +
+      '</svg>',
+  );
+  const svg = screen.container.querySelector('svg')!;
+
+  expect(svg.querySelector('use')).toHaveAttribute('href', '#icone');
+  expect(svg.querySelector('a[href="https://example.com"]')).not.toBeNull();
+  expect(svg.querySelector('#mauvais')!.hasAttribute('href')).toBe(false);
+  expect(svg.querySelector('#charge')!.hasAttribute('href')).toBe(false);
+});
+
+// --- Conversion des attributs ----------------------------------------------
+test('class et style sont traduits pour React', async () => {
+  const screen = await monter(
+    '<svg viewBox="0 0 10 10" class="mon-svg" style="opacity: 0.5; --teinte: red"><circle r="1"/></svg>',
+  );
+  const svg = screen.container.querySelector('svg')!;
+
+  expect(svg).toHaveClass('mon-svg');
+  expect(getComputedStyle(svg).opacity).toBe('0.5');
+  expect(svg.style.getPropertyValue('--teinte')).toBe('red');
+});
+
+test('un attribut à deux points garde son sens', async () => {
+  const screen = await monter(
+    '<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10">' +
+      '<use xlink:href="#cible"/></svg>',
+  );
+
+  expect(screen.container.querySelector('use')!.getAttribute('xlink:href')).toBe('#cible');
+});
+
+test('les attributs de présentation traversent tels quels', async () => {
+  const screen = await monter(
+    '<svg viewBox="0 0 10 10"><path d="M0 0" stroke-width="3" stroke-linecap="round"/></svg>',
+  );
+  const path = screen.container.querySelector('path')!;
+
+  expect(path).toHaveAttribute('stroke-width', '3');
+  expect(path).toHaveAttribute('stroke-linecap', 'round');
+});
diff --git a/packages/ui-kit-react/src/base/ui-image/ui-image-svg.tsx b/packages/ui-kit-react/src/base/ui-image/ui-image-svg.tsx
new file mode 100644
index 0000000..3f19bc1
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/ui-image-svg.tsx
@@ -0,0 +1,129 @@
+import { createElement, type CSSProperties, type ReactElement, type ReactNode } from 'react';
+
+/**
+ * Inlining d'un SVG par `ui-image`, **sans jamais coller une chaîne**.
+ *
+ * Inliner un SVG est ce qui lui fait hériter du CSS, `currentColor` et le thème,
+ * ce qu'un `<img>` ne permet pas. Côté Angular cela passe par un
+ * `bypassSecurityTrustHtml()`, la seule exception de sécurité du kit. Ici le
+ * balisage est **converti en éléments React** : rien n'est écrit en HTML, donc
+ * il n'y a pas d'exception à lever, et `docs/SECURITY-PRACTICES.md` peut rester
+ * vide.
+ *
+ * Le modèle de menace n'est pas « les images du kit » : c'est un projet qui sert
+ * `assets/img/` depuis un CDN, ou qui laisse un client déposer son logo dans un
+ * dossier de marque. Dans les deux cas le SVG est du balisage d'origine inconnue
+ * rendu dans l'origine de l'application, d'où le nettoyage qui précède la
+ * conversion.
+ */
+
+/**
+ * Balises retirées AVEC leur contenu : les déballer poserait leur corps dans le
+ * document, ou laisserait le vecteur intact.
+ *
+ * `foreignObject` rouvre tout l'espace de noms HTML dans le SVG, et les
+ * éléments SMIL peuvent recibler un attribut APRÈS ce nettoyage.
+ */
+const VOIDED_TAGS = new Set([
+  'script',
+  'foreignobject',
+  'iframe',
+  'object',
+  'embed',
+  'animate',
+  'animatetransform',
+  'animatemotion',
+  'set',
+  'handler',
+]);
+
+/** Attributs porteurs d'une référence : les seuls autorisés à nommer une cible. */
+const REF_ATTRS = new Set(['href', 'xlink:href', 'src']);
+
+/** Une référence reste dans le document, ou navigue en http(s). */
+const ALLOWED_REF_PROTOCOLS = ['http:', 'https:'];
+
+/** Rejette `javascript:`, `data:` et les autres schémas non navigationnels. */
+function isSafeRef(value: string): boolean {
+  const ref = value.trim();
+  // `<use href="#icone">` : une référence au même document ne nomme aucune cible externe.
+  if (ref.startsWith('#')) return true;
+  try {
+    return ALLOWED_REF_PROTOCOLS.includes(new URL(ref, document.baseURI).protocol);
+  } catch {
+    return false;
+  }
+}
+
+/** `stroke-width: 2; fill: red` vers l'objet que React attend. */
+function parseStyle(text: string): CSSProperties {
+  const style: Record<string, string> = {};
+  for (const rule of text.split(';')) {
+    const colon = rule.indexOf(':');
+    if (colon === -1) continue;
+    const property = rule.slice(0, colon).trim();
+    const value = rule.slice(colon + 1).trim();
+    if (!property || !value) continue;
+    // Une propriété personnalisée garde son nom ; les autres passent en camel.
+    style[
+      property.startsWith('--')
+        ? property
+        : property.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+    ] = value;
+  }
+  return style as CSSProperties;
+}
+
+/** Le nom de prop React d'un attribut, ou `null` s'il est à jeter. */
+function propNameOf(name: string): string | null {
+  const lower = name.toLowerCase();
+  // Tout gestionnaire d'événement, quel que soit l'élément qui le porte.
+  if (lower.startsWith('on')) return null;
+  if (lower === 'class') return 'className';
+  // `xlink:href` vers `xlinkHref`, `xml:space` vers `xmlSpace`.
+  if (name.includes(':')) return name.replace(/:([a-z])/g, (_, c: string) => c.toUpperCase());
+  return name;
+}
+
+/** Convertit un nœud nettoyé en élément React, récursivement. */
+function toReact(node: Node, key: number): ReactNode {
+  if (node.nodeType === Node.TEXT_NODE) return node.nodeValue;
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+
+  const element = node as Element;
+  if (VOIDED_TAGS.has(element.tagName.toLowerCase())) return null;
+
+  const props: Record<string, unknown> = { key };
+  for (const attr of element.attributes) {
+    if (REF_ATTRS.has(attr.name.toLowerCase()) && !isSafeRef(attr.value)) continue;
+    const prop = propNameOf(attr.name);
+    if (!prop) continue;
+    props[prop] = prop === 'style' ? parseStyle(attr.value) : attr.value;
+  }
+
+  const children = [...element.childNodes]
+    .map((child, index) => toReact(child, index))
+    .filter((child) => child !== null && child !== '');
+
+  return createElement(element.localName, props, children.length ? children : undefined);
+}
+
+/**
+ * Convertit le balisage d'un SVG en éléments React, après l'avoir nettoyé.
+ *
+ * L'analyse se fait dans un document détaché, donc inerte : rien ne s'exécute
+ * et rien n'est chargé pendant qu'on l'inspecte. Rend `null` quand il n'y a pas
+ * de DOM pour analyser (rendu serveur) ou quand le balisage ne contient pas de
+ * `<svg>`, ce qui échoue du bon côté.
+ */
+export function inlineSvgToReact(raw: string): ReactElement | null {
+  if (typeof DOMParser === 'undefined') return null;
+
+  // `text/html` et non `image/svg+xml` : l'analyse HTML est tolérante, là où
+  // l'analyse XML rejette en bloc un fichier mal formé.
+  const parsed = new DOMParser().parseFromString(raw, 'text/html');
+  const svg = parsed.body.querySelector('svg');
+  if (!svg) return null;
+
+  return toReact(svg, 0) as ReactElement | null;
+}
diff --git a/packages/ui-kit-react/src/base/ui-image/ui-image.mdx b/packages/ui-kit-react/src/base/ui-image/ui-image.mdx
new file mode 100644
index 0000000..3ea2b21
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/ui-image.mdx
@@ -0,0 +1,202 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
+import { ConfigTable } from '@sb/blocks/config-table';
+import * as ImageStories from './ui-image.stories';
+
+<Meta of={ImageStories} />
+
+# ui-image
+
+Une image consciente du thème et de la marque, avec son repli, sa vignette et sa vue
+agrandie.
+
+<Canvas of={ImageStories.Remote} />
+
+## API
+
+<ArgTypes of={ImageStories} />
+
+## Trois sources
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Ce qui se passe</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>src</code>
+      </td>
+      <td>Une URL distante ou absolue, rendue telle quelle. Elle gagne sur `name`.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>name</code>
+      </td>
+      <td>
+        Une image locale, résolue par la table du projet selon le mode et la marque actifs.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>src</code> plus <code>secured</code>
+      </td>
+      <td>
+        L'URL passe par la fonction de l'application, celle qui sait poser son autorisation.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## La table des images du projet
+
+Le kit ne peut pas connaître les images d'une application : la table est donc **fournie**,
+pas embarquée. Sans elle, `name` ne résout rien et le composant retombe sur sa vignette,
+tandis que `src` continue de marcher.
+
+```tsx
+import assets from './assets/assets-map.json';
+
+<UiImageProvider assets={assets}>
+  <App />
+</UiImageProvider>;
+```
+
+Une entrée nomme le dossier de marque, ou `common`, puis la variante : `base` pour une image
+unique, `light` et `dark` pour un couple qui suit le mode. Le chemin se construit ensuite
+seul, `assets/img/<marque>/<type>/<mode>/<fichier>`.
+
+## SVG inliné
+
+Un SVG **local** est inliné, ce qui lui fait hériter du CSS : sa couleur vient de
+`currentColor`, donc du texte autour, ce qu'un `<img>` ne permet pas.
+
+<Canvas of={ImageStories.InlineSvg} />
+
+<div className="sb-callout">
+
+**Sans jamais coller une chaîne.** Le balisage est converti en **éléments React**, et non
+injecté en HTML. Côté Angular cette fonction est la seule exception de sécurité du kit, un
+`bypassSecurityTrustHtml()` ; ici il n'y a rien à lever, et le registre de
+`docs/SECURITY-PRACTICES.md` reste vide.
+
+Le nettoyage reste nécessaire, parce que le modèle de menace n'est pas « les images du kit » :
+c'est un projet qui sert ses images depuis un CDN, ou qui laisse un client déposer son logo
+dans un dossier de marque. Scripts, `foreignObject`, animations SMIL, gestionnaires
+d'événements et références non navigationnelles sont retirés avant la conversion.
+
+Un SVG **distant** n'est jamais inliné : il passe par un `<img>`, ce qui n'ouvre aucune
+surface.
+
+</div>
+
+## Repli et vignette
+
+Quand l'image principale échoue, l'image `fallback` prend le relais ; si elle échoue aussi,
+une vignette reste, pour que la mise en page ne s'effondre pas.
+
+<Canvas of={ImageStories.Fallback} />
+<Canvas of={ImageStories.FailedNoFallback} />
+<Canvas of={ImageStories.Placeholder} />
+
+Les drapeaux d'échec sont attachés à **l'URL** qui a échoué : un changement de thème, de
+marque ou de `src` rejoue donc le chargement tout seul.
+
+## Image protégée
+
+Un `<img src>` est une requête ordinaire du navigateur : elle ne porte ni intercepteur ni
+jeton. `secured` passe donc par la fonction que l'application fournit, et affiche le `Blob`
+reçu par une URL d'objet, révoquée dès que la source change ou que le composant part.
+
+```tsx
+<UiImageProvider assets={assets} fetchSecured={(url, init) => api.getBlob(url, init)}>
+  <App />
+</UiImageProvider>
+```
+
+<Canvas of={ImageStories.Secured} />
+<Canvas of={ImageStories.SecuredError} />
+
+⚠️ Le cross-origin s'applique quand même : le point d'accès doit répondre au contrôle
+préalable CORS, y compris pour l'en-tête d'autorisation. Un `<img>` l'aurait affichée sans
+rien de tout ça.
+
+## Dimensions
+
+<Canvas of={ImageStories.Fill} />
+
+## Vue agrandie
+
+`preview` fait de l'image un **bouton** qui ouvre la vue agrandie : zoom, rotation,
+déplacement, et au besoin téléchargement. Elle s'ouvre aussi par le code, sans passer par
+l'image.
+
+<Canvas of={ImageStories.Preview} />
+<Canvas of={ImageStories.PreviewDownloadable} />
+<Canvas of={ImageStories.PreviewPortrait} />
+<Canvas of={ImageStories.CustomIndicator} />
+<Canvas of={ImageStories.ControlledPreview} />
+
+## Accessibilité
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Point</th>
+      <th>Implémentation</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Vignette</td>
+      <td>
+        Elle porte <code>role="img"</code> et le texte alternatif quand il y en a un, et devient{' '}
+        <code>aria-hidden</code> sinon : annoncer une image sans nom ne dirait rien à personne.
+      </td>
+    </tr>
+    <tr>
+      <td>Déclencheur d'aperçu</td>
+      <td>
+        Un <code>&lt;button&gt;</code> natif portant <code>aria-haspopup="dialog"</code>, donc
+        atteignable au clavier. Le voile de survol est décoratif, et se révèle aussi au focus
+        clavier : un indice réservé au pointeur laisserait le clavier de côté.
+      </td>
+    </tr>
+    <tr>
+      <td>Vue agrandie</td>
+      <td>
+        Un <code>&lt;dialog&gt;</code> natif : piège de focus, restitution du focus et{' '}
+        <code>Échap</code> viennent du navigateur.
+      </td>
+    </tr>
+    <tr>
+      <td>Zoom au clavier</td>
+      <td>
+        <code>+</code> et <code>-</code> zooment, <code>0</code> réinitialise, <code>r</code>{' '}
+        pivote, et les flèches déplacent. Un zoom qu'on ne peut pas déplacer au clavier est un
+        zoom qu'on ne peut pas lire.
+      </td>
+    </tr>
+    <tr>
+      <td>Actions indisponibles</td>
+      <td>
+        <code>aria-disabled</code>, jamais <code>disabled</code> : un vrai <code>disabled</code>{' '}
+        laisse tomber le focus sur le corps dès que le bouton qui le porte atteint une borne, et{' '}
+        <code>Échap</code> n'atteint plus le dialogue.
+      </td>
+    </tr>
+    <tr>
+      <td>Quart de tour</td>
+      <td>
+        Une rotation échange les axes de ce qui est dessiné, jamais ceux de la boîte : les bornes
+        sont échangées avec, sinon une photo en paysage mise debout est coupée.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Theming
+
+<ConfigTable of="ui-image" />
diff --git a/packages/ui-kit-react/src/base/ui-image/ui-image.scss b/packages/ui-kit-react/src/base/ui-image/ui-image.scss
new file mode 100644
index 0000000..9b98ef8
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/ui-image.scss
@@ -0,0 +1,277 @@
+@use 'utils';
+
+// =====================================================================
+// ui-image : co-located styles for the whole family (the image, its
+// preview trigger, and the enlarged view). All values come from tokens.
+//
+// No host element here, so `.ui-image-root` is the image's own box and
+// `.ui-image-preview` IS the native <dialog>: the mask of the Angular kit
+// folds into `::backdrop`.
+// =====================================================================
+
+// --- Config : the image ------------------------------------------------
+$object-fit: var(--ui-image-object-fit, contain); /// Ajustement de l'image dans sa boîte.
+
+$placeholder-min-width: var(--ui-image-placeholder-min-width, var(--units-xl)); /// Largeur minimale de la vignette, visible même sans dimension imposée.
+$placeholder-min-height: var(--ui-image-placeholder-min-height, var(--units-xl)); /// Hauteur minimale de la vignette.
+$placeholder-radius: var(--ui-image-placeholder-radius, var(--radius-default)); /// Rayon des coins de la vignette.
+
+// Carré par défaut, comme l'image qu'il enveloppe : un voile arrondi sur des
+// coins droits laisse quatre éclats visibles. Un projet qui arrondit ses images
+// le règle une fois.
+$trigger-radius: var(--ui-image-trigger-radius, 0); /// Rayon du déclencheur d'aperçu, que le voile suit.
+$trigger-focus-ring-width: var(
+  --ui-image-trigger-focus-ring-width,
+  #{utils.$focus-ring-width}
+); /// Épaisseur de l'anneau de focus du déclencheur d'aperçu.
+
+$indicator-font-size: var(--ui-image-indicator-font-size, var(--size-typography-text-lg)); /// Taille de l'indicateur d'aperçu.
+
+// --- Config : the enlarged view ---------------------------------------
+// Le fond reste sombre dans les deux modes : le but est d'ôter la page de
+// devant l'image. Ses couleurs sont donc des primitives derrière des crochets,
+// l'exception que les règles de jetons réservent aux fonds de calque.
+$mask-background: var(--ui-image-preview-mask-background, var(--primitives-black-80)); /// Assombrissement du fond de l'aperçu.
+$preview-padding: var(--ui-image-preview-padding, var(--units-lg)); /// Retrait autour de l'image agrandie.
+$preview-gap: var(--ui-image-preview-gap, var(--units-md)); /// Espace entre la barre d'actions et l'image.
+
+$toolbar-gap: var(--ui-image-preview-toolbar-gap, var(--units-2xs)); /// Espacement entre les actions.
+$toolbar-padding: var(--ui-image-preview-toolbar-padding, var(--units-2xs)); /// Retrait de la barre d'actions.
+$toolbar-radius: var(--ui-image-preview-toolbar-radius, var(--radius-full)); /// Rayon de la barre d'actions.
+$toolbar-background: var(--ui-image-preview-toolbar-background, var(--primitives-black-50)); /// Fond de la barre d'actions.
+
+$action-size: var(--ui-image-preview-action-size, #{utils.rem-calc(36)}); /// Côté de la cible tactile d'une action.
+$action-radius: var(--ui-image-preview-action-radius, var(--radius-full)); /// Rayon d'une action.
+$action-opacity-disabled: var(--ui-image-preview-action-opacity-disabled, 0.4); /// Opacité d'une action indisponible.
+$preview-focus-ring-width: var(
+  --ui-image-preview-focus-ring-width,
+  #{utils.$focus-ring-width}
+); /// Épaisseur de l'anneau de focus des actions de l'aperçu.
+
+$media-max-width: var(--ui-image-preview-media-max-width, 100%); /// Largeur maximale de l'image agrandie.
+$media-max-height: var(--ui-image-preview-media-max-height, 100%); /// Hauteur maximale de l'image agrandie.
+$media-shadow: var(--ui-image-preview-media-shadow, var(--shadow-default-lg)); /// Ombre de l'image agrandie.
+
+// Un quart de tour échange les axes de ce qui est DESSINÉ, jamais ceux de la
+// boîte : il faut donc échanger les bornes aussi, sinon une photo en paysage
+// mise debout est coupée en haut et en bas. Les unités de conteneur lisent la
+// scène sans avoir à la mesurer.
+$media-max-width-rotated: var(--ui-image-preview-media-max-width-rotated, 100cqh); /// Largeur maximale de l'image après un quart de tour.
+$media-max-height-rotated: var(--ui-image-preview-media-max-height-rotated, 100cqw); /// Hauteur maximale de l'image après un quart de tour.
+
+// --- The image ---------------------------------------------------------
+.ui-image-root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &._fill {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ui-image {
+  object-fit: $object-fit;
+}
+
+.ui-image-root._fill .ui-image {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-image-svg {
+  display: flex;
+  width: 100%;
+
+  // Sans encapsulation, le SVG inliné se cible directement : le `::ng-deep` de
+  // la version Angular n'a plus lieu d'être.
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ui-image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: $placeholder-min-width;
+  min-height: $placeholder-min-height;
+  border-radius: $placeholder-radius;
+  background: var(--ui-image-placeholder-surface, var(--global-background-muted)); /// Fond de la vignette de repli.
+  color: var(--ui-image-placeholder-color, var(--global-text-muted)); /// Couleur de l'icône de la vignette de repli.
+}
+
+// --- Preview trigger ---------------------------------------------------
+// Un bouton natif, pour que la vue agrandie soit atteignable au clavier ; il
+// épouse l'image et n'ajoute aucune boîte.
+.ui-image-trigger {
+  position: relative;
+  display: inline-flex;
+  padding: 0;
+  border: none;
+  border-radius: $trigger-radius;
+  background: none;
+  line-height: 0;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 $trigger-focus-ring-width
+      var(--ui-image-trigger-focus-ring-color, var(--global-border-focus)); /// Couleur de l'anneau de focus du déclencheur d'aperçu.
+  }
+
+  // Le voile EST l'affordance : caché au repos, révélé au survol comme au focus
+  // clavier, un indice réservé au pointeur laissant le clavier de côté.
+  &:hover .ui-image-indicator,
+  &:focus-visible .ui-image-indicator {
+    opacity: 1;
+  }
+}
+
+.ui-image-indicator {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  background: var(--ui-image-indicator-background, var(--primitives-black-50)); /// Voile posé sur l'image au survol de l'aperçu.
+  color: var(--ui-image-indicator-color, var(--primitives-white-base)); /// Couleur de l'indicateur d'aperçu.
+  font-size: $indicator-font-size;
+  line-height: 1;
+  opacity: 0;
+  @include utils.control-transition(opacity);
+
+  @include utils.motion-reduce {
+    transition-duration: 0.01ms;
+  }
+}
+
+// --- The enlarged view -------------------------------------------------
+.ui-image-preview {
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: $preview-gap;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  padding: $preview-padding;
+  border: none;
+  background: none;
+  outline: none;
+
+  // Le `display: none` d'un dialogue fermé vient du style NAVIGATEUR, que le
+  // `display: flex` ci-dessus bat. Il faut donc le redire.
+  &:not([open]) {
+    display: none;
+  }
+
+  &::backdrop {
+    background-color: $mask-background;
+  }
+
+  // --- Toolbar --------------------------------------------------------
+  &-toolbar {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-self: center;
+    justify-content: center;
+    gap: $toolbar-gap;
+    padding: $toolbar-padding;
+    border-radius: $toolbar-radius;
+    background-color: $toolbar-background;
+  }
+
+  // Des boutons d'icône natifs, pas des `ui-button` : ils se posent sur le
+  // fond, pas sur une surface.
+  &-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: $action-size;
+    height: $action-size;
+    padding: 0;
+    border: none;
+    border-radius: $action-radius;
+    background: transparent;
+    color: var(--ui-image-preview-action-color, var(--primitives-white-base)); /// Couleur d'une action de l'aperçu.
+    line-height: 0;
+    text-decoration: none;
+    cursor: pointer;
+    @include utils.control-transition(background-color, box-shadow);
+
+    &:hover {
+      background-color: var(
+        --ui-image-preview-action-surface-hover,
+        var(--primitives-white-20)
+      ); /// Fond d'une action au survol.
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 $preview-focus-ring-width
+        var(--ui-image-preview-action-focus-ring-color, var(--global-border-focus)); /// Couleur de l'anneau de focus d'une action.
+    }
+
+    // `aria-disabled`, et non `disabled` : voir la note du composant sur le focus.
+    &[aria-disabled='true'] {
+      opacity: $action-opacity-disabled;
+      cursor: not-allowed;
+    }
+
+    @include utils.motion-reduce {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  // --- Stage ----------------------------------------------------------
+  // Occupe ce que la barre laisse ; un clic qui atterrit là, et jamais sur
+  // l'image, est un clic dehors.
+  &-stage {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+    overflow: hidden;
+    // Boîte de référence des unités `cq` que lit l'image pivotée.
+    container-type: size;
+  }
+
+  &-media {
+    max-width: $media-max-width;
+    max-height: $media-max-height;
+    box-shadow: $media-shadow;
+    object-fit: contain;
+    // La transformation est la seule propriété animée, et elle est écrite en
+    // ligne par le composant : rien ici ne doit la contrarier.
+    transform-origin: center;
+    // La molette zoome et le glissement déplace : le navigateur ne doit pas
+    // défiler en plus.
+    touch-action: none;
+    user-select: none;
+    -webkit-user-drag: none;
+
+    &._rotated {
+      max-width: $media-max-width-rotated;
+      max-height: $media-max-height-rotated;
+    }
+
+    &._pannable {
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+  }
+}
diff --git a/packages/ui-kit-react/src/base/ui-image/ui-image.stories.tsx b/packages/ui-kit-react/src/base/ui-image/ui-image.stories.tsx
new file mode 100644
index 0000000..c38e019
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/ui-image.stories.tsx
@@ -0,0 +1,186 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UiButton } from '../../actions/ui-button';
+
+import { UiImage, UiImageProvider, type UiImageAssetsMap } from './ui-image';
+
+/**
+ * Une table d'images de démonstration. Un projet génère la sienne, et la fournit
+ * par `UiImageProvider` : le kit ne peut pas connaître les images d'une
+ * application.
+ */
+const ASSETS: UiImageAssetsMap = {
+  'logo.svg': { common: { base: 'logo' } },
+};
+
+const PHOTO = 'https://picsum.photos/id/1015/640/400';
+const PORTRAIT = 'https://picsum.photos/id/1025/400/640';
+
+const meta: Meta<typeof UiImage> = {
+  title: 'Components/ui/base/ui-image',
+  component: UiImage,
+  args: {
+    alt: 'Paysage de montagne',
+    width: 320,
+    height: 200,
+  },
+  argTypes: {
+    src: { control: 'text' },
+    name: { control: 'text' },
+    alt: { control: 'text' },
+    width: { control: 'number' },
+    height: { control: 'number' },
+    fill: { control: 'boolean' },
+    priority: { control: 'boolean' },
+    secured: { control: 'boolean' },
+    preview: { control: 'boolean' },
+    downloadable: { control: 'boolean' },
+    previewVisible: { control: false },
+    previewIndicator: { control: false },
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/GZww5hdUA49LB8XWeWP6tl/-Projet----UI-Kit?node-id=0-1',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <UiImageProvider assets={ASSETS}>
+        <Story />
+      </UiImageProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof UiImage>;
+
+/** Une URL distante, rendue par un `<img>` ordinaire. */
+export const Remote: Story = {
+  args: { src: PHOTO },
+};
+
+/** `fill` fait remplir le conteneur à l'image, au lieu de porter ses dimensions. */
+export const Fill: Story = {
+  args: { src: PHOTO, fill: true, width: undefined, height: undefined },
+  render: (args) => (
+    <div style={{ width: 320, height: 200, overflow: 'hidden', borderRadius: 8 }}>
+      <UiImage {...args} />
+    </div>
+  ),
+};
+
+/**
+ * Un SVG **local** est converti en éléments React, ce qui lui fait hériter du
+ * CSS : la couleur des deux vient de `currentColor`, donc du texte autour.
+ */
+export const InlineSvg: Story = {
+  args: { src: undefined, name: 'logo.svg', width: 64, height: 64, alt: undefined },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
+      <div style={{ color: 'var(--actions-high-surface-default)' }}>
+        <UiImage {...args} />
+      </div>
+      <div style={{ color: 'var(--informative-successhigh-surface-default)' }}>
+        <UiImage {...args} />
+      </div>
+    </div>
+  ),
+};
+
+/** Rien à afficher : une vignette prend la place, sans jamais casser la mise en page. */
+export const Placeholder: Story = {
+  args: { src: undefined, name: undefined, alt: 'Image absente' },
+};
+
+/** L'image échoue, et le repli local prend le relais. */
+export const Fallback: Story = {
+  args: { src: 'https://example.invalid/introuvable.png', fallback: 'logo.svg' },
+};
+
+/** L'image échoue sans repli : la vignette reste. */
+export const FailedNoFallback: Story = {
+  args: { src: 'https://example.invalid/introuvable.png' },
+};
+
+/** Cliquer l'image ouvre la vue agrandie : zoom, rotation, déplacement. */
+export const Preview: Story = {
+  args: { src: PHOTO, preview: true },
+};
+
+/** La vue agrandie propose aussi le téléchargement. */
+export const PreviewDownloadable: Story = {
+  args: { src: PHOTO, preview: true, downloadable: true, downloadName: 'paysage.jpg' },
+};
+
+/** Une photo en portrait, pour voir le recadrage après un quart de tour. */
+export const PreviewPortrait: Story = {
+  args: { src: PORTRAIT, preview: true, alt: 'Portrait', width: 200, height: 320 },
+};
+
+/** L'indicateur de survol se remplace. */
+export const CustomIndicator: Story = {
+  args: {
+    src: PHOTO,
+    preview: true,
+    previewIndicator: <span style={{ fontSize: '0.875rem' }}>Agrandir</span>,
+  },
+};
+
+/** L'aperçu s'ouvre aussi par le code, sans passer par l'image. */
+function ControlledPreviewDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center' }}>
+      <UiImage
+        src={PHOTO}
+        alt="Paysage"
+        width={320}
+        height={200}
+        preview
+        previewVisible={open}
+        onPreviewVisibleChange={setOpen}
+      />
+      <UiButton label="Ouvrir l'aperçu" level="low" onClick={() => setOpen(true)} />
+    </div>
+  );
+}
+
+export const ControlledPreview: Story = {
+  render: () => <ControlledPreviewDemo />,
+};
+
+/**
+ * `secured` passe par la fonction de l'application plutôt que par le navigateur :
+ * c'est ce dont a besoin un point d'accès derrière un en-tête d'autorisation.
+ */
+export const Secured: Story = {
+  args: { src: 'https://exemple.test/image-protegee.png', secured: true },
+  render: (args) => (
+    <UiImageProvider
+      assets={ASSETS}
+      fetchSecured={async () => {
+        // Un faux client authentifié : il rend une image locale plutôt que
+        // d'aller sur le réseau, pour que la story soit reproductible.
+        const response = await fetch('assets/img/common/logo/logo.svg');
+        return response.blob();
+      }}
+    >
+      <UiImage {...args} alt="Image protégée" width={120} height={120} />
+    </UiImageProvider>
+  ),
+};
+
+/** La requête protégée échoue : la vignette prend la place. */
+export const SecuredError: Story = {
+  args: { src: 'https://exemple.test/interdit.png', secured: true, alt: 'Image protégée' },
+  render: (args) => (
+    <UiImageProvider assets={ASSETS} fetchSecured={() => Promise.reject(new Error('401'))}>
+      <UiImage {...args} />
+    </UiImageProvider>
+  ),
+};
diff --git a/packages/ui-kit-react/src/base/ui-image/ui-image.test.tsx b/packages/ui-kit-react/src/base/ui-image/ui-image.test.tsx
new file mode 100644
index 0000000..5732584
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/ui-image.test.tsx
@@ -0,0 +1,414 @@
+import { useState, type ReactNode } from 'react';
+import { afterEach, expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { UiImage, UiImageProvider, type UiImageAssetsMap } from './ui-image';
+
+const ASSETS: UiImageAssetsMap = {
+  'logo.png': { common: { base: 'logo' } },
+  'marque.png': { brand1: { base: 'marque' }, common: { base: 'marque' } },
+  'duo.png': { common: { light: 'duo', dark: 'duo' } },
+  'vecteur.svg': { common: { base: 'vecteur' } },
+  'absent.svg': { common: { base: 'absent' } },
+};
+
+const PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+function Host({
+  children,
+  assets = ASSETS,
+  fetchSecured,
+}: {
+  children: ReactNode;
+  assets?: UiImageAssetsMap;
+  fetchSecured?: (url: string, init: RequestInit) => Promise<Blob>;
+}) {
+  return (
+    <UiImageProvider assets={assets} fetchSecured={fetchSecured}>
+      {children}
+    </UiImageProvider>
+  );
+}
+
+const image = (root: ParentNode) => root.querySelector<HTMLImageElement>('img.ui-image');
+const placeholder = (root: ParentNode) => root.querySelector<HTMLElement>('.ui-image-placeholder');
+
+const trueFetch = globalThis.fetch;
+afterEach(() => {
+  globalThis.fetch = trueFetch;
+});
+
+// --- Sources ---------------------------------------------------------------
+test('une URL distante est rendue par un img', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage src={PIXEL} alt="Pixel" width={40} height={40} />
+    </Host>,
+  );
+
+  expect(image(screen.container)).toHaveAttribute('src', PIXEL);
+  expect(image(screen.container)).toHaveAttribute('alt', 'Pixel');
+});
+
+// Le nom d'une image locale se résout par la table du projet : le kit ne peut
+// pas connaître les images d'une application.
+test('un nom local se résout par la table fournie', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage name="logo.png" alt="Logo" />
+    </Host>,
+  );
+
+  expect(image(screen.container)).toHaveAttribute('src', 'assets/img/common/logo/logo.png');
+});
+
+test('la marque gagne sur le dossier commun', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage name="marque.png" alt="Marque" />
+    </Host>,
+  );
+
+  // La marque par défaut est `brand1`.
+  expect(image(screen.container)).toHaveAttribute('src', 'assets/img/brand1/marque/marque.png');
+});
+
+// Une variante par mode range le fichier dans un sous-dossier : c'est ce qui
+// fait suivre l'image au thème.
+test('une variante par mode range le fichier par mode', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage name="duo.png" alt="Duo" />
+    </Host>,
+  );
+
+  expect(image(screen.container)).toHaveAttribute('src', 'assets/img/common/duo/light/duo.png');
+});
+
+test('un nom absent de la table retombe sur la vignette', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage name="inconnue.png" alt="Inconnue" />
+    </Host>,
+  );
+
+  expect(image(screen.container)).toBeNull();
+  expect(placeholder(screen.container)).not.toBeNull();
+});
+
+test('src gagne sur name', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage src={PIXEL} name="logo.png" alt="Pixel" />
+    </Host>,
+  );
+
+  expect(image(screen.container)).toHaveAttribute('src', PIXEL);
+});
+
+// --- Vignette et repli -----------------------------------------------------
+test('sans source, la vignette prend la place et garde son nom', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage alt="Rien" />
+    </Host>,
+  );
+
+  expect(placeholder(screen.container)).toHaveAttribute('role', 'img');
+  expect(placeholder(screen.container)).toHaveAttribute('aria-label', 'Rien');
+});
+
+// Sans texte alternatif, la vignette est décorative : l'annoncer comme une
+// image sans nom ne dirait rien à personne.
+test('sans alt, la vignette est décorative', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage />
+    </Host>,
+  );
+
+  expect(placeholder(screen.container)).toHaveAttribute('aria-hidden', 'true');
+  expect(placeholder(screen.container)).not.toHaveAttribute('role');
+});
+
+test('une image en échec passe au repli, puis à la vignette', async () => {
+  const onLoadFailed = vi.fn();
+  const screen = await render(
+    <Host>
+      <UiImage
+        src="https://example.invalid/absente.png"
+        fallback="logo.png"
+        alt="Photo"
+        onLoadFailed={onLoadFailed}
+      />
+    </Host>,
+  );
+
+  // Le repli est bien TENTÉ, puis échoue à son tour, et il ne reste que la
+  // vignette. C'est le second appel qui le prouve : assérer l'état intermédiaire
+  // serait une course, les deux échecs pouvant tenir dans la même image.
+  await expect.poll(() => placeholder(screen.container)).not.toBeNull();
+  expect(onLoadFailed).toHaveBeenCalledWith('https://example.invalid/absente.png');
+  expect(onLoadFailed).toHaveBeenCalledWith('assets/img/common/logo/logo.png');
+});
+
+test('sans repli, une image en échec laisse la vignette', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage src="https://example.invalid/absente.png" alt="Photo" />
+    </Host>,
+  );
+
+  await expect.poll(() => placeholder(screen.container)).not.toBeNull();
+});
+
+// --- Dimensions ------------------------------------------------------------
+test('les dimensions se posent, avec leur unité', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage src={PIXEL} alt="Pixel" width={10} widthUnit="rem" height={4} heightUnit="rem" />
+    </Host>,
+  );
+
+  expect(image(screen.container)!.style.width).toBe('10rem');
+  expect(image(screen.container)!.style.height).toBe('4rem');
+});
+
+test('fill fait remplir le conteneur', async () => {
+  const screen = await render(
+    <Host>
+      <div style={{ width: 200, height: 100 }}>
+        <UiImage src={PIXEL} alt="Pixel" fill />
+      </div>
+    </Host>,
+  );
+
+  const rect = image(screen.container)!.getBoundingClientRect();
+  expect(Math.round(rect.width)).toBe(200);
+  expect(Math.round(rect.height)).toBe(100);
+});
+
+// Ce qui est visible d'emblée ne doit pas attendre : `priority` retire le
+// chargement paresseux et demande la priorité.
+test('priority retire le chargement paresseux', async () => {
+  const paresseux = await render(
+    <Host>
+      <UiImage src={PIXEL} alt="Pixel" />
+    </Host>,
+  );
+  const presse = await render(
+    <Host>
+      <UiImage src={PIXEL} alt="Pixel" priority />
+    </Host>,
+  );
+
+  expect(image(paresseux.container)).toHaveAttribute('loading', 'lazy');
+  expect(image(presse.container)).not.toHaveAttribute('loading');
+  expect(image(presse.container)).toHaveAttribute('fetchpriority', 'high');
+});
+
+// --- SVG inliné ------------------------------------------------------------
+// Un SVG LOCAL est inliné pour hériter du CSS ; un SVG distant passe toujours
+// par un `<img>`, ce qui n'ouvre aucune surface d'injection.
+test('un svg local est inliné, un svg distant reste une image', async () => {
+  globalThis.fetch = vi.fn(
+    async () => new Response('<svg viewBox="0 0 10 10"><circle r="4"/></svg>', { status: 200 }),
+  ) as typeof fetch;
+
+  const local = await render(
+    <Host>
+      <UiImage name="vecteur.svg" />
+    </Host>,
+  );
+  await expect.poll(() => local.container.querySelector('.ui-image-svg svg')).not.toBeNull();
+  expect(local.container.querySelector('img')).toBeNull();
+
+  const distant = await render(
+    <Host>
+      <UiImage src="https://example.test/logo.svg" alt="Distant" />
+    </Host>,
+  );
+  expect(distant.container.querySelector('svg')).toBeNull();
+  expect(image(distant.container)).toHaveAttribute('src', 'https://example.test/logo.svg');
+});
+
+// Une autre image que celle du test précédent : la charge déjà faite vit au
+// niveau du module, donc réutiliser le nom ressortirait le balisage en cache.
+test('un svg local introuvable retombe sur la vignette', async () => {
+  globalThis.fetch = vi.fn(async () => new Response('', { status: 404 })) as typeof fetch;
+
+  const screen = await render(
+    <Host>
+      <UiImage name="absent.svg" alt="Absent" />
+    </Host>,
+  );
+
+  await expect.poll(() => placeholder(screen.container)).not.toBeNull();
+});
+
+// --- Source protégée -------------------------------------------------------
+// Un `<img src>` est une requête ordinaire du navigateur : elle ne porte ni
+// intercepteur ni jeton. `secured` passe donc par la fonction de l'application.
+test('secured passe par le fetch fourni, et affiche le blob', async () => {
+  const fetchSecured = vi.fn(async () => new Blob(['x'], { type: 'image/png' }));
+
+  const screen = await render(
+    <Host fetchSecured={fetchSecured}>
+      <UiImage src="https://exemple.test/protegee.png" secured alt="Protégée" />
+    </Host>,
+  );
+
+  await expect.poll(() => image(screen.container)?.getAttribute('src')).toMatch(/^blob:/);
+  expect(fetchSecured).toHaveBeenCalledWith('https://exemple.test/protegee.png', {});
+});
+
+test('secured signale son échec, qu’aucun img ne pourrait rapporter', async () => {
+  const onLoadFailed = vi.fn();
+  const screen = await render(
+    <Host fetchSecured={() => Promise.reject(new Error('401'))}>
+      <UiImage
+        src="https://exemple.test/interdite.png"
+        secured
+        alt="Protégée"
+        onLoadFailed={onLoadFailed}
+      />
+    </Host>,
+  );
+
+  await expect.poll(() => placeholder(screen.container)).not.toBeNull();
+  expect(onLoadFailed).toHaveBeenCalledWith('https://exemple.test/interdite.png');
+});
+
+test('withCredentials voyage jusqu’au fetch', async () => {
+  const fetchSecured = vi.fn(async () => new Blob(['x']));
+
+  await render(
+    <Host fetchSecured={fetchSecured}>
+      <UiImage src="https://exemple.test/session.png" secured withCredentials alt="Session" />
+    </Host>,
+  );
+
+  await expect.poll(() => fetchSecured.mock.calls.length).toBe(1);
+  expect(fetchSecured).toHaveBeenCalledWith('https://exemple.test/session.png', {
+    credentials: 'include',
+  });
+});
+
+test('une image protégée montre un indicateur pendant sa requête', async () => {
+  let resolve: (blob: Blob) => void = () => {};
+  const screen = await render(
+    <Host fetchSecured={() => new Promise<Blob>((r) => (resolve = r))}>
+      <UiImage src="https://exemple.test/lente.png" secured alt="Lente" />
+    </Host>,
+  );
+
+  expect(screen.container.querySelector('.ui-image-placeholder._loading')).not.toBeNull();
+  expect(screen.container.querySelector('.ui-spinner')).not.toBeNull();
+
+  resolve(new Blob(['x']));
+  await expect.poll(() => screen.container.querySelector('._loading')).toBeNull();
+});
+
+// --- Aperçu ----------------------------------------------------------------
+test('preview fait de l’image un déclencheur nommé', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage src={PIXEL} alt="Paysage" preview />
+    </Host>,
+  );
+  const bouton = screen.container.querySelector('.ui-image-trigger')!;
+
+  expect(bouton.tagName).toBe('BUTTON');
+  expect(bouton).toHaveAttribute('aria-haspopup', 'dialog');
+  expect(bouton).toHaveAttribute('aria-label', 'Paysage');
+});
+
+test('sans quoi agrandir, il n’y a pas de déclencheur', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage preview alt="Rien" />
+    </Host>,
+  );
+
+  expect(screen.container.querySelector('.ui-image-trigger')).toBeNull();
+});
+
+test('le clic ouvre la vue agrandie dans le calque supérieur', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage src={PIXEL} alt="Paysage" preview />
+    </Host>,
+  );
+
+  await screen.getByRole('button', { name: 'Paysage' }).click();
+
+  const dialog = document.querySelector<HTMLDialogElement>('.ui-image-preview')!;
+  await expect.poll(() => dialog.open).toBe(true);
+  expect(dialog.matches(':modal')).toBe(true);
+  expect(dialog).toHaveAttribute('aria-label', "Aperçu de l'image");
+});
+
+test('l’aperçu s’ouvre aussi par l’appelant', async () => {
+  function Controlled() {
+    const [open, setOpen] = useState(false);
+    return (
+      <Host>
+        <button type="button" onClick={() => setOpen(true)}>
+          Ouvrir
+        </button>
+        <UiImage
+          src={PIXEL}
+          alt="Paysage"
+          preview
+          previewVisible={open}
+          onPreviewVisibleChange={setOpen}
+        />
+      </Host>
+    );
+  }
+  const screen = await render(<Controlled />);
+
+  await screen.getByRole('button', { name: 'Ouvrir' }).click();
+
+  await expect
+    .poll(() => document.querySelector<HTMLDialogElement>('.ui-image-preview')?.open)
+    .toBe(true);
+});
+
+test('l’indicateur de survol se remplace, et reste décoratif', async () => {
+  const screen = await render(
+    <Host>
+      <UiImage src={PIXEL} alt="Paysage" preview previewIndicator={<span>Agrandir</span>} />
+    </Host>,
+  );
+  const indicateur = screen.container.querySelector('.ui-image-indicator')!;
+
+  expect(indicateur).toHaveAttribute('aria-hidden', 'true');
+  expect(indicateur).toHaveTextContent('Agrandir');
+});
+
+// Une image doit afficher une URL distante sans qu'on ait rien à poser autour :
+// le mode et la marque se lisent sur `<html>`, pas dans un fournisseur.
+test('sans aucun fournisseur, une URL distante s’affiche quand même', async () => {
+  const screen = await render(<UiImage src={PIXEL} alt="Pixel" />);
+
+  expect(image(screen.container)).toHaveAttribute('src', PIXEL);
+});
+
+// Le mode vient de l'attribut que le fournisseur, le script d'amorçage ou la
+// barre d'outils de Storybook posent sur `<html>`.
+test('le mode sombre change l’image résolue', async () => {
+  document.documentElement.setAttribute('data-theme', 'dark');
+  try {
+    const screen = await render(
+      <Host>
+        <UiImage name="duo.png" alt="Duo" />
+      </Host>,
+    );
+    await expect
+      .poll(() => image(screen.container)?.getAttribute('src'))
+      .toBe('assets/img/common/duo/dark/duo.png');
+  } finally {
+    document.documentElement.removeAttribute('data-theme');
+  }
+});
diff --git a/packages/ui-kit-react/src/base/ui-image/ui-image.tsx b/packages/ui-kit-react/src/base/ui-image/ui-image.tsx
new file mode 100644
index 0000000..4ae8ed2
--- /dev/null
+++ b/packages/ui-kit-react/src/base/ui-image/ui-image.tsx
@@ -0,0 +1,481 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+
+import { UiIcon } from '../ui-icon';
+import { UiSpinner } from '../../informative/ui-spinner';
+import type { UiThemeMode } from '../../core/theming';
+import { cx } from '../../core/utils';
+
+import { inlineSvgToReact } from './ui-image-svg';
+import { UiImagePreview } from './ui-image-preview';
+
+import './ui-image.scss';
+
+interface ModeMap {
+  base?: string;
+  light?: string;
+  dark?: string;
+}
+type ThemeMap = Record<string, ModeMap>;
+/** nom de fichier → { marque ou `common` → { base, light ou dark → extension } }. */
+export type UiImageAssetsMap = Record<string, ThemeMap>;
+
+/** Ce que l'application fournit à `ui-image` : ses images locales, et son fetch. */
+export interface UiImageConfig {
+  /**
+   * Les images locales disponibles, celles que la prop `name` résout.
+   *
+   * Le kit ne peut pas connaître les images d'un projet : la table est donc
+   * fournie, pas embarquée. Sans elle, `name` ne résout rien et le composant
+   * retombe sur sa vignette ; `src` continue de marcher.
+   */
+  assets?: UiImageAssetsMap;
+  /**
+   * Comment aller chercher une image `secured`.
+   *
+   * Là où le kit Angular s'appuie sur `HttpClient`, donc sur les intercepteurs
+   * de l'application, React n'a pas de client HTTP injecté : c'est l'application
+   * qui passe sa fonction, celle qui sait poser son jeton. Par défaut, un
+   * `fetch` nu.
+   */
+  fetchSecured?: (url: string, init: RequestInit) => Promise<Blob>;
+}
+
+const UiImageContext = createContext<UiImageConfig>({});
+
+export interface UiImageProviderProps extends UiImageConfig {
+  children?: ReactNode;
+}
+
+/**
+ * Fournit à `ui-image` la table des images locales du projet, et au besoin le
+ * fetch de ses images protégées.
+ *
+ * @example
+ * ```tsx
+ * import assets from './assets/assets-map.json';
+ *
+ * <UiImageProvider assets={assets} fetchSecured={monFetchAuthentifie}>
+ *   <App />
+ * </UiImageProvider>;
+ * ```
+ */
+export function UiImageProvider({ assets, fetchSecured, children }: UiImageProviderProps) {
+  const value = useMemo(() => ({ assets, fetchSecured }), [assets, fetchSecured]);
+  return <UiImageContext.Provider value={value}>{children}</UiImageContext.Provider>;
+}
+
+/**
+ * Le mode et la marque, lus sur `<html>` plutôt que par le fournisseur de thème.
+ *
+ * C'est là que `UiThemeProvider` les pose, et c'est aussi ce que lisent les
+ * jetons : lire l'attribut marche donc partout, y compris quand un script
+ * d'amorçage ou la barre d'outils de Storybook l'a posé sans passer par le
+ * fournisseur. Une image ne doit pas exiger un fournisseur pour afficher une URL
+ * distante.
+ */
+function subscribeToRoot(onChange: () => void): () => void {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme', 'data-brand'],
+  });
+  return () => observer.disconnect();
+}
+
+const DEFAULT_APPEARANCE = 'light|brand1';
+
+function rootSnapshot(): string {
+  const root = document.documentElement;
+  return `${root.getAttribute('data-theme') ?? 'light'}|${root.getAttribute('data-brand') ?? 'brand1'}`;
+}
+
+const serverSnapshot = () => DEFAULT_APPEARANCE;
+
+function useAppearance(): { mode: UiThemeMode; brand: string } {
+  const snapshot = useSyncExternalStore(subscribeToRoot, rootSnapshot, serverSnapshot);
+  const [mode, brand] = snapshot.split('|');
+  return { mode: mode === 'dark' ? 'dark' : 'light', brand: brand || 'brand1' };
+}
+
+/** Charge déjà faite : la même URL n'est cherchée qu'une fois, logos compris. */
+const SVG_CACHE = new Map<string, string>();
+
+/** Avertissements déjà émis, pour rester idempotent sous `<StrictMode>`. */
+const warned = new Set<string>();
+
+/** Le chemin d'une image locale, pour une marque et un mode donnés. */
+function buildPath(
+  folder: string,
+  variants: ModeMap,
+  mode: UiThemeMode,
+  filename: string,
+): string | null {
+  if (variants[mode]) return `assets/img/${folder}/${variants[mode]}/${mode}/${filename}`;
+  if (variants.base) return `assets/img/${folder}/${variants.base}/${filename}`;
+  return null;
+}
+
+function resolveLocal(
+  assets: UiImageAssetsMap,
+  filename: string | undefined,
+  mode: UiThemeMode,
+  brand: string,
+): string {
+  if (!filename) return '';
+  const entry = assets[filename];
+  if (!entry) return '';
+  if (entry[brand]) {
+    const path = buildPath(brand, entry[brand], mode, filename);
+    if (path) return path;
+  }
+  if (entry['common']) return buildPath('common', entry['common'], mode, filename) ?? '';
+  return '';
+}
+
+type NativeProps = Omit<ComponentPropsWithRef<'div'>, 'children'>;
+
+export interface UiImageProps extends NativeProps {
+  /** Clé d'une image locale, résolue selon le mode et la marque. */
+  name?: string;
+  /** URL distante ou absolue. Elle gagne sur `name`. */
+  src?: string;
+  /** Image locale affichée quand la principale échoue. */
+  fallback?: string;
+  alt?: string;
+  /** Charger l'image sans attendre, pour ce qui est visible d'emblée. */
+  priority?: boolean;
+  /** L'image remplit son conteneur au lieu de porter ses propres dimensions. */
+  fill?: boolean;
+  width?: string | number;
+  widthUnit?: string;
+  height?: string | number;
+  heightUnit?: string;
+
+  /**
+   * Aller chercher `src` par la fonction de l'application plutôt que de laisser
+   * le navigateur le charger.
+   *
+   * C'est ce dont a besoin un point d'accès derrière un en-tête
+   * d'autorisation : un `<img src>` est une requête ordinaire du navigateur,
+   * qui ne porte ni intercepteur ni jeton. Le `Blob` reçu est affiché par une
+   * URL d'objet, révoquée dès que la source change ou que le composant part.
+   */
+  secured?: boolean;
+  /** Envoyer les cookies avec la requête `secured`. */
+  withCredentials?: boolean;
+  /** Texte visible de l'indicateur de chargement d'une image protégée. */
+  loadingLabel?: string;
+  /** Nom accessible de cet indicateur. */
+  loadingAriaLabel?: string;
+
+  /** Cliquer l'image ouvre la vue agrandie. */
+  preview?: boolean;
+  /** Ouverture imposée de cette vue. */
+  previewVisible?: boolean;
+  onPreviewVisibleChange?: (visible: boolean) => void;
+  /** Nom accessible du déclencheur. À défaut, l'`alt` de l'image. */
+  previewAriaLabel?: string;
+  /** Nom accessible du dialogue d'aperçu. */
+  previewDialogAriaLabel?: string;
+  zoomStep?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  /** Proposer un téléchargement dans la barre de l'aperçu. */
+  downloadable?: boolean;
+  downloadName?: string;
+
+  /** Remplace l'indicateur de survol du mode `preview`, la loupe. Décoratif. */
+  previewIndicator?: ReactNode;
+
+  /** Notifié avec l'URL fautive quand une image n'a pas pu être chargée. */
+  onLoadFailed?: (url: string) => void;
+}
+
+/**
+ * ui-image : image consciente du thème et de la marque.
+ *
+ * Trois sources : `name`, une image locale résolue par la table du projet avec
+ * ses variantes de mode et de marque ; `src`, une URL distante, qui gagne ; et
+ * `src` plus `secured`, qui passe par la fonction de l'application pour porter
+ * son autorisation.
+ *
+ * Un SVG **local** est inliné, ce qui lui fait hériter du CSS et de
+ * `currentColor` ; un SVG distant passe toujours par un `<img>`. En cas
+ * d'échec, l'image `fallback` prend le relais, puis une vignette.
+ */
+export function UiImage({
+  name,
+  src,
+  fallback,
+  alt,
+  priority = false,
+  fill = false,
+  width,
+  widthUnit,
+  height,
+  heightUnit,
+  secured = false,
+  withCredentials = false,
+  loadingLabel,
+  loadingAriaLabel = "Chargement de l'image",
+  preview = false,
+  previewVisible,
+  onPreviewVisibleChange,
+  previewAriaLabel,
+  previewDialogAriaLabel = "Aperçu de l'image",
+  zoomStep = 0.25,
+  minZoom = 0.5,
+  maxZoom = 4,
+  downloadable = false,
+  downloadName,
+  previewIndicator,
+  onLoadFailed,
+  className,
+  style,
+  ...rest
+}: UiImageProps) {
+  const { assets = {}, fetchSecured } = useContext(UiImageContext);
+  const { mode, brand } = useAppearance();
+
+  const isRemote = Boolean(src);
+  /** L'inlining est réservé au LOCAL : un SVG distant n'ouvre aucune surface. */
+  const isInlineSvg = !isRemote && Boolean(name?.toLowerCase().endsWith('.svg'));
+  const isSecured = secured && Boolean(src);
+
+  const localSrc = resolveLocal(assets, name, mode, brand);
+  const fallbackSrc = resolveLocal(assets, fallback, mode, brand);
+
+  // --- Source protégée : fetch, puis Blob, puis URL d'objet ------------------
+  // Le résultat porte la CLÉ dont il vient, ce qui évite de le remettre à zéro
+  // dans un effet : un résultat d'une autre source est simplement ignoré, et
+  // « en cours » se déduit de son absence.
+  const securedKey = isSecured && src ? src : '';
+  const [securedResult, setSecuredResult] = useState<{
+    key: string;
+    url: string | null;
+    failed: boolean;
+  }>({ key: '', url: null, failed: false });
+
+  useEffect(() => {
+    if (!securedKey) return;
+
+    let url: string | null = null;
+    let cancelled = false;
+    const init: RequestInit = withCredentials ? { credentials: 'include' } : {};
+    const load = fetchSecured
+      ? fetchSecured(securedKey, init)
+      : fetch(securedKey, init).then((response) => {
+          if (!response.ok) throw new Error(String(response.status));
+          return response.blob();
+        });
+
+    void load
+      .then((blob) => {
+        if (cancelled) return;
+        url = URL.createObjectURL(blob);
+        setSecuredResult({ key: securedKey, url, failed: false });
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setSecuredResult({ key: securedKey, url: null, failed: true });
+      });
+
+    // Toute la vie de l'URL d'objet tient ici : créée à l'arrivée du Blob,
+    // révoquée avant la source suivante ET au démontage. C'est ce qui empêche
+    // une liste d'images protégées de fuir une URL par rendu.
+    return () => {
+      cancelled = true;
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [securedKey, withCredentials, fetchSecured]);
+
+  const securedSettled = securedKey !== '' && securedResult.key === securedKey;
+  const blobUrl = securedSettled ? securedResult.url : null;
+  const securedFailed = securedSettled && securedResult.failed;
+  const securedLoading = securedKey !== '' && !securedSettled;
+
+  // --- SVG inliné -----------------------------------------------------------
+  // Même forme que ci-dessus : le résultat porte son URL, et la charge déjà
+  // faite se lit au RENDU plutôt que d'être recopiée dans un état.
+  const svgKey = isInlineSvg ? localSrc : '';
+  const [svgResult, setSvgResult] = useState<{ key: string; text: string | null }>({
+    key: '',
+    text: null,
+  });
+
+  useEffect(() => {
+    if (!svgKey || SVG_CACHE.has(svgKey)) return;
+
+    let cancelled = false;
+    void fetch(svgKey)
+      .then((response) => {
+        if (!response.ok) throw new Error(String(response.status));
+        return response.text();
+      })
+      .then((text) => {
+        SVG_CACHE.set(svgKey, text);
+        if (!cancelled) setSvgResult({ key: svgKey, text });
+      })
+      .catch(() => {
+        if (!cancelled) setSvgResult({ key: svgKey, text: null });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [svgKey]);
+
+  const svgRaw =
+    svgKey === ''
+      ? null
+      : (SVG_CACHE.get(svgKey) ?? (svgResult.key === svgKey ? svgResult.text : null));
+  const svgFailed = svgKey !== '' && svgResult.key === svgKey && svgResult.text === null;
+
+  const svgContent = useMemo(() => (svgRaw !== null ? inlineSvgToReact(svgRaw) : null), [svgRaw]);
+
+  // --- Échecs ---------------------------------------------------------------
+  const primarySrc = isSecured ? (blobUrl ?? '') : src || localSrc;
+
+  // Les drapeaux d'échec se remettent à zéro quand leur URL change : un
+  // changement de thème, de marque ou de `src` rejoue donc le chargement.
+  const [failedPrimary, setFailedPrimary] = useState('');
+  const [failedFallback, setFailedFallback] = useState('');
+  const primaryImgFailed = failedPrimary !== '' && failedPrimary === primarySrc;
+  const fallbackImgFailed = failedFallback !== '' && failedFallback === fallbackSrc;
+
+  const primaryFailed = isInlineSvg ? svgFailed : securedFailed || primaryImgFailed;
+  const showFallback = primaryFailed && Boolean(fallbackSrc) && !fallbackImgFailed;
+  const showPlaceholder =
+    !securedLoading && (!primarySrc || (primaryFailed && (!fallbackSrc || fallbackImgFailed)));
+  const displayedSrc = showFallback ? fallbackSrc : primarySrc;
+  /** L'image n'est un déclencheur d'aperçu qu'une fois qu'il y a quoi agrandir. */
+  const canPreviewNow = preview && !showPlaceholder && !securedLoading;
+
+  // --- Aperçu ---------------------------------------------------------------
+  const [openState, setOpenState] = useState(false);
+  const previewControlled = previewVisible !== undefined;
+  const previewOpen = (previewControlled ? previewVisible : openState) && canPreviewNow;
+  const setPreviewOpen = (next: boolean) => {
+    if (!previewControlled) setOpenState(next);
+    onPreviewVisibleChange?.(next);
+  };
+
+  // Une image protégée qui échoue n'atteint aucun `<img>` : son `onError` ne
+  // peut donc pas la signaler.
+  useEffect(() => {
+    if (securedFailed && src) onLoadFailed?.(src);
+    // `onLoadFailed` hors dépendances : recréé à chaque rendu du parent.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [securedFailed, src]);
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    const say = (key: string, message: string) => {
+      if (warned.has(key)) return;
+      warned.add(key);
+      console.warn(message);
+    };
+    if (src && name) say(`both:${src}`, '[ui-image] `src` et `name` sont posés : `src` gagne.');
+    if (!src && !name) say('none', '[ui-image] Ni `src` ni `name` : la vignette est affichée.');
+    if (secured && !src) say('secured', '[ui-image] `secured` sans `src` : rien à aller chercher.');
+    if (preview && !alt && !previewAriaLabel) {
+      say(
+        'preview',
+        '[ui-image] `preview` rend un bouton sans nom accessible : renseignez `alt` ou `previewAriaLabel`.',
+      );
+    }
+  }, [src, name, secured, preview, alt, previewAriaLabel]);
+
+  const cssWidth = width != null ? `${width}${widthUnit || 'px'}` : undefined;
+  const cssHeight = height != null ? `${height}${heightUnit || 'px'}` : undefined;
+  const boxStyle: CSSProperties = { width: cssWidth, height: cssHeight };
+
+  const onImgError = () => {
+    if (showFallback) setFailedFallback(fallbackSrc);
+    else setFailedPrimary(primarySrc);
+    if (displayedSrc) onLoadFailed?.(displayedSrc);
+  };
+
+  const media = securedLoading ? (
+    <div className="ui-image-placeholder _loading" style={boxStyle}>
+      <UiSpinner size="small" label={loadingLabel} aria-label={loadingAriaLabel} />
+    </div>
+  ) : showPlaceholder ? (
+    <div
+      className="ui-image-placeholder"
+      style={boxStyle}
+      role={alt ? 'img' : undefined}
+      aria-label={alt || undefined}
+      aria-hidden={alt ? undefined : true}
+    >
+      <UiIcon name="image" />
+    </div>
+  ) : isInlineSvg && !primaryFailed ? (
+    // Le SVG local est converti en éléments React, jamais collé en HTML : c'est
+    // ce qui lui fait hériter du CSS sans ouvrir la porte à une injection.
+    <div className="ui-image-svg" style={boxStyle}>
+      {svgContent}
+    </div>
+  ) : (
+    <img
+      className="ui-image"
+      src={displayedSrc}
+      alt={alt || ''}
+      style={fill ? undefined : boxStyle}
+      loading={priority ? undefined : 'lazy'}
+      fetchPriority={priority ? 'high' : undefined}
+      onError={onImgError}
+    />
+  );
+
+  return (
+    <div {...rest} className={cx('ui-image-root', fill && '_fill', className)} style={style}>
+      {canPreviewNow ? (
+        <button
+          type="button"
+          className="ui-image-trigger"
+          aria-haspopup="dialog"
+          aria-label={previewAriaLabel || alt || undefined}
+          onClick={() => setPreviewOpen(true)}
+        >
+          {media}
+
+          {/* Décoratif : l'affordance est déjà portée par le rôle du bouton et
+              par son nom accessible. */}
+          <span className="ui-image-indicator" aria-hidden="true">
+            {previewIndicator ?? <UiIcon name="magnifying-glass-plus" />}
+          </span>
+        </button>
+      ) : (
+        media
+      )}
+
+      {canPreviewNow && (
+        <UiImagePreview
+          visible={previewOpen}
+          onVisibleChange={setPreviewOpen}
+          src={displayedSrc}
+          alt={alt || ''}
+          aria-label={previewDialogAriaLabel}
+          zoomStep={zoomStep}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          downloadable={downloadable}
+          downloadName={downloadName}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui-kit-react/src/core/ripple/index.ts b/packages/ui-kit-react/src/core/ripple/index.ts
new file mode 100644
index 0000000..fdd6b36
--- /dev/null
+++ b/packages/ui-kit-react/src/core/ripple/index.ts
@@ -0,0 +1,23 @@
+/*
+ * L'onde de pression : le moteur, sans React, et ses liaisons. Les styles de
+ * l'onde vivent dans la feuille globale du kit (`styles/base/_ripple.scss`,
+ * livrée dans `styles.css`).
+ */
+
+export {
+  UI_RIPPLE_DEFAULT_SELECTOR,
+  UI_RIPPLE_INTERACTIVE_SELECTOR,
+  launchRipple,
+  bindRipple,
+  delegateRipple,
+  type UiRippleSettings,
+} from './ripple-engine';
+export {
+  UiRippleProvider,
+  useUiRipple,
+  useUiRippleScope,
+  type UiRippleProviderProps,
+  type UiRippleOptions,
+  type UiRippleScopeOptions,
+  type UiRippleBinding,
+} from './ripple';
diff --git a/packages/ui-kit-react/src/core/ripple/ripple-components.test.tsx b/packages/ui-kit-react/src/core/ripple/ripple-components.test.tsx
new file mode 100644
index 0000000..dd158e6
--- /dev/null
+++ b/packages/ui-kit-react/src/core/ripple/ripple-components.test.tsx
@@ -0,0 +1,238 @@
+import type { ReactElement } from 'react';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { UiButton } from '../../actions/ui-button';
+import { UiAutocomplete } from '../../forms/ui-autocomplete';
+import { UiDatepicker } from '../../forms/ui-datepicker';
+import { UiFileUpload } from '../../forms/ui-file-upload';
+import { UiSegmentControl } from '../../forms/ui-segment-control';
+import { UiSelect } from '../../forms/ui-select';
+import { UiToggleBlock } from '../../forms/ui-toggle-block';
+import { UiToggleButton } from '../../forms/ui-toggle-button';
+import { UiBottomTab, UiBottomTabAction, UiBottomTabBar } from '../../navigation/ui-bottom-tab-bar';
+import { UiContextMenu } from '../../navigation/ui-context-menu';
+import { UiMenu } from '../../navigation/ui-menu';
+import { UiSidebarMenu } from '../../navigation/ui-sidebar';
+import { UiTab, UiTabList, UiTabs } from '../../navigation/ui-tabs';
+import { UiPaginator } from '../../table/ui-paginator';
+
+import { UiRippleProvider } from './ripple';
+
+// Le contrat de l'onde à travers le kit : les quatorze composants équipés
+// posent `data-ripple="on"` sur leurs cibles par défaut, et `"off"` avec
+// `ripple={false}`. Même tableau que la documentation Angular, pour la parité.
+
+type Case = {
+  name: string;
+  /** Le composant, avec ou sans onde. */
+  el: (ripple: boolean) => ReactElement;
+  /** Les cibles à vérifier, dans le document (certaines vivent dans le calque supérieur). */
+  targets: string;
+  /** Ce qu'il faut faire pour que les cibles existent. */
+  reveal?: (root: HTMLElement) => Promise<void> | void;
+};
+
+const pick = (root: HTMLElement) => {
+  const input = root.querySelector<HTMLInputElement>('.ui-file-upload-input')!;
+  const data = new DataTransfer();
+  data.items.add(new File(['x'], 'a.pdf', { type: 'application/pdf' }));
+  input.files = data.files;
+  input.dispatchEvent(new Event('change', { bubbles: true }));
+};
+
+const CASES: Case[] = [
+  { name: 'ui-button', el: (r) => <UiButton label="Valider" ripple={r} />, targets: '.ui-button' },
+  {
+    name: 'ui-menu',
+    el: (r) => (
+      <UiMenu
+        aria-label="Menu"
+        items={[{ label: 'A' }, { label: 'B', items: [{ label: 'C' }] }]}
+        ripple={r}
+      />
+    ),
+    targets: '.ui-menu-action',
+  },
+  {
+    name: 'ui-context-menu',
+    el: (r) => (
+      <UiContextMenu
+        aria-label="Actions"
+        items={[{ label: 'Ouvrir' }]}
+        ripple={r}
+        trigger={(zone) => (
+          <button type="button" className="zone" {...zone} style={{ width: 200, height: 80 }}>
+            Zone
+          </button>
+        )}
+      />
+    ),
+    targets: '.ui-context-menu .ui-menu-action',
+    reveal: (root) => {
+      const zone = root.querySelector('.zone')!;
+      const box = zone.getBoundingClientRect();
+      zone.dispatchEvent(
+        new MouseEvent('contextmenu', {
+          bubbles: true,
+          cancelable: true,
+          clientX: box.left + 10,
+          clientY: box.top + 10,
+        }),
+      );
+    },
+  },
+  {
+    name: 'ui-sidebar-menu',
+    el: (r) => (
+      <UiSidebarMenu
+        aria-label="Sections"
+        ripple={r}
+        items={[
+          { label: 'Accueil', url: '/' },
+          { label: 'Projets' },
+          { label: 'Groupe', toggleable: true, items: [{ label: 'X' }] },
+        ]}
+      />
+    ),
+    targets: '.ui-sidebar-menu-action',
+  },
+  {
+    name: 'ui-tabs',
+    el: (r) => (
+      <UiTabs defaultValue="un" ripple={r}>
+        <UiTabList aria-label="Sections">
+          <UiTab value="un">Un</UiTab>
+          <UiTab value="deux">Deux</UiTab>
+        </UiTabList>
+      </UiTabs>
+    ),
+    targets: '[role="tab"]',
+  },
+  {
+    name: 'ui-bottom-tab-bar',
+    el: (r) => (
+      <UiBottomTabBar defaultValue="a" ripple={r} contained>
+        <UiBottomTab value="a" label="Accueil" icon="house" />
+        <UiBottomTab value="b" label="Profil" icon="user" />
+      </UiBottomTabBar>
+    ),
+    targets: '.ui-bottom-tab',
+  },
+  {
+    name: 'ui-paginator',
+    el: (r) => <UiPaginator totalRecords={120} ripple={r} />,
+    targets: '.ui-paginator-page, .ui-paginator-control',
+  },
+  {
+    name: 'ui-select',
+    el: (r) => <UiSelect aria-label="Ville" options={['Lyon', 'Nantes']} ripple={r} />,
+    targets: '.ui-select-option',
+    reveal: async (root) => root.querySelector<HTMLElement>('[role="combobox"]')!.click(),
+  },
+  {
+    name: 'ui-autocomplete',
+    el: (r) => (
+      <UiAutocomplete label="Villes" multiple defaultValue={['Lyon', 'Nantes']} ripple={r} />
+    ),
+    targets: '.ui-autocomplete-tag',
+  },
+  {
+    name: 'ui-datepicker',
+    el: (r) => <UiDatepicker inline valueType="date" locale="fr-FR" aria-label="Date" ripple={r} />,
+    targets: '.ui-datepicker-nav, .ui-datepicker-day',
+  },
+  {
+    name: 'ui-toggle-button',
+    el: (r) => <UiToggleButton label="Notifications" ripple={r} />,
+    targets: '.ui-toggle-button-item',
+  },
+  {
+    name: 'ui-segment-control',
+    el: (r) => <UiSegmentControl aria-label="Affichage" options={['Liste', 'Grille']} ripple={r} />,
+    targets: '.ui-segment-control-option',
+  },
+  {
+    name: 'ui-toggle-block',
+    el: (r) => <UiToggleBlock label="Option" ripple={r} />,
+    targets: '.ui-toggle-block',
+  },
+  {
+    name: 'ui-file-upload',
+    el: (r) => <UiFileUpload mode="drag" ripple={r} />,
+    targets: '.ui-file-upload-zone, .ui-file-upload-toolbar .ui-button',
+    reveal: pick,
+  },
+];
+
+for (const c of CASES) {
+  test(`${c.name} : ses cibles portent data-ripple="on", et "off" avec ripple={false}`, async () => {
+    for (const ripple of [true, false]) {
+      const screen = await render(c.el(ripple));
+      await c.reveal?.(screen.container);
+
+      const expected = ripple ? 'on' : 'off';
+      await expect.poll(() => document.querySelectorAll(c.targets).length).toBeGreaterThan(0);
+      const markers = [...document.querySelectorAll(c.targets)].map((el) =>
+        el.getAttribute('data-ripple'),
+      );
+      expect(
+        markers.every((m) => m === expected),
+        `${c.name}: ${markers.join(',')}`,
+      ).toBe(true);
+
+      await screen.unmount();
+    }
+  });
+}
+
+test('ui-bottom-tab-bar : la prop de la barre coupe les onglets, pas l’action surélevée', async () => {
+  const screen = await render(
+    <UiBottomTabBar defaultValue="a" ripple={false} contained>
+      <UiBottomTab value="a" label="Accueil" icon="house" />
+      <UiBottomTabAction aria-label="Nouveau" />
+    </UiBottomTabBar>,
+  );
+
+  expect(screen.container.querySelector('.ui-bottom-tab')).toHaveAttribute('data-ripple', 'off');
+  expect(screen.container.querySelector('.ui-bottom-tab-action')).toHaveAttribute(
+    'data-ripple',
+    'on',
+  );
+});
+
+test('ui-toggle-block : désactivé ou en lecture seule, le bloc ne réclame plus d’onde', async () => {
+  const screen = await render(<UiToggleBlock label="Option" disabled />);
+  expect(screen.container.querySelector('.ui-toggle-block')).toHaveAttribute('data-ripple', 'off');
+
+  await screen.rerender(<UiToggleBlock label="Option" readOnly />);
+  expect(screen.container.querySelector('.ui-toggle-block')).toHaveAttribute('data-ripple', 'off');
+});
+
+test('de bout en bout : sous UiRippleProvider, une pression sur un UiButton fait une onde sur son <button>', async () => {
+  const screen = await render(
+    <UiRippleProvider>
+      <UiButton label="Valider" />
+      <UiButton label="Sans onde" ripple={false} />
+    </UiRippleProvider>,
+  );
+  const [avec, sans] = [
+    ...screen.container.querySelectorAll<HTMLButtonElement>('button.ui-button'),
+  ];
+
+  for (const el of [avec!, sans!]) {
+    const box = el.getBoundingClientRect();
+    el.dispatchEvent(
+      new PointerEvent('pointerdown', {
+        bubbles: true,
+        isPrimary: true,
+        button: 0,
+        clientX: box.left + 5,
+        clientY: box.top + 5,
+      }),
+    );
+  }
+
+  expect(avec!.querySelector(':scope > .ui-ripple-layer > .ui-ripple-ink')).not.toBeNull();
+  expect(sans!.querySelector('.ui-ripple-layer')).toBeNull();
+});
diff --git a/packages/ui-kit-react/src/core/ripple/ripple-engine.ts b/packages/ui-kit-react/src/core/ripple/ripple-engine.ts
new file mode 100644
index 0000000..d4f6c95
--- /dev/null
+++ b/packages/ui-kit-react/src/core/ripple/ripple-engine.ts
@@ -0,0 +1,170 @@
+// =====================================================================
+// Moteur de l'onde de pression, sans React.
+//
+// Un écouteur `pointerdown` passif par liaison, une couche de découpe par
+// hôte créée à la première pression, une `<span>` par onde retirée à
+// `animationend`. Rien n'est mesuré tant qu'aucune pression n'arrive.
+//
+// L'apparence n'est pas son affaire : la couche et l'encre lisent les
+// propriétés `--ui-ripple-*` héritées (`styles/base/_ripple.scss`).
+// =====================================================================
+
+/**
+ * Ce qu'une racine déléguée fait onduler par défaut : ce qui se déclare, soit
+ * les contrôles du kit (qui portent `data-ripple="on"`) et ce que l'application
+ * marque de même. Un Design System ne peint pas d'onde sur un balisage qui
+ * n'est pas le sien.
+ */
+export const UI_RIPPLE_DEFAULT_SELECTOR = '[data-ripple="on"]';
+
+/**
+ * Tout ce qui se clique, jeu du kit compris. À passer à `UiRippleProvider`
+ * pour faire onduler aussi les contrôles de l'application sans les lister.
+ */
+export const UI_RIPPLE_INTERACTIVE_SELECTOR =
+  'button, [role="button"], a[href], [data-ripple="on"]';
+
+/** Réglages d'une liaison, relus à chaque pression. */
+export interface UiRippleSettings {
+  /** `false` met la liaison en sommeil sans la défaire. */
+  enabled: boolean;
+  /** Partir du centre de l'élément plutôt que du point de contact. */
+  centered: boolean;
+  /** Délégation seulement : ce qui ondule dans la racine. */
+  selector: string;
+}
+
+// Un symbole GLOBAL : deux copies du kit dans une page (micro-frontends) se
+// reconnaissent, et une pression ne produit toujours qu'une onde.
+const CLAIMED = Symbol.for('@4sh/ui-kit/ripple:claimed');
+type Claimable = Record<symbol, true | undefined>;
+const LAYER_CLASS = 'ui-ripple-layer';
+const INK_CLASS = 'ui-ripple-ink';
+/** Ondes vivantes à la fois sur un hôte : un clic frénétique n'empile pas de nœuds. */
+const MAX_INK = 4;
+
+const layers = new WeakMap<Element, HTMLElement>();
+let reducedMotion: MediaQueryList | undefined;
+
+/** Une pression, une onde : la liaison la plus intérieure la réclame, les autres s'effacent. */
+function isClaimed(event: Event): boolean {
+  return (event as unknown as Claimable)[CLAIMED] === true;
+}
+
+function claim(event: Event): void {
+  (event as unknown as Claimable)[CLAIMED] = true;
+}
+
+function listen(node: HTMLElement, handle: (event: PointerEvent) => void): () => void {
+  const onPointerDown = (event: PointerEvent) => {
+    if (event.button > 0 || !event.isPrimary || isClaimed(event)) return;
+    handle(event);
+  };
+  node.addEventListener('pointerdown', onPointerDown, { passive: true });
+  return () => node.removeEventListener('pointerdown', onPointerDown);
+}
+
+/** Couche de découpe d'un hôte, créée à la première pression. */
+function layerFor(host: HTMLElement): HTMLElement {
+  const cached = layers.get(host);
+  if (cached?.parentElement === host) return cached;
+
+  // Une autre copie du moteur a pu équiper cet hôte avant nous : sa couche vaut
+  // la nôtre, et en créer une seconde les empilerait sur l'élément.
+  const existing = host.querySelector<HTMLElement>(`:scope > .${LAYER_CLASS}`);
+  if (existing) {
+    layers.set(host, existing);
+    return existing;
+  }
+
+  // La couche s'ancre sur l'hôte, qui doit donc établir le bloc conteneur. Un
+  // hôte déjà positionné n'est pas touché.
+  if (host.ownerDocument.defaultView?.getComputedStyle(host).position === 'static') {
+    host.style.position = 'relative';
+  }
+
+  const layer = host.ownerDocument.createElement('span');
+  layer.className = LAYER_CLASS;
+  layer.setAttribute('aria-hidden', 'true');
+  host.appendChild(layer);
+  layers.set(host, layer);
+  return layer;
+}
+
+/** Hôte désactivé, ou sous-arbre qui se retire par `data-ripple="off"`. */
+function inert(host: HTMLElement): boolean {
+  return (
+    (host as HTMLButtonElement).disabled === true ||
+    host.getAttribute('aria-disabled') === 'true' ||
+    host.closest('[data-ripple="off"]') !== null
+  );
+}
+
+/** Préférence de mouvement réduit, ou interrupteur `data-motion="off"` du kit. */
+function stilled(doc: Document): boolean {
+  reducedMotion ??= doc.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)');
+  return reducedMotion?.matches === true || doc.documentElement.dataset['motion'] === 'off';
+}
+
+/**
+ * Lance une onde sur `host`, depuis le point de contact ou depuis son centre.
+ * Publique pour qu'une application fasse onduler depuis son propre déclencheur
+ * (un raccourci clavier, un événement distant) sans pression.
+ */
+export function launchRipple(host: HTMLElement, event?: PointerEvent, centered = false): void {
+  if (typeof window === 'undefined') return;
+  if (stilled(host.ownerDocument) || inert(host)) return;
+
+  const rect = host.getBoundingClientRect();
+  if (!rect.width || !rect.height) return;
+
+  const x = event && !centered ? event.clientX - rect.left : rect.width / 2;
+  const y = event && !centered ? event.clientY - rect.top : rect.height / 2;
+  // Le coin le plus lointain : l'onde couvre toujours tout l'élément.
+  const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
+
+  const layer = layerFor(host);
+  while (layer.childElementCount >= MAX_INK && layer.firstElementChild) {
+    layer.firstElementChild.remove();
+  }
+
+  const ink = host.ownerDocument.createElement('span');
+  ink.className = INK_CLASS;
+  ink.style.cssText = `left:${x - radius}px;top:${y - radius}px;width:${radius * 2}px;height:${radius * 2}px`;
+  ink.addEventListener('animationend', () => ink.remove(), { once: true });
+  layer.appendChild(ink);
+}
+
+/** L'hôte lui-même ondule. Rend la fonction qui défait la liaison. */
+export function bindRipple(
+  host: HTMLElement,
+  settings: () => Pick<UiRippleSettings, 'enabled' | 'centered'>,
+): () => void {
+  const stop = listen(host, (event) => {
+    // Réclamée même éteinte : une liaison explicite l'emporte toujours sur une racine englobante.
+    claim(event);
+    const { enabled, centered } = settings();
+    if (enabled) launchRipple(host, event, centered);
+  });
+
+  return () => {
+    stop();
+    layers.get(host)?.remove();
+    layers.delete(host);
+  };
+}
+
+/** Les descendants qui répondent au sélecteur ondulent. Rend la fonction qui défait la liaison. */
+export function delegateRipple(root: HTMLElement, settings: () => UiRippleSettings): () => void {
+  return listen(root, (event) => {
+    const { enabled, centered, selector } = settings();
+    if (!enabled) return;
+
+    const target = (event.target as Element | null)?.closest(selector);
+    // `closest` peut remonter au-delà de la racine : ce résultat-là appartient à une liaison englobante.
+    if (!(target instanceof HTMLElement) || !root.contains(target)) return;
+
+    claim(event);
+    launchRipple(target, event, centered);
+  });
+}
diff --git a/packages/ui-kit-react/src/core/ripple/ripple.mdx b/packages/ui-kit-react/src/core/ripple/ripple.mdx
new file mode 100644
index 0000000..e06c876
--- /dev/null
+++ b/packages/ui-kit-react/src/core/ripple/ripple.mdx
@@ -0,0 +1,377 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as RippleStories from './ripple.stories';
+
+<Meta of={RippleStories} />
+
+# Ripple
+
+Onde de pression sur les éléments interactifs : au `pointerdown`, une vague part du point de
+contact et couvre l'élément. Purement décorative, elle confirme que le clic a été reçu, y
+compris avant que l'action n'aboutisse.
+
+L'effet s'active **à trois portées** (application, sous-arbre, élément) et se règle
+**uniquement par des propriétés CSS**, héritées comme les autres jetons. Quatorze composants
+du kit sont **équipés d'office** : les activer ne demande aucune retouche, et chacun se coupe
+par `ripple={false}`.
+
+## Activation
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Portée</th>
+      <th>Écriture</th>
+      <th>Ce qui reçoit l'onde</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Globale</td>
+      <td>
+        <code>&lt;UiRippleProvider&gt;</code>
+      </td>
+      <td>
+        Toute l'application, par délégation sur <code>body</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>Locale</td>
+      <td>
+        <code>useUiRippleScope()</code>
+      </td>
+      <td>Les descendants interactifs du conteneur.</td>
+    </tr>
+    <tr>
+      <td>Ciblée</td>
+      <td>
+        <code>useUiRipple()</code>
+      </td>
+      <td>L'élément qui la porte, et lui seul.</td>
+    </tr>
+  </tbody>
+</table>
+
+### 1. Globale
+
+```tsx
+import { UiRippleProvider } from '@4sh/ui-kit-react/ripple';
+
+<UiRippleProvider>
+  <App />
+</UiRippleProvider>;
+```
+
+Un seul écouteur `pointerdown` sur `body`. Ondulent alors les **contrôles du kit**, qui se
+déclarent eux-mêmes par `data-ripple="on"` sur le contrôle natif qu'ils rendent, et tout
+élément marqué de la même façon. Les boutons de l'application ne sont **pas** concernés par
+défaut : un Design System ne peint pas d'onde sur un balisage qui n'est pas le sien. Pour les
+inclure :
+
+```tsx
+import { UiRippleProvider, UI_RIPPLE_INTERACTIVE_SELECTOR } from '@4sh/ui-kit-react/ripple';
+
+// button, [role="button"], a[href], [data-ripple="on"]
+<UiRippleProvider selector={UI_RIPPLE_INTERACTIVE_SELECTOR}>…</UiRippleProvider>;
+```
+
+`global={false}` ne fait que poser ce sélecteur pour les portées locales qu'il contient.
+
+### 2. Locale
+
+```tsx
+function Toolbar() {
+  const scope = useUiRippleScope();
+  return (
+    <div className="toolbar" {...scope}>
+      <UiButton label="Enregistrer" />
+      <button type="button">Annuler</button>
+    </div>
+  );
+}
+```
+
+Même mécanique, bornée à un sous-arbre : un écouteur sur le conteneur. `selector` restreint
+ou élargit ce qui y ondule.
+
+### 3. Ciblée
+
+```tsx
+const ripple = useUiRipple({ centered: true });
+<button type="button" aria-label="Fermer" {...ripple}>
+  …
+</button>;
+```
+
+Les crochets rendent `ref` et `data-ripple`, à reverser sur l'élément. Sur un composant du
+kit, préférer sa prop `ripple` ou une portée : c'est son contrôle natif qu'il faut atteindre.
+
+<Canvas of={RippleStories.Default} />
+
+## API
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Surface</th>
+      <th>Option</th>
+      <th>Défaut</th>
+      <th>Rôle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td rowSpan="2">
+        <code>UiRippleProvider</code>
+      </td>
+      <td>
+        <code>global</code>
+      </td>
+      <td>
+        <code>true</code>
+      </td>
+      <td>Fait onduler tout le document.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>selector</code>
+      </td>
+      <td>
+        <code>[data-ripple="on"]</code>
+      </td>
+      <td>Ce que les racines déléguées font onduler.</td>
+    </tr>
+    <tr>
+      <td rowSpan="2">
+        <code>useUiRipple()</code>
+      </td>
+      <td>
+        <code>enabled</code>
+      </td>
+      <td>
+        <code>true</code>
+      </td>
+      <td>
+        Onde sur l'élément. <code>false</code> l'exclut, lui et son sous-arbre.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>centered</code>
+      </td>
+      <td>
+        <code>false</code>
+      </td>
+      <td>Départ au centre plutôt qu'au point de contact.</td>
+    </tr>
+    <tr>
+      <td rowSpan="2">
+        <code>useUiRippleScope()</code>
+      </td>
+      <td>
+        <code>enabled</code>, <code>centered</code>
+      </td>
+      <td>
+        <code>true</code>, <code>false</code>
+      </td>
+      <td>Comme ci-dessus, pour tout le sous-arbre.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>selector</code>
+      </td>
+      <td>celui du fournisseur</td>
+      <td>Ce qui ondule dans ce sous-arbre.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>launchRipple()</code>
+      </td>
+      <td>
+        <code>(host, event?, centered?)</code>
+      </td>
+      <td>
+        <code>&nbsp;</code>
+      </td>
+      <td>Fait onduler depuis un déclencheur de l'application, sans pression.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Composants équipés
+
+Ces quatorze composants portent `data-ripple="on"` sur leur cible interactive. Sans
+activation, l'attribut ne produit rien et ne coûte rien.
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Composant</th>
+      <th>Cible marquée</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>ui-button</code>
+      </td>
+      <td>
+        Le <code>&lt;button&gt;</code> ou le <code>&lt;a&gt;</code> rendu, et la racine
+        confiée à <code>render</code>. Par composition, <code>ui-button-split</code> et{' '}
+        <code>ui-speed-dial</code> aussi.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-menu</code>, <code>ui-context-menu</code>
+      </td>
+      <td>Les entrées, sous-menus et bascules compris.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-sidebar-menu</code>
+      </td>
+      <td>Les entrées de navigation : lien, bouton, bascule de groupe.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-tabs</code>
+      </td>
+      <td>Les en-têtes d'onglet, pas les navigateurs de défilement.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-bottom-tab-bar</code>
+      </td>
+      <td>
+        Les onglets, selon la prop de la barre ET celle de l'onglet ; l'action surélevée, selon
+        la sienne.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-paginator</code>
+      </td>
+      <td>Les numéros de page et les boutons de navigation.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-select</code>, <code>ui-autocomplete</code>
+      </td>
+      <td>Les options de la liste ; les étiquettes de l'autocomplétion multiple.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-datepicker</code>
+      </td>
+      <td>Les jours, mois, années et boutons de navigation. Pas les incréments d'heure.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-toggle-button</code>, <code>ui-segment-control</code>
+      </td>
+      <td>La bascule, chaque bouton du groupe, chaque segment.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-toggle-block</code>
+      </td>
+      <td>
+        Le bloc entier ; désactivé ou en lecture seule, aucune onde.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-file-upload</code>
+      </td>
+      <td>La zone de déclenchement et les actions de la barre.</td>
+    </tr>
+  </tbody>
+</table>
+
+En sont absents les contrôles dont le changement d'état **est** le retour visuel, sur une
+cible trop petite (case à cocher, radio, interrupteur, curseur, note), les surfaces de
+révélation (accordéon, étapes), les ✕ de fermeture et de suppression, les liens en ligne,
+et les lignes de tableau, où une onde pleine largeur est envahissante.
+
+## Personnalisation
+
+Aucune option d'apparence côté TypeScript : tout passe par les propriétés CSS, posées sur
+`:root`, sur un conteneur ou sur l'élément lui-même.
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Propriété</th>
+      <th>Défaut</th>
+      <th>Rôle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>--ui-ripple-color</code>
+      </td>
+      <td>
+        <code>currentColor</code>
+      </td>
+      <td>Couleur de l'onde. Suit la couleur du texte, donc reste lisible sur tout fond.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-ripple-opacity</code>
+      </td>
+      <td>
+        <code>0.34</code>
+      </td>
+      <td>Opacité au départ, qui décroît jusqu'à 0.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-ripple-duration</code>
+      </td>
+      <td>
+        <code>--transition-slow</code>
+      </td>
+      <td>Durée d'expansion.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-ripple-easing</code>
+      </td>
+      <td>
+        <code>--transition-easeout</code>
+      </td>
+      <td>Courbe, décélérée.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-ripple-scale</code>
+      </td>
+      <td>
+        <code>1</code>
+      </td>
+      <td>Échelle finale. 1 couvre exactement l'élément.</td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={RippleStories.Custom} />
+
+## Performance
+
+- Un seul écouteur `pointerdown`, **passif**, par activation : une portée ne coûte pas un
+  écouteur par bouton.
+- Rien n'est créé ni mesuré avant la première pression. Chaque vague est une `<span>` retirée
+  à la fin de son animation, et quatre au plus coexistent sur un même élément.
+- L'animation ne porte que sur `transform` et `opacity` : ni mise en page, ni repeinture de
+  l'hôte.
+
+## Désactivation et accessibilité
+
+- **Par élément ou sous-arbre** : `ripple={false}` sur un composant du kit,
+  `data-ripple="off"` sur n'importe quel ancêtre, ou `enabled: false` sur un crochet.
+- **Mouvement réduit** : la préférence système, ou l'interrupteur `data-motion="off"` du kit,
+  coupe toute onde.
+- **Lecteur d'écran** : la couche porte `aria-hidden`, rien n'est annoncé.
+- **Clavier** : l'onde suit le pointeur ; `Entrée` et `Espace` gardent l'état `pressed` du
+  contrôle, qui est leur retour visuel.
diff --git a/packages/ui-kit-react/src/core/ripple/ripple.stories.tsx b/packages/ui-kit-react/src/core/ripple/ripple.stories.tsx
new file mode 100644
index 0000000..2d5f3c3
--- /dev/null
+++ b/packages/ui-kit-react/src/core/ripple/ripple.stories.tsx
@@ -0,0 +1,108 @@
+import type { CSSProperties } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UiButton } from '../../actions/ui-button';
+
+import { useUiRipple, useUiRippleScope } from './ripple';
+
+interface DemoProps {
+  /** Retaille l'onde par les seuls crochets CSS `--ui-ripple-*`. */
+  custom: boolean;
+  /** Démarre l'onde au centre plutôt qu'au point de contact. */
+  centered: boolean;
+  /** Coupe l'effet sur les deux blocs. */
+  disabled: boolean;
+}
+
+const row: CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'stretch',
+  gap: 'var(--units-lg)',
+};
+const retuned = {
+  '--ui-ripple-color': 'var(--actions-warning-surface-default)',
+  '--ui-ripple-opacity': '0.5',
+  '--ui-ripple-duration': '620ms',
+  '--ui-ripple-scale': '1.15',
+} as CSSProperties;
+const tile: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 'var(--units-2xs)',
+  minWidth: 180,
+  padding: 'var(--units-xl)',
+  border: 'var(--stroke-sm) solid var(--global-border-default)',
+  borderRadius: 'var(--radius-md)',
+  backgroundColor: 'var(--global-background-muted)',
+  color: 'var(--global-text-default)',
+  fontFamily: 'var(--fontfamily-base)',
+  fontWeight: 'var(--weight-bold)' as CSSProperties['fontWeight'],
+  cursor: 'pointer',
+};
+const hint: CSSProperties = {
+  color: 'var(--global-text-muted)',
+  fontWeight: 'var(--weight-regular)' as CSSProperties['fontWeight'],
+  fontSize: 'var(--size-typography-text-sm)',
+};
+const group: CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: 'var(--units-md)',
+  padding: 'var(--units-lg)',
+  border: 'var(--stroke-sm) dashed var(--global-border-default)',
+  borderRadius: 'var(--radius-md)',
+};
+
+/** Les deux activations locales côte à côte : un élément ciblé, et une portée. */
+function RippleDemo({ custom, centered, disabled }: DemoProps) {
+  const targeted = useUiRipple<HTMLButtonElement>({ enabled: !disabled, centered });
+  const scope = useUiRippleScope<HTMLDivElement>({ enabled: !disabled, centered });
+
+  return (
+    <div style={custom ? { ...row, ...retuned } : row}>
+      <button type="button" style={tile} {...targeted}>
+        Élément ciblé
+        <small style={hint}>useUiRipple()</small>
+      </button>
+
+      <div style={group} {...scope}>
+        <UiButton label="Enregistrer" icon="check" />
+        <UiButton label="Annuler" level="low" variant="outlined" />
+        <div style={{ ...tile, cursor: 'default' }} data-ripple="on">
+          Zone marquée
+          <small style={hint}>data-ripple="on"</small>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta<typeof RippleDemo> = {
+  title: 'Foundations/Ripple',
+  component: RippleDemo,
+  parameters: {
+    layout: 'padded',
+    // Ces stories portent leur propre activation : elles ignorent l'interrupteur
+    // de la barre d'outils, qui poserait sinon `data-ripple="off"` sur <html>.
+    ripple: 'always',
+  },
+  argTypes: {
+    custom: { control: 'boolean' },
+    centered: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: { custom: false, centered: false, disabled: false },
+};
+
+export default meta;
+type Story = StoryObj<typeof RippleDemo>;
+
+/** Réglage par défaut : onde `currentColor`, au point de contact. */
+export const Default: Story = {};
+
+/** La même onde, retaillée par les seuls crochets CSS. */
+export const Custom: Story = { args: { custom: true } };
diff --git a/packages/ui-kit-react/src/core/ripple/ripple.test.tsx b/packages/ui-kit-react/src/core/ripple/ripple.test.tsx
new file mode 100644
index 0000000..b934217
--- /dev/null
+++ b/packages/ui-kit-react/src/core/ripple/ripple.test.tsx
@@ -0,0 +1,304 @@
+import { useState } from 'react';
+import { afterEach, expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { UiRippleProvider, useUiRipple, useUiRippleScope } from './ripple';
+import { launchRipple } from './ripple-engine';
+
+afterEach(() => {
+  delete document.documentElement.dataset['motion'];
+});
+
+const box: React.CSSProperties = { display: 'block', width: 120, height: 40 };
+
+function press(el: Element, clientX?: number, clientY?: number) {
+  const rect = el.getBoundingClientRect();
+  el.dispatchEvent(
+    new PointerEvent('pointerdown', {
+      bubbles: true,
+      isPrimary: true,
+      button: 0,
+      clientX: clientX ?? rect.left + 30,
+      clientY: clientY ?? rect.top + 20,
+    }),
+  );
+}
+
+/** Ondes vivantes sur un élément, `null` quand il n'a jamais reçu de couche. */
+function inks(el: Element): number | null {
+  const layer = el.querySelector(':scope > .ui-ripple-layer');
+  return layer ? layer.childElementCount : null;
+}
+
+function Harness({
+  targetedOn = true,
+  scopeOn = true,
+}: {
+  targetedOn?: boolean;
+  scopeOn?: boolean;
+}) {
+  const targeted = useUiRipple<HTMLButtonElement>({ enabled: targetedOn });
+  const scope = useUiRippleScope<HTMLDivElement>({ enabled: scopeOn });
+  const own = useUiRipple<HTMLButtonElement>();
+  return (
+    <>
+      <button type="button" className="targeted" style={box} {...targeted}>
+        Ciblé
+      </button>
+      <div className="scope" {...scope}>
+        <button type="button" className="inside" style={box} data-ripple="on">
+          Délégué
+        </button>
+        <button type="button" className="inside-disabled" style={box} data-ripple="on" disabled>
+          Désactivé
+        </button>
+        <button type="button" className="inside-own" style={box} {...own}>
+          Liaison interne
+        </button>
+        <div className="opted-out" data-ripple="off">
+          <button type="button" className="inside-opted-out" style={box} data-ripple="on">
+            Exclu
+          </button>
+        </div>
+        <span className="plain" style={box}>
+          Non interactif
+        </span>
+      </div>
+    </>
+  );
+}
+
+const q = (root: ParentNode, selector: string) => root.querySelector<HTMLElement>(selector)!;
+
+test('useUiRipple pose une couche masquée et une onde, taillée sur le coin le plus lointain', async () => {
+  const screen = await render(<Harness />);
+  const target = q(screen.container, '.targeted');
+  const rect = target.getBoundingClientRect();
+
+  press(target, rect.left + 30, rect.top + 20);
+
+  const layer = target.querySelector(':scope > .ui-ripple-layer')!;
+  expect(layer.getAttribute('aria-hidden')).toBe('true');
+  expect(inks(target)).toBe(1);
+  // Coin le plus lointain de (30, 20) dans une boîte de 120 × 40 : hypot(90, 20).
+  const radius = Math.hypot(rect.width - 30, rect.height - 20);
+  const ink = layer.firstElementChild as HTMLElement;
+  expect(Number.parseFloat(ink.style.width)).toBeCloseTo(radius * 2, 3);
+  expect(Number.parseFloat(ink.style.left)).toBeCloseTo(30 - radius, 3);
+});
+
+test('une portée fait onduler le descendant pressé, jamais le conteneur', async () => {
+  const screen = await render(<Harness />);
+  const inside = q(screen.container, '.inside');
+
+  press(inside);
+
+  expect(inks(inside)).toBe(1);
+  expect(inks(q(screen.container, '.scope'))).toBeNull();
+});
+
+test('un descendant non déclaré reste immobile tant qu’il n’est pas marqué', async () => {
+  const screen = await render(<Harness />);
+  const plain = q(screen.container, '.plain');
+
+  press(plain);
+  expect(inks(plain)).toBeNull();
+
+  plain.dataset['ripple'] = 'on';
+  press(plain);
+  expect(inks(plain)).toBe(1);
+});
+
+test('une portée et une liaison qui se chevauchent ne produisent qu’une onde', async () => {
+  const screen = await render(<Harness />);
+  const own = q(screen.container, '.inside-own');
+
+  press(own);
+
+  expect(inks(own)).toBe(1);
+  expect(inks(q(screen.container, '.scope'))).toBeNull();
+});
+
+test('un contrôle désactivé et un sous-arbre data-ripple="off" n’ondulent pas', async () => {
+  const screen = await render(<Harness />);
+
+  press(q(screen.container, '.inside-disabled'));
+  press(q(screen.container, '.inside-opted-out'));
+
+  expect(inks(q(screen.container, '.inside-disabled'))).toBeNull();
+  expect(inks(q(screen.container, '.inside-opted-out'))).toBeNull();
+});
+
+test('enabled à faux retire l’élément, et marque le sous-arbre pour les portées englobantes', async () => {
+  const screen = await render(<Harness targetedOn={false} scopeOn={false} />);
+  const target = q(screen.container, '.targeted');
+  const inside = q(screen.container, '.inside');
+
+  press(target);
+  press(inside);
+
+  expect(target.getAttribute('data-ripple')).toBe('off');
+  expect(q(screen.container, '.scope').getAttribute('data-ripple')).toBe('off');
+  expect(inks(target)).toBeNull();
+  expect(inks(inside)).toBeNull();
+});
+
+test('les réglages suivent le dernier rendu, sans relier', async () => {
+  function Toggle() {
+    const [on, setOn] = useState(false);
+    const ripple = useUiRipple<HTMLButtonElement>({ enabled: on });
+    return (
+      <>
+        <button type="button" className="t" style={box} {...ripple}>
+          Cible
+        </button>
+        <button type="button" onClick={() => setOn(true)}>
+          Activer
+        </button>
+      </>
+    );
+  }
+  const screen = await render(<Toggle />);
+  const target = q(screen.container, '.t');
+
+  press(target);
+  expect(inks(target)).toBeNull();
+
+  await screen.getByRole('button', { name: 'Activer' }).click();
+  press(target);
+  expect(inks(target)).toBe(1);
+});
+
+test('rien sous l’interrupteur data-motion="off" du kit', async () => {
+  document.documentElement.dataset['motion'] = 'off';
+  const screen = await render(<Harness />);
+  const target = q(screen.container, '.targeted');
+
+  press(target);
+
+  expect(inks(target)).toBeNull();
+});
+
+test('une pression frénétique ne garde que quatre ondes vivantes', async () => {
+  const screen = await render(<Harness />);
+  const target = q(screen.container, '.targeted');
+
+  for (let i = 0; i < 7; i++) press(target);
+
+  expect(inks(target)).toBe(4);
+});
+
+test('launchRipple fait onduler depuis le centre, sans pression', async () => {
+  const screen = await render(<Harness />);
+  const target = q(screen.container, '.targeted');
+  const rect = target.getBoundingClientRect();
+
+  launchRipple(target);
+
+  const ink = target.querySelector<HTMLElement>('.ui-ripple-ink')!;
+  const radius = Math.hypot(rect.width / 2, rect.height / 2);
+  expect(Number.parseFloat(ink.style.left)).toBeCloseTo(rect.width / 2 - radius, 3);
+});
+
+// --- Activation globale ------------------------------------------------------------
+
+test('UiRippleProvider fait onduler un contrôle marqué, sans rien d’autre', async () => {
+  const screen = await render(
+    <UiRippleProvider>
+      <button type="button" className="kit" style={box} data-ripple="on">
+        Du kit
+      </button>
+      <button type="button" className="app" style={box}>
+        De l’application
+      </button>
+    </UiRippleProvider>,
+  );
+
+  press(q(screen.container, '.kit'));
+  press(q(screen.container, '.app'));
+
+  expect(inks(q(screen.container, '.kit'))).toBe(1);
+  expect(inks(q(screen.container, '.app'))).toBeNull();
+});
+
+test('le sélecteur élargi fait onduler les contrôles de l’application, data-ripple="off" compris en retrait', async () => {
+  const screen = await render(
+    <UiRippleProvider selector="button">
+      <button type="button" className="app" style={box}>
+        De l’application
+      </button>
+      <div data-ripple="off">
+        <button type="button" className="off" style={box}>
+          Retiré
+        </button>
+      </div>
+    </UiRippleProvider>,
+  );
+
+  press(q(screen.container, '.app'));
+  press(q(screen.container, '.off'));
+
+  expect(inks(q(screen.container, '.app'))).toBe(1);
+  expect(inks(q(screen.container, '.off'))).toBeNull();
+});
+
+test('global à faux ne fait que poser le sélecteur des portées', async () => {
+  function Scoped() {
+    const scope = useUiRippleScope<HTMLDivElement>();
+    return (
+      <div {...scope}>
+        <span className="tile" style={box}>
+          Tuile
+        </span>
+      </div>
+    );
+  }
+  const screen = await render(
+    <UiRippleProvider global={false} selector=".tile">
+      <button type="button" className="outside" style={box} data-ripple="on">
+        Hors portée
+      </button>
+      <Scoped />
+    </UiRippleProvider>,
+  );
+
+  press(q(screen.container, '.outside'));
+  press(q(screen.container, '.tile'));
+
+  expect(inks(q(screen.container, '.outside'))).toBeNull();
+  expect(inks(q(screen.container, '.tile'))).toBe(1);
+});
+
+test('deux fournisseurs dans la page répondent par une seule onde', async () => {
+  const screen = await render(
+    <UiRippleProvider>
+      <UiRippleProvider>
+        <button type="button" className="kit" style={box} data-ripple="on">
+          Du kit
+        </button>
+      </UiRippleProvider>
+    </UiRippleProvider>,
+  );
+
+  press(q(screen.container, '.kit'));
+
+  expect(inks(q(screen.container, '.kit'))).toBe(1);
+});
+
+test('le démontage du fournisseur retire l’écouteur global', async () => {
+  const screen = await render(
+    <UiRippleProvider>
+      <span />
+    </UiRippleProvider>,
+  );
+  await screen.unmount();
+
+  const orphan = document.createElement('button');
+  orphan.dataset['ripple'] = 'on';
+  Object.assign(orphan.style, { display: 'block', width: '120px', height: '40px' });
+  document.body.append(orphan);
+  press(orphan);
+
+  expect(inks(orphan)).toBeNull();
+  orphan.remove();
+});
diff --git a/packages/ui-kit-react/src/core/ripple/ripple.tsx b/packages/ui-kit-react/src/core/ripple/ripple.tsx
new file mode 100644
index 0000000..d5004d0
--- /dev/null
+++ b/packages/ui-kit-react/src/core/ripple/ripple.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type ReactNode,
+} from 'react';
+
+import { bindRipple, delegateRipple, UI_RIPPLE_DEFAULT_SELECTOR } from './ripple-engine';
+
+/** Sélecteur du kit, que les portées sans sélecteur propre reprennent. */
+const SelectorContext = createContext(UI_RIPPLE_DEFAULT_SELECTOR);
+
+export interface UiRippleProviderProps {
+  /**
+   * Fait onduler tout le document, par délégation sur `<body>`. À `false`, le
+   * fournisseur ne fait que poser le sélecteur des portées qu'il contient.
+   */
+  global?: boolean;
+  /** Ce qu'une racine déléguée fait onduler. Par défaut, ce qui porte `data-ripple="on"`. */
+  selector?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Active l'onde pour TOUTE l'application : tout ce qui porte `data-ripple="on"`,
+ * donc les quatorze composants du kit qui le posent d'eux-mêmes, répond à une
+ * pression.
+ *
+ * ```tsx
+ * <UiRippleProvider>
+ *   <App />
+ * </UiRippleProvider>
+ *
+ * // élargir à tous les contrôles de l'application
+ * <UiRippleProvider selector={UI_RIPPLE_INTERACTIVE_SELECTOR}>…</UiRippleProvider>
+ * ```
+ *
+ * Un élément ou un sous-arbre se retire par `data-ripple="off"`, et chaque
+ * composant du kit par `ripple={false}`. Les crochets n'ont pas besoin du
+ * fournisseur.
+ */
+export function UiRippleProvider({
+  global = true,
+  selector = UI_RIPPLE_DEFAULT_SELECTOR,
+  children,
+}: UiRippleProviderProps) {
+  useEffect(() => {
+    if (!global) return;
+    return delegateRipple(document.body, () => ({ enabled: true, centered: false, selector }));
+  }, [global, selector]);
+
+  return <SelectorContext.Provider value={selector}>{children}</SelectorContext.Provider>;
+}
+
+export interface UiRippleOptions {
+  /** `false` retire l'élément et son sous-arbre, activation globale comprise. */
+  enabled?: boolean;
+  /** Partir du centre plutôt que du point de contact (contrôles réduits à une icône). */
+  centered?: boolean;
+}
+
+export interface UiRippleScopeOptions extends UiRippleOptions {
+  /** Ce qui ondule dans la portée. Par défaut, le sélecteur du fournisseur. */
+  selector?: string;
+}
+
+/** Props à reverser sur l'élément : la ref qui le lie, et le marqueur de retrait. */
+export interface UiRippleBinding<T extends HTMLElement = HTMLElement> {
+  ref: (node: T | null) => (() => void) | void;
+  'data-ripple': 'off' | undefined;
+}
+
+/**
+ * Les réglages vivent dans une référence, relue à chaque pression : la liaison
+ * est posée une fois, et suit pourtant les props du dernier rendu.
+ */
+function useLatest<T>(value: T) {
+  const ref = useRef(value);
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+/**
+ * CET élément répond à une pression par une onde partie du point de contact.
+ *
+ * ```tsx
+ * const ripple = useUiRipple({ centered: true });
+ * <div className="tuile" {...ripple}>…</div>
+ * ```
+ *
+ * L'onde est découpée par la boîte de l'élément et suit son `border-radius`. Sur
+ * un composant du kit, préférer sa prop `ripple` ou `useUiRippleScope()` sur un
+ * conteneur : c'est son contrôle natif qu'il faut atteindre.
+ */
+export function useUiRipple<T extends HTMLElement = HTMLElement>({
+  enabled = true,
+  centered = false,
+}: UiRippleOptions = {}): UiRippleBinding<T> {
+  const settings = useLatest({ enabled, centered });
+  const ref = useCallback(
+    (node: T | null) => (node ? bindRipple(node, () => settings.current) : undefined),
+    [settings],
+  );
+  return { ref, 'data-ripple': enabled ? undefined : 'off' };
+}
+
+/**
+ * Tout ce qui est interactif DANS cet élément ondule, avec un seul écouteur sur
+ * le conteneur plutôt qu'une liaison par contrôle.
+ *
+ * ```tsx
+ * const scope = useUiRippleScope();
+ * <div className="barre" {...scope}>
+ *   <UiButton label="Enregistrer" />
+ * </div>
+ * ```
+ *
+ * Les portées imbriquées et `useUiRipple` ne s'additionnent pas : la
+ * déclaration la plus intérieure l'emporte.
+ */
+export function useUiRippleScope<T extends HTMLElement = HTMLElement>({
+  enabled = true,
+  centered = false,
+  selector,
+}: UiRippleScopeOptions = {}): UiRippleBinding<T> {
+  const kitSelector = useContext(SelectorContext);
+  const settings = useLatest({ enabled, centered, selector: selector || kitSelector });
+  const ref = useCallback(
+    (node: T | null) => (node ? delegateRipple(node, () => settings.current) : undefined),
+    [settings],
+  );
+  return { ref, 'data-ripple': enabled ? undefined : 'off' };
+}
diff --git a/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.tsx b/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.tsx
index 68d58b9..bdbda84 100644
--- a/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.tsx
+++ b/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.tsx
@@ -102,6 +102,11 @@ export interface UiAutocompleteProps extends UiFieldSharedProps, NativeProps {
 
   /** Sélection multiple, rendue en puces. */
   multiple?: boolean;
+  /**
+   * Onde de pression sur les suggestions et les étiquettes, quand elle est activée. `false` la coupe
+   * sur ce champ, activation globale comprise.
+   */
+  ripple?: boolean;
   /** Refuser deux fois la même valeur. */
   unique?: boolean;
   maxSelectedLabels?: number;
@@ -178,6 +183,7 @@ export function UiAutocomplete({
   dropdownIcon = 'angle-down',
   forceSelection = false,
   multiple = false,
+  ripple = true,
   unique = true,
   maxSelectedLabels,
   overflowLabel = '(+{0} autres)',
@@ -779,6 +785,7 @@ export function UiAutocomplete({
           row.index === focusedIndex && '_focused',
           row.entry.disabled && '_disabled',
         )}
+        data-ripple={ripple ? 'on' : 'off'}
         role="option"
         aria-selected={row.index === focusedIndex}
         aria-disabled={row.entry.disabled || undefined}
@@ -891,6 +898,7 @@ export function UiAutocomplete({
                       tagRefs.current[tag.index] = node;
                     }}
                     className="ui-autocomplete-tag"
+                    data-ripple={ripple ? 'on' : 'off'}
                     role="option"
                     aria-selected
                     aria-label={tag.label}
diff --git a/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.tsx b/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.tsx
index 4fe4212..af0d97b 100644
--- a/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.tsx
+++ b/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.tsx
@@ -290,6 +290,12 @@ export interface UiDatepickerProps extends UiFieldSharedProps {
 
   /** Afficher la barre de boutons du bas, ou rendre `renderButtonBar`. */
   showButtonBar?: boolean;
+  /**
+   * Onde de pression sur les jours, les mois, les années et les boutons de
+   * navigation, quand elle est activée. Pas sur les incréments d'heure, qui sont
+   * des compteurs. `false` la coupe sur ce champ, activation globale comprise.
+   */
+  ripple?: boolean;
   /** Libelle du bouton « aujourd'hui ». */
   todayLabel?: string;
   /** Libelle du bouton d'effacement. */
@@ -411,6 +417,7 @@ export function UiDatepicker({
   stepMinute = 1,
   editableTime = true,
   showButtonBar = false,
+  ripple = true,
   todayLabel = "Aujourd'hui",
   clearLabel = 'Effacer',
   formatHintLabel,
@@ -2217,6 +2224,7 @@ export function UiDatepicker({
     <button
       type="button"
       className="ui-datepicker-nav"
+      data-ripple={ripple ? 'on' : 'off'}
       aria-label={dir === 'prev' ? prevAriaLabel : nextAriaLabel}
       onClick={() => step(dir === 'prev' ? -1 : 1)}
     >
@@ -2274,6 +2282,7 @@ export function UiDatepicker({
                       key={y.year}
                       type="button"
                       role="gridcell"
+                      data-ripple={ripple ? 'on' : 'off'}
                       className={cx(
                         'ui-datepicker-cell',
                         y.selected && '_selected',
@@ -2305,6 +2314,7 @@ export function UiDatepicker({
                       key={m.index}
                       type="button"
                       role="gridcell"
+                      data-ripple={ripple ? 'on' : 'off'}
                       className={cx(
                         'ui-datepicker-cell',
                         m.selected && '_selected',
@@ -2371,6 +2381,7 @@ export function UiDatepicker({
                             key={cell.ts}
                             type="button"
                             role="gridcell"
+                            data-ripple={ripple ? 'on' : 'off'}
                             className={cx(
                               'ui-datepicker-day',
                               cell.selected && '_selected',
diff --git a/packages/ui-kit-react/src/forms/ui-editor/index.ts b/packages/ui-kit-react/src/forms/ui-editor/index.ts
new file mode 100644
index 0000000..dc51f68
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/index.ts
@@ -0,0 +1,20 @@
+export { UiEditor, type UiEditorProps, type EditorToolbarPosition } from './ui-editor';
+export {
+  DEFAULT_EDITOR_TOOLS,
+  EDITOR_FONTS,
+  EDITOR_SIZES,
+  EDITOR_COLORS,
+  EDITOR_HIGHLIGHTS,
+  EDITOR_TOOL_META,
+  htmlToText,
+  isEmptyHtml,
+  normalizeHtml,
+  type EditorTool,
+  type EditorButtonTool,
+  type EditorSelectTool,
+  type EditorToggleTool,
+  type EditorState,
+  type EditorFont,
+  type EditorSize,
+} from './ui-editor-commands';
+export { sanitizeHtml } from './ui-editor-sanitize';
diff --git a/packages/ui-kit-react/src/forms/ui-editor/ui-editor-commands.ts b/packages/ui-kit-react/src/forms/ui-editor/ui-editor-commands.ts
new file mode 100644
index 0000000..53def7b
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/ui-editor-commands.ts
@@ -0,0 +1,707 @@
+import { DEFAULT_SWATCH_PALETTE } from '../ui-swatch-picker';
+
+import { parseInert } from './ui-editor-sanitize';
+
+/**
+ * Rich-text command layer: the only place that talks to the legacy editing API.
+ *
+ * `document.execCommand` is deprecated but remains the sole cross-browser way to
+ * apply inline formatting to a `contenteditable` selection without pulling in an
+ * editing engine (ProseMirror, Quill…). It is confined to this file so the kit
+ * keeps a single third-party-free dependency surface, and so a future Selection/
+ * Range implementation only has to replace these functions.
+ */
+
+/**
+ * A formatting action the toolbar can trigger.
+ *
+ * `separator` is purely visual; `fontFamily` renders a dropdown rather than a
+ * button, since it picks among values instead of toggling one.
+ */
+export type EditorTool =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'bulletList'
+  | 'orderedList'
+  | 'codeBlock'
+  | 'fontFamily'
+  | 'fontSize'
+  | 'indent'
+  | 'outdent'
+  | 'alignLeft'
+  | 'alignCenter'
+  | 'alignRight'
+  | 'alignJustify'
+  | 'textColor'
+  | 'highlightColor'
+  | 'link'
+  | 'clearFormat'
+  | 'separator';
+
+/** Tools rendered as a dropdown: they pick among values instead of toggling one. */
+export type EditorSelectTool = 'fontFamily' | 'fontSize';
+
+/** Tools rendered as an icon button. */
+export type EditorButtonTool = Exclude<EditorTool, 'separator' | EditorSelectTool>;
+
+export const EDITOR_SELECT_TOOLS: readonly EditorSelectTool[] = ['fontFamily', 'fontSize'];
+
+/** Commands whose active/inactive state the toolbar reflects via `aria-pressed`. */
+export type EditorToggleTool = Extract<
+  EditorTool,
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'bulletList'
+  | 'orderedList'
+  | 'codeBlock'
+  | 'alignLeft'
+  | 'alignCenter'
+  | 'alignRight'
+  | 'alignJustify'
+>;
+
+/** Active formatting at the caret, recomputed after every interaction. */
+export type EditorState = Record<EditorToggleTool, boolean>;
+
+/**
+ * Type families the editor can apply.
+ *
+ * A closed list on purpose: a free font picker would write an arbitrary family
+ * into the value and step outside the `--fontfamily-*` tokens. The system has no
+ * serif face, so the list is the three families the tokens actually carry.
+ */
+export type EditorFont = 'base' | 'title' | 'monospace';
+
+/**
+ * Font key → class written into the value, token holding the family, and the
+ * fallback label used when the real name cannot be read (SSR, unset token).
+ *
+ * The dropdown shows the **actual** face name, resolved from the token at runtime
+ * (see {@link resolveFontLabel}) rather than hardcoded: a project that rebinds
+ * `--fontfamily-base` would otherwise see a menu naming a font it no longer uses.
+ */
+export const EDITOR_FONTS: readonly {
+  key: EditorFont;
+  className: string;
+  cssVar: string;
+  label: string;
+}[] = [
+  { key: 'base', className: 'ui-editor-font-base', cssVar: '--fontfamily-base', label: 'Standard' },
+  {
+    key: 'title',
+    className: 'ui-editor-font-title',
+    cssVar: '--fontfamily-title',
+    label: 'Titre',
+  },
+  {
+    key: 'monospace',
+    className: 'ui-editor-font-monospace',
+    cssVar: '--fontfamily-monospace',
+    label: 'Monospace',
+  },
+];
+
+/**
+ * First face named by a font token : what the family dropdown displays.
+ *
+ * `--fontfamily-base` holds a whole stack (`Inter, system-ui, …`); only the head
+ * of it is a name a person recognises.
+ */
+export function resolveFontLabel(cssVar: string, fallback: string): string {
+  if (typeof document === 'undefined') return fallback;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
+  const first = raw
+    .split(',')[0]
+    ?.trim()
+    .replace(/^["']|["']$/g, '');
+  return first || fallback;
+}
+
+/** Text sizes the editor can apply, as a step on the typography scale. */
+export type EditorSize = 'sm' | 'default' | 'lg' | 'xl';
+
+/** Size key → class written into the value + French label for the dropdown. */
+export const EDITOR_SIZES: readonly { key: EditorSize; className: string; label: string }[] = [
+  { key: 'sm', className: 'ui-editor-size-sm', label: 'Petit' },
+  { key: 'default', className: 'ui-editor-size-default', label: 'Normal' },
+  { key: 'lg', className: 'ui-editor-size-lg', label: 'Grand' },
+  { key: 'xl', className: 'ui-editor-size-xl', label: 'Très grand' },
+];
+
+const SIZE_CLASSES = new Set(EDITOR_SIZES.map((s) => s.className));
+
+const FONT_CLASSES = new Set(EDITOR_FONTS.map((f) => f.className));
+
+/**
+ * The tools enabled when the consumer does not provide a `tools` list.
+ *
+ * There is no block-level dropdown (no `blockFormat`, no headings): the editor
+ * only ever produces `<p>`. `fontFamily`/`fontSize` are both first-class,
+ * always-on tools rather than one gated behind the other.
+ *
+ * `clearFormat` is deliberately absent for now: `clearFormatMarkers()` does not
+ * reliably clear every marker class yet. It stays available for a project that
+ * explicitly adds it to `tools`, but shipping it by default would be shipping
+ * a broken button.
+ */
+export const DEFAULT_EDITOR_TOOLS: readonly EditorTool[] = [
+  'fontFamily',
+  'fontSize',
+  'separator',
+  'bold',
+  'italic',
+  'underline',
+  'separator',
+  'bulletList',
+  'orderedList',
+  'separator',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
+  'separator',
+  'link',
+  'codeBlock',
+];
+
+/** Toolbar metadata per button tool: icon (FontAwesome) + French accessible name. */
+export const EDITOR_TOOL_META: Record<EditorButtonTool, { icon: string; label: string }> = {
+  bold: { icon: 'bold', label: 'Gras' },
+  italic: { icon: 'italic', label: 'Italique' },
+  underline: { icon: 'underline', label: 'Souligné' },
+  bulletList: { icon: 'list-ul', label: 'Liste à puces' },
+  orderedList: { icon: 'list-ol', label: 'Liste numérotée' },
+  codeBlock: { icon: 'code', label: 'Bloc de code' },
+  indent: { icon: 'indent', label: 'Augmenter le retrait' },
+  outdent: { icon: 'outdent', label: 'Diminuer le retrait' },
+  alignLeft: { icon: 'align-left', label: 'Aligner à gauche' },
+  alignCenter: { icon: 'align-center', label: 'Centrer' },
+  alignRight: { icon: 'align-right', label: 'Aligner à droite' },
+  alignJustify: { icon: 'align-justify', label: 'Justifier' },
+  textColor: { icon: 'font', label: 'Couleur du texte' },
+  highlightColor: { icon: 'highlighter', label: 'Couleur de surlignage' },
+  link: { icon: 'link', label: 'Lien' },
+  clearFormat: { icon: 'text-slash', label: 'Effacer le formatage' },
+};
+
+/** Tool → legacy command name. */
+const NATIVE_COMMAND: Record<
+  Exclude<EditorButtonTool, 'link' | 'codeBlock' | 'textColor' | 'highlightColor'>,
+  string
+> = {
+  bold: 'bold',
+  italic: 'italic',
+  underline: 'underline',
+  bulletList: 'insertUnorderedList',
+  orderedList: 'insertOrderedList',
+  indent: 'indent',
+  outdent: 'outdent',
+  alignLeft: 'justifyLeft',
+  alignCenter: 'justifyCenter',
+  alignRight: 'justifyRight',
+  alignJustify: 'justifyFull',
+  clearFormat: 'removeFormat',
+};
+
+const TOGGLE_TOOLS: readonly Exclude<EditorToggleTool, 'codeBlock'>[] = [
+  'bold',
+  'italic',
+  'underline',
+  'bulletList',
+  'orderedList',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
+];
+
+/** Every state off : the value used before the first render and on SSR. */
+export function emptyEditorState(): EditorState {
+  return {
+    bold: false,
+    italic: false,
+    underline: false,
+    bulletList: false,
+    orderedList: false,
+    codeBlock: false,
+    alignLeft: false,
+    alignCenter: false,
+    alignRight: false,
+    alignJustify: false,
+  };
+}
+
+/** Applies a formatting command to the current selection. */
+export function applyCommand(
+  tool: Exclude<EditorButtonTool, 'link' | 'codeBlock' | 'textColor' | 'highlightColor'>,
+): void {
+  document.execCommand(NATIVE_COMMAND[tool], false);
+}
+
+// --- Code block ---------------------------------------------------------
+
+/** Toggles the block under the caret between `<pre>` and a plain paragraph. */
+export function toggleCodeBlock(): void {
+  document.execCommand('formatBlock', false, isInCodeBlock() ? 'p' : 'pre');
+}
+
+/** The caret sits in a code block. */
+export function isInCodeBlock(): boolean {
+  try {
+    return (document.queryCommandValue('formatBlock') || '').toLowerCase() === 'pre';
+  } catch {
+    return false;
+  }
+}
+
+// --- Font family --------------------------------------------------------
+
+/**
+ * Marker handed to `fontName`, immediately rewritten into a class.
+ *
+ * `fontName` is the only command that can apply a family to an arbitrary
+ * selection, but it emits `<font face="…">` : an obsolete tag carrying a raw
+ * family name. We let it run, then convert its output so the value only ever
+ * holds a class bound to a `--fontfamily-*` token.
+ */
+const FONT_MARKER = '__ui-editor-font__';
+
+/** Applies a type family to the selection (see {@link convertFontMarkers}). */
+export function applyFontFamily(): void {
+  document.execCommand('fontName', false, FONT_MARKER);
+}
+
+/** Rewrites the `<font>` elements `fontName` just produced into `<span class>`. */
+export function convertFontMarkers(root: ParentNode, className: string): void {
+  convertMarkers(root, `font[face="${FONT_MARKER}"]`, className, FONT_CLASSES);
+}
+
+/**
+ * @internal Replaces the matched legacy `<font>` elements with a classed span.
+ *
+ * Two things the Angular version did not do, both measured in a browser:
+ *
+ * - a class of the same family left INSIDE the new span wins over it, being
+ *   closer to the text: recoloring a paragraph that holds a red word left that
+ *   word red. Those inner classes are stripped;
+ * - replacing the element that held the selection collapses it, so the text
+ *   just formatted was no longer selected and a second format needed a new
+ *   selection. It is put back on what was just formatted.
+ */
+function convertMarkers(
+  root: ParentNode,
+  selector: string,
+  className: string,
+  family: ReadonlySet<string>,
+): void {
+  const spans: HTMLElement[] = [];
+  for (const el of Array.from(root.querySelectorAll(selector))) {
+    const span = document.createElement('span');
+    span.className = className;
+    span.append(...Array.from(el.childNodes));
+    el.replaceWith(span);
+    spans.push(span);
+  }
+  if (!spans.length) return;
+
+  for (const span of spans) {
+    for (const inner of Array.from(span.querySelectorAll<HTMLElement>('[class]'))) {
+      for (const cls of Array.from(inner.classList))
+        if (family.has(cls)) inner.classList.remove(cls);
+      if (inner.classList.length > 0) continue;
+      inner.removeAttribute('class');
+      if (inner.tagName === 'SPAN' && inner.attributes.length === 0) {
+        inner.replaceWith(...Array.from(inner.childNodes));
+      }
+    }
+  }
+
+  const first = spans[0]!;
+  const last = spans[spans.length - 1]!;
+  if (!first.isConnected || typeof document.getSelection !== 'function') return;
+  const range = document.createRange();
+  range.setStart(first, 0);
+  range.setEnd(last, last.childNodes.length);
+  const selection = document.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+
+/**
+ * Type family in force at the caret.
+ *
+ * Falls back to the family the text is actually rendered with when no class was
+ * applied: a heading carries `--fontfamily-title` from its own styling, and
+ * reporting the base family there would name a font the reader does not see.
+ * `null` only when the computed face matches none of the system families.
+ */
+export function readFontFamily(node: Node | null): EditorFont | null {
+  const tagged = findClassKey(node, EDITOR_FONTS);
+  if (tagged) return tagged;
+
+  const el: HTMLElement | null =
+    node?.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : (node?.parentElement ?? null);
+  if (!el || typeof getComputedStyle !== 'function') return null;
+
+  const rendered = firstFace(getComputedStyle(el).fontFamily);
+  return (
+    EDITOR_FONTS.find((f) => firstFace(resolveFontLabel(f.cssVar, '')) === rendered)?.key ?? null
+  );
+}
+
+/** @internal Head of a font stack, unquoted and lowercased for comparison. */
+function firstFace(stack: string): string {
+  return (stack.split(',')[0] ?? '')
+    .trim()
+    .replace(/^["']|["']$/g, '')
+    .toLowerCase();
+}
+
+// --- Font size ----------------------------------------------------------
+
+/**
+ * Marker handed to `fontSize`, immediately rewritten into a class.
+ *
+ * Same trick as the family: `fontSize` is the only command that can size an
+ * arbitrary selection, but it emits `<font size="7">` : a legacy 1-7 scale with
+ * no relation to the typography tokens.
+ */
+const SIZE_MARKER = '7';
+
+/** Applies a text size to the selection (see {@link convertSizeMarkers}). */
+export function applyFontSize(): void {
+  document.execCommand('fontSize', false, SIZE_MARKER);
+}
+
+/** Rewrites the `<font>` elements `fontSize` just produced into `<span class>`. */
+export function convertSizeMarkers(root: ParentNode, className: string): void {
+  convertMarkers(root, `font[size="${SIZE_MARKER}"]`, className, SIZE_CLASSES);
+}
+
+/** Text size active at the caret, or `null` when the text uses the default. */
+export function readFontSize(node: Node | null): EditorSize | null {
+  return findClassKey(node, EDITOR_SIZES);
+}
+
+// --- Text color / highlight color ---------------------------------------
+
+/**
+ * Color key → class written into the value, token holding the swatch, and
+ * label, derived from `ui-swatch-picker`'s default palette rather than
+ * hand-duplicated: the editor's color tools and the nuancier it opens must
+ * always offer the same token set.
+ */
+export const EDITOR_COLORS: readonly {
+  key: string;
+  className: string;
+  cssVar: string;
+  label: string;
+}[] = DEFAULT_SWATCH_PALETTE.flatMap((group) =>
+  group.swatches.map((swatch) => ({
+    key: swatch.key,
+    className: `ui-editor-color-${swatch.key}`,
+    cssVar: swatch.cssVar,
+    label: swatch.label,
+  })),
+);
+
+/** Same key set as {@link EDITOR_COLORS}, classed separately for the highlight tool. */
+export const EDITOR_HIGHLIGHTS: readonly {
+  key: string;
+  className: string;
+  cssVar: string;
+  label: string;
+}[] = DEFAULT_SWATCH_PALETTE.flatMap((group) =>
+  group.swatches.map((swatch) => ({
+    key: swatch.key,
+    className: `ui-editor-highlight-${swatch.key}`,
+    cssVar: swatch.cssVar,
+    label: swatch.label,
+  })),
+);
+
+const COLOR_CLASSES = new Set(EDITOR_COLORS.map((c) => c.className));
+const HIGHLIGHT_CLASSES = new Set(EDITOR_HIGHLIGHTS.map((c) => c.className));
+
+/**
+ * Marker handed to `foreColor`, immediately rewritten into a class.
+ *
+ * `foreColor` is the only command that can color an arbitrary selection, but
+ * it emits `<font color="…">` : same trick as the family/size markers. Must
+ * be a value the browser accepts as a real color (unlike `fontName`'s marker,
+ * which is free text): an unparseable string is silently dropped instead of
+ * being written to the `color` attribute. A hex triplet unlikely to collide
+ * with a real token value is used, and Chromium/Firefox both echo it back
+ * verbatim on the `<font color>` attribute (verified empirically).
+ */
+const COLOR_MARKER = '#010203';
+
+/** Applies a text color to the selection (see {@link convertColorMarkers}). */
+export function applyTextColor(): void {
+  document.execCommand('foreColor', false, COLOR_MARKER);
+}
+
+/** Rewrites the `<font>` elements `foreColor` just produced into `<span class>`. */
+export function convertColorMarkers(root: ParentNode, className: string): void {
+  convertMarkers(root, `font[color="${COLOR_MARKER}"]`, className, COLOR_CLASSES);
+}
+
+/** Text color active at the caret, or `null` when the text uses the default. */
+export function readTextColor(node: Node | null): string | null {
+  return findClassKey(node, EDITOR_COLORS);
+}
+
+/**
+ * Marker handed to `hiliteColor`, immediately rewritten into a class.
+ *
+ * Unlike `fontName`/`fontSize`/`foreColor`, `hiliteColor` does **not** emit a
+ * `<font>` element: verified empirically (Playwright, Chromium + Firefox)
+ * that it always produces `<span style="background-color: rgb(r, g, b);">`,
+ * converting whatever color is handed to it : including a hex marker : to an
+ * `rgb(...)` triplet in the `style` attribute. `HILITE_MARKER` is therefore
+ * kept as the hex value passed to the command, and `HILITE_MARKER_RGB` as the
+ * exact `rgb(...)` string both browsers echo back for it, used to build the
+ * `[style*="…"]` selector `convertHighlightMarkers` matches on.
+ */
+const HILITE_MARKER = '#040506';
+/** @internal `rgb(...)` form both Chromium and Firefox normalize `HILITE_MARKER` to. */
+const HILITE_MARKER_RGB = 'rgb(4, 5, 6)';
+
+/** Applies a highlight color to the selection (see {@link convertHighlightMarkers}). */
+export function applyHighlightColor(): void {
+  document.execCommand('hiliteColor', false, HILITE_MARKER);
+}
+
+/** Rewrites the `<span style>` elements `hiliteColor` just produced into `<span class>`. */
+export function convertHighlightMarkers(root: ParentNode, className: string): void {
+  convertMarkers(
+    root,
+    `[style*="background-color: ${HILITE_MARKER_RGB}"]`,
+    className,
+    HIGHLIGHT_CLASSES,
+  );
+}
+
+/** Highlight color active at the caret, or `null` when the text carries none. */
+export function readHighlightColor(node: Node | null): string | null {
+  return findClassKey(node, EDITOR_HIGHLIGHTS);
+}
+
+/**
+ * Strips a color/highlight class from every element carrying it inside
+ * `range`, unwrapping the element when nothing else justifies it (a plain
+ * `<span>` holding only that class).
+ *
+ * Used by the pickers' "no color" swatch: `foreColor`/`hiliteColor` can only
+ * set a color, there is no native command to remove one, so this undoes what
+ * {@link convertColorMarkers}/{@link convertHighlightMarkers} previously wrote.
+ */
+export function clearMarkerClass(root: ParentNode, range: Range, className: string): void {
+  for (const el of Array.from(root.querySelectorAll(`.${className}`))) {
+    if (!range.intersectsNode(el)) continue;
+    el.classList.remove(className);
+    if (el.classList.length > 0) continue;
+    el.removeAttribute('class');
+    if (el.tagName === 'SPAN' && el.attributes.length === 0) {
+      el.replaceWith(...Array.from(el.childNodes));
+    }
+  }
+}
+
+/**
+ * Strips every font/size/color/highlight class the editor writes, from
+ * whatever intersects `range`.
+ *
+ * `removeFormat` (the `clearFormat` tool's native command) only knows inline
+ * formatting the browser itself applies (bold, italic, underline…) : it never
+ * touches the `<span class="ui-editor-*">` wrappers `fontFamily`/`fontSize`/
+ * `textColor`/`highlightColor` write, so "Clear formatting" needs this on top
+ * of it to actually clear everything.
+ */
+export function clearFormatMarkers(root: ParentNode, range: Range): void {
+  for (const className of [
+    ...FONT_CLASSES,
+    ...SIZE_CLASSES,
+    ...COLOR_CLASSES,
+    ...HIGHLIGHT_CLASSES,
+  ]) {
+    clearMarkerClass(root, range, className);
+  }
+}
+
+/** @internal Nearest ancestor carrying one of the given classes. */
+function findClassKey<T extends string>(
+  node: Node | null,
+  table: readonly { key: T; className: string }[],
+): T | null {
+  let el: HTMLElement | null =
+    node?.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : (node?.parentElement ?? null);
+  while (el) {
+    const match = table.find((entry) => el!.classList?.contains(entry.className));
+    if (match) return match.key;
+    el = el.parentElement;
+  }
+  return null;
+}
+
+/** Wraps the current selection in a link (`removeFormat` alone cannot unlink). */
+export function applyLink(href: string): void {
+  document.execCommand('createLink', false, href);
+}
+
+/** Removes the link around the caret. */
+export function removeLink(): void {
+  document.execCommand('unlink', false);
+}
+
+/** Reads the formatting active at the caret. */
+export function readEditorState(): EditorState {
+  const state = emptyEditorState();
+  for (const tool of TOGGLE_TOOLS) {
+    try {
+      state[tool] = document.queryCommandState(NATIVE_COMMAND[tool]);
+    } catch {
+      // queryCommandState throws when the document has no selection yet.
+      state[tool] = false;
+    }
+  }
+  state.codeBlock = isInCodeBlock();
+  return state;
+}
+
+/**
+ * Inserts already-sanitised markup at the caret, replacing the selection.
+ *
+ * `insertHTML` and not a `Range` insertion: it is the only way to insert
+ * markup that the native undo stack records, so Ctrl+Z undoes a paste.
+ */
+export function insertHtml(safeHtml: string): void {
+  // eslint-disable-next-line no-restricted-syntax -- EXCEPTION JUSTIFIÉE: seul appelant `onPaste`, qui passe `sanitizeHtml(normalizeHtml(…))`, testé ; insertHTML garde le collage dans l'annulation native. Registre : docs/SECURITY-PRACTICES.md.
+  document.execCommand('insertHTML', false, safeHtml);
+}
+
+/** Inserts plain text at the caret, replacing the selection. */
+export function insertText(text: string): void {
+  document.execCommand('insertText', false, text);
+}
+
+// --- Content normalisation ---------------------------------------------
+
+/** Inline + block tags the editor is allowed to produce or to accept on paste. */
+const ALLOWED_TAGS = new Set([
+  'B',
+  'STRONG',
+  'I',
+  'EM',
+  'U',
+  'A',
+  'UL',
+  'OL',
+  'LI',
+  'P',
+  'BR',
+  'DIV',
+  'SPAN',
+  'PRE',
+  'CODE',
+  'H1',
+  'H2',
+  'H3',
+]);
+
+/**
+ * Tags dropped WITH their content, instead of being unwrapped.
+ *
+ * Unwrapping keeps the text of a rejected element, which is what we want for a
+ * heading or a table cell : but a script or stylesheet body would then land in
+ * the document as visible text.
+ */
+const VOIDED_TAGS = 'script, style, noscript, iframe, object, embed, template, title, meta, link';
+
+/** Only `href` survives, and only on a link. */
+const ALLOWED_HREF_PROTOCOLS = ['http:', 'https:', 'mailto:', 'tel:'];
+
+/**
+ * Strips everything outside the whitelist, keeping the text of dropped elements.
+ *
+ * Runs on paste, before `sanitizeHtml` (the `DomSanitizer` port): the sanitizer removes what is
+ * dangerous, this removes what is merely foreign to the editor (Word spans, inline
+ * styles, headings, tables) so the value stays a small, predictable HTML subset.
+ */
+export function normalizeHtml(html: string): string {
+  if (typeof DOMParser === 'undefined') return '';
+  // Parsed in a detached document (inert: no script runs, nothing loads).
+  // Reading `innerHTML` back is a read, not a write into the page.
+  const body = parseInert(html);
+  scrubNode(body);
+  return body.innerHTML;
+}
+
+/**
+ * Applies the same scrubbing to a live element, in place.
+ *
+ * `insertHTML` re-decorates what it inserts (`style="background-color: transparent"`
+ * and friends) *after* our normalisation, so the markup has to be cleaned once more
+ * once it is in the document. Attributes are removed node by node rather than by
+ * rewriting `innerHTML`, which would drop the caret.
+ */
+export function scrubInPlace(root: ParentNode): void {
+  scrubNode(root);
+}
+
+/** @internal Unwraps disallowed elements, voids the unsafe ones, drops attributes. */
+function scrubNode(root: ParentNode): void {
+  for (const el of Array.from(root.querySelectorAll(VOIDED_TAGS))) el.remove();
+  for (const el of Array.from(root.querySelectorAll('*'))) {
+    if (!ALLOWED_TAGS.has(el.tagName)) {
+      el.replaceWith(...Array.from(el.childNodes));
+      continue;
+    }
+    for (const attr of Array.from(el.attributes)) {
+      if (attr.name === 'class') {
+        // Only the editor's own font/size/color classes survive : anything else
+        // pasted in would style the value against a foreign stylesheet.
+        const kept = attr.value
+          .split(/\s+/)
+          .filter(
+            (c) =>
+              FONT_CLASSES.has(c) ||
+              SIZE_CLASSES.has(c) ||
+              COLOR_CLASSES.has(c) ||
+              HIGHLIGHT_CLASSES.has(c),
+          );
+        if (kept.length) el.setAttribute('class', kept.join(' '));
+        else el.removeAttribute('class');
+        continue;
+      }
+      const keep = el.tagName === 'A' && attr.name === 'href' && isSafeHref(attr.value);
+      if (!keep) el.removeAttribute(attr.name);
+    }
+  }
+}
+
+/** @internal Rejects `javascript:` and other non-navigational schemes. */
+function isSafeHref(href: string): boolean {
+  try {
+    return ALLOWED_HREF_PROTOCOLS.includes(new URL(href, document.baseURI).protocol);
+  } catch {
+    return false;
+  }
+}
+
+/** Normalises a browser-produced empty document (`<br>`, empty block) to `''`. */
+export function isEmptyHtml(html: string): boolean {
+  return htmlToText(html).length === 0 && !/<(img|hr)\b/i.test(html);
+}
+
+/** Plain-text projection of the value : what the character counter measures. */
+export function htmlToText(html: string): string {
+  if (!html) return '';
+  if (typeof DOMParser === 'undefined') {
+    // SSR fallback: good enough for a length, never rendered.
+    return html.replace(/<[^>]*>/g, '').trim();
+  }
+  return (parseInert(html).textContent ?? '').trim();
+}
diff --git a/packages/ui-kit-react/src/forms/ui-editor/ui-editor-sanitize.test.ts b/packages/ui-kit-react/src/forms/ui-editor/ui-editor-sanitize.test.ts
new file mode 100644
index 0000000..3f96bb6
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/ui-editor-sanitize.test.ts
@@ -0,0 +1,116 @@
+import { expect, test, vi } from 'vitest';
+
+import { htmlToNodes, sanitizeHtml, sanitizeStyle, sanitizeUrl } from './ui-editor-sanitize';
+
+test('le HTML de mise en forme passe tel quel', () => {
+  const html =
+    '<p>Du <strong>gras</strong>, de l\'<em>italique</em> et un <a href="https://example.com">lien</a>.</p>' +
+    '<ul><li>Un</li><li>Deux</li></ul><pre>code</pre>';
+  // L'apostrophe (39) est dans la plage que l'encodeur d'Angular laisse telle quelle.
+  expect(sanitizeHtml(html)).toBe(html);
+});
+
+test('les classes de l’éditeur survivent, comme chez Angular', () => {
+  const html = '<p><span class="ui-editor-font-title ui-editor-color-red-700">Titre</span></p>';
+  expect(sanitizeHtml(html)).toBe(html);
+});
+
+test('scripts, styles et gabarits disparaissent AVEC leur contenu', () => {
+  expect(
+    sanitizeHtml(
+      '<p>a</p><script>alert(1)</script><style>p{}</style><template><b>t</b></template>',
+    ),
+  ).toBe('<p>a</p>');
+});
+
+test('un élément inconnu disparaît, son texte reste', () => {
+  expect(sanitizeHtml('<p><custom-tag>texte</custom-tag></p><iframe src="x"></iframe>')).toBe(
+    '<p>texte</p>',
+  );
+});
+
+test('les gestionnaires et attributs inconnus tombent', () => {
+  expect(
+    sanitizeHtml(
+      '<p onclick="alert(1)" data-x="1" title="ok">a</p><img src="x.png" onerror="alert(1)">',
+    ),
+  ).toBe('<p title="ok">a</p><img src="x.png">');
+});
+
+test('une URL javascript: est neutralisée, une URL ordinaire non', () => {
+  expect(sanitizeHtml('<a href="javascript:alert(1)">x</a>')).toBe(
+    '<a href="unsafe:javascript:alert(1)">x</a>',
+  );
+  expect(sanitizeUrl('https://example.com/a?b#c')).toBe('https://example.com/a?b#c');
+  expect(sanitizeUrl('mailto:a@b.fr')).toBe('mailto:a@b.fr');
+  expect(sanitizeUrl('/relative/page')).toBe('/relative/page');
+  expect(sanitizeUrl('JaVaScRiPt:alert(1)')).toBe('unsafe:JaVaScRiPt:alert(1)');
+});
+
+test('un SVG ou un MathML ne font pas passer de script par un changement d’espace de noms', () => {
+  const out = sanitizeHtml(
+    '<svg><style><img src=x onerror=alert(1)></style></svg><math><mtext><table><mglyph><style><img src=x onerror=alert(2)>',
+  );
+  // L'analyseur fait sortir `<img>` de l'espace SVG : l'image devient un élément
+  // HTML ordinaire, gardé SANS son gestionnaire, comme chez Angular.
+  expect(out).not.toMatch(/onerror/i);
+  // Et la sortie est stable : la renettoyer ne la change plus, ce qui ferme la
+  // porte aux mutations entre deux analyses.
+  expect(sanitizeHtml(out)).toBe(out);
+});
+
+test("le style est réduit à l'alignement et au retrait que l'éditeur écrit", () => {
+  expect(sanitizeHtml('<p style="text-align: center;">a</p>')).toBe(
+    '<p style="text-align: center;">a</p>',
+  );
+  expect(
+    sanitizeHtml(
+      '<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p>a</p></blockquote>',
+    ),
+  ).toBe(
+    '<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p>a</p></blockquote>',
+  );
+  expect(sanitizeHtml('<p style="color: red">a</p>')).toBe('<p>a</p>');
+});
+
+test('aucune url() ne passe par le style', () => {
+  expect(sanitizeStyle('background: url(https://evil.example/x); text-align: left')).toBe(
+    'text-align: left;',
+  );
+  expect(sanitizeStyle('margin: url(x)')).toBe('');
+  expect(sanitizeStyle('text-align: expression(alert(1))')).toBe('');
+  expect(sanitizeStyle('border: 1px solid red')).toBe('');
+});
+
+test('les entités et caractères spéciaux sont réencodés', () => {
+  expect(sanitizeHtml('<p>a &lt; b &amp; c</p>')).toBe('<p>a &lt; b &amp; c</p>');
+  expect(sanitizeHtml('<p>café 😀</p>')).toBe('<p>caf&#233; &#128512;</p>');
+});
+
+test('une valeur vide ou absente rend une chaîne vide', () => {
+  expect(sanitizeHtml('')).toBe('');
+  expect(sanitizeHtml(null)).toBe('');
+  expect(sanitizeHtml(undefined)).toBe('');
+});
+
+test('un formulaire écrasé ne fait pas planter le champ', () => {
+  const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  // `<form>` dont un enfant s'appelle `nextSibling` : ses liens de parenté mentent.
+  const out = sanitizeHtml(
+    '<form><input name="nextSibling"><input name="firstChild"></form><p>b</p>',
+  );
+  expect(typeof out).toBe('string');
+  warn.mockRestore();
+});
+
+test('htmlToNodes rend des nœuds insérables, sans rien exécuter', () => {
+  const host = document.createElement('div');
+  host.replaceChildren(
+    ...htmlToNodes(sanitizeHtml('<p>a<b>b</b></p><img src="x" onerror="window.__pwned=1">')),
+  );
+  document.body.append(host);
+
+  expect(host.innerHTML).toBe('<p>a<b>b</b></p><img src="x">');
+  expect((window as unknown as { __pwned?: number }).__pwned).toBeUndefined();
+  host.remove();
+});
diff --git a/packages/ui-kit-react/src/forms/ui-editor/ui-editor-sanitize.ts b/packages/ui-kit-react/src/forms/ui-editor/ui-editor-sanitize.ts
new file mode 100644
index 0000000..b9d82ec
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/ui-editor-sanitize.ts
@@ -0,0 +1,260 @@
+// =====================================================================
+// Nettoyage du HTML de l'éditeur.
+//
+// `sanitizeHtml` est le portage du `DomSanitizer` d'Angular pour le contexte
+// HTML (`SecurityContext.HTML`) : mêmes listes d'éléments et d'attributs, même
+// filtrage des URL, même boucle contre les mutations au réanalyse (mXSS). Une
+// valeur stockée se rend donc à l'identique dans les deux stacks.
+//
+// Une seule extension, mesurée : l'attribut `style`, réduit aux déclarations
+// que l'éditeur écrit lui-même. Chromium aligne par `style="text-align: …"` et
+// met en retrait par un `<blockquote style="margin: …">` ; le sanitizer
+// d'Angular retire tout `style`, et l'éditeur Angular perd l'alignement et le
+// retrait dès qu'une valeur enregistrée lui revient.
+//
+// Rien ici n'écrit de HTML dans le document : l'analyse se fait dans un
+// document détaché (`DOMParser`, inerte, sans exécution ni chargement), et le
+// seul `innerHTML` touché est une LECTURE.
+// =====================================================================
+
+function tagSet(tags: string): Set<string> {
+  return new Set(tags.split(','));
+}
+
+const VOID_ELEMENTS = tagSet('area,br,col,hr,img,wbr');
+const OPTIONAL_END_TAG_BLOCK_ELEMENTS = tagSet('colgroup,dd,dt,li,p,tbody,td,tfoot,th,thead,tr');
+const OPTIONAL_END_TAG_INLINE_ELEMENTS = tagSet('rp,rt');
+const BLOCK_ELEMENTS = tagSet(
+  'address,article,aside,blockquote,caption,center,del,details,dialog,dir,div,dl,figure,' +
+    'figcaption,footer,h1,h2,h3,h4,h5,h6,header,hgroup,hr,ins,main,map,menu,nav,ol,pre,section,' +
+    'summary,table,ul',
+);
+const INLINE_ELEMENTS = tagSet(
+  'a,abbr,acronym,audio,b,bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,' +
+    'mark,picture,q,ruby,rp,rt,s,samp,small,source,span,strike,strong,sub,sup,time,track,tt,u,' +
+    'var,video',
+);
+const VALID_ELEMENTS = new Set([
+  ...VOID_ELEMENTS,
+  ...OPTIONAL_END_TAG_BLOCK_ELEMENTS,
+  ...OPTIONAL_END_TAG_INLINE_ELEMENTS,
+  ...BLOCK_ELEMENTS,
+  ...INLINE_ELEMENTS,
+]);
+
+const URI_ATTRS = tagSet('background,cite,href,itemtype,longdesc,poster,src,xlink:href');
+const HTML_ATTRS = tagSet(
+  'abbr,accesskey,align,alt,autoplay,axis,bgcolor,border,cellpadding,cellspacing,class,clear,' +
+    'color,cols,colspan,compact,controls,coords,datetime,default,dir,download,face,headers,' +
+    'height,hidden,hreflang,hspace,ismap,itemscope,itemprop,kind,label,lang,language,loop,media,' +
+    'muted,nohref,nowrap,open,preload,rel,rev,role,rows,rowspan,rules,scope,scrolling,shape,size,' +
+    'sizes,span,srclang,srcset,start,summary,tabindex,target,title,translate,type,usemap,valign,' +
+    'value,vspace,width',
+);
+const ARIA_ATTRS = tagSet(
+  'aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,' +
+    'aria-colindex,aria-colspan,aria-controls,aria-current,aria-describedby,aria-details,' +
+    'aria-disabled,aria-dropeffect,aria-errormessage,aria-expanded,aria-flowto,aria-grabbed,' +
+    'aria-haspopup,aria-hidden,aria-invalid,aria-keyshortcuts,aria-label,aria-labelledby,' +
+    'aria-level,aria-live,aria-modal,aria-multiline,aria-multiselectable,aria-orientation,' +
+    'aria-owns,aria-placeholder,aria-posinset,aria-pressed,aria-readonly,aria-relevant,' +
+    'aria-required,aria-roledescription,aria-rowcount,aria-rowindex,aria-rowspan,aria-selected,' +
+    'aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext',
+);
+const VALID_ATTRS = new Set([...URI_ATTRS, ...HTML_ATTRS, ...ARIA_ATTRS]);
+
+/** Éléments invalides dont on saute aussi le CONTENU : leur texte n'est pas du texte. */
+const SKIP_CONTENT = tagSet('script,style,template');
+
+const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i;
+
+/** Une URL sûre passe telle quelle ; une autre est neutralisée, comme chez Angular. */
+export function sanitizeUrl(url: string): string {
+  return SAFE_URL_PATTERN.test(url) ? url : `unsafe:${url}`;
+}
+
+// --- `style`, réduit à ce que l'éditeur écrit ------------------------------------
+
+const LENGTH = String.raw`(?:0|-?\d+(?:\.\d+)?(?:px|em|rem|%))`;
+const LENGTHS = new RegExp(`^${LENGTH}(?:\\s+${LENGTH}){0,3}$`);
+
+/** Propriété autorisée → forme de valeur autorisée. Aucune ne laisse passer `url()`. */
+const STYLE_ALLOWLIST: Record<string, RegExp> = {
+  'text-align': /^(?:left|right|center|justify|start|end)$/,
+  margin: LENGTHS,
+  'margin-left': LENGTHS,
+  'margin-right': LENGTHS,
+  'margin-inline-start': LENGTHS,
+  padding: LENGTHS,
+  border: /^none$/,
+};
+
+/** Ne garde de `style` que les déclarations de la liste, ou rien. */
+export function sanitizeStyle(style: string): string {
+  const kept: string[] = [];
+  for (const declaration of style.split(';')) {
+    const colon = declaration.indexOf(':');
+    if (colon < 0) continue;
+    const property = declaration.slice(0, colon).trim().toLowerCase();
+    const value = declaration
+      .slice(colon + 1)
+      .trim()
+      .toLowerCase();
+    const pattern = STYLE_ALLOWLIST[property];
+    if (pattern && pattern.test(value)) kept.push(`${property}: ${value};`);
+  }
+  return kept.join(' ');
+}
+
+// --- Analyse inerte ----------------------------------------------------------------
+
+/**
+ * Analyse du HTML dans un document détaché : les scripts n'y tournent pas et
+ * les ressources ne s'y chargent pas.
+ */
+export function parseInert(html: string): HTMLElement {
+  return new DOMParser().parseFromString(html, 'text/html').body;
+}
+
+// --- Sérialisation filtrante (portage de `SanitizingHtmlSerializer`) ---------------
+
+const SURROGATE_PAIR = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+const NON_ALPHANUMERIC = /([^#-~ |!])/g;
+
+function encodeEntities(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(SURROGATE_PAIR, (match) => {
+      const hi = match.charCodeAt(0);
+      const low = match.charCodeAt(1);
+      return `&#${(hi - 0xd800) * 0x400 + (low - 0xdc00) + 0x10000};`;
+    })
+    .replace(NON_ALPHANUMERIC, (match) => `&#${match.charCodeAt(0)};`)
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+/** Un nœud dont les liens de parenté mentent (`<form>` écrasé par un champ nommé). */
+function clobbered(node: Node): Error {
+  return new Error(`[ui-editor] Nettoyage impossible : élément écrasé (${node.nodeName}).`);
+}
+
+function nextSibling(node: Node): Node | null {
+  const next = node.nextSibling;
+  if (next && node !== next.previousSibling) throw clobbered(next);
+  return next;
+}
+
+function firstChild(node: Node): Node | null {
+  const first = node.firstChild;
+  if (
+    first &&
+    (node.compareDocumentPosition(first) & Node.DOCUMENT_POSITION_CONTAINED_BY) !==
+      Node.DOCUMENT_POSITION_CONTAINED_BY
+  ) {
+    throw clobbered(first);
+  }
+  return first;
+}
+
+function nodeName(node: Node): string {
+  return typeof node.nodeName === 'string' ? node.nodeName.toLowerCase() : 'form';
+}
+
+function serialize(root: Node): string {
+  const buf: string[] = [];
+  const parents: Node[] = [];
+
+  const start = (el: Element): boolean => {
+    const tag = nodeName(el);
+    if (!VALID_ELEMENTS.has(tag)) return !SKIP_CONTENT.has(tag);
+    buf.push('<', tag);
+    for (const attr of Array.from(el.attributes)) {
+      const lower = attr.name.toLowerCase();
+      let value = attr.value;
+      if (lower === 'style') {
+        value = sanitizeStyle(value);
+        if (!value) continue;
+      } else if (!VALID_ATTRS.has(lower)) {
+        continue;
+      } else if (URI_ATTRS.has(lower)) {
+        value = sanitizeUrl(value);
+      }
+      buf.push(' ', attr.name, '="', encodeEntities(value), '"');
+    }
+    buf.push('>');
+    return true;
+  };
+
+  const end = (el: Element) => {
+    const tag = nodeName(el);
+    if (VALID_ELEMENTS.has(tag) && !VOID_ELEMENTS.has(tag)) buf.push('</', tag, '>');
+  };
+
+  let current: Node | null = root.firstChild;
+  while (current) {
+    let traverse = true;
+    if (current.nodeType === Node.ELEMENT_NODE) traverse = start(current as Element);
+    else if (current.nodeType === Node.TEXT_NODE) buf.push(encodeEntities(current.nodeValue ?? ''));
+
+    if (traverse && current.firstChild) {
+      parents.push(current);
+      current = firstChild(current);
+      continue;
+    }
+    while (current) {
+      if (current.nodeType === Node.ELEMENT_NODE) end(current as Element);
+      const next = nextSibling(current);
+      if (next) {
+        current = next;
+        break;
+      }
+      current = parents.pop() ?? null;
+    }
+  }
+  return buf.join('');
+}
+
+/**
+ * Le HTML d'une valeur, rendu sûr. Même contrat que le `DomSanitizer` d'Angular
+ * en contexte HTML, plus le `style` réduit décrit en tête de fichier.
+ *
+ * Une entrée instable (qui change encore après cinq réanalyses, signe d'une
+ * tentative de mutation) rend une chaîne vide plutôt que de lever : un champ
+ * de formulaire qui plante sur une valeur stockée serait un déni de service.
+ */
+export function sanitizeHtml(html: string | null | undefined): string {
+  if (!html) return '';
+  if (typeof DOMParser === 'undefined') return '';
+
+  let input = String(html);
+  let body = parseInert(input);
+  for (let attempts = 5; ; attempts--) {
+    const reparsed = body.innerHTML;
+    if (reparsed === input) break;
+    if (attempts === 0) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('[ui-editor] HTML instable après cinq analyses : valeur écartée.');
+      }
+      return '';
+    }
+    input = reparsed;
+    body = parseInert(input);
+  }
+
+  try {
+    return serialize(body);
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') console.warn(String(error));
+    return '';
+  }
+}
+
+/**
+ * Les nœuds d'un HTML DÉJÀ sûr, prêts à être insérés : c'est ce qui remplace
+ * l'écriture de `innerHTML`. Un nœud issu d'un autre document est adopté à
+ * l'insertion.
+ */
+export function htmlToNodes(safeHtml: string): Node[] {
+  return Array.from(parseInert(safeHtml).childNodes);
+}
diff --git a/packages/ui-kit-react/src/forms/ui-editor/ui-editor.mdx b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.mdx
new file mode 100644
index 0000000..57a0a19
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.mdx
@@ -0,0 +1,212 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
+import { ConfigTable } from '@sb/blocks/config-table';
+import * as EditorStories from './ui-editor.stories';
+
+<Meta of={EditorStories} />
+
+# ui-editor
+
+Éditeur de texte **riche**, bâti sur la coquille partagée
+[`ui-field`](?path=/docs/components-ui-forms-ui-field--docs) (libellé, boîte, aide) en mode
+multiligne : une barre d'outils configurable et une zone `contenteditable`.
+
+**Aucun moteur d'édition tiers.** La mise en forme passe par l'API d'édition native du
+navigateur, confinée dans `ui-editor-commands`, comme dans la version Angular : le kit reste
+à ses deux dépendances. Un moteur (Tiptap, Lexical) aurait pesé dix fois plus, et aurait
+écrit une autre forme de HTML que celle que les deux stacks partagent.
+
+La valeur est une **chaîne HTML**. Elle est nettoyée par `sanitizeHtml`, le portage du
+`DomSanitizer` d'Angular, avant tout affichage, et réduite à une courte liste de balises au
+collage. Pour une saisie multiligne **sans** mise en forme, voir
+[`ui-textarea`](?path=/docs/components-ui-forms-ui-textarea--docs).
+
+<Canvas of={EditorStories.WithValue} />
+
+## API
+
+<ArgTypes of={EditorStories} />
+
+## Barre d'outils
+
+`tools` liste les outils rendus, dans l'ordre ; `separator` trace un séparateur. Outils :
+`fontFamily`, `fontSize`, `bold`, `italic`, `underline`, `bulletList`, `orderedList`,
+`indent`, `outdent`, `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`, `textColor`,
+`highlightColor`, `link`, `codeBlock`, `clearFormat`. Pas de niveau de bloc : l'éditeur ne
+produit que des paragraphes.
+
+<Canvas of={EditorStories.MinimalToolbar} />
+
+<Canvas of={EditorStories.ToolbarBottom} />
+
+### Bloc de code
+
+<Canvas of={EditorStories.CodeBlock} />
+
+### Police et taille
+
+Les deux sont dans la barre par défaut. La police est fermée aux trois familles du système,
+la taille à l'échelle typographique, et chacune s'écrit en **classe** adossée à un jeton
+(`ui-editor-font-title`, `ui-editor-size-lg`) plutôt qu'en style : la valeur suit la marque
+et le mode sombre, et reste la même dans les deux stacks.
+
+<Canvas of={EditorStories.FontFamily} />
+
+<Canvas of={EditorStories.FontSize} />
+
+### Retrait
+
+<Canvas of={EditorStories.IndentOutdent} />
+
+### Alignement
+
+Le navigateur aligne par `style="text-align: …"`. Le nettoyage laisse passer ces déclarations,
+et seulement elles, avec le retrait : un paragraphe centré le reste quand la valeur revient du
+serveur.
+
+<Canvas of={EditorStories.TextAlign} />
+
+### Couleurs
+
+`textColor` et `highlightColor` ouvrent chacun un `ui-swatch-picker` ancré à leur bouton. La
+couleur choisie s'écrit elle aussi en classe (`ui-editor-color-red-700`), sur la palette du
+nuancier.
+
+<Canvas of={EditorStories.ColorPickers} />
+
+## Niveaux et états
+
+<Canvas of={EditorStories.Success} />
+
+<Canvas of={EditorStories.Disabled} />
+
+<Canvas of={EditorStories.ReadOnly} />
+
+## Compteur et limite
+
+`maxLength` et le compteur portent sur le **texte**, jamais sur le balisage. Une fois la
+limite atteinte, les suppressions et la mise en forme restent possibles : seules les
+insertions sont refusées.
+
+<Canvas of={EditorStories.CharacterCount} />
+
+## Formulaires
+
+Contrôlé par `value` et `onValueChange`, non contrôlé par `defaultValue`, comme tous les
+champs du kit.
+
+```tsx
+import { UiEditor } from '@4sh/ui-kit-react/ui-editor';
+
+const [description, setDescription] = useState('');
+
+<UiEditor
+  label="Description"
+  required
+  value={description}
+  onValueChange={setDescription}
+  errorText="Ce champ est requis."
+/>;
+```
+
+<Canvas of={EditorStories.Controlled} />
+
+<Canvas of={EditorStories.Required} />
+
+<Canvas of={EditorStories.FloatLabel} />
+
+## Sécurité
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Point</th>
+      <th>Mise en œuvre</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <strong>Valeur entrante</strong>
+      </td>
+      <td>
+        Nettoyée par `sanitizeHtml`, le portage du `DomSanitizer` d'Angular : mêmes listes
+        d'éléments et d'attributs, URL `javascript:` neutralisées, boucle contre les mutations
+        entre deux analyses. Le `style` est réduit à l'alignement et au retrait, sans aucune
+        `url()` possible.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Écriture dans la zone</strong>
+      </td>
+      <td>
+        Par des nœuds analysés dans un document détaché, jamais par `innerHTML`. Rien ne s'y
+        exécute, rien ne s'y charge avant l'insertion.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Collage</strong>
+      </td>
+      <td>
+        Réduit aux balises de l'éditeur, nettoyé, puis inséré par `insertHTML`, pour que Ctrl+Z
+        l'annule. C'est la seule exception du kit, inscrite au registre de{' '}
+        <code>docs/SECURITY-PRACTICES.md</code> et vérifiée par le lint.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>À l'affichage ailleurs</strong>
+      </td>
+      <td>
+        Une application qui rend la valeur hors de l'éditeur la repasse par `sanitizeHtml`,
+        exporté pour ça : le nettoyage protège l'éditeur, pas le reste de la page.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Accessibilité
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Point</th>
+      <th>Mise en œuvre</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <strong>Zone de saisie</strong>
+      </td>
+      <td>
+        <code>role="textbox"</code> et <code>aria-multiline</code>, nommée par le libellé ou{' '}
+        <code>aria-label</code> : un <code>&lt;label for&gt;</code> ne nomme pas une zone
+        éditable. <code>aria-required</code>, <code>aria-readonly</code>,{' '}
+        <code>aria-invalid</code> suivent l'état ; le message et le compteur la décrivent.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Barre d'outils</strong>
+      </td>
+      <td>
+        Motif <code>toolbar</code> : un seul arrêt de tabulation, les flèches, Début et Fin s'y
+        déplacent, Échap rend le focus à la zone. Les bascules portent{' '}
+        <code>aria-pressed</code>, les nuanciers <code>aria-haspopup</code> et{' '}
+        <code>aria-expanded</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Raccourcis</strong>
+      </td>
+      <td>Ctrl ou Cmd plus B, I, U, appliqués par le navigateur ; la barre suit leur état.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Theming
+
+<ConfigTable of="ui-editor" />
diff --git a/packages/ui-kit-react/src/forms/ui-editor/ui-editor.scss b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.scss
new file mode 100644
index 0000000..65b86e0
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.scss
@@ -0,0 +1,327 @@
+@use 'utils';
+
+// =====================================================================
+// ui-editor : projected parts only. The box/label/helper/states live in
+// `ui-field`; this file owns the toolbar, the editing area and the markup
+// the editor produces inside it.
+//
+// The rich content is created by the editing commands (`<p>`, `<ul>`,
+// `<b>`…), not by React, so it cannot carry classes: those rules use element
+// selectors, ALWAYS under `.ui-editor-content`. That keeps decision D5's
+// promise (nothing leaks outside the component) where a bare selector would
+// break it. The Angular `::ng-deep` has no equivalent to replace: without
+// encapsulation, a descendant selector already reaches the content.
+// =====================================================================
+
+// --- Frame ------------------------------------------------------------
+$radius: var(--ui-editor-radius, inherit); /// Rayon des coins de l'éditeur, aligné par défaut sur la boîte de champ.
+
+// --- Toolbar ----------------------------------------------------------
+$toolbar-gap: var(--ui-editor-toolbar-gap, var(--units-2xs));                             /// Espace entre deux outils.
+$toolbar-padding-x: var(--ui-editor-toolbar-padding-x, var(--units-xs));                  /// Inset horizontal de la barre d'outils.
+$toolbar-padding-y: var(--ui-editor-toolbar-padding-y, var(--units-2xs));                 /// Inset vertical de la barre d'outils.
+// `form.low.surface` is transparent in both modes : it cannot set the toolbar
+// apart from the field it sits in, which is the whole point of the bar.
+$toolbar-surface: var(--ui-editor-toolbar-surface, var(--global-background-muted));        /// Fond de la barre d'outils.
+$toolbar-stroke: var(--ui-editor-toolbar-stroke, var(--form-low-stroke-default));         /// Couleur du trait séparant la barre d'outils de la zone de saisie.
+$toolbar-stroke-width: var(--ui-editor-toolbar-stroke-width, #{utils.$control-stroke-width}); /// Épaisseur de ce trait.
+
+// `fontFamily`/`fontSize` render as `ui-select` (see `&-select`).
+$select-width: var(--ui-editor-select-width, 13ch); /// Largeur d'un sélecteur police/taille dans la barre.
+
+$separator-width: var(--ui-editor-separator-width, var(--stroke-sm));                      /// Épaisseur d'un séparateur d'outils.
+$separator-height: var(--ui-editor-separator-height, var(--size-typography-text-default)); /// Hauteur d'un séparateur d'outils.
+$separator-color: var(--ui-editor-separator-color, var(--form-low-stroke-default));        /// Couleur d'un séparateur d'outils.
+
+// --- Editing area -----------------------------------------------------
+$padding-x: var(--ui-editor-padding-x, #{utils.$form-field-padding-x});      /// Inset horizontal de la zone de saisie.
+$padding-y: var(--ui-editor-padding-y, #{utils.$form-textarea-padding-y});   /// Inset vertical de la zone de saisie.
+$padding-y-small: var(--ui-editor-padding-y-small, #{utils.$form-textarea-padding-y-small}); /// Inset vertical de la zone de saisie, variante `small`.
+$line-height: var(--ui-editor-line-height, 1.5);                             /// Interlignage du texte saisi.
+$font-size: var(--ui-editor-font-size, var(--size-typography-text-default));  /// Taille de police du texte saisi.
+$font-size-small: var(--ui-editor-font-size-small, var(--size-typography-text-md)); /// Taille de police du texte saisi, variante `small`.
+
+// `--_rows` is set inline from the `minRows` input; the hook wins over it so a
+// theme can pin an absolute height regardless of the requested line count.
+$min-height: var(--ui-editor-min-height, calc(var(--_rows, 4) * #{$line-height} * 1em)); /// Hauteur minimale de la zone de saisie (par défaut `minRows` lignes).
+$max-height: var(--ui-editor-max-height, none);                                          /// Hauteur au-delà de laquelle la zone défile plutôt que de grandir.
+
+$placeholder-color: var(--ui-editor-placeholder-color, var(--form-low-content-default)); /// Couleur du texte indicatif.
+
+// --- Rich content -----------------------------------------------------
+$block-gap: var(--ui-editor-block-gap, var(--units-sm));                          /// Espace entre deux paragraphes ou blocs.
+$list-inset: var(--ui-editor-list-padding-inline-start, var(--units-xl));         /// Retrait des puces et numéros de liste.
+$list-item-gap: var(--ui-editor-list-item-gap, var(--units-2xs));                 /// Espace entre deux éléments de liste.
+$bold-weight: var(--ui-editor-bold-weight, var(--weight-bold));                   /// Graisse appliquée par l'outil « gras ».
+$link-color: var(--ui-editor-link-color, var(--global-text-brand));               /// Couleur d'un lien inséré.
+$link-decoration: var(--ui-editor-link-text-decoration, underline);               /// Décoration d'un lien inséré.
+
+$code-padding-x: var(--ui-editor-code-padding-x, var(--units-md));                    /// Inset horizontal d'un bloc de code.
+$code-padding-y: var(--ui-editor-code-padding-y, var(--units-sm));                    /// Inset vertical d'un bloc de code.
+$code-radius: var(--ui-editor-code-radius, var(--radius-xs));                         /// Rayon des coins d'un bloc de code.
+$code-surface: var(--ui-editor-code-surface, var(--global-background-muted));         /// Fond d'un bloc de code.
+$code-color: var(--ui-editor-code-color, var(--global-text-default));                 /// Couleur du texte d'un bloc de code.
+$code-font-size: var(--ui-editor-code-font-size, var(--size-typography-text-md));     /// Taille de police d'un bloc de code.
+
+$heading-weight: var(--ui-editor-heading-weight, var(--weight-bold));                    /// Graisse des titres.
+$heading-line-height: var(--ui-editor-heading-line-height, 1.25);                        /// Interlignage des titres.
+$heading-1-font-size: var(--ui-editor-heading-1-font-size, var(--size-typography-title-lg)); /// Taille de police du titre 1.
+$heading-2-font-size: var(--ui-editor-heading-2-font-size, var(--size-typography-title-md)); /// Taille de police du titre 2.
+$heading-3-font-size: var(--ui-editor-heading-3-font-size, var(--size-typography-title-sm)); /// Taille de police du titre 3.
+
+$size-sm: var(--ui-editor-size-sm-font-size, var(--size-typography-text-sm));           /// Taille de police du texte « Petit ».
+$size-default: var(--ui-editor-size-default-font-size, var(--size-typography-text-default)); /// Taille de police du texte « Normal ».
+$size-lg: var(--ui-editor-size-lg-font-size, var(--size-typography-text-lg));           /// Taille de police du texte « Grand ».
+$size-xl: var(--ui-editor-size-xl-font-size, var(--size-typography-text-xl));           /// Taille de police du texte « Très grand ».
+
+// --- Counter ----------------------------------------------------------
+$count-font-size: var(--ui-editor-count-font-size, var(--size-typography-text-md));             /// Taille de police du compteur de caractères.
+$count-font-size-small: var(--ui-editor-count-font-size-small, var(--size-typography-text-sm)); /// Taille de police du compteur de caractères, variante `small`.
+
+// --- Toolbar color indicator -------------------------------------------
+$swatch-indicator-height: var(--ui-editor-swatch-indicator-height, var(--stroke-lg)); /// Épaisseur du liseré indiquant la couleur active sous les outils couleur/surlignage.
+$swatch-indicator-offset-x: var(--ui-editor-swatch-indicator-offset-x, var(--units-2xs)); /// Décalage horizontal du liseré, de part et d'autre de l'icône.
+
+// --- Text color / highlight color palette --------------------------------
+// Mirrors `DEFAULT_SWATCH_PALETTE` (ui-swatch-picker) and `EDITOR_COLORS`/
+// `EDITOR_HIGHLIGHTS` (ui-editor-commands): same hues × shades grid, so the
+// class names generated here exactly match the ones written into the value.
+$editor-color-hues: 'primary', 'secondary', 'green', 'orange', 'red', 'slate', 'grey';
+$editor-color-steps: 900, 700, 500, 300, 100;
+
+.ui-editor {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  // Keeps the toolbar's own surface inside the field's rounded corners.
+  border-radius: $radius;
+  overflow: hidden;
+
+  // --- Toolbar --------------------------------------------------------
+  &-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $toolbar-gap;
+    flex-shrink: 0;
+    padding: $toolbar-padding-y $toolbar-padding-x;
+    background-color: $toolbar-surface;
+    border-block-end: $toolbar-stroke-width solid $toolbar-stroke;
+
+    &._bottom {
+      border-block-end: none;
+      border-block-start: $toolbar-stroke-width solid $toolbar-stroke;
+    }
+
+    &-separator {
+      flex-shrink: 0;
+      inline-size: $separator-width;
+      block-size: $separator-height;
+      background-color: $separator-color;
+    }
+  }
+
+  // `fontFamily`/`fontSize` render as `ui-select`. No host element here:
+  // `.ui-editor-select` IS the `.ui-select` root, hence the toolbar prefix,
+  // which makes these rules win over `ui-select`'s own whatever the order in
+  // which the two stylesheets load.
+  &-toolbar &-select {
+    display: inline-flex;
+    flex-shrink: 0;
+    // Fixed, and the same for every dropdown: sized on the widest label it
+    // has to fit, so the toolbar keeps its layout when a longer value is
+    // picked instead of shifting every tool that follows.
+    min-inline-size: $select-width;
+    // Public hook: removes the field box's border so the dropdown blends
+    // into the toolbar surface instead of looking like its own form field.
+    --ui-field-stroke-width: 0;
+
+    // The Angular `.ui-select { inline-size: 100% }` stretched the select in
+    // its host; here the select IS the host, so it is its field that must
+    // stretch. Without it the box hugs the label and the chevron sticks to it.
+    > .ui-field {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+
+    // No public hook for the box's fill (it is not meant to be dropped
+    // independently of `level`/state on an ordinary field): scoped here to
+    // this toolbar usage only, every other `ui-select` in the kit is untouched.
+    .ui-field-box {
+      background: transparent;
+      @include utils.control-transition(background-color);
+    }
+    .ui-field-box:hover { background-color: var(--ui-editor-toolbar-select-surface-hover, var(--form-low-surface-hover)); } /// Fond d'un sélecteur de la barre d'outils au survol.
+  }
+
+  // `textColor`/`highlightColor` triggers: a liseré under the icon shows the
+  // color active at the caret. `--ui-editor-swatch-indicator-color` is set
+  // inline from the component (`null` -> unset custom property -> transparent
+  // bar, same footprint whether a color is active or not).
+  &-tool._colorTool {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-inline: $swatch-indicator-offset-x;
+      inset-block-end: 0;
+      block-size: $swatch-indicator-height;
+      border-radius: $swatch-indicator-height;
+      // No `///`: purely internal plumbing set by the component itself
+      // (`[style.--ui-editor-swatch-indicator-color]`), not a public hook a
+      // theme is meant to override directly.
+      background-color: var(--ui-editor-swatch-indicator-color, transparent);
+    }
+  }
+
+  // --- Editing area ---------------------------------------------------
+  &-area {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  &-content {
+    @include utils.field-native-input(false);
+    box-sizing: border-box;
+    width: 100%;
+    min-height: $min-height;
+    max-height: $max-height;
+    padding: $padding-y $padding-x;
+    overflow-y: auto;
+    line-height: $line-height;
+    font-size: $font-size;
+    // The caret must stay inside the box even on a long unbroken paste.
+    overflow-wrap: break-word;
+
+    &._small {
+      padding-block: $padding-y-small;
+      font-size: $font-size-small;
+    }
+
+    // The field box already draws the focus ring around the whole editor.
+    &:focus,
+    &:focus-visible { outline: none; }
+
+    &[contenteditable='false'] { cursor: default; }
+  }
+
+  &-placeholder {
+    position: absolute;
+    inset-block-start: $padding-y;
+    inset-inline-start: $padding-x;
+    line-height: $line-height;
+    font-family: var(--ui-editor-placeholder-font-family, var(--fontfamily-base)); /// Famille typographique du texte indicatif.
+    font-size: $font-size;
+    color: $placeholder-color;
+    pointer-events: none;
+    user-select: none;
+  }
+  &._small &-placeholder {
+    inset-block-start: $padding-y-small;
+    font-size: $font-size-small;
+  }
+
+  // --- Content produced by the editing commands -----------------------
+  // Generated outside React, so element selectors, scoped to the content.
+  &-content {
+    p { margin-block: 0 $block-gap; }
+    p:last-child { margin-block-end: 0; }
+
+    ul,
+    ol {
+      margin-block: 0 $block-gap;
+      padding-inline-start: $list-inset;
+    }
+    ul:last-child,
+    ol:last-child { margin-block-end: 0; }
+
+    li + li { margin-block-start: $list-item-gap; }
+
+    b,
+    strong { font-weight: $bold-weight; }
+
+    a {
+      color: $link-color;
+      text-decoration: $link-decoration;
+    }
+
+    pre {
+      margin-block: 0 $block-gap;
+      padding: $code-padding-y $code-padding-x;
+      border-radius: $code-radius;
+      background-color: $code-surface;
+      color: $code-color;
+      font-family: var(--ui-editor-code-font-family, var(--fontfamily-monospace)); /// Famille typographique des blocs de code.
+      font-size: $code-font-size;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+    }
+    pre:last-child { margin-block-end: 0; }
+
+    code { font-family: var(--ui-editor-code-font-family, var(--fontfamily-monospace)); }
+
+    // Headings carry document structure, so they keep the title face and scale.
+    h1,
+    h2,
+    h3 {
+      margin-block: 0 $block-gap;
+      font-family: var(--ui-editor-heading-font-family, var(--fontfamily-title)); /// Famille typographique des titres.
+      font-weight: $heading-weight;
+      line-height: $heading-line-height;
+    }
+    h1:last-child,
+    h2:last-child,
+    h3:last-child { margin-block-end: 0; }
+
+    h1 { font-size: $heading-1-font-size; }
+    h2 { font-size: $heading-2-font-size; }
+    h3 { font-size: $heading-3-font-size; }
+
+    // Type families the font picker applies, bound to the typography tokens.
+    // Pas de hook sur ces trois-là : la classe EST le choix de police fait par
+    // l'utilisateur dans la barre d'outils. Les rendre surchargeables rendrait
+    // le sélecteur de police menteur.
+    .ui-editor-font-base { font-family: var(--fontfamily-base); }
+    .ui-editor-font-title { font-family: var(--fontfamily-title); }
+    .ui-editor-font-monospace { font-family: var(--fontfamily-monospace); }
+
+    // Text sizes, as steps on the typography scale rather than raw values.
+    .ui-editor-size-sm { font-size: $size-sm; }
+    .ui-editor-size-default { font-size: $size-default; }
+    .ui-editor-size-lg { font-size: $size-lg; }
+    .ui-editor-size-xl { font-size: $size-xl; }
+
+    // Text color / highlight color, one class pair per swatch of the default
+    // palette (see `$editor-color-hues`/`$editor-color-steps` above).
+    @each $hue in $editor-color-hues {
+      @each $step in $editor-color-steps {
+        .ui-editor-color-#{$hue}-#{$step} { color: var(--primitives-#{$hue}-#{$step}); }
+        .ui-editor-highlight-#{$hue}-#{$step} {
+          background-color: var(--primitives-#{$hue}-#{$step});
+        }
+      }
+    }
+    .ui-editor-color-black { color: var(--primitives-black-base); }
+    .ui-editor-color-white { color: var(--primitives-white-base); }
+    .ui-editor-highlight-black { background-color: var(--primitives-black-base); }
+    .ui-editor-highlight-white { background-color: var(--primitives-white-base); }
+  }
+}
+
+// --- Character counter (projected into the field footer) --------------
+.ui-editor-count {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-family: var(--ui-editor-count-font-family, var(--fontfamily-base)); /// Famille typographique du compteur.
+  font-size: $count-font-size;
+  color: var(--ui-editor-count-color, var(--form-low-content-default)); /// Couleur du compteur de caractères.
+  user-select: none;
+
+  &._small { font-size: $count-font-size-small; }
+  &._over { color: var(--ui-editor-count-color-over, var(--form-error-content-default)); }        /// Couleur du compteur une fois la limite dépassée.
+  &._disabled { color: var(--ui-editor-count-color-disabled, var(--form-high-content-disabled)); } /// Couleur du compteur, champ désactivé.
+}
diff --git a/packages/ui-kit-react/src/forms/ui-editor/ui-editor.stories.tsx b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.stories.tsx
new file mode 100644
index 0000000..764b4eb
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.stories.tsx
@@ -0,0 +1,274 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UiEditor } from './ui-editor';
+import { DEFAULT_EDITOR_TOOLS } from './ui-editor-commands';
+
+const meta: Meta<typeof UiEditor> = {
+  title: 'Components/ui/forms/ui-editor',
+  component: UiEditor,
+  args: {
+    label: 'Description',
+    placeholder: 'Rédigez votre texte…',
+    tools: [...DEFAULT_EDITOR_TOOLS],
+    minRows: 4,
+    showCount: false,
+    toolbarPosition: 'top',
+    size: 'default',
+    level: 'default',
+  },
+  argTypes: {
+    label: { control: 'text' },
+    helperText: { control: 'text' },
+    errorText: { control: 'text' },
+    placeholder: { control: 'text' },
+    tools: { control: 'object' },
+    minRows: { control: 'number' },
+    maxLength: { control: 'number' },
+    showCount: { control: 'boolean' },
+    toolbarPosition: { control: 'inline-radio', options: ['top', 'bottom'] },
+    size: { control: 'inline-radio', options: ['default', 'small'] },
+    level: { control: 'inline-radio', options: ['default', 'success', 'error'] },
+    floatLabel: { control: 'inline-radio', options: [undefined, 'over', 'in', 'on'] },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+    invalid: { control: 'boolean' },
+    value: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 750, maxWidth: '92vw' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/GZww5hdUA49LB8XWeWP6tl/-Projet----UI-Kit?node-id=3691-39299',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UiEditor>;
+
+const RICH =
+  '<p>Un paragraphe avec du <strong>gras</strong>, de l’<em>italique</em> et un <a href="https://example.com">lien</a>.</p>' +
+  '<ul><li>Premier point</li><li>Second point</li></ul>';
+
+export const Default: Story = {};
+
+export const WithValue: Story = {
+  args: { defaultValue: RICH, helperText: 'Le contenu est stocké en HTML.' },
+};
+
+export const WithHelper: Story = {
+  args: {
+    label: 'Commentaire',
+    placeholder: 'Votre avis…',
+    helperText: 'Mise en forme simple : gras, italique, listes, liens.',
+  },
+};
+
+/** La barre est configurable : seuls les outils listés sont rendus. */
+export const MinimalToolbar: Story = {
+  args: {
+    label: 'Note',
+    tools: ['bold', 'italic'],
+    defaultValue: '<p>Barre réduite au gras et à l’italique.</p>',
+  },
+};
+
+/**
+ * `codeBlock` bascule le bloc sous le curseur entre `<pre>` et paragraphe. Pas de
+ * coloration syntaxique : elle imposerait une dépendance tierce.
+ */
+export const CodeBlock: Story = {
+  args: {
+    label: 'Documentation',
+    defaultValue: '<p>Un exemple :</p><pre>pnpm kit:build</pre><p>et la suite.</p>',
+  },
+};
+
+/**
+ * `fontFamily` et `fontSize` sont dans la barre par défaut. La police est fermée
+ * aux trois familles du système, la taille à l'échelle typographique ; chacune
+ * s'écrit en classe, adossée à un jeton. La liste des polices affiche le nom
+ * réel de chaque famille, lu sur son jeton.
+ */
+export const FontFamily: Story = {
+  args: {
+    label: 'Contenu',
+    defaultValue:
+      '<p><span class="ui-editor-font-title">Une accroche en police de titre</span></p>' +
+      '<p>Un paragraphe en police standard.</p>' +
+      '<p><span class="ui-editor-font-monospace">const x = 1;</span></p>',
+  },
+};
+
+/** Les quatre tailles de l'échelle typographique. */
+export const FontSize: Story = {
+  args: {
+    label: 'Contenu',
+    defaultValue:
+      '<p><span class="ui-editor-size-xl">Très grand</span>, ' +
+      '<span class="ui-editor-size-lg">grand</span>, normal, ' +
+      '<span class="ui-editor-size-sm">petit</span>.</p>',
+  },
+};
+
+/** `indent` et `outdent` ne sont pas dans la barre par défaut : on les ajoute par `tools`. */
+export const IndentOutdent: Story = {
+  args: {
+    label: 'Plan',
+    tools: ['bulletList', 'orderedList', 'separator', 'indent', 'outdent'],
+    defaultValue:
+      '<ul><li>Premier point</li><li>Second point<ul><li>Sous-point</li></ul></li></ul>',
+  },
+};
+
+/**
+ * Les quatre alignements sont dans la barre par défaut, exclusifs par
+ * construction du navigateur. Le navigateur les écrit en `style="text-align: …"`,
+ * que le nettoyage laisse passer : un paragraphe centré le reste au rechargement.
+ */
+export const TextAlign: Story = {
+  args: {
+    label: 'Contenu',
+    defaultValue:
+      '<p style="text-align: center;">Centré.</p>' +
+      '<p style="text-align: right;">Aligné à droite.</p>' +
+      '<p style="text-align: justify;">Justifié : ce paragraphe est assez long pour que la justification s’y voie clairement sur plusieurs lignes.</p>',
+  },
+};
+
+/**
+ * `textColor` et `highlightColor` ne sont pas dans la barre par défaut. Chacun
+ * ouvre un `ui-swatch-picker` ancré à son bouton, qui montre un liseré de la
+ * couleur active sous l'icône. La palette est celle du nuancier, pour que ses
+ * pastilles et les classes écrites restent le même jeu de jetons.
+ */
+export const ColorPickers: Story = {
+  args: {
+    label: 'Contenu',
+    tools: ['bold', 'italic', 'separator', 'textColor', 'highlightColor'],
+    // red-700 et non red-500 : le texte de démonstration doit rester contrasté (axe).
+    defaultValue:
+      '<p><span class="ui-editor-color-red-700">Texte en rouge</span>, ' +
+      '<span class="ui-editor-highlight-orange-100">surligné en orange clair</span> ' +
+      'et du texte normal.</p>',
+  },
+};
+
+export const ToolbarBottom: Story = {
+  args: {
+    label: 'Message',
+    toolbarPosition: 'bottom',
+    defaultValue: '<p>La barre d’outils est sous la zone de saisie.</p>',
+  },
+};
+
+export const Small: Story = {
+  args: { label: 'Compact', size: 'small', minRows: 3, defaultValue: '<p>Variante compacte.</p>' },
+};
+
+export const Success: Story = {
+  args: {
+    label: 'Bio',
+    level: 'success',
+    helperText: 'Parfait.',
+    defaultValue: '<p>Contenu validé.</p>',
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, defaultValue: RICH },
+};
+
+export const ReadOnly: Story = {
+  args: { readOnly: true, defaultValue: RICH },
+};
+
+/** Le compteur mesure le **texte**, jamais le balisage. */
+export const CharacterCount: Story = {
+  args: {
+    label: 'Commentaire',
+    placeholder: '280 caractères max',
+    maxLength: 280,
+    showCount: true,
+    defaultValue: '<p>Un court message.</p>',
+  },
+};
+
+/** Un champ requis, marqué en erreur une fois quitté vide. */
+function RequiredDemo() {
+  const [value, setValue] = useState('');
+  const [touched, setTouched] = useState(false);
+  return (
+    <UiEditor
+      label="Description"
+      required
+      value={value}
+      onValueChange={setValue}
+      onBlur={() => setTouched(true)}
+      invalid={touched && !value}
+      helperText="Champ obligatoire."
+      errorText="Ce champ est requis."
+    />
+  );
+}
+
+export const Required: Story = {
+  render: () => <RequiredDemo />,
+};
+
+/** Contrôlé : la valeur vit chez l'appelant, et c'est du HTML. */
+function ControlledDemo() {
+  const [value, setValue] = useState(RICH);
+  return (
+    <div style={{ display: 'grid', gap: 12 }}>
+      <UiEditor
+        label="Description"
+        placeholder="Rédigez votre texte…"
+        value={value}
+        onValueChange={setValue}
+      />
+      <pre
+        style={{
+          margin: 0,
+          padding: 12,
+          whiteSpace: 'pre-wrap',
+          fontSize: 12,
+          borderRadius: 'var(--radius-sm)',
+          background: 'var(--global-background-muted)',
+          color: 'var(--global-text-default)',
+        }}
+      >
+        {value || '(vide)'}
+      </pre>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledDemo />,
+};
+
+export const FloatLabel: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 320px)',
+        gap: 20,
+        alignItems: 'start',
+      }}
+    >
+      <UiEditor floatLabel="on" label="Description" minRows={3} />
+      <UiEditor floatLabel="on" label="Description" minRows={3} defaultValue={RICH} />
+    </div>
+  ),
+};
diff --git a/packages/ui-kit-react/src/forms/ui-editor/ui-editor.test.tsx b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.test.tsx
new file mode 100644
index 0000000..f8c7738
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.test.tsx
@@ -0,0 +1,399 @@
+import { useState } from 'react';
+import { userEvent } from 'vitest/browser';
+import { afterEach, expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { UiEditor, type UiEditorProps } from './ui-editor';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+function Host(props: Partial<UiEditorProps>) {
+  return (
+    <div style={{ width: 720 }}>
+      <UiEditor label="Description" {...props} />
+    </div>
+  );
+}
+
+const area = (root: ParentNode) => root.querySelector<HTMLDivElement>('.ui-editor-content')!;
+const tick = () => new Promise((r) => requestAnimationFrame(() => r(null)));
+
+/** Sélectionne tout le contenu de la zone, comme un Ctrl+A. */
+function selectAll(el: HTMLElement) {
+  el.focus();
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  const selection = document.getSelection()!;
+  selection.removeAllRanges();
+  selection.addRange(range);
+  el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+}
+
+// --- Champ ------------------------------------------------------------------------
+
+test('la zone est un textbox multiligne, nommé par son libellé', async () => {
+  const screen = await render(<Host />);
+  const box = screen.getByRole('textbox', { name: 'Description' });
+
+  await expect.element(box).toHaveAttribute('aria-multiline', 'true');
+  await expect.element(box).toHaveAttribute('contenteditable', 'true');
+  await expect.element(box).toHaveAttribute('tabindex', '0');
+});
+
+test('la valeur de départ est rendue, nettoyée', async () => {
+  const screen = await render(
+    <Host
+      defaultValue={
+        '<p>Du <strong>gras</strong></p><img src="x" onerror="window.__pwned=1"><a href="javascript:alert(1)">l</a>'
+      }
+    />,
+  );
+  const el = area(screen.container);
+
+  expect(el.querySelector('strong')).toHaveTextContent('gras');
+  expect(el.querySelector('img')!.hasAttribute('onerror')).toBe(false);
+  expect(el.querySelector('a')!.getAttribute('href')).toBe('unsafe:javascript:alert(1)');
+  await tick();
+  expect((window as unknown as { __pwned?: number }).__pwned).toBeUndefined();
+});
+
+test('la frappe notifie le HTML, et le compteur compte le texte seul', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<Host showCount maxLength={200} onValueChange={onValueChange} />);
+  const box = screen.getByRole('textbox', { name: 'Description' });
+
+  await box.click();
+  await userEvent.keyboard('Bonjour');
+
+  await expect.poll(() => onValueChange.mock.lastCall?.[0]).toContain('Bonjour');
+  const count = screen.container.querySelector('.ui-editor-count')!;
+  expect(count.textContent).toBe('7 / 200');
+  expect(box.element().getAttribute('aria-describedby')).toContain(count.id);
+});
+
+test('le texte indicatif disparaît dès qu’il y a du texte', async () => {
+  const screen = await render(<Host placeholder="Rédigez votre texte…" />);
+  expect(screen.container.querySelector('.ui-editor-placeholder')).toHaveTextContent(
+    'Rédigez votre texte…',
+  );
+
+  await screen.getByRole('textbox').click();
+  await userEvent.keyboard('a');
+
+  await expect.poll(() => screen.container.querySelector('.ui-editor-placeholder')).toBeNull();
+});
+
+test("contrôlé : l'écho de la saisie ne réécrit pas le DOM, une valeur extérieure si", async () => {
+  function Demo() {
+    const [value, setValue] = useState('<p>Début</p>');
+    return (
+      <>
+        <Host value={value} onValueChange={setValue} />
+        <button type="button" onClick={() => setValue('<p>Remplacé</p>')}>
+          Remplacer
+        </button>
+      </>
+    );
+  }
+  const screen = await render(<Demo />);
+  const el = area(screen.container);
+  const paragraph = el.querySelector('p')!;
+
+  // Écho : le paragraphe d'origine est toujours le même nœud, donc le curseur tient.
+  const range = document.createRange();
+  range.setStart(paragraph.firstChild!, 5);
+  range.collapse(true);
+  el.focus();
+  document.getSelection()!.removeAllRanges();
+  document.getSelection()!.addRange(range);
+  await userEvent.keyboard(' et suite');
+  await expect.poll(() => el.textContent).toBe('Début et suite');
+  expect(el.querySelector('p')).toBe(paragraph);
+
+  await screen.getByRole('button', { name: 'Remplacer' }).click();
+  await expect.poll(() => el.innerHTML).toBe('<p>Remplacé</p>');
+});
+
+// --- Outils -----------------------------------------------------------------------
+
+test('Gras met en gras la sélection et reflète son état', async () => {
+  const onValueChange = vi.fn();
+  const onSelectionChange = vi.fn();
+  const screen = await render(
+    <Host
+      defaultValue="<p>Bonjour</p>"
+      onValueChange={onValueChange}
+      onSelectionChange={onSelectionChange}
+    />,
+  );
+  const bold = screen.getByRole('button', { name: 'Gras' });
+  await expect.element(bold).toHaveAttribute('aria-pressed', 'false');
+
+  selectAll(area(screen.container));
+  await bold.click();
+
+  await expect
+    .poll(() => area(screen.container).querySelector('b, strong')?.textContent)
+    .toBe('Bonjour');
+  await expect.element(bold).toHaveAttribute('aria-pressed', 'true');
+  expect(onValueChange.mock.lastCall![0]).toMatch(/<(b|strong)>Bonjour<\/(b|strong)>/);
+  expect(onSelectionChange).toHaveBeenCalledWith(expect.objectContaining({ bold: true }));
+});
+
+test('la police et la taille deviennent des classes adossées aux jetons', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<Host defaultValue="<p>Texte</p>" onValueChange={onValueChange} />);
+
+  selectAll(area(screen.container));
+  await screen.getByRole('combobox', { name: 'Police' }).click();
+  // Les options portent le nom réel de chaque famille : la deuxième est `title`.
+  await screen.getByRole('option').nth(1).click();
+
+  await expect
+    .poll(() => area(screen.container).querySelector('.ui-editor-font-title'))
+    .not.toBeNull();
+  expect(area(screen.container).querySelector('font')).toBeNull();
+
+  selectAll(area(screen.container));
+  await screen.getByRole('combobox', { name: 'Taille du texte' }).click();
+  await screen.getByRole('option', { name: 'Grand' }).click();
+
+  await expect
+    .poll(() => area(screen.container).querySelector('.ui-editor-size-lg'))
+    .not.toBeNull();
+  expect(onValueChange.mock.lastCall![0]).toContain('ui-editor-size-lg');
+});
+
+test('les nuanciers posent une classe de couleur, et « aucune couleur » la retire', async () => {
+  const screen = await render(
+    <Host
+      defaultValue="<p>Texte</p>"
+      tools={['bold', 'separator', 'textColor', 'highlightColor']}
+    />,
+  );
+
+  selectAll(area(screen.container));
+  const couleur = screen.getByRole('button', { name: 'Couleur du texte' });
+  await expect.element(couleur).toHaveAttribute('aria-haspopup', 'listbox');
+  await couleur.click();
+  await expect.element(couleur).toHaveAttribute('aria-expanded', 'true');
+  await screen.container.ownerDocument
+    .querySelector<HTMLElement>('.ui-swatch-picker [data-key="red-700"]')!
+    .click();
+
+  await expect
+    .poll(() => area(screen.container).querySelector('.ui-editor-color-red-700'))
+    .not.toBeNull();
+  expect(area(screen.container).querySelector('font')).toBeNull();
+
+  selectAll(area(screen.container));
+  await screen.getByRole('button', { name: 'Couleur de surlignage' }).click();
+  const surligneur = [
+    ...document.querySelectorAll<HTMLElement>('.ui-swatch-picker [data-key="green-100"]'),
+  ].at(-1)!;
+  surligneur.click();
+  await expect
+    .poll(() => area(screen.container).querySelector('.ui-editor-highlight-green-100'))
+    .not.toBeNull();
+  expect(area(screen.container).querySelector('[style]')).toBeNull();
+});
+
+test('recolorer un paragraphe recolore aussi le mot qui avait déjà une couleur', async () => {
+  const screen = await render(
+    <Host
+      defaultValue={'<p><span class="ui-editor-color-red-700">rouge</span> et normal</p>'}
+      tools={['textColor']}
+    />,
+  );
+
+  selectAll(area(screen.container));
+  await screen.getByRole('button', { name: 'Couleur du texte' }).click();
+  document.querySelector<HTMLElement>('.ui-swatch-picker [data-key="green-700"]')!.click();
+
+  await expect
+    .poll(() => area(screen.container).querySelector('.ui-editor-color-green-700'))
+    .not.toBeNull();
+  // La classe rouge, plus proche du texte, aurait gagné sur la verte.
+  expect(area(screen.container).querySelector('.ui-editor-color-red-700')).toBeNull();
+  expect(area(screen.container).querySelector('.ui-editor-color-green-700')).toHaveTextContent(
+    'rouge et normal',
+  );
+});
+
+test('après une police, la sélection reste : une seconde mise en forme suit sans resélectionner', async () => {
+  const screen = await render(<Host defaultValue="<p>Texte</p>" />);
+
+  selectAll(area(screen.container));
+  await screen.getByRole('combobox', { name: 'Taille du texte' }).click();
+  await screen.getByRole('option', { name: 'Grand' }).click();
+  await expect
+    .poll(() => area(screen.container).querySelector('.ui-editor-size-lg'))
+    .not.toBeNull();
+
+  expect(document.getSelection()!.toString()).toBe('Texte');
+  await screen.getByRole('button', { name: 'Gras' }).click();
+  await expect
+    .poll(() => area(screen.container).querySelector('b, strong')?.textContent)
+    .toBe('Texte');
+});
+
+test("l'alignement s'écrit en style, et survit à un aller-retour par la valeur", async () => {
+  function Demo() {
+    const [value, setValue] = useState('<p>Centré</p>');
+    const [stored, setStored] = useState('');
+    return (
+      <>
+        <Host value={value} onValueChange={setValue} />
+        <button type="button" onClick={() => setStored(value)}>
+          Enregistrer
+        </button>
+        <button type="button" onClick={() => setValue('<p>autre</p>')}>
+          Vider
+        </button>
+        <button type="button" onClick={() => setValue(stored)}>
+          Recharger
+        </button>
+      </>
+    );
+  }
+  const screen = await render(<Demo />);
+
+  selectAll(area(screen.container));
+  await screen.getByRole('button', { name: 'Centrer' }).click();
+  await expect
+    .poll(() => area(screen.container).querySelector('p')?.style.textAlign)
+    .toBe('center');
+
+  await screen.getByRole('button', { name: 'Enregistrer' }).click();
+  await screen.getByRole('button', { name: 'Vider' }).click();
+  await expect.poll(() => area(screen.container).textContent).toBe('autre');
+  await screen.getByRole('button', { name: 'Recharger' }).click();
+
+  await expect
+    .poll(() => area(screen.container).querySelector('p')?.style.textAlign)
+    .toBe('center');
+});
+
+test('Bloc de code bascule le paragraphe en <pre>, et le lien passe par l’invite', async () => {
+  vi.spyOn(window, 'prompt').mockReturnValue('https://example.org');
+  const screen = await render(<Host defaultValue="<p>code</p>" />);
+
+  selectAll(area(screen.container));
+  await screen.getByRole('button', { name: 'Bloc de code' }).click();
+  await expect.poll(() => area(screen.container).querySelector('pre')?.textContent).toBe('code');
+
+  selectAll(area(screen.container));
+  await screen.getByRole('button', { name: 'Lien' }).click();
+  await expect
+    .poll(() => area(screen.container).querySelector('a')?.getAttribute('href'))
+    .toBe('https://example.org');
+});
+
+// --- Collage et limite --------------------------------------------------------------
+
+test('le collage est ramené aux balises de l’éditeur, sans rien d’exécutable', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<Host onValueChange={onValueChange} />);
+  const el = area(screen.container);
+  el.focus();
+
+  const data = new DataTransfer();
+  data.setData(
+    'text/html',
+    '<h4 style="color:red" onclick="alert(1)">Titre</h4><p class="MsoNormal">Du <b data-x="1">gras</b></p><script>window.__pwned=1</script><table><tr><td>cellule</td></tr></table>',
+  );
+  el.dispatchEvent(
+    new ClipboardEvent('paste', { clipboardData: data, bubbles: true, cancelable: true }),
+  );
+
+  await expect.poll(() => onValueChange.mock.lastCall?.[0]).toBeTruthy();
+  expect(el.querySelector('script, table, h4, [onclick], [style], .MsoNormal')).toBeNull();
+  expect(el.querySelector('b')).toHaveTextContent('gras');
+  expect(el.textContent).toContain('cellule');
+  expect((window as unknown as { __pwned?: number }).__pwned).toBeUndefined();
+});
+
+test('maxLength bloque les insertions, pas les suppressions', async () => {
+  const screen = await render(<Host maxLength={3} showCount />);
+  const box = screen.getByRole('textbox');
+
+  await box.click();
+  await userEvent.keyboard('abcdef');
+  await expect.poll(() => area(screen.container).textContent).toBe('abc');
+
+  await userEvent.keyboard('{Backspace}');
+  await expect.poll(() => area(screen.container).textContent).toBe('ab');
+});
+
+test('le compteur passe en dépassement quand la valeur excède la limite', async () => {
+  const screen = await render(<Host value="<p>trop long</p>" maxLength={3} showCount />);
+
+  expect(screen.container.querySelector('.ui-editor-count')).toHaveClass('_over');
+});
+
+// --- États ----------------------------------------------------------------------
+
+test('désactivé ou en lecture seule, la zone ne s’édite plus', async () => {
+  const screen = await render(<Host disabled />);
+  const box = area(screen.container);
+
+  expect(box).toHaveAttribute('contenteditable', 'false');
+  expect(box).toHaveAttribute('tabindex', '-1');
+  expect(box).toHaveAttribute('aria-disabled', 'true');
+  await expect.element(screen.getByRole('button', { name: 'Gras' })).toBeDisabled();
+
+  await screen.rerender(<Host readOnly />);
+  expect(area(screen.container)).toHaveAttribute('contenteditable', 'false');
+  expect(area(screen.container)).toHaveAttribute('aria-readonly', 'true');
+  expect(area(screen.container)).toHaveAttribute('tabindex', '0');
+});
+
+test('en erreur, la zone est marquée invalide', async () => {
+  const screen = await render(<Host invalid errorText="Obligatoire" />);
+
+  expect(area(screen.container)).toHaveAttribute('aria-invalid', 'true');
+});
+
+// --- Barre d'outils ---------------------------------------------------------------
+
+test('la barre est un seul arrêt de tabulation, que les flèches parcourent', async () => {
+  const screen = await render(<Host tools={['fontFamily', 'separator', 'bold', 'italic']} />);
+  const toolbar = screen.getByRole('toolbar', { name: 'Mise en forme' });
+  const police = screen.getByRole('combobox', { name: 'Police' });
+  const gras = screen.getByRole('button', { name: 'Gras' });
+  const italique = screen.getByRole('button', { name: 'Italique' });
+
+  await expect.element(police).toHaveAttribute('tabindex', '0');
+  await expect.element(gras).toHaveAttribute('tabindex', '-1');
+
+  police.element().focus();
+  await userEvent.keyboard('{ArrowRight}');
+  await expect.poll(() => document.activeElement).toBe(gras.element());
+  await expect.element(gras).toHaveAttribute('tabindex', '0');
+  await expect.element(police).toHaveAttribute('tabindex', '-1');
+
+  await userEvent.keyboard('{End}');
+  await expect.poll(() => document.activeElement).toBe(italique.element());
+  await userEvent.keyboard('{ArrowRight}');
+  await expect.poll(() => document.activeElement).toBe(police.element());
+  await userEvent.keyboard('{Escape}');
+  await expect.poll(() => document.activeElement).toBe(area(screen.container));
+  expect(toolbar.element()).toHaveAttribute('aria-orientation', 'horizontal');
+});
+
+test('tools réduit la barre, une liste vide rend le jeu par défaut', async () => {
+  const screen = await render(<Host tools={['bold', 'italic']} />);
+  expect(screen.container.querySelectorAll('.ui-editor-tool')).toHaveLength(2);
+
+  await screen.rerender(<Host tools={[]} />);
+  expect(screen.container.querySelectorAll('.ui-editor-tool').length).toBeGreaterThan(10);
+});
+
+test('toolbarPosition place la barre sous la zone', async () => {
+  const screen = await render(<Host toolbarPosition="bottom" />);
+  const editor = screen.container.querySelector('.ui-editor')!;
+
+  expect(editor.lastElementChild).toHaveClass('ui-editor-toolbar', '_bottom');
+});
diff --git a/packages/ui-kit-react/src/forms/ui-editor/ui-editor.tsx b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.tsx
new file mode 100644
index 0000000..90c7bf5
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-editor/ui-editor.tsx
@@ -0,0 +1,690 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ClipboardEvent,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type MouseEvent,
+  type Ref,
+} from 'react';
+
+import { UiButton } from '../../actions/ui-button';
+import {
+  joinIds,
+  useControllableState,
+  useUiField,
+  type UiFieldSharedProps,
+} from '../../core/forms';
+import { cx } from '../../core/utils';
+import { UiField } from '../ui-field';
+import { UiSelect } from '../ui-select';
+import { UiSwatchPicker, type UiSwatch } from '../ui-swatch-picker';
+
+import {
+  applyCommand,
+  applyFontFamily,
+  applyFontSize,
+  applyHighlightColor,
+  applyLink,
+  applyTextColor,
+  clearFormatMarkers,
+  clearMarkerClass,
+  convertColorMarkers,
+  convertFontMarkers,
+  convertHighlightMarkers,
+  convertSizeMarkers,
+  DEFAULT_EDITOR_TOOLS,
+  EDITOR_COLORS,
+  EDITOR_FONTS,
+  EDITOR_HIGHLIGHTS,
+  EDITOR_SELECT_TOOLS,
+  EDITOR_SIZES,
+  EDITOR_TOOL_META,
+  emptyEditorState,
+  htmlToText,
+  insertHtml,
+  insertText,
+  isEmptyHtml,
+  normalizeHtml,
+  readEditorState,
+  readFontFamily,
+  readFontSize,
+  readHighlightColor,
+  readTextColor,
+  removeLink,
+  resolveFontLabel,
+  scrubInPlace,
+  toggleCodeBlock,
+  type EditorButtonTool,
+  type EditorFont,
+  type EditorSelectTool,
+  type EditorSize,
+  type EditorState,
+  type EditorTool,
+} from './ui-editor-commands';
+import { htmlToNodes, sanitizeHtml } from './ui-editor-sanitize';
+
+import './ui-editor.scss';
+
+/** Place de la barre d'outils par rapport à la zone de saisie. */
+export type EditorToolbarPosition = 'top' | 'bottom';
+
+/** Raccourci clavier → outil. Le navigateur les applique seul ; on relit l'état. */
+const SHORTCUTS: Record<string, EditorTool> = { b: 'bold', i: 'italic', u: 'underline' };
+
+type NativeProps = Omit<
+  ComponentPropsWithRef<'div'>,
+  | 'defaultValue'
+  | 'onChange'
+  | 'children'
+  | 'onInput'
+  | 'onBeforeInput'
+  | 'onPaste'
+  | 'onKeyDown'
+  | 'onKeyUp'
+  | 'onMouseUp'
+  | 'contentEditable'
+  | 'role'
+  | 'placeholder'
+  | 'ref'
+>;
+
+export interface UiEditorProps extends UiFieldSharedProps, NativeProps {
+  /** Valeur HTML imposée. Renseignée, l'éditeur est **contrôlé**. */
+  value?: string;
+  /** Valeur de départ quand l'éditeur est non contrôlé. */
+  defaultValue?: string;
+  /** Notifié à chaque modification, avec le nouveau HTML. */
+  onValueChange?: (value: string) => void;
+  /**
+   * Outils de la barre, dans l'ordre (`separator` trace un séparateur). Une
+   * liste vide ou absente rend le jeu par défaut.
+   */
+  tools?: readonly EditorTool[];
+  /** Texte indicatif tant que l'éditeur est vide. */
+  placeholder?: string;
+  /** Hauteur minimale de la zone de saisie, en lignes de texte. */
+  minRows?: number;
+  /** Nombre maximal de caractères de **texte** (le balisage ne compte pas). */
+  maxLength?: number;
+  /** Affiche un compteur de caractères sous le champ. */
+  showCount?: boolean;
+  toolbarPosition?: EditorToolbarPosition;
+  /** Notifié quand la mise en forme sous le curseur change. */
+  onSelectionChange?: (state: EditorState) => void;
+  /** Ref de la zone de saisie, pour la focaliser. */
+  ref?: Ref<HTMLDivElement>;
+}
+
+const noSubscribe = () => () => {};
+
+/**
+ * Les noms réels des familles, lus sur les jetons. Une chaîne et non un
+ * tableau : `useSyncExternalStore` compare ses instantanés par identité.
+ */
+function readFontLabels(): string {
+  return EDITOR_FONTS.map((f) => resolveFontLabel(f.cssVar, f.label)).join('|');
+}
+const serverFontLabels = () => EDITOR_FONTS.map((f) => f.label).join('|');
+
+/**
+ * ui-editor : champ de texte riche, bâti sur la coquille `ui-field` en mode
+ * multiligne, une zone `contenteditable` et sa barre d'outils.
+ *
+ * Aucun moteur tiers : les commandes de mise en forme vivent dans
+ * `ui-editor-commands`, le seul endroit qui touche l'API d'édition historique.
+ * La valeur est une chaîne HTML, nettoyée à l'entrée par `sanitizeHtml` (le
+ * portage du `DomSanitizer` d'Angular) et ramenée à une petite liste de balises
+ * au collage.
+ *
+ * La zone possède son propre DOM pendant la frappe : la valeur n'y est donc
+ * jamais rendue par React, ce qui effondrerait le curseur à chaque touche. Le DOM
+ * n'est réécrit que quand la valeur change de l'extérieur, et par des nœuds, pas
+ * par `innerHTML`.
+ */
+export function UiEditor({
+  value,
+  defaultValue = '',
+  onValueChange,
+  tools: toolsProp,
+  placeholder,
+  minRows = 4,
+  maxLength,
+  showCount = false,
+  toolbarPosition = 'top',
+  onSelectionChange,
+  // --- Props partagées de la coquille ---
+  label,
+  helperText,
+  errorText,
+  showMessageIcon = false,
+  messageIcon,
+  size = 'default',
+  level = 'default',
+  floatLabel,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  invalid = false,
+  id,
+  className,
+  tabIndex,
+  ref,
+  ...rest
+}: UiEditorProps) {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const toolbarRef = useRef<HTMLDivElement | null>(null);
+
+  const [html, setHtml] = useControllableState<string>({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  const field = useUiField({
+    label,
+    helperText,
+    errorText,
+    level,
+    invalid,
+    'aria-label': rest['aria-label'],
+    'aria-describedby': rest['aria-describedby'],
+    id,
+  });
+
+  const tools = toolsProp?.length ? toolsProp : DEFAULT_EDITOR_TOOLS;
+  const isEditable = !disabled && !readOnly;
+
+  // --- État sous le curseur ----------------------------------------------------
+  const [state, setState] = useState<EditorState>(emptyEditorState);
+  const stateRef = useRef(state);
+  const [currentFont, setCurrentFont] = useState<EditorFont | null>(null);
+  const [currentSize, setCurrentSize] = useState<EditorSize | null>(null);
+  const [currentTextColor, setCurrentTextColor] = useState<string | null>(null);
+  const [currentHighlight, setCurrentHighlight] = useState<string | null>(null);
+  const [activeTool, setActiveTool] = useState(0);
+  const [textColorOpen, setTextColorOpen] = useState(false);
+  const [highlightOpen, setHighlightOpen] = useState(false);
+
+  /**
+   * Dernier HTML écrit par l'éditeur lui-même. Une valeur qui revient égale
+   * n'est que l'écho de notre propre saisie : réécrire le DOM effondrerait le
+   * curseur en pleine frappe.
+   */
+  const lastEmitted = useRef<string | null>(null);
+
+  /**
+   * Dernière sélection vue dans la zone. Les boutons annulent leur `mousedown`
+   * et ne prennent jamais le focus, mais une liste déroulante et un nuancier le
+   * prennent, et un `contenteditable` perd sa sélection avec lui.
+   */
+  const savedRange = useRef<Range | null>(null);
+
+  const fontLabels = useSyncExternalStore(noSubscribe, readFontLabels, serverFontLabels);
+  const fonts = useMemo(() => {
+    const labels = fontLabels.split('|');
+    return EDITOR_FONTS.map((f, i) => ({ ...f, label: labels[i] || f.label }));
+  }, [fontLabels]);
+
+  // --- Valeur → DOM, seulement quand elle vient de l'extérieur ------------------
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (html === lastEmitted.current) return;
+    const safe = sanitizeHtml(html);
+    if (el.innerHTML !== safe) el.replaceChildren(...htmlToNodes(safe));
+    lastEmitted.current = html;
+  }, [html]);
+
+  const charCount = useMemo(() => htmlToText(sanitizeHtml(html)).length, [html]);
+  const overLimit = maxLength != null && charCount > maxLength;
+  const showPlaceholder = !!placeholder && !(floatLabel && label) && charCount === 0;
+
+  // --- Sélection ----------------------------------------------------------------
+  const rememberSelection = useCallback(() => {
+    const el = contentRef.current;
+    const selection = document.getSelection();
+    if (!el || !selection?.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    if (el.contains(range.commonAncestorContainer)) savedRange.current = range.cloneRange();
+  }, []);
+
+  const restoreSelection = () => {
+    contentRef.current?.focus();
+    const range = savedRange.current;
+    if (!range) return;
+    const selection = document.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  };
+
+  const refreshState = () => {
+    rememberSelection();
+    const anchor = document.getSelection()?.anchorNode ?? null;
+    setCurrentFont(readFontFamily(anchor));
+    setCurrentSize(readFontSize(anchor));
+    setCurrentTextColor(readTextColor(anchor));
+    setCurrentHighlight(readHighlightColor(anchor));
+
+    const next = readEditorState();
+    const prev = stateRef.current;
+    if ((Object.keys(next) as (keyof EditorState)[]).every((k) => next[k] === prev[k])) return;
+    stateRef.current = next;
+    setState(next);
+    onSelectionChange?.(next);
+  };
+
+  // --- Saisie -------------------------------------------------------------------
+  /** La seule source de la valeur, de la vue vers l'appelant. */
+  const onInput = () => {
+    const el = contentRef.current;
+    if (!el) return;
+    const next = isEmptyHtml(el.innerHTML) ? '' : el.innerHTML;
+    lastEmitted.current = next;
+    setHtml(next);
+    refreshState();
+  };
+
+  // `maxLength` porte sur le texte, pas sur le balisage. Suppressions et mise en
+  // forme restent possibles une fois la limite atteinte : seules les intentions
+  // d'insertion sont annulées. Écouteur natif : le `onBeforeInput` de React est
+  // une émulation sans `inputType`.
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el || maxLength == null) return;
+    const onBeforeInput = (event: InputEvent) => {
+      if (!event.inputType.startsWith('insert')) return;
+      const selection = document.getSelection();
+      const replaced = selection && !selection.isCollapsed ? selection.toString().length : 0;
+      const incoming = event.data?.length ?? 1;
+      if (htmlToText(el.innerHTML).length - replaced + incoming > maxLength) event.preventDefault();
+    };
+    el.addEventListener('beforeinput', onBeforeInput);
+    return () => el.removeEventListener('beforeinput', onBeforeInput);
+  }, [maxLength]);
+
+  /** Le collage est ramené à la liste de balises de l'éditeur. */
+  const onPaste = (event: ClipboardEvent<HTMLDivElement>) => {
+    if (!isEditable) return;
+    event.preventDefault();
+    const clipboard = event.clipboardData;
+    const pasted = clipboard.getData('text/html');
+    if (pasted) {
+      insertHtml(sanitizeHtml(normalizeHtml(pasted)));
+      // `insertHTML` redécore ce qu'il insère : on le nettoie en place, nœud par
+      // nœud, pour ne pas perdre le curseur.
+      if (contentRef.current) scrubInPlace(contentRef.current);
+    } else {
+      insertText(clipboard.getData('text/plain'));
+    }
+    onInput();
+  };
+
+  /** Ctrl/Cmd+B/I/U : le navigateur applique, on relit l'état. */
+  const onContentKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!(event.metaKey || event.ctrlKey)) return;
+    if (!SHORTCUTS[event.key.toLowerCase()]) return;
+    queueMicrotask(refreshState);
+  };
+
+  // --- Barre d'outils ---------------------------------------------------------
+  const toolbar = tools.map((tool, index) => {
+    const isSeparator = tool === 'separator';
+    const select = EDITOR_SELECT_TOOLS.includes(tool as EditorSelectTool)
+      ? (tool as EditorSelectTool)
+      : null;
+    const buttonTool = isSeparator || select ? null : (tool as EditorButtonTool);
+    return { tool, index, isSeparator, select, buttonTool };
+  });
+  const hasToolbar = tools.some((t) => t !== 'separator');
+  const actionable = toolbar.filter((entry) => !entry.isSeparator);
+  const tabStop = !actionable.length
+    ? -1
+    : actionable.some((entry) => entry.index === activeTool)
+      ? activeTool
+      : actionable[0]!.index;
+
+  const clearFormat = () => {
+    applyCommand('clearFormat');
+    const el = contentRef.current;
+    const selection = document.getSelection();
+    if (!el || !selection?.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    if (!el.contains(range.commonAncestorContainer)) return;
+    clearFormatMarkers(el, range);
+  };
+
+  /** Premier jet du lien : l'invite native, comme la version Angular. */
+  const promptForLink = () => {
+    const href = window.prompt('Adresse du lien (laisser vide pour retirer le lien)');
+    if (href === null) return;
+    if (href.trim() === '') removeLink();
+    else applyLink(href.trim());
+  };
+
+  const runTool = (tool: EditorButtonTool, index: number) => {
+    if (!isEditable) return;
+    setActiveTool(index);
+    contentRef.current?.focus();
+    if (tool === 'link') promptForLink();
+    else if (tool === 'codeBlock') toggleCodeBlock();
+    else if (tool === 'clearFormat') clearFormat();
+    else if (tool !== 'textColor' && tool !== 'highlightColor') applyCommand(tool);
+    onInput();
+  };
+
+  /** Couleur de texte choisie : le nuancier a pris le focus, on rend le curseur d'abord. */
+  const onTextColorSelect = (swatch: UiSwatch | null) => {
+    if (!isEditable) return;
+    restoreSelection();
+    const el = contentRef.current;
+    if (swatch) {
+      applyTextColor();
+      if (el) convertColorMarkers(el, `ui-editor-color-${swatch.key}`);
+    } else if (el && savedRange.current) {
+      for (const color of EDITOR_COLORS) clearMarkerClass(el, savedRange.current, color.className);
+    }
+    onInput();
+  };
+
+  const onHighlightSelect = (swatch: UiSwatch | null) => {
+    if (!isEditable) return;
+    restoreSelection();
+    const el = contentRef.current;
+    if (swatch) {
+      applyHighlightColor();
+      if (el) convertHighlightMarkers(el, `ui-editor-highlight-${swatch.key}`);
+    } else if (el && savedRange.current) {
+      for (const color of EDITOR_HIGHLIGHTS)
+        clearMarkerClass(el, savedRange.current, color.className);
+    }
+    onInput();
+  };
+
+  const selectOptions = (tool: EditorSelectTool) =>
+    tool === 'fontFamily'
+      ? fonts.map((font) => ({ value: font.key, label: font.label }))
+      : EDITOR_SIZES.map((s) => ({ value: s.key, label: s.label }));
+
+  /**
+   * Valeur affichée d'une liste. Sans classe posée, le texte est bel et bien
+   * rendu dans la famille de base à la taille normale : le dire est un fait.
+   */
+  const selectValue = (tool: EditorSelectTool) =>
+    tool === 'fontFamily' ? (currentFont ?? 'base') : (currentSize ?? 'default');
+
+  const selectLabel = (tool: EditorSelectTool) =>
+    tool === 'fontFamily' ? 'Police' : 'Taille du texte';
+
+  const onSelectValueChange = (tool: EditorSelectTool, next: unknown, index: number) => {
+    setActiveTool(index);
+    if (!isEditable || next == null) return;
+    restoreSelection();
+    const el = contentRef.current;
+    if (tool === 'fontFamily') {
+      const choice = fonts.find((f) => f.key === next);
+      if (!choice) return;
+      applyFontFamily();
+      if (el) convertFontMarkers(el, choice.className);
+    } else {
+      const choice = EDITOR_SIZES.find((s) => s.key === next);
+      if (!choice) return;
+      applyFontSize();
+      if (el) convertSizeMarkers(el, choice.className);
+    }
+    onInput();
+  };
+
+  /**
+   * Le focus va sur le contrôle qui porte l'arrêt de tabulation. Cherché dans la
+   * barre vivante, dans l'ordre du DOM qui est l'ordre visuel : une liste
+   * déroulante y est une enveloppe, son déclencheur un `<button>`.
+   */
+  const focusTool = (index: number) => {
+    const position = actionable.findIndex((entry) => entry.index === index);
+    const tool = toolbarRef.current?.querySelectorAll<HTMLElement>('.ui-editor-tool')[position];
+    const control = tool?.matches('button') ? tool : tool?.querySelector<HTMLElement>('button');
+    control?.focus();
+  };
+
+  /** Tabindex glissant : la barre est un arrêt de tabulation, les flèches s'y déplacent. */
+  const onToolbarKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    // Une liste ouverte a déjà traité sa touche (Début, Fin, Échap) : elle est à elle.
+    if (event.defaultPrevented) return;
+    const indexes = actionable.map((entry) => entry.index);
+    if (!indexes.length) return;
+    const current = Math.max(0, indexes.indexOf(tabStop));
+
+    let next: number;
+    switch (event.key) {
+      case 'ArrowRight':
+        next = indexes[(current + 1) % indexes.length]!;
+        break;
+      case 'ArrowLeft':
+        next = indexes[(current - 1 + indexes.length) % indexes.length]!;
+        break;
+      case 'Home':
+        next = indexes[0]!;
+        break;
+      case 'End':
+        next = indexes[indexes.length - 1]!;
+        break;
+      case 'Escape':
+        event.preventDefault();
+        contentRef.current?.focus();
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    setActiveTool(next);
+    focusTool(next);
+  };
+
+  /** Les boutons gardent le curseur dans la zone : leur `mousedown` est annulé. */
+  const onToolbarMouseDown = (event: MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
+  const colorIndicator = (tool: EditorButtonTool): CSSProperties | undefined => {
+    const key =
+      tool === 'textColor' ? currentTextColor : tool === 'highlightColor' ? currentHighlight : null;
+    const table = tool === 'textColor' ? EDITOR_COLORS : EDITOR_HIGHLIGHTS;
+    const swatch = key ? table.find((c) => c.key === key) : undefined;
+    return swatch
+      ? ({ '--ui-editor-swatch-indicator-color': `var(${swatch.cssVar})` } as CSSProperties)
+      : undefined;
+  };
+
+  const renderTool = (entry: (typeof toolbar)[number]) => {
+    const { index } = entry;
+    const toolTabIndex = index === tabStop ? 0 : -1;
+
+    if (entry.isSeparator) {
+      return <span key={index} className="ui-editor-toolbar-separator" aria-hidden="true" />;
+    }
+
+    if (entry.select) {
+      const select = entry.select;
+      return (
+        <UiSelect
+          key={index}
+          className="ui-editor-tool ui-editor-select"
+          size="small"
+          options={selectOptions(select)}
+          optionLabel="label"
+          optionValue="value"
+          value={selectValue(select)}
+          aria-label={selectLabel(select)}
+          disabled={!isEditable}
+          tabIndex={toolTabIndex}
+          onValueChange={(next) => onSelectValueChange(select, next, index)}
+        />
+      );
+    }
+
+    const tool = entry.buttonTool!;
+    const meta = EDITOR_TOOL_META[tool];
+    const common = {
+      className: cx(
+        'ui-editor-tool',
+        (tool === 'textColor' || tool === 'highlightColor') && '_colorTool',
+      ),
+      variant: 'ghost' as const,
+      level: 'low' as const,
+      size: 'small' as const,
+      iconOnly: true,
+      icon: meta.icon,
+      'aria-label': meta.label,
+      disabled: !isEditable,
+      tabIndex: toolTabIndex,
+    };
+
+    if (tool === 'textColor' || tool === 'highlightColor') {
+      const isText = tool === 'textColor';
+      return (
+        <UiSwatchPicker
+          key={index}
+          popup
+          size="small"
+          allowClear
+          value={isText ? currentTextColor : currentHighlight}
+          aria-label={meta.label}
+          open={isText ? textColorOpen : highlightOpen}
+          onOpenChange={isText ? setTextColorOpen : setHighlightOpen}
+          onSwatchSelect={isText ? onTextColorSelect : onHighlightSelect}
+          trigger={(trigger) => (
+            <UiButton
+              {...common}
+              {...trigger}
+              style={colorIndicator(tool)}
+              onClick={() => {
+                setActiveTool(index);
+                rememberSelection();
+                trigger.onClick();
+              }}
+            />
+          )}
+        />
+      );
+    }
+
+    const pressed = tool in state ? state[tool as keyof EditorState] : undefined;
+    return (
+      <UiButton
+        key={index}
+        {...common}
+        aria-pressed={pressed}
+        onClick={() => runTool(tool, index)}
+      />
+    );
+  };
+
+  const toolbarNode = hasToolbar ? (
+    // Motif toolbar de l'ARIA : le clavier est délégué au conteneur, le focus vit
+    // sur les outils (tabindex glissant), comme dans `ui-menu`.
+    <div
+      ref={toolbarRef}
+      className={cx('ui-editor-toolbar', toolbarPosition === 'bottom' && '_bottom')}
+      role="toolbar"
+      aria-label="Mise en forme"
+      aria-orientation="horizontal"
+      onMouseDown={onToolbarMouseDown}
+      onKeyDown={onToolbarKeyDown}
+    >
+      {toolbar.map(renderTool)}
+    </div>
+  ) : null;
+
+  const countId = `${field.inputId}-count`;
+  const describedBy = joinIds(field.describedBy, showCount && countId);
+
+  return (
+    <UiField
+      className={className}
+      label={label}
+      htmlFor={field.inputId}
+      required={required}
+      size={size}
+      level={field.level}
+      floatLabel={floatLabel}
+      filled={charCount > 0}
+      disabled={disabled}
+      readOnly={readOnly}
+      multiline
+      message={field.message}
+      messageId={field.messageId}
+      showMessageIcon={showMessageIcon}
+      messageIcon={messageIcon}
+      footer={
+        showCount ? (
+          <span
+            id={countId}
+            className={cx(
+              'ui-editor-count',
+              size === 'small' && '_small',
+              disabled && '_disabled',
+              overLimit && '_over',
+            )}
+          >
+            {charCount}
+            {maxLength != null && ` / ${maxLength}`}
+          </span>
+        ) : undefined
+      }
+    >
+      <div
+        className={cx('ui-editor', size === 'small' && '_small')}
+        style={{ '--_rows': minRows } as CSSProperties}
+      >
+        {toolbarPosition === 'top' && toolbarNode}
+
+        <div className="ui-editor-area">
+          <div
+            {...rest}
+            ref={(node) => {
+              contentRef.current = node;
+              if (typeof ref === 'function') ref(node);
+              else if (ref) ref.current = node;
+            }}
+            className={cx('ui-editor-content', size === 'small' && '_small')}
+            id={field.inputId}
+            role="textbox"
+            aria-multiline="true"
+            contentEditable={isEditable}
+            tabIndex={disabled ? -1 : (tabIndex ?? 0)}
+            // `<label for>` n'étiquette que les éléments étiquetables, et une
+            // `<div>` éditable n'en est pas un : le libellé devient le nom.
+            aria-label={rest['aria-label'] || label || undefined}
+            aria-describedby={describedBy}
+            aria-required={required || undefined}
+            aria-readonly={readOnly || undefined}
+            aria-disabled={disabled || undefined}
+            aria-invalid={field.ariaInvalid}
+            onInput={onInput}
+            onPaste={onPaste}
+            onKeyDown={onContentKeyDown}
+            onKeyUp={refreshState}
+            onMouseUp={refreshState}
+          />
+
+          {showPlaceholder && (
+            <span className="ui-editor-placeholder" aria-hidden="true">
+              {placeholder}
+            </span>
+          )}
+        </div>
+
+        {toolbarPosition === 'bottom' && toolbarNode}
+      </div>
+    </UiField>
+  );
+}
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/index.ts b/packages/ui-kit-react/src/forms/ui-file-upload/index.ts
new file mode 100644
index 0000000..ea99f42
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/index.ts
@@ -0,0 +1,30 @@
+/*
+ * ui-file-upload livre aussi `ui-file-upload-list` : la ligne rend le modèle de
+ * fichier de l'envoi, donc les deux partagent un seul point d'entrée (deux
+ * points d'entrée formeraient un cycle).
+ */
+
+export {
+  UiFileUpload,
+  type UiFileUploadProps,
+  type UiFileUploadMode,
+  type UiFileUploadSize,
+  type UiFileUploadFileContext,
+  type UiFileUploadContentContext,
+  type UiFileUploadToolbarContext,
+} from './ui-file-upload';
+export {
+  UiFileUploadList,
+  type UiFileUploadListProps,
+  type UiFileUploadListSize,
+} from './ui-file-upload-list';
+export {
+  formatFileSize,
+  isFileTypeAccepted,
+  isImageFile,
+  type UiUploadStatus,
+  type UiUploadFile,
+  type UiUploadHandlerEvent,
+  type UiUploadEvent,
+  type UiUploadErrorEvent,
+} from './ui-file-upload.model';
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.mdx b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.mdx
new file mode 100644
index 0000000..1454e29
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.mdx
@@ -0,0 +1,74 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
+import { ConfigTable } from '@sb/blocks/config-table';
+import * as ListStories from './ui-file-upload-list.stories';
+
+<Meta of={ListStories} />
+
+# ui-file-upload-list
+
+Une ligne de fichier : l'**unité qui se répète** dans la liste d'un envoi, à l'image du
+composant Figma. [ui-file-upload](?path=/docs/components-ui-forms-ui-file-upload--docs) en
+empile une par fichier. Présentationnelle : une vignette pour une image, une icône
+sinon, le nom avec la taille ou l'état, et un bouton de retrait. Pendant l'envoi, un
+`ui-spinner` prend la place de l'icône et une barre de progression apparaît.
+
+Elle se livre dans le point d'entrée de `ui-file-upload`, dont elle rend le modèle :
+
+```tsx
+import { UiFileUploadList, type UiUploadFile } from '@4sh/ui-kit-react/ui-file-upload';
+```
+
+<Canvas of={ListStories.Default} />
+
+## API
+
+<ArgTypes of={ListStories} />
+
+## États
+
+<Canvas of={ListStories.Uploading} />
+<Canvas of={ListStories.ErrorState} />
+<Canvas of={ListStories.ImageThumbnail} />
+<Canvas of={ListStories.Small} />
+
+## Accessibilité
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Point</th>
+      <th>Mise en œuvre</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <strong>Retrait</strong>
+      </td>
+      <td>
+        Un vrai <code>&lt;button&gt;</code>, dont le nom accessible inclut celui du fichier.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Progression</strong>
+      </td>
+      <td>
+        Une barre <code>role="progressbar"</code>, bornée de 0 à 100 ; le{' '}
+        <code>ui-spinner</code> est une région <code>status</code> nommée.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Vignette</strong>
+      </td>
+      <td>
+        Décorative (<code>alt=""</code>) : c'est le nom du fichier qui est lu.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Theming
+
+<ConfigTable of="ui-file-upload-list" />
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.scss b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.scss
new file mode 100644
index 0000000..5ee12fa
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.scss
@@ -0,0 +1,178 @@
+@use 'utils';
+@use 'sass:map';
+
+// =====================================================================
+// ui-file-upload-list : a single file row. All values come from tokens.
+//
+// No host element here, so `.ui-file-upload-list` IS the row.
+//
+// Extend:
+//   • Size → add an entry to $sizes (+ the `UiFileUploadListSize` type).
+// =====================================================================
+
+// --- Config ----------------------------------------------------------
+/// Géométrie, typo et vignette d'une ligne de fichier, par taille.
+$sizes: (
+  'default': (
+    radius: var(--ui-file-upload-item-radius, var(--radius-lg)),
+    padding-y: var(--ui-file-upload-item-padding-y, var(--units-md)),
+    padding-x: var(--ui-file-upload-item-padding-x, var(--units-default)),
+    gap: var(--ui-file-upload-item-gap, var(--units-md)),
+    media: var(--ui-file-upload-item-media-size, #{utils.rem-calc(40px)}),
+    name-size: var(--ui-file-upload-item-name-font-size, var(--size-typography-title-sm)),
+    meta-size: var(--ui-file-upload-item-meta-font-size, var(--size-typography-text-sm)),
+  ),
+  'small': (
+    radius: var(--ui-file-upload-item-radius-small, var(--radius-md)),
+    padding-y: var(--ui-file-upload-item-padding-y-small, var(--units-sm)),
+    padding-x: var(--ui-file-upload-item-padding-x-small, var(--units-md)),
+    gap: var(--ui-file-upload-item-gap-small, var(--units-sm)),
+    media: var(--ui-file-upload-item-media-size-small, #{utils.rem-calc(32px)}),
+    name-size: var(--ui-file-upload-item-name-font-size-small, var(--size-typography-text-md)),
+    meta-size: var(--ui-file-upload-item-meta-font-size-small, var(--size-typography-text-sm)),
+  ),
+);
+$size-default: map.get($sizes, 'default'); /// Raccourci vers l'entrée `default` de `$sizes`.
+
+$stroke-width: var(--ui-file-upload-item-stroke-width, #{utils.$form-field-stroke-width}); /// Épaisseur de bordure d'une ligne.
+$media-gap: var(--ui-file-upload-item-media-gap, var(--units-sm));                        /// Espacement vignette ↔ informations.
+$infos-gap: var(--ui-file-upload-item-infos-gap, var(--units-2xs));                       /// Espacement nom ↔ métadonnées.
+$thumb-radius: var(--ui-file-upload-item-thumb-radius, var(--radius-sm));                /// Rayon de la vignette d'aperçu.
+
+$remove-padding: var(--ui-file-upload-item-remove-padding, var(--units-2xs));                    /// Inset du bouton de retrait.
+$remove-radius: var(--ui-file-upload-item-remove-radius, var(--radius-sm));                      /// Rayon du bouton de retrait.
+$focus-ring-width: var(--ui-file-upload-item-focus-ring-width, #{utils.$form-focus-ring-width}); /// Épaisseur de l'anneau de focus du bouton de retrait.
+
+$progress-height: var(--ui-file-upload-item-progress-height, var(--stroke-default));   /// Épaisseur de la barre de progression.
+$progress-color: var(--ui-file-upload-item-progress-color, var(--global-text-default)); /// Couleur de la portion remplie de la barre de progression.
+
+@mixin row-size($s) {
+  border-radius: map.get($s, radius);
+  padding: map.get($s, padding-y) map.get($s, padding-x);
+  gap: map.get($s, gap);
+
+  .ui-file-upload-list-media {
+    width: map.get($s, media);
+    height: map.get($s, media);
+  }
+  .ui-file-upload-list-name { font-size: map.get($s, name-size); }
+  .ui-file-upload-list-meta { font-size: map.get($s, meta-size); }
+}
+
+.ui-file-upload-list {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: map.get($size-default, gap);
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--ui-file-upload-list-surface, var(--form-high-surface-default));         /// Fond d'une ligne de fichier.
+  border: $stroke-width solid var(--ui-file-upload-list-stroke, var(--form-high-stroke-default)); /// Couleur de bordure d'une ligne de fichier.
+  color: var(--ui-file-upload-list-color, var(--form-high-content-default));                      /// Couleur du texte d'une ligne de fichier (vignette et métadonnées comprises).
+
+  @include row-size($size-default);
+
+  @each $name, $s in $sizes {
+    @if $name != 'default' {
+      &._#{$name} { @include row-size($s); }
+    }
+  }
+
+  // --- File (media + infos) ------------------------------------------
+  &-file {
+    display: flex;
+    align-items: center;
+    gap: $media-gap;
+    min-width: 0; // allow the name to truncate
+    flex: 1 1 auto;
+  }
+
+  &-media {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    line-height: 0;
+    color: var(--ui-file-upload-list-color, var(--form-high-content-default));
+  }
+
+  &-thumb {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: $thumb-radius;
+  }
+
+  &-infos {
+    display: flex;
+    flex-direction: column;
+    gap: $infos-gap;
+    min-width: 0;
+  }
+
+  &-name {
+    font-family: var(--ui-file-upload-font-family, var(--fontfamily-base)); /// Famille typographique du nom.
+    font-weight: var(--ui-file-upload-name-weight, var(--weight-bold)); /// Graisse du nom.
+    line-height: 1.3;
+    // Truncate long names on a single line.
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-meta {
+    font-family: var(--ui-file-upload-font-family, var(--fontfamily-base)); /// Famille typographique des métadonnées.
+    font-weight: var(--ui-file-upload-meta-weight, var(--weight-light)); /// Graisse des métadonnées.
+    line-height: 1.2;
+    color: var(--ui-file-upload-list-color, var(--form-high-content-default));
+  }
+
+  // --- Remove button --------------------------------------------------
+  &-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    padding: $remove-padding;
+    background: transparent;
+    border: none;
+    border-radius: $remove-radius;
+    color: var(--ui-file-upload-list-remove-color, var(--form-high-content-default)); /// Couleur du bouton de retrait.
+    cursor: pointer;
+    line-height: 0;
+    @include utils.control-transition(background-color, color);
+
+    &:hover { color: var(--ui-file-upload-list-remove-color-hover, var(--global-text-default)); } /// Couleur du bouton de retrait au survol.
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 $focus-ring-width var(--ui-file-upload-list-remove-focus-ring-color, var(--form-high-stroke-focused)); /// Couleur de l'anneau de focus du bouton de retrait.
+    }
+  }
+
+  // --- Progress bar (uploading) --------------------------------------
+  &-progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: $progress-height;
+    background-color: var(--ui-file-upload-list-progress-surface, var(--form-high-surface-hover)); /// Fond de la piste de progression.
+  }
+  &-progress-bar {
+    display: block;
+    height: 100%;
+    background-color: $progress-color;
+    @include utils.control-transition(width);
+  }
+
+  // --- Error ----------------------------------------------------------
+  &._error {
+    border-color: var(--ui-file-upload-list-stroke-error, var(--informative-errorhigh-stroke-default)); /// Couleur de bordure d'une ligne en erreur.
+    .ui-file-upload-list-media,
+    // Même jeton que le message de `ui-file-upload`, et pour la même raison : la
+    // ligne garde son fond neutre, où `informative-errorhigh-content` (blanc) ne se
+    // voit pas.
+    .ui-file-upload-list-meta { color: var(--ui-file-upload-list-color-error, var(--form-error-content-default)); } /// Couleur du texte d'une ligne en erreur.
+  }
+}
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.stories.tsx b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.stories.tsx
new file mode 100644
index 0000000..a88dfc4
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UiFileUploadList } from './ui-file-upload-list';
+import type { UiUploadFile, UiUploadStatus } from './ui-file-upload.model';
+
+/** Un fichier d'exemple pour les stories de la ligne seule. */
+function sample(
+  name: string,
+  size: number,
+  status: UiUploadStatus = 'pending',
+  extra: Partial<UiUploadFile> = {},
+): UiUploadFile {
+  return {
+    id: name,
+    file: new File([], name),
+    name,
+    size,
+    type: '',
+    status,
+    progress: 0,
+    ...extra,
+  };
+}
+
+// Un petit SVG en ligne, qui tient lieu de vignette d'image.
+const THUMB =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="#7c3aed"/><circle cx="40" cy="40" r="22" fill="#fbbf24"/></svg>',
+  );
+
+const meta: Meta<typeof UiFileUploadList> = {
+  title: 'Components/ui/forms/ui-file-upload-list',
+  component: UiFileUploadList,
+  args: { size: 'default', removable: true },
+  argTypes: {
+    size: { control: 'inline-radio', options: ['default', 'small'] },
+    removable: { control: 'boolean' },
+    file: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 340 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/GZww5hdUA49LB8XWeWP6tl/-Projet----UI-Kit?node-id=155-2563',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UiFileUploadList>;
+
+export const Default: Story = { args: { file: sample('rapport-annuel.pdf', 2_621_440) } };
+
+export const Small: Story = { args: { size: 'small', file: sample('note.txt', 4096) } };
+
+/** Pendant l'envoi : `ui-spinner` prend la place de l'icône, et la progression apparaît. */
+export const Uploading: Story = {
+  args: { file: sample('video-demo.mp4', 18_400_000, 'uploading', { progress: 62 }) },
+};
+
+/** En échec : icône d'alerte et message, stylés par les jetons d'erreur. */
+export const ErrorState: Story = {
+  args: { file: sample('archive.zip', 52_000_000, 'error', { error: 'Fichier trop volumineux' }) },
+};
+
+/** Une image avec sa vignette (URL d'objet). */
+export const ImageThumbnail: Story = {
+  args: { file: sample('photo.jpg', 843_776, 'completed', { objectUrl: THUMB }) },
+};
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.test.tsx b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.test.tsx
new file mode 100644
index 0000000..26b8e30
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.test.tsx
@@ -0,0 +1,110 @@
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { UiFileUploadList } from './ui-file-upload-list';
+import type { UiUploadFile, UiUploadStatus } from './ui-file-upload.model';
+
+function sample(
+  name: string,
+  size: number,
+  status: UiUploadStatus = 'pending',
+  extra: Partial<UiUploadFile> = {},
+): UiUploadFile {
+  return {
+    id: name,
+    file: new File([], name),
+    name,
+    size,
+    type: '',
+    status,
+    progress: 0,
+    ...extra,
+  };
+}
+
+const THUMB =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"/>');
+
+test('une ligne montre le nom, la taille et le bouton de retrait nommé', async () => {
+  const screen = await render(<UiFileUploadList file={sample('rapport.pdf', 2_621_440)} />);
+  const row = screen.container.querySelector('.ui-file-upload-list')!;
+
+  expect(row.querySelector('.ui-file-upload-list-name')).toHaveTextContent('rapport.pdf');
+  expect(row.querySelector('.ui-file-upload-list-name')).toHaveAttribute('title', 'rapport.pdf');
+  expect(row.querySelector('.ui-file-upload-list-meta')).toHaveTextContent('2.5 MB');
+  expect(row.querySelector('.ui-file-upload-list-media .fa-file')).not.toBeNull();
+  await expect
+    .element(screen.getByRole('button', { name: 'Supprimer le fichier : rapport.pdf' }))
+    .toBeVisible();
+  expect(row.querySelector('[role="progressbar"]')).toBeNull();
+});
+
+test("pendant l'envoi, le spinner remplace l'icône et la progression apparaît", async () => {
+  const screen = await render(
+    <UiFileUploadList file={sample('demo.mp4', 18_400_000, 'uploading', { progress: 62 })} />,
+  );
+
+  await expect
+    .element(screen.getByRole('status', { name: 'Téléversement de demo.mp4' }))
+    .toBeInTheDocument();
+  const bar = screen.getByRole('progressbar', { name: 'Progression du téléversement de demo.mp4' });
+  await expect.element(bar).toHaveAttribute('aria-valuenow', '62');
+  await expect.element(bar).toHaveAttribute('aria-valuemin', '0');
+  await expect.element(bar).toHaveAttribute('aria-valuemax', '100');
+  expect(
+    screen.container.querySelector<HTMLElement>('.ui-file-upload-list-progress-bar')!.style.width,
+  ).toBe('62%');
+  expect(screen.container.querySelector('.ui-file-upload-list-meta')).toHaveTextContent(
+    '17.5 MB · 62 %',
+  );
+});
+
+test("en erreur, la ligne montre le message et l'icône d'alerte", async () => {
+  const screen = await render(
+    <UiFileUploadList file={sample('archive.zip', 52_000_000, 'error', { error: 'Trop gros' })} />,
+  );
+  const row = screen.container.querySelector('.ui-file-upload-list')!;
+
+  expect(row).toHaveClass('_error');
+  expect(row.querySelector('.ui-file-upload-list-meta')).toHaveTextContent('Trop gros');
+  expect(row.querySelector('.fa-triangle-exclamation')).not.toBeNull();
+});
+
+test("sans message, l'erreur retombe sur failedLabel", async () => {
+  const screen = await render(
+    <UiFileUploadList file={sample('a.zip', 10, 'error')} failedLabel="Raté" />,
+  );
+
+  expect(screen.container.querySelector('.ui-file-upload-list-meta')).toHaveTextContent('Raté');
+});
+
+test('une image avec aperçu rend une vignette décorative', async () => {
+  const screen = await render(
+    <UiFileUploadList file={sample('photo.jpg', 843_776, 'completed', { objectUrl: THUMB })} />,
+  );
+  const thumb = screen.container.querySelector('img.ui-file-upload-list-thumb')!;
+
+  expect(thumb).toHaveAttribute('src', THUMB);
+  expect(thumb).toHaveAttribute('alt', '');
+  expect(screen.container.querySelector('.ui-file-upload-list')).toHaveClass('_has-thumb');
+});
+
+test('le retrait rend le fichier, et removable le masque', async () => {
+  const onRemove = vi.fn();
+  const file = sample('note.txt', 4096);
+  const screen = await render(<UiFileUploadList file={file} onRemove={onRemove} />);
+
+  await screen.getByRole('button', { name: /Supprimer le fichier/ }).click();
+  expect(onRemove).toHaveBeenCalledWith(file);
+
+  await screen.rerender(<UiFileUploadList file={file} removable={false} />);
+  expect(screen.container.querySelector('.ui-file-upload-list-remove')).toBeNull();
+});
+
+test('la taille small réduit la ligne et ses icônes', async () => {
+  const screen = await render(<UiFileUploadList file={sample('note.txt', 4096)} size="small" />);
+
+  expect(screen.container.querySelector('.ui-file-upload-list')).toHaveClass('_small');
+  expect(screen.container.querySelector('.ui-file-upload-list-media .ui-icon')).toHaveClass('_sm');
+});
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.tsx b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.tsx
new file mode 100644
index 0000000..d6f7979
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload-list.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import type { ComponentPropsWithRef } from 'react';
+
+import { UiIcon, type UiIconSize } from '../../base/ui-icon';
+import { formatLabel } from '../../core/forms';
+import { cx } from '../../core/utils';
+import { UiSpinner } from '../../informative/ui-spinner';
+
+import { formatFileSize, type UiUploadFile } from './ui-file-upload.model';
+
+import './ui-file-upload-list.scss';
+
+export type UiFileUploadListSize = 'default' | 'small';
+
+export interface UiFileUploadListProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  /** Le fichier à afficher : nom, taille, état, progression, aperçu. */
+  file: UiUploadFile;
+  size?: UiFileUploadListSize;
+  /** Icône des fichiers qui ne sont pas des images. */
+  icon?: string;
+  /** Affiche le bouton de retrait. */
+  removable?: boolean;
+  /** Nom accessible du bouton de retrait. Le nom du fichier y est ajouté. */
+  removeAriaLabel?: string;
+  /** Texte d'erreur quand le fichier n'en porte pas. */
+  failedLabel?: string;
+  /** Nom accessible du spinner d'envoi. `{0}` est le nom du fichier. */
+  uploadingLabel?: string;
+  /** Nom accessible de la barre de progression. `{0}` est le nom du fichier. */
+  progressLabel?: string;
+  /** Appelé quand le bouton de retrait est activé. */
+  onRemove?: (file: UiUploadFile) => void;
+}
+
+/**
+ * ui-file-upload-list : une ligne de fichier, l'unité qui se répète dans la
+ * liste d'un envoi.
+ *
+ * Présentationnel : une vignette pour une image, une icône sinon, le nom avec
+ * la taille ou l'état, et un bouton de retrait. Pendant l'envoi, un
+ * `ui-spinner` prend la place de l'icône et une barre de progression fine
+ * apparaît en pied de ligne.
+ *
+ * Le nom suit le composant Figma ; `ui-file-upload` empile une ligne par
+ * fichier.
+ */
+export function UiFileUploadList({
+  file,
+  size = 'default',
+  icon = 'file',
+  removable = true,
+  removeAriaLabel = 'Supprimer le fichier',
+  failedLabel = 'Échec',
+  uploadingLabel = 'Téléversement de {0}',
+  progressLabel = 'Progression du téléversement de {0}',
+  onRemove,
+  className,
+  ...rest
+}: UiFileUploadListProps) {
+  const isUploading = file.status === 'uploading';
+  const isError = file.status === 'error';
+  const thumbnail = file.objectUrl ?? null;
+  const sizeLabel = formatFileSize(file.size);
+  const iconSize: UiIconSize = size === 'small' ? 'sm' : 'md';
+
+  const infoLabel = isError
+    ? (file.error ?? failedLabel)
+    : isUploading
+      ? `${sizeLabel} · ${Math.round(file.progress)} %`
+      : sizeLabel;
+
+  return (
+    <div
+      {...rest}
+      className={cx(
+        'ui-file-upload-list',
+        size !== 'default' && `_${size}`,
+        isError && '_error',
+        thumbnail && '_has-thumb',
+        className,
+      )}
+    >
+      <div className="ui-file-upload-list-file">
+        <span className="ui-file-upload-list-media">
+          {isUploading ? (
+            <UiSpinner size="small" aria-label={formatLabel(uploadingLabel, file.name)} />
+          ) : thumbnail ? (
+            <img className="ui-file-upload-list-thumb" src={thumbnail} alt="" />
+          ) : (
+            <UiIcon name={isError ? 'triangle-exclamation' : icon} size={iconSize} />
+          )}
+        </span>
+
+        <span className="ui-file-upload-list-infos">
+          <span className="ui-file-upload-list-name" title={file.name}>
+            {file.name}
+          </span>
+          <span className="ui-file-upload-list-meta">{infoLabel}</span>
+        </span>
+      </div>
+
+      {removable && (
+        <button
+          type="button"
+          className="ui-file-upload-list-remove"
+          aria-label={`${removeAriaLabel} : ${file.name}`}
+          onClick={() => onRemove?.(file)}
+        >
+          <UiIcon name="trash" size={iconSize} />
+        </button>
+      )}
+
+      {isUploading && (
+        <div
+          className="ui-file-upload-list-progress"
+          role="progressbar"
+          aria-valuenow={file.progress}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label={formatLabel(progressLabel, file.name)}
+        >
+          <span
+            className="ui-file-upload-list-progress-bar"
+            style={{ width: `${file.progress}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.mdx b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.mdx
new file mode 100644
index 0000000..711cbbb
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.mdx
@@ -0,0 +1,252 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
+import { ConfigTable } from '@sb/blocks/config-table';
+import * as FileUploadStories from './ui-file-upload.stories';
+
+<Meta of={FileUploadStories} />
+
+# ui-file-upload
+
+Téléversement de fichiers, en champ compact (`field`) ou en zone de **glisser-déposer**
+(`drag`). La sélection passe par un `<input type="file">` natif, masqué mais focalisable :
+le sélecteur du système, le clavier et les lecteurs d'écran marchent nativement, et toute
+la surface accepte le dépôt. Les fichiers sont validés côté client (type, taille, nombre)
+puis envoyés d'eux-mêmes (`auto`), à la demande, ou par la fonction de l'application
+(`customUpload`). La progression passe par `XMLHttpRequest`, sans client HTTP à fournir.
+
+<Canvas of={FileUploadStories.Basic} />
+
+> ℹ️ **Pas un champ contrôlé.** Contrairement aux autres champs du kit, `ui-file-upload`
+> n'a ni `value` ni `onValueChange` : sa valeur (des `File` et leur état d'envoi) ne se
+> sérialise pas dans un état de formulaire. On le suit par `onFilesChange`,
+> `onFilesSelect`, `onUploadComplete` et `onRemove`, et on reporte le résultat (des
+> identifiants, des URL) dans son formulaire. Avec `name`, la sélection part aussi avec un
+> formulaire **natif**.
+
+## API
+
+<ArgTypes of={FileUploadStories} />
+
+## Auto
+
+Avec `auto`, un fichier part dès qu'il est choisi. Le bouton Téléverser disparaît, il n'y
+a plus rien à déclencher.
+
+<Canvas of={FileUploadStories.Auto} />
+
+## Advanced
+
+Glisser-déposer, plusieurs fichiers, progression, et les trois validations : `accept`,
+`maxFileSize` et `fileLimit`. Un fichier refusé n'entre pas dans la liste ; le motif est
+annoncé et `onUploadError` le reçoit avec sa raison (`type`, `size` ou `limit`).
+
+<Canvas of={FileUploadStories.Advanced} />
+
+## Envoi délégué
+
+`customUpload` remplace l'envoi intégré par la fonction de l'application.
+`onCustomUpload` reçoit les fichiers en attente et trois fonctions pour piloter leur
+état : `setProgress`, `markUploaded` et `markError`.
+
+<Canvas of={FileUploadStories.CustomUpload} />
+
+## Envoi intégré
+
+Sans `customUpload`, `url` suffit : chaque fichier part dans sa propre requête
+multipart, sous `fieldName`. `withCredentials` est coupé par défaut, aucun cookie ne part
+vers une autre origine sans le demander.
+
+```tsx
+import { UiFileUpload } from '@4sh/ui-kit-react/ui-file-upload';
+
+<UiFileUpload
+  mode="drag"
+  multiple
+  accept="image/*,.pdf"
+  maxFileSize={5 * 1024 * 1024}
+  url="/api/upload"
+  aria-label="Téléverser des documents"
+  onUploadComplete={({ files, xhr }) => enregistrer(files, xhr.response)}
+  onUploadError={({ file, reason, message }) => signaler(file, reason, message)}
+/>;
+```
+
+## Aperçu en grille
+
+`renderContent` reçoit tous les fichiers et rend toute la section. Chaque image porte son
+`objectUrl`, que le composant révoque lui-même au retrait.
+
+<Canvas of={FileUploadStories.ImagePreview} />
+
+## Rendus personnalisés
+
+Trois props de rendu, chacune avec les actions dont elle a besoin :
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Reçoit</th>
+      <th>Remplace</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>renderFile</code>
+      </td>
+      <td>
+        le fichier, puis <code>{'{ remove }'}</code>
+      </td>
+      <td>une ligne, dans son élément de liste</td>
+    </tr>
+    <tr>
+      <td>
+        <code>renderContent</code>
+      </td>
+      <td>
+        les fichiers, puis <code>{'{ remove, clear }'}</code>
+      </td>
+      <td>
+        toute la section, rendue même vide. Prioritaire sur <code>renderFile</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>renderToolbar</code>
+      </td>
+      <td>
+        les fichiers, puis <code>{'{ choose, upload, clear }'}</code>
+      </td>
+      <td>
+        la barre d'actions du mode <code>drag</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={FileUploadStories.Template} />
+
+## Dans un formulaire natif
+
+Le sélecteur est vidé après chaque choix, pour qu'un nouveau choix du même fichier
+redéclenche `change` : il ne peut donc rien porter jusqu'au formulaire. Avec `name`, un
+second champ, caché, reçoit la sélection courante, et c'est lui que le formulaire soumet.
+Désactivé, le composant ne soumet rien, comme tout champ natif.
+
+## Accessibilité
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Point</th>
+      <th>Mise en œuvre</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <strong>Contrôle natif</strong>
+      </td>
+      <td>
+        Un vrai <code>&lt;input type="file"&gt;</code>, masqué visuellement mais focalisable,
+        porte la sélection : sélecteur du système, tabulation et activation au clavier
+        natifs. Son nom accessible vient d'<code>aria-label</code>, qui a une valeur par
+        défaut ; un nom vide déclenche un avertissement en développement.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Zone de dépôt</strong>
+      </td>
+      <td>
+        Toute la surface est un <code>&lt;label&gt;</code> du champ. L'anneau de focus se
+        pose sur la zone quand le champ reçoit le focus au clavier (
+        <code>:focus-visible</code>).
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Progression</strong>
+      </td>
+      <td>
+        Chaque ligne en cours montre un <code>ui-spinner</code> et une barre{' '}
+        <code>role="progressbar"</code>. Les boutons de retrait sont de vrais{' '}
+        <code>&lt;button&gt;</code>, nommés avec le fichier.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Erreurs</strong>
+      </td>
+      <td>
+        Les refus sont annoncés dans une région <code>role="alert"</code>. La couleur n'est
+        jamais seule : un message et une icône l'accompagnent.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Sécurité
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Point</th>
+      <th>Mise en œuvre</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <strong>Validation client</strong>
+      </td>
+      <td>
+        <code>accept</code>, <code>maxFileSize</code> et <code>fileLimit</code> filtrent avant
+        l'envoi, et ce n'est **qu'un confort**. Le serveur revalide toujours : type réel,
+        taille, nombre et contenu.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Fuites mémoire</strong>
+      </td>
+      <td>
+        Les URL d'objet des aperçus sont révoquées au retrait, au remplacement, à
+        l'effacement et au démontage, et aussitôt pour un fichier refusé. Les requêtes en vol
+        sont annulées dans les mêmes cas.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Noms de fichiers</strong>
+      </td>
+      <td>
+        Rendus comme texte par React, donc échappés. Jamais écrits en HTML (voir{' '}
+        <code>docs/SECURITY-PRACTICES.md</code>).
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Requête</strong>
+      </td>
+      <td>
+        <code>withCredentials</code> est coupé par défaut : aucun cookie vers une autre
+        origine sans le demander.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Composition
+
+La liste est faite de lignes **`ui-file-upload-list`**, une par fichier : la même unité
+que dans Figma. Chaque ligne passe sur `ui-spinner` pendant l'envoi. Voir
+[ui-file-upload-list](?path=/docs/components-ui-forms-ui-file-upload-list--docs).
+
+## Theming
+
+La zone de dépôt et la ligne de fichier ont chacune leur configuration.
+
+<ConfigTable of="ui-file-upload" label="ui-file-upload" />
+
+<ConfigTable of="ui-file-upload-list" label="ui-file-upload-list" />
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.model.test.ts b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.model.test.ts
new file mode 100644
index 0000000..1999d77
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.model.test.ts
@@ -0,0 +1,37 @@
+import { expect, test } from 'vitest';
+
+import { formatFileSize, isFileTypeAccepted, isImageFile } from './ui-file-upload.model';
+
+const fichier = (name: string, type = '') => new File(['x'], name, { type });
+
+test('formatFileSize rend une taille lisible en base 1024', () => {
+  expect(formatFileSize(0)).toBe('0 B');
+  expect(formatFileSize(-5)).toBe('0 B');
+  expect(formatFileSize(512)).toBe('512 B');
+  expect(formatFileSize(1024)).toBe('1 KB');
+  expect(formatFileSize(2_621_440)).toBe('2.5 MB');
+  // Au-delà de la dernière unité, on reste sur elle plutôt que d'inventer la suivante.
+  expect(formatFileSize(1024 ** 6)).toBe('1048576 TB');
+});
+
+test('isFileTypeAccepted accepte tout sans filtre', () => {
+  expect(isFileTypeAccepted(fichier('a.exe'), undefined)).toBe(true);
+  expect(isFileTypeAccepted(fichier('a.exe'), '')).toBe(true);
+  expect(isFileTypeAccepted(fichier('a.exe'), ' , ')).toBe(true);
+});
+
+test('isFileTypeAccepted lit les trois formes du filtre', () => {
+  const accept = 'image/*, .PDF, text/plain';
+
+  expect(isFileTypeAccepted(fichier('photo.png', 'image/png'), accept)).toBe(true);
+  expect(isFileTypeAccepted(fichier('RAPPORT.pdf'), accept)).toBe(true);
+  expect(isFileTypeAccepted(fichier('note.txt', 'text/plain'), accept)).toBe(true);
+  expect(isFileTypeAccepted(fichier('page.html', 'text/html'), accept)).toBe(false);
+  expect(isFileTypeAccepted(fichier('film.mp4', 'video/mp4'), accept)).toBe(false);
+});
+
+test('isImageFile ne regarde que le type MIME', () => {
+  expect(isImageFile(fichier('a.png', 'image/png'))).toBe(true);
+  expect(isImageFile(fichier('a.png'))).toBe(false);
+  expect(isImageFile(fichier('a.pdf', 'application/pdf'))).toBe(false);
+});
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.model.ts b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.model.ts
new file mode 100644
index 0000000..e19bb86
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.model.ts
@@ -0,0 +1,93 @@
+// =====================================================================
+// Modèle partagé par ui-file-upload et sa ligne de fichier
+// (ui-file-upload-list). Rien ici ne rend : types et fonctions pures.
+// =====================================================================
+
+/** Cycle de vie d'un fichier sélectionné. */
+export type UiUploadStatus = 'pending' | 'uploading' | 'completed' | 'error';
+
+/** Un fichier de la sélection, avec son état de validation et d'envoi. */
+export interface UiUploadFile {
+  /** Identifiant stable, conservé d'un rendu à l'autre. */
+  readonly id: string;
+  /** Le `File` du navigateur. */
+  readonly file: File;
+  /** Nom du fichier, repris du `File` pour le rendu. */
+  readonly name: string;
+  /** Taille en octets. */
+  readonly size: number;
+  /** Type MIME annoncé par le navigateur. */
+  readonly type: string;
+  /** État courant. */
+  readonly status: UiUploadStatus;
+  /** Progression de 0 à 100, qui n'a de sens que pendant `uploading`. */
+  readonly progress: number;
+  /** URL d'objet de l'aperçu d'une image. Le composant la révoque au retrait. */
+  readonly objectUrl?: string;
+  /** Message de validation ou d'envoi, quand `status` vaut `error`. */
+  readonly error?: string;
+}
+
+/** Ce que reçoit `onCustomUpload`, quand l'envoi est délégué (`customUpload`). */
+export interface UiUploadHandlerEvent {
+  /** Les fichiers à envoyer (ceux qui étaient en attente). */
+  files: UiUploadFile[];
+  /** Marque un fichier comme envoyé : état `completed`, progression 100. */
+  markUploaded: (file: UiUploadFile) => void;
+  /** Marque un fichier en échec, avec un message facultatif. */
+  markError: (file: UiUploadFile, message?: string) => void;
+  /** Met à jour la progression d'un fichier (0 à 100). */
+  setProgress: (file: UiUploadFile, progress: number) => void;
+}
+
+/** Émis quand l'envoi intégré d'un fichier aboutit. */
+export interface UiUploadEvent {
+  files: UiUploadFile[];
+  /** La requête brute, pour lire la réponse du serveur. */
+  xhr?: XMLHttpRequest;
+}
+
+/** Émis sur un refus de validation ou un échec d'envoi. */
+export interface UiUploadErrorEvent {
+  file: UiUploadFile;
+  reason: 'type' | 'size' | 'limit' | 'upload';
+  message: string;
+}
+
+/** Taille lisible (« 2.5 MB »), en base 1024. */
+export function formatFileSize(bytes: number): string {
+  if (!bytes || bytes < 0) return '0 B';
+  const k = 1024;
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), units.length - 1);
+  const value = bytes / Math.pow(k, i);
+  const rounded = Math.round(value * 10) / 10;
+  return `${rounded} ${units[i]}`;
+}
+
+/**
+ * Le `File` correspond-il au filtre `accept` (« image/*,.pdf ») ?
+ * Un filtre vide ou absent accepte tout.
+ */
+export function isFileTypeAccepted(file: File, accept: string | undefined): boolean {
+  if (!accept) return true;
+  const patterns = accept
+    .split(',')
+    .map((t) => t.trim().toLowerCase())
+    .filter(Boolean);
+  if (!patterns.length) return true;
+
+  const name = file.name.toLowerCase();
+  const mime = (file.type || '').toLowerCase();
+
+  return patterns.some((pattern) => {
+    if (pattern.startsWith('.')) return name.endsWith(pattern); // extension
+    if (pattern.endsWith('/*')) return mime.startsWith(pattern.slice(0, -1)); // « image/ »
+    return mime === pattern; // type MIME exact
+  });
+}
+
+/** Le `File` est-il une image dont on peut montrer l'aperçu ? */
+export function isImageFile(file: File): boolean {
+  return /^image\//.test(file.type);
+}
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.scss b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.scss
new file mode 100644
index 0000000..bac9bd9
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.scss
@@ -0,0 +1,263 @@
+@use 'utils';
+@use 'sass:map';
+
+// =====================================================================
+// ui-file-upload : co-located styles. All values come from design tokens.
+//
+// No host element here, so `.ui-file-upload` IS the component's box. Each
+// file row sits in a `.ui-file-upload-item`, not a bare `li`: without style
+// encapsulation, an element selector would also reach the markup an app
+// renders through `renderContent` or `renderFile` (decision D5).
+//
+// Extend:
+//   • Size → add entries to $field-height / $zone-min and the matching
+//     `-small` config values (+ the size type).
+// =====================================================================
+
+// --- Config ----------------------------------------------------------
+$stroke-width: var(--ui-file-upload-stroke-width, #{utils.$form-field-stroke-width});      /// Épaisseur de bordure de la zone de dépôt.
+$radius: var(--ui-file-upload-radius, #{utils.$form-field-radius});                       /// Rayon de la zone de dépôt.
+$focus-ring-width: var(--ui-file-upload-focus-ring-width, #{utils.$form-focus-ring-width}); /// Épaisseur de l'anneau de focus.
+$gap: var(--ui-file-upload-gap, var(--units-default));                                    /// Espacement entre la zone, la barre d'outils et la liste.
+
+/// Hauteur de la zone en présentation compacte, par taille.
+$field-height: (
+  'default': var(--ui-file-upload-field-height, #{utils.$form-field-height}),
+  'small': var(--ui-file-upload-field-height-small, #{utils.$form-field-height-small}),
+);
+
+$field-gap: var(--ui-file-upload-field-gap, var(--units-sm));             /// Espacement libellé ↔ bouton de sélection.
+$field-padding-x: var(--ui-file-upload-field-padding-x, var(--units-md)); /// Inset horizontal du libellé en présentation compacte.
+$placeholder-opacity: var(--ui-file-upload-placeholder-opacity, 0.75);    /// Opacité du texte indicatif tant qu'aucun fichier n'est choisi.
+
+$field-font-size: var(--ui-file-upload-field-font-size, var(--size-typography-text-default));        /// Taille du libellé en présentation compacte.
+$field-font-size-small: var(--ui-file-upload-field-font-size-small, var(--size-typography-text-md)); /// Taille du libellé en présentation compacte, taille `small`.
+
+$browse-padding-x: var(--ui-file-upload-browse-padding-x, var(--units-default));                      /// Inset horizontal du bouton de sélection.
+$browse-padding-x-small: var(--ui-file-upload-browse-padding-x-small, var(--units-md));               /// Inset horizontal du bouton de sélection, taille `small`.
+$browse-font-size: var(--ui-file-upload-browse-font-size, var(--size-typography-text-default));       /// Taille du libellé du bouton de sélection.
+$browse-font-size-small: var(--ui-file-upload-browse-font-size-small, var(--size-typography-text-md)); /// Taille du libellé du bouton de sélection, taille `small`.
+
+/// Hauteur minimale de la zone de dépôt, par taille.
+$zone-min: (
+  'default': var(--ui-file-upload-zone-min-height, 112px),
+  'small': var(--ui-file-upload-zone-min-height-small, 94px),
+);
+
+$zone-padding: var(--ui-file-upload-zone-padding, var(--units-default));      /// Inset de la zone de dépôt.
+$zone-gap: var(--ui-file-upload-zone-gap, var(--units-lg));                   /// Espacement icône ↔ contenu de la zone de dépôt.
+$zone-gap-small: var(--ui-file-upload-zone-gap-small, var(--units-sm));       /// Espacement icône ↔ contenu de la zone de dépôt, taille `small`.
+$zone-content-gap: var(--ui-file-upload-zone-content-gap, var(--units-xs));   /// Espacement titre ↔ indication.
+$zone-title-gap: var(--ui-file-upload-zone-title-gap, var(--units-2xs));      /// Espacement entre les fragments du titre de la zone.
+
+$zone-title-font-size: var(--ui-file-upload-zone-title-font-size, var(--size-typography-text-default));        /// Taille du titre de la zone de dépôt.
+$zone-title-font-size-small: var(--ui-file-upload-zone-title-font-size-small, var(--size-typography-text-md)); /// Taille du titre de la zone de dépôt, taille `small`.
+$zone-hint-font-size: var(--ui-file-upload-zone-hint-font-size, var(--size-typography-text-md));               /// Taille de l'indication sous le titre.
+$zone-hint-font-size-small: var(--ui-file-upload-zone-hint-font-size-small, var(--size-typography-text-sm));   /// Taille de l'indication sous le titre, taille `small`.
+
+$toolbar-gap: var(--ui-file-upload-toolbar-gap, var(--units-sm));                            /// Espacement entre les actions de la barre d'outils.
+$content-gap: var(--ui-file-upload-content-gap, var(--units-sm));                            /// Espacement entre les lignes de fichier.
+$messages-gap: var(--ui-file-upload-messages-gap, var(--units-2xs));                         /// Espacement entre les messages.
+$message-font-size: var(--ui-file-upload-message-font-size, var(--size-typography-text-md)); /// Taille d'un message.
+
+.ui-file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+  width: 100%;
+  font-family: var(--ui-file-upload-font-family, var(--fontfamily-base)); /// Famille typographique du composant.
+
+  // --- Native input: visually hidden but focusable -------------------
+  &-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  // =================================================================
+  // Field mode
+  // =================================================================
+  &-field {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $field-gap;
+    height: map.get($field-height, 'default');
+    padding-left: $field-padding-x;
+    overflow: hidden;
+    background-color: var(--ui-file-upload-surface, var(--form-high-surface-default));           /// Fond du déclencheur (champ compact comme zone de dépôt).
+    border: $stroke-width solid var(--ui-file-upload-stroke, var(--form-high-stroke-default));   /// Couleur de bordure du déclencheur.
+    border-radius: $radius;
+    color: var(--ui-file-upload-color, var(--form-high-content-default));                        /// Couleur du texte du déclencheur.
+    cursor: pointer;
+    @include utils.control-transition(background-color, border-color, color, box-shadow);
+
+    &:hover {
+      background-color: var(--ui-file-upload-surface-hover, var(--form-high-surface-hover));     /// Fond du déclencheur au survol.
+      border-color: var(--ui-file-upload-stroke-hover, var(--form-high-stroke-hover));           /// Couleur de bordure du déclencheur au survol.
+    }
+  }
+
+  &._small &-field { height: map.get($field-height, 'small'); }
+
+  &-field-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: $field-font-size;
+    font-weight: var(--ui-file-upload-field-text-weight, var(--weight-regular)); /// Graisse du texte du champ.
+
+    &._placeholder { color: var(--ui-file-upload-color, var(--form-high-content-default)); opacity: $placeholder-opacity; }
+  }
+  &._small &-field-text { font-size: $field-font-size-small; }
+
+  // Browse "button" (styled span: the label owns the click) -----------
+  &-browse {
+    display: inline-flex;
+    align-items: center;
+    align-self: stretch;
+    flex: none;
+    padding: 0 $browse-padding-x;
+    background-color: var(--ui-file-upload-browse-surface, var(--actions-high-surface-default)); /// Fond du lien de parcours.
+    color: var(--ui-file-upload-browse-color, var(--actions-high-content-default));              /// Couleur du lien de parcours.
+    font-size: $browse-font-size;
+    font-weight: var(--ui-file-upload-browse-weight, var(--weight-bold)); /// Graisse du lien de parcours.
+  }
+  &._small &-browse { padding: 0 $browse-padding-x-small; font-size: $browse-font-size-small; }
+  &-field:hover &-browse { background-color: var(--ui-file-upload-browse-surface-hover, var(--actions-high-surface-hover)); } /// Fond du lien de parcours au survol.
+
+  // =================================================================
+  // Drag mode
+  // =================================================================
+  &-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $zone-gap;
+    min-height: map.get($zone-min, 'default');
+    padding: $zone-padding;
+    background-color: var(--ui-file-upload-surface, var(--form-high-surface-default));
+    border: $stroke-width dashed var(--ui-file-upload-stroke, var(--form-high-stroke-default));
+    border-radius: $radius;
+    color: var(--ui-file-upload-color, var(--form-high-content-default));
+    text-align: center;
+    cursor: pointer;
+    @include utils.control-transition(background-color, border-color, box-shadow);
+
+    &:hover {
+      background-color: var(--ui-file-upload-surface-hover, var(--form-high-surface-hover));
+      border-color: var(--ui-file-upload-stroke-hover, var(--form-high-stroke-hover));
+    }
+  }
+  &._small &-zone { gap: $zone-gap-small; min-height: map.get($zone-min, 'small'); }
+
+  // Active drag-over highlight (solid border + focused surface).
+  &._dragging &-zone {
+    background-color: var(--ui-file-upload-surface-dragging, var(--form-high-surface-focused)); /// Fond de la zone pendant un survol de dépôt.
+    border-style: solid;
+    border-color: var(--ui-file-upload-stroke-dragging, var(--form-high-stroke-focused));       /// Couleur de bordure de la zone pendant un survol de dépôt.
+  }
+
+  &-zone-icon { color: var(--ui-file-upload-color, var(--form-high-content-default)); line-height: 0; }
+
+  &-zone-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $zone-content-gap;
+  }
+
+  &-zone-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: $zone-title-gap;
+    font-size: $zone-title-font-size;
+    font-weight: var(--ui-file-upload-zone-title-weight, var(--weight-regular)); /// Graisse du titre de la zone.
+  }
+  &._small &-zone-title { font-size: $zone-title-font-size-small; }
+
+  // "Click to upload" styled as a link (the whole zone is the trigger).
+  &-zone-link {
+    color: var(--ui-file-upload-zone-link-color, var(--actions-low-content-default)); /// Couleur du lien de la zone.
+    font-weight: var(--ui-file-upload-zone-link-weight, var(--weight-bold)); /// Graisse du lien de la zone.
+    text-decoration: underline;
+  }
+  &-zone-prompt { color: var(--ui-file-upload-color, var(--form-high-content-default)); }
+
+  &-zone-hint {
+    color: var(--ui-file-upload-zone-hint-color, var(--global-text-muted)); /// Couleur de l'indication secondaire de la zone.
+    font-size: $zone-hint-font-size;
+  }
+  &._small &-zone-hint { font-size: $zone-hint-font-size-small; }
+
+  // =================================================================
+  // Focus ring (native input drives it), sibling of the label
+  // =================================================================
+  &-input:focus-visible ~ &-field,
+  &-input:focus-visible ~ &-zone {
+    outline: none;
+    border-color: var(--ui-file-upload-stroke-focus, var(--form-high-stroke-focused)); /// Couleur de bordure au focus clavier.
+    box-shadow: 0 0 0 $focus-ring-width var(--ui-file-upload-focus-ring-color, var(--form-high-stroke-focused)); /// Couleur de l'anneau de focus.
+  }
+
+  // =================================================================
+  // Toolbar / content / messages
+  // =================================================================
+  &-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $toolbar-gap;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: $content-gap;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &-item { display: block; }
+
+  &-messages { display: flex; flex-direction: column; gap: $messages-gap; }
+  &-message {
+    margin: 0;
+    // Pas `informative-errorhigh-content` : c'est le contenu posé SUR la surface
+    // d'erreur forte, donc blanc, et le message est sur un fond neutre (mesuré à
+    // 1:1). Ni `informative-errorlow-content`, identique dans les deux modes, et
+    // donc à 2.74:1 en sombre. Le jeton d'erreur de la famille formulaire suit le mode.
+    color: var(--ui-file-upload-message-color, var(--form-error-content-default)); /// Couleur d'un message d'erreur.
+    font-size: $message-font-size;
+  }
+
+  // =================================================================
+  // Disabled
+  // =================================================================
+  &._disabled {
+    .ui-file-upload-field,
+    .ui-file-upload-zone {
+      background-color: var(--ui-file-upload-surface-disabled, var(--form-high-surface-disabled)); /// Fond du déclencheur désactivé.
+      border-color: var(--ui-file-upload-stroke-disabled, var(--form-high-stroke-disabled));       /// Couleur de bordure du déclencheur désactivé.
+      color: var(--ui-file-upload-color-disabled, var(--form-high-content-disabled));              /// Couleur du texte du déclencheur désactivé.
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    .ui-file-upload-browse {
+      background-color: var(--ui-file-upload-browse-surface-disabled, var(--actions-high-surface-disabled)); /// Fond du lien de parcours désactivé.
+      color: var(--ui-file-upload-browse-color-disabled, var(--actions-high-content-disabled));              /// Couleur du lien de parcours désactivé.
+    }
+  }
+}
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.stories.tsx b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.stories.tsx
new file mode 100644
index 0000000..2862040
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.stories.tsx
@@ -0,0 +1,267 @@
+import type { CSSProperties } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UiButton } from '../../actions/ui-button';
+
+import { UiFileUpload } from './ui-file-upload';
+import type { UiUploadHandlerEvent } from './ui-file-upload.model';
+
+/**
+ * Un envoi simulé : chaque fichier avance sur une minuterie, puis se termine.
+ * Il tient lieu de serveur pour que la progression et le spinner se voient ;
+ * une vraie intégration renseigne `url`, ou fait le travail ici.
+ */
+function simulateUpload(event: UiUploadHandlerEvent): void {
+  event.files.forEach((file, index) => {
+    let progress = 0;
+    const tick = (): void => {
+      progress += 12 + Math.random() * 18;
+      if (progress >= 100) {
+        event.setProgress(file, 100);
+        event.markUploaded(file);
+      } else {
+        event.setProgress(file, progress);
+        setTimeout(tick, 260);
+      }
+    };
+    setTimeout(tick, 200 + index * 180);
+  });
+}
+
+const meta: Meta<typeof UiFileUpload> = {
+  title: 'Components/ui/forms/ui-file-upload',
+  component: UiFileUpload,
+  args: {
+    mode: 'field',
+    size: 'default',
+    multiple: false,
+    auto: false,
+    customUpload: false,
+    disabled: false,
+  },
+  argTypes: {
+    mode: { control: 'inline-radio', options: ['field', 'drag'] },
+    size: { control: 'inline-radio', options: ['default', 'small'] },
+    multiple: { control: 'boolean' },
+    accept: { control: 'text' },
+    auto: { control: 'boolean' },
+    customUpload: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    hint: { control: 'text' },
+    renderFile: { control: false },
+    renderContent: { control: false },
+    renderToolbar: { control: false },
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/GZww5hdUA49LB8XWeWP6tl/-Projet----UI-Kit?node-id=154-4706',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UiFileUpload>;
+
+const wide: CSSProperties = { width: 460, maxWidth: '90vw' };
+
+/** Sélection de fichiers, glisser-déposer compris : l'équivalent du type « Field ». */
+export const Basic: Story = {
+  args: {
+    mode: 'field',
+    multiple: true,
+    accept: 'image/*',
+    'aria-label': 'Téléverser des fichiers',
+  },
+};
+
+/** Avec `auto`, un fichier part dès qu'il est choisi. */
+export const Auto: Story = {
+  args: {
+    mode: 'field',
+    multiple: true,
+    accept: 'image/*',
+    auto: true,
+    customUpload: true,
+    'aria-label': 'Téléversement automatique',
+    onCustomUpload: simulateUpload,
+  },
+};
+
+/** Glisser-déposer, plusieurs fichiers, progression, et les trois validations. */
+export const Advanced: Story = {
+  args: { mode: 'drag' },
+  render: (args) => (
+    <div style={wide}>
+      <UiFileUpload
+        {...args}
+        multiple
+        customUpload
+        accept="image/*,.pdf"
+        maxFileSize={5_242_880}
+        fileLimit={5}
+        hint="JPG, PNG, PDF · 5 fichiers max · 5 Mo par fichier"
+        aria-label="Téléverser des documents"
+        onCustomUpload={simulateUpload}
+      />
+    </div>
+  ),
+};
+
+/** `customUpload` remplace l'envoi intégré par la fonction de l'application. */
+export const CustomUpload: Story = {
+  render: () => (
+    <div style={wide}>
+      <UiFileUpload
+        mode="drag"
+        multiple
+        customUpload
+        accept="image/*"
+        hint="Gestionnaire de téléversement personnalisé"
+        aria-label="Téléversement personnalisé"
+        onCustomUpload={(event) => {
+          // Ici : envoyer `event.files` vers son propre service, puis signaler
+          // la progression et l'issue par les fonctions fournies.
+          simulateUpload(event);
+        }}
+      />
+    </div>
+  ),
+};
+
+const grid: CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+  gap: 12,
+  margin: 0,
+  padding: 0,
+  listStyle: 'none',
+};
+const cell: CSSProperties = {
+  position: 'relative',
+  overflow: 'hidden',
+  borderRadius: 8,
+  border: '1px solid var(--form-high-stroke-default)',
+  background: 'var(--form-high-surface-default)',
+};
+const thumb: CSSProperties = { display: 'block', width: '100%', height: 96, objectFit: 'cover' };
+const caption: CSSProperties = {
+  display: 'block',
+  padding: '6px 8px',
+  fontSize: 12,
+  color: 'var(--form-high-content-default)',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+};
+const removeButton: CSSProperties = { position: 'absolute', top: 6, right: 6 };
+
+/** Aperçu en grille : `renderContent` reçoit tous les fichiers et rend la section. */
+export const ImagePreview: Story = {
+  render: () => (
+    <div style={{ width: 520, maxWidth: '92vw' }}>
+      <UiFileUpload
+        mode="drag"
+        multiple
+        customUpload
+        accept="image/*"
+        hint="Images uniquement"
+        aria-label="Téléverser des images"
+        onCustomUpload={simulateUpload}
+        renderContent={(files, { remove }) =>
+          files.length > 0 && (
+            <ul style={grid}>
+              {files.map((f) => (
+                <li key={f.id} style={cell}>
+                  <img src={f.objectUrl} alt={f.name} style={thumb} />
+                  <span style={removeButton}>
+                    <UiButton
+                      icon="xmark"
+                      iconOnly
+                      rounded
+                      size="small"
+                      level="low"
+                      aria-label={`Supprimer ${f.name}`}
+                      onClick={() => remove(f)}
+                    />
+                  </span>
+                  <span style={caption} title={f.name}>
+                    {f.name}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )
+        }
+      />
+    </div>
+  ),
+};
+
+const row: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 12,
+  padding: '8px 12px',
+  border: '1px solid var(--form-high-stroke-default)',
+  borderRadius: 8,
+  color: 'var(--form-high-content-default)',
+};
+
+/**
+ * Tout se remplace par des props de rendu : `renderFile` (une ligne),
+ * `renderContent` (la section) et `renderToolbar` (la barre d'actions).
+ */
+export const Template: Story = {
+  render: () => (
+    <div style={{ width: 480, maxWidth: '92vw' }}>
+      <UiFileUpload
+        mode="drag"
+        multiple
+        customUpload
+        accept="image/*,.pdf"
+        aria-label="Téléverser des fichiers"
+        onCustomUpload={simulateUpload}
+        renderToolbar={(files, { choose, upload, clear }) => (
+          <>
+            <UiButton label="Parcourir" size="small" onClick={choose} />
+            <UiButton
+              label={`Envoyer (${files.length})`}
+              size="small"
+              disabled={!files.length}
+              onClick={upload}
+            />
+            <UiButton
+              label="Vider"
+              size="small"
+              level="low"
+              disabled={!files.length}
+              onClick={clear}
+            />
+          </>
+        )}
+        renderFile={(f, { remove }) => (
+          <div style={row}>
+            <span>
+              {f.name} · {f.status}
+            </span>
+            <UiButton
+              label="Retirer"
+              size="small"
+              level="low"
+              aria-label={`Retirer ${f.name}`}
+              onClick={() => remove(f)}
+            />
+          </div>
+        )}
+      />
+    </div>
+  ),
+};
+
+/** Champ compact désactivé. */
+export const Disabled: Story = {
+  args: { mode: 'field', disabled: true, 'aria-label': 'Téléversement désactivé' },
+};
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.test.tsx b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.test.tsx
new file mode 100644
index 0000000..2a28e54
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.test.tsx
@@ -0,0 +1,644 @@
+import { StrictMode, useState } from 'react';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { UiFileUpload, type UiFileUploadProps } from './ui-file-upload';
+import type { UiUploadFile, UiUploadHandlerEvent } from './ui-file-upload.model';
+
+// --- Fabriques ----------------------------------------------------------------
+
+const image = (name = 'photo.png', bytes = 3) =>
+  new File([new Uint8Array(bytes)], name, { type: 'image/png' });
+const pdf = (name = 'doc.pdf') => new File(['%PDF'], name, { type: 'application/pdf' });
+
+const input = (root: ParentNode) => root.querySelector<HTMLInputElement>('.ui-file-upload-input')!;
+const rows = (root: ParentNode) => [...root.querySelectorAll<HTMLElement>('.ui-file-upload-list')];
+const names = (root: ParentNode) =>
+  rows(root).map((r) => r.querySelector('.ui-file-upload-list-name')!.textContent);
+
+/** Sélection par le champ natif, comme le ferait le sélecteur du système. */
+function pick(el: HTMLInputElement, files: File[]) {
+  const data = new DataTransfer();
+  for (const f of files) data.items.add(f);
+  el.files = data.files;
+  el.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+function drag(target: Element, type: string, files: File[] = [], init: DragEventInit = {}) {
+  const data = new DataTransfer();
+  for (const f of files) data.items.add(f);
+  target.dispatchEvent(
+    new DragEvent(type, { bubbles: true, cancelable: true, dataTransfer: data, ...init }),
+  );
+}
+
+// --- Un faux XMLHttpRequest, pour piloter l'envoi intégré pas à pas ------------
+
+class FakeXhr {
+  static all: FakeXhr[] = [];
+  method = '';
+  url = '';
+  withCredentials = false;
+  status = 0;
+  body: FormData | null = null;
+  aborted = false;
+  readonly upload = new EventTarget();
+  private readonly events = new EventTarget();
+
+  constructor() {
+    FakeXhr.all.push(this);
+  }
+  addEventListener(type: string, fn: EventListener) {
+    this.events.addEventListener(type, fn);
+  }
+  open(method: string, url: string) {
+    this.method = method;
+    this.url = url;
+  }
+  send(body: FormData) {
+    this.body = body;
+  }
+  abort() {
+    this.aborted = true;
+    this.events.dispatchEvent(new Event('abort'));
+  }
+  progress(loaded: number, total: number) {
+    this.upload.dispatchEvent(
+      new ProgressEvent('progress', { lengthComputable: true, loaded, total }),
+    );
+  }
+  respond(status: number) {
+    this.status = status;
+    this.events.dispatchEvent(new Event('load'));
+  }
+  fail() {
+    this.events.dispatchEvent(new Event('error'));
+  }
+}
+
+beforeEach(() => {
+  FakeXhr.all = [];
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+function Host(props: Partial<UiFileUploadProps>) {
+  return <UiFileUpload {...props} />;
+}
+
+// --- Champ natif et nom accessible ---------------------------------------------
+
+test('le champ natif porte le nom accessible, et le libellé le désigne', async () => {
+  const screen = await render(<Host accept="image/*" multiple />);
+  const el = input(screen.container);
+
+  await expect.element(screen.getByLabelText('Téléversement de fichiers')).toBe(el);
+  expect(el).toHaveAttribute('type', 'file');
+  expect(el).toHaveAttribute('accept', 'image/*');
+  expect(el.multiple).toBe(true);
+  expect(screen.container.querySelector('label.ui-file-upload-field')).toHaveAttribute(
+    'for',
+    el.id,
+  );
+  expect(screen.container.querySelector('.ui-file-upload-field-text')).toHaveTextContent(
+    'Choisir un fichier…',
+  );
+  expect(screen.container.querySelector('.ui-file-upload-field-text')).toHaveClass('_placeholder');
+});
+
+test('sans nom accessible, le composant avertit une fois', async () => {
+  const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  const screen = await render(<Host aria-label="" />);
+
+  expect(input(screen.container)).not.toHaveAttribute('aria-label');
+  expect(warn).toHaveBeenCalledTimes(1);
+  expect(warn.mock.calls[0]![0]).toContain('[ui-file-upload]');
+});
+
+// --- Sélection -------------------------------------------------------------------
+
+test('une sélection entre dans la liste et le résumé, et notifie la sélection à jour', async () => {
+  const onFilesSelect = vi.fn();
+  const onFilesChange = vi.fn();
+  const screen = await render(<Host onFilesSelect={onFilesSelect} onFilesChange={onFilesChange} />);
+
+  pick(input(screen.container), [pdf('contrat.pdf')]);
+
+  await expect.poll(() => names(screen.container)).toEqual(['contrat.pdf']);
+  expect(screen.container.querySelector('.ui-file-upload-field-text')).toHaveTextContent(
+    'contrat.pdf',
+  );
+  expect(screen.container.querySelector('.ui-file-upload-field-text')).not.toHaveClass(
+    '_placeholder',
+  );
+  expect(onFilesSelect).toHaveBeenCalledTimes(1);
+  expect(onFilesSelect.mock.calls[0]![0].map((f: UiUploadFile) => f.name)).toEqual(['contrat.pdf']);
+  expect(onFilesChange.mock.calls[0]![0].map((f: UiUploadFile) => f.status)).toEqual(['pending']);
+  // Remis à zéro : choisir de nouveau le même fichier redéclenchera `change`.
+  expect(input(screen.container).value).toBe('');
+});
+
+test('en multiple, les sélections s’additionnent et le résumé compte', async () => {
+  const screen = await render(<Host multiple />);
+
+  pick(input(screen.container), [pdf('a.pdf')]);
+  pick(input(screen.container), [pdf('b.pdf'), pdf('c.pdf')]);
+
+  await expect.poll(() => names(screen.container)).toEqual(['a.pdf', 'b.pdf', 'c.pdf']);
+  expect(screen.container.querySelector('.ui-file-upload-field-text')).toHaveTextContent(
+    '3 fichiers',
+  );
+});
+
+test('en simple, le nouveau fichier remplace l’ancien et libère son aperçu', async () => {
+  const revoke = vi.spyOn(URL, 'revokeObjectURL');
+  const screen = await render(<Host />);
+
+  pick(input(screen.container), [image('avant.png')]);
+  await expect.poll(() => names(screen.container)).toEqual(['avant.png']);
+  const avant = screen.container
+    .querySelector('img.ui-file-upload-list-thumb')!
+    .getAttribute('src')!;
+  expect(avant).toMatch(/^blob:/);
+
+  // Deux fichiers d'un coup : un seul entre.
+  pick(input(screen.container), [image('apres.png'), image('ignore.png')]);
+
+  await expect.poll(() => names(screen.container)).toEqual(['apres.png']);
+  expect(revoke).toHaveBeenCalledWith(avant);
+});
+
+test('avec name, un formulaire natif reçoit la sélection, et elle seule', async () => {
+  const screen = await render(
+    <form>
+      <Host name="pieces" multiple />
+    </form>,
+  );
+  const form = screen.container.querySelector('form')!;
+  const sent = () =>
+    (new FormData(form).getAll('pieces') as File[]).map((f) => `${f.name}:${f.size}`);
+
+  pick(input(screen.container), [pdf('a.pdf')]);
+  pick(input(screen.container), [pdf('b.pdf')]);
+
+  // Le sélecteur, vidé, ne soumet rien : seul le champ de valeur porte la sélection.
+  await expect.poll(sent).toEqual(['a.pdf:4', 'b.pdf:4']);
+  expect(input(screen.container)).not.toHaveAttribute('name');
+
+  await screen.getByRole('button', { name: 'Supprimer le fichier : a.pdf' }).click();
+  await expect.poll(sent).toEqual(['b.pdf:4']);
+});
+
+test('désactivé, le formulaire ne soumet pas la sélection', async () => {
+  const screen = await render(
+    <form>
+      <Host name="pieces" />
+    </form>,
+  );
+  pick(input(screen.container), [pdf('a.pdf')]);
+  await expect.poll(() => rows(screen.container)).toHaveLength(1);
+
+  await screen.rerender(
+    <form>
+      <Host name="pieces" disabled />
+    </form>,
+  );
+
+  expect(new FormData(screen.container.querySelector('form')!).getAll('pieces')).toEqual([]);
+});
+
+// --- Validation --------------------------------------------------------------------
+
+test('un type refusé ne rentre pas, et le motif est annoncé', async () => {
+  const onUploadError = vi.fn();
+  const screen = await render(<Host accept="image/*" multiple onUploadError={onUploadError} />);
+
+  pick(input(screen.container), [pdf('rapport.pdf'), image('ok.png')]);
+
+  await expect.poll(() => names(screen.container)).toEqual(['ok.png']);
+  await expect
+    .element(screen.getByRole('alert'))
+    .toHaveTextContent('Type de fichier non autorisé : rapport.pdf');
+  expect(onUploadError).toHaveBeenCalledWith(
+    expect.objectContaining({
+      reason: 'type',
+      message: 'Type de fichier non autorisé : rapport.pdf',
+    }),
+  );
+  expect(onUploadError.mock.calls[0]![0].file.status).toBe('error');
+});
+
+test("un fichier trop lourd est refusé, et l'aperçu créé pour lui est révoqué aussitôt", async () => {
+  const revoke = vi.spyOn(URL, 'revokeObjectURL');
+  const create = vi.spyOn(URL, 'createObjectURL');
+  const onUploadError = vi.fn();
+  const screen = await render(<Host maxFileSize={10} onUploadError={onUploadError} />);
+
+  pick(input(screen.container), [image('lourde.png', 64)]);
+
+  await expect
+    .element(screen.getByRole('alert'))
+    .toHaveTextContent('Fichier trop volumineux : lourde.png');
+  expect(rows(screen.container)).toHaveLength(0);
+  expect(onUploadError.mock.calls[0]![0].reason).toBe('size');
+  expect(revoke).toHaveBeenCalledWith(create.mock.results[0]!.value);
+});
+
+test('au-delà de fileLimit, les fichiers en trop sont refusés', async () => {
+  const onUploadError = vi.fn();
+  const screen = await render(<Host multiple fileLimit={2} onUploadError={onUploadError} />);
+
+  pick(input(screen.container), [pdf('a.pdf')]);
+  pick(input(screen.container), [pdf('b.pdf'), pdf('c.pdf')]);
+
+  await expect.poll(() => names(screen.container)).toEqual(['a.pdf', 'b.pdf']);
+  await expect
+    .element(screen.getByRole('alert'))
+    .toHaveTextContent('Nombre maximum de fichiers atteint (2).');
+  expect(onUploadError.mock.calls.map((c) => c[0].reason)).toEqual(['limit']);
+});
+
+test('une sélection valide efface les messages de la précédente', async () => {
+  const screen = await render(<Host accept="image/*" multiple />);
+
+  pick(input(screen.container), [pdf()]);
+  await expect.element(screen.getByRole('alert')).toBeInTheDocument();
+
+  pick(input(screen.container), [image()]);
+  await expect.poll(() => screen.container.querySelector('[role="alert"]')).toBeNull();
+});
+
+// --- Retrait et effacement --------------------------------------------------------
+
+test('le retrait enlève la ligne, révoque son aperçu et notifie', async () => {
+  const revoke = vi.spyOn(URL, 'revokeObjectURL');
+  const onRemove = vi.fn();
+  const onFilesChange = vi.fn();
+  const screen = await render(<Host multiple onRemove={onRemove} onFilesChange={onFilesChange} />);
+
+  pick(input(screen.container), [image('a.png'), pdf('b.pdf')]);
+  await expect.poll(() => names(screen.container)).toEqual(['a.png', 'b.pdf']);
+  const url = screen.container.querySelector('img.ui-file-upload-list-thumb')!.getAttribute('src');
+
+  await screen.getByRole('button', { name: 'Supprimer le fichier : a.png' }).click();
+
+  await expect.poll(() => names(screen.container)).toEqual(['b.pdf']);
+  expect(revoke).toHaveBeenCalledWith(url);
+  expect(onRemove.mock.calls[0]![0].name).toBe('a.png');
+  expect(onFilesChange.mock.lastCall![0].map((f: UiUploadFile) => f.name)).toEqual(['b.pdf']);
+});
+
+test('Effacer vide la sélection, les messages et les aperçus', async () => {
+  const revoke = vi.spyOn(URL, 'revokeObjectURL');
+  const onClear = vi.fn();
+  const onFilesChange = vi.fn();
+  const screen = await render(
+    <Host mode="drag" multiple accept="image/*" onClear={onClear} onFilesChange={onFilesChange} />,
+  );
+
+  pick(input(screen.container), [image('a.png'), pdf('refus.pdf')]);
+  await expect.element(screen.getByRole('alert')).toBeInTheDocument();
+
+  await screen.getByRole('button', { name: 'Effacer' }).click();
+
+  await expect.poll(() => rows(screen.container)).toHaveLength(0);
+  expect(screen.container.querySelector('[role="alert"]')).toBeNull();
+  expect(revoke).toHaveBeenCalled();
+  expect(onClear).toHaveBeenCalledTimes(1);
+  expect(onFilesChange).toHaveBeenLastCalledWith([]);
+});
+
+// --- Glisser-déposer ---------------------------------------------------------------
+
+test('la zone se signale au survol, et le dépôt ajoute les fichiers', async () => {
+  const screen = await render(<Host mode="drag" multiple />);
+  const root = screen.container.querySelector('.ui-file-upload')!;
+  const zone = screen.container.querySelector('.ui-file-upload-zone')!;
+
+  drag(zone, 'dragover');
+  await expect.poll(() => root.classList.contains('_dragging')).toBe(true);
+
+  // Une sortie qui passe d'un enfant à l'autre reste DANS la zone.
+  drag(zone, 'dragleave', [], { relatedTarget: zone.querySelector('.ui-file-upload-zone-title') });
+  await new Promise((r) => requestAnimationFrame(r));
+  expect(root).toHaveClass('_dragging');
+
+  drag(zone, 'dragleave', [], { relatedTarget: document.body });
+  await expect.poll(() => root.classList.contains('_dragging')).toBe(false);
+
+  drag(zone, 'dragover');
+  drag(zone, 'drop', [pdf('a.pdf'), pdf('b.pdf')]);
+
+  await expect.poll(() => names(screen.container)).toEqual(['a.pdf', 'b.pdf']);
+  expect(root).not.toHaveClass('_dragging');
+});
+
+test('désactivé, ni le champ ni le dépôt ne prennent de fichier', async () => {
+  const screen = await render(<Host mode="drag" disabled />);
+  const root = screen.container.querySelector('.ui-file-upload')!;
+
+  expect(root).toHaveClass('_disabled');
+  expect(input(screen.container)).toBeDisabled();
+
+  drag(root, 'dragover');
+  drag(root, 'drop', [pdf()]);
+  await new Promise((r) => requestAnimationFrame(r));
+
+  expect(root).not.toHaveClass('_dragging');
+  expect(rows(screen.container)).toHaveLength(0);
+});
+
+// --- Envoi délégué -------------------------------------------------------------------
+
+test("l'envoi délégué rend la main à l'application, qui pilote progression et issue", async () => {
+  let request: UiUploadHandlerEvent | undefined;
+  const onUploadError = vi.fn();
+  const screen = await render(
+    <Host
+      mode="drag"
+      multiple
+      customUpload
+      onCustomUpload={(e) => (request = e)}
+      onUploadError={onUploadError}
+    />,
+  );
+
+  pick(input(screen.container), [pdf('a.pdf'), pdf('b.pdf')]);
+  const envoyer = screen.getByRole('button', { name: 'Téléverser' });
+  await expect.element(envoyer).toBeEnabled();
+  await envoyer.click();
+
+  expect(request!.files.map((f) => f.name)).toEqual(['a.pdf', 'b.pdf']);
+  await expect
+    .element(screen.getByRole('status', { name: 'Téléversement de a.pdf' }))
+    .toBeInTheDocument();
+  // Plus rien en attente : le bouton se désactive.
+  await expect.element(envoyer).toBeDisabled();
+
+  request!.setProgress(request!.files[0]!, 40);
+  await expect
+    .element(screen.getByRole('progressbar', { name: 'Progression du téléversement de a.pdf' }))
+    .toHaveAttribute('aria-valuenow', '40');
+
+  request!.markUploaded(request!.files[0]!);
+  request!.markError(request!.files[1]!, 'Refusé par le serveur');
+
+  await expect.poll(() => screen.container.querySelectorAll('[role="progressbar"]').length).toBe(0);
+  const [a, b] = rows(screen.container);
+  expect(a).not.toHaveClass('_error');
+  expect(b).toHaveClass('_error');
+  expect(b!.querySelector('.ui-file-upload-list-meta')).toHaveTextContent('Refusé par le serveur');
+  expect(onUploadError).toHaveBeenCalledWith(
+    expect.objectContaining({ reason: 'upload', message: 'Refusé par le serveur' }),
+  );
+});
+
+test('auto envoie dès la sélection, et le bouton Téléverser disparaît', async () => {
+  const onCustomUpload = vi.fn();
+  const screen = await render(
+    <Host mode="drag" auto customUpload onCustomUpload={onCustomUpload} />,
+  );
+
+  pick(input(screen.container), [pdf('a.pdf')]);
+
+  await expect.poll(() => onCustomUpload.mock.calls.length).toBe(1);
+  expect(onCustomUpload.mock.calls[0]![0].files.map((f: UiUploadFile) => f.name)).toEqual([
+    'a.pdf',
+  ]);
+  expect(screen.container.querySelectorAll('.ui-file-upload-toolbar .ui-button')).toHaveLength(1);
+  await expect.element(screen.getByRole('button', { name: 'Effacer' })).toBeVisible();
+});
+
+test("sans adresse ni envoi délégué, il n'y a rien à téléverser", async () => {
+  const screen = await render(<Host mode="drag" />);
+
+  pick(input(screen.container), [pdf()]);
+
+  await expect.element(screen.getByRole('button', { name: 'Téléverser' })).toBeDisabled();
+});
+
+// --- Envoi intégré ---------------------------------------------------------------------
+
+test("l'envoi intégré poste le fichier, suit sa progression et annonce l'issue", async () => {
+  vi.stubGlobal('XMLHttpRequest', FakeXhr);
+  const onUploadComplete = vi.fn();
+  const screen = await render(
+    <Host
+      mode="drag"
+      url="/api/pieces"
+      method="put"
+      fieldName="document"
+      withCredentials
+      onUploadComplete={onUploadComplete}
+    />,
+  );
+  const file = pdf('bail.pdf');
+
+  pick(input(screen.container), [file]);
+  await screen.getByRole('button', { name: 'Téléverser' }).click();
+
+  const xhr = FakeXhr.all[0]!;
+  expect(xhr.method).toBe('PUT');
+  expect(xhr.url).toBe('/api/pieces');
+  expect(xhr.withCredentials).toBe(true);
+  expect(xhr.body!.get('document')).toBeInstanceOf(File);
+  expect((xhr.body!.get('document') as File).name).toBe('bail.pdf');
+
+  xhr.progress(50, 100);
+  await expect.element(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '50');
+
+  xhr.respond(201);
+  await expect.poll(() => onUploadComplete.mock.calls.length).toBe(1);
+  expect(onUploadComplete.mock.calls[0]![0].xhr).toBe(xhr);
+  expect(onUploadComplete.mock.calls[0]![0].files[0].status).toBe('completed');
+  // Le rappel tire dans le gestionnaire de la requête, AVANT le rendu : le DOM se sonde.
+  await expect.poll(() => screen.container.querySelector('[role="progressbar"]')).toBeNull();
+});
+
+test('une réponse hors 2xx et une coupure réseau finissent en erreur, avec leur message', async () => {
+  vi.stubGlobal('XMLHttpRequest', FakeXhr);
+  const onUploadError = vi.fn();
+  const screen = await render(
+    <Host mode="drag" multiple url="/api" onUploadError={onUploadError} />,
+  );
+
+  pick(input(screen.container), [pdf('a.pdf'), pdf('b.pdf')]);
+  await screen.getByRole('button', { name: 'Téléverser' }).click();
+
+  FakeXhr.all[0]!.respond(500);
+  FakeXhr.all[1]!.fail();
+
+  await expect.poll(() => onUploadError.mock.calls.length).toBe(2);
+  const metas = () =>
+    rows(screen.container).map((r) => r.querySelector('.ui-file-upload-list-meta')!.textContent);
+  await expect.poll(metas).toEqual(['Erreur 500', 'Erreur réseau']);
+  expect(onUploadError.mock.calls.map((c) => c[0].reason)).toEqual(['upload', 'upload']);
+});
+
+test('retirer un fichier en cours d’envoi annule sa requête', async () => {
+  vi.stubGlobal('XMLHttpRequest', FakeXhr);
+  const screen = await render(<Host mode="drag" url="/api" />);
+
+  pick(input(screen.container), [pdf('a.pdf')]);
+  await screen.getByRole('button', { name: 'Téléverser' }).click();
+  await screen.getByRole('button', { name: 'Supprimer le fichier : a.pdf' }).click();
+
+  expect(FakeXhr.all[0]!.aborted).toBe(true);
+  await expect.poll(() => rows(screen.container)).toHaveLength(0);
+});
+
+test('une notification tardive appelle la version À JOUR du rappel', async () => {
+  vi.stubGlobal('XMLHttpRequest', FakeXhr);
+  const premier = vi.fn();
+  const second = vi.fn();
+  const screen = await render(<Host mode="drag" url="/api" onUploadComplete={premier} />);
+
+  pick(input(screen.container), [pdf()]);
+  await screen.getByRole('button', { name: 'Téléverser' }).click();
+
+  // L'appelant change de rappel pendant que la requête est en vol.
+  await screen.rerender(<Host mode="drag" url="/api" onUploadComplete={second} />);
+  FakeXhr.all[0]!.respond(200);
+
+  await expect.poll(() => second.mock.calls.length).toBe(1);
+  expect(premier).not.toHaveBeenCalled();
+});
+
+// --- Cycle de vie ------------------------------------------------------------------------
+
+test('au démontage, les aperçus sont révoqués et les requêtes annulées', async () => {
+  vi.stubGlobal('XMLHttpRequest', FakeXhr);
+  const revoke = vi.spyOn(URL, 'revokeObjectURL');
+  const screen = await render(<Host mode="drag" url="/api" />);
+
+  pick(input(screen.container), [image('a.png')]);
+  await expect.poll(() => rows(screen.container)).toHaveLength(1);
+  const url = screen.container.querySelector('img.ui-file-upload-list-thumb')!.getAttribute('src');
+  await screen.getByRole('button', { name: 'Téléverser' }).click();
+
+  await screen.unmount();
+
+  expect(revoke).toHaveBeenCalledWith(url);
+  expect(FakeXhr.all[0]!.aborted).toBe(true);
+});
+
+test('en mode strict, le double montage ne révoque pas les aperçus vivants', async () => {
+  const revoke = vi.spyOn(URL, 'revokeObjectURL');
+  const screen = await render(
+    <StrictMode>
+      <Host />
+    </StrictMode>,
+  );
+
+  pick(input(screen.container), [image('a.png')]);
+
+  await expect.poll(() => rows(screen.container)).toHaveLength(1);
+  const thumb = screen.container.querySelector<HTMLImageElement>('img.ui-file-upload-list-thumb')!;
+  await expect.poll(() => thumb.complete && thumb.naturalWidth >= 0).toBe(true);
+  expect(revoke).not.toHaveBeenCalled();
+});
+
+// --- Rendus personnalisés -----------------------------------------------------------------
+
+test('renderToolbar reçoit des actions qui marchent', async () => {
+  const onCustomUpload = vi.fn();
+  const screen = await render(
+    <Host
+      mode="drag"
+      multiple
+      customUpload
+      onCustomUpload={onCustomUpload}
+      renderToolbar={(files, { choose, upload, clear }) => (
+        <>
+          <button type="button" onClick={choose}>
+            Choisir
+          </button>
+          <button type="button" onClick={upload}>
+            Envoyer ({files.length})
+          </button>
+          <button type="button" onClick={clear}>
+            Vider
+          </button>
+        </>
+      )}
+    />,
+  );
+  const click = vi.spyOn(input(screen.container), 'click').mockImplementation(() => {});
+
+  await screen.getByRole('button', { name: 'Choisir' }).click();
+  expect(click).toHaveBeenCalledTimes(1);
+
+  pick(input(screen.container), [pdf('a.pdf')]);
+  await screen.getByRole('button', { name: 'Envoyer (1)' }).click();
+  expect(onCustomUpload).toHaveBeenCalledTimes(1);
+
+  await screen.getByRole('button', { name: 'Vider' }).click();
+  await expect.element(screen.getByRole('button', { name: 'Envoyer (0)' })).toBeVisible();
+});
+
+test('renderFile remplace une ligne, dans son élément de liste', async () => {
+  const screen = await render(
+    <Host
+      multiple
+      renderFile={(f, { remove }) => (
+        <button type="button" onClick={() => remove(f)}>
+          Retirer {f.name}
+        </button>
+      )}
+    />,
+  );
+
+  pick(input(screen.container), [pdf('a.pdf'), pdf('b.pdf')]);
+  await expect.element(screen.getByRole('button', { name: 'Retirer a.pdf' })).toBeVisible();
+  expect(screen.container.querySelectorAll('li.ui-file-upload-item')).toHaveLength(2);
+  expect(rows(screen.container)).toHaveLength(0);
+
+  await screen.getByRole('button', { name: 'Retirer a.pdf' }).click();
+  await expect
+    .poll(() => screen.container.querySelectorAll('li.ui-file-upload-item').length)
+    .toBe(1);
+});
+
+test('renderContent remplace toute la section, même vide', async () => {
+  function Grid() {
+    const [seen, setSeen] = useState(0);
+    return (
+      <Host
+        multiple
+        onFilesChange={(files) => setSeen(files.length)}
+        renderContent={(files, { clear }) => (
+          <>
+            <output>{`${files.length} dans la grille, ${seen} vus`}</output>
+            <button type="button" onClick={clear}>
+              Tout retirer
+            </button>
+          </>
+        )}
+      />
+    );
+  }
+  const screen = await render(<Grid />);
+
+  expect(screen.container.querySelector('.ui-file-upload-content output')).toHaveTextContent(
+    '0 dans la grille, 0 vus',
+  );
+
+  pick(input(screen.container), [pdf('a.pdf'), pdf('b.pdf')]);
+  await expect.element(screen.getByText('2 dans la grille, 2 vus')).toBeVisible();
+
+  await screen.getByRole('button', { name: 'Tout retirer' }).click();
+  await expect.element(screen.getByText('0 dans la grille, 0 vus')).toBeVisible();
+});
+
+test('showFileList à false masque la liste sans perdre la sélection', async () => {
+  const screen = await render(<Host showFileList={false} />);
+
+  pick(input(screen.container), [pdf('a.pdf')]);
+
+  await expect
+    .poll(() => screen.container.querySelector('.ui-file-upload-field-text')?.textContent)
+    .toBe('a.pdf');
+  expect(screen.container.querySelector('.ui-file-upload-content')).toBeNull();
+});
diff --git a/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.tsx b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.tsx
new file mode 100644
index 0000000..a69227f
--- /dev/null
+++ b/packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.tsx
@@ -0,0 +1,689 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ComponentPropsWithRef,
+  type DragEvent,
+  type ReactNode,
+  type Ref,
+} from 'react';
+
+import { UiButton } from '../../actions/ui-button';
+import { UiIcon } from '../../base/ui-icon';
+import { formatLabel } from '../../core/forms';
+import { cx } from '../../core/utils';
+
+import { UiFileUploadList } from './ui-file-upload-list';
+import {
+  isFileTypeAccepted,
+  isImageFile,
+  type UiUploadErrorEvent,
+  type UiUploadEvent,
+  type UiUploadFile,
+  type UiUploadHandlerEvent,
+} from './ui-file-upload.model';
+
+import './ui-file-upload.scss';
+
+export type UiFileUploadMode = 'field' | 'drag';
+export type UiFileUploadSize = 'default' | 'small';
+
+/** Ce que reçoit `renderFile` pour rendre une ligne de fichier à sa façon. */
+export interface UiFileUploadFileContext {
+  remove: (file: UiUploadFile) => void;
+}
+
+/** Ce que reçoit `renderContent` pour rendre toute la section des fichiers. */
+export interface UiFileUploadContentContext {
+  remove: (file: UiUploadFile) => void;
+  clear: () => void;
+}
+
+/** Ce que reçoit `renderToolbar` pour rendre la barre d'actions. */
+export interface UiFileUploadToolbarContext {
+  choose: () => void;
+  upload: () => void;
+  clear: () => void;
+}
+
+export interface UiFileUploadProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'onDragOver' | 'onDragLeave' | 'onDrop'
+> {
+  // --- Disposition ---------------------------------------------------------
+  /** `field` : champ compact et bouton Parcourir ; `drag` : zone de dépôt complète. */
+  mode?: UiFileUploadMode;
+  size?: UiFileUploadSize;
+
+  // --- Sélection -----------------------------------------------------------
+  /**
+   * Nom sous lequel la sélection part avec le formulaire natif qui entoure le
+   * composant. Tous les fichiers de la liste sont soumis, un désactivé ne l'est pas.
+   */
+  name?: string;
+  /** Autorise plusieurs fichiers. */
+  multiple?: boolean;
+  /** Filtre natif, par exemple `image/*,.pdf`. Appliqué aussi au dépôt. */
+  accept?: string;
+  /** Taille maximale par fichier, en octets. */
+  maxFileSize?: number;
+  /** Nombre maximal de fichiers gardés en même temps. */
+  fileLimit?: number;
+  disabled?: boolean;
+
+  // --- Envoi ---------------------------------------------------------------
+  /** Envoie chaque fichier dès sa sélection. */
+  auto?: boolean;
+  /** Délègue l'envoi à `onCustomUpload` au lieu de la requête intégrée. */
+  customUpload?: boolean;
+  /** Adresse de l'envoi intégré. */
+  url?: string;
+  /** Méthode HTTP de l'envoi intégré. */
+  method?: 'post' | 'put';
+  /** Nom du champ de chaque fichier dans le corps multipart. */
+  fieldName?: string;
+  /** Joint les cookies à la requête intégrée. */
+  withCredentials?: boolean;
+
+  // --- Présentation et libellés ---------------------------------------------
+  /** Affiche la liste des fichiers sous le contrôle. */
+  showFileList?: boolean;
+  /** Affiche les actions Téléverser et Effacer (mode `drag`). */
+  showControls?: boolean;
+  /**
+   * Onde de pression sur la zone de dépôt et sur les actions de la barre, quand
+   * elle est activée. `false` la coupe, activation globale comprise.
+   */
+  ripple?: boolean;
+  browseLabel?: string;
+  /** Texte indicatif du mode `field`, tant qu'aucun fichier n'est choisi. */
+  chooseLabel?: string;
+  uploadLabel?: string;
+  cancelLabel?: string;
+  /** Lien de la zone de dépôt. */
+  dragLinkLabel?: string;
+  /** Invitation de la zone de dépôt. */
+  dragPromptLabel?: string;
+  /** Petite indication sous l'invitation, par exemple « JPG, PNG (max 5 Mo) ». */
+  hint?: string;
+  /**
+   * Nom accessible du contrôle, posé sur le champ natif. La valeur par défaut
+   * n'est pas vide : la zone de dépôt a toujours besoin d'un nom.
+   */
+  'aria-label'?: string;
+  /** Résumé du mode `field` quand il y a plusieurs fichiers. `{0}` est leur nombre. */
+  filesSummaryLabel?: string;
+  /** Refus : type non autorisé. `{0}` est le nom du fichier. */
+  invalidTypeMessage?: string;
+  /** Refus : fichier trop volumineux. `{0}` est le nom du fichier. */
+  invalidSizeMessage?: string;
+  /** Refus : `fileLimit` atteint. `{0}` est la limite. */
+  limitReachedMessage?: string;
+  /** Échec d'envoi sans message du serveur. */
+  uploadErrorMessage?: string;
+  /** Échec d'envoi au niveau du réseau. */
+  networkErrorMessage?: string;
+  /** Réponse hors 2xx. `{0}` est le statut HTTP. */
+  httpErrorMessage?: string;
+
+  // --- Rendus personnalisés -------------------------------------------------
+  /** Remplace une ligne de fichier. */
+  renderFile?: (file: UiUploadFile, context: UiFileUploadFileContext) => ReactNode;
+  /** Remplace toute la section des fichiers. Prioritaire sur `renderFile`. */
+  renderContent?: (files: UiUploadFile[], context: UiFileUploadContentContext) => ReactNode;
+  /** Remplace la barre d'actions (mode `drag`). */
+  renderToolbar?: (files: UiUploadFile[], context: UiFileUploadToolbarContext) => ReactNode;
+
+  // --- Notifications ----------------------------------------------------------
+  /** Des fichiers validés viennent d'entrer dans la sélection. */
+  onFilesSelect?: (added: UiUploadFile[]) => void;
+  /** La sélection a changé. Reçoit la sélection complète. */
+  onFilesChange?: (files: UiUploadFile[]) => void;
+  /** Un envoi délégué est demandé (`customUpload`). */
+  onCustomUpload?: (event: UiUploadHandlerEvent) => void;
+  /** L'envoi intégré d'un fichier a abouti. */
+  onUploadComplete?: (event: UiUploadEvent) => void;
+  /** Un fichier est refusé à la validation, ou son envoi échoue. */
+  onUploadError?: (event: UiUploadErrorEvent) => void;
+  /** Un fichier est retiré. */
+  onRemove?: (file: UiUploadFile) => void;
+  /** La sélection est vidée. */
+  onClear?: () => void;
+
+  ref?: Ref<HTMLDivElement>;
+}
+
+/** Compteur des fichiers : un identifiant stable par fichier, jamais réutilisé. */
+let nextUploadId = 0;
+
+/** Instances déjà averties, pour n'avertir qu'une fois chacune. */
+const warned = new Set<string>();
+
+function toUploadFile(file: File): UiUploadFile {
+  return {
+    id: `uifu-${nextUploadId++}`,
+    file,
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    status: 'pending',
+    progress: 0,
+    objectUrl: isImageFile(file) ? URL.createObjectURL(file) : undefined,
+  };
+}
+
+function revoke(file: UiUploadFile): void {
+  if (file.objectUrl) URL.revokeObjectURL(file.objectUrl);
+}
+
+/**
+ * ui-file-upload : téléversement de fichiers, en champ compact ou en zone de
+ * glisser-déposer.
+ *
+ * Un `<input type="file">` natif, masqué visuellement, porte la sélection : le
+ * sélecteur du système, le clavier et les lecteurs d'écran marchent donc
+ * nativement, et tout le composant est aussi une cible de dépôt. La sélection
+ * est validée côté client (type, taille, nombre), puis envoyée d'elle-même
+ * (`auto`), à la demande, ou par la fonction de l'application (`customUpload`).
+ * La progression passe par `XMLHttpRequest`, ce qui n'exige aucun client HTTP.
+ *
+ * Sécurité : la validation côté client est un confort, le serveur doit
+ * revalider. Les aperçus d'image sont des URL d'objet, révoquées au retrait, au
+ * remplacement, à l'effacement et au démontage.
+ */
+export function UiFileUpload({
+  mode = 'field',
+  size = 'default',
+  name,
+  multiple = false,
+  accept,
+  maxFileSize,
+  fileLimit,
+  disabled = false,
+  auto = false,
+  customUpload = false,
+  url,
+  method = 'post',
+  fieldName = 'files',
+  withCredentials = false,
+  showFileList = true,
+  showControls = true,
+  ripple = true,
+  browseLabel = 'Parcourir',
+  chooseLabel = 'Choisir un fichier…',
+  uploadLabel = 'Téléverser',
+  cancelLabel = 'Effacer',
+  dragLinkLabel = 'Cliquer pour téléverser',
+  dragPromptLabel = 'ou glisser-déposer les fichiers ici',
+  hint,
+  'aria-label': ariaLabel = 'Téléversement de fichiers',
+  filesSummaryLabel = '{0} fichiers',
+  invalidTypeMessage = 'Type de fichier non autorisé : {0}',
+  invalidSizeMessage = 'Fichier trop volumineux : {0}',
+  limitReachedMessage = 'Nombre maximum de fichiers atteint ({0}).',
+  uploadErrorMessage = 'Échec du téléversement',
+  networkErrorMessage = 'Erreur réseau',
+  httpErrorMessage = 'Erreur {0}',
+  renderFile,
+  renderContent,
+  renderToolbar,
+  onFilesSelect,
+  onFilesChange,
+  onCustomUpload,
+  onUploadComplete,
+  onUploadError,
+  onRemove,
+  onClear,
+  className,
+  ref,
+  ...rest
+}: UiFileUploadProps) {
+  const inputId = useId();
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const formValueRef = useRef<HTMLInputElement | null>(null);
+
+  // La sélection vit dans l'état pour le rendu, ET dans une référence pour les
+  // lectures synchrones. Les deux sont écrites ensemble, par `commit` seul.
+  // Pourquoi les deux : une notification doit recevoir la sélection À JOUR
+  // (Angular relit son signal juste après l'avoir écrit), et `auto` enchaîne
+  // l'envoi dans le même geste. Un modificateur fonctionnel de `setState` ne
+  // peut ni l'un ni l'autre : il s'exécute plus tard, et deux fois en mode
+  // strict, ce qui créerait deux fois chaque URL d'objet.
+  const [files, setFiles] = useState<UiUploadFile[]>([]);
+  const filesRef = useRef<UiUploadFile[]>([]);
+  const [dragging, setDragging] = useState(false);
+  const [messages, setMessages] = useState<string[]>([]);
+
+  /** Requêtes en cours, par identifiant de fichier, pour pouvoir les annuler. */
+  const requests = useRef(new Map<string, XMLHttpRequest>());
+
+  // Les rappels d'une requête tirent longtemps après le rendu qui l'a lancée :
+  // ils lisent les props par cette référence, tenue à jour après chaque rendu,
+  // pour ne jamais appeler une fonction périmée de l'appelant.
+  const latest = useRef({
+    onFilesChange,
+    onUploadComplete,
+    onUploadError,
+    uploadErrorMessage,
+    networkErrorMessage,
+    httpErrorMessage,
+  });
+  useLayoutEffect(() => {
+    latest.current = {
+      onFilesChange,
+      onUploadComplete,
+      onUploadError,
+      uploadErrorMessage,
+      networkErrorMessage,
+      httpErrorMessage,
+    };
+  });
+
+  const commit = useCallback((next: UiUploadFile[]) => {
+    filesRef.current = next;
+    setFiles(next);
+  }, []);
+
+  /** Remplace les champs d'un fichier, sans toucher aux autres. */
+  const patch = useCallback(
+    (id: string, changes: Partial<UiUploadFile>) => {
+      commit(filesRef.current.map((f) => (f.id === id ? { ...f, ...changes } : f)));
+    },
+    [commit],
+  );
+
+  const current = (id: string, fallback: UiUploadFile): UiUploadFile =>
+    filesRef.current.find((f) => f.id === id) ?? fallback;
+
+  // Au démontage, rien ne doit survivre : ni URL d'objet, ni requête en vol.
+  useEffect(() => {
+    const inFlight = requests.current;
+    return () => {
+      for (const f of filesRef.current) revoke(f);
+      for (const xhr of inFlight.values()) xhr.abort();
+      inFlight.clear();
+    };
+  }, []);
+
+  // Le sélecteur est vidé après chaque choix, pour qu'un nouveau choix du même
+  // fichier redéclenche `change` : il ne peut donc pas porter la sélection
+  // jusqu'au formulaire. C'est un second champ, caché, qui le fait. Sans lui,
+  // un formulaire natif recevait un fichier VIDE (nom '', 0 octet), mesuré.
+  useEffect(() => {
+    const el = formValueRef.current;
+    if (!el) return;
+    const data = new DataTransfer();
+    for (const f of files) data.items.add(f.file);
+    el.files = data.files;
+  }, [files, name]);
+
+  // Garde-fou d'accessibilité : le contrôle doit avoir un nom.
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (ariaLabel || warned.has(inputId)) return;
+    warned.add(inputId);
+    console.warn('[ui-file-upload] Renseignez `aria-label` pour nommer le contrôle.');
+  }, [ariaLabel, inputId]);
+
+  const setRootRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      rootRef.current = node;
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
+
+  // --- Envoi ---------------------------------------------------------------
+
+  const uploadFailed = (item: UiUploadFile, message: string) => {
+    requests.current.delete(item.id);
+    patch(item.id, { status: 'error', error: message });
+    latest.current.onUploadError?.({ file: current(item.id, item), reason: 'upload', message });
+  };
+
+  const xhrUpload = (item: UiUploadFile, endpoint: string) => {
+    const xhr = new XMLHttpRequest();
+    requests.current.set(item.id, xhr);
+    patch(item.id, { status: 'uploading', progress: 0 });
+
+    const body = new FormData();
+    body.append(fieldName, item.file, item.name);
+
+    xhr.upload.addEventListener('progress', (e) => {
+      if (e.lengthComputable) patch(item.id, { progress: Math.round((e.loaded / e.total) * 100) });
+    });
+    xhr.addEventListener('load', () => {
+      requests.current.delete(item.id);
+      if (xhr.status >= 200 && xhr.status < 300) {
+        patch(item.id, { status: 'completed', progress: 100 });
+        latest.current.onUploadComplete?.({ files: [current(item.id, item)], xhr });
+        latest.current.onFilesChange?.(filesRef.current);
+      } else {
+        uploadFailed(item, formatLabel(latest.current.httpErrorMessage, xhr.status));
+      }
+    });
+    xhr.addEventListener('error', () => uploadFailed(item, latest.current.networkErrorMessage));
+    xhr.addEventListener('abort', () => requests.current.delete(item.id));
+
+    xhr.open(method.toUpperCase(), endpoint, true);
+    xhr.withCredentials = withCredentials;
+    xhr.send(body);
+  };
+
+  const emitCustomUpload = (pending: UiUploadFile[]) => {
+    for (const f of pending) patch(f.id, { status: 'uploading', progress: 0 });
+    onCustomUpload?.({
+      files: pending,
+      setProgress: (file, progress) =>
+        patch(file.id, { status: 'uploading', progress: Math.max(0, Math.min(100, progress)) }),
+      markUploaded: (file) => {
+        patch(file.id, { status: 'completed', progress: 100 });
+        latest.current.onFilesChange?.(filesRef.current);
+      },
+      markError: (file, msg) => {
+        const message = msg ?? latest.current.uploadErrorMessage;
+        patch(file.id, { status: 'error', error: message });
+        latest.current.onUploadError?.({ file, reason: 'upload', message });
+      },
+    });
+  };
+
+  /** Envoie tous les fichiers en attente, par la requête intégrée ou par l'application. */
+  const upload = () => {
+    const pending = filesRef.current.filter((f) => f.status === 'pending');
+    if (!pending.length) return;
+
+    if (customUpload) {
+      emitCustomUpload(pending);
+      return;
+    }
+    if (!url) return;
+    for (const f of pending) xhrUpload(f, url);
+  };
+
+  // --- Sélection -------------------------------------------------------------
+  //
+  // `choose`, `upload`, `clear` et `remove` lisent la sélection par sa
+  // référence, et sont TRANSMISES aux props de rendu (`renderToolbar`,
+  // `renderContent`, `renderFile`). `react-hooks/refs` le signale, faute de
+  // pouvoir prouver que l'appelant ne les invoquera pas pendant le rendu. Ce
+  // serait un défaut chez lui quelle que soit la conception, une action qui
+  // change la sélection n'ayant rien à faire dans un rendu. Même faux positif
+  // que `ui-swatch-picker`, et même traitement : une exception par appel.
+
+  /** Ouvre le sélecteur natif. */
+  const choose = () => {
+    if (disabled) return;
+    inputRef.current?.click();
+  };
+
+  const resetInput = () => {
+    if (inputRef.current) inputRef.current.value = '';
+  };
+
+  /** Retire un fichier : annule son envoi, révoque son aperçu. */
+  const remove = (target: UiUploadFile) => {
+    requests.current.get(target.id)?.abort();
+    requests.current.delete(target.id);
+    revoke(target);
+    commit(filesRef.current.filter((f) => f.id !== target.id));
+    onRemove?.(target);
+    onFilesChange?.(filesRef.current);
+  };
+
+  /** Vide toute la sélection. */
+  const clear = () => {
+    for (const xhr of requests.current.values()) xhr.abort();
+    requests.current.clear();
+    for (const f of filesRef.current) revoke(f);
+    commit([]);
+    setMessages([]);
+    resetInput();
+    onClear?.();
+    onFilesChange?.([]);
+  };
+
+  const fail = (
+    item: UiUploadFile,
+    reason: UiUploadErrorEvent['reason'],
+    message: string,
+    sink: string[],
+  ) => {
+    revoke(item);
+    sink.push(message);
+    onUploadError?.({ file: { ...item, status: 'error', error: message }, reason, message });
+  };
+
+  /** Valide une liste de fichiers et ajoute ceux qui passent à la sélection. */
+  const ingest = (list: FileList | null) => {
+    if (!list || !list.length || disabled) return;
+
+    const added: UiUploadFile[] = [];
+    const newMessages: string[] = [];
+    const existing = filesRef.current;
+
+    for (const file of Array.from(list)) {
+      // Un seul fichier : le nouveau remplace l'ancien, donc seul le lot entrant compte.
+      if (!multiple && added.length >= 1) break;
+
+      const item = toUploadFile(file);
+
+      if (!isFileTypeAccepted(file, accept)) {
+        fail(item, 'type', formatLabel(invalidTypeMessage, file.name), newMessages);
+        continue;
+      }
+      if (maxFileSize != null && file.size > maxFileSize) {
+        fail(item, 'size', formatLabel(invalidSizeMessage, file.name), newMessages);
+        continue;
+      }
+      if (fileLimit != null && (multiple ? existing.length : 0) + added.length >= fileLimit) {
+        fail(item, 'limit', formatLabel(limitReachedMessage, fileLimit), newMessages);
+        continue;
+      }
+      added.push(item);
+    }
+
+    setMessages(newMessages);
+    if (!added.length) return;
+
+    if (!multiple) {
+      // Remplacement : libérer ce que tenait la sélection précédente.
+      for (const previous of existing) {
+        requests.current.get(previous.id)?.abort();
+        requests.current.delete(previous.id);
+        revoke(previous);
+      }
+    }
+    commit(multiple ? [...existing, ...added] : added);
+    onFilesSelect?.(added);
+    onFilesChange?.(filesRef.current);
+
+    if (auto) upload();
+  };
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    ingest(event.target.files);
+    // Remis à zéro pour qu'une nouvelle sélection du même fichier redéclenche `change`.
+    resetInput();
+  };
+
+  const onDragOver = (event: DragEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(true);
+  };
+
+  const onDragLeave = (event: DragEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    event.preventDefault();
+    // Ignorer les sorties qui remontent d'un enfant encore dans la zone.
+    if (rootRef.current?.contains(event.relatedTarget as Node | null)) return;
+    setDragging(false);
+  };
+
+  const onDrop = (event: DragEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(false);
+    ingest(event.dataTransfer?.files ?? null);
+  };
+
+  // --- Rendu -----------------------------------------------------------------
+
+  const hasFiles = files.length > 0;
+  const pendingCount = files.filter((f) => f.status === 'pending').length;
+  const canUpload = !disabled && pendingCount > 0 && (customUpload || !!url);
+  const fieldSummary = !hasFiles
+    ? chooseLabel
+    : files.length === 1
+      ? (files[0]?.name ?? chooseLabel)
+      : formatLabel(filesSummaryLabel, files.length);
+  const buttonSize = size === 'small' ? 'small' : 'default';
+
+  return (
+    <div
+      {...rest}
+      ref={setRootRef}
+      className={cx(
+        'ui-file-upload',
+        `_${mode}`,
+        size !== 'default' && `_${size}`,
+        dragging && '_dragging',
+        disabled && '_disabled',
+        className,
+      )}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      {/* Le vrai contrôle natif, masqué visuellement : clavier et lecteurs d'écran restent natifs. */}
+      <input
+        ref={inputRef}
+        className="ui-file-upload-input"
+        type="file"
+        id={inputId}
+        accept={accept || undefined}
+        multiple={multiple}
+        disabled={disabled}
+        aria-label={ariaLabel || undefined}
+        onChange={onInputChange}
+      />
+      {name && (
+        <input
+          ref={formValueRef}
+          type="file"
+          name={name}
+          multiple={multiple}
+          disabled={disabled}
+          hidden
+        />
+      )}
+
+      {mode === 'field' ? (
+        <label
+          className="ui-file-upload-field"
+          htmlFor={inputId}
+          data-ripple={ripple ? 'on' : 'off'}
+        >
+          <span className={cx('ui-file-upload-field-text', !hasFiles && '_placeholder')}>
+            {fieldSummary}
+          </span>
+          <span className="ui-file-upload-browse" aria-hidden="true">
+            {browseLabel}
+          </span>
+        </label>
+      ) : (
+        <>
+          <label
+            className="ui-file-upload-zone"
+            htmlFor={inputId}
+            data-ripple={ripple ? 'on' : 'off'}
+          >
+            <UiIcon className="ui-file-upload-zone-icon" name="cloud-arrow-up" size="lg" />
+            <span className="ui-file-upload-zone-content">
+              <span className="ui-file-upload-zone-title">
+                <span className="ui-file-upload-zone-link">{dragLinkLabel}</span>
+                <span className="ui-file-upload-zone-prompt">{dragPromptLabel}</span>
+              </span>
+              {hint && <span className="ui-file-upload-zone-hint">{hint}</span>}
+            </span>
+          </label>
+
+          {renderToolbar ? (
+            <div className="ui-file-upload-toolbar">
+              {/* eslint-disable-next-line react-hooks/refs -- actions transmises, voir « Sélection » */}
+              {renderToolbar(files, { choose, upload, clear })}
+            </div>
+          ) : (
+            showControls &&
+            hasFiles && (
+              <div className="ui-file-upload-toolbar">
+                {!auto && (
+                  <UiButton
+                    ripple={ripple}
+                    label={uploadLabel}
+                    size={buttonSize}
+                    icon="cloud-arrow-up"
+                    disabled={!canUpload}
+                    onClick={upload}
+                  />
+                )}
+                <UiButton
+                  ripple={ripple}
+                  label={cancelLabel}
+                  level="low"
+                  size={buttonSize}
+                  icon="xmark"
+                  onClick={clear}
+                />
+              </div>
+            )
+          )}
+        </>
+      )}
+
+      {renderContent ? (
+        <div className="ui-file-upload-content">
+          {/* eslint-disable-next-line react-hooks/refs -- actions transmises, voir « Sélection » */}
+          {renderContent(files, { remove, clear })}
+        </div>
+      ) : (
+        showFileList &&
+        hasFiles && (
+          <ul className="ui-file-upload-content" role="list">
+            {/* eslint-disable-next-line react-hooks/refs -- actions transmises, voir « Sélection » */}
+            {files.map((f) => (
+              <li key={f.id} className="ui-file-upload-item">
+                {renderFile ? (
+                  renderFile(f, { remove })
+                ) : (
+                  <UiFileUploadList file={f} size={size} onRemove={remove} />
+                )}
+              </li>
+            ))}
+          </ul>
+        )
+      )}
+
+      {messages.length > 0 && (
+        <div className="ui-file-upload-messages" role="alert" aria-live="assertive">
+          {messages.map((msg) => (
+            <p key={msg} className="ui-file-upload-message">
+              {msg}
+            </p>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui-kit-react/src/forms/ui-segment-control/ui-segment-control.tsx b/packages/ui-kit-react/src/forms/ui-segment-control/ui-segment-control.tsx
index befb957..1c6d722 100644
--- a/packages/ui-kit-react/src/forms/ui-segment-control/ui-segment-control.tsx
+++ b/packages/ui-kit-react/src/forms/ui-segment-control/ui-segment-control.tsx
@@ -90,6 +90,11 @@ interface ThumbMetrics {
 const prevenus = new Set<string>();
 
 export interface UiSegmentControlProps<T = unknown> {
+  /**
+   * Onde de pression sur les segments, quand elle est activée. `false` la coupe,
+   * activation globale comprise.
+   */
+  ripple?: boolean;
   /** Options à afficher, un bouton chacune. Primitives, objets, ou forme riche. */
   options?: readonly (T | SegmentControlOption<T>)[];
   /** Chemin de champ d'où lire le libellé, quand les options sont des objets. */
@@ -154,6 +159,7 @@ export interface UiSegmentControlProps<T = unknown> {
  * système de motion partagé.
  */
 export function UiSegmentControl<T = unknown>({
+  ripple = true,
   options = [],
   optionLabel,
   optionValue,
@@ -425,6 +431,7 @@ export function UiSegmentControl<T = unknown>({
           }}
           type="button"
           className={cx('ui-segment-control-option', segment.selected && '_selected')}
+          data-ripple={ripple ? 'on' : 'off'}
           disabled={segment.disabled}
           role={multiple ? undefined : 'radio'}
           aria-checked={multiple ? undefined : segment.selected}
diff --git a/packages/ui-kit-react/src/forms/ui-select/ui-select.test.tsx b/packages/ui-kit-react/src/forms/ui-select/ui-select.test.tsx
index 4a85cca..f9867f6 100644
--- a/packages/ui-kit-react/src/forms/ui-select/ui-select.test.tsx
+++ b/packages/ui-kit-react/src/forms/ui-select/ui-select.test.tsx
@@ -562,3 +562,13 @@ test('le panneau attend sa position avant d’être peint', async () => {
     .forEach((animation) => animation.finish());
   expect(getComputedStyle(panneau(screen)).opacity).toBe('1');
 });
+
+test('tabIndex va au déclencheur, pour une barre d’outils à arrêt unique', async () => {
+  const screen = await render(
+    <UiSelect aria-label="Police" options={['Inter', 'Mono']} tabIndex={-1} />,
+  );
+
+  await expect
+    .element(screen.getByRole('combobox', { name: 'Police' }))
+    .toHaveAttribute('tabindex', '-1');
+});
diff --git a/packages/ui-kit-react/src/forms/ui-select/ui-select.tsx b/packages/ui-kit-react/src/forms/ui-select/ui-select.tsx
index 0c2949d..756d373 100644
--- a/packages/ui-kit-react/src/forms/ui-select/ui-select.tsx
+++ b/packages/ui-kit-react/src/forms/ui-select/ui-select.tsx
@@ -105,6 +105,11 @@ export interface UiSelectProps extends UiFieldSharedProps, NativeProps {
   placeholder?: string;
   /** Bouton d'effacement de la sélection. */
   showClear?: boolean;
+  /**
+   * Onde de pression sur les options, quand elle est activée. `false` la coupe
+   * sur ce champ, activation globale comprise.
+   */
+  ripple?: boolean;
   clearAriaLabel?: string;
   /** Nom d'icône du chevron. */
   icon?: string;
@@ -198,6 +203,7 @@ export function UiSelect({
   overflowLabel = '(+{0} autres)',
   placeholder,
   showClear = false,
+  ripple = true,
   clearAriaLabel = 'Effacer la sélection',
   icon = 'angle-down',
   filter = false,
@@ -242,6 +248,7 @@ export function UiSelect({
   invalid = false,
   id,
   className,
+  tabIndex,
   ref,
   ...rest
 }: UiSelectProps) {
@@ -786,6 +793,7 @@ export function UiSelect({
           row.index === focusedIndex && '_focused',
           row.entry.disabled && '_disabled',
         )}
+        data-ripple={ripple ? 'on' : 'off'}
         role="option"
         aria-selected={row.selected}
         aria-disabled={row.entry.disabled || undefined}
@@ -838,6 +846,9 @@ export function UiSelect({
   // positif quand on l'écrit en attribut JSX.
   const triggerShared = {
     id: field.inputId,
+    // Transmis au déclencheur, seul élément focalisable du champ : c'est ce qui
+    // laisse une barre d'outils (`ui-editor`) tenir un arrêt de tabulation unique.
+    tabIndex,
     role: 'combobox' as const,
     'aria-haspopup': 'listbox' as const,
     'aria-required': required || undefined,
diff --git a/packages/ui-kit-react/src/forms/ui-toggle-block/ui-toggle-block.tsx b/packages/ui-kit-react/src/forms/ui-toggle-block/ui-toggle-block.tsx
index 27912d5..1a05119 100644
--- a/packages/ui-kit-react/src/forms/ui-toggle-block/ui-toggle-block.tsx
+++ b/packages/ui-kit-react/src/forms/ui-toggle-block/ui-toggle-block.tsx
@@ -29,6 +29,11 @@ export type ToggleBlockAlign = 'center' | 'start';
 const prevenus = new Set<string>();
 
 export interface UiToggleBlockProps<T = boolean> {
+  /**
+   * Onde de pression sur le bloc entier, quand elle est activée. Un bloc
+   * désactivé ou en lecture seule n'en produit aucune.
+   */
+  ripple?: boolean;
   /** Contrôle de sélection embarqué. */
   indicator?: ToggleBlockIndicator;
   /** Côté du bloc où se tient l'indicateur. */
@@ -101,6 +106,7 @@ export interface UiToggleBlockProps<T = boolean> {
  * avec eux pour un corps entièrement libre.
  */
 export function UiToggleBlock<T = boolean>({
+  ripple = true,
   indicator = 'checkbox',
   indicatorPosition = 'start',
   align = 'center',
@@ -224,6 +230,7 @@ export function UiToggleBlock<T = boolean>({
     // le garde de lecture seule doit la voir avant qu'elle n'agisse.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
+      data-ripple={ripple && !disabled && !readOnly ? 'on' : 'off'}
       className={cx(
         'ui-toggle-block',
         size !== 'default' && `_${size}`,
diff --git a/packages/ui-kit-react/src/forms/ui-toggle-button/ui-toggle-button.tsx b/packages/ui-kit-react/src/forms/ui-toggle-button/ui-toggle-button.tsx
index b48d425..f549337 100644
--- a/packages/ui-kit-react/src/forms/ui-toggle-button/ui-toggle-button.tsx
+++ b/packages/ui-kit-react/src/forms/ui-toggle-button/ui-toggle-button.tsx
@@ -99,6 +99,11 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
 const prevenus = new Set<string>();
 
 export interface UiToggleButtonProps<T = boolean> {
+  /**
+   * Onde de pression sur la bascule, et sur chaque bouton en mode groupe, quand
+   * elle est activée. `false` la coupe, activation globale comprise.
+   */
+  ripple?: boolean;
   /** Valeur imposée. Renseignée, le bouton est **contrôlé**. */
   value?: ToggleButtonValue<T>;
   /** Valeur de départ quand il est non contrôlé. */
@@ -208,6 +213,7 @@ export interface UiToggleButtonProps<T = boolean> {
  *   qu'avec `aria-pressed`.
  */
 export function UiToggleButton<T = boolean>({
+  ripple = true,
   value,
   defaultValue,
   onValueChange,
@@ -433,6 +439,7 @@ export function UiToggleButton<T = boolean>({
               item.selected && '_selected',
               item.iconOnly && '_icon-only',
             )}
+            data-ripple={ripple ? 'on' : 'off'}
             disabled={item.disabled}
             tabIndex={tabIndex}
             aria-pressed={item.selected}
@@ -468,6 +475,7 @@ export function UiToggleButton<T = boolean>({
             checked && '_selected',
             isIconOnly && '_icon-only',
           )}
+          data-ripple={ripple ? 'on' : 'off'}
           id={uid}
           name={name}
           disabled={disabled}
diff --git a/packages/ui-kit-react/src/navigation/ui-bottom-tab-bar/ui-bottom-tab-bar.tsx b/packages/ui-kit-react/src/navigation/ui-bottom-tab-bar/ui-bottom-tab-bar.tsx
index 8589efd..5d63bb1 100644
--- a/packages/ui-kit-react/src/navigation/ui-bottom-tab-bar/ui-bottom-tab-bar.tsx
+++ b/packages/ui-kit-react/src/navigation/ui-bottom-tab-bar/ui-bottom-tab-bar.tsx
@@ -39,6 +39,7 @@ const prevenus = new Set<string>();
 /** Ce que la barre partage avec ses onglets. */
 interface UiBottomTabBarApi {
   showLabels: boolean;
+  ripple: boolean;
   isActive: (value: UiBottomTabValue) => boolean;
   activate: (value: UiBottomTabValue, event: MouseEvent<HTMLElement>) => void;
   onControlKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
@@ -83,6 +84,11 @@ export interface UiBottomTabBarProps extends Omit<
   safeArea?: boolean;
   /** Poser la barre dans son ancêtre positionné au lieu de la fenêtre. */
   contained?: boolean;
+  /**
+   * Onde de pression sur les onglets, quand elle est activée. `false` la coupe
+   * sur cette barre ; l'action surélevée a sa propre prop.
+   */
+  ripple?: boolean;
   children?: ReactNode;
 }
 
@@ -102,6 +108,7 @@ export function UiBottomTabBar({
   showLabels = true,
   safeArea = true,
   contained = false,
+  ripple = true,
   className,
   children,
   ...rest
@@ -120,6 +127,7 @@ export function UiBottomTabBar({
   const api = useMemo<UiBottomTabBarApi>(
     () => ({
       showLabels,
+      ripple,
       isActive: (candidate) => active === candidate,
       activate: (candidate, event) => {
         if (active === candidate) return;
@@ -148,7 +156,7 @@ export function UiBottomTabBar({
         controls[position]?.focus();
       },
     }),
-    [showLabels, active, setActive, onTabChange],
+    [showLabels, ripple, active, setActive, onTabChange],
   );
 
   return (
@@ -181,6 +189,8 @@ export interface UiBottomTabRootProps {
   tabIndex?: number;
   'aria-label'?: string;
   'aria-current'?: 'page';
+  /** Marqueur de l'onde de pression, lu par `UiRippleProvider`. */
+  'data-ripple': 'on' | 'off';
   'aria-disabled'?: true;
   onClick: (event: MouseEvent<HTMLElement>) => void;
   onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
@@ -204,6 +214,8 @@ export interface UiBottomTabProps extends Omit<ComponentPropsWithRef<'button'>,
   /** Variante de l'icône une fois actif. */
   activeIconType?: UiIconType;
   disabled?: boolean;
+  /** Onde de pression sur cet onglet. `false` le retire, activation globale comprise. */
+  ripple?: boolean;
   /** Destination : le contrôle devient une ancre. */
   href?: string;
   target?: string;
@@ -231,6 +243,7 @@ export function UiBottomTab({
   iconType = 'solid',
   activeIconType = 'solid',
   disabled = false,
+  ripple = true,
   href,
   target,
   rel,
@@ -248,6 +261,8 @@ export function UiBottomTab({
     );
 
   const active = bar.isActive(value);
+  // L'onglet ondule si lui ET la barre l'autorisent.
+  const rippleAttr = ripple && bar.ripple ? ('on' as const) : ('off' as const);
   const labelVisible = Boolean(label) && bar.showLabels;
   const ariaLabel = rest['aria-label'] ?? (labelVisible ? undefined : label);
   delete rest['aria-label'];
@@ -314,6 +329,7 @@ export function UiBottomTab({
       tabIndex: disabled ? -1 : undefined,
       'aria-label': ariaLabel,
       'aria-current': active ? 'page' : undefined,
+      'data-ripple': rippleAttr,
       'aria-disabled': disabled ? true : undefined,
       onClick: activate,
       onKeyDown: handleKeyDown,
@@ -331,6 +347,7 @@ export function UiBottomTab({
       disabled={disabled}
       aria-label={ariaLabel}
       aria-current={active ? 'page' : undefined}
+      data-ripple={rippleAttr}
       onClick={activate}
       onKeyDown={handleKeyDown}
     >
@@ -351,6 +368,8 @@ export interface UiBottomTabActionProps extends Omit<ComponentPropsWithRef<'butt
   /** Nom accessible. Obligatoire : le bouton n'a aucun texte visible. */
   'aria-label'?: string;
   disabled?: boolean;
+  /** Onde de pression sur l'action. Indépendante de celle de la barre, comme en Angular. */
+  ripple?: boolean;
 }
 
 /**
@@ -365,6 +384,7 @@ export function UiBottomTabAction({
   iconType = 'solid',
   level = 'high',
   disabled = false,
+  ripple = true,
   className,
   onKeyDown,
   ...rest
@@ -387,6 +407,7 @@ export function UiBottomTabAction({
       type="button"
       className={cx('ui-bottom-tab-action', `_${level}`, className)}
       disabled={disabled}
+      data-ripple={ripple ? 'on' : 'off'}
       onKeyDown={(event) => {
         bar?.onControlKeyDown(event);
         onKeyDown?.(event);
diff --git a/packages/ui-kit-react/src/navigation/ui-context-menu/ui-context-menu.tsx b/packages/ui-kit-react/src/navigation/ui-context-menu/ui-context-menu.tsx
index d1c88bf..03afcac 100644
--- a/packages/ui-kit-react/src/navigation/ui-context-menu/ui-context-menu.tsx
+++ b/packages/ui-kit-react/src/navigation/ui-context-menu/ui-context-menu.tsx
@@ -55,6 +55,8 @@ export interface UiContextMenuProps extends NativeProps {
   submenus?: MenuSubmenuMode;
   /** Couper l'animation d'apparition. */
   motionDisabled?: boolean;
+  /** Onde de pression sur les entrées, transmise au menu embarqué. */
+  ripple?: boolean;
 
   /** Contenu d'une entrée, transmis au menu. */
   renderItem?: (item: UiMenuItem) => ReactNode;
@@ -94,6 +96,7 @@ export function UiContextMenu({
   size = 'small',
   submenus = 'flyout',
   motionDisabled = false,
+  ripple = true,
   renderItem,
   renderHeader,
   onItemClick,
@@ -250,6 +253,7 @@ export function UiContextMenu({
           size={size}
           submenus={submenus}
           motionDisabled={motionDisabled}
+          ripple={ripple}
           renderItem={renderItem}
           renderHeader={renderHeader}
           className="_floating"
diff --git a/packages/ui-kit-react/src/navigation/ui-menu/ui-menu.tsx b/packages/ui-kit-react/src/navigation/ui-menu/ui-menu.tsx
index c138bc0..64966ad 100644
--- a/packages/ui-kit-react/src/navigation/ui-menu/ui-menu.tsx
+++ b/packages/ui-kit-react/src/navigation/ui-menu/ui-menu.tsx
@@ -60,6 +60,8 @@ export interface UiMenuItemRootProps {
   title?: string;
   'aria-label'?: string;
   'data-key': string;
+  /** Marqueur de l'onde de pression, lu par `UiRippleProvider`. */
+  'data-ripple': 'on' | 'off';
   onClick: MouseEventHandler<HTMLElement>;
   onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
   onMouseEnter: () => void;
@@ -189,6 +191,11 @@ export interface UiMenuProps extends NativeProps {
   submenus?: MenuSubmenuMode;
   /** Couper l'animation d'ouverture et celle du repli. */
   motionDisabled?: boolean;
+  /**
+   * Onde de pression sur les entrées, quand elle est activée. `false` la coupe
+   * sur ce menu, activation globale comprise.
+   */
+  ripple?: boolean;
 
   /** Contenu d'une entrée, à la place de l'icône et du libellé. */
   renderItem?: (item: UiMenuItem) => ReactNode;
@@ -300,6 +307,7 @@ export function UiMenu({
   size = 'default',
   submenus = 'inline',
   motionDisabled = false,
+  ripple = true,
   renderItem,
   renderHeader,
   start,
@@ -556,6 +564,7 @@ export function UiMenu({
       // et `tabIndexFor` en fait un -1, ce qui est exactement voulu.
       tabIndex: roving.tabIndexFor(path.indexOf(node.key)),
       'data-key': node.key,
+      'data-ripple': ripple ? 'on' : 'off',
       title: node.item.title || undefined,
       'aria-label': node.item.ariaLabel || undefined,
       onKeyDown: (event: KeyboardEvent<HTMLElement>) => onEntryKeyDown(event, node),
@@ -567,7 +576,7 @@ export function UiMenu({
       },
       onFocus: () => setFocusedKey(node.key),
     }),
-    [roving, path, onEntryKeyDown],
+    [roving, path, onEntryKeyDown, ripple],
   );
 
   /** Icône et libellé, ou le contenu fourni par l'appelant. */
@@ -697,6 +706,7 @@ export function UiMenu({
         title: shared.title,
         'aria-label': shared['aria-label'],
         'data-key': key,
+        'data-ripple': shared['data-ripple'],
         onClick: (event) => activate(event, node),
         onKeyDown: shared.onKeyDown,
         onMouseEnter: shared.onMouseEnter,
@@ -822,6 +832,7 @@ export function UiMenu({
 interface MenuEntryProps {
   tabIndex: number;
   'data-key': string;
+  'data-ripple': 'on' | 'off';
   title?: string;
   'aria-label'?: string;
   onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/index.ts b/packages/ui-kit-react/src/navigation/ui-sidebar/index.ts
new file mode 100644
index 0000000..6bc268e
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/index.ts
@@ -0,0 +1,26 @@
+/*
+ * ui-sidebar livre aussi son menu déclaratif et le crochet de ses
+ * déclencheurs : les trois lisent le même état, un seul point d'entrée.
+ */
+
+export {
+  UiSidebar,
+  UiSidebarProvider,
+  useUiSidebar,
+  useUiSidebarTrigger,
+  getUiSidebarTriggerProps,
+  type UiSidebarProps,
+  type UiSidebarApi,
+  type UiSidebarSlot,
+  type UiSidebarTriggerProps,
+  type SidebarSide,
+  type SidebarMode,
+} from './ui-sidebar';
+export {
+  UiSidebarMenu,
+  type UiSidebarMenuProps,
+  type UiSidebarMenuItem,
+  type UiSidebarMenuItemCommandEvent,
+  type UiSidebarMenuItemRootProps,
+  type SidebarMenuSize,
+} from './ui-sidebar-menu';
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.scss b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.scss
new file mode 100644
index 0000000..5940891
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.scss
@@ -0,0 +1,288 @@
+@use 'utils';
+@use 'sass:map';
+
+// =====================================================================
+// ui-sidebar-menu : co-located styles. All values come from design tokens.
+//
+// Colors switch on the navigation family (`_high` / `_low`). The active entry
+// pairs `surface-active` + `content-active` (the active content token is only
+// legible ON the active surface).
+// =====================================================================
+
+// --- Config (extension points) ---------------------------------------
+$levels: high, low; /// Niveaux générant les modifiers `._<niveau>`.
+
+/// Hauteur, padding et typo d'un item, par taille.
+$sizes: (
+  'default': (
+    item-height: var(--ui-sidebar-item-height, #{utils.rem-calc(40)}),
+    item-padding-x: var(--ui-sidebar-item-padding-x, var(--units-md)),
+    font-size: var(--ui-sidebar-font-size, var(--size-typography-text-default)),
+    header-font-size: var(--ui-sidebar-header-font-size, var(--size-typography-text-sm)),
+  ),
+  'small': (
+    item-height: var(--ui-sidebar-item-height-small, #{utils.rem-calc(32)}),
+    item-padding-x: var(--ui-sidebar-item-padding-x-small, var(--units-sm)),
+    font-size: var(--ui-sidebar-font-size-small, var(--size-typography-text-md)),
+    header-font-size: var(--ui-sidebar-header-font-size-small, var(--size-typography-text-sm)),
+  ),
+);
+$size-default: map.get($sizes, 'default');                                         /// Raccourci vers l'entrée `default` de `$sizes`.
+$item-radius: var(--ui-sidebar-item-radius, var(--radius-sm));                     /// Rayon d'un item.
+$group-indent: var(--ui-sidebar-group-indent, var(--units-lg));                    /// Retrait des items d'un sous-groupe.
+$separator-width: var(--ui-sidebar-separator-width, var(--stroke-sm));             /// Épaisseur d'un séparateur.
+$focus-ring-width: var(--ui-sidebar-focus-ring-width, #{utils.$focus-ring-width}); /// Épaisseur de l'anneau de focus.
+$icon-slot: var(--ui-sidebar-icon-slot-size, #{utils.rem-calc(20)});               /// Largeur réservée à l'icône d'un item.
+
+@mixin menu-size($size) {
+  // Exposed so the collapsed rail can size square icon buttons from the same value.
+  --ui-sidebar-menu-item-size: #{map.get($size, item-height)};
+
+  .ui-sidebar-menu-action {
+    min-height: var(--ui-sidebar-menu-item-size);
+    padding: 0 map.get($size, item-padding-x);
+    font-size: map.get($size, font-size);
+  }
+  .ui-sidebar-menu-section-header {
+    padding: 0 map.get($size, item-padding-x);
+    font-size: map.get($size, header-font-size);
+  }
+}
+
+.ui-sidebar-menu {
+  display: block;
+  box-sizing: border-box;
+  font-family: var(--ui-sidebar-font-family, var(--fontfamily-base)); /// Famille typographique du composant.
+
+  @include menu-size($size-default);
+
+  @each $name, $size in $sizes {
+    @if $name != 'default' {
+      &._#{$name} {
+        @include menu-size($size);
+      }
+    }
+  }
+
+  // --- Lists ------------------------------------------------------------
+  &-list,
+  &-sub {
+    display: flex;
+    flex-direction: column;
+    gap: var(--units-2xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  // Nested (collapsible) groups indent under their toggle.
+  &-sub._nested {
+    padding-inline-start: $group-indent;
+  }
+
+  &-section,
+  &-entry {
+    display: flex;
+    flex-direction: column;
+    gap: var(--units-2xs);
+  }
+
+  &-section {
+    margin-block-start: var(--units-sm);
+
+    &:first-child {
+      margin-block-start: 0;
+    }
+  }
+
+  // --- Section header (non-collapsible) ---------------------------------
+  &-section-header {
+    display: flex;
+    align-items: center;
+    gap: var(--units-sm);
+    min-height: utils.rem-calc(28);
+    font-weight: var(--ui-sidebar-section-header-weight, var(--weight-bold)); /// Graisse de l'en-tête de section.
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    user-select: none;
+  }
+
+  // --- Action shell (leaf link / button / group toggle) -----------------
+  &-action {
+    display: flex;
+    align-items: center;
+    gap: var(--units-sm);
+    box-sizing: border-box;
+    width: 100%;
+    border: none;
+    border-radius: $item-radius;
+    background: none;
+    font-family: inherit;
+    font-weight: var(--ui-sidebar-action-weight, var(--weight-regular)); /// Graisse de l'action.
+    line-height: 1.2;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    @include utils.control-transition(background-color, color, box-shadow);
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 $focus-ring-width var(--ui-sidebar-menu-action-focus-ring-color, var(--global-border-focus)); /// Couleur de l'anneau de focus d'une action.
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &-icon {
+    flex: 0 0 auto;
+    inline-size: $icon-slot;
+    line-height: 0;
+    text-align: center;
+    justify-content: center;
+  }
+
+  &-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  // Trailing ui-badge: layout only, the badge owns its own colors/typography.
+  &-badge {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    line-height: 0;
+  }
+
+  // Trailing "opens elsewhere" icon (external links).
+  &-external {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    line-height: 0;
+    opacity: 0.6;
+  }
+
+  // A badge following an external icon must not re-consume the auto margin.
+  &-external + &-badge {
+    margin-inline-start: var(--units-sm);
+  }
+
+  &-chevron {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    line-height: 0;
+    @include utils.motion-transition(rotate);
+
+    &._open {
+      rotate: 180deg;
+    }
+  }
+
+  // --- Collapsible submenu (grid-rows technique) ------------------------
+  &-collapse {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    @include utils.motion-transition(grid-template-rows, opacity);
+
+    &._open {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+  }
+
+  &-collapse-inner {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  &._no-motion {
+    .ui-sidebar-menu-collapse,
+    .ui-sidebar-menu-chevron {
+      transition: none;
+    }
+  }
+
+  // --- Separator --------------------------------------------------------
+  &-separator {
+    margin: var(--units-2xs) var(--units-sm);
+    border: none;
+  }
+
+  // --- Collapsed (icon rail) --------------------------------------------
+  // Hide labels / badges / chevrons and section headers; center the icons.
+  &._collapsed {
+    .ui-sidebar-menu-label,
+    .ui-sidebar-menu-badge,
+    .ui-sidebar-menu-external,
+    .ui-sidebar-menu-chevron {
+      display: none;
+    }
+
+    .ui-sidebar-menu-section-header {
+      display: none;
+    }
+
+    .ui-sidebar-menu-sub._nested {
+      padding-inline-start: 0;
+    }
+
+    // Perfect square icon buttons, centered in the rail.
+    .ui-sidebar-menu-action {
+      justify-content: center;
+      inline-size: var(--ui-sidebar-menu-item-size);
+      block-size: var(--ui-sidebar-menu-item-size);
+      min-height: var(--ui-sidebar-menu-item-size);
+      padding: 0;
+      margin-inline: auto;
+    }
+
+    // Collapsed rail has no room for open sub-trees.
+    .ui-sidebar-menu-collapse {
+      display: none;
+    }
+  }
+
+  // --- Colors (one set per navigation level) ----------------------------
+  @each $lvl in $levels {
+    &._#{$lvl} {
+      .ui-sidebar-menu-section-header {
+        color: var(--ui-sidebar-menu-section-header-color, var(--navigation-#{$lvl}-content-default)); /// Couleur d'un intitulé de section.
+        opacity: 0.75;
+      }
+
+      .ui-sidebar-menu-separator {
+        border-top: $separator-width solid var(--ui-sidebar-menu-separator-stroke, var(--navigation-#{$lvl}-stroke-default)); /// Couleur d'un séparateur de menu.
+      }
+
+      .ui-sidebar-menu-action {
+        color: var(--ui-sidebar-menu-action-color, var(--navigation-#{$lvl}-content-default)); /// Couleur d'une action de menu.
+
+        &:hover:not(:disabled) {
+          background-color: var(--ui-sidebar-menu-action-surface-hover, var(--navigation-#{$lvl}-surface-hover)); /// Fond d'une action au survol.
+          color: var(--ui-sidebar-menu-action-color-hover, var(--navigation-#{$lvl}-content-hover));              /// Couleur d'une action au survol.
+        }
+
+        &:active:not(:disabled) {
+          background-color: var(--ui-sidebar-menu-action-surface-pressed, var(--navigation-#{$lvl}-surface-active)); /// Fond d'une action enfoncée.
+          color: var(--ui-sidebar-menu-action-color-pressed, var(--navigation-#{$lvl}-content-active));              /// Couleur d'une action enfoncée.
+        }
+
+        // Active route / entry: active content is only legible on the active surface.
+        &._active {
+          background-color: var(--ui-sidebar-menu-action-surface-active, var(--navigation-#{$lvl}-surface-active)); /// Fond de l'entrée correspondant à la route courante.
+          color: var(--ui-sidebar-menu-action-color-active, var(--navigation-#{$lvl}-content-active));              /// Couleur de l'entrée courante : elle n'est lisible que sur le fond `surface-active` qui l'accompagne.
+          font-weight: var(--ui-sidebar-weight, var(--weight-bold)); /// Graisse du texte.
+        }
+
+        &:disabled {
+          color: var(--ui-sidebar-menu-action-color-disabled, var(--navigation-#{$lvl}-content-disabled)); /// Couleur d'une action désactivée.
+        }
+      }
+    }
+  }
+}
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.test.tsx b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.test.tsx
new file mode 100644
index 0000000..7cb7671
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.test.tsx
@@ -0,0 +1,274 @@
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { UiSidebarMenu, type UiSidebarMenuItem, type UiSidebarMenuProps } from './ui-sidebar-menu';
+
+function Menu(props: Partial<UiSidebarMenuProps>) {
+  return <UiSidebarMenu aria-label="Sections" {...props} />;
+}
+
+const actions = (root: ParentNode) => [
+  ...root.querySelectorAll<HTMLElement>('.ui-sidebar-menu-action'),
+];
+
+test('un <nav> nommé enveloppe des listes explicites', async () => {
+  const screen = await render(<Menu items={[{ label: 'Accueil' }, { label: 'Projets' }]} />);
+  const nav = screen.container.querySelector('nav.ui-sidebar-menu')!;
+
+  expect(nav).toHaveAttribute('aria-label', 'Sections');
+  expect(nav).toHaveClass('_high');
+  expect(nav.querySelector('ul.ui-sidebar-menu-list')).toHaveAttribute('role', 'list');
+  expect(actions(screen.container).map((a) => a.textContent)).toEqual(['Accueil', 'Projets']);
+});
+
+test('une entrée sans destination est un bouton, courante par aria-current', async () => {
+  const screen = await render(
+    <Menu items={[{ label: 'Accueil', active: true }, { label: 'Projets' }]} />,
+  );
+  const [accueil, projets] = actions(screen.container);
+
+  expect(accueil!.tagName).toBe('BUTTON');
+  expect(accueil).toHaveClass('_active');
+  expect(accueil).toHaveAttribute('aria-current', 'true');
+  expect(projets).not.toHaveAttribute('aria-current');
+});
+
+test("une URL fait une ancre ; target _blank ajoute rel et l'icône « ailleurs »", async () => {
+  const screen = await render(
+    <Menu
+      items={[
+        { label: 'Docs', url: '/docs', active: true },
+        { label: 'Statut', url: 'https://status.example.org', target: '_blank' },
+      ]}
+    />,
+  );
+  const [docs, statut] = actions(screen.container);
+
+  expect(docs!.tagName).toBe('A');
+  expect(docs).toHaveAttribute('href', '/docs');
+  expect(docs).toHaveAttribute('aria-current', 'page');
+  expect(statut).toHaveAttribute('rel', 'noopener noreferrer');
+  expect(statut!.querySelector('.ui-sidebar-menu-external')).not.toBeNull();
+  expect(docs!.querySelector('.ui-sidebar-menu-external')).toBeNull();
+});
+
+test('command et onItemClick reçoivent l’entrée ; désactivée, rien ne part', async () => {
+  const command = vi.fn();
+  const onItemClick = vi.fn();
+  const items: UiSidebarMenuItem[] = [
+    { label: 'Exporter', command },
+    { label: 'Supprimer', disabled: true, command },
+  ];
+  const screen = await render(<Menu items={items} onItemClick={onItemClick} />);
+
+  await screen.getByRole('button', { name: 'Exporter' }).click();
+
+  expect(command).toHaveBeenCalledTimes(1);
+  expect(command.mock.calls[0]![0].item).toBe(items[0]);
+  expect(onItemClick.mock.calls[0]![0].item).toBe(items[0]);
+  await expect.element(screen.getByRole('button', { name: 'Supprimer' })).toBeDisabled();
+});
+
+test('render branche le lien d’un routeur avec les props de l’action', async () => {
+  const onItemClick = vi.fn();
+  const screen = await render(
+    <Menu
+      onItemClick={onItemClick}
+      items={[
+        {
+          label: 'Facturation',
+          icon: 'credit-card',
+          active: true,
+          render: (props, children) => (
+            <a {...props} href="/facturation" data-routeur="oui">
+              {children}
+            </a>
+          ),
+        },
+      ]}
+    />,
+  );
+  const link = screen.container.querySelector<HTMLAnchorElement>('a[data-routeur]')!;
+
+  expect(link).toHaveClass('ui-sidebar-menu-action', '_active');
+  expect(link).toHaveAttribute('aria-current', 'page');
+  expect(link.querySelector('.ui-sidebar-menu-label')).toHaveTextContent('Facturation');
+
+  link.addEventListener('click', (e) => e.preventDefault());
+  await screen.getByRole('link', { name: 'Facturation' }).click();
+  expect(onItemClick).toHaveBeenCalledTimes(1);
+});
+
+test('une section se nomme par son en-tête, sans collision entre deux menus', async () => {
+  const items: UiSidebarMenuItem[] = [{ label: 'Gestion', items: [{ label: 'Équipe' }] }];
+  const screen = await render(
+    <>
+      <Menu items={items} aria-label="Premier" />
+      <Menu items={items} aria-label="Second" />
+    </>,
+  );
+  const headers = [...screen.container.querySelectorAll('.ui-sidebar-menu-section-header')];
+  const subs = [...screen.container.querySelectorAll('.ui-sidebar-menu-section > ul')];
+
+  expect(headers).toHaveLength(2);
+  expect(headers[0]!.id).not.toBe(headers[1]!.id);
+  expect(subs[0]).toHaveAttribute('aria-labelledby', headers[0]!.id);
+  expect(subs[1]).toHaveAttribute('aria-labelledby', headers[1]!.id);
+  expect(subs[0]).toHaveAttribute('role', 'list');
+  // Une section n'est pas repliable au premier niveau.
+  expect(screen.container.querySelector('._toggle')).toBeNull();
+});
+
+test('un groupe se déplie et se replie, et son contenu fermé est inerte', async () => {
+  const onExpandedKeysChange = vi.fn();
+  const screen = await render(
+    <Menu
+      onExpandedKeysChange={onExpandedKeysChange}
+      items={[
+        { id: 'catalogue', label: 'Catalogue', toggleable: true, items: [{ label: 'Produits' }] },
+      ]}
+    />,
+  );
+  const toggle = screen.getByRole('button', { name: 'Catalogue' });
+  const region = () => screen.container.querySelector<HTMLElement>('.ui-sidebar-menu-collapse')!;
+
+  await expect.element(toggle).toHaveAttribute('aria-expanded', 'false');
+  await expect.element(toggle).toHaveAttribute('aria-controls', region().id);
+  expect(region().inert).toBe(true);
+
+  await toggle.click();
+
+  await expect.element(toggle).toHaveAttribute('aria-expanded', 'true');
+  expect(region().inert).toBe(false);
+  expect(region()).toHaveClass('_open');
+  expect(onExpandedKeysChange).toHaveBeenLastCalledWith(['catalogue']);
+
+  await toggle.click();
+  await expect.element(toggle).toHaveAttribute('aria-expanded', 'false');
+  expect(onExpandedKeysChange).toHaveBeenLastCalledWith([]);
+});
+
+test("un groupe qui contient l'entrée courante se déplie d'office, sur plusieurs niveaux", async () => {
+  const screen = await render(
+    <Menu
+      items={[
+        {
+          label: 'Catalogue',
+          toggleable: true,
+          items: [
+            { label: 'Produits' },
+            { label: 'Collections', items: [{ label: 'Promotions', active: true }] },
+          ],
+        },
+        { label: 'Clients', toggleable: true, expanded: true, items: [{ label: 'Comptes' }] },
+        { label: 'Stock', toggleable: true, items: [{ label: 'Entrepôts' }] },
+      ]}
+    />,
+  );
+  const expanded = (name: string) =>
+    screen.getByRole('button', { name, exact: true }).element().getAttribute('aria-expanded');
+
+  expect(expanded('Catalogue')).toBe('true');
+  // Imbriqué, un groupe est repliable par défaut.
+  expect(expanded('Collections')).toBe('true');
+  expect(expanded('Clients')).toBe('true');
+  expect(expanded('Stock')).toBe('false');
+  expect(screen.container.querySelector('.ui-sidebar-menu-entry._active-within')).not.toBeNull();
+});
+
+test('contrôlé, le dépliage suit expandedKeys', async () => {
+  const onExpandedKeysChange = vi.fn();
+  const screen = await render(
+    <Menu
+      expandedKeys={[]}
+      onExpandedKeysChange={onExpandedKeysChange}
+      items={[
+        { id: 'g', label: 'Groupe', toggleable: true, items: [{ label: 'Enfant', active: true }] },
+      ]}
+    />,
+  );
+  const toggle = screen.getByRole('button', { name: 'Groupe' });
+
+  // Imposé vide, le dépliage d'office ne joue pas.
+  await expect.element(toggle).toHaveAttribute('aria-expanded', 'false');
+  await toggle.click();
+  expect(onExpandedKeysChange).toHaveBeenCalledWith(['g']);
+  await expect.element(toggle).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('séparateur, entrée masquée et badge', async () => {
+  const screen = await render(
+    <Menu
+      items={[
+        { label: 'Messages', badge: '3', badgeLevel: 'highlight' },
+        { separator: true },
+        { label: 'Caché', visible: false },
+        { label: 'Aide' },
+      ]}
+    />,
+  );
+
+  expect(
+    actions(screen.container).map((a) => a.querySelector('.ui-sidebar-menu-label')!.textContent),
+  ).toEqual(['Messages', 'Aide']);
+  const separator = screen.container.querySelector('li.ui-sidebar-menu-separator')!;
+  expect(separator).toHaveAttribute('role', 'separator');
+  expect(separator).toHaveAttribute('aria-hidden', 'true');
+  expect(screen.container.querySelector('.ui-sidebar-menu-badge')).toHaveTextContent('3');
+});
+
+test('replié, chaque icône garde un nom accessible et un title', async () => {
+  const screen = await render(
+    <Menu
+      collapsed
+      items={[
+        { label: 'Projets', icon: 'folder-open' },
+        { label: 'Aide', icon: 'circle-question' },
+      ]}
+    />,
+  );
+  const [projets] = actions(screen.container);
+
+  expect(screen.container.querySelector('nav')).toHaveClass('_collapsed');
+  expect(projets).toHaveAttribute('aria-label', 'Projets');
+  expect(projets).toHaveAttribute('title', 'Projets');
+  await expect.element(screen.getByRole('button', { name: 'Projets' })).toBeInTheDocument();
+});
+
+test('replié avec tooltips, le libellé passe en info-bulle au lieu du title', async () => {
+  const screen = await render(
+    <div style={{ width: 80 }}>
+      <Menu collapsed tooltips items={[{ label: 'Projets', icon: 'folder-open' }]} />
+    </div>,
+  );
+  const [projets] = actions(screen.container);
+
+  expect(projets).not.toHaveAttribute('title');
+  await screen.getByRole('button', { name: 'Projets' }).hover();
+
+  await expect
+    .poll(() => document.querySelector('.ui-tooltip:popover-open')?.textContent)
+    .toBe('Projets');
+});
+
+test('déplié, les tooltips restent coupées', async () => {
+  const screen = await render(
+    <Menu tooltips items={[{ label: 'Projets', icon: 'folder-open' }]} />,
+  );
+  const [projets] = actions(screen.container);
+
+  expect(projets).not.toHaveAttribute('aria-label');
+  expect(projets).not.toHaveAttribute('title');
+  await screen.getByRole('button', { name: 'Projets' }).hover();
+  await new Promise((r) => setTimeout(r, 400));
+
+  expect(document.querySelector('.ui-tooltip:popover-open')).toBeNull();
+});
+
+test('motion à faux et la taille small posent leurs modificateurs', async () => {
+  const screen = await render(
+    <Menu motion={false} size="small" level="low" items={[{ label: 'A' }]} />,
+  );
+
+  expect(screen.container.querySelector('nav')).toHaveClass('_no-motion', '_small', '_low');
+});
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.tsx b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.tsx
new file mode 100644
index 0000000..98a73fe
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar-menu.tsx
@@ -0,0 +1,434 @@
+'use client';
+
+import {
+  useId,
+  useMemo,
+  type ComponentPropsWithRef,
+  type FocusEventHandler,
+  type MouseEvent,
+  type PointerEventHandler,
+  type ReactNode,
+  type Ref,
+} from 'react';
+
+import { UiIcon } from '../../base/ui-icon';
+import { useControllableState } from '../../core/forms';
+import type { UiFeedbackLevel, UiSubLevel } from '../../core/types';
+import { cx } from '../../core/utils';
+import { UiBadge } from '../../informative/ui-badge';
+import { UiTooltip } from '../../informative/ui-tooltip';
+
+import { useEnclosingSidebar } from './ui-sidebar';
+
+import './ui-sidebar-menu.scss';
+
+/** Densité du menu. */
+export type SidebarMenuSize = 'default' | 'small';
+
+/** Ce que reçoivent `command` et `onItemClick`. */
+export interface UiSidebarMenuItemCommandEvent {
+  originalEvent: MouseEvent<HTMLElement>;
+  item: UiSidebarMenuItem;
+}
+
+/**
+ * Props posées sur l'action d'une entrée, telles que `render` les reçoit : tout
+ * ce que le menu aurait mis sur son `<a>`, à reverser sur le lien du routeur.
+ */
+export interface UiSidebarMenuItemRootProps {
+  className: string;
+  href?: string;
+  target?: string;
+  rel?: string;
+  title?: string;
+  'aria-label'?: string;
+  'aria-current'?: 'page';
+  'aria-describedby'?: string;
+  /** Marqueur de l'onde de pression, lu par `UiRippleProvider`. */
+  'data-ripple': 'on' | 'off';
+  onClick: (event: MouseEvent<HTMLElement>) => void;
+  onPointerEnter: PointerEventHandler<HTMLElement>;
+  onPointerLeave: PointerEventHandler<HTMLElement>;
+  onFocus: FocusEventHandler<HTMLElement>;
+  onBlur: FocusEventHandler<HTMLElement>;
+  /** Ref de rappel de l'info-bulle, à reverser pour qu'elle trouve son ancre. */
+  ref: (node: HTMLElement | null) => void;
+}
+
+/**
+ * Entrée déclarative du menu. Une entrée est un séparateur, une feuille
+ * (commande, lien ou lien de routeur), une **section** libellée, ou un
+ * **groupe** repliable (`toggleable`) qui révèle un sous-arbre.
+ */
+export interface UiSidebarMenuItem {
+  /** Identifiant stable : il porte l'état déplié. À défaut, une clé de position. */
+  id?: string;
+  /** Texte de l'entrée ou de l'en-tête de groupe. */
+  label?: string;
+  /** Icône de tête, par son nom. Seule visible dans le rail replié. */
+  icon?: string;
+  /** Entrées enfants : l'entrée devient une section ou un groupe. */
+  items?: UiSidebarMenuItem[];
+  /** Rendre un séparateur à la place d'une entrée. */
+  separator?: boolean;
+  disabled?: boolean;
+  /** Masquer l'entrée. Visible par défaut. */
+  visible?: boolean;
+  /** Appelée à l'activation de la feuille. */
+  command?: (event: UiSidebarMenuItemCommandEvent) => void;
+  /** Destination : la feuille devient une ancre. */
+  url?: string;
+  target?: string;
+  /** Entrée courante. C'est l'application qui le sait, routeur ou non. */
+  active?: boolean;
+  /** Badge de fin (compte, statut), rendu par `ui-badge`. */
+  badge?: string;
+  /** Niveau du badge. `default` par défaut. */
+  badgeLevel?: UiFeedbackLevel;
+  /** Forcer l'icône « ouvre ailleurs ». Automatique avec `target="_blank"`. */
+  external?: boolean;
+  /**
+   * Groupe repliable. Faux par défaut au premier niveau (un en-tête de section),
+   * vrai pour un groupe imbriqué. Sans effet sur une entrée sans enfants.
+   */
+  toggleable?: boolean;
+  /** Groupe déplié au départ. `expandedKeys` l'emporte. */
+  expanded?: boolean;
+  /** Nom accessible. */
+  ariaLabel?: string;
+  /** Classe(s) posée(s) sur l'élément de liste de l'entrée. */
+  className?: string;
+  /**
+   * Rend l'action soi-même, en reversant les props reçues. C'est ainsi qu'on
+   * branche le lien d'un routeur, le kit n'en imposant aucun.
+   */
+  render?: (props: UiSidebarMenuItemRootProps, children: ReactNode) => ReactNode;
+}
+
+export interface UiSidebarMenuProps extends Omit<ComponentPropsWithRef<'nav'>, 'children'> {
+  items?: UiSidebarMenuItem[];
+  /** Famille de jetons de navigation. */
+  level?: UiSubLevel;
+  size?: SidebarMenuSize;
+  /** Rail replié en usage autonome. Une `UiSidebar` parente l'emporte. */
+  collapsed?: boolean;
+  /** Animer l'ouverture des groupes imbriqués. */
+  motion?: boolean;
+  /** Dans le rail replié, montrer le libellé de chaque entrée en info-bulle. */
+  tooltips?: boolean;
+  /**
+   * Onde de pression sur les entrées, quand elle est activée. `false` la coupe
+   * sur ce menu, activation globale comprise.
+   */
+  ripple?: boolean;
+  /** Groupes dépliés imposés. Renseignés, le dépliage est contrôlé. */
+  expandedKeys?: string[];
+  defaultExpandedKeys?: string[];
+  onExpandedKeysChange?: (keys: string[]) => void;
+  /** Appelé à l'activation d'une feuille. */
+  onItemClick?: (event: UiSidebarMenuItemCommandEvent) => void;
+  ref?: Ref<HTMLElement>;
+}
+
+/** Nœud prêt à rendre. */
+interface MenuNode {
+  item: UiSidebarMenuItem;
+  key: string;
+  kind: 'separator' | 'section' | 'group' | 'item';
+  children: MenuNode[];
+  depth: number;
+  /** Un descendant est actif : dépliage d'office et `_active-within`. */
+  activeWithin: boolean;
+}
+
+function resolve(items: UiSidebarMenuItem[], depth: number, prefix: string): MenuNode[] {
+  const nodes: MenuNode[] = [];
+  items.forEach((item, index) => {
+    if (item.visible === false) return;
+    const key = item.id ?? `${prefix}-${index}`;
+    if (item.separator) {
+      nodes.push({ item, key, kind: 'separator', children: [], depth, activeWithin: false });
+      return;
+    }
+    if (item.items?.length) {
+      const children = resolve(item.items, depth + 1, key);
+      const toggleable = item.toggleable ?? depth > 0;
+      const activeWithin = children.some((c) => c.item.active || c.activeWithin);
+      nodes.push({
+        item,
+        key,
+        kind: toggleable ? 'group' : 'section',
+        children,
+        depth,
+        activeWithin,
+      });
+      return;
+    }
+    nodes.push({ item, key, kind: 'item', children: [], depth, activeWithin: false });
+  });
+  return nodes;
+}
+
+function seedKeys(nodes: MenuNode[], out: string[] = []): string[] {
+  for (const node of nodes) {
+    if (node.kind === 'group' && (node.item.expanded || node.activeWithin)) out.push(node.key);
+    if (node.children.length) seedKeys(node.children, out);
+  }
+  return out;
+}
+
+/**
+ * ui-sidebar-menu : menu de navigation déclaratif pour `ui-sidebar`.
+ *
+ * Rend un modèle `UiSidebarMenuItem[]` en région de navigation : un `<nav>` qui
+ * enveloppe des listes. Sections libellées, groupes repliables sur plusieurs
+ * niveaux, et entrée courante ; un groupe qui contient l'entrée courante se
+ * déplie d'office.
+ *
+ * Posé dans une `UiSidebar`, il lit l'état replié résolu par contexte et se
+ * replie en rail d'icônes. Seul, `collapsed` pilote le rail.
+ *
+ * Le clavier est natif : `Tab` parcourt liens et boutons, `Entrée` et `Espace`
+ * les activent.
+ */
+export function UiSidebarMenu({
+  items = [],
+  level = 'high',
+  size = 'default',
+  collapsed = false,
+  motion = true,
+  tooltips = false,
+  ripple = true,
+  expandedKeys,
+  defaultExpandedKeys,
+  onExpandedKeysChange,
+  onItemClick,
+  className,
+  ...rest
+}: UiSidebarMenuProps) {
+  const uid = useId();
+  const sidebar = useEnclosingSidebar();
+  // Une barre parente l'emporte, mais seulement celle qui CONTIENT le menu : un
+  // fournisseur publie aussi l'état d'une barre, et un menu autonome placé à côté
+  // ne doit pas s'en croire le descendant.
+  const isCollapsed = sidebar ? sidebar.collapsed : collapsed;
+  const showTooltips = tooltips && isCollapsed;
+
+  const nodes = useMemo(() => resolve(items, 0, 'n'), [items]);
+
+  // Non contrôlé et jamais touché : les groupes dépliés se DÉDUISENT du modèle
+  // (`expanded`, entrée courante), à chaque rendu. Le premier dépliage manuel
+  // fige la liste.
+  const [keys, setKeys] = useControllableState<string[] | undefined>({
+    value: expandedKeys,
+    defaultValue: defaultExpandedKeys,
+    onChange: onExpandedKeysChange as ((next: string[] | undefined) => void) | undefined,
+  });
+  const expandedSet = new Set(keys ?? seedKeys(nodes));
+
+  const toggle = (node: MenuNode) => {
+    if (node.item.disabled) return;
+    const next = new Set(expandedSet);
+    if (next.has(node.key)) next.delete(node.key);
+    else next.add(node.key);
+    setKeys([...next]);
+  };
+
+  const activate = (event: MouseEvent<HTMLElement>, node: MenuNode) => {
+    if (node.item.disabled) return;
+    node.item.command?.({ originalEvent: event, item: node.item });
+    onItemClick?.({ originalEvent: event, item: node.item });
+  };
+
+  /** Nom accessible, et cible d'info-bulle, dans le rail replié. */
+  const railTitle = (node: MenuNode) =>
+    isCollapsed ? (node.item.ariaLabel ?? node.item.label) : node.item.ariaLabel;
+
+  /** Identifiants de DOM : préfixés par l'instance, deux menus ne se marchent pas dessus. */
+  const domId = (node: MenuNode, suffix: string) => `${uid}${node.key}-${suffix}`;
+
+  const icon = (name: string | undefined) =>
+    name ? <UiIcon className="ui-sidebar-menu-icon" name={name} size="sm" /> : null;
+
+  const badge = (node: MenuNode) =>
+    node.item.badge ? (
+      <UiBadge
+        className="ui-sidebar-menu-badge"
+        value={node.item.badge}
+        level={node.item.badgeLevel ?? 'default'}
+        size="small"
+      />
+    ) : null;
+
+  const renderNodes = (list: MenuNode[]): ReactNode =>
+    list.map((node) => {
+      switch (node.kind) {
+        case 'separator':
+          return (
+            <li
+              key={node.key}
+              className="ui-sidebar-menu-separator"
+              role="separator"
+              aria-hidden="true"
+            />
+          );
+
+        case 'section':
+          return (
+            <li key={node.key} className={cx('ui-sidebar-menu-section', node.item.className)}>
+              <span className="ui-sidebar-menu-section-header" id={domId(node, 'h')}>
+                {icon(node.item.icon)}
+                <span className="ui-sidebar-menu-label">{node.item.label}</span>
+              </span>
+              <ul className="ui-sidebar-menu-sub" role="list" aria-labelledby={domId(node, 'h')}>
+                {renderNodes(node.children)}
+              </ul>
+            </li>
+          );
+
+        case 'group': {
+          const open = expandedSet.has(node.key);
+          const title = railTitle(node);
+          return (
+            <li
+              key={node.key}
+              className={cx(
+                'ui-sidebar-menu-entry',
+                node.activeWithin && '_active-within',
+                node.item.className,
+              )}
+            >
+              <UiTooltip
+                content={node.item.label}
+                position="right"
+                disabled={!showTooltips}
+                trigger={(tip) => (
+                  <button
+                    {...tip}
+                    type="button"
+                    className="ui-sidebar-menu-action _toggle"
+                    data-ripple={ripple ? 'on' : 'off'}
+                    aria-expanded={open}
+                    aria-controls={domId(node, 'g')}
+                    aria-label={title}
+                    title={showTooltips ? undefined : title}
+                    disabled={node.item.disabled}
+                    onClick={() => {
+                      tip.onClick();
+                      toggle(node);
+                    }}
+                  >
+                    {icon(node.item.icon)}
+                    <span className="ui-sidebar-menu-label">{node.item.label}</span>
+                    {badge(node)}
+                    {/* `_open` et non `_expanded` : une classe utilitaire globale porte ce nom. */}
+                    <UiIcon
+                      className={cx('ui-sidebar-menu-chevron', open && '_open')}
+                      name="chevron-down"
+                      size="sm"
+                    />
+                  </button>
+                )}
+              />
+              <div
+                className={cx('ui-sidebar-menu-collapse', open && '_open')}
+                id={domId(node, 'g')}
+                inert={!open}
+              >
+                <div className="ui-sidebar-menu-collapse-inner">
+                  <ul className="ui-sidebar-menu-sub _nested" role="list">
+                    {renderNodes(node.children)}
+                  </ul>
+                </div>
+              </div>
+            </li>
+          );
+        }
+
+        case 'item': {
+          const { item } = node;
+          const title = railTitle(node);
+          const external = item.external === true || item.target === '_blank';
+          const content = (
+            <>
+              {icon(item.icon)}
+              <span className="ui-sidebar-menu-label">{item.label}</span>
+              {external && (
+                <UiIcon
+                  className="ui-sidebar-menu-external"
+                  name="arrow-up-right-from-square"
+                  size="sm"
+                  aria-hidden="true"
+                />
+              )}
+              {badge(node)}
+            </>
+          );
+          return (
+            <li key={node.key} className={cx('ui-sidebar-menu-entry', item.className)}>
+              <UiTooltip
+                content={item.label}
+                position="right"
+                disabled={!showTooltips}
+                trigger={(tip) => {
+                  const onClick = (event: MouseEvent<HTMLElement>) => {
+                    tip.onClick();
+                    activate(event, node);
+                  };
+                  const shared = {
+                    ...tip,
+                    className: cx('ui-sidebar-menu-action', item.active && '_active'),
+                    'data-ripple': ripple ? ('on' as const) : ('off' as const),
+                    title: showTooltips ? undefined : title,
+                    'aria-label': title,
+                    onClick,
+                  };
+
+                  if ((item.render || item.url) && !item.disabled) {
+                    const props: UiSidebarMenuItemRootProps = {
+                      ...shared,
+                      href: item.url,
+                      target: item.target,
+                      rel: item.target === '_blank' ? 'noopener noreferrer' : undefined,
+                      'aria-current': item.active ? 'page' : undefined,
+                    };
+                    if (item.render) return item.render(props, content);
+                    return <a {...props}>{content}</a>;
+                  }
+                  return (
+                    <button
+                      {...shared}
+                      type="button"
+                      aria-current={item.active ? 'true' : undefined}
+                      disabled={item.disabled}
+                    >
+                      {content}
+                    </button>
+                  );
+                }}
+              />
+            </li>
+          );
+        }
+      }
+    });
+
+  return (
+    <nav
+      {...rest}
+      className={cx(
+        'ui-sidebar-menu',
+        `_${level}`,
+        size !== 'default' && `_${size}`,
+        isCollapsed && '_collapsed',
+        !motion && '_no-motion',
+        className,
+      )}
+    >
+      {/* `role="list"` explicite : Safari retire la sémantique d'une liste en `list-style: none`. */}
+      <ul className="ui-sidebar-menu-list" role="list">
+        {renderNodes(nodes)}
+      </ul>
+    </nav>
+  );
+}
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.mdx b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.mdx
new file mode 100644
index 0000000..26fb98d
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.mdx
@@ -0,0 +1,363 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
+import { ConfigTable } from '@sb/blocks/config-table';
+import * as SidebarStories from './ui-sidebar.stories';
+
+<Meta of={SidebarStories} />
+
+# ui-sidebar
+
+Barre latérale applicative, en deux présentations qui partagent le même intérieur :
+
+- **Statique** (par défaut) : la barre vit dans le flux et **pousse le contenu**. Elle se
+  replie en **rail d'icônes** (`collapsed`). Avec `openOnHover`, un rail replié **flotte**
+  ouvert au survol et au focus, sans décaler le contenu.
+- **Superposée** : la barre **flotte** au-dessus du contenu, pilotée par `visible`. C'est un
+  `<dialog>` natif, comme `ui-drawer` : piège de focus, restitution du focus, arrière-plan
+  inerte, `Échap` et clic sur le voile.
+
+<Canvas of={SidebarStories.Variants} />
+
+## API
+
+<ArgTypes of={SidebarStories} />
+
+## Anatomie
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Élément</th>
+      <th>Rôle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <strong>Rail</strong>
+      </td>
+      <td>
+        <code>.ui-sidebar-rail</code> : l'empreinte **dans le flux** de la présentation statique.
+        Elle réserve la largeur ; le panneau, positionné dedans, peut flotter plus large au
+        survol.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Panneau</strong>
+      </td>
+      <td>
+        <code>.ui-sidebar</code> : la surface, en colonne flex (en-tête, corps qui défile, pied).
+        Un <code>&lt;aside&gt;</code> en présentation statique, le <code>&lt;dialog&gt;</code>{' '}
+        lui-même en présentation superposée, dont <code>::backdrop</code> fait le voile.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Mise en page
+
+La barre statique s'**étire** : posez-la dans une rangée flex qui a une hauteur, à côté du
+contenu. Rendue seule, son rail mesure zéro de haut, son panneau étant positionné en absolu
+pour pouvoir flotter.
+
+```tsx
+import { UiSidebar, UiSidebarMenu } from '@4sh/ui-kit-react/ui-sidebar';
+
+<div style={{ display: 'flex', height: '100dvh' }}>
+  <UiSidebar aria-label="Navigation principale">
+    <UiSidebarMenu items={items} aria-label="Sections" />
+  </UiSidebar>
+  <main style={{ flex: 1, minWidth: 0 }}>…</main>
+</div>;
+```
+
+## Avec menu
+
+En-tête et pied acceptent un nœud, ou une **fonction** qui reçoit l'état de la barre. C'est
+ainsi qu'on n'affiche que l'icône dans le rail replié :
+
+```tsx
+<UiSidebar
+  aria-label="Navigation"
+  header={(sidebar) => (
+    <>
+      <UiIcon name="layer-group" size="lg" />
+      {!sidebar.collapsed && <strong>App</strong>}
+    </>
+  )}
+>
+  <UiSidebarMenu items={items} tooltips aria-label="Sections" />
+</UiSidebar>
+```
+
+<Canvas of={SidebarStories.WithMenu} />
+
+## Adaptatif
+
+Sous `breakpoint` (ici `1024px`, aligné sur l'échelle des points de rupture du Design System),
+la barre devient un panneau superposé ; au-dessus, elle reste un rail qui pousse le contenu.
+Un panneau ouvert qui repasse en statique se referme, et `onHide` le dit.
+
+<Canvas of={SidebarStories.Responsive} />
+
+## Double barre
+
+Un rail d'icônes permanent comme navigation primaire, accolé à une barre secondaire qui
+liste les sections d'un module. Deux barres statiques côte à côte.
+
+<Canvas of={SidebarStories.DualSidebar} />
+
+## Menu imbriqué
+
+Les entrées deviennent des groupes **repliables** sur plusieurs niveaux. Un groupe qui
+contient l'entrée courante se déplie d'office.
+
+<Canvas of={SidebarStories.NestedMenu} />
+
+## Le déclencheur
+
+Un bouton de menu vit souvent **hors** de la barre, dans la barre d'application.
+`UiSidebarProvider` rend l'état de la barre lisible autour d'elle, et `useUiSidebarTrigger()`
+donne les props du contrôle : `aria-controls`, `aria-expanded`, et la bascule au clic.
+`Entrée` et `Espace` viennent seuls sur un `<button>`.
+
+```tsx
+import { UiSidebar, UiSidebarProvider, useUiSidebarTrigger } from '@4sh/ui-kit-react/ui-sidebar';
+
+function MenuButton() {
+  const trigger = useUiSidebarTrigger();
+  return <UiButton {...trigger} icon="bars" iconOnly aria-label="Menu" />;
+}
+
+<UiSidebarProvider>
+  <MenuButton />
+  <UiSidebar aria-label="Navigation principale">…</UiSidebar>
+</UiSidebarProvider>;
+```
+
+Un fournisseur porte **une** barre : deux barres pilotées séparément prennent chacune le
+leur. Dans l'en-tête ou le pied, `getUiSidebarTriggerProps(sidebar)` donne les mêmes props à
+partir de l'état reçu, sans fournisseur. `useUiSidebar()` rend l'état complet, pour un
+libellé qui suit la barre.
+
+## ui-sidebar-menu
+
+Menu de navigation déclaratif (`UiSidebarMenuItem[]`) rendu en **région de navigation** : un
+`<nav>` qui enveloppe des listes. Il gère :
+
+- des **sections** libellées ;
+- des **groupes repliables** (`toggleable`) sur plusieurs niveaux, dépliés selon
+  `expandedKeys`, contrôlé ou non ;
+- l'**entrée courante** (`active`), un groupe qui la contient se dépliant d'office ;
+- un **badge** de fin, rendu par `ui-badge`, et l'icône « ouvre ailleurs » des liens
+  externes (`external`, ou `target="_blank"`).
+
+Posé dans une `UiSidebar`, il lit l'état replié par contexte et se replie en **rail
+d'icônes**. Seul, `collapsed` pilote le rail. En rail, **`tooltips`** montre le libellé de
+chaque icône en info-bulle.
+
+### Modèle `UiSidebarMenuItem`
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Champ</th>
+      <th>Type</th>
+      <th>Rôle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>label</code>
+      </td>
+      <td>
+        <code>string</code>
+      </td>
+      <td>Texte de l'entrée, ou de l'en-tête de groupe.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>icon</code>
+      </td>
+      <td>
+        <code>string</code>
+      </td>
+      <td>Icône de tête, seule visible dans le rail.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>items</code>
+      </td>
+      <td>
+        <code>UiSidebarMenuItem[]</code>
+      </td>
+      <td>Enfants : une section, ou un groupe repliable.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>toggleable</code>
+      </td>
+      <td>
+        <code>boolean</code>
+      </td>
+      <td>
+        Groupe repliable. Faux au premier niveau, vrai une fois imbriqué.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>url</code>
+      </td>
+      <td>
+        <code>string</code>
+      </td>
+      <td>Destination : l'entrée devient une ancre.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>render</code>
+      </td>
+      <td>
+        <code>(props, children) =&gt; ReactNode</code>
+      </td>
+      <td>
+        Rend l'action soi-même : c'est ainsi qu'on branche le lien d'un routeur, le kit n'en
+        imposant aucun.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>command</code>
+      </td>
+      <td>
+        <code>(event) =&gt; void</code>
+      </td>
+      <td>Appelée à l'activation.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>active</code>
+      </td>
+      <td>
+        <code>boolean</code>
+      </td>
+      <td>Entrée courante. C'est l'application qui le sait, routeur ou non.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>badge</code>, <code>badgeLevel</code>
+      </td>
+      <td>
+        <code>string</code>, <code>UiFeedbackLevel</code>
+      </td>
+      <td>
+        Badge de fin rendu par <code>ui-badge</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>external</code>
+      </td>
+      <td>
+        <code>boolean</code>
+      </td>
+      <td>
+        Force l'icône « ouvre ailleurs ». Automatique avec <code>target="_blank"</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>separator</code>, <code>disabled</code>, <code>visible</code>
+      </td>
+      <td>
+        <code>boolean</code>
+      </td>
+      <td>Séparateur, désactivation, masquage.</td>
+    </tr>
+  </tbody>
+</table>
+
+```tsx
+// Un lien de routeur, l'entrée courante calculée par l'application.
+const items: UiSidebarMenuItem[] = [
+  {
+    label: 'Facturation',
+    icon: 'credit-card',
+    active: pathname.startsWith('/facturation'),
+    render: (props, children) => (
+      <Link {...props} to="/facturation">
+        {children}
+      </Link>
+    ),
+  },
+];
+```
+
+## Accessibilité
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Aspect</th>
+      <th>Comportement</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <strong>Région</strong>
+      </td>
+      <td>
+        Un <code>&lt;aside&gt;</code> nommé par <code>aria-label</code> ou{' '}
+        <code>aria-labelledby</code> ; sans nom, « Navigation » par défaut et un avertissement
+        en développement. Les menus s'enveloppent dans un <code>&lt;nav&gt;</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Listes</strong>
+      </td>
+      <td>
+        Les listes portent <code>role="list"</code> : Safari retire la sémantique d'une liste
+        en <code>list-style: none</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Déclencheur</strong>
+      </td>
+      <td>
+        <code>useUiSidebarTrigger()</code> pose <code>aria-controls</code> et{' '}
+        <code>aria-expanded</code>, liés à la barre.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Superposée</strong>
+      </td>
+      <td>
+        Un <code>&lt;dialog&gt;</code> modal : piège de focus, restitution du focus et
+        arrière-plan inerte sont natifs. <code>Échap</code> ferme si <code>dismissable</code>.
+        Sans voile, le panneau est non modal et la page reste utilisable.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <strong>Rail replié</strong>
+      </td>
+      <td>
+        Chaque icône garde un nom accessible : <code>aria-label</code>, et <code>title</code>{' '}
+        ou l'info-bulle, valent le libellé.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Theming
+
+Les largeurs se règlent par `--ui-sidebar-width` et `--ui-sidebar-rail-width`.
+
+<ConfigTable of="ui-sidebar" label="ui-sidebar" />
+
+<ConfigTable of="ui-sidebar-menu" label="ui-sidebar-menu" />
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.scss b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.scss
new file mode 100644
index 0000000..952cf68
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.scss
@@ -0,0 +1,243 @@
+@use 'utils';
+
+// =====================================================================
+// ui-sidebar : co-located styles. All values come from design tokens.
+//
+// Structure:
+//   .ui-sidebar-rail        → in-flow footprint (static presentation)
+//   .ui-sidebar             → the surface (rail ↔ expanded width). In the
+//                             overlay presentation it IS the native <dialog>.
+//
+// No host element here. The Angular backdrop and positioner fold into the
+// <dialog>, as in `ui-drawer`: `::backdrop` makes the first, the dialog's
+// own insets make the second.
+//
+// Extend:
+//   • Widths → override `--ui-sidebar-width` / `--ui-sidebar-rail-width`.
+// =====================================================================
+
+// --- Config (local) ---------------------------------------------------
+$z-index: var(--ui-sidebar-z-index, 1000);                                               /// Plan d'empilement du panneau superposé non modal (voile coupé ou barre cantonnée).
+$stroke-width: var(--ui-sidebar-stroke-width, var(--stroke-sm));                         /// Épaisseur de bordure du panneau.
+$region-padding: var(--ui-sidebar-region-padding, var(--units-md));                      /// Inset des régions (en-tête, corps, pied).
+$close-size: var(--ui-sidebar-close-size, #{utils.rem-calc(32)});                        /// Taille de la cible tactile du bouton de fermeture.
+$focus-ring-width: var(--ui-sidebar-focus-ring-width, #{utils.$focus-ring-width});       /// Épaisseur de l'anneau de focus.
+$backdrop-background: var(--ui-sidebar-backdrop-background, var(--primitives-black-50)); /// Fond du voile en présentation superposée.
+$width-default: utils.rem-calc(280);                                                     /// Largeur livrée du panneau déployé (défaut du hook `--ui-sidebar-width`).
+$rail-width-default: utils.rem-calc(72);                                                 /// Largeur livrée du rail replié (défaut du hook `--ui-sidebar-rail-width`).
+
+// The two widths are read by the panel AND its rail, so they must live on a
+// variable. Declaring the public name here would shadow a consumer override,
+// hence the private mirror: the hook stays the winning value. Without a host
+// element, both boxes declare it (the overlay panel has no rail around it).
+.ui-sidebar-rail,
+.ui-sidebar {
+  --_width: var(--ui-sidebar-width, #{$width-default});                          /// Largeur du panneau déployé.
+  --_rail-width: var(--ui-sidebar-rail-width, #{$rail-width-default});           /// Largeur du rail d’icônes replié.
+}
+
+// --- Rail (static in-flow footprint) ----------------------------------
+.ui-sidebar-rail {
+  position: relative;
+  flex: 0 0 auto;
+  inline-size: var(--_width);
+  align-self: stretch;
+  @include utils.motion-transition(inline-size);
+
+  &._collapsed {
+    inline-size: var(--_rail-width);
+  }
+
+  @include utils.motion-reduce {
+    transition: none;
+  }
+}
+
+// --- Panel surface ----------------------------------------------------
+.ui-sidebar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  inline-size: var(--_width);
+  margin: 0;
+  padding: 0;
+  border: 0; // the <dialog> ships a border; the facing edge gets its own below
+  overflow: hidden; // collapsed rail clips over-wide header/footer content
+  background-color: var(--ui-sidebar-surface, var(--global-background-default)); /// Fond du panneau.
+  color: var(--ui-sidebar-color, var(--global-text-default));                    /// Couleur du texte du panneau.
+  font-family: var(--ui-sidebar-font-family, var(--fontfamily-base)); /// Famille typographique du composant.
+  outline: none;
+  @include utils.motion-transition(inline-size, box-shadow);
+
+  &._collapsed {
+    inline-size: var(--_rail-width);
+  }
+
+  // Border faces the content area (opposite the docked edge).
+  &._left {
+    border-inline-end: $stroke-width solid var(--ui-sidebar-stroke, var(--global-border-subtle)); /// Couleur du trait qui fait face au contenu, quel que soit le bord d'accroche.
+  }
+  &._right {
+    border-inline-start: $stroke-width solid var(--ui-sidebar-stroke, var(--global-border-subtle));
+  }
+
+  // --- Static panel: fills the in-flow rail, floats when hover-expanded ---
+  .ui-sidebar-rail & {
+    position: absolute;
+    inset-block: 0;
+    block-size: 100%;
+  }
+  .ui-sidebar-rail._left & {
+    inset-inline-start: 0;
+  }
+  .ui-sidebar-rail._right & {
+    inset-inline-end: 0;
+  }
+
+  // Floating over the content (hover-expanded rail) → elevate + layer.
+  &._floating {
+    z-index: 1;
+    box-shadow: var(--shadow-default-lg);
+  }
+
+  @include utils.motion-reduce {
+    transition: none;
+  }
+
+  // --- Overlay panel: the native <dialog>, docked to its edge -------------
+  &._overlay {
+    position: fixed;
+    z-index: $z-index;
+    inset-block: 0;
+    // The browser style of a <dialog> sets both to `fit-content`, which beats
+    // the stretch asked by the two opposite insets (see `ui-drawer`).
+    block-size: auto;
+    max-block-size: none;
+    max-inline-size: calc(100vw - var(--units-3xl));
+    box-shadow: var(--shadow-default-lg);
+
+    // The closed dialog's `display: none` comes from the BROWSER style, which
+    // the `display: flex` above beats. Say it again, or a closed panel stays.
+    &:not([open]) {
+      display: none;
+    }
+
+    &._left {
+      --_motion-slide: -100% 0;
+      inset-inline: 0 auto;
+    }
+    &._right {
+      --_motion-slide: 100% 0;
+      inset-inline: auto 0;
+    }
+
+    // Slides from ITS edge, in and out, with no JavaScript.
+    @include utils.overlay-motion {
+      opacity: 0;
+      translate: var(--_motion-slide);
+    }
+
+    &::backdrop {
+      background-color: $backdrop-background;
+      transition:
+        display allow-discrete var(--ui-motion-duration, #{utils.$motion-duration-base}),
+        overlay allow-discrete var(--ui-motion-duration, #{utils.$motion-duration-base}),
+        opacity var(--ui-motion-duration, #{utils.$motion-duration-base});
+      opacity: 1;
+    }
+    &:not([open])::backdrop {
+      opacity: 0;
+    }
+    @starting-style {
+      &[open]::backdrop {
+        opacity: 0;
+      }
+    }
+
+    // Non-modal panel (no backdrop, or contained): no top layer, nothing to dim.
+    &:not(:modal)::backdrop {
+      background: none;
+    }
+
+    // Contained: scoped to the nearest positioned ancestor, not the viewport.
+    &._contained {
+      position: absolute;
+    }
+
+    @include utils.motion-reduce {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  // --- Close button (overlay) -------------------------------------------
+  &-close {
+    position: absolute;
+    inset-block-start: var(--units-sm);
+    inset-inline-end: var(--units-sm);
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: $close-size;
+    block-size: $close-size;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-default);
+    background: transparent;
+    color: inherit;
+    line-height: 0;
+    cursor: pointer;
+    @include utils.control-transition(background-color, color);
+
+    &:hover {
+      background-color: var(--ui-sidebar-close-surface-hover, var(--global-background-muted-hover)); /// Fond du bouton de fermeture au survol.
+      color: var(--ui-sidebar-close-color-hover, var(--global-text-muted-hover));                    /// Couleur du bouton de fermeture au survol.
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 $focus-ring-width var(--ui-sidebar-close-focus-ring-color, var(--global-border-focus)); /// Couleur de l'anneau de focus du bouton de fermeture.
+    }
+
+    @include utils.motion-reduce {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  // --- Regions -----------------------------------------------------------
+  &-header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--units-sm);
+    padding: $region-padding;
+    border-block-end: $stroke-width solid var(--ui-sidebar-header-stroke, var(--global-border-subtle)); /// Couleur du trait sous l'en-tête.
+  }
+
+  &-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--units-sm);
+  }
+
+  &-footer {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--units-sm);
+    padding: $region-padding;
+    border-block-start: $stroke-width solid var(--ui-sidebar-footer-stroke, var(--global-border-subtle)); /// Couleur du trait au-dessus du pied.
+  }
+
+  // Collapsed rail: tighten region padding so icons stay centered in the rail.
+  &._collapsed {
+    .ui-sidebar-header,
+    .ui-sidebar-footer {
+      padding-inline: var(--units-sm);
+      justify-content: center;
+    }
+  }
+}
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.stories.tsx b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.stories.tsx
new file mode 100644
index 0000000..405798a
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.stories.tsx
@@ -0,0 +1,464 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UiButton } from '../../actions/ui-button';
+import { UiIcon } from '../../base/ui-icon';
+
+import {
+  UiSidebar,
+  UiSidebarProvider,
+  getUiSidebarTriggerProps,
+  useUiSidebar,
+  useUiSidebarTrigger,
+  type UiSidebarProps,
+} from './ui-sidebar';
+import { UiSidebarMenu, type UiSidebarMenuItem } from './ui-sidebar-menu';
+
+// `tooltips` est une prop de `UiSidebarMenu`, exposée ici comme contrôle.
+type SidebarArgs = UiSidebarProps & { tooltips: boolean };
+
+const meta: Meta<SidebarArgs> = {
+  title: 'Components/ui/navigation/ui-sidebar',
+  component: UiSidebar,
+  parameters: {
+    layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/GZww5hdUA49LB8XWeWP6tl/-Projet----UI-Kit?node-id=0-1',
+    },
+  },
+  argTypes: {
+    side: { control: 'inline-radio', options: ['left', 'right'] },
+    mode: { control: 'inline-radio', options: ['static', 'overlay'] },
+    collapsible: { control: 'boolean' },
+    defaultCollapsed: { control: 'boolean' },
+    defaultVisible: { control: 'boolean' },
+    openOnHover: { control: 'boolean' },
+    backdrop: { control: 'boolean' },
+    dismissable: { control: 'boolean' },
+    responsive: { control: 'boolean' },
+    breakpoint: { control: 'text' },
+    contained: { control: 'boolean' },
+    'aria-label': { control: 'text' },
+    tooltips: { control: 'boolean' },
+    collapsed: { control: false },
+    visible: { control: false },
+    header: { control: false },
+    footer: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SidebarArgs>;
+
+// --- Décor commun ---------------------------------------------------------------
+
+const frame = (height: number): CSSProperties => ({
+  position: 'relative',
+  display: 'flex',
+  height,
+  overflow: 'hidden',
+  border: '1px solid var(--global-border-subtle)',
+  borderRadius: 'var(--radius-md)',
+  background: 'var(--global-background-default)',
+});
+// Pas de défilement : un contenu de démonstration qui défile sans rien de
+// focalisable n'est pas atteignable au clavier (règle axe `scrollable-region-focusable`).
+const main: CSSProperties = { flex: '1 1 auto', minWidth: 0, padding: 'var(--units-xl)' };
+const title: CSSProperties = {
+  margin: 'var(--units-lg) 0 var(--units-sm)',
+  color: 'var(--global-text-default)',
+};
+const text: CSSProperties = {
+  color: 'var(--global-text-muted)',
+  maxWidth: '52ch',
+  lineHeight: 1.6,
+};
+const stack: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  lineHeight: 1.2,
+  minWidth: 0,
+};
+
+function Content({ heading, children }: { heading: string; children: ReactNode }) {
+  return (
+    <>
+      <h2 style={title}>{heading}</h2>
+      <p style={text}>{children}</p>
+    </>
+  );
+}
+
+/** Le bouton de la barre d'application : il lit l'état de la barre pour son libellé. */
+function MenuButton({ label }: { label?: string }) {
+  const sidebar = useUiSidebar();
+  const trigger = useUiSidebarTrigger();
+  const overlay = sidebar?.isOverlay ?? false;
+  const collapsed = sidebar ? !sidebar.expanded : false;
+  return (
+    <UiButton
+      {...trigger}
+      level="low"
+      size="small"
+      icon={overlay ? 'bars' : collapsed ? 'angles-right' : 'angles-left'}
+      label={label ?? (overlay ? 'Ouvrir' : collapsed ? 'Déplier' : 'Replier')}
+    />
+  );
+}
+
+const PLAYGROUND_ITEMS: UiSidebarMenuItem[] = [
+  { label: 'Tableau de bord', icon: 'gauge', active: true },
+  { label: 'Projets', icon: 'folder-open' },
+  { label: 'Calendrier', icon: 'calendar-days' },
+  { label: 'Messages', icon: 'envelope', badge: '3', badgeLevel: 'highlight' },
+  { label: 'Paramètres', icon: 'gear' },
+];
+
+/**
+ * Terrain de jeu. `side`, `mode`, `collapsible`, le repli, `openOnHover` et le
+ * voile se combinent. La barre est cantonnée (`contained`) dans une zone bornée
+ * pour l'aperçu.
+ */
+export const Variants: Story = {
+  args: {
+    side: 'left',
+    mode: 'static',
+    collapsible: true,
+    defaultCollapsed: false,
+    defaultVisible: false,
+    openOnHover: false,
+    backdrop: true,
+    dismissable: true,
+    contained: true,
+    'aria-label': 'Navigation de démonstration',
+    tooltips: true,
+  },
+  render: ({ tooltips, ...args }) => (
+    <UiSidebarProvider>
+      <div style={frame(460)}>
+        <UiSidebar
+          key={`${args.mode}-${args.defaultCollapsed}-${args.defaultVisible}`}
+          {...args}
+          header={(sb) => (
+            <>
+              <UiIcon name="bolt" size="lg" />
+              {!sb.collapsed && <strong>App</strong>}
+            </>
+          )}
+          footer={(sb) => (
+            <>
+              <UiIcon name="circle-user" size="lg" />
+              {!sb.collapsed && <span>Jane Doe</span>}
+            </>
+          )}
+        >
+          <UiSidebarMenu items={PLAYGROUND_ITEMS} tooltips={tooltips} aria-label="Sections" />
+        </UiSidebar>
+
+        <main style={main}>
+          <MenuButton />
+          <Content heading="Contenu">
+            La barre pousse cet espace en mode statique, et flotte par-dessus en mode superposé.
+            Essayez le repli, le survol et le voile avec les contrôles.
+          </Content>
+        </main>
+      </div>
+    </UiSidebarProvider>
+  ),
+};
+
+const WORKSPACE_NAV: UiSidebarMenuItem[] = [
+  {
+    label: 'Espace de travail',
+    items: [
+      { label: 'Vue d’ensemble', icon: 'house', active: true },
+      { label: 'Analytique', icon: 'chart-line' },
+      { label: 'Rapports', icon: 'file-lines', badge: '5', badgeLevel: 'highlight' },
+    ],
+  },
+  {
+    label: 'Gestion',
+    items: [
+      { label: 'Équipe', icon: 'users' },
+      { label: 'Facturation', icon: 'credit-card' },
+      { label: 'Intégrations', icon: 'plug' },
+    ],
+  },
+  { separator: true },
+  { label: 'Aide et support', icon: 'circle-question' },
+];
+
+const switcher: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--units-sm)',
+  width: '100%',
+  padding: 'var(--units-xs)',
+  border: 'none',
+  borderRadius: 'var(--radius-sm)',
+  background: 'var(--global-background-muted)',
+  color: 'inherit',
+  cursor: 'pointer',
+  font: 'inherit',
+  textAlign: 'left',
+};
+
+/**
+ * Un chrome d'application complet : sélecteur d'espace de travail en en-tête,
+ * navigation groupée, carte utilisateur en pied. Le déclencheur replie la barre
+ * en rail d'icônes.
+ */
+export const WithMenu: Story = {
+  render: () => (
+    <UiSidebarProvider>
+      <div style={frame(520)}>
+        <UiSidebar
+          aria-label="Navigation de l'espace de travail"
+          header={(sb) => (
+            <button
+              type="button"
+              {...getUiSidebarTriggerProps(sb)}
+              aria-label="Basculer la navigation"
+              style={switcher}
+            >
+              <UiIcon name="layer-group" size="lg" />
+              {!sb.collapsed && (
+                <>
+                  <span style={stack}>
+                    <strong>App</strong>
+                    <small style={{ color: 'var(--global-text-muted)' }}>Espace Pro</small>
+                  </span>
+                  <UiIcon name="angles-up-down" size="sm" style={{ marginLeft: 'auto' }} />
+                </>
+              )}
+            </button>
+          )}
+          footer={(sb) => (
+            <>
+              <UiIcon name="circle-user" size="lg" />
+              {!sb.collapsed && (
+                <>
+                  <span style={stack}>
+                    <strong>Jane Doe</strong>
+                    <small style={{ color: 'var(--global-text-muted)' }}>jane@acme.io</small>
+                  </span>
+                  <UiIcon name="right-from-bracket" size="sm" style={{ marginLeft: 'auto' }} />
+                </>
+              )}
+            </>
+          )}
+        >
+          <UiSidebarMenu items={WORKSPACE_NAV} tooltips aria-label="Sections principales" />
+        </UiSidebar>
+
+        <main style={main}>
+          <MenuButton />
+          <Content heading="Vue d’ensemble">
+            Repliez la barre : libellés, en-têtes de section et badges disparaissent, il ne reste
+            que la colonne d’icônes.
+          </Content>
+        </main>
+      </div>
+    </UiSidebarProvider>
+  ),
+};
+
+/**
+ * Sous 1024px, la barre devient un panneau superposé ; au-dessus, elle reste un
+ * rail d’icônes qui pousse le contenu. Redimensionnez l’aperçu pour voir la
+ * bascule.
+ */
+export const Responsive: Story = {
+  render: () => (
+    <UiSidebarProvider>
+      <div style={frame(520)}>
+        <UiSidebar
+          responsive
+          breakpoint="1024px"
+          defaultCollapsed
+          contained
+          aria-label="Navigation adaptative"
+          header={(sb) => (
+            <>
+              <UiIcon name="compass" size="lg" />
+              {!sb.collapsed && <strong>App</strong>}
+            </>
+          )}
+        >
+          <UiSidebarMenu items={PLAYGROUND_ITEMS} aria-label="Sections" />
+        </UiSidebar>
+
+        <main style={main}>
+          <MenuButton label="Menu" />
+          <Content heading="Adaptatif">
+            Sur écran large, un rail d’icônes borde le contenu. Sous 1024px, le bouton Menu ouvre un
+            panneau par-dessus.
+          </Content>
+        </main>
+      </div>
+    </UiSidebarProvider>
+  ),
+};
+
+const RAIL_NAV: UiSidebarMenuItem[] = [
+  { label: 'Accueil', icon: 'house', active: true },
+  { label: 'Base de données', icon: 'database' },
+  { label: 'Recherche', icon: 'magnifying-glass' },
+  { label: 'Journaux', icon: 'table-list' },
+  { label: 'Domaines', icon: 'globe' },
+  { label: 'API', icon: 'code' },
+];
+
+const SETTINGS_NAV: UiSidebarMenuItem[] = [
+  {
+    label: 'Configuration',
+    items: [
+      { label: 'Général', active: true },
+      { label: 'Calcul et disque' },
+      { label: 'Infrastructure' },
+      { label: 'Intégrations' },
+      { label: 'Clés API' },
+      { label: 'Clés JWT' },
+      { label: 'Journaux exportés' },
+      { label: 'Modules' },
+    ],
+  },
+  {
+    label: 'Intégrations',
+    items: [
+      { label: 'Data API', external: true },
+      { label: 'Coffre', badge: 'BETA' },
+    ],
+  },
+  {
+    label: 'Facturation',
+    items: [
+      { label: 'Abonnement', external: true },
+      { label: 'Usage', external: true },
+    ],
+  },
+];
+
+const brand: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 36,
+  height: 36,
+  borderRadius: 'var(--radius-sm)',
+  background: 'var(--actions-high-surface-default)',
+  color: 'var(--actions-high-content-default)',
+};
+const placeholder = (height: number): CSSProperties => ({
+  height,
+  borderRadius: 'var(--radius-md)',
+  background: 'var(--global-background-muted)',
+});
+
+/**
+ * Deux niveaux, façon console d'administration : un rail d'icônes permanent
+ * comme navigation primaire, accolé à une barre secondaire qui liste les
+ * sections d'un module. Deux barres statiques côte à côte, sans panneau superposé.
+ */
+export const DualSidebar: Story = {
+  render: () => (
+    <div style={{ ...frame(640), position: 'static' }}>
+      <UiSidebar
+        collapsed
+        collapsible={false}
+        aria-label="Navigation principale"
+        header={
+          <span style={brand}>
+            <UiIcon name="bolt" />
+          </span>
+        }
+        footer={<UiIcon name="gear" size="lg" />}
+      >
+        <UiSidebarMenu items={RAIL_NAV} tooltips aria-label="Sections de l'application" />
+      </UiSidebar>
+
+      <UiSidebar
+        collapsible={false}
+        aria-label="Réglages du projet"
+        header={
+          <strong style={{ fontSize: 'var(--size-typography-title-default)' }}>Réglages</strong>
+        }
+      >
+        <UiSidebarMenu items={SETTINGS_NAV} aria-label="Sections des réglages" />
+      </UiSidebar>
+
+      <main style={main}>
+        <h2 style={{ ...title, marginTop: 0 }}>Éditeur de table</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--units-md)' }}>
+          <div style={placeholder(120)} />
+          <div style={placeholder(220)} />
+        </div>
+      </main>
+    </div>
+  ),
+};
+
+const NESTED_NAV: UiSidebarMenuItem[] = [
+  { label: 'Tableau de bord', icon: 'gauge' },
+  {
+    label: 'Catalogue',
+    icon: 'box-archive',
+    toggleable: true,
+    items: [
+      { label: 'Produits', icon: 'tag' },
+      {
+        label: 'Collections',
+        icon: 'layer-group',
+        items: [
+          { label: 'Nouveautés', icon: 'star' },
+          { label: 'Promotions', icon: 'percent', active: true },
+          { label: 'Archives', icon: 'box' },
+        ],
+      },
+      { label: 'Fournisseurs', icon: 'truck' },
+    ],
+  },
+  {
+    label: 'Clients',
+    icon: 'users',
+    toggleable: true,
+    items: [
+      { label: 'Comptes', icon: 'address-card' },
+      { label: 'Segments', icon: 'chart-pie' },
+    ],
+  },
+  { separator: true },
+  { label: 'Paramètres', icon: 'gear' },
+];
+
+/**
+ * Les entrées deviennent des groupes repliables sur plusieurs niveaux. Un groupe
+ * qui contient l'entrée courante se déplie d'office : ici « Promotions », sous
+ * « Collections ».
+ */
+export const NestedMenu: Story = {
+  render: () => (
+    <div style={{ ...frame(560), position: 'static' }}>
+      <UiSidebar
+        collapsible={false}
+        aria-label="Navigation imbriquée"
+        header={
+          <>
+            <UiIcon name="store" size="lg" />
+            <strong>Boutique</strong>
+          </>
+        }
+      >
+        <UiSidebarMenu items={NESTED_NAV} aria-label="Sections imbriquées" />
+      </UiSidebar>
+
+      <main style={main}>
+        <Content heading="Arborescence profonde">
+          Cliquez sur « Catalogue » ou « Clients » pour déplier ou replier les sous-menus. Les
+          sous-arbres s’indentent et s’animent en hauteur.
+        </Content>
+      </main>
+    </div>
+  ),
+};
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.test.tsx b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.test.tsx
new file mode 100644
index 0000000..3dad0da
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.test.tsx
@@ -0,0 +1,411 @@
+import { StrictMode, useState } from 'react';
+import { page } from 'vitest/browser';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import {
+  UiSidebar,
+  UiSidebarProvider,
+  getUiSidebarTriggerProps,
+  useUiSidebarTrigger,
+  type UiSidebarProps,
+} from './ui-sidebar';
+import { UiSidebarMenu } from './ui-sidebar-menu';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+// Le pointeur de Playwright reste où le test précédent l'a laissé : un rail
+// `openOnHover` qui monte dessous se croit survolé, et flotte dès le départ.
+// C'est le bon comportement, mais selon la charge l'événement arrive avant ou
+// après la première assertion. Coin bas droit, hors de toute barre de ces tests.
+beforeEach(async () => {
+  const parking = document.createElement('div');
+  parking.style.cssText = 'position:fixed; right:0; bottom:0; width:8px; height:8px;';
+  document.body.append(parking);
+  await page.elementLocator(parking).hover();
+  parking.remove();
+});
+
+const ITEMS = [
+  { label: 'Tableau de bord', icon: 'gauge', active: true },
+  { label: 'Projets', icon: 'folder-open' },
+];
+
+/** Un bouton de menu placé HORS de la barre, comme dans une barre d'application. */
+function Trigger({ label = 'Basculer' }: { label?: string }) {
+  const trigger = useUiSidebarTrigger();
+  return (
+    <button type="button" {...trigger}>
+      {label}
+    </button>
+  );
+}
+
+/**
+ * La mise en page d'une application : une rangée flex qui a une hauteur. La
+ * barre statique s'y étire ; rendue nue, son rail mesure zéro de haut, son
+ * panneau étant positionné en absolu pour pouvoir flotter.
+ */
+function Shell({ children, ...props }: Partial<UiSidebarProps>) {
+  return (
+    <UiSidebarProvider>
+      <div style={{ position: 'relative', display: 'flex', height: 400 }}>
+        <UiSidebar aria-label="Navigation principale" {...props}>
+          {children ?? <UiSidebarMenu items={ITEMS} aria-label="Sections" />}
+        </UiSidebar>
+        {/* À droite : un rail déployé en flottant recouvre le début du contenu. */}
+        <main
+          style={{
+            flex: '1 1 auto',
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 8,
+            padding: 16,
+          }}
+        >
+          <Trigger />
+          <button type="button">Contenu</button>
+        </main>
+      </div>
+    </UiSidebarProvider>
+  );
+}
+
+const panel = (root: ParentNode) => root.querySelector<HTMLElement>('.ui-sidebar')!;
+const rail = (root: ParentNode) => root.querySelector<HTMLElement>('.ui-sidebar-rail');
+const dialog = (root: ParentNode) => root.querySelector<HTMLDialogElement>('dialog.ui-sidebar');
+const tick = () => new Promise((r) => requestAnimationFrame(() => r(null)));
+
+// --- Présentation statique ------------------------------------------------------
+
+test('statique : un rail dans le flux porte un <aside> nommé', async () => {
+  const screen = await render(<Shell />);
+
+  expect(rail(screen.container)).toHaveClass('_left');
+  expect(panel(screen.container).tagName).toBe('ASIDE');
+  expect(panel(screen.container)).toHaveAttribute('aria-label', 'Navigation principale');
+  expect(panel(screen.container)).toHaveClass('ui-sidebar', '_left');
+  expect(dialog(screen.container)).toBeNull();
+});
+
+test('aria-labelledby l’emporte, et sans nom le composant avertit une fois', async () => {
+  const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  const screen = await render(
+    <>
+      <h2 id="titre-nav">Espace</h2>
+      <UiSidebar aria-labelledby="titre-nav" />
+      <UiSidebar />
+    </>,
+  );
+  const [nommee, anonyme] = [...screen.container.querySelectorAll('.ui-sidebar')];
+
+  expect(nommee).toHaveAttribute('aria-labelledby', 'titre-nav');
+  expect(nommee).not.toHaveAttribute('aria-label');
+  expect(anonyme).toHaveAttribute('aria-label', 'Navigation');
+  expect(warn).toHaveBeenCalledTimes(1);
+  expect(warn.mock.calls[0]![0]).toContain('[ui-sidebar]');
+});
+
+test('un déclencheur hors de la barre la replie, et annonce son état', async () => {
+  const onCollapsedChange = vi.fn();
+  const screen = await render(<Shell onCollapsedChange={onCollapsedChange} />);
+  const trigger = screen.getByRole('button', { name: 'Basculer' });
+
+  await expect.element(trigger).toHaveAttribute('aria-controls', panel(screen.container).id);
+  await expect.element(trigger).toHaveAttribute('aria-expanded', 'true');
+
+  await trigger.click();
+
+  await expect.element(trigger).toHaveAttribute('aria-expanded', 'false');
+  expect(rail(screen.container)).toHaveClass('_collapsed');
+  expect(panel(screen.container)).toHaveClass('_collapsed');
+  expect(screen.container.querySelector('.ui-sidebar-menu')).toHaveClass('_collapsed');
+  expect(onCollapsedChange).toHaveBeenCalledWith(true);
+});
+
+test('collapsible à faux : la bascule ne replie rien', async () => {
+  const screen = await render(<Shell collapsible={false} />);
+
+  await screen.getByRole('button', { name: 'Basculer' }).click();
+  await tick();
+
+  expect(panel(screen.container)).not.toHaveClass('_collapsed');
+});
+
+test('contrôlé, le repli suit le parent', async () => {
+  const onCollapsedChange = vi.fn();
+  const screen = await render(<Shell collapsed onCollapsedChange={onCollapsedChange} />);
+
+  expect(panel(screen.container)).toHaveClass('_collapsed');
+  await screen.getByRole('button', { name: 'Basculer' }).click();
+  await tick();
+
+  expect(onCollapsedChange).toHaveBeenCalledWith(false);
+  expect(panel(screen.container)).toHaveClass('_collapsed');
+});
+
+test("l'en-tête et le pied reçoivent l'état de la barre", async () => {
+  function Demo() {
+    const [collapsed, setCollapsed] = useState(false);
+    return (
+      <UiSidebar
+        aria-label="Navigation"
+        collapsed={collapsed}
+        onCollapsedChange={setCollapsed}
+        header={(sb) => (
+          <button type="button" {...getUiSidebarTriggerProps(sb)}>
+            {sb.collapsed ? 'A' : 'Application'}
+          </button>
+        )}
+        footer={(sb) => (sb.collapsed ? null : <span>Jane Doe</span>)}
+      />
+    );
+  }
+  const screen = await render(
+    <div style={{ display: 'flex', height: 400 }}>
+      <Demo />
+    </div>,
+  );
+  const header = () => screen.container.querySelector('.ui-sidebar-header')!;
+
+  expect(header()).toHaveTextContent('Application');
+  expect(screen.container.querySelector('.ui-sidebar-footer')).toHaveTextContent('Jane Doe');
+  await expect
+    .element(screen.getByRole('button', { name: 'Application' }))
+    .toHaveAttribute('aria-controls', panel(screen.container).id);
+
+  await screen.getByRole('button', { name: 'Application' }).click();
+
+  await expect.poll(() => header().textContent).toBe('A');
+  expect(screen.container.querySelector('.ui-sidebar-footer')?.textContent).toBe('');
+});
+
+test('openOnHover : un rail replié flotte ouvert au survol, sans pousser le contenu', async () => {
+  const screen = await render(<Shell defaultCollapsed openOnHover />);
+  const r = rail(screen.container)!;
+  const largeurRail = r.getBoundingClientRect().width;
+
+  expect(panel(screen.container)).toHaveClass('_collapsed');
+
+  await screen.getByRole('button', { name: 'Tableau de bord' }).hover();
+  await expect.poll(() => panel(screen.container).classList.contains('_floating')).toBe(true);
+  expect(panel(screen.container)).not.toHaveClass('_collapsed');
+  // L'empreinte reste celle du rail : le contenu ne bouge pas.
+  expect(r).toHaveClass('_collapsed');
+  expect(r.getBoundingClientRect().width).toBe(largeurRail);
+  expect(screen.container.querySelector('.ui-sidebar-menu')).not.toHaveClass('_collapsed');
+
+  await screen.getByRole('button', { name: 'Contenu' }).hover();
+  await expect.poll(() => panel(screen.container).classList.contains('_collapsed')).toBe(true);
+  expect(panel(screen.container)).not.toHaveClass('_floating');
+});
+
+test('openOnHover : le focus clavier déploie le rail, sa sortie le replie', async () => {
+  const screen = await render(<Shell defaultCollapsed openOnHover />);
+
+  screen.container.querySelector<HTMLElement>('.ui-sidebar-menu-action')!.focus();
+  await expect.poll(() => panel(screen.container).classList.contains('_floating')).toBe(true);
+
+  screen.getByRole('button', { name: 'Contenu' }).element().focus();
+  await expect.poll(() => panel(screen.container).classList.contains('_collapsed')).toBe(true);
+});
+
+test('un menu autonome ne se replie pas avec la barre voisine du même fournisseur', async () => {
+  const screen = await render(
+    <UiSidebarProvider>
+      <Trigger />
+      <UiSidebar aria-label="Barre" defaultCollapsed />
+      <UiSidebarMenu items={ITEMS} aria-label="Menu autonome" />
+    </UiSidebarProvider>,
+  );
+
+  await expect
+    .element(screen.getByRole('button', { name: 'Basculer' }))
+    .toHaveAttribute('aria-expanded', 'false');
+  expect(screen.container.querySelector('nav[aria-label="Menu autonome"]')).not.toHaveClass(
+    '_collapsed',
+  );
+});
+
+test('sous <StrictMode>, le déclencheur trouve toujours la barre', async () => {
+  const screen = await render(
+    <StrictMode>
+      <Shell />
+    </StrictMode>,
+  );
+
+  await expect
+    .element(screen.getByRole('button', { name: 'Basculer' }))
+    .toHaveAttribute('aria-controls', panel(screen.container).id);
+});
+
+test('la ref désigne le panneau, et motionDisabled coupe la durée', async () => {
+  let node: HTMLElement | null = null;
+  const screen = await render(
+    <Shell
+      ref={(n) => {
+        node = n;
+      }}
+      motionDisabled
+    />,
+  );
+
+  expect(node).toBe(panel(screen.container));
+  expect(rail(screen.container)!.style.getPropertyValue('--ui-motion-duration')).toBe('0ms');
+});
+
+// --- Présentation superposée ----------------------------------------------------
+
+test('superposée : un <dialog> modal, ouvert par le déclencheur, qui bloque le défilement', async () => {
+  const onShow = vi.fn();
+  const screen = await render(<Shell mode="overlay" onShow={onShow} />);
+  const d = dialog(screen.container)!;
+  const trigger = screen.getByRole('button', { name: 'Basculer' });
+
+  expect(d.open).toBe(false);
+  await expect.element(trigger).toHaveAttribute('aria-expanded', 'false');
+  expect(rail(screen.container)).toBeNull();
+
+  await trigger.click();
+
+  await expect.poll(() => d.open).toBe(true);
+  expect(d.matches(':modal')).toBe(true);
+  expect(d).toHaveClass('_overlay');
+  expect(document.body.style.overflow).toBe('hidden');
+  expect(onShow).toHaveBeenCalledTimes(1);
+  await expect.element(trigger).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Échap ferme, rend le focus au déclencheur, et libère le défilement', async () => {
+  const onHide = vi.fn();
+  const screen = await render(<Shell mode="overlay" onHide={onHide} />);
+  const d = dialog(screen.container)!;
+  const trigger = screen.getByRole('button', { name: 'Basculer' });
+
+  trigger.element().focus();
+  await trigger.click();
+  await expect.poll(() => d.open).toBe(true);
+
+  d.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+
+  await expect.poll(() => d.open).toBe(false);
+  expect(onHide).toHaveBeenCalledTimes(1);
+  expect(document.body.style.overflow).toBe('');
+  await expect.poll(() => document.activeElement).toBe(trigger.element());
+});
+
+test('dismissable à faux : ni Échap ni le voile ne ferment', async () => {
+  const screen = await render(<Shell mode="overlay" defaultVisible dismissable={false} />);
+  const d = dialog(screen.container)!;
+  await expect.poll(() => d.open).toBe(true);
+
+  d.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+  d.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX: 2000, clientY: 10 }));
+  await tick();
+
+  expect(d.open).toBe(true);
+});
+
+test('un clic sur le voile ferme, un clic dans le panneau non', async () => {
+  const screen = await render(<Shell mode="overlay" defaultVisible />);
+  const d = dialog(screen.container)!;
+  await expect.poll(() => d.open).toBe(true);
+  const box = d.getBoundingClientRect();
+
+  // Sur le bord du panneau lui-même : la cible est le dialogue, mais DANS sa boîte.
+  d.dispatchEvent(
+    new MouseEvent('click', { bubbles: true, clientX: box.right - 1, clientY: box.top + 5 }),
+  );
+  await tick();
+  expect(d.open).toBe(true);
+
+  d.dispatchEvent(
+    new MouseEvent('click', { bubbles: true, clientX: box.right + 50, clientY: box.top + 5 }),
+  );
+  await expect.poll(() => d.open).toBe(false);
+});
+
+test('le bouton de fermeture ferme, et showCloseButton le retire', async () => {
+  const screen = await render(
+    <Shell mode="overlay" defaultVisible closeAriaLabel="Fermer le menu" />,
+  );
+  const d = dialog(screen.container)!;
+  await expect.poll(() => d.open).toBe(true);
+
+  await screen.getByRole('button', { name: 'Fermer le menu' }).click();
+  await expect.poll(() => d.open).toBe(false);
+
+  await screen.rerender(
+    <Shell mode="overlay" defaultVisible showCloseButton={false} closeAriaLabel="Fermer le menu" />,
+  );
+  expect(screen.container.querySelector('.ui-sidebar-close')).toBeNull();
+});
+
+test('sans voile, le panneau est non modal et la page reste utilisable', async () => {
+  const screen = await render(<Shell mode="overlay" defaultVisible backdrop={false} />);
+  const d = dialog(screen.container)!;
+
+  await expect.poll(() => d.open).toBe(true);
+  expect(d.matches(':modal')).toBe(false);
+  expect(document.body.style.overflow).toBe('');
+
+  // Non modal : Échap ferme quand même, par `keydown`.
+  d.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+  await expect.poll(() => d.open).toBe(false);
+});
+
+test('cantonnée, la barre est non modale et positionnée dans son conteneur', async () => {
+  const screen = await render(
+    <div style={{ position: 'relative', height: 300 }}>
+      <Shell mode="overlay" defaultVisible contained />
+    </div>,
+  );
+  const d = dialog(screen.container)!;
+
+  await expect.poll(() => d.open).toBe(true);
+  expect(d).toHaveClass('_contained');
+  expect(d.matches(':modal')).toBe(false);
+  expect(getComputedStyle(d).position).toBe('absolute');
+  expect(document.body.style.overflow).toBe('');
+});
+
+// --- Adaptatif -------------------------------------------------------------------
+
+test('responsive : sous le point de rupture la barre se superpose, au-dessus elle revient au rail', async () => {
+  const onVisibleChange = vi.fn();
+  const onHide = vi.fn();
+  function Demo({ breakpoint }: { breakpoint: string }) {
+    const [visible, setVisible] = useState(false);
+    return (
+      <Shell
+        responsive
+        breakpoint={breakpoint}
+        visible={visible}
+        onVisibleChange={(v) => {
+          onVisibleChange(v);
+          setVisible(v);
+        }}
+        onHide={onHide}
+      />
+    );
+  }
+  // Une fenêtre de test fait bien moins de 5000px, et bien plus de 10px.
+  const screen = await render(<Demo breakpoint="5000px" />);
+  expect(dialog(screen.container)).not.toBeNull();
+
+  await screen.getByRole('button', { name: 'Basculer' }).click();
+  await expect.poll(() => dialog(screen.container)?.open).toBe(true);
+
+  await screen.rerender(<Demo breakpoint="10px" />);
+
+  // Revenue en statique panneau ouvert : `visible` retombe, et la fermeture s'annonce.
+  await expect.poll(() => rail(screen.container)).not.toBeNull();
+  await expect.poll(() => onVisibleChange.mock.lastCall?.[0]).toBe(false);
+  expect(onHide).toHaveBeenCalledTimes(1);
+
+  await screen.rerender(<Demo breakpoint="5000px" />);
+  await tick();
+  expect(dialog(screen.container)!.open).toBe(false);
+});
diff --git a/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.tsx b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.tsx
new file mode 100644
index 0000000..c1ada78
--- /dev/null
+++ b/packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.tsx
@@ -0,0 +1,564 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type FocusEvent,
+  type ReactNode,
+  type Ref,
+} from 'react';
+
+import { UiIcon } from '../../base/ui-icon';
+import { useControllableState } from '../../core/forms';
+import { useUiScrollLock } from '../../core/overlay';
+import { cx } from '../../core/utils';
+
+import './ui-sidebar.scss';
+
+/** Bord auquel la barre est ancrée. */
+export type SidebarSide = 'left' | 'right';
+
+/**
+ * Stratégie de présentation :
+ * - `static` : la barre vit dans le flux et pousse le contenu. Elle peut se
+ *   replier en rail d'icônes (`collapsed`).
+ * - `overlay` : la barre flotte au-dessus du contenu, en panneau hors champ
+ *   piloté par `visible`.
+ *
+ * Avec `responsive`, une barre `static` passe en `overlay` sous `breakpoint`,
+ * et revient au rail au-dessus.
+ */
+export type SidebarMode = 'static' | 'overlay';
+
+/**
+ * Ce que la barre expose à ses descendants, à ses zones d'en-tête et de pied,
+ * et aux déclencheurs placés sous un `UiSidebarProvider`.
+ */
+export interface UiSidebarApi {
+  /** Identifiant du panneau, pour l'`aria-controls` d'un déclencheur. */
+  controlsId: string;
+  /**
+   * État replié RÉSOLU : faux en présentation superposée, et faux le temps
+   * qu'un rail `openOnHover` est survolé ou contient le focus.
+   */
+  collapsed: boolean;
+  /** Ce qu'un déclencheur annonce dans `aria-expanded`. */
+  expanded: boolean;
+  /** La barre est présentée en panneau superposé. */
+  isOverlay: boolean;
+  /** Bascule : l'ouverture en présentation superposée, le repli sinon. */
+  toggle: () => void;
+  /** Ouvre ou déplie. */
+  open: () => void;
+  /** Ferme ou replie. */
+  close: () => void;
+}
+
+/** Une zone d'en-tête ou de pied : un nœud, ou une fonction de l'état de la barre. */
+export type UiSidebarSlot = ReactNode | ((sidebar: UiSidebarApi) => ReactNode);
+
+export interface UiSidebarProps extends Omit<ComponentPropsWithRef<'aside'>, 'children' | 'ref'> {
+  side?: SidebarSide;
+  mode?: SidebarMode;
+
+  /** Autorise le repli en rail d'icônes (présentation statique). */
+  collapsible?: boolean;
+  /** Rail replié imposé. Renseigné, le repli est contrôlé. Présentation statique. */
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+
+  /** Ouverture imposée. Renseignée, l'ouverture est contrôlée. Présentation superposée. */
+  visible?: boolean;
+  defaultVisible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+
+  /** Un rail replié se déploie par-dessus le contenu au survol et au focus. */
+  openOnHover?: boolean;
+
+  /**
+   * Voile : arrière-plan assombri et inerte, défilement bloqué. Sans lui, le
+   * panneau superposé est non modal et la page reste utilisable.
+   */
+  backdrop?: boolean;
+  /** Fermer au clic sur le voile et par Échap. */
+  dismissable?: boolean;
+  /** Fermer par Échap. N'agit qu'avec `dismissable`. */
+  closeOnEscape?: boolean;
+  /** Rendre le bouton de fermeture de la présentation superposée. */
+  showCloseButton?: boolean;
+
+  /** Passer en présentation superposée sous `breakpoint`. */
+  responsive?: boolean;
+  /**
+   * Largeur sous laquelle une barre `responsive` devient un panneau superposé.
+   * Toute longueur CSS ; de préférence une valeur de l'échelle des points de
+   * rupture du Design System.
+   */
+  breakpoint?: string;
+
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+
+  closeIcon?: string;
+  closeAriaLabel?: string;
+
+  /**
+   * Cantonner la présentation superposée au premier ancêtre positionné, sans
+   * voile ni blocage du défilement. Pour une barre embarquée dans une zone
+   * bornée (aperçu de doc, panneau scindé).
+   */
+  contained?: boolean;
+  /** Couper l'animation pour cette barre, sans toucher au réglage global. */
+  motionDisabled?: boolean;
+
+  /** En-tête : logo, sélecteur d'espace de travail. */
+  header?: UiSidebarSlot;
+  /** Pied : carte utilisateur, actions. */
+  footer?: UiSidebarSlot;
+
+  /** Appelé quand le panneau superposé s'ouvre. */
+  onShow?: () => void;
+  /** Appelé quand le panneau superposé se ferme. */
+  onHide?: () => void;
+
+  /** Le corps de la barre, typiquement un `UiSidebarMenu`. */
+  children?: ReactNode;
+  /** Ref du panneau : `<aside>` en présentation statique, `<dialog>` en superposée. */
+  ref?: Ref<HTMLElement>;
+}
+
+// --- Contexte et fournisseur ---------------------------------------------------
+
+/** L'état de la barre, lu par ses descendants (menu, contenu des zones). */
+const SidebarContext = createContext<UiSidebarApi | null>(null);
+
+/**
+ * Le magasin d'un `UiSidebarProvider` : la barre y publie son état, les
+ * déclencheurs placés ailleurs sous le fournisseur le lisent. Un magasin et non
+ * un état React : c'est l'ENFANT qui publie vers le parent, et un `setState`
+ * du parent appelé depuis l'effet d'un enfant rendrait tout l'arbre deux fois.
+ */
+interface SidebarStore {
+  get: () => UiSidebarApi | null;
+  set: (api: UiSidebarApi | null) => void;
+  subscribe: (listener: () => void) => () => void;
+}
+
+function createSidebarStore(): SidebarStore {
+  let current: UiSidebarApi | null = null;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => current,
+    set: (api) => {
+      current = api;
+      for (const listener of listeners) listener();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+const StoreContext = createContext<SidebarStore | null>(null);
+
+/**
+ * Rend l'état d'une barre lisible hors de celle-ci : un bouton de menu dans la
+ * barre d'application, par exemple. Un fournisseur porte UNE barre ; deux
+ * barres pilotées séparément prennent chacune le leur.
+ */
+export function UiSidebarProvider({ children }: { children?: ReactNode }) {
+  const [store] = useState(createSidebarStore);
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+}
+
+/**
+ * La barre qui CONTIENT l'appelant, et elle seule. Interne : c'est ce que lit
+ * `UiSidebarMenu`, qui ne doit pas se replier avec une barre voisine publiée
+ * par un fournisseur.
+ */
+export function useEnclosingSidebar(): UiSidebarApi | null {
+  return useContext(SidebarContext);
+}
+
+const noSubscribe = () => () => {};
+const noSnapshot = () => null;
+
+/**
+ * L'état de la barre la plus proche : celle qui contient l'appelant, sinon celle
+ * du `UiSidebarProvider` qui l'entoure. `null` s'il n'y en a aucune.
+ */
+export function useUiSidebar(): UiSidebarApi | null {
+  const own = useContext(SidebarContext);
+  const store = useContext(StoreContext);
+  const published = useSyncExternalStore(
+    store?.subscribe ?? noSubscribe,
+    store?.get ?? noSnapshot,
+    noSnapshot,
+  );
+  return own ?? published;
+}
+
+/** Props à reverser sur le contrôle qui bascule une barre. */
+export interface UiSidebarTriggerProps {
+  'aria-controls': string | undefined;
+  'aria-expanded': boolean | undefined;
+  onClick: () => void;
+}
+
+/** Les props de déclencheur d'une barre donnée. Utile dans `header` ou `footer`. */
+export function getUiSidebarTriggerProps(sidebar: UiSidebarApi | null): UiSidebarTriggerProps {
+  return {
+    'aria-controls': sidebar?.controlsId,
+    'aria-expanded': sidebar?.expanded,
+    onClick: () => sidebar?.toggle(),
+  };
+}
+
+/**
+ * Les props du contrôle qui bascule la barre la plus proche : `aria-controls`,
+ * `aria-expanded`, et la bascule au clic. `Entrée` et `Espace` viennent seuls sur
+ * un `<button>`.
+ *
+ * @example
+ * ```tsx
+ * const trigger = useUiSidebarTrigger();
+ * <UiButton {...trigger} icon="bars" iconOnly aria-label="Menu" />
+ * ```
+ */
+export function useUiSidebarTrigger(): UiSidebarTriggerProps {
+  return getUiSidebarTriggerProps(useUiSidebar());
+}
+
+// --- Point de rupture ----------------------------------------------------------
+
+/** La requête média, juste sous le point de rupture pour ne jamais chevaucher `min-width`. */
+function toMediaQuery(breakpoint: string): string {
+  const bp = breakpoint.trim();
+  const match = /^(-?\d*\.?\d+)px$/.exec(bp);
+  if (match) return `(max-width: ${Number.parseFloat(match[1]!) - 0.02}px)`;
+  return `(max-width: ${bp})`;
+}
+
+function useBelowBreakpoint(enabled: boolean, breakpoint: string): boolean {
+  const query = toMediaQuery(breakpoint);
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (!enabled || typeof window === 'undefined') return () => {};
+      const mql = window.matchMedia(query);
+      mql.addEventListener('change', onChange);
+      return () => mql.removeEventListener('change', onChange);
+    },
+    [enabled, query],
+  );
+  const read = () => enabled && typeof window !== 'undefined' && window.matchMedia(query).matches;
+  return useSyncExternalStore(subscribe, read, () => false);
+}
+
+/** Instances déjà averties, pour rester idempotent sous `<StrictMode>`. */
+const warned = new Set<string>();
+
+/**
+ * ui-sidebar : barre latérale applicative.
+ *
+ * Une surface verticale ancrée à gauche ou à droite, qui accueille la navigation
+ * de l'application. Deux présentations partagent exactement le même intérieur :
+ *
+ * - **Statique** : dans le flux, elle pousse le contenu. `collapsible`, elle se
+ *   replie en rail d'icônes ; avec `openOnHover`, un rail replié se déploie
+ *   par-dessus le contenu au survol et au focus, sans le décaler.
+ * - **Superposée** : un `<dialog>` natif ancré au bord. Le piège de focus, sa
+ *   restitution, l'inertie de l'arrière-plan et l'empilement viennent du
+ *   navigateur, comme pour `ui-drawer`.
+ *
+ * Les descendants lisent l'état replié résolu par contexte : un `UiSidebarMenu`
+ * posé dedans se replie avec elle. Un déclencheur placé ailleurs passe par
+ * `UiSidebarProvider` et `useUiSidebarTrigger()`.
+ */
+export function UiSidebar({
+  side = 'left',
+  mode = 'static',
+  collapsible = true,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  visible: visibleProp,
+  defaultVisible = false,
+  onVisibleChange,
+  openOnHover = false,
+  backdrop = true,
+  dismissable = true,
+  closeOnEscape = true,
+  showCloseButton = true,
+  responsive = false,
+  breakpoint = '1024px',
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  closeIcon = 'xmark',
+  closeAriaLabel = 'Fermer',
+  contained = false,
+  motionDisabled = false,
+  header,
+  footer,
+  onShow,
+  onHide,
+  id,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}: UiSidebarProps) {
+  const uid = useId();
+  const controlsId = id ?? `ui-sidebar-${uid.replace(/:/g, '')}`;
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const store = useContext(StoreContext);
+
+  const [collapsed, setCollapsed] = useControllableState<boolean>({
+    value: collapsedProp,
+    defaultValue: defaultCollapsed,
+    onChange: onCollapsedChange,
+  });
+  const [visible, setVisible] = useControllableState<boolean>({
+    value: visibleProp,
+    defaultValue: defaultVisible,
+    onChange: onVisibleChange,
+  });
+  const [hovering, setHovering] = useState(false);
+
+  const below = useBelowBreakpoint(responsive, breakpoint);
+  const isOverlay = mode === 'overlay' || (responsive && below);
+  const isOpen = isOverlay && visible;
+  const isModal = backdrop && !contained;
+
+  const effectiveCollapsed = !isOverlay && collapsed && !(openOnHover && hovering);
+  const expanded = isOverlay ? visible : !collapsed;
+  const railCollapsed = !isOverlay && collapsed;
+  const floating = openOnHover && collapsed && hovering && !isOverlay;
+
+  const toggle = useCallback(() => {
+    if (isOverlay) setVisible(!visible);
+    else if (collapsible) setCollapsed(!collapsed);
+  }, [isOverlay, visible, setVisible, collapsible, collapsed, setCollapsed]);
+  const open = useCallback(() => {
+    if (isOverlay) setVisible(true);
+    else setCollapsed(false);
+  }, [isOverlay, setVisible, setCollapsed]);
+  const close = useCallback(() => {
+    if (isOverlay) setVisible(false);
+    else if (collapsible) setCollapsed(true);
+  }, [isOverlay, setVisible, collapsible, setCollapsed]);
+
+  const api = useMemo<UiSidebarApi>(
+    () => ({
+      controlsId,
+      collapsed: effectiveCollapsed,
+      expanded,
+      isOverlay,
+      toggle,
+      open,
+      close,
+    }),
+    [controlsId, effectiveCollapsed, expanded, isOverlay, toggle, open, close],
+  );
+
+  // Publication vers le fournisseur, pour les déclencheurs placés hors de la barre.
+  useLayoutEffect(() => {
+    if (!store) return;
+    store.set(api);
+    return () => {
+      if (store.get() === api) store.set(null);
+    };
+  }, [store, api]);
+
+  useUiScrollLock(isOpen && isModal);
+
+  // `visible` n'a de sens qu'en présentation superposée. Sortie de celle-ci (un
+  // point de rupture franchi vers le haut), la barre le remet à faux : sinon
+  // elle se rouvrirait d'elle-même au prochain passage sous le point de rupture.
+  useEffect(() => {
+    if (!isOverlay && visible) setVisible(false);
+  }, [isOverlay, visible, setVisible]);
+
+  // L'ÉTAT est la source de vérité, le `<dialog>` suit. Il s'ouvre par une
+  // méthode : `open` posé en JSX le rendrait sans calque supérieur ni piège de focus.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen && !dialog.open) {
+      if (isModal) dialog.showModal();
+      else dialog.show();
+    } else if (!isOpen && dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen, isModal]);
+
+  // `onShow` et `onHide` suivent l'ouverture, et non le `<dialog>` : quand la
+  // barre repasse en statique panneau ouvert, le dialogue disparaît sans se
+  // fermer, et la fermeture doit quand même être annoncée.
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (isOpen && !wasOpen.current) {
+      wasOpen.current = true;
+      onShow?.();
+    } else if (!isOpen && wasOpen.current) {
+      wasOpen.current = false;
+      onHide?.();
+    }
+  });
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    // Échap par `keydown` et non par `cancel` : un dialogue NON modal (voile
+    // coupé, ou barre cantonnée) ne reçoit pas `cancel`.
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (dismissable && closeOnEscape) setVisible(false);
+    };
+    // Les autres demandes de fermeture du système (geste retour) arrivent par
+    // `cancel` : même règle, une seule voie de fermeture, l'état.
+    const onCancel = (event: Event) => {
+      event.preventDefault();
+      if (dismissable && closeOnEscape) setVisible(false);
+    };
+    // Un clic sur le voile vise le `<dialog>` lui-même, hors de sa boîte.
+    const onClick = (event: MouseEvent) => {
+      if (!isModal || !dismissable || event.target !== dialog) return;
+      const box = dialog.getBoundingClientRect();
+      const inside =
+        event.clientX >= box.left &&
+        event.clientX <= box.right &&
+        event.clientY >= box.top &&
+        event.clientY <= box.bottom;
+      if (!inside) setVisible(false);
+    };
+
+    dialog.addEventListener('keydown', onKeyDown);
+    dialog.addEventListener('cancel', onCancel);
+    dialog.addEventListener('click', onClick);
+    return () => {
+      dialog.removeEventListener('keydown', onKeyDown);
+      dialog.removeEventListener('cancel', onCancel);
+      dialog.removeEventListener('click', onClick);
+    };
+  });
+
+  // Garde-fou d'accessibilité : une région de navigation se nomme.
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (ariaLabel || ariaLabelledBy || warned.has(uid)) return;
+    warned.add(uid);
+    console.warn(
+      '[ui-sidebar] Barre sans nom explicite : renseignez `aria-label` ou `aria-labelledby`.',
+    );
+  }, [ariaLabel, ariaLabelledBy, uid]);
+
+  const setPanelRef = useCallback(
+    (node: HTMLElement | null) => {
+      dialogRef.current = node instanceof HTMLDialogElement ? node : null;
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
+
+  const renderSlot = (slot: UiSidebarSlot) => (typeof slot === 'function' ? slot(api) : slot);
+
+  const shell = (
+    <>
+      {isOverlay && showCloseButton && (
+        <button
+          type="button"
+          className="ui-sidebar-close"
+          aria-label={closeAriaLabel}
+          onClick={() => setVisible(false)}
+        >
+          <UiIcon name={closeIcon} size="sm" />
+        </button>
+      )}
+      {header != null && header !== false && (
+        <div className="ui-sidebar-header">{renderSlot(header)}</div>
+      )}
+      <div className="ui-sidebar-body">{children}</div>
+      {footer != null && footer !== false && (
+        <div className="ui-sidebar-footer">{renderSlot(footer)}</div>
+      )}
+    </>
+  );
+
+  const panelClass = cx(
+    'ui-sidebar',
+    `_${side}`,
+    effectiveCollapsed && '_collapsed',
+    floating && '_floating',
+    isOverlay && '_overlay',
+    isOverlay && contained && '_contained',
+    className,
+  );
+  const motionStyle: CSSProperties | undefined = motionDisabled
+    ? ({ '--ui-motion-duration': '0ms' } as CSSProperties)
+    : undefined;
+  const labelledBy = ariaLabelledBy || undefined;
+  const label = labelledBy ? undefined : (ariaLabel ?? 'Navigation');
+
+  const onRailBlur = (event: FocusEvent<HTMLDivElement>) => {
+    if (!openOnHover) return;
+    const next = event.relatedTarget as Node | null;
+    if (!next || !event.currentTarget.contains(next)) setHovering(false);
+  };
+
+  return (
+    <SidebarContext.Provider value={api}>
+      {isOverlay ? (
+        <dialog
+          {...rest}
+          ref={setPanelRef}
+          id={controlsId}
+          className={panelClass}
+          style={{ ...motionStyle, ...style }}
+          aria-label={label}
+          aria-labelledby={labelledBy}
+        >
+          {shell}
+        </dialog>
+      ) : (
+        <div
+          className={cx('ui-sidebar-rail', railCollapsed && '_collapsed', `_${side}`)}
+          style={motionStyle}
+          onPointerEnter={() => openOnHover && setHovering(true)}
+          onPointerLeave={() => openOnHover && setHovering(false)}
+          onFocus={() => openOnHover && setHovering(true)}
+          onBlur={onRailBlur}
+        >
+          <aside
+            {...rest}
+            ref={setPanelRef}
+            id={controlsId}
+            className={panelClass}
+            style={style}
+            aria-label={label}
+            aria-labelledby={labelledBy}
+            tabIndex={-1}
+          >
+            {shell}
+          </aside>
+        </div>
+      )}
+    </SidebarContext.Provider>
+  );
+}
diff --git a/packages/ui-kit-react/src/navigation/ui-tabs/ui-tabs.tsx b/packages/ui-kit-react/src/navigation/ui-tabs/ui-tabs.tsx
index 6863da0..e3f710e 100644
--- a/packages/ui-kit-react/src/navigation/ui-tabs/ui-tabs.tsx
+++ b/packages/ui-kit-react/src/navigation/ui-tabs/ui-tabs.tsx
@@ -44,6 +44,7 @@ interface UiTabsApi {
   selectOnFocus: boolean;
   showNavigators: boolean;
   motion: boolean;
+  ripple: boolean;
   value: UiTabValue | null;
   isActive: (value: UiTabValue) => boolean;
   activate: (value: UiTabValue, event: SyntheticEvent) => void;
@@ -99,6 +100,11 @@ export interface UiTabsProps extends Omit<
   showNavigators?: boolean;
   /** Animer l'indicateur et l'apparition des panneaux. Le mouvement réduit gagne toujours. */
   motion?: boolean;
+  /**
+   * Onde de pression sur les en-têtes d'onglet, quand elle est activée. Pas sur
+   * les navigateurs : ils font glisser la bande, ils ne mènent nulle part.
+   */
+  ripple?: boolean;
   children?: ReactNode;
 }
 
@@ -120,6 +126,7 @@ export function UiTabs({
   selectOnFocus = false,
   showNavigators = true,
   motion = true,
+  ripple = true,
   className,
   children,
   ...rest
@@ -148,6 +155,7 @@ export function UiTabs({
       selectOnFocus,
       showNavigators,
       motion,
+      ripple,
       value: active,
       isActive: (v) => active === v,
       activate: (next, event) => {
@@ -166,6 +174,7 @@ export function UiTabs({
       selectOnFocus,
       showNavigators,
       motion,
+      ripple,
       active,
       setActive,
       onTabChange,
@@ -488,6 +497,7 @@ export function UiTab({
       )}
       aria-controls={tabs.panelId(value)}
       aria-selected={active}
+      data-ripple={tabs.ripple ? 'on' : 'off'}
       disabled={disabled}
       tabIndex={active ? 0 : -1}
       onClick={(event) => {
diff --git a/packages/ui-kit-react/src/styles/component-vars.scss b/packages/ui-kit-react/src/styles/component-vars.scss
index 22409b1..022abba 100644
--- a/packages/ui-kit-react/src/styles/component-vars.scss
+++ b/packages/ui-kit-react/src/styles/component-vars.scss
@@ -11,7 +11,7 @@
 // design token instead : it follows brand, light/dark and viewport.
 //
 // Generated by `pnpm docs:config`, values read from the compiled CSS, do not
-// edit here. 1158 variables; 109 more exist whose value depends on the
+// edit here. 1365 variables; 122 more exist whose value depends on the
 // rendered variant, listed in each component’s “Theming” section in Storybook.
 // =====================================================================
 
@@ -93,6 +93,45 @@
   --ui-icon-size-sm:                                   var(--size-typography-icon-sm);
   --ui-icon-size-xl:                                   var(--size-typography-icon-xl);
 
+  // ── ui-image ──
+  // Dimensions
+  --ui-image-placeholder-min-height:                   var(--units-xl);
+  --ui-image-placeholder-min-width:                    var(--units-xl);
+  --ui-image-preview-action-size:                      2.25rem;
+  --ui-image-preview-media-max-height:                 100%;
+  --ui-image-preview-media-max-height-rotated:         100cqw;
+  --ui-image-preview-media-max-width:                  100%;
+  --ui-image-preview-media-max-width-rotated:          100cqh;
+  // Espacements
+  --ui-image-preview-gap:                              var(--units-md);
+  --ui-image-preview-padding:                          var(--units-lg);
+  --ui-image-preview-toolbar-gap:                      var(--units-2xs);
+  --ui-image-preview-toolbar-padding:                  var(--units-2xs);
+  // Bordures & rayons
+  --ui-image-placeholder-radius:                       var(--radius-default);
+  --ui-image-preview-action-radius:                    var(--radius-full);
+  --ui-image-preview-focus-ring-width:                 var(--ui-focus-ring-width, var(--units-2xs));
+  --ui-image-preview-toolbar-radius:                   var(--radius-full);
+  --ui-image-trigger-focus-ring-width:                 var(--ui-focus-ring-width, var(--units-2xs));
+  --ui-image-trigger-radius:                           0;
+  // Typographie
+  --ui-image-indicator-font-size:                      var(--size-typography-text-lg);
+  // Couleurs
+  --ui-image-indicator-background:                     var(--primitives-black-50);
+  --ui-image-indicator-color:                          var(--primitives-white-base);
+  --ui-image-placeholder-color:                        var(--global-text-muted);
+  --ui-image-placeholder-surface:                      var(--global-background-muted);
+  --ui-image-preview-action-color:                     var(--primitives-white-base);
+  --ui-image-preview-action-focus-ring-color:          var(--global-border-focus);
+  --ui-image-preview-action-surface-hover:             var(--primitives-white-20);
+  --ui-image-preview-mask-background:                  var(--primitives-black-80);
+  --ui-image-preview-toolbar-background:               var(--primitives-black-50);
+  --ui-image-trigger-focus-ring-color:                 var(--global-border-focus);
+  // Divers
+  --ui-image-object-fit:                               contain;
+  --ui-image-preview-action-opacity-disabled:          0.4;
+  --ui-image-preview-media-shadow:                     var(--shadow-default-lg);
+
   // ══════════════════════════════════════════════════════════════════
   // Formulaires
   // ══════════════════════════════════════════════════════════════════
@@ -274,6 +313,66 @@
   --ui-datepicker-day-opacity-outside:                 0.6;
   --ui-datepicker-panel-shadow:                        var(--ui-overlay-panel-shadow, var(--shadow-default-md));
 
+  // ── ui-editor ──
+  // Dimensions
+  --ui-editor-max-height:                              none;
+  --ui-editor-select-width:                            13ch;
+  --ui-editor-separator-height:                        var(--size-typography-text-default);
+  --ui-editor-separator-width:                         var(--stroke-sm);
+  --ui-editor-swatch-indicator-height:                 var(--stroke-lg);
+  // Espacements
+  --ui-editor-block-gap:                               var(--units-sm);
+  --ui-editor-code-padding-x:                          var(--units-md);
+  --ui-editor-code-padding-y:                          var(--units-sm);
+  --ui-editor-list-item-gap:                           var(--units-2xs);
+  --ui-editor-list-padding-inline-start:               var(--units-xl);
+  --ui-editor-padding-x:                               var(--ui-form-field-padding-x, var(--units-md));
+  --ui-editor-padding-y:                               var(--ui-form-textarea-padding-y, var(--units-default));
+  --ui-editor-padding-y-small:                         var(--ui-form-textarea-padding-y-small, var(--units-md));
+  --ui-editor-swatch-indicator-offset-x:               var(--units-2xs);
+  --ui-editor-toolbar-gap:                             var(--units-2xs);
+  --ui-editor-toolbar-padding-x:                       var(--units-xs);
+  --ui-editor-toolbar-padding-y:                       var(--units-2xs);
+  // Bordures & rayons
+  --ui-editor-code-radius:                             var(--radius-xs);
+  --ui-editor-radius:                                  inherit;
+  --ui-editor-toolbar-stroke-width:                    var(--ui-control-stroke-width, var(--stroke-default));
+  // Typographie
+  --ui-editor-bold-weight:                             var(--weight-bold);
+  --ui-editor-code-font-family:                        var(--fontfamily-monospace);
+  --ui-editor-code-font-size:                          var(--size-typography-text-md);
+  --ui-editor-count-font-family:                       var(--fontfamily-base);
+  --ui-editor-count-font-size:                         var(--size-typography-text-md);
+  --ui-editor-count-font-size-small:                   var(--size-typography-text-sm);
+  --ui-editor-font-size:                               var(--size-typography-text-default);
+  --ui-editor-font-size-small:                         var(--size-typography-text-md);
+  --ui-editor-heading-1-font-size:                     var(--size-typography-title-lg);
+  --ui-editor-heading-2-font-size:                     var(--size-typography-title-md);
+  --ui-editor-heading-3-font-size:                     var(--size-typography-title-sm);
+  --ui-editor-heading-font-family:                     var(--fontfamily-title);
+  --ui-editor-heading-line-height:                     1.25;
+  --ui-editor-heading-weight:                          var(--weight-bold);
+  --ui-editor-line-height:                             1.5;
+  --ui-editor-placeholder-font-family:                 var(--fontfamily-base);
+  --ui-editor-size-default-font-size:                  var(--size-typography-text-default);
+  --ui-editor-size-lg-font-size:                       var(--size-typography-text-lg);
+  --ui-editor-size-sm-font-size:                       var(--size-typography-text-sm);
+  --ui-editor-size-xl-font-size:                       var(--size-typography-text-xl);
+  // Couleurs
+  --ui-editor-code-color:                              var(--global-text-default);
+  --ui-editor-code-surface:                            var(--global-background-muted);
+  --ui-editor-count-color:                             var(--form-low-content-default);
+  --ui-editor-count-color-disabled:                    var(--form-high-content-disabled);
+  --ui-editor-count-color-over:                        var(--form-error-content-default);
+  --ui-editor-link-color:                              var(--global-text-brand);
+  --ui-editor-placeholder-color:                       var(--form-low-content-default);
+  --ui-editor-separator-color:                         var(--form-low-stroke-default);
+  --ui-editor-toolbar-select-surface-hover:            var(--form-low-surface-hover);
+  --ui-editor-toolbar-stroke:                          var(--form-low-stroke-default);
+  --ui-editor-toolbar-surface:                         var(--global-background-muted);
+  // Divers
+  --ui-editor-link-text-decoration:                    underline;
+
   // ── ui-field ──
   // Dimensions
   --ui-field-height:                                   var(--ui-form-field-height, var(--size-components-default));
@@ -311,6 +410,110 @@
   --ui-field-box-cursor:                               text;
   --ui-field-focus-ring-opacity:                       50%;
 
+  // ── ui-file-upload ──
+  // Dimensions
+  --ui-file-upload-field-height:                       var(--ui-form-field-height, var(--size-components-default));
+  --ui-file-upload-field-height-small:                 var(--ui-form-field-height-small, var(--size-components-sm));
+  --ui-file-upload-zone-min-height:                    112px;
+  --ui-file-upload-zone-min-height-small:              94px;
+  // Espacements
+  --ui-file-upload-browse-padding-x:                   var(--units-default);
+  --ui-file-upload-browse-padding-x-small:             var(--units-md);
+  --ui-file-upload-content-gap:                        var(--units-sm);
+  --ui-file-upload-field-gap:                          var(--units-sm);
+  --ui-file-upload-field-padding-x:                    var(--units-md);
+  --ui-file-upload-gap:                                var(--units-default);
+  --ui-file-upload-messages-gap:                       var(--units-2xs);
+  --ui-file-upload-toolbar-gap:                        var(--units-sm);
+  --ui-file-upload-zone-content-gap:                   var(--units-xs);
+  --ui-file-upload-zone-gap:                           var(--units-lg);
+  --ui-file-upload-zone-gap-small:                     var(--units-sm);
+  --ui-file-upload-zone-padding:                       var(--units-default);
+  --ui-file-upload-zone-title-gap:                     var(--units-2xs);
+  // Bordures & rayons
+  --ui-file-upload-focus-ring-width:                   var(--ui-focus-ring-width, var(--units-2xs));
+  --ui-file-upload-radius:                             var(--ui-form-field-radius, var(--radius-sm));
+  --ui-file-upload-stroke-width:                       var(--ui-control-stroke-width, var(--stroke-default));
+  // Typographie
+  --ui-file-upload-browse-font-size:                   var(--size-typography-text-default);
+  --ui-file-upload-browse-font-size-small:             var(--size-typography-text-md);
+  --ui-file-upload-browse-weight:                      var(--weight-bold);
+  --ui-file-upload-field-font-size:                    var(--size-typography-text-default);
+  --ui-file-upload-field-font-size-small:              var(--size-typography-text-md);
+  --ui-file-upload-field-text-weight:                  var(--weight-regular);
+  --ui-file-upload-message-font-size:                  var(--size-typography-text-md);
+  --ui-file-upload-zone-hint-font-size:                var(--size-typography-text-md);
+  --ui-file-upload-zone-hint-font-size-small:          var(--size-typography-text-sm);
+  --ui-file-upload-zone-link-weight:                   var(--weight-bold);
+  --ui-file-upload-zone-title-font-size:               var(--size-typography-text-default);
+  --ui-file-upload-zone-title-font-size-small:         var(--size-typography-text-md);
+  --ui-file-upload-zone-title-weight:                  var(--weight-regular);
+  // Couleurs
+  --ui-file-upload-browse-color:                       var(--actions-high-content-default);
+  --ui-file-upload-browse-color-disabled:              var(--actions-high-content-disabled);
+  --ui-file-upload-browse-surface:                     var(--actions-high-surface-default);
+  --ui-file-upload-browse-surface-disabled:            var(--actions-high-surface-disabled);
+  --ui-file-upload-browse-surface-hover:               var(--actions-high-surface-hover);
+  --ui-file-upload-color:                              var(--form-high-content-default);
+  --ui-file-upload-color-disabled:                     var(--form-high-content-disabled);
+  --ui-file-upload-focus-ring-color:                   var(--form-high-stroke-focused);
+  --ui-file-upload-message-color:                      var(--form-error-content-default);
+  --ui-file-upload-stroke:                             var(--form-high-stroke-default);
+  --ui-file-upload-stroke-disabled:                    var(--form-high-stroke-disabled);
+  --ui-file-upload-stroke-dragging:                    var(--form-high-stroke-focused);
+  --ui-file-upload-stroke-focus:                       var(--form-high-stroke-focused);
+  --ui-file-upload-stroke-hover:                       var(--form-high-stroke-hover);
+  --ui-file-upload-surface:                            var(--form-high-surface-default);
+  --ui-file-upload-surface-disabled:                   var(--form-high-surface-disabled);
+  --ui-file-upload-surface-dragging:                   var(--form-high-surface-focused);
+  --ui-file-upload-surface-hover:                      var(--form-high-surface-hover);
+  --ui-file-upload-zone-hint-color:                    var(--global-text-muted);
+  --ui-file-upload-zone-link-color:                    var(--actions-low-content-default);
+  // Divers
+  --ui-file-upload-placeholder-opacity:                0.75;
+
+  // ── ui-file-upload-list ──
+  // Dimensions
+  --ui-file-upload-item-media-size:                    2.5rem;
+  --ui-file-upload-item-media-size-small:              2rem;
+  --ui-file-upload-item-progress-height:               var(--stroke-default);
+  // Espacements
+  --ui-file-upload-item-gap:                           var(--units-md);
+  --ui-file-upload-item-gap-small:                     var(--units-sm);
+  --ui-file-upload-item-infos-gap:                     var(--units-2xs);
+  --ui-file-upload-item-media-gap:                     var(--units-sm);
+  --ui-file-upload-item-padding-x:                     var(--units-default);
+  --ui-file-upload-item-padding-x-small:               var(--units-md);
+  --ui-file-upload-item-padding-y:                     var(--units-md);
+  --ui-file-upload-item-padding-y-small:               var(--units-sm);
+  --ui-file-upload-item-remove-padding:                var(--units-2xs);
+  // Bordures & rayons
+  --ui-file-upload-item-focus-ring-width:              var(--ui-focus-ring-width, var(--units-2xs));
+  --ui-file-upload-item-radius:                        var(--radius-lg);
+  --ui-file-upload-item-radius-small:                  var(--radius-md);
+  --ui-file-upload-item-remove-radius:                 var(--radius-sm);
+  --ui-file-upload-item-stroke-width:                  var(--ui-control-stroke-width, var(--stroke-default));
+  --ui-file-upload-item-thumb-radius:                  var(--radius-sm);
+  // Typographie
+  --ui-file-upload-font-family:                        var(--fontfamily-base);
+  --ui-file-upload-item-meta-font-size:                var(--size-typography-text-sm);
+  --ui-file-upload-item-meta-font-size-small:          var(--size-typography-text-sm);
+  --ui-file-upload-item-name-font-size:                var(--size-typography-title-sm);
+  --ui-file-upload-item-name-font-size-small:          var(--size-typography-text-md);
+  --ui-file-upload-meta-weight:                        var(--weight-light);
+  --ui-file-upload-name-weight:                        var(--weight-bold);
+  // Couleurs
+  --ui-file-upload-item-progress-color:                var(--global-text-default);
+  --ui-file-upload-list-color:                         var(--form-high-content-default);
+  --ui-file-upload-list-color-error:                   var(--form-error-content-default);
+  --ui-file-upload-list-progress-surface:              var(--form-high-surface-hover);
+  --ui-file-upload-list-remove-color:                  var(--form-high-content-default);
+  --ui-file-upload-list-remove-color-hover:            var(--global-text-default);
+  --ui-file-upload-list-remove-focus-ring-color:       var(--form-high-stroke-focused);
+  --ui-file-upload-list-stroke:                        var(--form-high-stroke-default);
+  --ui-file-upload-list-stroke-error:                  var(--informative-errorhigh-stroke-default);
+  --ui-file-upload-list-surface:                       var(--form-high-surface-default);
+
   // ── ui-input ──
   // Typographie
   --ui-input-font-family:                              var(--fontfamily-base);
@@ -1357,6 +1560,53 @@
   --ui-menu-action-focus-ring-color:                   var(--global-border-focus);
   --ui-menu-panel-surface:                             var(--global-background-default);
 
+  // ── ui-sidebar ──
+  // Dimensions
+  --ui-sidebar-close-size:                             2rem;
+  --ui-sidebar-rail-width:                             4.5rem;
+  --ui-sidebar-width:                                  17.5rem;
+  // Espacements
+  --ui-sidebar-region-padding:                         var(--units-md);
+  // Bordures & rayons
+  --ui-sidebar-stroke-width:                           var(--stroke-sm);
+  // Couleurs
+  --ui-sidebar-backdrop-background:                    var(--primitives-black-50);
+  --ui-sidebar-close-color-hover:                      var(--global-text-muted-hover);
+  --ui-sidebar-close-focus-ring-color:                 var(--global-border-focus);
+  --ui-sidebar-close-surface-hover:                    var(--global-background-muted-hover);
+  --ui-sidebar-color:                                  var(--global-text-default);
+  --ui-sidebar-footer-stroke:                          var(--global-border-subtle);
+  --ui-sidebar-header-stroke:                          var(--global-border-subtle);
+  --ui-sidebar-stroke:                                 var(--global-border-subtle);
+  --ui-sidebar-surface:                                var(--global-background-default);
+  // Divers
+  --ui-sidebar-z-index:                                1000;
+
+  // ── ui-sidebar-menu ──
+  // Dimensions
+  --ui-sidebar-icon-slot-size:                         1.25rem;
+  --ui-sidebar-item-height:                            2.5rem;
+  --ui-sidebar-item-height-small:                      2rem;
+  --ui-sidebar-separator-width:                        var(--stroke-sm);
+  // Espacements
+  --ui-sidebar-group-indent:                           var(--units-lg);
+  --ui-sidebar-item-padding-x:                         var(--units-md);
+  --ui-sidebar-item-padding-x-small:                   var(--units-sm);
+  // Bordures & rayons
+  --ui-sidebar-focus-ring-width:                       var(--ui-focus-ring-width, var(--units-2xs));
+  --ui-sidebar-item-radius:                            var(--radius-sm);
+  // Typographie
+  --ui-sidebar-action-weight:                          var(--weight-regular);
+  --ui-sidebar-font-family:                            var(--fontfamily-base);
+  --ui-sidebar-font-size:                              var(--size-typography-text-default);
+  --ui-sidebar-font-size-small:                        var(--size-typography-text-md);
+  --ui-sidebar-header-font-size:                       var(--size-typography-text-sm);
+  --ui-sidebar-header-font-size-small:                 var(--size-typography-text-sm);
+  --ui-sidebar-section-header-weight:                  var(--weight-bold);
+  --ui-sidebar-weight:                                 var(--weight-bold);
+  // Couleurs
+  --ui-sidebar-menu-action-focus-ring-color:           var(--global-border-focus);
+
   // ── ui-stepper ──
   // Dimensions
   --ui-stepper-marker-size:                            2.75rem;
@@ -1447,6 +1697,8 @@
   --ui-form-control-gap:                               var(--units-sm);
   --ui-form-field-gap:                                 var(--units-sm);
   --ui-form-field-padding-x:                           var(--units-md);
+  --ui-form-textarea-padding-y:                        var(--units-default);
+  --ui-form-textarea-padding-y-small:                  var(--units-md);
   --ui-overlay-panel-padding:                          var(--units-sm);
   // Bordures & rayons
   --ui-avatar-square-radius:                           var(--radius-md);
diff --git a/packages/ui-kit-react/src/table/ui-paginator/ui-paginator.tsx b/packages/ui-kit-react/src/table/ui-paginator/ui-paginator.tsx
index 09ced63..aa3e74b 100644
--- a/packages/ui-kit-react/src/table/ui-paginator/ui-paginator.tsx
+++ b/packages/ui-kit-react/src/table/ui-paginator/ui-paginator.tsx
@@ -83,6 +83,11 @@ export interface UiPaginatorProps extends NativeProps {
    */
   currentPageReportTemplate?: string;
   disabled?: boolean;
+  /**
+   * Onde de pression sur les numéros et les boutons de navigation, quand elle est
+   * activée. `false` la coupe sur ce paginateur, activation globale comprise.
+   */
+  ripple?: boolean;
 
   /** Icônes des contrôles. */
   firstIcon?: ReactNode;
@@ -179,6 +184,7 @@ export function UiPaginator({
   showCurrentPageReport = false,
   currentPageReportTemplate = '{first} - {last} sur {totalRecords}',
   disabled = false,
+  ripple = true,
   firstIcon,
   prevIcon,
   nextIcon,
@@ -279,6 +285,7 @@ export function UiPaginator({
       type="button"
       className="ui-paginator-control"
       disabled={disabled || inactive}
+      data-ripple={ripple ? 'on' : 'off'}
       aria-label={label}
       onClick={() => goToPage(target)}
     >
@@ -320,6 +327,7 @@ export function UiPaginator({
                   type="button"
                   className={cx('ui-paginator-page', item === currentPage && '_current')}
                   disabled={disabled}
+                  data-ripple={ripple ? 'on' : 'off'}
                   aria-label={pageAriaLabel.replace('{page}', String(item + 1))}
                   aria-current={item === currentPage ? 'page' : undefined}
                   onClick={() => goToPage(item)}
diff --git a/scripts/components.check.mjs b/scripts/components.check.mjs
index 7e738ce..c1dcb28 100644
--- a/scripts/components.check.mjs
+++ b/scripts/components.check.mjs
@@ -156,7 +156,8 @@ function checkAnnouncedCounts() {
   const sources = [
     { file: READMES[0].file, re: /\*\*(\d+) components\*\* out of the Design System's (\d+)/ },
     { file: READMES[1].file, re: /\*\*(\d+) composants\*\* sur les (\d+) du Design System/ },
-    { file: ROADMAP, re: /La vague des composants\s*\|\s*🟡 (\d+) sur (\d+)/ },
+    // 🟡 tant que la vague court, ✅ une fois close : le décompte se vérifie dans les deux cas.
+    { file: ROADMAP, re: /La vague des composants\s*\|\s*(?:🟡|✅) (\d+) sur (\d+)/ },
   ];
   for (const { file, re } of sources) {
     const label = file.replace(`${ROOT}/`, '');
diff --git a/storybook/docs/Overview.mdx b/storybook/docs/Overview.mdx
index ac74475..166e51a 100644
--- a/storybook/docs/Overview.mdx
+++ b/storybook/docs/Overview.mdx
@@ -18,6 +18,8 @@ import * as NudgerStories from "../../packages/ui-kit-react/src/forms/ui-nudger/
 import * as InputOtpStories from "../../packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.stories";
 import * as KnobStories from "../../packages/ui-kit-react/src/forms/ui-knob/ui-knob.stories";
 import * as SwatchStories from "../../packages/ui-kit-react/src/forms/ui-swatch-picker/ui-swatch-picker.stories";
+import * as FileUploadStories from "../../packages/ui-kit-react/src/forms/ui-file-upload/ui-file-upload.stories";
+import * as EditorStories from "../../packages/ui-kit-react/src/forms/ui-editor/ui-editor.stories";
 import * as RatingStories from "../../packages/ui-kit-react/src/forms/ui-rating/ui-rating.stories";
 import * as SliderStories from "../../packages/ui-kit-react/src/forms/ui-slider/ui-slider.stories";
 import * as ToggleBlockStories from "../../packages/ui-kit-react/src/forms/ui-toggle-block/ui-toggle-block.stories";
@@ -43,6 +45,7 @@ import * as TabsStories from "../../packages/ui-kit-react/src/navigation/ui-tabs
 import * as BreadcrumbStories from "../../packages/ui-kit-react/src/navigation/ui-breadcrumb/ui-breadcrumb.stories";
 import * as BottomTabBarStories from "../../packages/ui-kit-react/src/navigation/ui-bottom-tab-bar/ui-bottom-tab-bar.stories";
 import * as StepperStories from "../../packages/ui-kit-react/src/navigation/ui-stepper/ui-stepper.stories";
+import * as SidebarStories from "../../packages/ui-kit-react/src/navigation/ui-sidebar/ui-sidebar.stories";
 import * as PaginatorStories from "../../packages/ui-kit-react/src/table/ui-paginator/ui-paginator.stories";
 import * as TableStories from "../../packages/ui-kit-react/src/table/ui-table/ui-table.stories";
 import * as CardStories from "../../packages/ui-kit-react/src/layout/ui-card/ui-card.stories";
@@ -60,6 +63,7 @@ import * as AccordionStories from "../../packages/ui-kit-react/src/informative/u
 import * as ToastStories from "../../packages/ui-kit-react/src/informative/ui-toast/ui-toast.stories";
 import * as AlertStories from "../../packages/ui-kit-react/src/informative/ui-alert/ui-alert.stories";
 import * as IconStories from "../../packages/ui-kit-react/src/base/ui-icon/ui-icon.stories";
+import * as ImageStories from "../../packages/ui-kit-react/src/base/ui-image/ui-image.stories";
 
 <Meta title="Overview" />
 
@@ -110,6 +114,8 @@ export const CATEGORIES = [
       { name: 'ui-slider', description: "Curseur simple ou de plage. Le pointeur est capturé, donc le glissement continue hors de la piste.", link: '?path=/docs/components-ui-forms-ui-slider--docs', story: SliderStories.Default },
       { name: 'ui-knob', description: "Cadran circulaire. Un arc SVG de 300° en viewBox, donc le trait suit le diamètre rendu.", link: '?path=/docs/components-ui-forms-ui-knob--docs', story: KnobStories.Basic },
       { name: 'ui-swatch-picker', description: "Grille de couleurs, en ligne ou en popup. Chaque pastille pointe un jeton, donc la marque la repeint.", link: '?path=/docs/components-ui-forms-ui-swatch-picker--docs', story: SwatchStories.Small },
+      { name: 'ui-editor', description: "Texte riche sur un contenteditable, sans moteur tiers. Police, taille et couleurs en classes adossées aux jetons.", link: '?path=/docs/components-ui-forms-ui-editor--docs', story: EditorStories.WithValue },
+      { name: 'ui-file-upload', description: "Téléversement en champ compact ou en zone de dépôt, sur un input natif. Validation, progression, envoi intégré ou délégué.", link: '?path=/docs/components-ui-forms-ui-file-upload--docs', story: FileUploadStories.Basic },
       { name: 'ui-input-otp', description: "Code à usage unique, une case par caractère. Un seul arrêt de tabulation, et le collage se répartit.", link: '?path=/docs/components-ui-forms-ui-input-otp--docs', story: InputOtpStories.Basic },
       { name: 'ui-toggle-block', description: "Bloc sélectionnable. Un label étiré rend toute la surface activante, sans gestionnaire de clic.", link: '?path=/docs/components-ui-forms-ui-toggle-block--docs', story: ToggleBlockStories.Checked },
       { name: 'ui-segment-control', description: "Contrôle segmenté. La sémantique change avec multiple : radiogroup en simple, group en bascules.", link: '?path=/docs/components-ui-forms-ui-segment-control--docs', story: SegmentStories.WithIcons },
@@ -165,6 +171,7 @@ export const CATEGORIES = [
       { name: 'ui-tabs', description: "Onglets headless composés : bande à focus glissant, indicateur mesuré, défilement, panneaux paresseux.", link: '?path=/docs/components-ui-navigation-ui-tabs--docs', story: TabsStories.Default, previewHeight: 300 },
       { name: 'ui-breadcrumb', description: "Fil d'Ariane. Chaque maillon rend l'élément natif de sa sémantique : ancre, bouton, ou simple texte.", link: '?path=/docs/components-ui-navigation-ui-breadcrumb--docs', story: BreadcrumbStories.Basic },
       { name: 'ui-bottom-tab-bar', description: "Navigation basse des appareils tactiles. Réserve l'incrustation système et garde la cible tactile.", link: '?path=/docs/components-ui-navigation-ui-bottom-tab-bar--docs', story: BottomTabBarStories.Basic, previewHeight: 300 },
+      { name: 'ui-sidebar', description: "Barre latérale applicative : rail d'icônes repliable dans le flux, ou panneau superposé sur un dialog natif. Menu déclaratif livré avec.", link: '?path=/docs/components-ui-navigation-ui-sidebar--docs', story: SidebarStories.WithMenu },
       { name: 'ui-stepper', description: "Progression numérotée. La sémantique ARIA suit la disposition : onglets à plat, accordéon en colonne.", link: '?path=/docs/components-ui-navigation-ui-stepper--docs', story: StepperStories.Basic },
     ],
   },
@@ -181,6 +188,7 @@ export const CATEGORIES = [
     anchor: 'base',
     components: [
       { name: 'ui-icon', description: 'Icône FontAwesome (sm→xl, solid/outline), décorative par défaut, famille configurable.', link: '?path=/docs/components-ui-base-ui-icon--docs', story: IconStories.Solid },
+      { name: 'ui-image', description: "Image consciente du thème et de la marque. Un SVG local devient des éléments React, jamais du HTML collé.", link: '?path=/docs/components-ui-base-ui-image--docs', story: ImageStories.Remote },
     ],
   },
 ];
diff --git a/storybook/public/assets/img/common/logo/logo.svg b/storybook/public/assets/img/common/logo/logo.svg
new file mode 100644
index 0000000..7763e1f
--- /dev/null
+++ b/storybook/public/assets/img/common/logo/logo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" role="presentation">
+  <circle cx="24" cy="24" r="20" />
+  <path d="M14 26 l7 7 l13 -16" />
+</svg>
diff --git a/storybook/ripple-toolbar.ts b/storybook/ripple-toolbar.ts
index c1ad634..e17cdc2 100644
--- a/storybook/ripple-toolbar.ts
+++ b/storybook/ripple-toolbar.ts
@@ -1,11 +1,16 @@
 import type { Decorator } from '@storybook/react-vite';
 
+import {
+  delegateRipple,
+  UI_RIPPLE_DEFAULT_SELECTOR,
+} from '../packages/ui-kit-react/src/core/ripple/ripple-engine';
+
 // =====================================================================
 // Ripple switch for the Storybook toolbar.
 //
-// The engine is installed once for the whole preview (`provideUiRipple()` in
-// `preview.ts`), so switching it is a matter of muting it, not of rebuilding
-// it: the kit's documented kill switch is `data-ripple="off"` on an ancestor,
+// The engine is installed once for the whole preview, right below, exactly as
+// `UiRippleProvider` does it for an application, so switching it is a matter
+// of muting it, not of rebuilding it: the kit's documented kill switch is `data-ripple="off"` on an ancestor,
 // and <html> is the ancestor of everything, overlays included.
 //
 // The button that writes this global lives in
@@ -23,7 +28,7 @@ export const DEFAULT_RIPPLE = 'off';
  * Mutes or unmutes the effect for every story, exactly as an application would.
  *
  * A story that demonstrates the effect itself declares its own activation
- * (`[uiRippleScope]`, `[uiRipple]`), which the kill switch would override since
+ * (`useUiRippleScope`, `useUiRipple`), which the kill switch would override since
  * `data-ripple="off"` on an ancestor always wins. Such a story opts out of the
  * switch with `parameters: { ripple: 'always' }`.
  */
@@ -37,3 +42,14 @@ export const withRipple: Decorator = (Story, context) => {
   }
   return Story();
 };
+
+// Installé au chargement de la prévisualisation, par le moteur seul : le projet
+// TypeScript de Storybook compile en JSX classique, et `UiRippleProvider`, qui
+// en contient, n'y a pas sa place. Même délégation sur <body>, même sélecteur.
+if (typeof document !== 'undefined') {
+  delegateRipple(document.body, () => ({
+    enabled: true,
+    centered: false,
+    selector: UI_RIPPLE_DEFAULT_SELECTOR,
+  }));
+}