From 0a7b881b70a8d699c391ade2583071f3ca0e2aa5 Mon Sep 17 00:00:00 2001
From: LBU <louis.baizeau@4sh.fr>
Date: Wed, 26 Aug 2026 10:13:15 +0200
Subject: [PATCH 1/8] FSHSP-160 feat(editor): add color pickers, indentation
 and popup menus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- fontFamily/fontSize: replace native <select> with a ui-button trigger
  opening a ui-menu popup (size="small"), same pattern as ui-button-split.
  blockFormat stays a native <select>.
- Add indent/outdent tools (native execCommand passthrough, opt-in via
  tools like fontSize).
- Add textColor/highlightColor tools, each opening a new ui-swatch-picker
  popup. Colors are written as ui-editor-color-*/ui-editor-highlight-*
  classes bound to --primitives-* tokens, never inline styles.
- New ui-swatch-picker component (projects/ui-kit/forms/): color grid
  popup derived from primitives tokens, 2D roving-tabindex keyboard nav,
  listbox/option a11y pattern, reused by ui-editor for both pickers.
- Regenerate docs manifest and component-vars (npm run docs:config).

Docs: rewrite the "listes déroulantes" section of ui-editor.mdx to
reflect the select/popup split and updated tool list.
---
 CHANGELOG.md                                  |  56 +++
 docs/components-index.md                      |   3 +-
 .../ui-editor/src/lib/ui-editor-commands.ts   | 153 +++++++-
 .../forms/ui-editor/src/lib/ui-editor.html    | 131 +++++--
 .../forms/ui-editor/src/lib/ui-editor.scss    |  75 +++-
 .../forms/ui-editor/src/lib/ui-editor.ts      | 247 +++++++++++-
 projects/ui-kit/forms/ui-editor/ui-editor.mdx |  88 ++++-
 .../forms/ui-editor/ui-editor.stories.ts      |  58 ++-
 .../forms/ui-swatch-picker/ng-package.json    |   7 +
 .../src/lib/ui-swatch-picker.html             |  60 +++
 .../src/lib/ui-swatch-picker.scss             | 109 ++++++
 .../src/lib/ui-swatch-picker.ts               | 360 ++++++++++++++++++
 .../forms/ui-swatch-picker/src/public-api.ts  |   5 +
 .../ui-swatch-picker/ui-swatch-picker.mdx     | 102 +++++
 .../ui-swatch-picker.stories.ts               | 126 ++++++
 15 files changed, 1485 insertions(+), 95 deletions(-)
 create mode 100644 projects/ui-kit/forms/ui-swatch-picker/ng-package.json
 create mode 100644 projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.html
 create mode 100644 projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.scss
 create mode 100644 projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.ts
 create mode 100644 projects/ui-kit/forms/ui-swatch-picker/src/public-api.ts
 create mode 100644 projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.mdx
 create mode 100644 projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d02326e..5b5b1a43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,62 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
   - Réduit volontairement par rapport à PrimeNG : 4 directions (pas 8 — les diagonales), 2 dispositions (pas 4 — sans `quarter-circle`/`semi-circle`), et un seul étalonnage de touches clavier commun aux dispositions plutôt qu'un mappage par cas. `showTooltips` (booléen) simplifie `tooltipOptions` : la position suit automatiquement le sens de déploiement.
   - 5 hooks `--ui-speed-dial-*` (empan, décalage d'apparition des actions, rayon par défaut du cercle, palier d'empilement, assombrissement du masque).
 
+- **`ui-editor` : outils `indent`/`outdent`** (FSHSP-160). Deux nouveaux `EditorButtonTool`,
+  passthrough direct sur `document.execCommand('indent'|'outdent')` — pas de marker ni de classe
+  à convertir, contrairement à `fontFamily`/`fontSize`. Absents de `DEFAULT_EDITOR_TOOLS` (même
+  logique que `fontSize` : opt-in via `tools`), icônes FontAwesome `indent`/`outdent`.
+
+- **`ui-editor` : outils `textColor`/`highlightColor`** (FSHSP-160). Deux nouveaux
+  `EditorButtonTool`, chacun ouvrant un `ui-swatch-picker` en popup (`size="small"`) ancré à son
+  bouton `ui-button`, plutôt qu'une commande directe — la sélection se fait dans le
+  `swatchSelect` du nuancier. Palette réutilisée depuis `DEFAULT_SWATCH_PALETTE`
+  (`ui-swatch-picker`) : `EDITOR_COLORS`/`EDITOR_HIGHLIGHTS` sont dérivées de la même liste pour
+  que le nuancier et les classes générées portent toujours le même jeu de tokens
+  `--primitives-*`. Écrits en **classe** (`ui-editor-color-*`/`ui-editor-highlight-*`) — jamais
+  en style en ligne — via le même mécanisme marker → conversion que `fontFamily`/`fontSize` :
+  `document.execCommand('foreColor', …)` émet un `<font color>` converti en `<span class>`,
+  tandis que `hiliteColor` n'émet **pas** de `<font>` (vérifié empiriquement, Chromium et
+  Firefox) — il pose un `style="background-color:…"` sur un `<span>`, converti via un sélecteur
+  d'attribut `style` plutôt que `font[color]`. Le bouton de chaque outil affiche un liseré sous
+  son icône dans la couleur en vigueur au curseur ; le nuancier propose une pastille
+  « Aucune couleur » (`allowClear`) qui retire la classe couleur/surlignage de la sélection sans
+  effacer le reste de la mise en forme — `foreColor`/`hiliteColor` n'ont pas de commande native
+  « retirer la couleur ». Absents de `DEFAULT_EDITOR_TOOLS` (même logique d'opt-in que
+  `fontSize`/`indent`/`outdent`).
+
+- **`ui-swatch-picker` — nuancier de couleur réutilisable** (FSHSP-160). `ui-editor` avait
+  besoin d'un nuancier couleur texte / surlignage, et rien dans le kit ne couvrait ce
+  besoin : `ui-menu` structure des commandes, pas une grille de teintes. `ui-swatch-picker`
+  reprend la mécanique overlay de `ui-menu` (`CdkConnectedOverlay`, `autoFlip`,
+  re-position au scroll) sans porter son propre bouton trigger — même contrat de
+  composition que `ui-button-split` avec `ui-menu` (`toggle(event)`/`show(event)`/
+  `hide(focusTrigger?)`, `popup`).
+  - `DEFAULT_SWATCH_PALETTE` (export nommé) : grille 7×5 dérivée des tokens `primitives.*`
+    (7 teintes `primary`/`secondary`/`green`/`orange`/`red`/`slate`/`grey` × 5 paliers
+    `900`→`100`, foncé → clair) plus `black`/`white` — chaque pastille pointe une variable
+    `--primitives-{teinte}-{palier}`, jamais un hex en dur : un rebind de marque change la
+    grille sans recompilation. `palette` accepte un `UiSwatchGroup[]` personnalisé.
+  - Navigation clavier **grille 2D** (roving tabindex) : flèches, `Début`/`Fin`,
+    `Entrée`/`Espace` sélectionnent, `Échap` ferme le popup — mêmes bases que le roving
+    focus de `ui-menu`, adaptées au calcul ligne/colonne.
+  - A11y : `role="listbox"` / `role="option"` sur de vrais `<button>`, `aria-selected` sur
+    la pastille sélectionnée (liseré `--form-high-stroke-checked`, jamais une opacité —
+    doit rester lisible sur chaque teinte), `aria-label` par pastille = son nom
+    (jamais une description de la couleur seule).
+  - `allowClear` (défaut `true`) ajoute une pastille « Aucune couleur » émettant
+    `value = null` / `swatchSelect(null)`.
+
+### Changed
+
+- **`ui-editor` : les listes `fontFamily`/`fontSize` passent du `<select>` natif à un menu popup**
+  (FSHSP-160). Rendu désormais en déclencheur `ui-button` (ghost, `size="small"`) glué à un
+  `ui-menu` en mode `popup [size]="small"`, même pattern que `ui-button-split` — cohérent
+  visuellement avec le reste de la barre d'outils et du kit. `blockFormat` reste un `<select>`
+  natif, hors périmètre de ce changement. Le déclencheur affiche la valeur en vigueur (comme
+  l'ancien `<select>`) et porte un nom accessible qui la reprend (`aria-label` combiné, ex.
+  « Police : Inter ») puisqu'un `ariaLabel` explicite sur `ui-button` remplace tout le contenu
+  visible dans le nom accessible.
+
 - **`ui-editor` — éditeur de texte riche, sans moteur tiers** (FSHSP-160). Le kit s'arrêtait à `ui-textarea` : dès qu'un projet avait besoin de gras, de listes ou d'un lien dans un champ libre, il installait Quill ou TipTap et repartait avec un champ qui ne ressemble à aucun autre du formulaire. `ui-editor` couvre ce besoin en restant dans les règles du kit : bâti sur le shell `ui-field` en mode multiligne, il partage le libellé, la boîte, les niveaux, le helper et la validation avec les huit autres champs, et n'ajoute **aucune dépendance runtime** — les commandes de mise en forme s'appuient sur l'API d'édition native du navigateur, isolée dans `ui-editor-commands` pour qu'un futur moteur ne se substitue qu'à ce fichier.
   - **Barre d'outils configurable** : `tools` liste les outils rendus, dans l'ordre (`bold`, `italic`, `underline`, `bulletList`, `orderedList`, `link`, `clearFormat`, plus `separator`), et `toolbarPosition` la place au-dessus ou sous la zone de saisie. Elle forme **un seul arrêt de tabulation** (`role="toolbar"`, roving tabindex : ⭠ ⭢, `Home`/`End`, `Échap` rend le focus à la saisie) ; les bascules portent un `aria-pressed` recalculé à chaque déplacement du curseur, les actions ponctuelles n'en portent pas. Cliquer un outil ne déplace pas le focus et préserve la sélection. Les raccourcis `Ctrl`/`Cmd` + `B`/`I`/`U` sont pris en charge nativement, l'état de la barre suit.
   - **La valeur est du HTML assaini** : elle passe par `DomSanitizer` avant tout affichage, et le collage est en plus réduit à une liste blanche de balises (`b`, `strong`, `i`, `em`, `u`, `a`, `ul`, `ol`, `li`, `p`, `br`, `div`, `span`) avec `href` limité à `http(s)`/`mailto`/`tel` — un collage depuis Word ou une page web n'injecte ni style en ligne, ni tableau, ni balise étrangère. Le DOM de la zone n'est réécrit que lorsque la valeur vient du formulaire, jamais à la frappe : le curseur ne saute pas.
diff --git a/docs/components-index.md b/docs/components-index.md
index e6aafba7..e23ec43b 100644
--- a/docs/components-index.md
+++ b/docs/components-index.md
@@ -34,8 +34,9 @@
 - ✅ `ui-file-upload` — Téléversement de fichiers (headless ; modes `field`/`drag` + glisser-déposer, `multiple`, validation `accept`/`maxFileSize`/`fileLimit`, `auto`, `customUpload` + `uploadHandler`, upload XHR avec suivi de progression, templates `file`/`content`/`toolbar`, région d'erreurs live, aperçus image révoqués ; compose `ui-file-upload-list`)
 - ✅ `ui-file-upload-list` — Ligne de fichier (unité répétée : vignette/icône, nom + taille/état, suppression ; bascule sur `ui-spinner` pendant le téléversement + barre de progression)
 - ✅ `ui-textarea` — Zone de texte multiligne (CVA ; label + helper, niveaux/états, `rows`, `maxlength`, `autoResize`, poignée native)
-- ✅ `ui-editor` — Éditeur de texte riche (CVA, valeur HTML ; **sans moteur tiers** — zone `contenteditable` + commandes d'édition natives isolées dans `ui-editor-commands` ; barre d'outils configurable `tools` : boutons gras/italique/souligné/listes/lien/**bloc de code**/effacer + **listes déroulantes** `blockFormat` (Normal, Titre 1-3) et `fontFamily`, plus `fontSize` en opt-in — écarté du défaut car il ferait doublon visuel avec `blockFormat` sans porter la structure ; `separator`, `toolbarPosition` haut/bas, roving tabindex `role=toolbar` + `aria-pressed` recalculé au curseur, raccourcis Ctrl/Cmd+B/I/U ; police et taille fermées aux tokens (`--fontfamily-*`, `--size-typography-text-*`), écrites en **classe** jamais en style en ligne, noms de fontes lus depuis les tokens à l'exécution, curseur mémorisé/restauré pour les listes ; assainissement `DomSanitizer` + collage réduit à une liste blanche de balises et de classes ; `minRows`, `maxlength`/`showCount` mesurés sur le **texte**, placeholder, niveaux/états ; 37 hooks `--ui-editor-*`)
+- ✅ `ui-editor` — Éditeur de texte riche (CVA, valeur HTML ; **sans moteur tiers** — zone `contenteditable` + commandes d'édition natives isolées dans `ui-editor-commands` ; barre d'outils configurable `tools` : boutons gras/italique/souligné/listes/**indent/outdent**/lien/**bloc de code**/effacer + **listes déroulantes popup** `blockFormat` (`<select>` natif, Normal, Titre 1-3) et `fontFamily`/`fontSize` (déclencheur `ui-button` + `ui-menu popup [size]="small"`, `fontSize` en opt-in — écarté du défaut car il ferait doublon visuel avec `blockFormat` sans porter la structure) ; **`textColor`/`highlightColor`** en opt-in — chacun ouvre un `ui-swatch-picker` `popup [size]="small"` ancré au bouton, palette réutilisant `DEFAULT_SWATCH_PALETTE` (`ui-swatch-picker`), liseré de couleur active sous l'icône, entrée « Aucune couleur » retirant juste la classe couleur (pas tout le formatage) ; `separator`, `toolbarPosition` haut/bas, roving tabindex `role=toolbar` + `aria-pressed`/`aria-haspopup`+`aria-expanded` recalculés au curseur, raccourcis Ctrl/Cmd+B/I/U ; police/taille/couleur/surlignage fermés aux tokens (`--fontfamily-*`, `--size-typography-text-*`, `--primitives-*`), écrits en **classe** jamais en style en ligne, noms de fontes lus depuis les tokens à l'exécution, curseur mémorisé/restauré pour les popups ; assainissement `DomSanitizer` + collage réduit à une liste blanche de balises et de classes ; `minRows`, `maxlength`/`showCount` mesurés sur le **texte**, placeholder, niveaux/états ; hooks `--ui-editor-*`)
 - ✅ `ui-slider` — Curseur de sélection de valeur (CVA ; simple/`range`, `step`, `marks`, écart min. entre poignées, orientation, drag pointeur + clavier WAI-ARIA `role=slider`)
+- ✅ `ui-swatch-picker` — Nuancier couleur (grille de pastilles, statique ou `popup` en overlay CDK — mêmes mécanique/contrat de composition qu'`ui-menu`/`ui-button-split`, sans trigger propre : `toggle(event)`/`show(event)`/`hide(focusTrigger?)`) ; `palette` `UiSwatchGroup[]`, défaut `DEFAULT_SWATCH_PALETTE` = grille 7×5 dérivée des tokens `primitives.*` (7 teintes × 5 paliers 900→100) + noir/blanc, jamais un hex en dur ; `value` (two-way, `key` sélectionné ou `null`), `allowClear` (pastille « Aucune couleur »), tailles `default`/`small` ; `role="listbox"`/`option` sur de vrais `<button>`, `aria-selected`, clavier roving **grille 2D** (flèches, Début/Fin), sélection marquée par un liseré `--form-high-stroke-checked` (jamais une opacité)
 
 ## informative
 
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
index b8b6dfac..668bf0b3 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
@@ -1,3 +1,5 @@
+import { DEFAULT_SWATCH_PALETTE } from '@4sh/ui-kit/forms/ui-swatch-picker';
+
 /**
  * Rich-text command layer — the only place that talks to the legacy editing API.
  *
@@ -24,6 +26,10 @@ export type EditorTool =
   | 'blockFormat'
   | 'fontFamily'
   | 'fontSize'
+  | 'indent'
+  | 'outdent'
+  | 'textColor'
+  | 'highlightColor'
   | 'link'
   | 'clearFormat'
   | 'separator';
@@ -189,17 +195,26 @@ export const EDITOR_TOOL_META: Record<EditorButtonTool, { icon: string; label: s
   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' },
+  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'>, string> = {
+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',
   clearFormat: 'removeFormat',
 };
 
@@ -224,7 +239,9 @@ export function emptyEditorState(): EditorState {
 }
 
 /** Applies a formatting command to the current selection. */
-export function applyCommand(tool: Exclude<EditorButtonTool, 'link' | 'codeBlock'>): void {
+export function applyCommand(
+  tool: Exclude<EditorButtonTool, 'link' | 'codeBlock' | 'textColor' | 'highlightColor'>,
+): void {
   document.execCommand(NATIVE_COMMAND[tool], false);
 }
 
@@ -332,6 +349,126 @@ 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);
+}
+
+/** 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 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));
+    }
+  }
+}
+
 /** @internal Nearest ancestor carrying one of the given classes. */
 function findClassKey<T extends string>(
   node: Node | null,
@@ -455,11 +592,17 @@ function scrubNode(root: ParentNode): void {
     }
     for (const attr of Array.from(el.attributes)) {
       if (attr.name === 'class') {
-        // Only the editor's own font/size classes survive — anything else pasted
-        // in would style the value against a foreign stylesheet.
+        // 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));
+          .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;
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
index 4ac42e33..b9569f00 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
@@ -90,51 +90,75 @@
         @if (entry.isSeparator) {
           <span class="ui-editor-toolbar-separator" aria-hidden="true"></span>
         } @else if (entry.select; as select) {
-          <!-- A picker, not a toggle: the dropdown takes the focus, so the
-               command restores the caret before it runs. -->
-          <select
-            class="ui-editor-select"
-            [attr.aria-label]="selectLabel(select)"
-            [disabled]="!isEditable()"
-            [value]="selectValue(select)"
-            [attr.tabindex]="entry.index === tabStop() ? 0 : -1"
-            (mousedown)="$event.stopPropagation()"
-            (change)="onSelectChange(select, $event, entry.index)"
-          >
-            <!-- Blank entry, only reachable for the block level: when the caret
-                 sits in a code block or a list item there is no honest level to
-                 show, and claiming "Normal" would be wrong. -->
-            @if (select === 'blockFormat') {
+          @if (select === 'blockFormat') {
+            <!-- A picker, not a toggle: the dropdown takes the focus, so the
+                 command restores the caret before it runs. -->
+            <select
+              class="ui-editor-select"
+              [attr.aria-label]="selectLabel(select)"
+              [disabled]="!isEditable()"
+              [value]="selectValue(select)"
+              [attr.tabindex]="entry.index === tabStop() ? 0 : -1"
+              (mousedown)="$event.stopPropagation()"
+              (change)="onSelectChange(select, $event, entry.index)"
+            >
+              <!-- Blank entry, only reachable for the block level: when the
+                   caret sits in a code block or a list item there is no honest
+                   level to show, and claiming "Normal" would be wrong. -->
               <option value="" disabled></option>
-            }
-
-            @switch (select) {
-              @case ('blockFormat') {
-                @for (block of blocks; track block.key) {
-                  <option [value]="block.key" [selected]="selectValue(select) === block.key">
-                    {{ block.label }}
-                  </option>
-                }
-              }
-              @case ('fontFamily') {
-                @for (font of fonts(); track font.key) {
-                  <option [value]="font.key" [selected]="selectValue(select) === font.key">
-                    {{ font.label }}
-                  </option>
-                }
-              }
-              @case ('fontSize') {
-                @for (size of sizes; track size.key) {
-                  <option [value]="size.key" [selected]="selectValue(select) === size.key">
-                    {{ size.label }}
-                  </option>
-                }
+              @for (block of blocks; track block.key) {
+                <option [value]="block.key" [selected]="selectValue(select) === block.key">
+                  {{ block.label }}
+                </option>
               }
+            </select>
+          } @else {
+            <!-- Trigger + popup menu (same pattern as ui-button-split): the
+                 dropdown takes the focus, so the command restores the caret
+                 before it runs. -->
+            <ui-button
+              class="ui-editor-tool ui-editor-select-trigger"
+              variant="ghost"
+              level="low"
+              size="small"
+              icon="chevron-down"
+              iconPos="right"
+              [label]="selectDisplayLabel(select)"
+              [ariaLabel]="selectTriggerAriaLabel(select)"
+              [disabled]="!isEditable()"
+              [tabindex]="entry.index === tabStop() ? 0 : -1"
+              [buttonProps]="{
+                'aria-haspopup': 'menu',
+                'aria-expanded': selectMenuOpen(select) ? 'true' : 'false',
+              }"
+              (buttonClick)="onSelectMenuTrigger(select, entry.index, $event)"
+            />
+            @if (select === 'fontFamily') {
+              <ui-menu
+                #fontFamilyMenu
+                popup
+                size="small"
+                [items]="fontFamilyMenuItems()"
+                [ariaLabel]="selectLabel(select)"
+                (opened)="fontFamilyMenuOpen.set(true)"
+                (closed)="fontFamilyMenuOpen.set(false)"
+              />
+            } @else {
+              <ui-menu
+                #fontSizeMenu
+                popup
+                size="small"
+                [items]="fontSizeMenuItems()"
+                [ariaLabel]="selectLabel(select)"
+                (opened)="fontSizeMenuOpen.set(true)"
+                (closed)="fontSizeMenuOpen.set(false)"
+              />
             }
-          </select>
+          }
         } @else {
           <ui-button
             class="ui-editor-tool"
+            [class._colorTool]="entry.buttonTool === 'textColor' || entry.buttonTool === 'highlightColor'"
             variant="ghost"
             level="low"
             size="small"
@@ -144,10 +168,37 @@
             [disabled]="!isEditable()"
             [tabindex]="entry.index === tabStop() ? 0 : -1"
             [buttonProps]="toolProps(entry.buttonTool!)"
-            (buttonClick)="runTool(entry.buttonTool!, entry.index)"
+            [style.--ui-editor-swatch-indicator-color]="colorIndicatorVar(entry.buttonTool)"
+            (buttonClick)="runTool(entry.buttonTool!, entry.index, $event)"
           />
         }
       }
+
+      <!-- `textColor`/`highlightColor` popups: no trigger of their own (same
+           composition contract as `ui-menu`), opened via `runTool` ->
+           `onColorToolClick` -> `toggle(event)`. -->
+      <ui-swatch-picker
+        #textColorPicker
+        popup
+        size="small"
+        [allowClear]="true"
+        [value]="currentTextColor()"
+        ariaLabel="Couleur du texte"
+        (swatchSelect)="onTextColorSelect($event)"
+        (opened)="textColorPickerOpen.set(true)"
+        (closed)="textColorPickerOpen.set(false)"
+      />
+      <ui-swatch-picker
+        #highlightColorPicker
+        popup
+        size="small"
+        [allowClear]="true"
+        [value]="currentHighlightColor()"
+        ariaLabel="Couleur de surlignage"
+        (swatchSelect)="onHighlightColorSelect($event)"
+        (opened)="highlightColorPickerOpen.set(true)"
+        (closed)="highlightColorPickerOpen.set(false)"
+      />
     </div>
   }
 </ng-template>
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
index 294f4dac..f423cb1f 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
@@ -23,13 +23,17 @@ $toolbar-surface: var(--ui-editor-toolbar-surface, var(--global-background-muted
 $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.
 
-$select-padding-x: var(--ui-editor-select-padding-x, var(--units-xs));                     /// Inset horizontal des listes déroulantes de la barre.
-$select-font-size: var(--ui-editor-select-font-size, var(--size-typography-text-md));      /// Taille de police des listes déroulantes.
-$select-color: var(--ui-editor-select-color, var(--form-high-content-default));            /// Couleur des listes déroulantes.
-$select-radius: var(--ui-editor-select-radius, var(--radius-2xs));                         /// Rayon des coins des listes déroulantes.
+// `blockFormat` only from here on — `fontFamily`/`fontSize` render a
+// `ui-button` trigger + `ui-menu` popup instead (see `&-select-trigger`).
+$select-padding-x: var(--ui-editor-select-padding-x, var(--units-xs));                     /// Inset horizontal de la liste déroulante du niveau de texte.
+$select-font-size: var(--ui-editor-select-font-size, var(--size-typography-text-md));      /// Taille de police de la liste déroulante.
+$select-color: var(--ui-editor-select-color, var(--form-high-content-default));            /// Couleur de la liste déroulante.
+$select-radius: var(--ui-editor-select-radius, var(--radius-2xs));                         /// Rayon des coins de la liste déroulante.
 // `ch` rather than a measured px: it scales with $select-font-size instead of
-// guessing a pixel count for the longest label ("Roboto Mono").
-$select-width: var(--ui-editor-select-width, 13ch);                                        /// Largeur d'une liste déroulante de la barre, identique pour toutes.
+// guessing a pixel count for the longest label ("Titre 3").
+$select-width: var(--ui-editor-select-width, 13ch);                                        /// Largeur de la liste déroulante, identique à celle des menus popup.
+
+$select-trigger-width: var(--ui-editor-select-trigger-width, 13ch); /// Largeur d'un déclencheur de menu popup (police, taille), identique à celle de la liste déroulante.
 
 $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.
@@ -80,6 +84,17 @@ $size-xl: var(--ui-editor-size-xl-font-size, var(--size-typography-text-xl));
 $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;
@@ -113,7 +128,7 @@ $count-font-size-small: var(--ui-editor-count-font-size-small, var(--size-typogr
     }
   }
 
-  // --- Dropdowns (block level, family, size) --------------------------
+  // --- Dropdown (block level) ------------------------------------------
   &-select {
     flex-shrink: 0;
     // Fixed, and the same for every dropdown: sized on the content it has to
@@ -136,6 +151,37 @@ $count-font-size-small: var(--ui-editor-count-font-size-small, var(--size-typogr
     &:disabled { cursor: not-allowed; color: var(--form-high-content-disabled); }
   }
 
+  // `fontFamily`/`fontSize` triggers (ui-button, host-level only — the panel
+  // itself is `ui-menu`'s own scoped style).
+  &-select-trigger {
+    flex-shrink: 0;
+    // Same fixed width as `&-select`, so the toolbar keeps its layout when a
+    // longer value is picked instead of shifting every tool that follows.
+    min-inline-size: $select-trigger-width;
+    justify-content: space-between;
+  }
+
+  // `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;
@@ -251,6 +297,21 @@ $count-font-size-small: var(--ui-editor-count-font-size-small, var(--size-typogr
     .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); }
   }
 }
 
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
index a439bb5d..49b5685f 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
@@ -19,17 +19,26 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { BaseFormField } from '@4sh/ui-kit/forms';
 import { UiField } from '@4sh/ui-kit/forms/ui-field';
 import { UiButton } from '@4sh/ui-kit/actions/ui-button';
+import { UiMenu, UiMenuItem } from '@4sh/ui-kit/navigation/ui-menu';
+import { UiSwatch, UiSwatchPicker } from '@4sh/ui-kit/forms/ui-swatch-picker';
 import {
   applyBlockFormat,
   applyCommand,
   applyFontFamily,
   applyFontSize,
+  applyHighlightColor,
   applyLink,
+  applyTextColor,
+  clearMarkerClass,
+  convertColorMarkers,
   convertFontMarkers,
+  convertHighlightMarkers,
   convertSizeMarkers,
   DEFAULT_EDITOR_TOOLS,
   EDITOR_BLOCKS,
+  EDITOR_COLORS,
   EDITOR_FONTS,
+  EDITOR_HIGHLIGHTS,
   EDITOR_SELECT_TOOLS,
   EDITOR_SIZES,
   EDITOR_TOOL_META,
@@ -50,6 +59,8 @@ import {
   readEditorState,
   readFontFamily,
   readFontSize,
+  readHighlightColor,
+  readTextColor,
   removeLink,
   resolveFontLabel,
   scrubInPlace,
@@ -75,7 +86,7 @@ const SHORTCUTS: Record<string, EditorTool> = { b: 'bold', i: 'italic', u: 'unde
  */
 @Component({
   selector: 'ui-editor',
-  imports: [UiField, UiButton, NgTemplateOutlet],
+  imports: [UiField, UiButton, UiMenu, UiSwatchPicker, NgTemplateOutlet],
   templateUrl: './ui-editor.html',
   styleUrl: './ui-editor.scss',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiEditor), multi: true }],
@@ -118,6 +129,14 @@ export class UiEditor extends BaseFormField<string> {
   private readonly contentEl = viewChild<ElementRef<HTMLElement>>('contentEl');
   /** @ignore The rendered toolbar — holds the roving tabindex ring, in DOM order. */
   private readonly toolbarEl = viewChild<ElementRef<HTMLElement>>('toolbarEl');
+  /** @ignore Font family popup (see {@link onSelectMenuTrigger}). */
+  private readonly fontFamilyMenu = viewChild<UiMenu>('fontFamilyMenu');
+  /** @ignore Font size popup (see {@link onSelectMenuTrigger}). */
+  private readonly fontSizeMenu = viewChild<UiMenu>('fontSizeMenu');
+  /** @ignore Text color popup (see {@link onColorToolClick}). */
+  private readonly textColorPicker = viewChild<UiSwatchPicker>('textColorPicker');
+  /** @ignore Highlight color popup (see {@link onColorToolClick}). */
+  private readonly highlightColorPicker = viewChild<UiSwatchPicker>('highlightColorPicker');
 
   /**
    * @ignore Last HTML this component wrote out.
@@ -135,10 +154,22 @@ export class UiEditor extends BaseFormField<string> {
   protected readonly currentFont = signal<EditorFont | null>(null);
   /** @ignore Text size at the caret (`null` = the default size). */
   protected readonly currentSize = signal<EditorSize | null>(null);
+  /** @ignore Text color at the caret (`null` = the default color). */
+  protected readonly currentTextColor = signal<string | null>(null);
+  /** @ignore Highlight color at the caret (`null` = no highlight). */
+  protected readonly currentHighlightColor = signal<string | null>(null);
   /** @ignore Block level at the caret (`null` = neither a paragraph nor a heading). */
   protected readonly currentBlock = signal<EditorBlock | null>(null);
   /** @ignore Index of the toolbar button reachable with Tab (roving tabindex). */
   protected readonly activeTool = signal(0);
+  /** @ignore Open state of the `fontFamily` popup (drives its trigger's `aria-expanded`). */
+  protected readonly fontFamilyMenuOpen = signal(false);
+  /** @ignore Open state of the `fontSize` popup (drives its trigger's `aria-expanded`). */
+  protected readonly fontSizeMenuOpen = signal(false);
+  /** @ignore Open state of the `textColor` popup (drives its trigger's `aria-expanded`). */
+  protected readonly textColorPickerOpen = signal(false);
+  /** @ignore Open state of the `highlightColor` popup (drives its trigger's `aria-expanded`). */
+  protected readonly highlightColorPickerOpen = signal(false);
 
   /**
    * @ignore Last selection seen inside the editing area.
@@ -199,6 +230,30 @@ export class UiEditor extends BaseFormField<string> {
    * hardcoded "Inter" would lie as soon as a project rebinds the token.
    */
   protected readonly fonts = signal(EDITOR_FONTS.map((f) => ({ ...f })));
+  /** @ignore `fontFamily` popup entries — one `command` per family, closed over its key. */
+  protected readonly fontFamilyMenuItems = computed<UiMenuItem[]>(() =>
+    this.fonts().map((font) => ({
+      id: font.key,
+      label: font.label,
+      command: () => this.selectFontFamily(font.key),
+    })),
+  );
+  /** @ignore `fontSize` popup entries — one `command` per size, closed over its key. */
+  protected readonly fontSizeMenuItems = computed<UiMenuItem[]>(() =>
+    this.sizes.map((size) => ({
+      id: size.key,
+      label: size.label,
+      command: () => this.selectFontSize(size.key),
+    })),
+  );
+  /** @ignore Swatch entry backing the `textColor` button's color indicator. */
+  protected readonly currentTextColorSwatch = computed(() =>
+    EDITOR_COLORS.find((c) => c.key === this.currentTextColor()),
+  );
+  /** @ignore Swatch entry backing the `highlightColor` button's color indicator. */
+  protected readonly currentHighlightColorSwatch = computed(() =>
+    EDITOR_HIGHLIGHTS.find((c) => c.key === this.currentHighlightColor()),
+  );
   /** @ignore The toolbar has at least one actionable entry. */
   protected readonly hasToolbar = computed(() => this.tools().some((t) => t !== 'separator'));
   /**
@@ -325,6 +380,8 @@ export class UiEditor extends BaseFormField<string> {
     const anchor = document.getSelection()?.anchorNode ?? null;
     this.currentFont.set(readFontFamily(anchor));
     this.currentSize.set(readFontSize(anchor));
+    this.currentTextColor.set(readTextColor(anchor));
+    this.currentHighlightColor.set(readHighlightColor(anchor));
     this.currentBlock.set(readBlockFormat());
 
     const next = readEditorState();
@@ -356,9 +413,13 @@ export class UiEditor extends BaseFormField<string> {
   // --- Toolbar ----------------------------------------------------------
 
   /** @ignore Runs a button tool against the selection the mousedown handler preserved. */
-  protected runTool(tool: EditorButtonTool, index: number): void {
+  protected runTool(tool: EditorButtonTool, index: number, event?: MouseEvent): void {
     if (!this.isEditable()) return;
     this.activeTool.set(index);
+    if (tool === 'textColor' || tool === 'highlightColor') {
+      this.onColorToolClick(tool, event!);
+      return;
+    }
     this.focus();
     if (tool === 'link') this.promptForLink();
     else if (tool === 'codeBlock') toggleCodeBlock();
@@ -367,34 +428,128 @@ export class UiEditor extends BaseFormField<string> {
   }
 
   /**
-   * @ignore Applies a dropdown choice to the selection.
+   * @ignore Trigger click for `textColor`/`highlightColor`: opens the matching
+   * `ui-swatch-picker` instead of applying a command directly — same
+   * "picker takes the focus, the caret is restored before the real command
+   * runs" pattern as {@link onSelectMenuTrigger}, but these two are button
+   * tools (a one-shot action button, not a value dropdown), so they run
+   * through `runTool` rather than `onSelectChange`.
+   */
+  private onColorToolClick(tool: 'textColor' | 'highlightColor', event: MouseEvent): void {
+    this.rememberSelection();
+    const picker =
+      tool === 'textColor' ? this.textColorPicker() : this.highlightColorPicker();
+    picker?.toggle(event);
+  }
+
+  /**
+   * @ignore Applies the text color chosen in the `textColor` picker.
+   *
+   * The popup took the focus, so the caret is put back first. `foreColor`
+   * emits a legacy `<font>` element, immediately rewritten into a class.
+   */
+  protected onTextColorSelect(swatch: UiSwatch | null): void {
+    if (!this.isEditable()) return;
+    this.restoreSelection();
+    const el = this.contentEl()?.nativeElement;
+    if (swatch) {
+      applyTextColor();
+      if (el) convertColorMarkers(el, `ui-editor-color-${swatch.key}`);
+    } else if (el && this.savedRange) {
+      for (const color of EDITOR_COLORS) clearMarkerClass(el, this.savedRange, color.className);
+    }
+    this.onInput();
+  }
+
+  /**
+   * @ignore Applies the highlight color chosen in the `highlightColor` picker.
    *
-   * The dropdown took the focus, so the caret is put back first. The family and
-   * size commands emit legacy `<font>` elements, immediately rewritten into a
-   * class; the block command writes a real tag and needs no conversion.
+   * The popup took the focus, so the caret is put back first. `hiliteColor`
+   * emits a `<span style="background-color:…">`, immediately rewritten into a
+   * class (see {@link convertHighlightMarkers}).
+   */
+  protected onHighlightColorSelect(swatch: UiSwatch | null): void {
+    if (!this.isEditable()) return;
+    this.restoreSelection();
+    const el = this.contentEl()?.nativeElement;
+    if (swatch) {
+      applyHighlightColor();
+      if (el) convertHighlightMarkers(el, `ui-editor-highlight-${swatch.key}`);
+    } else if (el && this.savedRange) {
+      for (const color of EDITOR_HIGHLIGHTS) {
+        clearMarkerClass(el, this.savedRange, color.className);
+      }
+    }
+    this.onInput();
+  }
+
+  /**
+   * @ignore Applies the block level chosen in the `blockFormat` dropdown.
+   *
+   * The dropdown took the focus, so the caret is put back first. `fontFamily`
+   * and `fontSize` no longer go through here — they run as popup-menu commands
+   * (see {@link onSelectMenuTrigger}, {@link selectFontFamily}).
    */
   protected onSelectChange(tool: EditorSelectTool, event: Event, index: number): void {
     const value = (event.target as HTMLSelectElement).value;
     this.activeTool.set(index);
-    if (!this.isEditable() || !value) return;
+    if (!this.isEditable() || !value || tool !== 'blockFormat') return;
 
     this.restoreSelection();
-    const el = this.contentEl()?.nativeElement;
+    applyBlockFormat(value as EditorBlock);
+    this.onInput();
+  }
 
-    if (tool === 'blockFormat') {
-      applyBlockFormat(value as EditorBlock);
-    } else if (tool === 'fontFamily') {
-      const choice = this.fonts().find((f) => f.key === value);
-      if (!choice) return;
-      applyFontFamily();
-      if (el) convertFontMarkers(el, choice.className);
-    } else {
-      const choice = this.sizes.find((s) => s.key === value);
-      if (!choice) return;
-      applyFontSize();
-      if (el) convertSizeMarkers(el, choice.className);
-    }
+  /**
+   * @ignore Trigger click: mark the tool active, then toggle its popup menu.
+   *
+   * Only reachable for `fontFamily`/`fontSize` (see the template's `@else`
+   * branch of `select === 'blockFormat'`) — `tool` still spans the whole
+   * dropdown union so the template's narrowing stays optional.
+   */
+  protected onSelectMenuTrigger(tool: EditorSelectTool, index: number, event: MouseEvent): void {
+    this.activeTool.set(index);
+    if (!this.isEditable()) return;
+    if (tool === 'fontFamily') this.fontFamilyMenu()?.toggle(event);
+    else if (tool === 'fontSize') this.fontSizeMenu()?.toggle(event);
+  }
 
+  /** @ignore Whether a popup-menu dropdown is currently open (its trigger's `aria-expanded`). */
+  protected selectMenuOpen(tool: EditorSelectTool): boolean {
+    return tool === 'fontFamily' ? this.fontFamilyMenuOpen() : this.fontSizeMenuOpen();
+  }
+
+  /**
+   * @ignore Applies a type family from the `fontFamily` popup.
+   *
+   * The popup took the focus, so the caret is put back first. `fontName` emits
+   * a legacy `<font>` element, immediately rewritten into a class.
+   */
+  private selectFontFamily(key: EditorFont): void {
+    if (!this.isEditable()) return;
+    const choice = this.fonts().find((f) => f.key === key);
+    if (!choice) return;
+    this.restoreSelection();
+    applyFontFamily();
+    const el = this.contentEl()?.nativeElement;
+    if (el) convertFontMarkers(el, choice.className);
+    this.onInput();
+  }
+
+  /**
+   * @ignore Applies a text size from the `fontSize` popup.
+   *
+   * The popup took the focus, so the caret is put back first. `fontSize` emits
+   * a legacy `<font>` element, immediately rewritten into a class.
+   */
+  private selectFontSize(key: EditorSize): void {
+    if (!this.isEditable()) return;
+    const choice = this.sizes.find((s) => s.key === key);
+    if (!choice) return;
+    this.restoreSelection();
+    applyFontSize();
+    const el = this.contentEl()?.nativeElement;
+    if (el) convertSizeMarkers(el, choice.className);
     this.onInput();
   }
 
@@ -422,6 +577,34 @@ export class UiEditor extends BaseFormField<string> {
     return 'Taille du texte';
   }
 
+  /**
+   * @ignore Label shown on the `fontFamily`/`fontSize` popup triggers.
+   *
+   * Reads the value actually in force at the caret, same fallback rule as
+   * {@link selectValue}: text carrying no class really is rendered with
+   * `--fontfamily-base` at the default size.
+   */
+  protected selectDisplayLabel(tool: EditorSelectTool): string {
+    if (tool === 'fontFamily') {
+      const key = this.currentFont() ?? 'base';
+      return this.fonts().find((f) => f.key === key)?.label ?? '';
+    }
+    const key = this.currentSize() ?? 'default';
+    return this.sizes.find((s) => s.key === key)?.label ?? '';
+  }
+
+  /**
+   * @ignore Accessible name of a popup trigger, combining the dropdown's own
+   * name with the value it currently shows.
+   *
+   * `ui-button` reports an explicit `ariaLabel` as the whole accessible name,
+   * which would otherwise hide the visible value (`selectDisplayLabel`) from
+   * assistive tech — announcing "Police" instead of "Police : Inter".
+   */
+  protected selectTriggerAriaLabel(tool: EditorSelectTool): string {
+    return `${this.selectLabel(tool)} : ${this.selectDisplayLabel(tool)}`;
+  }
+
   /**
    * @ignore The dropdown shows no value at all.
    *
@@ -497,13 +680,35 @@ export class UiEditor extends BaseFormField<string> {
     controls?.[position]?.focus();
   }
 
+  /**
+   * @ignore `var(--primitives-…)` for the `textColor`/`highlightColor`
+   * buttons' color indicator, or `null` for every other tool (no swatch
+   * active, or a tool the indicator does not apply to).
+   */
+  protected colorIndicatorVar(tool: EditorButtonTool | null): string | null {
+    const swatch =
+      tool === 'textColor'
+        ? this.currentTextColorSwatch()
+        : tool === 'highlightColor'
+          ? this.currentHighlightColorSwatch()
+          : null;
+    return swatch ? `var(${swatch.cssVar})` : null;
+  }
+
   /**
    * @ignore Native attributes forwarded to a tool button.
    *
    * `aria-pressed` only on the toggles: `link` and `clearFormat` are one-shot
    * actions, and a permanently unpressed toggle would misreport them.
+   * `textColor`/`highlightColor` forward `aria-haspopup`/`aria-expanded`
+   * instead — they open a `ui-swatch-picker` popup, not a toggle.
    */
   protected toolProps(tool: EditorTool): Record<string, string> | undefined {
+    if (tool === 'textColor' || tool === 'highlightColor') {
+      const open =
+        tool === 'textColor' ? this.textColorPickerOpen() : this.highlightColorPickerOpen();
+      return { 'aria-haspopup': 'true', 'aria-expanded': open ? 'true' : 'false' };
+    }
     const state = this.state();
     if (!(tool in state)) return undefined;
     return { 'aria-pressed': state[tool as keyof EditorState] ? 'true' : 'false' };
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.mdx b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
index 5bd6aa52..346641c2 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.mdx
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
@@ -32,7 +32,8 @@ saisie multiligne **sans mise en forme** →
 
 `tools` liste les outils rendus, dans l'ordre. La valeur `separator` insère un séparateur visuel.
 Outils disponibles : `blockFormat`, `fontFamily`, `fontSize`, `bold`, `italic`, `underline`,
-`bulletList`, `orderedList`, `link`, `codeBlock`, `clearFormat`.
+`bulletList`, `orderedList`, `indent`, `outdent`, `textColor`, `highlightColor`, `link`,
+`codeBlock`, `clearFormat`.
 
 <Canvas of={EditorStories.MinimalToolbar} />
 <Canvas of={EditorStories.ToolbarBottom} />
@@ -48,16 +49,19 @@ par construction.
 
 <Canvas of={EditorStories.CodeBlock} />
 
-### Les trois listes déroulantes
+### Les trois sélecteurs de valeur
 
-`blockFormat`, `fontFamily` et `fontSize` rendent une liste déroulante et non un bouton : elles
-choisissent parmi des valeurs au lieu d'en basculer une.
+`blockFormat`, `fontFamily` et `fontSize` choisissent parmi des valeurs au lieu d'en basculer une.
+Ils ne partagent plus le même rendu : `blockFormat` reste un `<select>` natif, tandis que
+`fontFamily`/`fontSize` s'ouvrent désormais en popup — un déclencheur `ui-button` (ghost,
+`size="small"`) glué à un `ui-menu` `popup [size]="small"`, même pattern que
+[`ui-button-split`](?path=/docs/components-ui-actions-ui-button-split--docs).
 
-| Liste         | Rôle                                                                          | Par défaut |
-| ------------- | ----------------------------------------------------------------------------- | ---------- |
-| `blockFormat` | **Ce que le bloc est** : Normal, Titre 1, Titre 2, Titre 3 (`<p>`, `<h1-h3>`) | oui        |
-| `fontFamily`  | **La famille de caractères** appliquée au texte sélectionné                   | oui        |
-| `fontSize`    | **La taille** d'une portion : Petit, Normal, Grand, Très grand                | non        |
+| Sélecteur     | Rôle                                                                          | Rendu                          | Par défaut |
+| ------------- | ------------------------------------------------------------------------------ | ------------------------------- | ---------- |
+| `blockFormat` | **Ce que le bloc est** : Normal, Titre 1, Titre 2, Titre 3 (`<p>`, `<h1-h3>`)   | `<select>` natif                | oui        |
+| `fontFamily`  | **La famille de caractères** appliquée au texte sélectionné                    | `ui-button` + `ui-menu` en popup | oui        |
+| `fontSize`    | **La taille** d'une portion : Petit, Normal, Grand, Très grand                 | `ui-button` + `ui-menu` en popup | non        |
 
 Le niveau et la police sont deux choses distinctes : un titre porte la **structure** du document —
 un lecteur d'écran navigue de titre en titre — là où la police ne change que l'apparence. Mettre la
@@ -69,24 +73,28 @@ proposer côte à côte revient à inviter des titres qui n'en sont pas, et donc
 structure. Il reste disponible pour un projet qui l'ajoute explicitement à `tools`, par exemple
 pour mettre en avant une portion de texte sans en faire un titre.
 
-Chaque liste affiche **la valeur en vigueur**, jamais son propre nom : au repos on lit « Normal »
-et « Inter », c'est-à-dire ce que le texte utilise réellement. La police est lue sur le rendu
-effectif, pas devinée — dans un titre la liste affiche « DM Sans », puisque c'est la fonte que le
-titre porte. Le nom de chaque liste reste disponible pour les lecteurs d'écran via `aria-label`.
+Chaque sélecteur affiche **la valeur en vigueur**, jamais son propre nom : au repos on lit
+« Normal » et « Inter », c'est-à-dire ce que le texte utilise réellement. La police est lue sur le
+rendu effectif, pas devinée — dans un titre le sélecteur affiche « DM Sans », puisque c'est la
+fonte que le titre porte. Le nom de chaque sélecteur reste disponible pour les lecteurs d'écran :
+en `aria-label` sur le `<select>` de `blockFormat`, combiné au nom du déclencheur
+(« Police : Inter ») sur les popups `fontFamily`/`fontSize` — sinon la valeur affichée à l'écran
+disparaîtrait du nom accessible, qu'un `aria-label` explicite remplace entièrement sur un
+`ui-button`.
 
 Seule exception, `blockFormat` n'affiche **aucune** valeur quand le curseur est dans un bloc qu'il
 ne propose pas (bloc de code, élément de liste) : il n'y a là rien d'honnête à afficher, et
 annoncer « Normal » inviterait un clic qui reformaterait le bloc.
 
-Les listes ont toutes la **même largeur, fixe** : une largeur ajustée au contenu ferait sauter la
-barre entière à chaque changement de valeur.
+Les trois sélecteurs ont tous la **même largeur, fixe** : une largeur ajustée au contenu ferait
+sauter la barre entière à chaque changement de valeur.
 
 Les choix sont **fermés aux tokens** : `--fontfamily-base` / `--fontfamily-title` /
-`--fontfamily-monospace` pour la famille, l'échelle `--size-typography-text-*` pour la taille. Une
-liste libre façon traitement de texte écrirait une police ou un `font-size` arbitraire dans la
+`--fontfamily-monospace` pour la famille, l'échelle `--size-typography-text-*` pour la taille. Un
+champ libre façon traitement de texte écrirait une police ou un `font-size` arbitraire dans la
 valeur, donc hors du système.
 
-La liste des polices affiche le **nom réel** de chaque fonte, lu depuis le token à l'exécution
+Le sélecteur de police affiche le **nom réel** de chaque fonte, lu depuis le token à l'exécution
 (« Inter », « DM Sans », « Roboto Mono »). Il n'est pas écrit en dur : un projet qui rebinde
 `--fontfamily-base` verrait sinon un menu nommant une police qu'il n'utilise plus.
 
@@ -98,6 +106,46 @@ collage.
 <Canvas of={EditorStories.Headings} />
 <Canvas of={EditorStories.FontFamily} />
 <Canvas of={EditorStories.FontSize} />
+<Canvas of={EditorStories.FontMenus} />
+
+### Indentation
+
+`indent`/`outdent` sont un passthrough direct sur les commandes natives correspondantes : ni
+classe, ni conversion à appliquer, contrairement à la police et à la taille. Comme `fontSize`, ils
+sont **absents de la barre par défaut** et s'ajoutent explicitement via `tools`.
+
+<Canvas of={EditorStories.IndentOutdent} />
+
+### Couleur du texte / de surlignage
+
+`textColor`/`highlightColor` ouvrent chacun un
+[`ui-swatch-picker`](?path=/docs/components-ui-forms-ui-swatch-picker--docs) en popup
+(`popup`, `size="small"`) ancré à leur bouton `ui-button` — même composition « déclencheur +
+overlay » que `fontFamily`/`fontSize`, sans `ui-menu` : le nuancier n'a pas son propre
+déclencheur, exactement comme `ui-menu` n'a pas le sien.
+
+La palette est la **palette par défaut de `ui-swatch-picker`** (`DEFAULT_SWATCH_PALETTE`),
+réutilisée telle quelle pour `EDITOR_COLORS`/`EDITOR_HIGHLIGHTS` : le nuancier et les classes
+que l'éditeur écrit dans la valeur portent toujours le même jeu de tokens `--primitives-*`.
+
+Comme la police et la taille, le choix est écrit sous forme de **classe** —
+`ui-editor-color-<clé>` / `ui-editor-highlight-<clé>` — jamais en style en ligne, et ce sont
+les seules classes couleur que la liste blanche laisse passer au collage.
+
+`document.execCommand('hiliteColor', …)` ne produit **pas** de balise `<font>` comme
+`foreColor`/`fontName`/`fontSize` : il pose directement un `style="background-color:…"` sur un
+`<span>` (Chromium et Firefox vérifiés). La conversion vers la classe pérenne s'appuie donc sur
+un sélecteur d'attribut `style` plutôt que sur `font[color]`.
+
+Le bouton de chaque outil affiche un **liseré** sous son icône dans la couleur en vigueur au
+curseur — seule exception au rendu générique des outils-bouton, les autres n'ayant pas
+d'indicateur de valeur.
+
+Le nuancier propose une entrée **« Aucune couleur »** (`allowClear`) qui retire la classe
+couleur/surlignage de la sélection plutôt que d'effacer toute la mise en forme (gras, italique…) :
+`foreColor`/`hiliteColor` n'ont pas d'équivalent natif « retirer la couleur ».
+
+<Canvas of={EditorStories.ColorPickers} />
 
 ## Niveaux & états
 
@@ -185,7 +233,9 @@ refusées mais les suppressions et la mise en forme restent disponibles.
       <td>
         Les bascules (gras, italique, souligné, listes) portent <code>aria-pressed</code>, recalculé
         à chaque déplacement du curseur. Les actions ponctuelles (lien, effacer le formatage) n'en
-        portent pas.
+        portent pas. <code>textColor</code>/<code>highlightColor</code> portent{' '}
+        <code>aria-haspopup</code>/<code>aria-expanded</code> — ce sont des déclencheurs de popup,
+        pas des bascules.
       </td>
     </tr>
     <tr>
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
index 3c0ce593..3c0b765f 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
@@ -165,8 +165,10 @@ export const CodeBlock: Story = {
 /**
  * Le choix de police est **fermé aux trois familles du système**
  * (`--fontfamily-base`, `--fontfamily-title`, `--fontfamily-monospace`), et la
- * taille à l'échelle `--size-typography-text-*`. La liste affiche le nom réel de
- * chaque fonte, lu depuis le token à l'exécution.
+ * taille à l'échelle `--size-typography-text-*`. Chaque liste se rend en
+ * déclencheur `ui-button` + popup `ui-menu` (`size="small"`, même pattern que
+ * `ui-button-split`), et affiche le nom réel de la fonte en vigueur, lu depuis
+ * le token à l'exécution.
  */
 export const FontFamily: Story = {
   render: story(
@@ -194,6 +196,23 @@ export const FontSize: Story = {
   },
 };
 
+/**
+ * Les deux menus popup côte à côte : `fontFamily` et `fontSize` ouvrent chacun
+ * leur propre `ui-menu` (`popup`, `size="small"`) ancré à un bouton `ui-button`
+ * affichant la valeur en vigueur au repos.
+ */
+export const FontMenus: Story = {
+  render: story(
+    '<p><span class="ui-editor-font-title ui-editor-size-lg">Titre en grand</span></p>' +
+      '<p>Paragraphe en police et taille par défaut.</p>' +
+      '<p><span class="ui-editor-font-monospace ui-editor-size-sm">const x = 1;</span></p>',
+  ),
+  args: {
+    label: 'Contenu',
+    tools: ['fontFamily', 'fontSize', 'separator', 'bold', 'italic', 'underline'],
+  },
+};
+
 /**
  * `blockFormat` change ce que le bloc **est**, pas seulement son apparence : un
  * titre porte la structure du document, et un lecteur d'écran navigue de titre en
@@ -208,6 +227,41 @@ export const Headings: Story = {
   args: { label: 'Article', minRows: 8 },
 };
 
+/**
+ * `indent`/`outdent` ne sont **pas** dans la barre par défaut (même logique
+ * que `fontSize` : opt-in via `tools`). Passthrough `execCommand` — aucune
+ * classe ni conversion, contrairement à la police/taille.
+ */
+export const IndentOutdent: Story = {
+  render: story(
+    '<ul><li>Premier point</li><li>Second point<ul><li>Sous-point</li></ul></li></ul>',
+  ),
+  args: {
+    label: 'Plan',
+    tools: ['bulletList', 'orderedList', 'separator', 'indent', 'outdent'],
+  },
+};
+
+/**
+ * `textColor`/`highlightColor` ne sont **pas** dans la barre par défaut (même
+ * logique d'opt-in que `fontSize`/`indent`/`outdent`). Chacun ouvre son propre
+ * `ui-swatch-picker` (`popup`, `size="small"`) ancré au bouton `ui-button`, qui
+ * affiche un liseré sous son icône dans la couleur active au curseur. La
+ * palette est celle par défaut de `ui-swatch-picker`, réutilisée telle quelle
+ * pour que le nuancier et les classes générées restent le même jeu de tokens.
+ */
+export const ColorPickers: Story = {
+  render: story(
+    '<p><span class="ui-editor-color-red-500">Texte en rouge</span>, ' +
+      '<span class="ui-editor-highlight-orange-100">surligné en orange clair</span> ' +
+      'et du texte normal.</p>',
+  ),
+  args: {
+    label: 'Contenu',
+    tools: ['bold', 'italic', 'separator', 'textColor', 'highlightColor'],
+  },
+};
+
 export const ToolbarBottom: Story = {
   render: story('<p>La barre d’outils est sous la zone de saisie.</p>'),
   args: { label: 'Message', toolbarPosition: 'bottom' },
diff --git a/projects/ui-kit/forms/ui-swatch-picker/ng-package.json b/projects/ui-kit/forms/ui-swatch-picker/ng-package.json
new file mode 100644
index 00000000..21bb12c1
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["../../styles"]
+  }
+}
diff --git a/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.html b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.html
new file mode 100644
index 00000000..c91dc842
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.html
@@ -0,0 +1,60 @@
+<!-- Picker panel: shared between inline render and the CDK overlay popup. -->
+<ng-template #panelTpl>
+  <div
+    #panel
+    [class]="panelClasses()"
+    [attr.id]="uid"
+    [uiMotion]="'slide-down'"
+    [motionOnInsert]="popup()"
+  >
+    <!-- ARIA listbox pattern: keyboard delegated to the container, focus lives
+         on the options (roving tabindex). -->
+    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+    <div
+      class="ui-swatch-picker-grid"
+      role="listbox"
+      [attr.aria-label]="ariaLabel() || null"
+      (keydown)="onGridKeydown($event)"
+    >
+      @for (swatch of flatSwatches(); track swatchKey(swatch)) {
+        <button
+          type="button"
+          class="ui-swatch-picker-swatch"
+          [class._selected]="isSelected(swatch)"
+          [class._clear]="swatch.key === null"
+          role="option"
+          [attr.data-key]="swatchKey(swatch)"
+          [attr.aria-selected]="isSelected(swatch)"
+          [attr.aria-label]="swatch.label"
+          [attr.title]="swatch.label"
+          [style.--ui-swatch-picker-swatch-color]="swatch.cssVar ? 'var(' + swatch.cssVar + ')' : null"
+          [attr.tabindex]="swatchKey(swatch) === tabStopKey() ? 0 : -1"
+          (click)="onSwatchClick(swatch)"
+          (focus)="onSwatchFocus(swatch)"
+        >
+          @if (swatch.key === null) {
+            <ui-icon class="ui-swatch-picker-clear-icon" name="slash" size="sm" />
+          }
+        </button>
+      }
+    </div>
+  </div>
+</ng-template>
+
+@if (popup()) {
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="overlayOrigin()!"
+    [cdkConnectedOverlayOpen]="popupOpen()"
+    [cdkConnectedOverlayPositions]="overlayPositions"
+    [cdkConnectedOverlayHasBackdrop]="true"
+    cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+    (backdropClick)="hide()"
+    (overlayOutsideClick)="onPopupOutsideClick()"
+    (detach)="hide()"
+  >
+    <ng-container [ngTemplateOutlet]="panelTpl" />
+  </ng-template>
+} @else {
+  <ng-container [ngTemplateOutlet]="panelTpl" />
+}
diff --git a/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.scss b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.scss
new file mode 100644
index 00000000..4d0f1c85
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.scss
@@ -0,0 +1,109 @@
+@use 'utils';
+@use 'sass:map';
+
+// =====================================================================
+// ui-swatch-picker : co-located styles.
+// =====================================================================
+
+// --- Config (extension points) ----------------------------------------
+$columns: 7; // internal grid columns (mirrors the TS GRID_COLUMNS constant)
+
+/// Taille de la cellule et espacement de la grille, par densité.
+$sizes: (
+  'default': (
+    cell-size: var(--ui-swatch-picker-cell-size, #{utils.rem-calc(32)}),
+    gap: var(--ui-swatch-picker-gap, var(--units-xs)),
+  ),
+  'small': (
+    cell-size: var(--ui-swatch-picker-cell-size-small, #{utils.rem-calc(24)}),
+    gap: var(--ui-swatch-picker-gap-small, var(--units-2xs)),
+  ),
+);
+$size-default: map.get($sizes, 'default'); /// Raccourci vers l'entrée `default` de `$sizes`.
+
+$panel-surface: var(--global-background-default);                              /// Fond opaque du panneau (cohérent avec `ui-menu`).
+$panel-padding: var(--ui-swatch-picker-panel-padding, #{utils.$overlay-panel-padding}); /// Gouttière interne du panneau (**partagée** avec les autres panneaux flottants).
+$swatch-radius: var(--ui-swatch-picker-swatch-radius, var(--radius-xs));        /// Rayon des coins d'une pastille.
+$focus-ring-width: var(--ui-swatch-picker-focus-ring-width, #{utils.$focus-ring-width}); /// Épaisseur de l'anneau de focus.
+$selected-ring-width: var(--ui-swatch-picker-selected-ring-width, var(--stroke-lg)); /// Épaisseur du liseré de sélection.
+$stroke-width: var(--ui-swatch-picker-stroke-width, #{utils.$control-stroke-width}); /// Épaisseur du contour de chaque pastille.
+
+@mixin picker-size($size) {
+  grid-template-columns: repeat($columns, map.get($size, cell-size));
+  gap: map.get($size, gap);
+
+  .ui-swatch-picker-swatch {
+    width: map.get($size, cell-size);
+    height: map.get($size, cell-size);
+  }
+}
+
+.ui-swatch-picker {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: $panel-padding;
+  @include utils.overlay-panel($panel-surface, transparent);
+  border: none;
+
+  // Floating panel (popup): cap to the viewport, like ui-menu.
+  &._popup {
+    width: max-content;
+    max-width: calc(100vw - var(--units-lg));
+    max-height: calc(100vh - var(--units-lg));
+    overflow: auto;
+  }
+
+  &-grid {
+    display: grid;
+    @include picker-size($size-default);
+  }
+
+  &._small &-grid {
+    @include picker-size(map.get($sizes, 'small'));
+  }
+
+  // --- Swatch (color cell) -----------------------------------------------
+  &-swatch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0;
+    border: $stroke-width solid var(--global-border-default);
+    border-radius: $swatch-radius;
+    background-color: var(--ui-swatch-picker-swatch-color, transparent);
+    cursor: pointer;
+    @include utils.control-transition(box-shadow, border-color);
+
+    &:hover:not(:disabled) {
+      border-color: var(--global-border-default-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 $focus-ring-width var(--global-border-focus);
+    }
+
+    // Selected: a distinct ring (never opacity — must survive on every hue).
+    &._selected {
+      box-shadow: inset 0 0 0 $selected-ring-width var(--form-high-stroke-checked);
+    }
+
+    &:focus-visible._selected {
+      box-shadow:
+        inset 0 0 0 $selected-ring-width var(--form-high-stroke-checked),
+        0 0 0 $focus-ring-width var(--global-border-focus);
+    }
+  }
+
+  // "No color" swatch: transparent, diagonal-strike icon.
+  &-swatch._clear {
+    background-color: transparent;
+    color: var(--global-text-muted);
+  }
+
+  &-clear-icon {
+    line-height: 0;
+  }
+}
diff --git a/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.ts b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.ts
new file mode 100644
index 00000000..2609860b
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.ts
@@ -0,0 +1,360 @@
+import {
+  booleanAttribute,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { CdkConnectedOverlay, ConnectedPosition, OverlayModule } from '@angular/cdk/overlay';
+import { UiIcon } from '@4sh/ui-kit/base/ui-icon';
+import { UiMotion } from '@4sh/ui-kit/motion';
+import { closeOnNavigation } from '@4sh/ui-kit/overlay';
+
+/** Density: `default`, or `small` for compact toolbars/popups. */
+export type SwatchPickerSize = 'default' | 'small';
+
+/** One selectable color entry. */
+export interface UiSwatch {
+  /** Stable identifier, also the value carried by `value`/`swatchSelect`. */
+  key: string;
+  /** CSS variable rendering the swatch (e.g. `--primitives-red-500`). */
+  cssVar: string;
+  /** Accessible name (never just the color: sighted/non-sighted parity). */
+  label: string;
+}
+
+/** A labeled section of the grid (rendered as consecutive cells, same columns). */
+export interface UiSwatchGroup {
+  /** Section label (rendered for screen readers via `aria-label` on the group). */
+  label: string;
+  /** Swatches of the section, in row-major (left-to-right, top-to-bottom) order. */
+  swatches: UiSwatch[];
+}
+
+/** @ignore Internal flat entry (real swatch, or the synthetic "no color" one). */
+interface FlatSwatch {
+  key: string | null;
+  cssVar: string | null;
+  label: string;
+}
+
+/** Hue columns of the default palette, dark → light rows. */
+const DEFAULT_HUES: { key: string; label: string }[] = [
+  { key: 'primary', label: 'Primaire' },
+  { key: 'secondary', label: 'Secondaire' },
+  { key: 'green', label: 'Vert' },
+  { key: 'orange', label: 'Orange' },
+  { key: 'red', label: 'Rouge' },
+  { key: 'slate', label: 'Ardoise' },
+  { key: 'grey', label: 'Gris' },
+];
+const DEFAULT_STEPS = [900, 700, 500, 300, 100];
+
+/**
+ * Default palette: a 7×5 grid (7 hues × 5 shades, dark → light) derived from
+ * the `primitives.*` tokens, plus `black`/`white`. Never hardcode a hex here —
+ * every swatch is a semantic pointer to a `--primitives-*` CSS variable, so a
+ * brand rebind (Brand 2 / Brand 3) changes what the grid shows for free.
+ */
+export const DEFAULT_SWATCH_PALETTE: UiSwatchGroup[] = [
+  {
+    label: 'Couleurs',
+    swatches: [
+      ...DEFAULT_STEPS.flatMap((step) =>
+        DEFAULT_HUES.map(
+          (hue): UiSwatch => ({
+            key: `${hue.key}-${step}`,
+            cssVar: `--primitives-${hue.key}-${step}`,
+            label: `${hue.label} ${step}`,
+          }),
+        ),
+      ),
+      { key: 'black', cssVar: '--primitives-black-base', label: 'Noir' },
+      { key: 'white', cssVar: '--primitives-white-base', label: 'Blanc' },
+    ],
+  },
+];
+
+/** Number of columns of the grid — tuned to the default 7-hue palette; a
+ * custom palette wraps onto the same column count. */
+const GRID_COLUMNS = 7;
+
+/** Trigger ↔ panel gap — keep aligned with `$overlay-panel-offset` (ui-config). */
+const OVERLAY_OFFSET = 8;
+
+/** Process-wide counter for unique picker ids (aria wiring). */
+let nextUid = 0;
+
+/**
+ * ui-swatch-picker — headless color grid, static or popup, for a single-value
+ * choice among a `UiSwatchGroup[]` palette (see {@link DEFAULT_SWATCH_PALETTE}).
+ *
+ * No trigger button of its own — same composition contract as {@link UiMenu}:
+ * a caller wires its own `ui-button` to `toggle(event)` / `show(event)` and
+ * reads the selection from `value` (two-way) or `swatchSelect`. Reuses
+ * `ui-menu`'s overlay mechanics (`CdkConnectedOverlay`, auto-flip, scroll
+ * re-position) and the shared `overlay-panel` shell.
+ *
+ * Every swatch is a real `<button>` (`role="option"`, `aria-selected`) inside
+ * a `role="listbox"`; 2D roving-tabindex keyboard navigation (arrows,
+ * Home/End) mirrors `ui-menu`'s roving focus, adapted to a grid.
+ */
+@Component({
+  selector: 'ui-swatch-picker',
+  imports: [NgTemplateOutlet, OverlayModule, UiIcon, UiMotion],
+  templateUrl: './ui-swatch-picker.html',
+  styleUrl: './ui-swatch-picker.scss',
+  host: {
+    '[style.display]': "popup() ? 'contents' : 'block'",
+  },
+})
+export class UiSwatchPicker {
+  /** Palette rendered as sections of swatches (see {@link UiSwatchGroup}). */
+  palette = input<UiSwatchGroup[]>(DEFAULT_SWATCH_PALETTE);
+  /** Selected swatch `key` (two-way bindable), or `null` for "no color". */
+  value = model<string | null>(null);
+  /** Popup mode: the panel opens in an overlay via `toggle(event)` / `show(event)`. */
+  popup = input(false, { transform: booleanAttribute });
+  /** Density: `default`, or `small` for compact toolbars/popups. */
+  size = input<SwatchPickerSize>('small');
+  /** Renders a "no color" swatch at the start of the grid, emitting `null`. */
+  allowClear = input(true, { transform: booleanAttribute });
+  /** Accessible name of the grid (`aria-label` on `role="listbox"`). */
+  ariaLabel = input<string>();
+
+  /** Emitted on user selection (`null` when the "no color" swatch is picked). */
+  swatchSelect = output<UiSwatch | null>();
+  /** Emitted when the popup opens. */
+  opened = output<void>();
+  /** Emitted when the popup closes. */
+  closed = output<void>();
+
+  /** @ignore Panel root (overlay or inline) — keyboard focus queries. */
+  private readonly panelEl = viewChild<ElementRef<HTMLElement>>('panel');
+  /** @ignore The popup's overlay (repositioning on scroll). */
+  private readonly connectedOverlay = viewChild(CdkConnectedOverlay);
+  /** @ignore */
+  private readonly doc = inject(DOCUMENT);
+
+  /** Unique id of the panel (public: wire the trigger's `aria-controls` to it). */
+  readonly uid = `ui-swatch-picker-${nextUid++}`;
+  /** @ignore Popup open state. */
+  protected readonly popupOpen = signal(false);
+  /** @ignore Element the overlay is anchored to (the `toggle(event)` trigger). */
+  protected readonly overlayOrigin = signal<Element | null>(null);
+  /** @ignore Key of the swatch owning the roving tabindex (`''` = the clear
+   * swatch, `undefined` = nothing focused yet). */
+  private readonly focusedKey = signal<string | undefined>(undefined);
+
+  constructor() {
+    // A picker declared in an app shell outlives the routed view: dismiss it
+    // rather than carrying it over to the next page.
+    closeOnNavigation(() => this.hide());
+
+    // Keep the floating panel GLUED to its scrolling anchor: while the popup
+    // is open, re-apply the overlay position on any scroll (the CDK
+    // reposition scroll strategy proved unreliable in zoneless contexts).
+    effect((onCleanup) => {
+      if (!this.popupOpen() || typeof window === 'undefined') return;
+      const handler = () =>
+        setTimeout(() => {
+          // The trigger can be gone while the picker lives on: re-positioning
+          // on a detached origin measures 0×0 and snaps to the top-left corner.
+          if (this.overlayOrigin()?.isConnected === false) {
+            this.hide();
+            return;
+          }
+          this.overlayRef()?.updatePosition();
+        });
+      this.doc.addEventListener('scroll', handler, { capture: true, passive: true });
+      onCleanup(() => this.doc.removeEventListener('scroll', handler, true));
+    });
+  }
+
+  /** @ignore */
+  private overlayRef() {
+    return this.connectedOverlay()?.overlayRef;
+  }
+
+  /** @ignore Below the trigger, flipping above when space is lacking. */
+  protected readonly overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: OVERLAY_OFFSET,
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      offsetY: -OVERLAY_OFFSET,
+    },
+  ];
+
+  /** @ignore Flat, render-ready swatch list (the synthetic "no color" one first). */
+  protected readonly flatSwatches = computed<FlatSwatch[]>(() => {
+    const list: FlatSwatch[] = [];
+    if (this.allowClear()) list.push({ key: null, cssVar: null, label: 'Aucune couleur' });
+    for (const group of this.palette()) {
+      for (const swatch of group.swatches) list.push(swatch);
+    }
+    return list;
+  });
+
+  /** @ignore Keys of the focusable entries, in grid order (roving focus path). Uses `''` as the clear swatch's key (`null` is reserved for "nothing focused"). */
+  private readonly focusableKeys = computed<string[]>(() =>
+    this.flatSwatches().map((s) => s.key ?? ''),
+  );
+
+  /** @ignore Key owning the tab stop: last focused, else the selected value, else first. */
+  protected readonly tabStopKey = computed<string | null>(() => {
+    const keys = this.focusableKeys();
+    if (!keys.length) return null;
+    const focused = this.focusedKey();
+    if (focused !== undefined && keys.includes(focused ?? '')) return focused ?? '';
+    const selected = this.value() ?? '';
+    return keys.includes(selected) ? selected : keys[0];
+  });
+
+  /** @ignore */
+  protected readonly panelClasses = computed(() => {
+    const c = ['ui-swatch-picker'];
+    if (this.size() !== 'default') c.push(`_${this.size()}`);
+    if (this.popup()) c.push('_popup');
+    return c.join(' ');
+  });
+
+  // --- Popup ------------------------------------------------------------
+
+  /** Toggles the popup relative to the event's `currentTarget`. */
+  toggle(event: Event): void {
+    this.popupOpen() ? this.hide() : this.show(event);
+  }
+
+  /** Opens the popup anchored to the event's `currentTarget`. */
+  show(event: Event): void {
+    if (!this.popup() || this.popupOpen()) return;
+    this.overlayOrigin.set((event.currentTarget ?? event.target) as Element);
+    this.popupOpen.set(true);
+    this.opened.emit();
+    this.queueFocusTabStop();
+  }
+
+  /** Closes the popup. */
+  hide(focusTrigger = false): void {
+    if (!this.popupOpen()) return;
+    this.popupOpen.set(false);
+    this.focusedKey.set(undefined);
+    this.closed.emit();
+    if (focusTrigger) (this.overlayOrigin() as HTMLElement | null)?.focus?.();
+  }
+
+  // --- Interactions -------------------------------------------------------
+
+  /** @ignore Swatch key used as `data-key` / DOM id (empty string for "no color"). */
+  protected swatchKey(swatch: FlatSwatch): string {
+    return swatch.key ?? '';
+  }
+
+  /** @ignore Selection state of a swatch. */
+  protected isSelected(swatch: FlatSwatch): boolean {
+    return this.value() === swatch.key;
+  }
+
+  /** @ignore Activation (click / Enter / Space): select, emit, popup auto-close. */
+  protected onSwatchClick(swatch: FlatSwatch): void {
+    this.focusedKey.set(swatch.key ?? '');
+    this.value.set(swatch.key);
+    this.swatchSelect.emit(
+      swatch.key === null || swatch.cssVar === null
+        ? null
+        : { key: swatch.key, cssVar: swatch.cssVar, label: swatch.label },
+    );
+    if (this.popup()) this.hide(true);
+  }
+
+  /** @ignore */
+  protected onSwatchFocus(swatch: FlatSwatch): void {
+    this.focusedKey.set(swatch.key ?? '');
+  }
+
+  /** @ignore 2D roving keyboard navigation (arrow grid, Home/End). */
+  protected onGridKeydown(event: KeyboardEvent): void {
+    const keys = this.focusableKeys();
+    if (!keys.length) return;
+    const currentKey = this.currentFocusKey(event);
+    const index = currentKey !== null ? keys.indexOf(currentKey) : -1;
+    const columns = Math.min(GRID_COLUMNS, keys.length);
+
+    switch (event.key) {
+      case 'ArrowRight':
+        event.preventDefault();
+        this.focusByKey(keys[Math.min(index + 1, keys.length - 1)]);
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.focusByKey(keys[Math.max(index - 1, 0)]);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.focusByKey(keys[Math.min(index + columns, keys.length - 1)]);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.focusByKey(keys[Math.max(index - columns, 0)]);
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.focusByKey(keys[0]);
+        break;
+      case 'End':
+        event.preventDefault();
+        this.focusByKey(keys[keys.length - 1]);
+        break;
+      case 'Escape':
+        if (this.popup()) {
+          event.preventDefault();
+          this.hide(true);
+        }
+        break;
+    }
+  }
+
+  /** @ignore Popup outside interaction. */
+  protected onPopupOutsideClick(): void {
+    this.hide();
+  }
+
+  // --- Internals ----------------------------------------------------------
+
+  /** @ignore Key of the entry currently holding DOM focus. */
+  private currentFocusKey(event: KeyboardEvent): string | null {
+    const el = (event.target as HTMLElement).closest?.('[data-key]');
+    return el?.getAttribute('data-key') ?? this.focusedKey() ?? null;
+  }
+
+  /** @ignore Move DOM focus (and the tab stop) to the entry with the given key. */
+  private focusByKey(key: string | undefined): void {
+    if (key === undefined) return;
+    this.focusedKey.set(key);
+    this.panelEl()
+      ?.nativeElement.querySelector<HTMLElement>(`[data-key="${CSS.escape(key)}"]`)
+      ?.focus();
+  }
+
+  /** @ignore Focus the roving tab stop once the panel is rendered
+   * (macrotask, not rAF: rAF never fires in throttled/background tabs). */
+  private queueFocusTabStop(): void {
+    setTimeout(() => this.focusByKey(this.tabStopKey() ?? undefined));
+  }
+}
diff --git a/projects/ui-kit/forms/ui-swatch-picker/src/public-api.ts b/projects/ui-kit/forms/ui-swatch-picker/src/public-api.ts
new file mode 100644
index 00000000..fce5ef98
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/src/public-api.ts
@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ui-kit/ui-swatch-picker
+ */
+
+export * from './lib/ui-swatch-picker';
diff --git a/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.mdx b/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.mdx
new file mode 100644
index 00000000..b8707147
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.mdx
@@ -0,0 +1,102 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as SwatchPickerStories from './ui-swatch-picker.stories';
+import { ConfigTable } from '../../../../storybook/blocks/config-table';
+
+<Meta of={SwatchPickerStories} />
+
+# ui-swatch-picker
+
+Grille de nuances headless, statique ou **popup**, pour un choix de couleur
+unique parmi une palette déclarative (`UiSwatchGroup[]`). Sans bouton trigger
+propre — même contrat de composition que
+[`ui-menu`](?path=/docs/components-ui-navigation-ui-menu--docs) : un appelant
+câble son propre `ui-button` sur `toggle(event)` / `show(event)`, exactement
+comme [`ui-button-split`](?path=/docs/components-ui-actions-ui-button-split--docs)
+le fait avec `ui-menu`.
+
+<Canvas of={SwatchPickerStories.Default} />
+
+## API
+
+<ArgTypes of={SwatchPickerStories} />
+
+Méthodes publiques (mode `popup`) : `toggle(event)`, `show(event)`, `hide(focusTrigger?)`.
+Sorties : `opened` / `closed` (popup) et `swatchSelect` (`UiSwatch | null`).
+
+### UiSwatch / UiSwatchGroup
+
+<table className="doc-table">
+  <thead>
+    <tr><th>Type</th><th>Propriété</th><th>Rôle</th></tr>
+  </thead>
+  <tbody>
+    <tr><td rowSpan="3">`UiSwatch`</td><td>`key`</td><td>Identifiant stable, aussi porté par `value` / `swatchSelect`.</td></tr>
+    <tr><td>`cssVar`</td><td>Variable CSS rendant la pastille (ex. `--primitives-red-500`) — jamais de hex en dur.</td></tr>
+    <tr><td>`label`</td><td>Nom accessible (`aria-label` du bouton) — jamais une simple description de la teinte.</td></tr>
+    <tr><td rowSpan="2">`UiSwatchGroup`</td><td>`label`</td><td>Libellé de la section.</td></tr>
+    <tr><td>`swatches`</td><td>Pastilles de la section, en ordre de grille (gauche → droite, haut → bas).</td></tr>
+  </tbody>
+</table>
+
+## Palette par défaut
+
+`DEFAULT_SWATCH_PALETTE` (export nommé) est une grille 7×5 : 7 teintes
+(`primary`, `secondary`, `green`, `orange`, `red`, `slate`, `grey`) × 5 paliers
+(`900` → `100`, foncé → clair), plus `black`/`white` en fin de grille. Chaque
+pastille pointe vers une variable `--primitives-{teinte}-{palier}` — jamais une
+couleur figée : un rebind de marque (Brand 2 / Brand 3) change la grille sans
+recompilation du composant.
+
+```ts
+import { DEFAULT_SWATCH_PALETTE, UiSwatchGroup } from '@4sh/ui-kit/forms/ui-swatch-picker';
+```
+
+## Aucune couleur (`allowClear`)
+
+Une pastille dédiée (icône barrée) est ajoutée en tête de grille quand
+`allowClear` (défaut `true`) : elle sélectionne `value = null` et émet
+`swatchSelect(null)`.
+
+<Canvas of={SwatchPickerStories.WithClear} />
+
+## Densité (`size`)
+
+<Canvas of={SwatchPickerStories.Small} />
+
+## Popup
+
+`popup` + la méthode `toggle(event)` : le panneau s'ouvre dans un **overlay
+CDK** ancré sous l'élément déclencheur (retournement automatique au-dessus
+quand la place manque), fermeture au clic extérieur, à `Échap` (focus rendu au
+déclencheur) et après sélection d'une pastille.
+
+```html
+<ui-button label="Couleur" (buttonClick)="picker.toggle($event)"
+  [buttonProps]="{ 'aria-haspopup': 'listbox', 'aria-controls': picker.uid }" />
+<ui-swatch-picker #picker popup ariaLabel="Couleur du texte" (swatchSelect)="onSelect($event)" />
+```
+
+<Canvas of={SwatchPickerStories.Popup} />
+
+## Accessibilité
+
+<table className="doc-table">
+  <thead>
+    <tr><th>Point</th><th>Implémentation</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Rôles</td><td>`role="listbox"` → `role="option"` sur de **vrais** `<button>` (jamais de `div` cliquable), `aria-selected` sur la pastille sélectionnée.</td></tr>
+    <tr><td>Nom accessible</td><td>`aria-label` par pastille = son `label` (jamais une description de la couleur elle-même — parité voyant / non-voyant) ; `ariaLabel` sur la grille.</td></tr>
+    <tr><td>Clavier</td><td>Roving tabindex 2D : `←`/`→`/`↑`/`↓` déplacent le focus dans la grille, `Début`/`Fin` vont au premier/dernier, `Entrée`/`Espace` sélectionnent (activation native du `<button>`), `Échap` ferme le popup.</td></tr>
+    <tr><td>Sélection</td><td>Marquage visuel **distinct** (liseré `--form-high-stroke-checked`, jamais une opacité — doit rester lisible sur chaque teinte) + `aria-selected="true"`.</td></tr>
+    <tr><td>Focus</td><td>`:focus-visible` distinct du hover (anneau `--global-border-focus`). Ouverture popup → focus sur le tab stop courant (sélection, sinon première pastille) ; fermeture → retour au déclencheur.</td></tr>
+  </tbody>
+</table>
+
+## Theming
+
+Variables **locales** de `ui-swatch-picker.scss` (voir aussi la
+[configuration Global UI](?path=/docs/components-configuration-global-ui--docs) et le
+[fonctionnement général](?path=/docs/components-configuration--docs)) :
+
+<ConfigTable of="ui-swatch-picker" />
diff --git a/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories.ts b/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories.ts
new file mode 100644
index 00000000..d65577e4
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories.ts
@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { signal } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { UiSwatchPicker, UiSwatch } from '@4sh/ui-kit/forms/ui-swatch-picker';
+import { UiButton } from '@4sh/ui-kit/actions/ui-button';
+
+const meta: Meta<UiSwatchPicker> = {
+  title: 'Components/ui/forms/ui-swatch-picker',
+  component: UiSwatchPicker,
+  decorators: [
+    moduleMetadata({
+      imports: [UiSwatchPicker, UiButton, JsonPipe],
+    }),
+  ],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    palette: {
+      control: false,
+      description:
+        'Palette rendue en sections de pastilles (`UiSwatchGroup[]`). Par défaut : `DEFAULT_SWATCH_PALETTE` (7 teintes × 5 nuances + noir/blanc, dérivée des tokens `primitives.*`).',
+      table: { type: { summary: 'UiSwatchGroup[]' }, defaultValue: { summary: 'DEFAULT_SWATCH_PALETTE' } },
+    },
+    value: {
+      control: false,
+      description: '`key` de la pastille sélectionnée (two-way bindable), ou `null` pour « Aucune couleur ».',
+      table: { type: { summary: 'string | null' }, defaultValue: { summary: 'null' } },
+    },
+    popup: {
+      control: false,
+      description:
+        'Mode popup : le panneau s’ouvre dans un overlay via `toggle(event)` / `show(event)`.',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['default', 'small'],
+      description: 'Densité de la grille.',
+      table: { type: { summary: "'default' | 'small'" }, defaultValue: { summary: "'small'" } },
+    },
+    allowClear: {
+      control: { type: 'boolean' },
+      description: 'Affiche une pastille « Aucune couleur » en tête de grille.',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'true' } },
+    },
+    ariaLabel: {
+      control: { type: 'text' },
+      description: 'Nom accessible de la grille (`aria-label` sur `role="listbox"`).',
+      table: { type: { summary: 'string' }, defaultValue: { summary: 'undefined' } },
+    },
+  },
+  args: {
+    size: 'small',
+    allowClear: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<UiSwatchPicker>;
+
+const box = (inner: string, width = 320) => `<div style="max-width:${width}px">${inner}</div>`;
+
+// --- Default -------------------------------------------------------------
+// Rendu inline (pas de popup) : visible sans interaction.
+export const Default: Story = {
+  render: (args) => {
+    const value = signal<string | null>('red-500');
+    return {
+      props: { ...args, value, setValue: (v: string | null) => value.set(v) },
+      template: box(`
+        <ui-swatch-picker [size]="size" [allowClear]="allowClear" [value]="value()"
+          (valueChange)="setValue($event)" ariaLabel="Couleurs" />
+        <p>Sélection : <strong>{{ value() ?? '—' }}</strong></p>
+      `),
+    };
+  },
+};
+
+// --- Small -----------------------------------------------------------------
+export const Small: Story = {
+  render: (args) => ({
+    props: { ...args, size: 'small' },
+    template: box(`<ui-swatch-picker size="small" [allowClear]="allowClear" ariaLabel="Couleurs" />`),
+  }),
+};
+
+// --- WithClear ---------------------------------------------------------------
+// `allowClear` (défaut true) ajoute la pastille « Aucune couleur » en tête.
+export const WithClear: Story = {
+  render: (args) => {
+    const value = signal<string | null>(null);
+    return {
+      props: { ...args, value, setValue: (v: string | null) => value.set(v) },
+      template: box(`
+        <ui-swatch-picker [size]="size" allowClear [value]="value()"
+          (valueChange)="setValue($event)" ariaLabel="Couleurs" />
+        <pre style="font-size:12px">value = {{ value() | json }}</pre>
+      `),
+    };
+  },
+};
+
+// --- Popup -----------------------------------------------------------------
+// Sans bouton trigger propre : un `ui-button` externe pilote `toggle(event)`,
+// exactement comme `ui-button-split` pilote son `ui-menu` popup.
+export const Popup: Story = {
+  render: (args) => {
+    const selected = signal<UiSwatch | null>(null);
+    return {
+      props: {
+        ...args,
+        onSelect: (swatch: UiSwatch | null) => selected.set(swatch),
+        selected,
+      },
+      template: box(`
+        <ui-button label="Couleur" icon="palette" (buttonClick)="picker.toggle($event)"
+          [buttonProps]="{ 'aria-haspopup': 'listbox', 'aria-controls': picker.uid }" />
+        <ui-swatch-picker #picker popup [size]="size" [allowClear]="allowClear"
+          ariaLabel="Couleur du texte" (swatchSelect)="onSelect($event)" />
+        <p>Dernière sélection : <strong>{{ selected()?.label ?? '—' }}</strong></p>
+      `),
+    };
+  },
+};

From 3482d2e02926cbc20b97b4292698967a984e8475 Mon Sep 17 00:00:00 2001
From: LBU <louis.baizeau@4sh.fr>
Date: Wed, 26 Aug 2026 10:41:29 +0200
Subject: [PATCH 2/8] FSHSP-160 fix(editor): fix blockFormat default value and
 select-trigger chevron, add text alignment

- Fix blockFormat opening blank until the caret had touched the content:
  readBlockFormat() depends on document.queryCommandValue, which reflects
  the live selection only. New readInitialBlockFormat() reads the first
  child's tag once after the initial render instead (falls back to `p`).
- Fix the fontFamily/fontSize trigger chevron sticking to the label instead
  of the field's edge: the width/justify-content rules targeted the
  <ui-button> host (inline by default, ignores min-inline-size), not the
  inner .ui-button element that actually lays out icon+label. Now targets
  it via ::ng-deep and makes the host inline-flex.
- Add alignLeft/alignCenter/alignRight/alignJustify tools: execCommand
  passthrough (justifyLeft/Center/Right/Full), toggle-tracked like
  bold/italic/underline (browser guarantees mutual exclusion via
  queryCommandState), in DEFAULT_EDITOR_TOOLS.
---
 CHANGELOG.md                                  | 29 +++++++++++
 .../ui-editor/src/lib/ui-editor-commands.ts   | 51 ++++++++++++++++++-
 .../forms/ui-editor/src/lib/ui-editor.scss    | 16 +++++-
 .../forms/ui-editor/src/lib/ui-editor.ts      |  6 +++
 projects/ui-kit/forms/ui-editor/ui-editor.mdx | 13 ++++-
 .../forms/ui-editor/ui-editor.stories.ts      | 16 ++++++
 6 files changed, 127 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b5b1a43..dcd80917 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -79,6 +79,15 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
   - `allowClear` (défaut `true`) ajoute une pastille « Aucune couleur » émettant
     `value = null` / `swatchSelect(null)`.
 
+- **`ui-editor` : outils `alignLeft`/`alignCenter`/`alignRight`/`alignJustify`** (FSHSP-160).
+  Quatre nouveaux `EditorButtonTool`, passthrough `execCommand('justifyLeft'|'justifyCenter'|
+  'justifyRight'|'justifyFull')` — contrairement à `indent`/`outdent`, ce sont des bascules
+  (`EditorToggleTool`) : le navigateur garantit lui-même leur exclusion mutuelle
+  (`queryCommandState`), donc elles suivent le même modèle `EditorState`/`aria-pressed` que
+  gras/italique/souligné plutôt que celui d'un menu. **Dans `DEFAULT_EDITOR_TOOLS`** (à la
+  différence de `fontSize`/`indent`/`outdent`/`textColor`/`highlightColor` : l'alignement est un
+  outil de mise en forme standard, pas un doublon d'un autre contrôle).
+
 ### Changed
 
 - **`ui-editor` : les listes `fontFamily`/`fontSize` passent du `<select>` natif à un menu popup**
@@ -124,6 +133,26 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 - **`ui-datepicker` : `allowInput` couvre maintenant `range` et `multiple`** (FSHSP-118), en complément de la grille (le clic continue de fonctionner à l'identique). `range` se tape dans le même champ, les deux dates séparées par `" - "` (ex. `"08/07/2026 - 18/07/2026"`) ; `multiple` accepte une liste séparée par `", "`, nombre de dates non borné. `range` bénéficie du même masque auto-"/" en direct qu'en mode `single` (les deux dates, puis leur séparateur, se construisent au fil de la frappe) ; `multiple`, dont le nombre de dates n'est pas borné, reste en texte libre, parsé au blur/Entrée uniquement — dans les deux cas avec les mêmes garanties qu'en `single` : une entrée incomplète ou invalide revient à la dernière valeur affichée, une plage tapée dans le désordre est réordonnée chronologiquement (comme un second clic dans la grille), une date dupliquée en `multiple` est supprimée (comme un clic sur une case déjà sélectionnée). Un `parseDate` custom s'applique par date individuelle, symétrique de `dateFormat`. Non couvert : la combinaison avec `showTime` (les dates tapées en `range`/`multiple` sont toujours calées à minuit — seule la grille gère l'heure sur ces modes pour l'instant).
 - **Un utilitaire global `.sr-only`** dans la feuille de helpers publiée (section « Visibility ») : rend un texte visible des seuls lecteurs d'écran, pour nommer une colonne ou une action dont l'affichage ne montre rien. Ajouté pour les en-têtes de colonne vides des tableaux (`<th>` d'une colonne de sélection ou d'expansion), où `aria-label` ne suffit pas : `empty-table-header` exige du texte réellement présent. Quatre composants du kit recopient déjà ce bloc dans leur propre SCSS (`ui-datepicker`, `ui-select`, `ui-file-upload`, `ui-read-only`) — ils pourront s'appuyer dessus.
 
+### Fixed
+
+- **`ui-editor` : `blockFormat` s'ouvrait vide tant que le curseur n'avait jamais touché la
+  zone de saisie** (FSHSP-160). `readBlockFormat()` lit le niveau via
+  `document.queryCommandValue('formatBlock')`, qui reflète la **sélection courante** — inexistante
+  avant le premier focus, donc `currentBlock` restait à `null` et le `<select>` s'ouvrait blanc
+  au lieu d'annoncer « Normal », même quand le contenu initial en avait un. Nouvelle
+  `readInitialBlockFormat()`, appelée une fois après le premier rendu : lit directement la balise
+  du premier enfant du contenu (repli sur `p` si l'éditeur est vide ou commence par du texte nu),
+  sans dépendre d'une sélection.
+
+- **`ui-editor` : le chevron des déclencheurs `fontFamily`/`fontSize` restait collé au texte au
+  lieu du bord du champ** (FSHSP-160). Le `min-inline-size`/`justify-content: space-between`
+  visant cet espacement était posé sur `<ui-button>`, l'élément hôte — `inline` par défaut,
+  qui ignore `min-inline-size` (propriété sans effet sur un élément en ligne non remplacé), et
+  dont le seul enfant (le `<button>` interne, qui porte le vrai flex layout icône/libellé) ne
+  s'étirait de toute façon pas à sa largeur. Le correctif cible directement cet enfant
+  (`::ng-deep .ui-button { inline-size: 100%; justify-content: space-between }`), et l'hôte
+  passe en `display: inline-flex` pour que `min-inline-size` s'applique enfin.
+
 ### Changed
 
 - **`ui-datepicker` : la plage sélectionnée (`range`) se lit comme une seule zone continue** (FSHSP-166). Elle était peinte sur la cellule elle-même — fond en dégradé mi-cellule sur les deux extrémités, filets haut et bas en bordure — ce qui la faisait _encadrer_ la sélection plutôt que la porter, avec deux débordements visibles : les filets couraient sur toute la largeur des cellules de début et de fin, donc au-delà de la moitié réellement remplie, et la pastille des jours de début/fin, dont la bordure transparente s'ajoutait à sa taille (`content-box`), dépassait la hauteur de la bande. La bande est désormais une couche à part, exactement de la hauteur d'une pastille et arrêtée au centre des deux extrémités : plus rien ne peut la dépasser, ni en hauteur ni sur les côtés. Les filets sont retirés, et seuls les deux bouts d'une ligne de semaine sont arrondis — sur le retrait qu'une pastille laisse dans sa colonne, pas sur le bord de la cellule, pour qu'une plage finissant sur la dernière colonne s'aligne avec la rangée du dessus au lieu de s'arrêter une demi-gouttière trop tôt. Et une date de début dont la fin n'est pas encore choisie n'affiche plus de demi-bande partant vers une extrémité qui n'existe pas : la pastille reste seule jusqu'au second clic. Deux nouveaux réglages, `--ui-datepicker-range-background` et `--ui-datepicker-range-color`, permettent de re-skinner la bande et le chiffre qu'elle porte (voir la table « Theming » de la doc).
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
index 668bf0b3..17063a3f 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
@@ -28,6 +28,10 @@ export type EditorTool =
   | 'fontSize'
   | 'indent'
   | 'outdent'
+  | 'alignLeft'
+  | 'alignCenter'
+  | 'alignRight'
+  | 'alignJustify'
   | 'textColor'
   | 'highlightColor'
   | 'link'
@@ -49,7 +53,16 @@ export const EDITOR_SELECT_TOOLS: readonly EditorSelectTool[] = [
 /** Commands whose active/inactive state the toolbar reflects via `aria-pressed`. */
 export type EditorToggleTool = Extract<
   EditorTool,
-  'bold' | 'italic' | 'underline' | 'bulletList' | 'orderedList' | 'codeBlock'
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'bulletList'
+  | 'orderedList'
+  | 'codeBlock'
+  | 'alignLeft'
+  | 'alignCenter'
+  | 'alignRight'
+  | 'alignJustify'
 >;
 
 /** Active formatting at the caret, recomputed after every interaction. */
@@ -161,6 +174,21 @@ export function readBlockFormat(): EditorBlock | null {
   }
 }
 
+/**
+ * Best-effort block level for content that has never had the caret in it.
+ *
+ * `readBlockFormat` reads the live selection via `queryCommandValue`, which is
+ * empty before the editor is ever focused — so on first render the dropdown
+ * showed nothing, even though the content already has a definite structure (or,
+ * for an empty editor, will get a plain paragraph the moment typing starts).
+ * This reads the tag of the first element child directly instead, falling back
+ * to `p` when the editor is empty or starts with plain text.
+ */
+export function readInitialBlockFormat(root: HTMLElement): EditorBlock | null {
+  const tag = root.firstElementChild?.tagName.toLowerCase() ?? 'p';
+  return BLOCK_KEYS.has(tag) ? (tag as EditorBlock) : null;
+}
+
 const FONT_CLASSES = new Set(EDITOR_FONTS.map((f) => f.className));
 
 /**
@@ -182,6 +210,11 @@ export const DEFAULT_EDITOR_TOOLS: readonly EditorTool[] = [
   'bulletList',
   'orderedList',
   'separator',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
+  'separator',
   'link',
   'codeBlock',
   'clearFormat',
@@ -197,6 +230,10 @@ export const EDITOR_TOOL_META: Record<EditorButtonTool, { icon: string; label: s
   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' },
@@ -215,6 +252,10 @@ const NATIVE_COMMAND: Record<
   orderedList: 'insertOrderedList',
   indent: 'indent',
   outdent: 'outdent',
+  alignLeft: 'justifyLeft',
+  alignCenter: 'justifyCenter',
+  alignRight: 'justifyRight',
+  alignJustify: 'justifyFull',
   clearFormat: 'removeFormat',
 };
 
@@ -224,6 +265,10 @@ const TOGGLE_TOOLS: readonly Exclude<EditorToggleTool, 'codeBlock'>[] = [
   'underline',
   'bulletList',
   'orderedList',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
 ];
 
 /** Every state off — the value used before the first render and on SSR. */
@@ -235,6 +280,10 @@ export function emptyEditorState(): EditorState {
     bulletList: false,
     orderedList: false,
     codeBlock: false,
+    alignLeft: false,
+    alignCenter: false,
+    alignRight: false,
+    alignJustify: false,
   };
 }
 
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
index f423cb1f..d3aba2bd 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
@@ -154,11 +154,25 @@ $editor-color-steps: 900, 700, 500, 300, 100;
   // `fontFamily`/`fontSize` triggers (ui-button, host-level only — the panel
   // itself is `ui-menu`'s own scoped style).
   &-select-trigger {
+    // `<ui-button>` is inline by default: without a flex/box context of its
+    // own `min-inline-size` on a non-replaced inline element is ignored, so
+    // the trigger silently kept hugging its label instead of reaching the
+    // width below.
+    display: inline-flex;
     flex-shrink: 0;
     // Same fixed width as `&-select`, so the toolbar keeps its layout when a
     // longer value is picked instead of shifting every tool that follows.
     min-inline-size: $select-trigger-width;
-    justify-content: space-between;
+
+    // `justify-content` on the host only spaces its own (single) flex child —
+    // the label/chevron pair is laid out *inside* that child, ui-button's own
+    // `.ui-button` element, which centers them by default. Reaching into it is
+    // the only way to pin the chevron at the field's edge instead of right
+    // after the label.
+    ::ng-deep .ui-button {
+      inline-size: 100%;
+      justify-content: space-between;
+    }
   }
 
   // `textColor`/`highlightColor` triggers: a liseré under the icon shows the
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
index 49b5685f..533ab698 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
@@ -60,6 +60,7 @@ import {
   readFontFamily,
   readFontSize,
   readHighlightColor,
+  readInitialBlockFormat,
   readTextColor,
   removeLink,
   resolveFontLabel,
@@ -287,6 +288,11 @@ export class UiEditor extends BaseFormField<string> {
       this.fonts.set(
         EDITOR_FONTS.map((f) => ({ ...f, label: resolveFontLabel(f.cssVar, f.label) })),
       );
+      // `readBlockFormat` reads the live caret, which does not exist yet: read
+      // the initial content's own structure once instead, so `blockFormat`
+      // does not open on a blank dropdown before the first click.
+      const el = this.contentEl()?.nativeElement;
+      if (el) this.currentBlock.set(readInitialBlockFormat(el));
     });
     // Sync the DOM when the value comes from outside (form write, reset).
     effect(() => {
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.mdx b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
index 346641c2..581b6671 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.mdx
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
@@ -32,8 +32,8 @@ saisie multiligne **sans mise en forme** →
 
 `tools` liste les outils rendus, dans l'ordre. La valeur `separator` insère un séparateur visuel.
 Outils disponibles : `blockFormat`, `fontFamily`, `fontSize`, `bold`, `italic`, `underline`,
-`bulletList`, `orderedList`, `indent`, `outdent`, `textColor`, `highlightColor`, `link`,
-`codeBlock`, `clearFormat`.
+`bulletList`, `orderedList`, `indent`, `outdent`, `alignLeft`, `alignCenter`, `alignRight`,
+`alignJustify`, `textColor`, `highlightColor`, `link`, `codeBlock`, `clearFormat`.
 
 <Canvas of={EditorStories.MinimalToolbar} />
 <Canvas of={EditorStories.ToolbarBottom} />
@@ -116,6 +116,15 @@ sont **absents de la barre par défaut** et s'ajoutent explicitement via `tools`
 
 <Canvas of={EditorStories.IndentOutdent} />
 
+### Alignement
+
+`alignLeft`/`alignCenter`/`alignRight`/`alignJustify` sont, comme gras/italique/souligné, un
+passthrough `execCommand('justify*')` dont le navigateur garantit lui-même l'exclusion mutuelle :
+appliquer l'un remet les autres à `false`. Ils suivent donc le même modèle `EditorState` /
+`aria-pressed` que les bascules, pas celui d'un menu, et sont **dans la barre par défaut**.
+
+<Canvas of={EditorStories.TextAlign} />
+
 ### Couleur du texte / de surlignage
 
 `textColor`/`highlightColor` ouvrent chacun un
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
index 3c0b765f..5954773e 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
@@ -242,6 +242,22 @@ export const IndentOutdent: Story = {
   },
 };
 
+/**
+ * `alignLeft`/`alignCenter`/`alignRight`/`alignJustify` sont dans la barre par
+ * défaut : passthrough `execCommand('justify*')`, mutuellement exclusifs par
+ * construction du navigateur (appliquer l'un désactive l'état des autres), donc
+ * ils suivent le même modèle `aria-pressed` que gras/italique/souligné plutôt
+ * que celui d'un menu.
+ */
+export const TextAlign: Story = {
+  render: story(
+    '<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>',
+  ),
+  args: { label: 'Contenu' },
+};
+
 /**
  * `textColor`/`highlightColor` ne sont **pas** dans la barre par défaut (même
  * logique d'opt-in que `fontSize`/`indent`/`outdent`). Chacun ouvre son propre

From 02dcdb928ee2b3bdfcc87b6ac0a4e15fffbec428 Mon Sep 17 00:00:00 2001
From: LBU <louis.baizeau@4sh.fr>
Date: Wed, 26 Aug 2026 11:07:27 +0200
Subject: [PATCH 3/8] FSHSP-160 fix(editor)!: remove blockFormat, make fontSize
 a default tool
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Finish removing blockFormat (started uncommitted): the tool, EditorBlock,
  EDITOR_BLOCKS, applyBlockFormat/readBlockFormat/readInitialBlockFormat are
  gone. The editor only ever produces <p> now — no H1-H3 from the toolbar.
  BREAKING for any `tools` list still referencing 'blockFormat'.
- Fix the template left broken by that in-progress removal: the select-tool
  branch rendered both ui-menu popups unconditionally, on every select entry,
  with no trigger button at all — fontFamily/fontSize were unreachable.
  Restored one ui-button trigger + the matching single ui-menu per entry.
- Move fontSize into DEFAULT_EDITOR_TOOLS: it was opt-in only to avoid
  duplicating blockFormat on screen, a reason that no longer applies.
- Drop the now-dead native <select> CSS/SCSS variables and the onSelectChange/
  selectValue leftovers that only existed for blockFormat's <select>.
- Update stories/mdx: drop the Headings story (nothing left to demonstrate),
  fold FontMenus into the now-default FontFamily/FontSize stories, rewrite
  the toolbar section to describe two default selectors instead of three.
---
 CHANGELOG.md                                  |  22 ++--
 .../ui-editor/src/lib/ui-editor-commands.ts   |  67 +----------
 .../forms/ui-editor/src/lib/ui-editor.html    | 104 +++++++-----------
 .../forms/ui-editor/src/lib/ui-editor.scss    |  37 +------
 .../forms/ui-editor/src/lib/ui-editor.ts      |  94 +++-------------
 projects/ui-kit/forms/ui-editor/ui-editor.mdx |  57 +++-------
 .../forms/ui-editor/ui-editor.stories.ts      |  58 ++--------
 7 files changed, 109 insertions(+), 330 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dcd80917..787c91ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -90,14 +90,22 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 
 ### Changed
 
-- **`ui-editor` : les listes `fontFamily`/`fontSize` passent du `<select>` natif à un menu popup**
-  (FSHSP-160). Rendu désormais en déclencheur `ui-button` (ghost, `size="small"`) glué à un
+- **`ui-editor` : les sélecteurs `fontFamily`/`fontSize` passent du `<select>` natif à un menu
+  popup** (FSHSP-160). Rendu désormais en déclencheur `ui-button` (ghost, `size="small"`) glué à un
   `ui-menu` en mode `popup [size]="small"`, même pattern que `ui-button-split` — cohérent
-  visuellement avec le reste de la barre d'outils et du kit. `blockFormat` reste un `<select>`
-  natif, hors périmètre de ce changement. Le déclencheur affiche la valeur en vigueur (comme
-  l'ancien `<select>`) et porte un nom accessible qui la reprend (`aria-label` combiné, ex.
-  « Police : Inter ») puisqu'un `ariaLabel` explicite sur `ui-button` remplace tout le contenu
-  visible dans le nom accessible.
+  visuellement avec le reste de la barre d'outils et du kit. Le déclencheur affiche la valeur en
+  vigueur (comme l'ancien `<select>`) et porte un nom accessible qui la reprend (`aria-label`
+  combiné, ex. « Police : Inter ») puisqu'un `ariaLabel` explicite sur `ui-button` remplace tout le
+  contenu visible dans le nom accessible.
+
+- **`ui-editor` : suppression de `blockFormat`, `fontSize` désormais dans la barre par défaut**
+  (FSHSP-160). Plus de sélecteur de niveau de bloc (Normal/Titre 1-3) : l'éditeur ne produit plus
+  que des `<p>`, aucun titre H1-H3 n'est accessible depuis la barre d'outils. `EditorBlock`,
+  `EDITOR_BLOCKS`, `applyBlockFormat`/`readBlockFormat` et le tool `blockFormat` sont retirés de
+  l'API publique — **breaking change** pour tout `tools` listant `'blockFormat'`. `fontSize`
+  n'était auparavant pas dans `DEFAULT_EDITOR_TOOLS` (opt-in, pour éviter le doublon visuel avec
+  `blockFormat`) ; cette raison n'existe plus, `fontSize` rejoint `fontFamily` en outil de premier
+  rang, toujours actif.
 
 - **`ui-editor` — éditeur de texte riche, sans moteur tiers** (FSHSP-160). Le kit s'arrêtait à `ui-textarea` : dès qu'un projet avait besoin de gras, de listes ou d'un lien dans un champ libre, il installait Quill ou TipTap et repartait avec un champ qui ne ressemble à aucun autre du formulaire. `ui-editor` couvre ce besoin en restant dans les règles du kit : bâti sur le shell `ui-field` en mode multiligne, il partage le libellé, la boîte, les niveaux, le helper et la validation avec les huit autres champs, et n'ajoute **aucune dépendance runtime** — les commandes de mise en forme s'appuient sur l'API d'édition native du navigateur, isolée dans `ui-editor-commands` pour qu'un futur moteur ne se substitue qu'à ce fichier.
   - **Barre d'outils configurable** : `tools` liste les outils rendus, dans l'ordre (`bold`, `italic`, `underline`, `bulletList`, `orderedList`, `link`, `clearFormat`, plus `separator`), et `toolbarPosition` la place au-dessus ou sous la zone de saisie. Elle forme **un seul arrêt de tabulation** (`role="toolbar"`, roving tabindex : ⭠ ⭢, `Home`/`End`, `Échap` rend le focus à la saisie) ; les bascules portent un `aria-pressed` recalculé à chaque déplacement du curseur, les actions ponctuelles n'en portent pas. Cliquer un outil ne déplace pas le focus et préserve la sélection. Les raccourcis `Ctrl`/`Cmd` + `B`/`I`/`U` sont pris en charge nativement, l'état de la barre suit.
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
index 17063a3f..370d6136 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
@@ -23,7 +23,6 @@ export type EditorTool =
   | 'bulletList'
   | 'orderedList'
   | 'codeBlock'
-  | 'blockFormat'
   | 'fontFamily'
   | 'fontSize'
   | 'indent'
@@ -39,13 +38,12 @@ export type EditorTool =
   | 'separator';
 
 /** Tools rendered as a dropdown: they pick among values instead of toggling one. */
-export type EditorSelectTool = 'blockFormat' | 'fontFamily' | 'fontSize';
+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[] = [
-  'blockFormat',
   'fontFamily',
   'fontSize',
 ];
@@ -135,73 +133,18 @@ export const EDITOR_SIZES: readonly { key: EditorSize; className: string; label:
 
 const SIZE_CLASSES = new Set(EDITOR_SIZES.map((s) => s.className));
 
-/**
- * Block levels the editor can apply — the "Normal / Titre" dropdown.
- *
- * Distinct from the font family: this one sets what the block *is* (a heading
- * carries document structure, and screen readers navigate by it), while the font
- * only changes how it looks.
- */
-export type EditorBlock = 'p' | 'h1' | 'h2' | 'h3';
-
-/** Block tag → French label for the dropdown. */
-export const EDITOR_BLOCKS: readonly { key: EditorBlock; label: string }[] = [
-  { key: 'p', label: 'Normal' },
-  { key: 'h1', label: 'Titre 1' },
-  { key: 'h2', label: 'Titre 2' },
-  { key: 'h3', label: 'Titre 3' },
-];
-
-const BLOCK_KEYS = new Set<string>(EDITOR_BLOCKS.map((b) => b.key));
-
-/** Applies a block level to the block under the caret. */
-export function applyBlockFormat(tag: EditorBlock): void {
-  document.execCommand('formatBlock', false, tag);
-}
-
-/**
- * Block level under the caret, or `null` when it is something else.
- *
- * `null` covers the code block and list items, which the dropdown does not offer:
- * showing "Normal" there would misreport what the caret actually sits in.
- */
-export function readBlockFormat(): EditorBlock | null {
-  try {
-    const value = (document.queryCommandValue('formatBlock') || '').toLowerCase();
-    return BLOCK_KEYS.has(value) ? (value as EditorBlock) : null;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Best-effort block level for content that has never had the caret in it.
- *
- * `readBlockFormat` reads the live selection via `queryCommandValue`, which is
- * empty before the editor is ever focused — so on first render the dropdown
- * showed nothing, even though the content already has a definite structure (or,
- * for an empty editor, will get a plain paragraph the moment typing starts).
- * This reads the tag of the first element child directly instead, falling back
- * to `p` when the editor is empty or starts with plain text.
- */
-export function readInitialBlockFormat(root: HTMLElement): EditorBlock | null {
-  const tag = root.firstElementChild?.tagName.toLowerCase() ?? 'p';
-  return BLOCK_KEYS.has(tag) ? (tag as EditorBlock) : null;
-}
-
 const FONT_CLASSES = new Set(EDITOR_FONTS.map((f) => f.className));
 
 /**
  * The tools enabled when the consumer does not provide a `tools` list.
  *
- * `fontSize` is deliberately absent: it would duplicate `blockFormat` on screen —
- * both make text bigger — while only the latter carries document structure.
- * Leaving both in the default bar invites headings made of merely large text.
- * It stays available for a project that explicitly asks for it in `tools`.
+ * 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.
  */
 export const DEFAULT_EDITOR_TOOLS: readonly EditorTool[] = [
-  'blockFormat',
   'fontFamily',
+  'fontSize',
   'separator',
   'bold',
   'italic',
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
index b9569f00..77de477b 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
@@ -14,7 +14,7 @@
 >
   <div class="ui-editor" [class._small]="size() === 'small'" [style.--_rows]="minRows()">
     @if (toolbarPosition() === 'top') {
-      <ng-container [ngTemplateOutlet]="toolbarTpl" />
+      <ng-container [ngTemplateOutlet]="toolbarTpl"/>
     }
 
     <div class="ui-editor-area">
@@ -50,7 +50,7 @@
     </div>
 
     @if (toolbarPosition() === 'bottom') {
-      <ng-container [ngTemplateOutlet]="toolbarTpl" />
+      <ng-container [ngTemplateOutlet]="toolbarTpl"/>
     }
   </div>
 
@@ -75,7 +75,7 @@
   @if (hasToolbar()) {
     <!-- ARIA toolbar pattern: keyboard delegated to the role="toolbar" container,
          focus lives on the items (roving tabindex), same as ui-menu. -->
-    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
     <div
       #toolbarEl
       class="ui-editor-toolbar"
@@ -90,70 +90,46 @@
         @if (entry.isSeparator) {
           <span class="ui-editor-toolbar-separator" aria-hidden="true"></span>
         } @else if (entry.select; as select) {
-          @if (select === 'blockFormat') {
-            <!-- A picker, not a toggle: the dropdown takes the focus, so the
-                 command restores the caret before it runs. -->
-            <select
-              class="ui-editor-select"
-              [attr.aria-label]="selectLabel(select)"
-              [disabled]="!isEditable()"
-              [value]="selectValue(select)"
-              [attr.tabindex]="entry.index === tabStop() ? 0 : -1"
-              (mousedown)="$event.stopPropagation()"
-              (change)="onSelectChange(select, $event, entry.index)"
-            >
-              <!-- Blank entry, only reachable for the block level: when the
-                   caret sits in a code block or a list item there is no honest
-                   level to show, and claiming "Normal" would be wrong. -->
-              <option value="" disabled></option>
-              @for (block of blocks; track block.key) {
-                <option [value]="block.key" [selected]="selectValue(select) === block.key">
-                  {{ block.label }}
-                </option>
-              }
-            </select>
+          <!-- Trigger + popup menu (same pattern as ui-button-split): the
+               dropdown takes the focus, so the command restores the caret
+               before it runs. -->
+          <ui-button
+            class="ui-editor-tool ui-editor-select-trigger"
+            variant="ghost"
+            level="low"
+            size="small"
+            icon="chevron-down"
+            iconPos="right"
+            [label]="selectDisplayLabel(select)"
+            [ariaLabel]="selectTriggerAriaLabel(select)"
+            [disabled]="!isEditable()"
+            [tabindex]="entry.index === tabStop() ? 0 : -1"
+            [buttonProps]="{
+              'aria-haspopup': 'menu',
+              'aria-expanded': selectMenuOpen(select) ? 'true' : 'false',
+            }"
+            (buttonClick)="onSelectMenuTrigger(select, entry.index, $event)"
+          />
+          @if (select === 'fontFamily') {
+            <ui-menu
+              #fontFamilyMenu
+              popup
+              size="small"
+              [items]="fontFamilyMenuItems()"
+              [ariaLabel]="selectLabel(select)"
+              (opened)="fontFamilyMenuOpen.set(true)"
+              (closed)="fontFamilyMenuOpen.set(false)"
+            />
           } @else {
-            <!-- Trigger + popup menu (same pattern as ui-button-split): the
-                 dropdown takes the focus, so the command restores the caret
-                 before it runs. -->
-            <ui-button
-              class="ui-editor-tool ui-editor-select-trigger"
-              variant="ghost"
-              level="low"
+            <ui-menu
+              #fontSizeMenu
+              popup
               size="small"
-              icon="chevron-down"
-              iconPos="right"
-              [label]="selectDisplayLabel(select)"
-              [ariaLabel]="selectTriggerAriaLabel(select)"
-              [disabled]="!isEditable()"
-              [tabindex]="entry.index === tabStop() ? 0 : -1"
-              [buttonProps]="{
-                'aria-haspopup': 'menu',
-                'aria-expanded': selectMenuOpen(select) ? 'true' : 'false',
-              }"
-              (buttonClick)="onSelectMenuTrigger(select, entry.index, $event)"
+              [items]="fontSizeMenuItems()"
+              [ariaLabel]="selectLabel(select)"
+              (opened)="fontSizeMenuOpen.set(true)"
+              (closed)="fontSizeMenuOpen.set(false)"
             />
-            @if (select === 'fontFamily') {
-              <ui-menu
-                #fontFamilyMenu
-                popup
-                size="small"
-                [items]="fontFamilyMenuItems()"
-                [ariaLabel]="selectLabel(select)"
-                (opened)="fontFamilyMenuOpen.set(true)"
-                (closed)="fontFamilyMenuOpen.set(false)"
-              />
-            } @else {
-              <ui-menu
-                #fontSizeMenu
-                popup
-                size="small"
-                [items]="fontSizeMenuItems()"
-                [ariaLabel]="selectLabel(select)"
-                (opened)="fontSizeMenuOpen.set(true)"
-                (closed)="fontSizeMenuOpen.set(false)"
-              />
-            }
           }
         } @else {
           <ui-button
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
index d3aba2bd..d6c51332 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
@@ -23,17 +23,9 @@ $toolbar-surface: var(--ui-editor-toolbar-surface, var(--global-background-muted
 $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.
 
-// `blockFormat` only from here on — `fontFamily`/`fontSize` render a
-// `ui-button` trigger + `ui-menu` popup instead (see `&-select-trigger`).
-$select-padding-x: var(--ui-editor-select-padding-x, var(--units-xs));                     /// Inset horizontal de la liste déroulante du niveau de texte.
-$select-font-size: var(--ui-editor-select-font-size, var(--size-typography-text-md));      /// Taille de police de la liste déroulante.
-$select-color: var(--ui-editor-select-color, var(--form-high-content-default));            /// Couleur de la liste déroulante.
-$select-radius: var(--ui-editor-select-radius, var(--radius-2xs));                         /// Rayon des coins de la liste déroulante.
-// `ch` rather than a measured px: it scales with $select-font-size instead of
-// guessing a pixel count for the longest label ("Titre 3").
-$select-width: var(--ui-editor-select-width, 13ch);                                        /// Largeur de la liste déroulante, identique à celle des menus popup.
-
-$select-trigger-width: var(--ui-editor-select-trigger-width, 13ch); /// Largeur d'un déclencheur de menu popup (police, taille), identique à celle de la liste déroulante.
+// `fontFamily`/`fontSize` render a `ui-button` trigger + `ui-menu` popup —
+// no native `<select>` left in the toolbar (see `&-select-trigger`).
+$select-trigger-width: var(--ui-editor-select-trigger-width, 13ch); /// Largeur d'un déclencheur de menu popup (police, taille).
 
 $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.
@@ -128,29 +120,6 @@ $editor-color-steps: 900, 700, 500, 300, 100;
     }
   }
 
-  // --- Dropdown (block level) ------------------------------------------
-  &-select {
-    flex-shrink: 0;
-    // Fixed, and the same for every dropdown: sized on the content it has to
-    // fit, so the toolbar keeps its layout when a longer value is picked
-    // instead of shifting every button that follows.
-    inline-size: $select-width;
-    padding-inline: $select-padding-x;
-    border: none;
-    border-radius: $select-radius;
-    background: transparent;
-    font-family: var(--fontfamily-base);
-    font-size: $select-font-size;
-    color: $select-color;
-    cursor: pointer;
-    text-overflow: ellipsis;
-    @include utils.control-transition(background-color);
-
-    &:hover:not(:disabled) { background-color: var(--form-low-surface-hover); }
-    &:focus-visible { outline: $separator-width solid var(--global-border-focus); }
-    &:disabled { cursor: not-allowed; color: var(--form-high-content-disabled); }
-  }
-
   // `fontFamily`/`fontSize` triggers (ui-button, host-level only — the panel
   // itself is `ui-menu`'s own scoped style).
   &-select-trigger {
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
index 533ab698..2b2dc6f9 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
@@ -13,16 +13,15 @@ import {
   signal,
   viewChild,
 } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DomSanitizer } from '@angular/platform-browser';
-import { BaseFormField } from '@4sh/ui-kit/forms';
-import { UiField } from '@4sh/ui-kit/forms/ui-field';
-import { UiButton } from '@4sh/ui-kit/actions/ui-button';
-import { UiMenu, UiMenuItem } from '@4sh/ui-kit/navigation/ui-menu';
-import { UiSwatch, UiSwatchPicker } from '@4sh/ui-kit/forms/ui-swatch-picker';
+import {NgTemplateOutlet} from '@angular/common';
+import {NG_VALUE_ACCESSOR} from '@angular/forms';
+import {DomSanitizer} from '@angular/platform-browser';
+import {BaseFormField} from '@4sh/ui-kit/forms';
+import {UiField} from '@4sh/ui-kit/forms/ui-field';
+import {UiButton} from '@4sh/ui-kit/actions/ui-button';
+import {UiMenu, UiMenuItem} from '@4sh/ui-kit/navigation/ui-menu';
+import {UiSwatch, UiSwatchPicker} from '@4sh/ui-kit/forms/ui-swatch-picker';
 import {
-  applyBlockFormat,
   applyCommand,
   applyFontFamily,
   applyFontSize,
@@ -35,14 +34,12 @@ import {
   convertHighlightMarkers,
   convertSizeMarkers,
   DEFAULT_EDITOR_TOOLS,
-  EDITOR_BLOCKS,
   EDITOR_COLORS,
   EDITOR_FONTS,
   EDITOR_HIGHLIGHTS,
   EDITOR_SELECT_TOOLS,
   EDITOR_SIZES,
   EDITOR_TOOL_META,
-  EditorBlock,
   EditorButtonTool,
   EditorFont,
   EditorSelectTool,
@@ -55,12 +52,10 @@ import {
   insertText,
   isEmptyHtml,
   normalizeHtml,
-  readBlockFormat,
   readEditorState,
   readFontFamily,
   readFontSize,
   readHighlightColor,
-  readInitialBlockFormat,
   readTextColor,
   removeLink,
   resolveFontLabel,
@@ -159,8 +154,6 @@ export class UiEditor extends BaseFormField<string> {
   protected readonly currentTextColor = signal<string | null>(null);
   /** @ignore Highlight color at the caret (`null` = no highlight). */
   protected readonly currentHighlightColor = signal<string | null>(null);
-  /** @ignore Block level at the caret (`null` = neither a paragraph nor a heading). */
-  protected readonly currentBlock = signal<EditorBlock | null>(null);
   /** @ignore Index of the toolbar button reachable with Tab (roving tabindex). */
   protected readonly activeTool = signal(0);
   /** @ignore Open state of the `fontFamily` popup (drives its trigger's `aria-expanded`). */
@@ -220,8 +213,6 @@ export class UiEditor extends BaseFormField<string> {
           : EDITOR_TOOL_META[tool as EditorButtonTool],
     })),
   );
-  /** @ignore Block levels offered by the `blockFormat` dropdown. */
-  protected readonly blocks = EDITOR_BLOCKS;
   /** @ignore Text sizes offered by the `fontSize` dropdown. */
   protected readonly sizes = EDITOR_SIZES;
   /**
@@ -288,11 +279,6 @@ export class UiEditor extends BaseFormField<string> {
       this.fonts.set(
         EDITOR_FONTS.map((f) => ({ ...f, label: resolveFontLabel(f.cssVar, f.label) })),
       );
-      // `readBlockFormat` reads the live caret, which does not exist yet: read
-      // the initial content's own structure once instead, so `blockFormat`
-      // does not open on a blank dropdown before the first click.
-      const el = this.contentEl()?.nativeElement;
-      if (el) this.currentBlock.set(readInitialBlockFormat(el));
     });
     // Sync the DOM when the value comes from outside (form write, reset).
     effect(() => {
@@ -388,7 +374,6 @@ export class UiEditor extends BaseFormField<string> {
     this.currentSize.set(readFontSize(anchor));
     this.currentTextColor.set(readTextColor(anchor));
     this.currentHighlightColor.set(readHighlightColor(anchor));
-    this.currentBlock.set(readBlockFormat());
 
     const next = readEditorState();
     const prev = this.state();
@@ -489,29 +474,11 @@ export class UiEditor extends BaseFormField<string> {
     this.onInput();
   }
 
-  /**
-   * @ignore Applies the block level chosen in the `blockFormat` dropdown.
-   *
-   * The dropdown took the focus, so the caret is put back first. `fontFamily`
-   * and `fontSize` no longer go through here — they run as popup-menu commands
-   * (see {@link onSelectMenuTrigger}, {@link selectFontFamily}).
-   */
-  protected onSelectChange(tool: EditorSelectTool, event: Event, index: number): void {
-    const value = (event.target as HTMLSelectElement).value;
-    this.activeTool.set(index);
-    if (!this.isEditable() || !value || tool !== 'blockFormat') return;
-
-    this.restoreSelection();
-    applyBlockFormat(value as EditorBlock);
-    this.onInput();
-  }
-
   /**
    * @ignore Trigger click: mark the tool active, then toggle its popup menu.
    *
-   * Only reachable for `fontFamily`/`fontSize` (see the template's `@else`
-   * branch of `select === 'blockFormat'`) — `tool` still spans the whole
-   * dropdown union so the template's narrowing stays optional.
+   * `fontFamily` and `fontSize` are the only select-style tools left (there is
+   * no block-level dropdown), so `tool` narrows the same as `entry.select`.
    */
   protected onSelectMenuTrigger(tool: EditorSelectTool, index: number, event: MouseEvent): void {
     this.activeTool.set(index);
@@ -559,26 +526,8 @@ export class UiEditor extends BaseFormField<string> {
     this.onInput();
   }
 
-  /**
-   * @ignore Current value of a dropdown, so it reflects the caret.
-   *
-   * Family and size fall back to the value actually in force: text carrying no
-   * class really is rendered with `--fontfamily-base` at the default size, so
-   * naming them states a fact rather than a placeholder.
-   *
-   * The block level has no such fallback. When the caret sits in something the
-   * list does not offer — a code block, a list item — there is no honest value to
-   * show, and claiming "Normal" would invite a click that reformats the block.
-   */
-  protected selectValue(tool: EditorSelectTool): string {
-    if (tool === 'blockFormat') return this.currentBlock() ?? '';
-    if (tool === 'fontFamily') return this.currentFont() ?? 'base';
-    return this.currentSize() ?? 'default';
-  }
-
   /** @ignore Accessible name of a dropdown — spelled out, it is never truncated. */
   protected selectLabel(tool: EditorSelectTool): string {
-    if (tool === 'blockFormat') return 'Niveau de texte';
     if (tool === 'fontFamily') return 'Police';
     return 'Taille du texte';
   }
@@ -586,9 +535,9 @@ export class UiEditor extends BaseFormField<string> {
   /**
    * @ignore Label shown on the `fontFamily`/`fontSize` popup triggers.
    *
-   * Reads the value actually in force at the caret, same fallback rule as
-   * {@link selectValue}: text carrying no class really is rendered with
-   * `--fontfamily-base` at the default size.
+   * Falls back to the value actually in force when no class was applied: text
+   * carrying no class really is rendered with `--fontfamily-base` at the
+   * default size, so naming it states a fact rather than a placeholder.
    */
   protected selectDisplayLabel(tool: EditorSelectTool): string {
     if (tool === 'fontFamily') {
@@ -611,15 +560,6 @@ export class UiEditor extends BaseFormField<string> {
     return `${this.selectLabel(tool)} : ${this.selectDisplayLabel(tool)}`;
   }
 
-  /**
-   * @ignore The dropdown shows no value at all.
-   *
-   * Only reachable for the block level (see {@link selectValue}). Left blank
-   * rather than labelled with the control's own name: the closed state is where
-   * the current formatting is read, not where the control introduces itself.
-   */
-  protected readonly hasNoValue = computed(() => this.currentBlock() === null);
-
   /**
    * @ignore v1 link flow: the native prompt.
    *
@@ -676,13 +616,13 @@ export class UiEditor extends BaseFormField<string> {
   /**
    * @ignore Moves the DOM focus onto the control now holding the tab stop.
    *
-   * Queried from the live toolbar rather than from the `ui-button` children: the
-   * ring mixes buttons and the font `<select>`, and DOM order is the visual order.
+   * Queried from the live toolbar rather than from the `ui-button` children:
+   * DOM order is the visual order, and every tool (buttons and select-menu
+   * triggers alike) renders as a `<button>`.
    */
   private focusTool(index: number): void {
     const position = this.toolbar().filter((e) => !e.isSeparator && e.index <= index).length - 1;
-    const controls =
-      this.toolbarEl()?.nativeElement.querySelectorAll<HTMLElement>('button, select');
+    const controls = this.toolbarEl()?.nativeElement.querySelectorAll<HTMLElement>('button');
     controls?.[position]?.focus();
   }
 
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.mdx b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
index 581b6671..1233dbbf 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.mdx
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
@@ -31,9 +31,10 @@ saisie multiligne **sans mise en forme** →
 ## Barre d'outils
 
 `tools` liste les outils rendus, dans l'ordre. La valeur `separator` insère un séparateur visuel.
-Outils disponibles : `blockFormat`, `fontFamily`, `fontSize`, `bold`, `italic`, `underline`,
-`bulletList`, `orderedList`, `indent`, `outdent`, `alignLeft`, `alignCenter`, `alignRight`,
-`alignJustify`, `textColor`, `highlightColor`, `link`, `codeBlock`, `clearFormat`.
+Outils disponibles : `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 `<p>`, il n'y a pas de titre H1-H3 à choisir depuis la barre.
 
 <Canvas of={EditorStories.MinimalToolbar} />
 <Canvas of={EditorStories.ToolbarBottom} />
@@ -49,45 +50,25 @@ par construction.
 
 <Canvas of={EditorStories.CodeBlock} />
 
-### Les trois sélecteurs de valeur
+### Police et taille
 
-`blockFormat`, `fontFamily` et `fontSize` choisissent parmi des valeurs au lieu d'en basculer une.
-Ils ne partagent plus le même rendu : `blockFormat` reste un `<select>` natif, tandis que
-`fontFamily`/`fontSize` s'ouvrent désormais en popup — un déclencheur `ui-button` (ghost,
-`size="small"`) glué à un `ui-menu` `popup [size]="small"`, même pattern que
-[`ui-button-split`](?path=/docs/components-ui-actions-ui-button-split--docs).
-
-| Sélecteur     | Rôle                                                                          | Rendu                          | Par défaut |
-| ------------- | ------------------------------------------------------------------------------ | ------------------------------- | ---------- |
-| `blockFormat` | **Ce que le bloc est** : Normal, Titre 1, Titre 2, Titre 3 (`<p>`, `<h1-h3>`)   | `<select>` natif                | oui        |
-| `fontFamily`  | **La famille de caractères** appliquée au texte sélectionné                    | `ui-button` + `ui-menu` en popup | oui        |
-| `fontSize`    | **La taille** d'une portion : Petit, Normal, Grand, Très grand                 | `ui-button` + `ui-menu` en popup | non        |
-
-Le niveau et la police sont deux choses distinctes : un titre porte la **structure** du document —
-un lecteur d'écran navigue de titre en titre — là où la police ne change que l'apparence. Mettre la
-police de titre sur un paragraphe n'en fait pas un titre.
+`fontFamily` et `fontSize` choisissent parmi des valeurs au lieu d'en basculer une, tous deux
+**dans la barre par défaut, à égalité** — ni l'un ni l'autre n'est une option gardée derrière
+`tools`. Il n'y a pas de sélecteur de niveau de bloc : l'éditeur ne produit que des `<p>`, aucun
+titre H1-H3 n'est accessible depuis la barre.
 
-`fontSize` **n'est pas dans la barre par défaut**, et c'est délibéré : à l'écran il fait doublon
-avec `blockFormat` — les deux grossissent le texte — mais lui seul est purement décoratif. Les
-proposer côte à côte revient à inviter des titres qui n'en sont pas, et donc des documents sans
-structure. Il reste disponible pour un projet qui l'ajoute explicitement à `tools`, par exemple
-pour mettre en avant une portion de texte sans en faire un titre.
+Chacun se rend en déclencheur `ui-button` (ghost, `size="small"`) glué à un `ui-menu`
+`popup [size]="small"`, même pattern que
+[`ui-button-split`](?path=/docs/components-ui-actions-ui-button-split--docs).
 
-Chaque sélecteur affiche **la valeur en vigueur**, jamais son propre nom : au repos on lit
+Chaque déclencheur affiche **la valeur en vigueur**, jamais son propre nom : au repos on lit
 « Normal » et « Inter », c'est-à-dire ce que le texte utilise réellement. La police est lue sur le
-rendu effectif, pas devinée — dans un titre le sélecteur affiche « DM Sans », puisque c'est la
-fonte que le titre porte. Le nom de chaque sélecteur reste disponible pour les lecteurs d'écran :
-en `aria-label` sur le `<select>` de `blockFormat`, combiné au nom du déclencheur
-(« Police : Inter ») sur les popups `fontFamily`/`fontSize` — sinon la valeur affichée à l'écran
-disparaîtrait du nom accessible, qu'un `aria-label` explicite remplace entièrement sur un
-`ui-button`.
-
-Seule exception, `blockFormat` n'affiche **aucune** valeur quand le curseur est dans un bloc qu'il
-ne propose pas (bloc de code, élément de liste) : il n'y a là rien d'honnête à afficher, et
-annoncer « Normal » inviterait un clic qui reformaterait le bloc.
+rendu effectif, pas devinée. Le nom de chaque sélecteur reste disponible pour les lecteurs d'écran
+via un `aria-label` combiné (« Police : Inter ») — sinon la valeur affichée à l'écran disparaîtrait
+du nom accessible, qu'un `aria-label` explicite remplace entièrement sur un `ui-button`.
 
-Les trois sélecteurs ont tous la **même largeur, fixe** : une largeur ajustée au contenu ferait
-sauter la barre entière à chaque changement de valeur.
+Les deux déclencheurs ont la **même largeur, fixe** : une largeur ajustée au contenu ferait sauter
+la barre entière à chaque changement de valeur.
 
 Les choix sont **fermés aux tokens** : `--fontfamily-base` / `--fontfamily-title` /
 `--fontfamily-monospace` pour la famille, l'échelle `--size-typography-text-*` pour la taille. Un
@@ -103,10 +84,8 @@ jamais en style en ligne : la valeur reste liée au token, et rebinder celui-ci
 contenu déjà saisi avec lui. Ces classes sont les seules que la liste blanche laisse passer au
 collage.
 
-<Canvas of={EditorStories.Headings} />
 <Canvas of={EditorStories.FontFamily} />
 <Canvas of={EditorStories.FontSize} />
-<Canvas of={EditorStories.FontMenus} />
 
 ### Indentation
 
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
index 5954773e..bba8f69a 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
@@ -36,7 +36,7 @@ const meta: Meta<UiEditor> = {
     tools: {
       control: 'object',
       description:
-        "Outils affichés dans la barre, dans l'ordre (`separator` = séparateur ; `blockFormat`, `fontFamily` et `fontSize` sont des listes déroulantes).",
+        "Outils affichés dans la barre, dans l'ordre (`separator` = séparateur ; `fontFamily` et `fontSize` sont des menus popup, pas des boutons).",
       table: {
         type: { summary: 'EditorTool[]' },
         defaultValue: { summary: 'DEFAULT_EDITOR_TOOLS' },
@@ -116,7 +116,7 @@ export default meta;
 type Story = StoryObj<UiEditor>;
 
 // --- Template-driven ([(ngModel)]) --------------------------------------
-const TEMPLATE = `<div style="width:640px"><ui-editor
+const TEMPLATE = `<div style="width:750px"><ui-editor
     [(ngModel)]="model"
     [label]="label" [helperText]="helperText" [errorText]="errorText" [placeholder]="placeholder"
     [tools]="tools" [minRows]="minRows" [maxlength]="maxlength" [showCount]="showCount"
@@ -163,12 +163,14 @@ export const CodeBlock: Story = {
 };
 
 /**
- * Le choix de police est **fermé aux trois familles du système**
+ * `fontFamily` et `fontSize` sont tous deux **dans la barre par défaut**, à
+ * égalité : ni l'un ni l'autre n'est une option gardée derrière `tools`. Le
+ * choix de police est fermé aux trois familles du système
  * (`--fontfamily-base`, `--fontfamily-title`, `--fontfamily-monospace`), et la
- * taille à l'échelle `--size-typography-text-*`. Chaque liste se rend en
- * déclencheur `ui-button` + popup `ui-menu` (`size="small"`, même pattern que
- * `ui-button-split`), et affiche le nom réel de la fonte en vigueur, lu depuis
- * le token à l'exécution.
+ * taille à l'échelle `--size-typography-text-*`. Chacun se rend en déclencheur
+ * `ui-button` + popup `ui-menu` (`size="small"`, même pattern que
+ * `ui-button-split`), et affiche la valeur en vigueur au repos — la police lit
+ * le nom réel de la fonte, résolu depuis le token à l'exécution.
  */
 export const FontFamily: Story = {
   render: story(
@@ -179,52 +181,14 @@ export const FontFamily: Story = {
   args: { label: 'Contenu' },
 };
 
-/**
- * `fontSize` n'est **pas** dans la barre par défaut : il ferait doublon avec
- * `blockFormat` à l'écran, sans porter la structure du document. Il s'ajoute
- * explicitement quand un projet en a besoin.
- */
+/** Les quatre tailles de l'échelle `--size-typography-text-*`. */
 export const FontSize: Story = {
   render: story(
     '<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>',
   ),
-  args: {
-    label: 'Contenu',
-    tools: ['blockFormat', 'fontFamily', 'fontSize', 'separator', 'bold', 'italic'],
-  },
-};
-
-/**
- * Les deux menus popup côte à côte : `fontFamily` et `fontSize` ouvrent chacun
- * leur propre `ui-menu` (`popup`, `size="small"`) ancré à un bouton `ui-button`
- * affichant la valeur en vigueur au repos.
- */
-export const FontMenus: Story = {
-  render: story(
-    '<p><span class="ui-editor-font-title ui-editor-size-lg">Titre en grand</span></p>' +
-      '<p>Paragraphe en police et taille par défaut.</p>' +
-      '<p><span class="ui-editor-font-monospace ui-editor-size-sm">const x = 1;</span></p>',
-  ),
-  args: {
-    label: 'Contenu',
-    tools: ['fontFamily', 'fontSize', 'separator', 'bold', 'italic', 'underline'],
-  },
-};
-
-/**
- * `blockFormat` change ce que le bloc **est**, pas seulement son apparence : un
- * titre porte la structure du document, et un lecteur d'écran navigue de titre en
- * titre.
- */
-export const Headings: Story = {
-  render: story(
-    '<h1>Titre de niveau 1</h1><p>Un paragraphe.</p>' +
-      '<h2>Titre de niveau 2</h2><p>Un autre paragraphe.</p>' +
-      '<h3>Titre de niveau 3</h3><p>Encore un.</p>',
-  ),
-  args: { label: 'Article', minRows: 8 },
+  args: { label: 'Contenu' },
 };
 
 /**

From 890071e13512fd076665e41f00f9525145a92ca3 Mon Sep 17 00:00:00 2001
From: LBU <louis.baizeau@4sh.fr>
Date: Wed, 26 Aug 2026 15:14:46 +0200
Subject: [PATCH 4/8] FSHSP-160 fix(editor): switch fontFamily/fontSize to
 ui-select, fix clearFormat

- Finish switching fontFamily/fontSize from the ui-button+ui-menu popup
  pattern to ui-select (started uncommitted): one <ui-select size="small">
  per select-tool, [ngModel]-bound to the current value, (valueChange)
  applying the font/size command. Drops the now-dead ui-menu/UiMenuItem
  wiring, viewChilds, open-state signals and trigger-label helpers.
- Fix "Effacer le formatage" leaving font/size/color/highlight in place:
  removeFormat only strips native inline formatting, never the editor's own
  <span class="ui-editor-*"> wrappers. New clearFormatMarkers() unwraps them
  across the current selection, run alongside the native command.
- Update stories/mdx/changelog to match (ui-select, not ui-menu popup); drop
  the now-stale blockFormat/chevron Fixed entries superseded by this work.
---
 CHANGELOG.md                                  |  34 ++--
 .../ui-editor/src/lib/ui-editor-commands.ts   |  16 ++
 .../forms/ui-editor/src/lib/ui-editor.html    |  47 ++----
 .../forms/ui-editor/src/lib/ui-editor.scss    |  38 ++---
 .../forms/ui-editor/src/lib/ui-editor.ts      | 149 +++++++-----------
 projects/ui-kit/forms/ui-editor/ui-editor.mdx |  19 +--
 .../forms/ui-editor/ui-editor.stories.ts      |   7 +-
 7 files changed, 118 insertions(+), 192 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 787c91ca..9b23d4e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -90,13 +90,10 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 
 ### Changed
 
-- **`ui-editor` : les sélecteurs `fontFamily`/`fontSize` passent du `<select>` natif à un menu
-  popup** (FSHSP-160). Rendu désormais en déclencheur `ui-button` (ghost, `size="small"`) glué à un
-  `ui-menu` en mode `popup [size]="small"`, même pattern que `ui-button-split` — cohérent
-  visuellement avec le reste de la barre d'outils et du kit. Le déclencheur affiche la valeur en
-  vigueur (comme l'ancien `<select>`) et porte un nom accessible qui la reprend (`aria-label`
-  combiné, ex. « Police : Inter ») puisqu'un `ariaLabel` explicite sur `ui-button` remplace tout le
-  contenu visible dans le nom accessible.
+- **`ui-editor` : les sélecteurs `fontFamily`/`fontSize` passent du `<select>` natif à
+  `ui-select`** (FSHSP-160). Rendu en `ui-select` `size="small"`, lié à la valeur en vigueur via
+  `[ngModel]` et nommé pour les lecteurs d'écran via `ariaLabel` — cohérent avec le reste du kit,
+  qui n'a qu'un seul composant de dropdown de valeurs.
 
 - **`ui-editor` : suppression de `blockFormat`, `fontSize` désormais dans la barre par défaut**
   (FSHSP-160). Plus de sélecteur de niveau de bloc (Normal/Titre 1-3) : l'éditeur ne produit plus
@@ -143,23 +140,12 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 
 ### Fixed
 
-- **`ui-editor` : `blockFormat` s'ouvrait vide tant que le curseur n'avait jamais touché la
-  zone de saisie** (FSHSP-160). `readBlockFormat()` lit le niveau via
-  `document.queryCommandValue('formatBlock')`, qui reflète la **sélection courante** — inexistante
-  avant le premier focus, donc `currentBlock` restait à `null` et le `<select>` s'ouvrait blanc
-  au lieu d'annoncer « Normal », même quand le contenu initial en avait un. Nouvelle
-  `readInitialBlockFormat()`, appelée une fois après le premier rendu : lit directement la balise
-  du premier enfant du contenu (repli sur `p` si l'éditeur est vide ou commence par du texte nu),
-  sans dépendre d'une sélection.
-
-- **`ui-editor` : le chevron des déclencheurs `fontFamily`/`fontSize` restait collé au texte au
-  lieu du bord du champ** (FSHSP-160). Le `min-inline-size`/`justify-content: space-between`
-  visant cet espacement était posé sur `<ui-button>`, l'élément hôte — `inline` par défaut,
-  qui ignore `min-inline-size` (propriété sans effet sur un élément en ligne non remplacé), et
-  dont le seul enfant (le `<button>` interne, qui porte le vrai flex layout icône/libellé) ne
-  s'étirait de toute façon pas à sa largeur. Le correctif cible directement cet enfant
-  (`::ng-deep .ui-button { inline-size: 100%; justify-content: space-between }`), et l'hôte
-  passe en `display: inline-flex` pour que `min-inline-size` s'applique enfin.
+- **`ui-editor` : « Effacer le formatage » laissait police/taille/couleur/surlignage en place**
+  (FSHSP-160). `clearFormat` s'appuie sur `document.execCommand('removeFormat')`, qui ne connaît
+  que la mise en forme native du navigateur (gras, italique, souligné…) — jamais les
+  `<span class="ui-editor-*">` que `fontFamily`/`fontSize`/`textColor`/`highlightColor` écrivent.
+  Nouvelle `clearFormatMarkers()`, appelée en plus de la commande native : déshabille ces classes
+  sur toute la sélection courante (même mécanisme que le « Aucune couleur » des nuanciers).
 
 ### Changed
 
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
index 370d6136..1bbef607 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
@@ -461,6 +461,22 @@ export function clearMarkerClass(root: ParentNode, range: Range, className: stri
   }
 }
 
+/**
+ * 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,
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
index 77de477b..fd723a63 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
@@ -90,47 +90,20 @@
         @if (entry.isSeparator) {
           <span class="ui-editor-toolbar-separator" aria-hidden="true"></span>
         } @else if (entry.select; as select) {
-          <!-- Trigger + popup menu (same pattern as ui-button-split): the
-               dropdown takes the focus, so the command restores the caret
-               before it runs. -->
-          <ui-button
-            class="ui-editor-tool ui-editor-select-trigger"
-            variant="ghost"
-            level="low"
+          <!-- The dropdown takes the focus, so the command restores the caret
+               before it runs (see onSelectValueChange). -->
+          <ui-select
+            class="ui-editor-tool ui-editor-select"
             size="small"
-            icon="chevron-down"
-            iconPos="right"
-            [label]="selectDisplayLabel(select)"
-            [ariaLabel]="selectTriggerAriaLabel(select)"
+            [options]="selectOptions(select)"
+            optionLabel="label"
+            optionValue="value"
+            [ngModel]="selectValue(select)"
+            [ariaLabel]="selectLabel(select)"
             [disabled]="!isEditable()"
             [tabindex]="entry.index === tabStop() ? 0 : -1"
-            [buttonProps]="{
-              'aria-haspopup': 'menu',
-              'aria-expanded': selectMenuOpen(select) ? 'true' : 'false',
-            }"
-            (buttonClick)="onSelectMenuTrigger(select, entry.index, $event)"
+            (valueChange)="onSelectValueChange(select, $event, entry.index)"
           />
-          @if (select === 'fontFamily') {
-            <ui-menu
-              #fontFamilyMenu
-              popup
-              size="small"
-              [items]="fontFamilyMenuItems()"
-              [ariaLabel]="selectLabel(select)"
-              (opened)="fontFamilyMenuOpen.set(true)"
-              (closed)="fontFamilyMenuOpen.set(false)"
-            />
-          } @else {
-            <ui-menu
-              #fontSizeMenu
-              popup
-              size="small"
-              [items]="fontSizeMenuItems()"
-              [ariaLabel]="selectLabel(select)"
-              (opened)="fontSizeMenuOpen.set(true)"
-              (closed)="fontSizeMenuOpen.set(false)"
-            />
-          }
         } @else {
           <ui-button
             class="ui-editor-tool"
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
index d6c51332..1f9d684c 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
@@ -23,9 +23,8 @@ $toolbar-surface: var(--ui-editor-toolbar-surface, var(--global-background-muted
 $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 a `ui-button` trigger + `ui-menu` popup —
-// no native `<select>` left in the toolbar (see `&-select-trigger`).
-$select-trigger-width: var(--ui-editor-select-trigger-width, 13ch); /// Largeur d'un déclencheur de menu popup (police, taille).
+// `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.
@@ -120,28 +119,21 @@ $editor-color-steps: 900, 700, 500, 300, 100;
     }
   }
 
-  // `fontFamily`/`fontSize` triggers (ui-button, host-level only — the panel
-  // itself is `ui-menu`'s own scoped style).
-  &-select-trigger {
-    // `<ui-button>` is inline by default: without a flex/box context of its
-    // own `min-inline-size` on a non-replaced inline element is ignored, so
-    // the trigger silently kept hugging its label instead of reaching the
-    // width below.
+  // `fontFamily`/`fontSize` render as `ui-select` (host-level only — the
+  // field box itself is `ui-select`'s own scoped style).
+  &-select {
+    // `<ui-select>` is inline by default, and its root `.ui-select` is a
+    // block-level box that does not grow to fill a flex row on its own: give
+    // the host a flex context and stretch that single child explicitly (same
+    // fix `&-tool` needed when it used to wrap a `ui-button` trigger).
     display: inline-flex;
     flex-shrink: 0;
-    // Same fixed width as `&-select`, so the toolbar keeps its layout when a
-    // longer value is picked instead of shifting every tool that follows.
-    min-inline-size: $select-trigger-width;
-
-    // `justify-content` on the host only spaces its own (single) flex child —
-    // the label/chevron pair is laid out *inside* that child, ui-button's own
-    // `.ui-button` element, which centers them by default. Reaching into it is
-    // the only way to pin the chevron at the field's edge instead of right
-    // after the label.
-    ::ng-deep .ui-button {
-      inline-size: 100%;
-      justify-content: space-between;
-    }
+    // 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;
+
+    ::ng-deep .ui-select { inline-size: 100%; }
   }
 
   // `textColor`/`highlightColor` triggers: a liseré under the icon shows the
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
index 2b2dc6f9..4753c1a2 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
@@ -14,12 +14,12 @@ import {
   viewChild,
 } from '@angular/core';
 import {NgTemplateOutlet} from '@angular/common';
-import {NG_VALUE_ACCESSOR} from '@angular/forms';
+import {FormsModule, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {DomSanitizer} from '@angular/platform-browser';
 import {BaseFormField} from '@4sh/ui-kit/forms';
 import {UiField} from '@4sh/ui-kit/forms/ui-field';
 import {UiButton} from '@4sh/ui-kit/actions/ui-button';
-import {UiMenu, UiMenuItem} from '@4sh/ui-kit/navigation/ui-menu';
+import {UiSelect} from '@4sh/ui-kit/forms/ui-select';
 import {UiSwatch, UiSwatchPicker} from '@4sh/ui-kit/forms/ui-swatch-picker';
 import {
   applyCommand,
@@ -28,6 +28,7 @@ import {
   applyHighlightColor,
   applyLink,
   applyTextColor,
+  clearFormatMarkers,
   clearMarkerClass,
   convertColorMarkers,
   convertFontMarkers,
@@ -82,7 +83,7 @@ const SHORTCUTS: Record<string, EditorTool> = { b: 'bold', i: 'italic', u: 'unde
  */
 @Component({
   selector: 'ui-editor',
-  imports: [UiField, UiButton, UiMenu, UiSwatchPicker, NgTemplateOutlet],
+  imports: [UiField, UiButton, UiSwatchPicker, UiSelect, NgTemplateOutlet, FormsModule],
   templateUrl: './ui-editor.html',
   styleUrl: './ui-editor.scss',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiEditor), multi: true }],
@@ -125,10 +126,6 @@ export class UiEditor extends BaseFormField<string> {
   private readonly contentEl = viewChild<ElementRef<HTMLElement>>('contentEl');
   /** @ignore The rendered toolbar — holds the roving tabindex ring, in DOM order. */
   private readonly toolbarEl = viewChild<ElementRef<HTMLElement>>('toolbarEl');
-  /** @ignore Font family popup (see {@link onSelectMenuTrigger}). */
-  private readonly fontFamilyMenu = viewChild<UiMenu>('fontFamilyMenu');
-  /** @ignore Font size popup (see {@link onSelectMenuTrigger}). */
-  private readonly fontSizeMenu = viewChild<UiMenu>('fontSizeMenu');
   /** @ignore Text color popup (see {@link onColorToolClick}). */
   private readonly textColorPicker = viewChild<UiSwatchPicker>('textColorPicker');
   /** @ignore Highlight color popup (see {@link onColorToolClick}). */
@@ -156,10 +153,6 @@ export class UiEditor extends BaseFormField<string> {
   protected readonly currentHighlightColor = signal<string | null>(null);
   /** @ignore Index of the toolbar button reachable with Tab (roving tabindex). */
   protected readonly activeTool = signal(0);
-  /** @ignore Open state of the `fontFamily` popup (drives its trigger's `aria-expanded`). */
-  protected readonly fontFamilyMenuOpen = signal(false);
-  /** @ignore Open state of the `fontSize` popup (drives its trigger's `aria-expanded`). */
-  protected readonly fontSizeMenuOpen = signal(false);
   /** @ignore Open state of the `textColor` popup (drives its trigger's `aria-expanded`). */
   protected readonly textColorPickerOpen = signal(false);
   /** @ignore Open state of the `highlightColor` popup (drives its trigger's `aria-expanded`). */
@@ -222,21 +215,13 @@ export class UiEditor extends BaseFormField<string> {
    * hardcoded "Inter" would lie as soon as a project rebinds the token.
    */
   protected readonly fonts = signal(EDITOR_FONTS.map((f) => ({ ...f })));
-  /** @ignore `fontFamily` popup entries — one `command` per family, closed over its key. */
-  protected readonly fontFamilyMenuItems = computed<UiMenuItem[]>(() =>
-    this.fonts().map((font) => ({
-      id: font.key,
-      label: font.label,
-      command: () => this.selectFontFamily(font.key),
-    })),
+  /** @ignore `fontFamily` dropdown options ({@link UiSelect} `optionLabel`/`optionValue`). */
+  protected readonly fontFamilyOptions = computed(() =>
+    this.fonts().map((font) => ({ value: font.key, label: font.label })),
   );
-  /** @ignore `fontSize` popup entries — one `command` per size, closed over its key. */
-  protected readonly fontSizeMenuItems = computed<UiMenuItem[]>(() =>
-    this.sizes.map((size) => ({
-      id: size.key,
-      label: size.label,
-      command: () => this.selectFontSize(size.key),
-    })),
+  /** @ignore `fontSize` dropdown options ({@link UiSelect} `optionLabel`/`optionValue`). */
+  protected readonly fontSizeOptions = computed(() =>
+    this.sizes.map((size) => ({ value: size.key, label: size.label })),
   );
   /** @ignore Swatch entry backing the `textColor` button's color indicator. */
   protected readonly currentTextColorSwatch = computed(() =>
@@ -414,10 +399,29 @@ export class UiEditor extends BaseFormField<string> {
     this.focus();
     if (tool === 'link') this.promptForLink();
     else if (tool === 'codeBlock') toggleCodeBlock();
+    else if (tool === 'clearFormat') this.clearFormat();
     else applyCommand(tool);
     this.onInput();
   }
 
+  /**
+   * @ignore `removeFormat` (the native command behind `clearFormat`) only
+   * strips inline formatting the browser itself applies — bold, italic,
+   * underline… — never the `<span class="ui-editor-*">` wrappers `fontFamily`/
+   * `fontSize`/`textColor`/`highlightColor` write, so those survived
+   * "Effacer le formatage" untouched. Run the native command, then unwrap
+   * those classes too, across whatever is currently selected.
+   */
+  private clearFormat(): void {
+    applyCommand('clearFormat');
+    const el = this.contentEl()?.nativeElement;
+    const selection = document.getSelection();
+    if (!el || !selection?.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    if (!el.contains(range.commonAncestorContainer)) return;
+    clearFormatMarkers(el, range);
+  }
+
   /**
    * @ignore Trigger click for `textColor`/`highlightColor`: opens the matching
    * `ui-swatch-picker` instead of applying a command directly — same
@@ -474,56 +478,21 @@ export class UiEditor extends BaseFormField<string> {
     this.onInput();
   }
 
-  /**
-   * @ignore Trigger click: mark the tool active, then toggle its popup menu.
-   *
-   * `fontFamily` and `fontSize` are the only select-style tools left (there is
-   * no block-level dropdown), so `tool` narrows the same as `entry.select`.
-   */
-  protected onSelectMenuTrigger(tool: EditorSelectTool, index: number, event: MouseEvent): void {
-    this.activeTool.set(index);
-    if (!this.isEditable()) return;
-    if (tool === 'fontFamily') this.fontFamilyMenu()?.toggle(event);
-    else if (tool === 'fontSize') this.fontSizeMenu()?.toggle(event);
-  }
-
-  /** @ignore Whether a popup-menu dropdown is currently open (its trigger's `aria-expanded`). */
-  protected selectMenuOpen(tool: EditorSelectTool): boolean {
-    return tool === 'fontFamily' ? this.fontFamilyMenuOpen() : this.fontSizeMenuOpen();
-  }
-
-  /**
-   * @ignore Applies a type family from the `fontFamily` popup.
-   *
-   * The popup took the focus, so the caret is put back first. `fontName` emits
-   * a legacy `<font>` element, immediately rewritten into a class.
-   */
-  private selectFontFamily(key: EditorFont): void {
-    if (!this.isEditable()) return;
-    const choice = this.fonts().find((f) => f.key === key);
-    if (!choice) return;
-    this.restoreSelection();
-    applyFontFamily();
-    const el = this.contentEl()?.nativeElement;
-    if (el) convertFontMarkers(el, choice.className);
-    this.onInput();
+  /** @ignore Options for a `ui-select` dropdown ({@link UiSelect} `optionLabel`/`optionValue`). */
+  protected selectOptions(tool: EditorSelectTool): { value: string; label: string }[] {
+    return tool === 'fontFamily' ? this.fontFamilyOptions() : this.fontSizeOptions();
   }
 
   /**
-   * @ignore Applies a text size from the `fontSize` popup.
+   * @ignore Current value of a `ui-select` dropdown, so it reflects the caret.
    *
-   * The popup took the focus, so the caret is put back first. `fontSize` emits
-   * a legacy `<font>` element, immediately rewritten into a class.
+   * Falls back to the value actually in force when no class was applied: text
+   * carrying no class really is rendered with `--fontfamily-base` at the
+   * default size, so naming it states a fact rather than a placeholder.
    */
-  private selectFontSize(key: EditorSize): void {
-    if (!this.isEditable()) return;
-    const choice = this.sizes.find((s) => s.key === key);
-    if (!choice) return;
-    this.restoreSelection();
-    applyFontSize();
-    const el = this.contentEl()?.nativeElement;
-    if (el) convertSizeMarkers(el, choice.className);
-    this.onInput();
+  protected selectValue(tool: EditorSelectTool): string {
+    if (tool === 'fontFamily') return this.currentFont() ?? 'base';
+    return this.currentSize() ?? 'default';
   }
 
   /** @ignore Accessible name of a dropdown — spelled out, it is never truncated. */
@@ -533,31 +502,29 @@ export class UiEditor extends BaseFormField<string> {
   }
 
   /**
-   * @ignore Label shown on the `fontFamily`/`fontSize` popup triggers.
+   * @ignore Applies the value chosen in a `ui-select` dropdown.
    *
-   * Falls back to the value actually in force when no class was applied: text
-   * carrying no class really is rendered with `--fontfamily-base` at the
-   * default size, so naming it states a fact rather than a placeholder.
+   * `ui-select` opens its own overlay and takes the focus, so the caret is put
+   * back first — same reasoning as the color pickers. `fontName`/`fontSize`
+   * each emit a legacy `<font>` element, immediately rewritten into a class.
    */
-  protected selectDisplayLabel(tool: EditorSelectTool): string {
+  protected onSelectValueChange(tool: EditorSelectTool, value: unknown, index: number): void {
+    this.activeTool.set(index);
+    if (!this.isEditable() || value == null) return;
+    this.restoreSelection();
+    const el = this.contentEl()?.nativeElement;
     if (tool === 'fontFamily') {
-      const key = this.currentFont() ?? 'base';
-      return this.fonts().find((f) => f.key === key)?.label ?? '';
+      const choice = this.fonts().find((f) => f.key === value);
+      if (!choice) return;
+      applyFontFamily();
+      if (el) convertFontMarkers(el, choice.className);
+    } else {
+      const choice = this.sizes.find((s) => s.key === value);
+      if (!choice) return;
+      applyFontSize();
+      if (el) convertSizeMarkers(el, choice.className);
     }
-    const key = this.currentSize() ?? 'default';
-    return this.sizes.find((s) => s.key === key)?.label ?? '';
-  }
-
-  /**
-   * @ignore Accessible name of a popup trigger, combining the dropdown's own
-   * name with the value it currently shows.
-   *
-   * `ui-button` reports an explicit `ariaLabel` as the whole accessible name,
-   * which would otherwise hide the visible value (`selectDisplayLabel`) from
-   * assistive tech — announcing "Police" instead of "Police : Inter".
-   */
-  protected selectTriggerAriaLabel(tool: EditorSelectTool): string {
-    return `${this.selectLabel(tool)} : ${this.selectDisplayLabel(tool)}`;
+    this.onInput();
   }
 
   /**
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.mdx b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
index 1233dbbf..4cd7793e 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.mdx
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
@@ -57,17 +57,11 @@ par construction.
 `tools`. Il n'y a pas de sélecteur de niveau de bloc : l'éditeur ne produit que des `<p>`, aucun
 titre H1-H3 n'est accessible depuis la barre.
 
-Chacun se rend en déclencheur `ui-button` (ghost, `size="small"`) glué à un `ui-menu`
-`popup [size]="small"`, même pattern que
-[`ui-button-split`](?path=/docs/components-ui-actions-ui-button-split--docs).
+Chacun se rend en [`ui-select`](?path=/docs/components-ui-forms-ui-select--docs) (`size="small"`),
+lié à la valeur en vigueur (`[ngModel]`) et nommé pour les lecteurs d'écran via `ariaLabel`
+(« Police », « Taille du texte »).
 
-Chaque déclencheur affiche **la valeur en vigueur**, jamais son propre nom : au repos on lit
-« Normal » et « Inter », c'est-à-dire ce que le texte utilise réellement. La police est lue sur le
-rendu effectif, pas devinée. Le nom de chaque sélecteur reste disponible pour les lecteurs d'écran
-via un `aria-label` combiné (« Police : Inter ») — sinon la valeur affichée à l'écran disparaîtrait
-du nom accessible, qu'un `aria-label` explicite remplace entièrement sur un `ui-button`.
-
-Les deux déclencheurs ont la **même largeur, fixe** : une largeur ajustée au contenu ferait sauter
+Les deux sélecteurs ont la **même largeur, fixe** : une largeur ajustée au contenu ferait sauter
 la barre entière à chaque changement de valeur.
 
 Les choix sont **fermés aux tokens** : `--fontfamily-base` / `--fontfamily-title` /
@@ -108,9 +102,8 @@ appliquer l'un remet les autres à `false`. Ils suivent donc le même modèle `E
 
 `textColor`/`highlightColor` ouvrent chacun un
 [`ui-swatch-picker`](?path=/docs/components-ui-forms-ui-swatch-picker--docs) en popup
-(`popup`, `size="small"`) ancré à leur bouton `ui-button` — même composition « déclencheur +
-overlay » que `fontFamily`/`fontSize`, sans `ui-menu` : le nuancier n'a pas son propre
-déclencheur, exactement comme `ui-menu` n'a pas le sien.
+(`popup`, `size="small"`) ancré à leur bouton `ui-button` : le nuancier n'a pas son propre
+déclencheur, c'est le bouton-outil lui-même qui ouvre le popup.
 
 La palette est la **palette par défaut de `ui-swatch-picker`** (`DEFAULT_SWATCH_PALETTE`),
 réutilisée telle quelle pour `EDITOR_COLORS`/`EDITOR_HIGHLIGHTS` : le nuancier et les classes
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
index bba8f69a..a3caf523 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
@@ -36,7 +36,7 @@ const meta: Meta<UiEditor> = {
     tools: {
       control: 'object',
       description:
-        "Outils affichés dans la barre, dans l'ordre (`separator` = séparateur ; `fontFamily` et `fontSize` sont des menus popup, pas des boutons).",
+        "Outils affichés dans la barre, dans l'ordre (`separator` = séparateur ; `fontFamily` et `fontSize` sont des `ui-select`, pas des boutons).",
       table: {
         type: { summary: 'EditorTool[]' },
         defaultValue: { summary: 'DEFAULT_EDITOR_TOOLS' },
@@ -167,9 +167,8 @@ export const CodeBlock: Story = {
  * égalité : ni l'un ni l'autre n'est une option gardée derrière `tools`. Le
  * choix de police est fermé aux trois familles du système
  * (`--fontfamily-base`, `--fontfamily-title`, `--fontfamily-monospace`), et la
- * taille à l'échelle `--size-typography-text-*`. Chacun se rend en déclencheur
- * `ui-button` + popup `ui-menu` (`size="small"`, même pattern que
- * `ui-button-split`), et affiche la valeur en vigueur au repos — la police lit
+ * taille à l'échelle `--size-typography-text-*`. Chacun se rend en `ui-select`
+ * (`size="small"`), et affiche la valeur en vigueur au repos — la police lit
  * le nom réel de la fonte, résolu depuis le token à l'exécution.
  */
 export const FontFamily: Story = {

From 8bdd6e9f447ec01dee52798ff8997fd13a1d85b9 Mon Sep 17 00:00:00 2001
From: LBU <louis.baizeau@4sh.fr>
Date: Wed, 26 Aug 2026 16:50:36 +0200
Subject: [PATCH 5/8] FSHSP-160 fix(editor): fit fontFamily/fontSize ui-select
 into the toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Blend the ui-select boxes into the toolbar surface instead of rendering as
their own bordered form field: --ui-field-stroke-width: 0 (public hook) for
the border, a ::ng-deep override on .ui-field-box for the fill (no public
hook for that — scoped to .ui-editor-select only, no other ui-select in the
kit is affected), plus a hover state matching the rest of the toolbar.
---
 CHANGELOG.md                                  |  6 +++++-
 .../forms/ui-editor/src/lib/ui-editor.scss    | 19 +++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b23d4e6..de434850 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -93,7 +93,11 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 - **`ui-editor` : les sélecteurs `fontFamily`/`fontSize` passent du `<select>` natif à
   `ui-select`** (FSHSP-160). Rendu en `ui-select` `size="small"`, lié à la valeur en vigueur via
   `[ngModel]` et nommé pour les lecteurs d'écran via `ariaLabel` — cohérent avec le reste du kit,
-  qui n'a qu'un seul composant de dropdown de valeurs.
+  qui n'a qu'un seul composant de dropdown de valeurs. Bordure et fond de la boîte de champ
+  retirés (`--ui-field-stroke-width: 0` + surcharge locale du fond via `::ng-deep`, scopée à
+  `.ui-editor-select` — aucun autre `ui-select` du kit n'est concerné) pour que le sélecteur se
+  fonde dans la barre d'outils comme les autres outils, plutôt que d'apparaître comme son propre
+  champ de formulaire.
 
 - **`ui-editor` : suppression de `blockFormat`, `fontSize` désormais dans la barre par défaut**
   (FSHSP-160). Plus de sélecteur de niveau de bloc (Normal/Titre 1-3) : l'éditeur ne produit plus
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
index 1f9d684c..ca9802da 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
@@ -132,8 +132,23 @@ $editor-color-steps: 900, 700, 500, 300, 100;
     // 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;
-
-    ::ng-deep .ui-select { inline-size: 100%; }
+    // 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;
+
+    ::ng-deep {
+      .ui-select { inline-size: 100%; }
+
+      // 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(--form-low-surface-hover); }
+    }
   }
 
   // `textColor`/`highlightColor` triggers: a liseré under the icon shows the

From 4c85e3a44547f75e009db5a4cdcb99f0ac8ceb5c Mon Sep 17 00:00:00 2001
From: LBU <louis.baizeau@4sh.fr>
Date: Wed, 26 Aug 2026 16:56:16 +0200
Subject: [PATCH 6/8] FSHSP-160 fix(editor): drop clearFormat from the default
 toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

clearFormatMarkers() doesn't reliably clear every marker class yet. Rather
than ship a button that doesn't always do what it says, pull 'clearFormat'
out of DEFAULT_EDITOR_TOOLS for now — the tool itself, its icon/label and
clearFormatMarkers() are untouched, still available via an explicit `tools`.
---
 CHANGELOG.md                                  |  19 +-
 figma/component-vars.json                     | 364 +++++++++++++-----
 .../ui-editor/src/lib/ui-editor-commands.ts   |   6 +-
 projects/ui-kit/styles/component-vars.scss    |  22 +-
 4 files changed, 301 insertions(+), 110 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index de434850..5500d856 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -142,17 +142,18 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 - **`ui-datepicker` : `allowInput` couvre maintenant `range` et `multiple`** (FSHSP-118), en complément de la grille (le clic continue de fonctionner à l'identique). `range` se tape dans le même champ, les deux dates séparées par `" - "` (ex. `"08/07/2026 - 18/07/2026"`) ; `multiple` accepte une liste séparée par `", "`, nombre de dates non borné. `range` bénéficie du même masque auto-"/" en direct qu'en mode `single` (les deux dates, puis leur séparateur, se construisent au fil de la frappe) ; `multiple`, dont le nombre de dates n'est pas borné, reste en texte libre, parsé au blur/Entrée uniquement — dans les deux cas avec les mêmes garanties qu'en `single` : une entrée incomplète ou invalide revient à la dernière valeur affichée, une plage tapée dans le désordre est réordonnée chronologiquement (comme un second clic dans la grille), une date dupliquée en `multiple` est supprimée (comme un clic sur une case déjà sélectionnée). Un `parseDate` custom s'applique par date individuelle, symétrique de `dateFormat`. Non couvert : la combinaison avec `showTime` (les dates tapées en `range`/`multiple` sont toujours calées à minuit — seule la grille gère l'heure sur ces modes pour l'instant).
 - **Un utilitaire global `.sr-only`** dans la feuille de helpers publiée (section « Visibility ») : rend un texte visible des seuls lecteurs d'écran, pour nommer une colonne ou une action dont l'affichage ne montre rien. Ajouté pour les en-têtes de colonne vides des tableaux (`<th>` d'une colonne de sélection ou d'expansion), où `aria-label` ne suffit pas : `empty-table-header` exige du texte réellement présent. Quatre composants du kit recopient déjà ce bloc dans leur propre SCSS (`ui-datepicker`, `ui-select`, `ui-file-upload`, `ui-read-only`) — ils pourront s'appuyer dessus.
 
-### Fixed
-
-- **`ui-editor` : « Effacer le formatage » laissait police/taille/couleur/surlignage en place**
-  (FSHSP-160). `clearFormat` s'appuie sur `document.execCommand('removeFormat')`, qui ne connaît
-  que la mise en forme native du navigateur (gras, italique, souligné…) — jamais les
-  `<span class="ui-editor-*">` que `fontFamily`/`fontSize`/`textColor`/`highlightColor` écrivent.
-  Nouvelle `clearFormatMarkers()`, appelée en plus de la commande native : déshabille ces classes
-  sur toute la sélection courante (même mécanisme que le « Aucune couleur » des nuanciers).
-
 ### Changed
 
+- **`ui-editor` : `clearFormat` retiré de la barre par défaut, encore disponible via `tools`**
+  (FSHSP-160). `document.execCommand('removeFormat')` ne connaît que la mise en forme native du
+  navigateur (gras, italique, souligné…) — jamais les `<span class="ui-editor-*">` que
+  `fontFamily`/`fontSize`/`textColor`/`highlightColor` écrivent. Une première tentative,
+  `clearFormatMarkers()` (déshabille ces classes sur la sélection, même mécanisme que le
+  « Aucune couleur » des nuanciers), ne couvre pas encore tous les cas de façon fiable : plutôt
+  qu'un bouton qui n'effectue pas toujours ce qu'il annonce, il est retiré de
+  `DEFAULT_EDITOR_TOOLS` en attendant, sans rien retirer du kit — le tool, l'icône et
+  `clearFormatMarkers()` restent en place pour un projet qui l'ajoute explicitement.
+
 - **`ui-datepicker` : la plage sélectionnée (`range`) se lit comme une seule zone continue** (FSHSP-166). Elle était peinte sur la cellule elle-même — fond en dégradé mi-cellule sur les deux extrémités, filets haut et bas en bordure — ce qui la faisait _encadrer_ la sélection plutôt que la porter, avec deux débordements visibles : les filets couraient sur toute la largeur des cellules de début et de fin, donc au-delà de la moitié réellement remplie, et la pastille des jours de début/fin, dont la bordure transparente s'ajoutait à sa taille (`content-box`), dépassait la hauteur de la bande. La bande est désormais une couche à part, exactement de la hauteur d'une pastille et arrêtée au centre des deux extrémités : plus rien ne peut la dépasser, ni en hauteur ni sur les côtés. Les filets sont retirés, et seuls les deux bouts d'une ligne de semaine sont arrondis — sur le retrait qu'une pastille laisse dans sa colonne, pas sur le bord de la cellule, pour qu'une plage finissant sur la dernière colonne s'aligne avec la rangée du dessus au lieu de s'arrêter une demi-gouttière trop tôt. Et une date de début dont la fin n'est pas encore choisie n'affiche plus de demi-bande partant vers une extrémité qui n'existe pas : la pastille reste seule jusqu'au second clic. Deux nouveaux réglages, `--ui-datepicker-range-background` et `--ui-datepicker-range-color`, permettent de re-skinner la bande et le chiffre qu'elle porte (voir la table « Theming » de la doc).
 
 - **La boîte de `ui-field` est désormais enveloppée dans un `.ui-field-control`** (FSHSP-157). C'est le contexte de positionnement du libellé flottant, et il est rendu dans les deux modes plutôt que conditionnellement, pour que le DOM d'un champ ne dépende pas de l'option. Aucun impact visuel ni sur les sélecteurs publics ; un consommateur qui aurait écrit du CSS sur l'enchaînement direct `.ui-field > .ui-field-box` doit passer par le descendant.
diff --git a/figma/component-vars.json b/figma/component-vars.json
index 1fc97442..04fd7f54 100644
--- a/figma/component-vars.json
+++ b/figma/component-vars.json
@@ -10,11 +10,11 @@
         "Mode 1"
       ],
       "counts": {
-        "tokens": 646,
-        "alias": 521,
-        "literal": 125,
-        "skipped": 53,
-        "derivedDescriptions": 206
+        "tokens": 653,
+        "alias": 526,
+        "literal": 127,
+        "skipped": 55,
+        "derivedDescriptions": 210
       },
       "aliasTargets": [
         "metrics",
@@ -89,6 +89,11 @@
           "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",
@@ -249,6 +254,11 @@
           "component": "ui-spinner",
           "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-swatch-picker-swatch-color",
+          "component": "ui-swatch-picker",
+          "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-table-cell-padding-large",
           "component": "ui-table",
@@ -5101,96 +5111,6 @@
         }
       }
     },
-    "select": {
-      "color": {
-        "$value": "{semantics.form.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur des listes déroulantes.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-editor-select-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-editor-select-color",
-            "component": "ui-editor",
-            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "font-size": {
-        "$value": "{responsive.size.typography.text.md}",
-        "$type": "dimension",
-        "$description": "Taille de police des listes déroulantes.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "FONT_SIZE"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-editor-select-font-size)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-editor-select-font-size",
-            "component": "ui-editor",
-            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "padding-x": {
-        "$value": "{metrics.units.xs}",
-        "$type": "dimension",
-        "$description": "Inset horizontal des listes déroulantes de la barre.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-editor-select-padding-x)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-editor-select-padding-x",
-            "component": "ui-editor",
-            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "radius": {
-        "$value": "{metrics.radius.2xs}",
-        "$type": "dimension",
-        "$description": "Rayon des coins des listes déroulantes.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "CORNER_RADIUS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-editor-select-radius)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-editor-select-radius",
-            "component": "ui-editor",
-            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
     "separator": {
       "color": {
         "$value": "{semantics.form.low.stroke.default}",
@@ -5355,6 +5275,52 @@
         }
       }
     },
+    "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/forms/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "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/forms/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
     "toolbar": {
       "gap": {
         "$value": "{metrics.units.2xs}",
@@ -13274,6 +13240,214 @@
       }
     }
   },
+  "swatch-picker": {
+    "cell": {
+      "size": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Taille de `ui-swatch-picker` — cell.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-cell-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-cell-size",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "size-small": {
+        "$value": "24px",
+        "$type": "dimension",
+        "$description": "Taille de `ui-swatch-picker` — cell (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-cell-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-cell-size-small",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "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-swatch-picker-focus-ring-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-swatch-picker-focus-ring-width",
+          "component": "ui-swatch-picker",
+          "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{metrics.units.xs}",
+      "$type": "dimension",
+      "$description": "Espacement de `ui-swatch-picker`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-swatch-picker-gap)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-swatch-picker-gap",
+          "component": "ui-swatch-picker",
+          "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "gap-small": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Espacement de `ui-swatch-picker` (variante `small`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-swatch-picker-gap-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-swatch-picker-gap-small",
+          "component": "ui-swatch-picker",
+          "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "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": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-panel-padding)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-panel-padding",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "selected-ring": {
+      "width": {
+        "$value": "{metrics.stroke.lg}",
+        "$type": "dimension",
+        "$description": "Épaisseur du liseré de sélection.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-selected-ring-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-selected-ring-width",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
+      "$type": "dimension",
+      "$description": "Épaisseur du contour de chaque pastille.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-swatch-picker-stroke-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-swatch-picker-stroke-width",
+          "component": "ui-swatch-picker",
+          "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "swatch": {
+      "radius": {
+        "$value": "{metrics.radius.xs}",
+        "$type": "dimension",
+        "$description": "Rayon des coins d'une pastille.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-swatch-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-swatch-radius",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    }
+  },
   "table": {
     "cell": {
       "padding": {
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
index 1bbef607..2d89979a 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
@@ -141,6 +141,11 @@ const FONT_CLASSES = new Set(EDITOR_FONTS.map((f) => f.className));
  * 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',
@@ -160,7 +165,6 @@ export const DEFAULT_EDITOR_TOOLS: readonly EditorTool[] = [
   'separator',
   'link',
   'codeBlock',
-  'clearFormat',
 ];
 
 /** Toolbar metadata per button tool: icon (FontAwesome) + French accessible name. */
diff --git a/projects/ui-kit/styles/component-vars.scss b/projects/ui-kit/styles/component-vars.scss
index ec04a256..a99a1eaf 100644
--- a/projects/ui-kit/styles/component-vars.scss
+++ b/projects/ui-kit/styles/component-vars.scss
@@ -11,7 +11,7 @@
 // design token instead — it follows brand, light/dark and viewport.
 //
 // Generated by `npm run docs:config`, values read from the compiled CSS — do not
-// edit here. 679 variables; 20 more exist whose value depends on the
+// edit here. 686 variables; 22 more exist whose value depends on the
 // rendered variant, listed in each component’s “Theming” section in Storybook.
 // =====================================================================
 
@@ -204,6 +204,7 @@
   --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);
@@ -213,14 +214,13 @@
   --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-select-padding-x:                 var(--units-xs);
+  --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-select-radius:                    var(--radius-2xs);
   --ui-editor-toolbar-stroke-width:             var(--ui-control-stroke-width, var(--stroke-default));
   // Typographie
   --ui-editor-bold-weight:                      var(--weight-bold);
@@ -235,7 +235,6 @@
   --ui-editor-heading-line-height:              1.25;
   --ui-editor-heading-weight:                   var(--weight-bold);
   --ui-editor-line-height:                      1.5;
-  --ui-editor-select-font-size:                 var(--size-typography-text-md);
   --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);
@@ -245,7 +244,6 @@
   --ui-editor-code-surface:                     var(--global-background-muted);
   --ui-editor-link-color:                       var(--global-text-brand);
   --ui-editor-placeholder-color:                var(--form-low-content-default);
-  --ui-editor-select-color:                     var(--form-high-content-default);
   --ui-editor-separator-color:                  var(--form-low-stroke-default);
   --ui-editor-toolbar-stroke:                   var(--form-low-stroke-default);
   --ui-editor-toolbar-surface:                  var(--global-background-muted);
@@ -550,6 +548,20 @@
   --ui-slider-mark-radius:                      var(--radius-full);
   --ui-slider-track-radius:                     var(--radius-full);
 
+  // ── ui-swatch-picker ──
+  // Dimensions
+  --ui-swatch-picker-cell-size:                 2rem;
+  --ui-swatch-picker-cell-size-small:           1.5rem;
+  --ui-swatch-picker-selected-ring-width:       var(--stroke-lg);
+  // Espacements
+  --ui-swatch-picker-gap:                       var(--units-xs);
+  --ui-swatch-picker-gap-small:                 var(--units-2xs);
+  --ui-swatch-picker-panel-padding:             var(--ui-overlay-panel-padding, var(--units-sm));
+  // Bordures & rayons
+  --ui-swatch-picker-focus-ring-width:          var(--ui-focus-ring-width, var(--units-2xs));
+  --ui-swatch-picker-stroke-width:              var(--ui-control-stroke-width, var(--stroke-default));
+  --ui-swatch-picker-swatch-radius:             var(--radius-xs);
+
   // ── ui-textarea ──
   // Dimensions
   --ui-textarea-min-height:                     var(--ui-form-textarea-min-height, var(--size-components-sm));

From 0ed68310472547e6c58eee333c416fb62d149418 Mon Sep 17 00:00:00 2001
From: LBU <louis.baizeau@4sh.fr>
Date: Thu, 27 Aug 2026 10:18:09 +0200
Subject: [PATCH 7/8] FSHSP-160 docs(editor): sync component lists after
 ui-swatch-picker

npm run docs:config:check was failing:
- figma/README.md quoted stale alias/total (521/646) and skipped (52)
  counts, out of sync with the regenerated figma/component-vars.json
  (526/653, 54).
- ui-swatch-picker (added for the editor's color pickers) was missing
  from the entry-point tables in projects/ui-kit/README.md/.fr.md and
  from storybook/docs/Overview.mdx, caught by components:check.

Updated the stale numbers, added ui-swatch-picker to both READMEs'
Forms row (54->57 entry points, 55->58 components), and wired it into
Overview.mdx's Forms section.
---
 figma/README.md              | 4 ++--
 projects/ui-kit/README.fr.md | 6 +++---
 projects/ui-kit/README.md    | 6 +++---
 storybook/docs/Overview.mdx  | 2 ++
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/figma/README.md b/figma/README.md
index f9e34191..b7e51d55 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 `npm run 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 521 of the 646 entries merely _alias_ a
+component variable belongs to one component, and 526 of the 653 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 53 entries with nothing to create: `calc()`
+- `$extensions.com.4sh.ui-kit.skipped` lists 55 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/projects/ui-kit/README.fr.md b/projects/ui-kit/README.fr.md
index 1d81de1d..ebd46d66 100644
--- a/projects/ui-kit/README.fr.md
+++ b/projects/ui-kit/README.fr.md
@@ -177,17 +177,17 @@ import { UiIcon } from '@4sh/ui-kit/base/ui-icon';
 
 ### Entry points disponibles
 
-**54 entry points**, chacun nommé `@4sh/ui-kit/<famille>/<composant>` — la
+**57 entry points**, chacun nommé `@4sh/ui-kit/<famille>/<composant>` — la
 famille ci-dessous est littéralement le segment de chemin, en minuscules :
 `@4sh/ui-kit/actions/ui-button`, `@4sh/ui-kit/forms/ui-select`,
 `@4sh/ui-kit/forms/ui-datepicker`…
-(55 composants au total — `ui-file-upload-list` est livré dans
+(58 composants au total — `ui-file-upload-list` est livré dans
 `ui-file-upload`, dont il consomme le modèle.)
 
 | Famille      | Entry points                                                                                                                                                                                                                                                                                                                                                           |
 | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Actions      | `ui-button` · `ui-button-split` · `ui-link` · `ui-speed-dial`                                                                                                                                                                                                                                                                                                          |
-| Formulaires  | `ui-input` · `ui-textarea` · `ui-editor` · `ui-select` · `ui-autocomplete` · `ui-datepicker` · `ui-checkbox` · `ui-radio` · `ui-toggle` · `ui-toggle-button` · `ui-slider` · `ui-nudger` · `ui-rating` · `ui-segment-control` · `ui-input-number` · `ui-input-mask` · `ui-input-otp` · `ui-input-tags` · `ui-input-group` · `ui-file-upload` · `ui-field` · `ui-label` |
+| Formulaires  | `ui-input` · `ui-textarea` · `ui-editor` · `ui-select` · `ui-autocomplete` · `ui-datepicker` · `ui-checkbox` · `ui-radio` · `ui-toggle` · `ui-toggle-button` · `ui-slider` · `ui-nudger` · `ui-rating` · `ui-segment-control` · `ui-input-number` · `ui-input-mask` · `ui-input-otp` · `ui-input-tags` · `ui-input-group` · `ui-file-upload` · `ui-field` · `ui-label` · `ui-swatch-picker` |
 | Informatif   | `ui-alert` · `ui-toast` · `ui-badge` · `ui-chip` · `ui-tag` · `ui-avatar` · `ui-avatar-group` · `ui-accordion` · `ui-tooltip` · `ui-spinner` · `ui-skeleton` · `ui-progress-bar` · `ui-empty-state` · `ui-read-only` · `ui-separator` · `ui-helper`                                                                                                                    |
 | Mise en page | `ui-card` · `ui-modal` · `ui-drawer` · `ui-popover`                                                                                                                                                                                                                                                                                                                    |
 | Navigation   | `ui-menu` · `ui-context-menu` · `ui-tabs` · `ui-stepper` · `ui-sidebar` · `ui-breadcrumb`                                                                                                                                                                                                                                                                              |
diff --git a/projects/ui-kit/README.md b/projects/ui-kit/README.md
index aba6bb56..8acc74be 100644
--- a/projects/ui-kit/README.md
+++ b/projects/ui-kit/README.md
@@ -173,17 +173,17 @@ import { UiIcon } from '@4sh/ui-kit/base/ui-icon';
 
 ### Available entry points
 
-**54 entry points**, each named `@4sh/ui-kit/<family>/<component>` — the family
+**57 entry points**, each named `@4sh/ui-kit/<family>/<component>` — the family
 below is literally the path segment, lowercased:
 `@4sh/ui-kit/actions/ui-button`, `@4sh/ui-kit/forms/ui-select`,
 `@4sh/ui-kit/forms/ui-datepicker`…
-(55 components in total — `ui-file-upload-list` ships inside `ui-file-upload`,
+(58 components in total — `ui-file-upload-list` ships inside `ui-file-upload`,
 whose model it consumes.)
 
 | Family      | Entry points                                                                                                                                                                                                                                                                                                                                                           |
 | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Actions     | `ui-button` · `ui-button-split` · `ui-link` · `ui-speed-dial`                                                                                                                                                                                                                                                                                                          |
-| Forms       | `ui-input` · `ui-textarea` · `ui-editor` · `ui-select` · `ui-autocomplete` · `ui-datepicker` · `ui-checkbox` · `ui-radio` · `ui-toggle` · `ui-toggle-button` · `ui-slider` · `ui-nudger` · `ui-rating` · `ui-segment-control` · `ui-input-number` · `ui-input-mask` · `ui-input-otp` · `ui-input-tags` · `ui-input-group` · `ui-file-upload` · `ui-field` · `ui-label` |
+| Forms       | `ui-input` · `ui-textarea` · `ui-editor` · `ui-select` · `ui-autocomplete` · `ui-datepicker` · `ui-checkbox` · `ui-radio` · `ui-toggle` · `ui-toggle-button` · `ui-slider` · `ui-nudger` · `ui-rating` · `ui-segment-control` · `ui-input-number` · `ui-input-mask` · `ui-input-otp` · `ui-input-tags` · `ui-input-group` · `ui-file-upload` · `ui-field` · `ui-label` · `ui-swatch-picker` |
 | Informative | `ui-alert` · `ui-toast` · `ui-badge` · `ui-chip` · `ui-tag` · `ui-avatar` · `ui-avatar-group` · `ui-accordion` · `ui-tooltip` · `ui-spinner` · `ui-skeleton` · `ui-progress-bar` · `ui-empty-state` · `ui-read-only` · `ui-separator` · `ui-helper`                                                                                                                    |
 | Layout      | `ui-card` · `ui-modal` · `ui-drawer` · `ui-popover`                                                                                                                                                                                                                                                                                                                    |
 | Navigation  | `ui-menu` · `ui-context-menu` · `ui-tabs` · `ui-stepper` · `ui-sidebar` · `ui-breadcrumb`                                                                                                                                                                                                                                                                              |
diff --git a/storybook/docs/Overview.mdx b/storybook/docs/Overview.mdx
index f1a1bea3..b7a0b9bd 100644
--- a/storybook/docs/Overview.mdx
+++ b/storybook/docs/Overview.mdx
@@ -25,6 +25,7 @@ import * as SliderStories from "../../projects/ui-kit/forms/ui-slider/ui-slider.
 import * as NudgerStories from "../../projects/ui-kit/forms/ui-nudger/ui-nudger.stories";
 import * as TextareaStories from "../../projects/ui-kit/forms/ui-textarea/ui-textarea.stories";
 import * as EditorStories from "../../projects/ui-kit/forms/ui-editor/ui-editor.stories";
+import * as SwatchPickerStories from "../../projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories";
 import * as SelectStories from "../../projects/ui-kit/forms/ui-select/ui-select.stories";
 import * as AutocompleteStories from "../../projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.stories";
 import * as InputTagsStories from "../../projects/ui-kit/forms/ui-input-tags/ui-input-tags.stories";
@@ -96,6 +97,7 @@ export const CATEGORIES = [
       { name: 'ui-nudger', description: 'Incrémenteur numérique [−] valeur [+] (CVA, min/max/step, tailles, formatValue).', link: '?path=/docs/components-ui-forms-ui-nudger--docs', story: NudgerStories.MinMax },
       { name: 'ui-textarea', description: 'Zone de texte multiligne (CVA, rows, autoResize, poignée native, niveaux).', link: '?path=/docs/components-ui-forms-ui-textarea--docs', story: TextareaStories.WithHelper },
       { name: 'ui-editor', description: 'Éditeur de texte riche sans moteur tiers (barre d’outils configurable, valeur HTML assainie).', link: '?path=/docs/components-ui-forms-ui-editor--docs', story: EditorStories.WithValue, previewScale: 0.65 },
+      { name: 'ui-swatch-picker', description: 'Sélecteur de couleur en grille (swatches groupés, popup overlay, taille compacte, effacement).', link: '?path=/docs/components-ui-forms-ui-swatch-picker--docs', story: SwatchPickerStories.Default },
       { name: 'ui-segment-control', description: 'Sélection segmentée (CVA, simple/multiple, indicateur glissant motion, fluid, template).', link: '?path=/docs/components-ui-forms-ui-segment-control--docs', story: SegmentControlStories.Sizes },
       { name: 'ui-select', description: 'Liste déroulante (combobox WAI-ARIA, options/groupes, multiple, filtre, editable, virtual scroll + lazy).', link: '?path=/docs/components-ui-forms-ui-select--docs', story: SelectStories.Checkmark },
       { name: 'ui-autocomplete', description: 'Champ de suggestions (combobox WAI-ARIA, completeMethod anti-rebondi, dropdown, groupes, forceSelection, virtual scroll).', link: '?path=/docs/components-ui-forms-ui-autocomplete--docs', story: AutocompleteStories.Basic },

From 2ebc7bbba6284e3958272eadd50d040933999646 Mon Sep 17 00:00:00 2001
From: LBU <louis.baizeau@4sh.fr>
Date: Thu, 27 Aug 2026 10:34:57 +0200
Subject: [PATCH 8/8] FSHSP-160 fix(editor): fix color-contrast a11y violation
 in ColorPickers story
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

axe flagged the ColorPickers smoke-test: the demo text used
ui-editor-color-red-500 (#ef4444 on white = 3.76:1), below the WCAG AA
4.5:1 threshold for normal text. Swapped to red-700 (#b91c1c, 6.47:1),
an existing DEFAULT_SWATCH_PALETTE step — still demonstrates the
textColor tool, just with an accessible example.
---
 projects/ui-kit/forms/ui-editor/ui-editor.stories.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
index a3caf523..81e8d7f6 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
@@ -231,7 +231,8 @@ export const TextAlign: Story = {
  */
 export const ColorPickers: Story = {
   render: story(
-    '<p><span class="ui-editor-color-red-500">Texte en rouge</span>, ' +
+    // red-700, not red-500: the demo text must stay AA-contrasted on white (axe smoke-test).
+    '<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>',
   ),