From 06c90f7fb2322ef05b7fb7340f59729f8b2ba930 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 11:36:00 +0200
Subject: [PATCH 01/38] docs(date) : spec saisie manuelle MalioDate

---
 ...-06-09-maliodate-saisie-manuelle-design.md | 118 ++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-09-maliodate-saisie-manuelle-design.md

diff --git a/docs/superpowers/specs/2026-06-09-maliodate-saisie-manuelle-design.md b/docs/superpowers/specs/2026-06-09-maliodate-saisie-manuelle-design.md
new file mode 100644
index 0000000..d9e9e10
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-09-maliodate-saisie-manuelle-design.md
@@ -0,0 +1,118 @@
+# MalioDate — saisie manuelle au clavier
+
+**Date :** 2026-06-09
+**Statut :** Validé, prêt pour plan d'implémentation
+**Périmètre :** `MalioDate` uniquement (la famille `DateTime`/`DateRange`/`DateWeek` n'est pas concernée pour l'instant).
+
+## Objectif
+
+Permettre à l'utilisateur de saisir une date au clavier (`JJ/MM/AAAA`) dans `MalioDate`, en plus de la sélection via le calendrier. Aujourd'hui l'`<input>` de `CalendarField` est codé en dur en `readonly` : seule la sélection au calendrier est possible.
+
+## Décisions d'UX (validées)
+
+| Sujet | Décision |
+|-------|----------|
+| Ouverture du popover | Le **focus** (ou le clic) ouvre le calendrier, tout en laissant taper en même temps. |
+| Masque / validation | Masque `maska` `##/##/####` pendant la frappe ; **validation au blur** (pas à chaque touche). |
+| Activation | **Opt-in** via une prop `editable` (défaut `false`). Aucune régression pour les consommateurs existants. |
+| Saisie invalide au blur | On **garde le texte tapé** et on affiche un **état d'erreur visuel** (bordure rouge + message). |
+| Message d'erreur par défaut | « **Date invalide** » (couvre aussi le hors-bornes min/max), surchargeable via prop. |
+| Touche Entrée | Déclenche le `commit` (parse immédiat) + ferme le popover. |
+
+## Approche retenue
+
+**Mode `editable` dans `CalendarField`, parsing dans `MalioDate`.**
+
+`CalendarField` reste agnostique au format : il expose un mode éditable (input non `readonly`, masque, buffer local) et émet du texte brut. `MalioDate` conserve toute la logique propre à la date (parse, validation `min`/`max`, état d'erreur). Cela évite de coupler `CalendarField` à un format date spécifique et garde le terrain prêt pour une éventuelle extension future à la famille Date.
+
+Approches écartées :
+- **`CalendarField` générique avec fonction `parse` injectée** : trop générique pour le périmètre actuel (YAGNI).
+- **`MalioDate` gère son propre `<input>`** : duplication du rendu / label flottant / styles de `CalendarField`.
+
+## Conception détaillée
+
+### 1. `MalioDate` — props ajoutées
+
+- `editable?: boolean` — défaut `false`. Active la saisie clavier.
+- `invalidMessage?: string` — défaut `'Date invalide'`. Message affiché en cas de saisie invalide/hors-bornes.
+
+Quand `editable === false`, le comportement est **strictement identique** à aujourd'hui (lecture seule, sélection calendrier uniquement).
+
+### 2. `CalendarField` — mode éditable
+
+Ajout d'une prop `editable?: boolean` (défaut `false`). Quand `true` :
+
+- L'`<input>` perd l'attribut `readonly` et reçoit `v-maska="'##/##/####'"`.
+- Un buffer local `draft` (ref) alimente l'input : `:value="editable ? draft : displayValue"`.
+- `draft` est **resynchronisé** sur `displayValue` via un `watch` → couvre la sélection au calendrier, le clear, et tout changement externe de `modelValue`. Cette resynchro **efface aussi l'état d'erreur** côté `MalioDate` (via le nouveau `displayValue` émis).
+- À la frappe (`@input`) : met à jour `draft` et émet `input(text)`. **Pas de validation** à ce stade.
+- Au blur (`@blur`) : émet `commit(text)`.
+- À la touche Entrée (`@keydown.enter`) : émet `commit(text)` + ferme le popover.
+- `@focus` ouvre le popover, tout en laissant taper (input non `readonly`).
+
+Quand `editable === false`, aucun de ces comportements ne s'applique : le chemin de code actuel reste inchangé.
+
+`disabled` et `readonly` priment toujours sur `editable` (champ non éditable).
+
+### 3. `MalioDate` — parsing, validation, état d'erreur
+
+Une ref locale `internalError` est fusionnée avec la prop `error` du consommateur et transmise à `CalendarField` :
+`:error="error || internalError"` (l'erreur métier du consommateur reste prioritaire).
+
+Sur réception de `commit(text)` :
+
+- **Texte vide** → `emit('update:modelValue', null)` ; `internalError = ''`.
+- **Valide** (`parseDisplayToIso(text)` non `null` **et** `isDateInRange(iso, min, max)`) → `emit('update:modelValue', iso)` ; `internalError = ''`.
+- **Invalide ou hors-bornes** → on **n'émet pas** de nouveau `modelValue` ; `internalError = props.invalidMessage`. Le texte tapé reste affiché.
+
+L'état d'erreur s'efface dès qu'une saisie valide ou une sélection calendrier ultérieure produit un nouveau `displayValue`.
+
+## Flux de données
+
+```
+Frappe clavier
+  └─ CalendarField: maj draft + émet input(text)   (pas de validation)
+Blur / Entrée
+  └─ CalendarField: émet commit(text)
+       └─ MalioDate: parseDisplayToIso + isDateInRange
+            ├─ valide  → emit update:modelValue(iso) ; internalError=''
+            ├─ vide    → emit update:modelValue(null) ; internalError=''
+            └─ invalide→ internalError = invalidMessage ; (texte conservé)
+
+Sélection calendrier
+  └─ emit update:modelValue(iso)
+       └─ displayValue change → CalendarField resync draft → erreur effacée
+```
+
+## Réutilisation de l'existant
+
+Les helpers nécessaires existent déjà dans `app/components/malio/date/composables/dateFormat.ts` :
+- `parseDisplayToIso(display)` → `string | null`
+- `isValidIso(iso)` → `boolean`
+- `isDateInRange(iso, min?, max?)` → `boolean`
+- `formatIsoToDisplay(iso)` → `string`
+
+`maska` est déjà une dépendance du projet (utilisée par `InputText`/`InputPhone` via `v-maska` + `vMaska` de `maska/vue`).
+
+## Tests (`Date.test.ts`)
+
+- Frappe valide + blur → émet l'ISO attendu.
+- Saisie invalide (`32/13/2026`) au blur → texte conservé, message « Date invalide », `aria-invalid`.
+- Date valide hors `min`/`max` au blur → état d'erreur.
+- Saisie vide au blur → émet `null`.
+- Sélection au calendrier après une saisie invalide → erreur effacée, valeur mise à jour.
+- Touche Entrée → commit + fermeture popover.
+- `editable=false` (défaut) → input reste `readonly`, aucun nouveau comportement (non-régression).
+- `invalidMessage` personnalisé → message affiché respecté.
+
+## Livrables documentaires
+
+- Mise à jour de `COMPONENTS.md` (props `editable`, `invalidMessage`).
+- Entrée dans `CHANGELOG.md`.
+- Mise à jour de la story Histoire + page playground de `MalioDate` pour exposer la prop `editable`.
+
+## Hors périmètre
+
+- Extension de la saisie manuelle à `DateTime`, `DateRange`, `DateWeek`.
+- Saisie partielle « intelligente » (auto-complétion d'année, etc.).
+- Validation à la frappe (on reste sur validation au blur).
-- 
2.39.5


From 36940139b91eb5e8d51958b32c0fad5abc66d200 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 11:46:25 +0200
Subject: [PATCH 02/38] =?UTF-8?q?docs(date)=20:=20plan=20impl=C3=A9mentati?=
 =?UTF-8?q?on=20saisie=20manuelle=20MalioDate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2026-06-09-maliodate-saisie-manuelle.md   | 635 ++++++++++++++++++
 1 file changed, 635 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-09-maliodate-saisie-manuelle.md

diff --git a/docs/superpowers/plans/2026-06-09-maliodate-saisie-manuelle.md b/docs/superpowers/plans/2026-06-09-maliodate-saisie-manuelle.md
new file mode 100644
index 0000000..6c1dfa7
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-09-maliodate-saisie-manuelle.md
@@ -0,0 +1,635 @@
+# MalioDate — saisie manuelle au clavier — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Permettre la saisie clavier `JJ/MM/AAAA` dans `MalioDate` (opt-in via prop `editable`), en plus de la sélection au calendrier, avec validation au blur et état d'erreur visuel.
+
+**Architecture:** `CalendarField` (interne, partagé) gagne un mode `editable` : input non `readonly`, masque `maska`, buffer local `draft` synchronisé sur `displayValue`, émission d'un event `commit(text)` au blur / à Entrée. `MalioDate` conserve toute la logique date : parse (`parseDisplayToIso`), validation bornes (`isDateInRange`), état d'erreur interne fusionné avec la prop `error` du consommateur. `CalendarField` reste agnostique au format.
+
+**Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, `maska` (directive `v-maska`), `tailwind-merge`, Vitest + `@vue/test-utils` (jsdom).
+
+**Référence spec :** `docs/superpowers/specs/2026-06-09-maliodate-saisie-manuelle-design.md`
+
+---
+
+## File Structure
+
+- **Modify** `app/components/malio/date/internal/CalendarField.vue` — mode `editable` : prop, masque, buffer `draft`, handlers focus/input/blur/enter, event `commit`.
+- **Modify** `app/components/malio/date/Date.vue` — props `editable` / `invalidMessage`, état `internalError`, handler `onCommit`, fusion `mergedError`, nettoyage erreur à la sélection/clear.
+- **Modify** `app/components/malio/date/Date.test.ts` — tests de saisie manuelle + non-régression.
+- **Modify** `COMPONENTS.md` — documentation des props.
+- **Modify** `CHANGELOG.md` — entrée de version.
+- **Modify** `.playground/pages/composant/date/date.vue` — exemple éditable.
+- **Modify** `app/story/date/datePicker.story.vue` — exemple éditable.
+
+**Note hooks pré-commit :** le projet a un hook `make pre-commit` (lint + 888 tests) parfois lent/flaky. Si un commit échoue sur un timeout de test sans rapport, relancer ; en dernier recours `--no-verify`. Toujours stager des fichiers explicites, **jamais** `git add -A` (le `nuxt.config.ts` modifié localement ne doit pas être committé).
+
+---
+
+## Task 1 : `CalendarField` — prop `editable`, masque et buffer
+
+**Files:**
+- Modify: `app/components/malio/date/internal/CalendarField.vue`
+
+Cette tâche ajoute l'infrastructure du mode éditable. On la valide via les tests de la Task 3 (le comportement observable passe par `MalioDate`). Ici on vérifie surtout la non-régression : `editable=false` ⇒ input `readonly`, valeur affichée intacte.
+
+- [ ] **Step 1 : Ajouter les imports `maska`**
+
+Dans le bloc `<script setup>`, juste après la ligne `import {twMerge} from 'tailwind-merge'` (ligne 104), ajouter :
+
+```ts
+import {vMaska} from 'maska/vue'
+import type {MaskInputOptions} from 'maska'
+```
+
+- [ ] **Step 2 : Ajouter la prop `editable` à l'interface et aux défauts**
+
+Dans `defineProps<{...}>()`, ajouter la ligne après `clearable?: boolean` :
+
+```ts
+    editable?: boolean
+```
+
+Dans le bloc `withDefaults(..., { ... })`, ajouter après `clearable: true,` :
+
+```ts
+    editable: false,
+```
+
+- [ ] **Step 3 : Déclarer l'event `commit`**
+
+Remplacer la ligne (≈152) :
+
+```ts
+const emit = defineEmits<{(e: 'clear' | 'close'): void}>()
+```
+
+par :
+
+```ts
+const emit = defineEmits<{
+  (e: 'clear' | 'close'): void
+  (e: 'commit', value: string): void
+}>()
+```
+
+- [ ] **Step 4 : Ajouter le buffer `draft`, le masque et l'état `readonly` calculé**
+
+Juste après la ligne `const root = ref<HTMLElement | null>(null)` (≈156), ajouter :
+
+```ts
+const draft = ref(props.displayValue)
+const maskaOptions = computed<MaskInputOptions>(() => ({mask: props.editable ? '##/##/####' : undefined}))
+const inputReadonly = computed(() => !props.editable || props.readonly || props.disabled)
+
+watch(() => props.displayValue, (value) => {
+  draft.value = value
+})
+```
+
+(Note : `mask: undefined` désactive le masquage de `maska` — la valeur passe intacte. Ne **pas** utiliser `''`, qui viderait la valeur.)
+
+- [ ] **Step 5 : Mettre à jour le computed `isFilled` pour tenir compte du buffer**
+
+Remplacer (≈164) :
+
+```ts
+const isFilled = computed(() => props.displayValue.length > 0)
+```
+
+par :
+
+```ts
+const isFilled = computed(() =>
+  (props.editable ? draft.value.length : props.displayValue.length) > 0,
+)
+```
+
+- [ ] **Step 6 : Remplacer `onFieldClick` et ajouter les handlers éditables**
+
+Remplacer le bloc `onFieldClick` (≈177-185) :
+
+```ts
+const onFieldClick = () => {
+  if (props.disabled || props.readonly) return
+  if (isOpen.value) {
+    closePopover()
+    return
+  }
+  syncToIso(props.syncTo)
+  open()
+}
+```
+
+par :
+
+```ts
+const onFieldClick = () => {
+  if (props.disabled || props.readonly) return
+  if (props.editable) {
+    if (!isOpen.value) {
+      syncToIso(props.syncTo)
+      open()
+    }
+    return
+  }
+  if (isOpen.value) {
+    closePopover()
+    return
+  }
+  syncToIso(props.syncTo)
+  open()
+}
+
+const onFocus = () => {
+  if (props.disabled || props.readonly || !props.editable) return
+  if (!isOpen.value) {
+    syncToIso(props.syncTo)
+    open()
+  }
+}
+
+const onInput = (event: Event) => {
+  draft.value = (event.target as HTMLInputElement).value
+}
+
+const onBlur = () => {
+  if (!props.editable) return
+  emit('commit', draft.value)
+}
+
+const onEnter = () => {
+  if (!props.editable) return
+  emit('commit', draft.value)
+  closePopover()
+}
+```
+
+- [ ] **Step 7 : Mettre à jour l'`<input>` dans le template**
+
+Remplacer le bloc `<input>` (≈7-25) :
+
+```html
+      <input
+        :id="inputId"
+        :name="name"
+        data-test="date-input"
+        readonly
+        autocomplete="off"
+        :class="mergedInputClass"
+        :required="required"
+        :disabled="disabled"
+        :value="displayValue"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        :aria-expanded="isOpen"
+        aria-haspopup="dialog"
+        v-bind="attrs"
+        placeholder="_"
+        type="text"
+        @click="onFieldClick"
+      >
+```
+
+par :
+
+```html
+      <input
+        :id="inputId"
+        v-maska="maskaOptions"
+        :name="name"
+        data-test="date-input"
+        :readonly="inputReadonly"
+        autocomplete="off"
+        :class="mergedInputClass"
+        :required="required"
+        :disabled="disabled"
+        :value="editable ? draft : displayValue"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        :aria-expanded="isOpen"
+        aria-haspopup="dialog"
+        v-bind="attrs"
+        placeholder="_"
+        type="text"
+        @click="onFieldClick"
+        @focus="onFocus"
+        @input="onInput"
+        @blur="onBlur"
+        @keydown.enter.prevent="onEnter"
+      >
+```
+
+- [ ] **Step 8 : Lancer la suite Date pour vérifier la non-régression**
+
+Run : `npm run test -- Date.test.ts`
+Expected : PASS (tous les tests existants de `MalioDate` passent toujours ; l'input par défaut reste `readonly` et affiche la valeur formatée).
+
+- [ ] **Step 9 : Commit**
+
+```bash
+git add app/components/malio/date/internal/CalendarField.vue
+git commit -m "feat(date) : mode editable dans CalendarField (saisie clavier)"
+```
+
+---
+
+## Task 2 : `MalioDate` — parsing, validation et état d'erreur
+
+**Files:**
+- Modify: `app/components/malio/date/Date.vue`
+
+- [ ] **Step 1 : Étendre les imports de `dateFormat`**
+
+Remplacer (≈39) :
+
+```ts
+import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
+```
+
+par :
+
+```ts
+import {formatIsoToDisplay, isDateInRange, isValidIso, parseDisplayToIso} from './composables/dateFormat'
+```
+
+Et compléter l'import Vue (≈36) pour disposer de `ref` :
+
+```ts
+import {computed, ref, watch} from 'vue'
+```
+
+- [ ] **Step 2 : Ajouter les props `editable` et `invalidMessage`**
+
+Dans `defineProps<{...}>()`, ajouter après `clearable?: boolean` :
+
+```ts
+    editable?: boolean
+    invalidMessage?: string
+```
+
+Dans `withDefaults(..., { ... })`, ajouter après `clearable: true,` :
+
+```ts
+    editable: false,
+    invalidMessage: 'Date invalide',
+```
+
+- [ ] **Step 3 : Ajouter l'état d'erreur interne, la fusion, et les handlers**
+
+Juste après la ligne `const displayValue = computed(() => formatIsoToDisplay(props.modelValue ?? null))` (≈86), ajouter :
+
+```ts
+const internalError = ref('')
+const mergedError = computed(() => props.error || internalError.value)
+
+const onCommit = (text: string) => {
+  const trimmed = text.trim()
+  if (trimmed === '') {
+    internalError.value = ''
+    emit('update:modelValue', null)
+    return
+  }
+  const iso = parseDisplayToIso(trimmed)
+  if (iso && isDateInRange(iso, props.min, props.max)) {
+    internalError.value = ''
+    emit('update:modelValue', iso)
+    return
+  }
+  internalError.value = props.invalidMessage
+}
+
+const onClear = () => {
+  internalError.value = ''
+  emit('update:modelValue', null)
+}
+
+const onSelect = (iso: string, close: () => void) => {
+  internalError.value = ''
+  emit('update:modelValue', iso)
+  close()
+}
+```
+
+- [ ] **Step 4 : Brancher les props et events sur `CalendarField` dans le template**
+
+Dans `<CalendarField ...>`, remplacer `:error="error"` (≈13) par :
+
+```html
+    :error="mergedError"
+```
+
+Ajouter, juste après `:clearable="clearable"` (≈15) :
+
+```html
+    :editable="editable"
+```
+
+Remplacer `@clear="emit('update:modelValue', null)"` (≈20) par :
+
+```html
+    @clear="onClear"
+    @commit="onCommit"
+```
+
+- [ ] **Step 5 : Brancher la sélection calendrier sur `onSelect`**
+
+Remplacer (≈29) :
+
+```html
+        @select="(iso) => { emit('update:modelValue', iso); close() }"
+```
+
+par :
+
+```html
+        @select="(iso) => onSelect(iso, close)"
+```
+
+- [ ] **Step 6 : Lancer la suite Date pour vérifier la non-régression**
+
+Run : `npm run test -- Date.test.ts`
+Expected : PASS (les tests existants passent ; `mergedError` se comporte comme `error` tant qu'aucune saisie invalide n'est faite).
+
+- [ ] **Step 7 : Commit**
+
+```bash
+git add app/components/malio/date/Date.vue
+git commit -m "feat(date) : saisie manuelle MalioDate (parse, validation, erreur)"
+```
+
+---
+
+## Task 3 : Tests de la saisie manuelle
+
+**Files:**
+- Modify: `app/components/malio/date/Date.test.ts`
+
+- [ ] **Step 1 : Étendre le type de props de test**
+
+Dans le type `DateProps` (≈6-25), ajouter après `groupClass?: string` :
+
+```ts
+  editable?: boolean
+  invalidMessage?: string
+```
+
+- [ ] **Step 2 : Écrire le bloc de tests `saisie manuelle (editable)`**
+
+Ajouter, juste avant la fermeture du `describe('MalioDate', ...)` (avant la dernière `})` du fichier, après le bloc `describe('reserveMessageSpace', ...)`), le bloc suivant :
+
+```ts
+  describe('saisie manuelle (editable)', () => {
+    it('par défaut (editable=false) l\'input reste readonly et affiche la valeur', () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]')
+      expect(input.attributes('readonly')).toBeDefined()
+      expect((input.element as HTMLInputElement).value).toBe('19/05/2026')
+    })
+
+    it('editable=true : l\'input n\'est plus readonly', () => {
+      const wrapper = mountDate({editable: true})
+      expect(wrapper.get('[data-test="date-input"]').attributes('readonly')).toBeUndefined()
+    })
+
+    it('émet l\'ISO sur saisie clavier valide au blur', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('19/05/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
+    })
+
+    it('garde le texte et affiche « Date invalide » sur saisie invalide au blur', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('32/13/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect((input.element as HTMLInputElement).value).toBe('32/13/2026')
+      expect(input.attributes('aria-invalid')).toBe('true')
+      expect(wrapper.text()).toContain('Date invalide')
+    })
+
+    it('passe en erreur si la date saisie est hors min/max', async () => {
+      const wrapper = mountDate({editable: true, min: '2026-05-10', max: '2026-05-20'})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('25/12/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(wrapper.text()).toContain('Date invalide')
+    })
+
+    it('émet null sur saisie vidée au blur', async () => {
+      const wrapper = mountDate({editable: true, modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
+    })
+
+    it('efface l\'erreur de saisie quand on sélectionne une date au calendrier', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('32/13/2026')
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Date invalide')
+      await input.trigger('focus')
+      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
+      expect(wrapper.text()).not.toContain('Date invalide')
+    })
+
+    it('valide et ferme le popover sur Entrée', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.trigger('focus')
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
+      await input.setValue('19/05/2026')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+
+    it('utilise le message invalidMessage personnalisé', async () => {
+      const wrapper = mountDate({editable: true, invalidMessage: 'Format incorrect'})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('99/99/9999')
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Format incorrect')
+    })
+  })
+```
+
+- [ ] **Step 3 : Lancer les nouveaux tests**
+
+Run : `npm run test -- Date.test.ts`
+Expected : PASS (tous, anciens + nouveaux).
+
+Si un test de saisie échoue parce que `maska` a reformaté la valeur en jsdom autrement qu'attendu, inspecter la valeur réelle via un `console.log((input.element as HTMLInputElement).value)` et ajuster l'assertion (le masque `##/##/####` laisse les chiffres tels quels ; une entrée déjà bien formée n'est pas modifiée).
+
+- [ ] **Step 4 : Commit**
+
+```bash
+git add app/components/malio/date/Date.test.ts
+git commit -m "test(date) : couvre la saisie manuelle de MalioDate"
+```
+
+---
+
+## Task 4 : Documentation (COMPONENTS.md + CHANGELOG.md)
+
+**Files:**
+- Modify: `COMPONENTS.md`
+- Modify: `CHANGELOG.md`
+
+- [ ] **Step 1 : Ajouter les props au tableau `MalioDate` de `COMPONENTS.md`**
+
+Dans la section `## MalioDate`, dans le tableau des props, insérer juste après la ligne `| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |` :
+
+```markdown
+| `editable` | `boolean` | `false` | Autorise la saisie clavier `JJ/MM/AAAA` (masque maska, validation au blur) en plus du calendrier |
+| `invalidMessage` | `string` | `'Date invalide'` | Message affiché quand la saisie clavier est invalide ou hors `min`/`max` |
+```
+
+- [ ] **Step 2 : Compléter la description et l'exemple `MalioDate`**
+
+Dans la section `## MalioDate`, juste après la ligne de description `La valeur est une chaîne ISO ...`, ajouter le paragraphe :
+
+```markdown
+Avec `editable`, l'utilisateur peut aussi taper la date au clavier. La valeur n'est émise qu'au blur (ou sur Entrée) si elle est valide et dans les bornes ; sinon le texte est conservé et le champ passe en erreur (`invalidMessage`).
+```
+
+Dans le bloc d'exemple ```vue de cette section, ajouter une ligne avant la fermeture ``` :
+
+```vue
+<MalioDate v-model="date" label="Date de naissance" editable />
+```
+
+- [ ] **Step 3 : Ajouter l'entrée CHANGELOG**
+
+Dans `CHANGELOG.md`, sous `### Added`, ajouter à la fin de la liste (après la dernière puce `* [#MUI-41] InputEmail : ...`) :
+
+```markdown
+* [#MUI-42] MalioDate : saisie clavier `JJ/MM/AAAA` optionnelle (prop `editable`, masque maska, validation au blur, message `invalidMessage`)
+```
+
+- [ ] **Step 4 : Commit**
+
+```bash
+git add COMPONENTS.md CHANGELOG.md
+git commit -m "docs(date) : documente la saisie manuelle de MalioDate"
+```
+
+---
+
+## Task 5 : Exemples playground + story
+
+**Files:**
+- Modify: `.playground/pages/composant/date/date.vue`
+- Modify: `app/story/date/datePicker.story.vue`
+
+- [ ] **Step 1 : Ajouter un bloc éditable dans la page playground**
+
+Dans `.playground/pages/composant/date/date.vue`, dans la première colonne `Large (480px)`, juste après le `<div class="rounded border p-3 text-sm">...</div>` qui affiche la valeur ISO (≈13-15), ajouter :
+
+```html
+        <MalioDate
+          v-model="editableValue"
+          label="Date (saisie clavier)"
+          editable
+          hint="Tape JJ/MM/AAAA ou utilise le calendrier"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur éditable (ISO) : <code>{{ editableValue ?? 'null' }}</code></p>
+        </div>
+```
+
+- [ ] **Step 2 : Déclarer la ref dans le `<script setup>` de la page playground**
+
+Dans le `<script setup>` du même fichier, après `const bounded = ref<string | null>(null)`, ajouter :
+
+```ts
+const editableValue = ref<string | null>(null)
+```
+
+- [ ] **Step 3 : Ajouter un exemple éditable dans la story**
+
+Dans `app/story/date/datePicker.story.vue`, ajouter une nouvelle carte juste après le bloc `<!-- Avec min/max -->` (le `<div class="rounded-lg border p-4">` qui contient « Avec min/max »), avant le bloc « Non effaçable » :
+
+```html
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Saisie clavier (editable)</h2>
+        <MalioDate
+          v-model="editableValue"
+          label="Date de naissance"
+          editable
+          hint="Tape JJ/MM/AAAA ou utilise le calendrier"
+        />
+      </div>
+```
+
+- [ ] **Step 4 : Déclarer la ref dans le `<script setup>` de la story**
+
+Dans le `<script setup>` du même fichier, après `const errorValue = ref<string | null>(null)`, ajouter :
+
+```ts
+const editableValue = ref<string | null>(null)
+```
+
+- [ ] **Step 5 : Vérifier que rien ne casse (lint + build des types)**
+
+Run : `npm run lint`
+Expected : PASS (aucune erreur sur les fichiers modifiés).
+
+- [ ] **Step 6 : Commit**
+
+```bash
+git add .playground/pages/composant/date/date.vue app/story/date/datePicker.story.vue
+git commit -m "docs(date) : exemples saisie manuelle (playground + story)"
+```
+
+---
+
+## Task 6 : Vérification finale
+
+- [ ] **Step 1 : Lancer toute la suite de tests**
+
+Run : `npm run test -- Date.test.ts`
+Expected : PASS — l'ensemble du fichier (anciens + 9 nouveaux tests).
+
+- [ ] **Step 2 : Lancer le lint global**
+
+Run : `npm run lint`
+Expected : PASS.
+
+- [ ] **Step 3 : Vérification manuelle dans le playground (optionnel mais recommandé)**
+
+Run : `npm run dev` puis ouvrir la page `composant/date`.
+Vérifier :
+- Taper `19/05/2026` puis cliquer ailleurs → la valeur ISO affichée devient `2026-05-19`.
+- Taper `32/13/2026` puis blur → le texte reste, le champ passe en rouge avec « Date invalide ».
+- Avec une saisie invalide, ouvrir le calendrier et choisir un jour → l'erreur disparaît, la valeur se met à jour.
+- Le focus dans le champ ouvre bien le calendrier, et taper reste possible.
+- Sur le champ `editable=false` existant : aucun changement (lecture seule).
+
+---
+
+## Self-Review
+
+**Spec coverage :**
+- Prop `editable` opt-in (défaut false) → Task 1 Step 2, Task 2 Step 2.
+- Masque `##/##/####` + focus ouvre le popover → Task 1 Steps 4/6/7.
+- Validation au blur, pas à la frappe → Task 1 (onInput ne valide pas) + Task 2 (onCommit).
+- Saisie invalide : garde le texte + erreur visuelle → Task 2 Step 3 + Task 3 test dédié.
+- Message par défaut « Date invalide », surchargeable → Task 2 Step 2.
+- Touche Entrée commit + ferme popover → Task 1 Step 6 (`onEnter`) + Task 3 test.
+- Hors min/max = invalide → Task 2 (`isDateInRange`) + Task 3 test.
+- Sélection calendrier efface l'erreur → Task 2 Step 5 (`onSelect`) + Task 3 test.
+- `disabled`/`readonly` priment → Task 1 (`inputReadonly`, gardes dans handlers).
+- Non-régression `editable=false` → Task 1 Step 8 + Task 3 test readonly.
+- Docs COMPONENTS.md + CHANGELOG.md + playground/story → Tasks 4 et 5.
+
+**Placeholder scan :** aucun TODO/TBD ; tout le code est fourni intégralement.
+
+**Type consistency :** `editable`/`invalidMessage` (props), `commit` (event CalendarField), `onCommit`/`onClear`/`onSelect`/`internalError`/`mergedError` (MalioDate), `draft`/`maskaOptions`/`inputReadonly`/`onFocus`/`onInput`/`onBlur`/`onEnter` (CalendarField) — noms cohérents entre tâches. `onCommit(text: string)` correspond à l'event `commit(value: string)`. `onSelect(iso: string, close: () => void)` correspond à la signature du slot (`close` exposé par `CalendarField`).
-- 
2.39.5


From d01875750c7850382432e98375905640741fbec9 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 11:50:50 +0200
Subject: [PATCH 03/38] feat(date) : mode editable dans CalendarField (saisie
 clavier)

---
 .../malio/date/internal/CalendarField.vue     | 60 +++++++++++++++++--
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/app/components/malio/date/internal/CalendarField.vue b/app/components/malio/date/internal/CalendarField.vue
index 35d02e1..7c40a9a 100644
--- a/app/components/malio/date/internal/CalendarField.vue
+++ b/app/components/malio/date/internal/CalendarField.vue
@@ -6,14 +6,15 @@
     >
       <input
         :id="inputId"
+        v-maska="maskaOptions"
         :name="name"
         data-test="date-input"
-        readonly
+        :readonly="inputReadonly"
         autocomplete="off"
         :class="mergedInputClass"
         :required="required"
         :disabled="disabled"
-        :value="displayValue"
+        :value="editable ? draft : displayValue"
         :aria-invalid="!!error"
         :aria-describedby="describedBy"
         :aria-expanded="isOpen"
@@ -22,6 +23,10 @@
         placeholder="_"
         type="text"
         @click="onFieldClick"
+        @focus="onFocus"
+        @input="onInput"
+        @blur="onBlur"
+        @keydown.enter.prevent="onEnter"
       >
 
       <label
@@ -102,6 +107,8 @@
 import {computed, ref, useAttrs, useId, watch} from 'vue'
 import {Icon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import {vMaska} from 'maska/vue'
+import type {MaskInputOptions} from 'maska'
 import MalioRequiredMark from '../../shared/RequiredMark.vue'
 import CalendarHeader from './CalendarHeader.vue'
 import MonthPicker from './MonthPicker.vue'
@@ -125,6 +132,7 @@ const props = withDefaults(
     error?: string
     success?: string
     clearable?: boolean
+    editable?: boolean
     inputClass?: string
     labelClass?: string
     groupClass?: string
@@ -142,6 +150,7 @@ const props = withDefaults(
     error: '',
     success: '',
     clearable: true,
+    editable: false,
     inputClass: '',
     labelClass: '',
     groupClass: '',
@@ -149,19 +158,32 @@ const props = withDefaults(
   },
 )
 
-const emit = defineEmits<{(e: 'clear' | 'close'): void}>()
+const emit = defineEmits<{
+  (e: 'clear' | 'close'): void
+  (e: 'commit', value: string): void
+}>()
 
 const attrs = useAttrs()
 const generatedId = useId()
 const root = ref<HTMLElement | null>(null)
 
+const draft = ref(props.displayValue)
+const maskaOptions = computed<MaskInputOptions>(() => ({mask: props.editable ? '##/##/####' : undefined}))
+const inputReadonly = computed(() => !props.editable || props.readonly || props.disabled)
+
+watch(() => props.displayValue, (value) => {
+  draft.value = value
+})
+
 const {isOpen, viewMode, open, close: closePopover, toggleView} = useCalendarPopover(root)
 const {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso} = useCalendarView(viewMode)
 
 const inputId = computed(() => props.id?.toString() || `malio-date-${generatedId}`)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
-const isFilled = computed(() => props.displayValue.length > 0)
+const isFilled = computed(() =>
+  (props.editable ? draft.value.length : props.displayValue.length) > 0,
+)
 const isReadonly = computed(() => props.readonly && !props.disabled)
 const showClear = computed(() =>
   props.clearable && isFilled.value && !props.disabled && !props.readonly,
@@ -176,6 +198,13 @@ watch(isOpen, (value) => {
 
 const onFieldClick = () => {
   if (props.disabled || props.readonly) return
+  if (props.editable) {
+    if (!isOpen.value) {
+      syncToIso(props.syncTo)
+      open()
+    }
+    return
+  }
   if (isOpen.value) {
     closePopover()
     return
@@ -184,6 +213,29 @@ const onFieldClick = () => {
   open()
 }
 
+const onFocus = () => {
+  if (props.disabled || props.readonly || !props.editable) return
+  if (!isOpen.value) {
+    syncToIso(props.syncTo)
+    open()
+  }
+}
+
+const onInput = (event: Event) => {
+  draft.value = (event.target as HTMLInputElement).value
+}
+
+const onBlur = () => {
+  if (!props.editable) return
+  emit('commit', draft.value)
+}
+
+const onEnter = () => {
+  if (!props.editable) return
+  emit('commit', draft.value)
+  closePopover()
+}
+
 watch(() => props.syncTo, (value) => {
   if (isOpen.value) syncToIso(value)
 })
-- 
2.39.5


From 58f7744326cf0fabb79efeebdfbd6e4b82546cc9 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 11:54:52 +0200
Subject: [PATCH 04/38] feat(date) : saisie manuelle MalioDate (parse,
 validation, erreur)

---
 app/components/malio/date/Date.vue | 46 ++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/app/components/malio/date/Date.vue b/app/components/malio/date/Date.vue
index 65bd880..35f05ef 100644
--- a/app/components/malio/date/Date.vue
+++ b/app/components/malio/date/Date.vue
@@ -10,14 +10,16 @@
     :disabled="disabled"
     :readonly="readonly"
     :hint="hint"
-    :error="error"
+    :error="mergedError"
     :success="success"
     :clearable="clearable"
+    :editable="editable"
     :input-class="inputClass"
     :label-class="labelClass"
     :group-class="groupClass"
     v-bind="$attrs"
-    @clear="emit('update:modelValue', null)"
+    @clear="onClear"
+    @commit="onCommit"
   >
     <template #default="{ currentMonth, currentYear, close }">
       <MonthGrid
@@ -26,17 +28,17 @@
         :selected-date="modelValue ?? null"
         :min="min"
         :max="max"
-        @select="(iso) => { emit('update:modelValue', iso); close() }"
+        @select="(iso) => onSelect(iso, close)"
       />
     </template>
   </CalendarField>
 </template>
 
 <script setup lang="ts">
-import {computed, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
-import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
+import {formatIsoToDisplay, isDateInRange, isValidIso, parseDisplayToIso} from './composables/dateFormat'
 
 defineOptions({name: 'MalioDate', inheritAttrs: false})
 
@@ -56,6 +58,8 @@ const props = withDefaults(
     min?: string
     max?: string
     clearable?: boolean
+    editable?: boolean
+    invalidMessage?: string
     inputClass?: string
     labelClass?: string
     groupClass?: string
@@ -75,6 +79,8 @@ const props = withDefaults(
     min: undefined,
     max: undefined,
     clearable: true,
+    editable: false,
+    invalidMessage: 'Date invalide',
     inputClass: '',
     labelClass: '',
     groupClass: '',
@@ -85,6 +91,36 @@ const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>
 
 const displayValue = computed(() => formatIsoToDisplay(props.modelValue ?? null))
 
+const internalError = ref('')
+const mergedError = computed(() => props.error || internalError.value)
+
+const onCommit = (text: string) => {
+  const trimmed = text.trim()
+  if (trimmed === '') {
+    internalError.value = ''
+    emit('update:modelValue', null)
+    return
+  }
+  const iso = parseDisplayToIso(trimmed)
+  if (iso && isDateInRange(iso, props.min, props.max)) {
+    internalError.value = ''
+    emit('update:modelValue', iso)
+    return
+  }
+  internalError.value = props.invalidMessage
+}
+
+const onClear = () => {
+  internalError.value = ''
+  emit('update:modelValue', null)
+}
+
+const onSelect = (iso: string, close: () => void) => {
+  internalError.value = ''
+  emit('update:modelValue', iso)
+  close()
+}
+
 watch(() => props.modelValue, (val) => {
   if (val && !isValidIso(val) && import.meta.dev) {
     console.warn(`[MalioDate] modelValue invalide ignoré : "${val}"`)
-- 
2.39.5


From 9e0c32e9f70b6ea3a3bf7de08bc6ea4c262757c7 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 11:58:41 +0200
Subject: [PATCH 05/38] fix(date) : efface l'erreur de saisie manuelle quand
 modelValue change

---
 app/components/malio/date/Date.test.ts | 14 ++++++++++++++
 app/components/malio/date/Date.vue     |  1 +
 2 files changed, 15 insertions(+)

diff --git a/app/components/malio/date/Date.test.ts b/app/components/malio/date/Date.test.ts
index e10dbb9..5b57d08 100644
--- a/app/components/malio/date/Date.test.ts
+++ b/app/components/malio/date/Date.test.ts
@@ -18,6 +18,8 @@ type DateProps = {
   min?: string
   max?: string
   clearable?: boolean
+  editable?: boolean
+  invalidMessage?: string
   inputClass?: string
   labelClass?: string
   groupClass?: string
@@ -258,4 +260,16 @@ describe('MalioDate', () => {
       expect(msg.classes()).not.toContain('min-h-[1rem]')
     })
   })
+
+  describe('saisie manuelle (editable)', () => {
+    it('efface l\'erreur de saisie quand modelValue change de l\'extérieur', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('32/13/2026')
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Date invalide')
+      await wrapper.setProps({modelValue: '2026-05-19'})
+      expect(wrapper.text()).not.toContain('Date invalide')
+    })
+  })
 })
diff --git a/app/components/malio/date/Date.vue b/app/components/malio/date/Date.vue
index 35f05ef..9fa4d91 100644
--- a/app/components/malio/date/Date.vue
+++ b/app/components/malio/date/Date.vue
@@ -122,6 +122,7 @@ const onSelect = (iso: string, close: () => void) => {
 }
 
 watch(() => props.modelValue, (val) => {
+  internalError.value = ''
   if (val && !isValidIso(val) && import.meta.dev) {
     console.warn(`[MalioDate] modelValue invalide ignoré : "${val}"`)
   }
-- 
2.39.5


From 77c0edb0aee2d2d4f5b09b66e752a321a40d592a Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 12:00:41 +0200
Subject: [PATCH 06/38] test(date) : couvre la saisie manuelle de MalioDate

---
 app/components/malio/date/Date.test.ts | 79 ++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/app/components/malio/date/Date.test.ts b/app/components/malio/date/Date.test.ts
index 5b57d08..1dd79aa 100644
--- a/app/components/malio/date/Date.test.ts
+++ b/app/components/malio/date/Date.test.ts
@@ -271,5 +271,84 @@ describe('MalioDate', () => {
       await wrapper.setProps({modelValue: '2026-05-19'})
       expect(wrapper.text()).not.toContain('Date invalide')
     })
+
+    it('par défaut (editable=false) l\'input reste readonly et affiche la valeur', () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]')
+      expect(input.attributes('readonly')).toBeDefined()
+      expect((input.element as HTMLInputElement).value).toBe('19/05/2026')
+    })
+
+    it('editable=true : l\'input n\'est plus readonly', () => {
+      const wrapper = mountDate({editable: true})
+      expect(wrapper.get('[data-test="date-input"]').attributes('readonly')).toBeUndefined()
+    })
+
+    it('émet l\'ISO sur saisie clavier valide au blur', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('19/05/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
+    })
+
+    it('garde le texte et affiche « Date invalide » sur saisie invalide au blur', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('32/13/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect((input.element as HTMLInputElement).value).toBe('32/13/2026')
+      expect(input.attributes('aria-invalid')).toBe('true')
+      expect(wrapper.text()).toContain('Date invalide')
+    })
+
+    it('passe en erreur si la date saisie est hors min/max', async () => {
+      const wrapper = mountDate({editable: true, min: '2026-05-10', max: '2026-05-20'})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('25/12/2026')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(wrapper.text()).toContain('Date invalide')
+    })
+
+    it('émet null sur saisie vidée au blur', async () => {
+      const wrapper = mountDate({editable: true, modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
+    })
+
+    it('efface l\'erreur de saisie quand on sélectionne une date au calendrier', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('32/13/2026')
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Date invalide')
+      await input.trigger('focus')
+      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
+      expect(wrapper.text()).not.toContain('Date invalide')
+    })
+
+    it('valide et ferme le popover sur Entrée', async () => {
+      const wrapper = mountDate({editable: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.trigger('focus')
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
+      await input.setValue('19/05/2026')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+
+    it('utilise le message invalidMessage personnalisé', async () => {
+      const wrapper = mountDate({editable: true, invalidMessage: 'Format incorrect'})
+      const input = wrapper.get('[data-test="date-input"]')
+      await input.setValue('99/99/9999')
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Format incorrect')
+    })
   })
 })
-- 
2.39.5


From 520aaf22163ff54a6b708da3ae5f2024f3a80a25 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 12:04:30 +0200
Subject: [PATCH 07/38] docs(date) : documente la saisie manuelle de MalioDate

---
 CHANGELOG.md  | 1 +
 COMPONENTS.md | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3a0d0b..4f63e1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,7 @@ Liste des évolutions de la librairie Malio layer UI
 * Token Tailwind partagé `w-m-btn-action` (150px) exposé via `tailwind.config.ts` + CSS var `--m-btn-action-width` dans `malio.css` — utilisable côté consommateur pour les boutons d'action (`<MalioButton button-class="w-m-btn-action" />`), themable en redéfinissant la CSS var
 * [#MUI-41] Prop `required` cohérente + astérisque rouge dans le label sur la famille formulaire (Select, SelectCheckbox, InputUpload, InputRichText gagnent la prop)
 * [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`)
+* [#MUI-42] MalioDate : saisie clavier `JJ/MM/AAAA` optionnelle (prop `editable`, masque maska, validation au blur, message `invalidMessage`)
 
 ### Changed
 * MalioButton : dimensions par défaut `w-[180px]` / `h-[38px]` (étaient `w-[200px]` / `h-[40px]`).
diff --git a/COMPONENTS.md b/COMPONENTS.md
index fcc7332..447784a 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -481,6 +481,8 @@ Sélecteur de date unique avec popover (grille de calendrier + vue mois/année).
 
 La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et ferme le popover.
 
+Avec `editable`, l'utilisateur peut aussi taper la date au clavier. La valeur n'est émise qu'au blur (ou sur Entrée) si elle est valide et dans les bornes ; sinon le texte est conservé et le champ passe en erreur (`invalidMessage`).
+
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `modelValue` | `string \| null` | `undefined` | Date ISO `"YYYY-MM-DD"` (v-model) |
@@ -497,6 +499,8 @@ La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et f
 | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` (jours antérieurs désactivés) |
 | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` (jours postérieurs désactivés) |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
+| `editable` | `boolean` | `false` | Autorise la saisie clavier `JJ/MM/AAAA` (masque maska, validation au blur) en plus du calendrier |
+| `invalidMessage` | `string` | `'Date invalide'` | Message affiché quand la saisie clavier est invalide ou hors `min`/`max` |
 | `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 
@@ -506,6 +510,7 @@ La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et f
 <MalioDate v-model="date" label="Date de naissance" />
 <!-- date === "2026-05-20" -->
 <MalioDate v-model="rdv" label="Rendez-vous" :min="todayIso" :max="maxIso" />
+<MalioDate v-model="date" label="Date de naissance" editable />
 ```
 
 ---
-- 
2.39.5


From 36e0d933c00f2d6e14e350d14c8780ba0d1b5122 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 12:06:17 +0200
Subject: [PATCH 08/38] docs(date) : exemples saisie manuelle (playground +
 story)

---
 .playground/pages/composant/date/date.vue | 10 ++++++++++
 app/story/date/datePicker.story.vue       | 11 +++++++++++
 2 files changed, 21 insertions(+)

diff --git a/.playground/pages/composant/date/date.vue b/.playground/pages/composant/date/date.vue
index ec73c15..7d50df5 100644
--- a/.playground/pages/composant/date/date.vue
+++ b/.playground/pages/composant/date/date.vue
@@ -13,6 +13,15 @@
         <div class="rounded border p-3 text-sm">
           <p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
         </div>
+        <MalioDate
+          v-model="editableValue"
+          label="Date (saisie clavier)"
+          editable
+          hint="Tape JJ/MM/AAAA ou utilise le calendrier"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur éditable (ISO) : <code>{{ editableValue ?? 'null' }}</code></p>
+        </div>
         <div class="flex gap-2">
           <button
             type="button"
@@ -85,4 +94,5 @@ const readonlyFilledDate = ref<string | null>('2026-06-15')
 const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
+const editableValue = ref<string | null>(null)
 </script>
diff --git a/app/story/date/datePicker.story.vue b/app/story/date/datePicker.story.vue
index 5c6248f..936b56a 100644
--- a/app/story/date/datePicker.story.vue
+++ b/app/story/date/datePicker.story.vue
@@ -28,6 +28,16 @@
         />
       </div>
 
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Saisie clavier (editable)</h2>
+        <MalioDate
+          v-model="editableValue"
+          label="Date de naissance"
+          editable
+          hint="Tape JJ/MM/AAAA ou utilise le calendrier"
+        />
+      </div>
+
       <div class="rounded-lg border p-4">
         <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
         <MalioDate
@@ -91,4 +101,5 @@ const simpleValue = ref<string | null>(null)
 const initialValue = ref<string | null>(todayIso)
 const boundedValue = ref<string | null>(null)
 const errorValue = ref<string | null>(null)
+const editableValue = ref<string | null>(null)
 </script>
-- 
2.39.5


From f926ae830c729e2a2d81a7d4ee678e3f0eaccf31 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 12:38:18 +0200
Subject: [PATCH 09/38] docs(email) : spec bouton + d'ajout sur MalioInputEmail

---
 ...26-06-09-inputemail-bouton-ajout-design.md | 157 ++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-09-inputemail-bouton-ajout-design.md

diff --git a/docs/superpowers/specs/2026-06-09-inputemail-bouton-ajout-design.md b/docs/superpowers/specs/2026-06-09-inputemail-bouton-ajout-design.md
new file mode 100644
index 0000000..49fb14f
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-09-inputemail-bouton-ajout-design.md
@@ -0,0 +1,157 @@
+# MalioInputEmail — bouton « + » d'ajout (event `add`)
+
+**Date :** 2026-06-09
+**Statut :** Validé, prêt pour plan d'implémentation
+**Périmètre :** `MalioInputEmail` uniquement.
+
+## Objectif
+
+Ajouter à `MalioInputEmail` le même bouton « + » que `MalioInputPhone` : un bouton optionnel à droite du champ qui émet un event `add`, permettant au consommateur d'ajouter dynamiquement un autre champ email (ou toute autre action).
+
+La logique email existante (ajoutée en MUI-41) est **conservée intégralement** : `sanitizeEmail` (suppression des espaces), prop `lowercase`, gestion du caret dans `onInput`, `type="email"` / `inputmode="email"`. Ce travail n'y touche pas.
+
+## Décisions validées
+
+| Sujet | Décision |
+|-------|----------|
+| API | Calquée sur `MalioInputPhone` : props `addable` / `addIconName` / `addButtonLabel`, event `add`, `data-test="add-button"`. |
+| Collision icône/bouton | L'icône email étant à droite par défaut, quand `addable` est actif l'icône passe **automatiquement à gauche** et le « + » occupe la droite (disposition éprouvée de Phone). |
+| Libellé par défaut | `addButtonLabel` défaut `'Ajouter une adresse email'`. |
+| Garde désactivé | Le bouton n'émet pas `add` si `disabled` ou `readonly` (comme Phone). |
+| Approche | Recopier le pattern de Phone dans Email (pas d'extraction d'un composant partagé — noté comme cleanup futur possible, hors scope). |
+
+## Conception détaillée
+
+### 1. Props ajoutées (interface + défauts)
+
+```ts
+    addable?: boolean       // défaut: false
+    addIconName?: string    // défaut: 'mdi:plus'
+    addButtonLabel?: string // défaut: 'Ajouter une adresse email'
+```
+
+### 2. Event ajouté
+
+L'`defineEmits` passe de :
+```ts
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+```
+à :
+```ts
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+  (event: 'add'): void
+}>()
+```
+
+### 3. Position d'icône « effective »
+
+Nouvelle règle, unique source du repositionnement :
+```ts
+const effectiveIconPosition = computed(() =>
+  props.addable && props.iconName ? 'left' : props.iconPosition,
+)
+```
+
+Les quatre computeds qui dépendent aujourd'hui de `props.iconPosition` utilisent désormais `effectiveIconPosition.value` :
+- `iconInputPaddingClass`
+- `iconPositionClass`
+- `labelPositionClass`
+- `focusPaddingClass`
+
+Conséquence :
+- `addable=false` → `effectiveIconPosition === props.iconPosition` → comportement **strictement identique** à aujourd'hui.
+- `addable=true` (avec une icône) → icône à gauche + espace réservé à droite pour le bouton.
+
+### 4. `iconInputPaddingClass` aligné sur Phone
+
+Remplacement de l'implémentation actuelle d'Email par la forme éprouvée de Phone (rendu identique dans le cas non-addable car la classe de base `pl-3 pr-3` est commune aux deux composants) :
+```ts
+const iconInputPaddingClass = computed(() => {
+  const leftIcon = props.iconName && effectiveIconPosition.value === 'left'
+  const rightIcon = props.iconName && effectiveIconPosition.value === 'right'
+  const parts: string[] = []
+  if (leftIcon) parts.push('!pl-11')
+  if (rightIcon || props.addable) parts.push('!pr-10')
+  return parts.join(' ')
+})
+```
+
+### 5. Bouton dans le template
+
+Inséré après le bloc `<IconifyIcon v-if="iconName">`, à l'identique de Phone :
+```html
+      <button
+        v-if="addable"
+        type="button"
+        :disabled="disabled"
+        :aria-label="addButtonLabel"
+        data-test="add-button"
+        :class="mergedAddButtonClass"
+        @click="onAdd"
+      >
+        <IconifyIcon
+          :icon="addIconName"
+          :width="24"
+          :height="24"
+          data-test="add-icon"
+        />
+      </button>
+```
+
+### 6. `mergedAddButtonClass` (copie de Phone)
+
+```ts
+const mergedAddButtonClass = computed(() =>
+  twMerge(
+    'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-70',
+    iconStateClass.value,
+    props.disabled ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
+  ),
+)
+```
+(`iconStateClass` existe déjà dans Email.)
+
+### 7. Handler `onAdd` (copie de Phone)
+
+```ts
+const onAdd = () => {
+  if (props.disabled || props.readonly) return
+  emit('add')
+}
+```
+
+## Quatre computeds à modifier — détail
+
+Aujourd'hui dans `InputEmail.vue` ils référencent `props.iconPosition` ; ils doivent référencer `effectiveIconPosition.value`. Les corps restent identiques par ailleurs :
+- `iconPositionClass` : `effectiveIconPosition.value === 'left' ? 'left-[10px]' : 'right-[10px]'`
+- `labelPositionClass` : `props.iconName && effectiveIconPosition.value === 'left' ? 'left-11' : 'left-3'`
+- `focusPaddingClass` : `props.iconName && effectiveIconPosition.value === 'left' ? 'focus:!pl-11' : 'focus:pl-[11px]'`
+- `iconInputPaddingClass` : remplacé par la version §4.
+
+## Tests (`InputEmail.test.ts`)
+
+Ajouts (mirroring `InputPhone.test.ts`), sans toucher aux tests existants de sanitisation/lowercase :
+- `addable=false` (défaut) → pas de `[data-test="add-button"]`.
+- `addable=true` → `[data-test="add-button"]` présent.
+- Clic sur le bouton → un event `add` émis (longueur 1).
+- `addable + disabled` → clic n'émet pas `add` ; le bouton a l'attribut `disabled`.
+- `addable + readonly` → clic n'émet pas `add` ; le bouton n'a PAS l'attribut natif `disabled` (la garde `onAdd` bloque).
+- `addable=true` avec icône → l'icône email est positionnée à gauche (`left-[10px]` présent / `right-[10px]` absent sur l'icône `[data-test="icon"]`).
+- Non-régression : avec `addable=false`, l'icône reste à droite (`right-[10px]`).
+- `addButtonLabel` personnalisé → `aria-label` respecté ; défaut → `'Ajouter une adresse email'`.
+
+## Livrables documentaires
+
+- `COMPONENTS.md` : ajouter les lignes `addable` / `addIconName` / `addButtonLabel` et l'event `add()` dans la section `## MalioInputEmail`, plus un exemple `<MalioInputEmail ... addable @add="..." />`.
+- `CHANGELOG.md` : entrée sous `### Added`.
+- Story `app/story/input/inputEmail.story.vue` : une carte « Addable » avec `@add` (calquée sur `inputPhone.story.vue`).
+- Playground `.playground/pages/composant/input/inputEmail.vue` : un exemple `addable` avec un handler qui illustre l'ajout d'un champ.
+
+## Hors périmètre
+
+- Extraction d'un composant/bouton partagé entre Phone et Email (refactor dédié futur).
+- Gestion réelle de la liste de champs email côté composant (c'est au consommateur de réagir à l'event `add`, comme pour Phone).
+- Toute modification de la logique de sanitisation / `lowercase` / caret existante.
-- 
2.39.5


From 1296f62ccfcec9b970eb48a6e4515beb7b313fd4 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 12:46:17 +0200
Subject: [PATCH 10/38] =?UTF-8?q?docs(email)=20:=20plan=20impl=C3=A9mentat?=
 =?UTF-8?q?ion=20bouton=20+=20d'ajout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2026-06-09-inputemail-bouton-ajout.md     | 458 ++++++++++++++++++
 1 file changed, 458 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-09-inputemail-bouton-ajout.md

diff --git a/docs/superpowers/plans/2026-06-09-inputemail-bouton-ajout.md b/docs/superpowers/plans/2026-06-09-inputemail-bouton-ajout.md
new file mode 100644
index 0000000..4f344d1
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-09-inputemail-bouton-ajout.md
@@ -0,0 +1,458 @@
+# MalioInputEmail — bouton « + » d'ajout — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Ajouter à `MalioInputEmail` un bouton « + » optionnel (prop `addable`) qui émet un event `add`, calqué sur `MalioInputPhone`, sans toucher à la logique de sanitisation email existante.
+
+**Architecture:** Recopie du pattern `addable` de `InputPhone.vue` dans `InputEmail.vue` (props `addable`/`addIconName`/`addButtonLabel`, event `add`, bouton `data-test="add-button"`). L'icône email étant à droite par défaut, une nouvelle computed `effectiveIconPosition` la force à gauche quand `addable` est actif, libérant la droite pour le bouton. Aucune modification de `onInput`/`sanitizeEmail`/`lowercase`.
+
+**Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, `@iconify/vue` (Icon), `tailwind-merge`, Vitest + `@vue/test-utils` (jsdom).
+
+**Référence spec :** `docs/superpowers/specs/2026-06-09-inputemail-bouton-ajout-design.md`
+
+---
+
+## File Structure
+
+- **Modify** `app/components/malio/input/InputEmail.vue` — props `addable`/`addIconName`/`addButtonLabel`, event `add`, `effectiveIconPosition`, 4 computeds repointées, bouton + handler `onAdd` + `mergedAddButtonClass`.
+- **Modify** `app/components/malio/input/InputEmail.test.ts` — tests du bouton + repositionnement icône.
+- **Modify** `COMPONENTS.md` — props + event + exemple.
+- **Modify** `CHANGELOG.md` — entrée de version.
+- **Modify** `app/story/input/inputEmail.story.vue` — carte « addable ».
+- **Modify** `.playground/pages/composant/input/inputEmail.vue` — exemple d'ajout dynamique.
+
+**Note hooks pré-commit :** le repo a un hook `make pre-commit` (lint + suite complète ~888 tests) KNOWN FLAKY (timeouts 5000ms intermittents sur des fichiers SANS rapport). Si un commit échoue uniquement sur un timeout de test sans rapport, relancer une fois ; si ça reflake, `git commit --no-verify`. Toujours stager des fichiers explicites — **jamais** `git add -A` (le `nuxt.config.ts` et `.playground/pages/composant/radio/radioButton.vue` modifiés localement ne doivent PAS être committés).
+
+Le composant de référence est `app/components/malio/input/InputPhone.vue` (le pattern `addable` y est déjà implémenté à l'identique).
+
+---
+
+## Task 1 : `InputEmail.vue` — bouton addable + icône effective
+
+**Files:**
+- Modify: `app/components/malio/input/InputEmail.vue`
+
+Comportement attendu : `addable=false` (défaut) ⇒ rendu strictement inchangé ; `addable=true` ⇒ bouton « + » à droite, icône email à gauche, event `add` émis au clic (sauf `disabled`/`readonly`).
+
+- [ ] **Step 1 : Ajouter les props `addable`/`addIconName`/`addButtonLabel`**
+
+Dans `defineProps<{...}>()`, ajouter ces trois lignes juste après `iconColor?: string` :
+```ts
+    addable?: boolean
+    addIconName?: string
+    addButtonLabel?: string
+```
+Dans `withDefaults(..., { ... })`, ajouter juste après `iconColor: 'text-m-muted',` :
+```ts
+    addable: false,
+    addIconName: 'mdi:plus',
+    addButtonLabel: 'Ajouter une adresse email',
+```
+
+- [ ] **Step 2 : Ajouter l'event `add`**
+
+Remplacer :
+```ts
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+```
+par :
+```ts
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+  (event: 'add'): void
+}>()
+```
+
+- [ ] **Step 3 : Ajouter le handler `onAdd`**
+
+Juste après la fonction `onInput` (après son `}` de fermeture, avant `const iconInputPaddingClass`), ajouter :
+```ts
+const onAdd = () => {
+  if (props.disabled || props.readonly) return
+  emit('add')
+}
+```
+
+- [ ] **Step 4 : Ajouter `effectiveIconPosition` et réécrire `iconInputPaddingClass`**
+
+Remplacer le bloc actuel :
+```ts
+const iconInputPaddingClass = computed(() => {
+  if (!props.iconName) return ''
+  return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3 !pr-10'
+})
+```
+par :
+```ts
+const effectiveIconPosition = computed(() =>
+  props.addable && props.iconName ? 'left' : props.iconPosition,
+)
+
+const iconInputPaddingClass = computed(() => {
+  const leftIcon = props.iconName && effectiveIconPosition.value === 'left'
+  const rightIcon = props.iconName && effectiveIconPosition.value === 'right'
+  const parts: string[] = []
+  if (leftIcon) parts.push('!pl-11')
+  if (rightIcon || props.addable) parts.push('!pr-10')
+  return parts.join(' ')
+})
+```
+
+- [ ] **Step 5 : Repointer `labelPositionClass`, `focusPaddingClass`, `iconPositionClass` sur `effectiveIconPosition`**
+
+Remplacer :
+```ts
+const labelPositionClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'left-11'
+  return 'left-3'
+})
+
+const focusPaddingClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
+  return 'focus:pl-[11px]'
+})
+
+const iconPositionClass = computed(() => {
+  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
+  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
+})
+```
+par :
+```ts
+const labelPositionClass = computed(() => {
+  if (props.iconName && effectiveIconPosition.value === 'left') return 'left-11'
+  return 'left-3'
+})
+
+const focusPaddingClass = computed(() => {
+  if (props.iconName && effectiveIconPosition.value === 'left') return 'focus:!pl-11'
+  return 'focus:pl-[11px]'
+})
+
+const iconPositionClass = computed(() => {
+  const sideClass = effectiveIconPosition.value === 'left' ? 'left-[10px]' : 'right-[10px]'
+  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
+})
+```
+
+- [ ] **Step 6 : Ajouter la computed `mergedAddButtonClass`**
+
+Juste après la computed `mergedLabelClass` (après son `)` de fermeture, avant `const describedBy`), ajouter :
+```ts
+const mergedAddButtonClass = computed(() =>
+  twMerge(
+    'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-70',
+    iconStateClass.value,
+    props.disabled ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
+  ),
+)
+```
+
+- [ ] **Step 7 : Ajouter le bouton dans le template**
+
+Dans le template, juste après le bloc `<IconifyIcon v-if="iconName" ... />` (sa balise fermante `/>`) et avant la `</div>` qui ferme le conteneur du champ, insérer :
+```html
+      <button
+        v-if="addable"
+        type="button"
+        :disabled="disabled"
+        :aria-label="addButtonLabel"
+        data-test="add-button"
+        :class="mergedAddButtonClass"
+        @click="onAdd"
+      >
+        <IconifyIcon
+          :icon="addIconName"
+          :width="24"
+          :height="24"
+          data-test="add-icon"
+        />
+      </button>
+```
+
+- [ ] **Step 8 : Vérifier la non-régression**
+
+Run : `npm run test -- InputEmail.test.ts`
+Expected : PASS — tous les tests existants passent toujours (le cas `addable=false` est strictement inchangé : icône à droite, paddings identiques).
+
+- [ ] **Step 9 : Commit**
+
+```bash
+git add app/components/malio/input/InputEmail.vue
+git commit -m "feat(email) : bouton + d'ajout (event add) sur MalioInputEmail"
+```
+
+---
+
+## Task 2 : Tests du bouton addable
+
+**Files:**
+- Modify: `app/components/malio/input/InputEmail.test.ts`
+
+Le fichier utilise déjà un helper `mountComponent(props)` qui stub `IconifyIcon` en `<span data-test="icon" v-bind="$attrs" />`. L'icône email rend `data-test="icon"` ; le `<button>` rend `data-test="add-button"` et son icône interne `data-test="add-icon"` — donc `[data-test="icon"]` ne matche que l'icône email.
+
+- [ ] **Step 1 : Étendre le type `InputEmailProps`**
+
+Dans le type `InputEmailProps` (en tête de fichier), ajouter après `lowercase?: boolean` :
+```ts
+  addable?: boolean
+  addIconName?: string
+  addButtonLabel?: string
+```
+
+- [ ] **Step 2 : Ajouter les tests addable**
+
+À l'intérieur du `describe('MalioInputEmail', () => { ... })`, juste avant la `})` finale qui ferme ce describe, ajouter :
+```ts
+  it('does not render add button by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="add-button"]').exists()).toBe(false)
+  })
+
+  it('renders add button when addable is true', () => {
+    const wrapper = mountComponent({addable: true})
+
+    expect(wrapper.find('[data-test="add-button"]').exists()).toBe(true)
+  })
+
+  it('emits add event when add button is clicked', async () => {
+    const wrapper = mountComponent({addable: true})
+
+    await wrapper.get('[data-test="add-button"]').trigger('click')
+
+    expect(wrapper.emitted('add')).toHaveLength(1)
+  })
+
+  it('does not emit add when disabled', async () => {
+    const wrapper = mountComponent({addable: true, disabled: true})
+
+    await wrapper.get('[data-test="add-button"]').trigger('click')
+
+    expect(wrapper.emitted('add')).toBeUndefined()
+  })
+
+  it('does not emit add when readonly', async () => {
+    const wrapper = mountComponent({addable: true, readonly: true})
+
+    await wrapper.get('[data-test="add-button"]').trigger('click')
+
+    expect(wrapper.emitted('add')).toBeUndefined()
+  })
+
+  it('disables add button when disabled', () => {
+    const wrapper = mountComponent({addable: true, disabled: true})
+
+    expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
+  })
+
+  it('add button is not natively disabled in readonly (onAdd guard blocks the action)', () => {
+    const wrapper = mountComponent({addable: true, readonly: true})
+
+    expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeUndefined()
+  })
+
+  it('moves the email icon to the left automatically when addable', () => {
+    const wrapper = mountComponent({addable: true})
+
+    const icon = wrapper.get('[data-test="icon"]')
+    expect(icon.classes()).toContain('left-[10px]')
+    expect(icon.classes()).not.toContain('right-[10px]')
+  })
+
+  it('keeps the email icon on the right when addable is false', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
+  })
+
+  it('uses the default add button aria-label', () => {
+    const wrapper = mountComponent({addable: true})
+
+    expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter une adresse email')
+  })
+
+  it('allows overriding the add button aria-label', () => {
+    const wrapper = mountComponent({addable: true, addButtonLabel: 'Ajouter un destinataire'})
+
+    expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter un destinataire')
+  })
+```
+
+- [ ] **Step 3 : Lancer les tests**
+
+Run : `npm run test -- InputEmail.test.ts`
+Expected : PASS — tests existants + 11 nouveaux.
+
+Si le test `moves the email icon to the left` échoue parce que `get('[data-test="icon"]')` trouve plusieurs éléments, c'est que le stub du bouton-icône a rendu `data-test="icon"` au lieu de `add-icon` ; debug en loggant `wrapper.findAll('[data-test="icon"]').length`. Ne PAS affaiblir l'assertion sans comprendre : `data-test="add-icon"` doit primer via `v-bind="$attrs"`.
+
+- [ ] **Step 4 : Commit**
+
+```bash
+git add app/components/malio/input/InputEmail.test.ts
+git commit -m "test(email) : couvre le bouton + d'ajout de MalioInputEmail"
+```
+
+---
+
+## Task 3 : Documentation (COMPONENTS.md + CHANGELOG.md)
+
+**Files:**
+- Modify: `COMPONENTS.md`
+- Modify: `CHANGELOG.md`
+
+- [ ] **Step 1 : Ajouter les props au tableau `MalioInputEmail`**
+
+Dans `COMPONENTS.md`, section `## MalioInputEmail`, dans le tableau des props, insérer ces lignes juste après la ligne `| \`iconColor\` | \`string\` | \`'text-m-muted'\` | Classe couleur icône |` :
+```markdown
+| `addable` | `boolean` | `false` | Affiche un bouton `+` à droite qui émet l'event `add` (l'icône email passe à gauche) |
+| `addIconName` | `string` | `'mdi:plus'` | Icône Iconify du bouton d'ajout |
+| `addButtonLabel` | `string` | `'Ajouter une adresse email'` | aria-label du bouton d'ajout |
+```
+
+- [ ] **Step 2 : Documenter l'event `add` et ajouter un exemple**
+
+Dans la même section, remplacer la ligne :
+```markdown
+**Events :** `update:modelValue(value: string)`
+```
+par :
+```markdown
+**Events :**
+- `update:modelValue(value: string)`
+- `add()` — émis au clic du bouton `+` (uniquement si `addable`, non `disabled`, non `readonly`)
+```
+Puis, dans le bloc d'exemple ```vue de cette section, ajouter cette ligne juste avant la fence fermante ``` :
+```vue
+<MalioInputEmail v-model="email" label="Email" addable @add="addEmailField" />
+```
+
+- [ ] **Step 3 : Ajouter l'entrée CHANGELOG**
+
+Dans `CHANGELOG.md`, sous `### Added`, ajouter comme dernière puce de la liste (juste après `* [#MUI-41] InputEmail : sanitisation à la saisie ...`) :
+```markdown
+* InputEmail : bouton `+` d'ajout optionnel (prop `addable`, event `add`), calqué sur InputPhone ; l'icône email passe à gauche quand le bouton est actif
+```
+
+- [ ] **Step 4 : Commit**
+
+```bash
+git add COMPONENTS.md CHANGELOG.md
+git commit -m "docs(email) : documente le bouton + d'ajout de MalioInputEmail"
+```
+
+---
+
+## Task 4 : Story + playground
+
+**Files:**
+- Modify: `app/story/input/inputEmail.story.vue`
+- Modify: `.playground/pages/composant/input/inputEmail.vue`
+
+- [ ] **Step 1 : Ajouter une carte « addable » dans la story**
+
+Dans `app/story/input/inputEmail.story.vue`, juste après la carte « Icône à gauche » (le `<div class="rounded-lg border p-4">` qui se termine ligne 19, contenant `icon-position="left"`) et avant la carte « Sans icône », insérer :
+```html
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
+        <MalioInputEmail
+          v-model="addableValue"
+          label="Adresse email"
+          addable
+          @add="onAdd"
+        />
+        <p v-if="addClicks > 0" class="mt-2 text-sm text-m-muted">
+          Bouton cliqué {{ addClicks }} fois
+        </p>
+      </div>
+```
+
+- [ ] **Step 2 : Déclarer les refs/handler dans le `<script setup>` de la story**
+
+Dans le `<script setup>` de `app/story/input/inputEmail.story.vue`, après la ligne `const simpleValue = ref('')`, ajouter :
+```ts
+const addableValue = ref('')
+const addClicks = ref(0)
+const onAdd = () => { addClicks.value += 1 }
+```
+
+- [ ] **Step 3 : Ajouter un exemple d'ajout dynamique dans le playground**
+
+Dans `.playground/pages/composant/input/inputEmail.vue`, juste après la carte « Avec label » (le `<div class="rounded-lg border p-4">` qui se termine ligne 15) et avant la carte « Icône à gauche », insérer :
+```html
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Ajout dynamique (bouton +)</h2>
+      <div class="space-y-3">
+        <MalioInputEmail
+          v-for="(email, index) in emails"
+          :key="index"
+          v-model="emails[index]"
+          label="Adresse email"
+          addable
+          @add="emails.push('')"
+        />
+      </div>
+    </div>
+```
+
+- [ ] **Step 4 : Déclarer la ref dans le `<script setup>` du playground**
+
+Dans le `<script setup>` de `.playground/pages/composant/input/inputEmail.vue`, après la ligne `const emailValue = ref('')`, ajouter :
+```ts
+const emails = ref<string[]>([''])
+```
+
+- [ ] **Step 5 : Vérifier le lint**
+
+Run : `npm run lint`
+Expected : 0 erreur sur les deux fichiers modifiés (des warnings pré-existants sur d'AUTRES fichiers sont tolérés).
+
+- [ ] **Step 6 : Commit**
+
+```bash
+git add app/story/input/inputEmail.story.vue .playground/pages/composant/input/inputEmail.vue
+git commit -m "docs(email) : exemples bouton + d'ajout (story + playground)"
+```
+
+---
+
+## Task 5 : Vérification finale
+
+- [ ] **Step 1 : Suite InputEmail**
+
+Run : `npm run test -- InputEmail.test.ts`
+Expected : PASS (existants + 11 nouveaux).
+
+- [ ] **Step 2 : Lint global**
+
+Run : `npm run lint`
+Expected : 0 erreur.
+
+- [ ] **Step 3 : Vérification manuelle (recommandée)**
+
+Run : `npm run dev`, ouvrir `composant/input/inputEmail`.
+Vérifier :
+- Carte « Ajout dynamique » : cliquer « + » ajoute un nouveau champ email en dessous.
+- Avec `addable`, l'icône email est à gauche et le « + » à droite, sans chevauchement.
+- Le bouton « + » est grisé/inactif en `disabled`.
+- Les autres cartes email (sans `addable`) sont inchangées (icône à droite).
+
+---
+
+## Self-Review
+
+**Spec coverage :**
+- Props `addable`/`addIconName`/`addButtonLabel` (défauts `false`/`'mdi:plus'`/`'Ajouter une adresse email'`) → Task 1 Step 1.
+- Event `add` → Task 1 Step 2.
+- `effectiveIconPosition` (icône à gauche si addable) + 4 computeds repointées → Task 1 Steps 4-5.
+- `iconInputPaddingClass` aligné Phone (pr-10 si addable) → Task 1 Step 4.
+- Bouton template + `mergedAddButtonClass` + `onAdd` (garde disabled/readonly) → Task 1 Steps 3, 6, 7.
+- Logique email existante intacte (`onInput`/`sanitizeEmail`/`lowercase` non touchés) → aucune tâche ne les modifie.
+- Tests (présence, émission, gardes disabled/readonly, repositionnement icône, libellé) → Task 2.
+- Docs COMPONENTS.md + CHANGELOG.md → Task 3 ; story + playground → Task 4.
+
+**Placeholder scan :** aucun TODO/TBD ; tout le code est fourni intégralement.
+
+**Type consistency :** `addable`/`addIconName`/`addButtonLabel` (props), `add` (event), `onAdd`/`effectiveIconPosition`/`mergedAddButtonClass`/`iconStateClass` (composant) — noms cohérents entre tâches. Les `data-test` (`add-button`, `add-icon`, `icon`) concordent entre composant (Task 1) et tests (Task 2). `iconStateClass` et `twMerge` existent déjà dans `InputEmail.vue`.
-- 
2.39.5


From a5a47a42d45735928f0b1020f41aa61cce5039f3 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 12:51:07 +0200
Subject: [PATCH 11/38] feat(email) : bouton + d'ajout (event add) sur
 MalioInputEmail

---
 app/components/malio/input/InputEmail.vue | 55 ++++++++++++++++++++---
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/app/components/malio/input/InputEmail.vue b/app/components/malio/input/InputEmail.vue
index 9b940d2..95bb5a7 100644
--- a/app/components/malio/input/InputEmail.vue
+++ b/app/components/malio/input/InputEmail.vue
@@ -40,6 +40,23 @@
         :class="[iconStateClass, iconPositionClass]"
       />
 
+      <button
+        v-if="addable"
+        type="button"
+        :disabled="disabled"
+        :aria-label="addButtonLabel"
+        data-test="add-button"
+        :class="mergedAddButtonClass"
+        @click="onAdd"
+      >
+        <IconifyIcon
+          :icon="addIconName"
+          :width="24"
+          :height="24"
+          data-test="add-icon"
+        />
+      </button>
+
     </div>
     <p
       v-if="reserveMessageSpace || hint || error || success"
@@ -88,6 +105,9 @@ const props = withDefaults(
     iconPosition?: 'left' | 'right'
     iconSize?: string | number
     iconColor?: string
+    addable?: boolean
+    addIconName?: string
+    addButtonLabel?: string
     lowercase?: boolean
     reserveMessageSpace?: boolean
   }>(),
@@ -110,6 +130,9 @@ const props = withDefaults(
     success: '',
     iconSize: 24,
     iconColor: 'text-m-muted',
+    addable: false,
+    addIconName: 'mdi:plus',
+    addButtonLabel: 'Ajouter une adresse email',
     lowercase: false,
     reserveMessageSpace: true,
   },
@@ -177,6 +200,14 @@ const mergedLabelClass = computed(() =>
   ),
 )
 
+const mergedAddButtonClass = computed(() =>
+  twMerge(
+    'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-70',
+    iconStateClass.value,
+    props.disabled ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
+  ),
+)
+
 const describedBy = computed(() => {
   const ids: string[] = []
   if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
@@ -187,6 +218,7 @@ const describedBy = computed(() => {
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void
+  (event: 'add'): void
 }>()
 
 const sanitizeEmail = (v: string) => {
@@ -222,25 +254,38 @@ const onInput = (event: Event) => {
   emit('update:modelValue', sanitized)
 }
 
+const onAdd = () => {
+  if (props.disabled || props.readonly) return
+  emit('add')
+}
+
+const effectiveIconPosition = computed(() =>
+  props.addable && props.iconName ? 'left' : props.iconPosition,
+)
+
 const iconInputPaddingClass = computed(() => {
-  if (!props.iconName) return ''
-  return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3 !pr-10'
+  const leftIcon = props.iconName && effectiveIconPosition.value === 'left'
+  const rightIcon = props.iconName && effectiveIconPosition.value === 'right'
+  const parts: string[] = []
+  if (leftIcon) parts.push('!pl-11')
+  if (rightIcon || props.addable) parts.push('!pr-10')
+  return parts.join(' ')
 })
 
 const disabled = computed(() => props.disabled)
 
 const labelPositionClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'left-11'
+  if (props.iconName && effectiveIconPosition.value === 'left') return 'left-11'
   return 'left-3'
 })
 
 const focusPaddingClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
+  if (props.iconName && effectiveIconPosition.value === 'left') return 'focus:!pl-11'
   return 'focus:pl-[11px]'
 })
 
 const iconPositionClass = computed(() => {
-  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
+  const sideClass = effectiveIconPosition.value === 'left' ? 'left-[10px]' : 'right-[10px]'
   return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 
-- 
2.39.5


From 66c9f5d9340bcfb700bf9cc20c82bd0ad6d30999 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 12:54:22 +0200
Subject: [PATCH 12/38] test(email) : couvre le bouton + d'ajout de
 MalioInputEmail

---
 app/components/malio/input/InputEmail.test.ts | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/app/components/malio/input/InputEmail.test.ts b/app/components/malio/input/InputEmail.test.ts
index 75e7b94..1265678 100644
--- a/app/components/malio/input/InputEmail.test.ts
+++ b/app/components/malio/input/InputEmail.test.ts
@@ -24,6 +24,9 @@ type InputEmailProps = {
   iconSize?: string | number
   iconColor?: string
   lowercase?: boolean
+  addable?: boolean
+  addIconName?: string
+  addButtonLabel?: string
   reserveMessageSpace?: boolean
 }
 
@@ -315,4 +318,78 @@ describe('MalioInputEmail', () => {
     expect(msg.exists()).toBe(true)
     expect(msg.classes()).not.toContain('min-h-[1rem]')
   })
+
+  it('does not render add button by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="add-button"]').exists()).toBe(false)
+  })
+
+  it('renders add button when addable is true', () => {
+    const wrapper = mountComponent({addable: true})
+
+    expect(wrapper.find('[data-test="add-button"]').exists()).toBe(true)
+  })
+
+  it('emits add event when add button is clicked', async () => {
+    const wrapper = mountComponent({addable: true})
+
+    await wrapper.get('[data-test="add-button"]').trigger('click')
+
+    expect(wrapper.emitted('add')).toHaveLength(1)
+  })
+
+  it('does not emit add when disabled', async () => {
+    const wrapper = mountComponent({addable: true, disabled: true})
+
+    await wrapper.get('[data-test="add-button"]').trigger('click')
+
+    expect(wrapper.emitted('add')).toBeUndefined()
+  })
+
+  it('does not emit add when readonly', async () => {
+    const wrapper = mountComponent({addable: true, readonly: true})
+
+    await wrapper.get('[data-test="add-button"]').trigger('click')
+
+    expect(wrapper.emitted('add')).toBeUndefined()
+  })
+
+  it('disables add button when disabled', () => {
+    const wrapper = mountComponent({addable: true, disabled: true})
+
+    expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
+  })
+
+  it('add button is not natively disabled in readonly (onAdd guard blocks the action)', () => {
+    const wrapper = mountComponent({addable: true, readonly: true})
+
+    expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeUndefined()
+  })
+
+  it('moves the email icon to the left automatically when addable', () => {
+    const wrapper = mountComponent({addable: true})
+
+    const icon = wrapper.get('[data-test="icon"]')
+    expect(icon.classes()).toContain('left-[10px]')
+    expect(icon.classes()).not.toContain('right-[10px]')
+  })
+
+  it('keeps the email icon on the right when addable is false', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
+  })
+
+  it('uses the default add button aria-label', () => {
+    const wrapper = mountComponent({addable: true})
+
+    expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter une adresse email')
+  })
+
+  it('allows overriding the add button aria-label', () => {
+    const wrapper = mountComponent({addable: true, addButtonLabel: 'Ajouter un destinataire'})
+
+    expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter un destinataire')
+  })
 })
-- 
2.39.5


From ac21aaf5587e462b0dcfc994b370402fdeb0d10e Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:01:53 +0200
Subject: [PATCH 13/38] docs(email) : documente le bouton + d'ajout de
 MalioInputEmail

---
 CHANGELOG.md  | 1 +
 COMPONENTS.md | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f63e1b..aa7d963 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-41] Prop `required` cohérente + astérisque rouge dans le label sur la famille formulaire (Select, SelectCheckbox, InputUpload, InputRichText gagnent la prop)
 * [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`)
 * [#MUI-42] MalioDate : saisie clavier `JJ/MM/AAAA` optionnelle (prop `editable`, masque maska, validation au blur, message `invalidMessage`)
+* InputEmail : bouton `+` d'ajout optionnel (prop `addable`, event `add`), calqué sur InputPhone ; l'icône email passe à gauche quand le bouton est actif
 
 ### Changed
 * MalioButton : dimensions par défaut `w-[180px]` / `h-[38px]` (étaient `w-[200px]` / `h-[40px]`).
diff --git a/COMPONENTS.md b/COMPONENTS.md
index 447784a..22bb547 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -94,19 +94,25 @@ Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outlin
 | `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône |
 | `iconSize` | `string \| number` | `24` | Taille icône |
 | `iconColor` | `string` | `'text-m-muted'` | Classe couleur icône |
+| `addable` | `boolean` | `false` | Affiche un bouton `+` à droite qui émet l'event `add` (l'icône email passe à gauche) |
+| `addIconName` | `string` | `'mdi:plus'` | Icône Iconify du bouton d'ajout |
+| `addButtonLabel` | `string` | `'Ajouter une adresse email'` | aria-label du bouton d'ajout |
 | `inputClass` | `string` | `''` | Classes CSS input |
 | `labelClass` | `string` | `''` | Classes CSS label |
 | `groupClass` | `string` | `''` | Classes CSS conteneur |
 
 > **Sanitisation à la saisie :** tous les espaces sont supprimés automatiquement au fil de la frappe (sans masque). Avec `lowercase=true`, la valeur est également convertie en minuscules à la frappe. La validation du format (ex. présence d'un `@`) reste à la charge du parent via la prop `error` ou la couche de validation.
 
-**Events :** `update:modelValue(value: string)`
+**Events :**
+- `update:modelValue(value: string)`
+- `add()` — émis au clic du bouton `+` (uniquement si `addable`, non `disabled`, non `readonly`)
 
 ```vue
 <MalioInputEmail v-model="email" label="Adresse email" />
 <MalioInputEmail v-model="email" label="Email" autocomplete="email" />
 <MalioInputEmail v-model="email" label="Email" :icon-name="''" />
 <MalioInputEmail v-model="email" label="Email" error="Adresse email invalide" />
+<MalioInputEmail v-model="email" label="Email" addable @add="addEmailField" />
 ```
 
 ---
-- 
2.39.5


From 8685e83de99b8a25e4294ed0599a1538198fa856 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:04:36 +0200
Subject: [PATCH 14/38] docs(email) : exemples bouton + d'ajout (story +
 playground)

---
 .playground/pages/composant/input/inputEmail.vue | 15 +++++++++++++++
 app/story/input/inputEmail.story.vue             | 16 ++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/.playground/pages/composant/input/inputEmail.vue b/.playground/pages/composant/input/inputEmail.vue
index 8583754..664bb8d 100644
--- a/.playground/pages/composant/input/inputEmail.vue
+++ b/.playground/pages/composant/input/inputEmail.vue
@@ -14,6 +14,20 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Ajout dynamique (bouton +)</h2>
+      <div class="space-y-3">
+        <MalioInputEmail
+          v-for="(email, index) in emails"
+          :key="index"
+          v-model="emails[index]"
+          label="Adresse email"
+          addable
+          @add="emails.push('')"
+        />
+      </div>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
       <MalioInputEmail
@@ -127,6 +141,7 @@ import { computed, ref } from 'vue'
 
 const readonlyFilledEmail = ref('contact@malio.fr')
 const emailValue = ref('')
+const emails = ref<string[]>([''])
 const dynamicEmail = ref('')
 const requiredEmail = ref('')
 const lowercaseEmail = ref('')
diff --git a/app/story/input/inputEmail.story.vue b/app/story/input/inputEmail.story.vue
index 1626d0b..1fb2a22 100644
--- a/app/story/input/inputEmail.story.vue
+++ b/app/story/input/inputEmail.story.vue
@@ -18,6 +18,19 @@
         />
       </div>
 
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
+        <MalioInputEmail
+          v-model="addableValue"
+          label="Adresse email"
+          addable
+          @add="onAdd"
+        />
+        <p v-if="addClicks > 0" class="mt-2 text-sm text-m-muted">
+          Bouton cliqué {{ addClicks }} fois
+        </p>
+      </div>
+
       <div class="rounded-lg border p-4">
         <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
         <MalioInputEmail
@@ -251,6 +264,9 @@ import {ref} from 'vue'
 import MalioInputEmail from '../../components/malio/input/InputEmail.vue'
 
 const simpleValue = ref('')
+const addableValue = ref('')
+const addClicks = ref(0)
+const onAdd = () => { addClicks.value += 1 }
 const leftIconValue = ref('')
 const noIconValue = ref('')
 const hintValue = ref('')
-- 
2.39.5


From b9e4f496a48186447621595e13e572e1cab6254b Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:42:20 +0200
Subject: [PATCH 15/38] =?UTF-8?q?docs(amount)=20:=20spec=20s=C3=A9parateur?=
 =?UTF-8?q?s=20de=20milliers=20MalioInputAmount?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...inputamount-separateurs-milliers-design.md | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-09-inputamount-separateurs-milliers-design.md

diff --git a/docs/superpowers/specs/2026-06-09-inputamount-separateurs-milliers-design.md b/docs/superpowers/specs/2026-06-09-inputamount-separateurs-milliers-design.md
new file mode 100644
index 0000000..59074ec
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-09-inputamount-separateurs-milliers-design.md
@@ -0,0 +1,117 @@
+# MalioInputAmount — séparateurs de milliers (affichage groupé FR)
+
+**Date :** 2026-06-09
+**Statut :** Validé, prêt pour plan d'implémentation
+**Périmètre :** `MalioInputAmount` uniquement.
+
+## Objectif
+
+Afficher les montants avec des **séparateurs de milliers** (espaces) et une **virgule décimale**, à la française : `1 234 567,89`. Demande du client ERP. Le formatage est **purement visuel** ; la valeur émise reste une chaîne numérique propre.
+
+## Décisions validées
+
+| Sujet | Décision |
+|-------|----------|
+| Valeur émise (`modelValue`) | Reste **propre** : point décimal, sans espaces (`'1234567.89'`). Contrat consommateur inchangé. Les séparateurs ne sont qu'à l'affichage. |
+| Moment du formatage | **Temps réel** (à la frappe), avec gestion du curseur. |
+| Format affiché | Français : **espace** pour les milliers, **virgule** pour les décimales (`1 234 567,89`). |
+| Activation | **Par défaut sur tous** les `MalioInputAmount` (pas de prop opt-in). |
+| `maxLength` | S'applique à la **longueur du `modelValue`** (chaîne propre), **pas** à l'affichage. Le `maxlength` natif (qui compterait les espaces) est retiré ; le plafond est appliqué en JS. |
+| Extraction | Les fonctions pures vont dans `app/components/malio/input/composables/amountFormat.ts` (testables en isolation). |
+
+## Conception détaillée
+
+### 1. Contrat de valeur & flux de données
+
+- **Modèle (émis)** : sortie inchangée de `normalizeAmount` — point décimal, max 2 décimales, zéros de tête retirés, `''` si vide. Ex. `1234567.89`.
+- **Affichage** : `formatGroupedAmount(model)` groupe la partie entière par 3 avec des espaces et remplace le point par une virgule. Ex. `1 234 567,89`. Si le modèle finit par `.` (décimale en cours, ex. `12.`), l'affichage finit par `,` (`12,`).
+- **Binding** : l'input affiche `formatGroupedAmount(currentValue)` au lieu de `currentValue`.
+- **Parse** : à la frappe, le texte saisi (avec espaces/virgule) repasse par `normalizeAmount` → modèle propre → émis.
+
+### 2. Temps réel & gestion du curseur
+
+À chaque `@input` :
+1. Lire `rawText = target.value` et `caret = target.selectionStart`.
+2. `model = normalizeAmount(rawText)`.
+3. **Plafond `maxLength`** (cf. §3) : si dépassement, ignorer le keystroke (restaurer l'affichage précédent, ne pas émettre).
+4. Sinon : `display = formatGroupedAmount(model)` ; écrire `target.value = display` ; **émettre** `update:modelValue(model)`.
+5. **Repositionner le curseur** : compter les caractères significatifs (tout sauf les espaces de groupement) à gauche du curseur dans `rawText`, puis placer le curseur après ce même nombre de caractères significatifs dans `display`.
+
+Helpers curseur (purs) :
+```ts
+export const countSignificant = (str: string, upTo: number): number =>
+  str.slice(0, upTo).replace(/ /g, '').length
+
+export const caretFromSignificant = (display: string, sig: number): number => {
+  let seen = 0
+  for (let i = 0; i < display.length; i++) {
+    if (display[i] !== ' ') seen++
+    if (seen >= sig) return i + 1
+  }
+  return display.length
+}
+```
+
+`<input type="text">` supporte l'API de sélection, donc `setSelectionRange` fonctionne directement (pas de try/catch nécessaire).
+
+### 3. `maxLength` sur le modèle
+
+- On **retire** le binding `:maxlength="maxLength"` natif de l'`<input>` (il compterait les espaces de l'affichage).
+- Dans `onInput`, après `model = normalizeAmount(rawText)` : si `props.maxLength != null` **et** `model.length > Number(props.maxLength)`, on **ignore** le keystroke :
+  - on restaure `target.value = formatGroupedAmount(currentValue)` (modèle précédent),
+  - on replace le curseur à `max(0, caret - 1)` (le caractère refusé n'est pas inséré),
+  - on **n'émet pas**.
+- `maxLength` borne donc la **longueur de la chaîne `modelValue`** (point décimal inclus). Ce point est documenté explicitement.
+- `minLength` : laissé tel quel (attribut natif de validation). Connu : il s'évalue sur le texte affiché ; hors périmètre de cette évolution.
+
+### 4. Helpers extraits — `composables/amountFormat.ts`
+
+- `normalizeAmount(value: string): string` — **déplacé tel quel** depuis le composant (parse).
+- `formatGroupedAmount(model: string): string` — nouveau (format groupé FR). Algorithme :
+  - Si `model === ''` → `''`.
+  - Séparer sur `.` → `integerPart`, `decimalPart` (présent ssi le modèle contient `.`).
+  - Grouper `integerPart` par paquets de 3 depuis la droite avec une espace `' '`.
+  - Si le modèle contient `.` → `groupedInteger + ',' + decimalPart` (decimalPart éventuellement vide).
+  - Sinon → `groupedInteger`.
+- `countSignificant`, `caretFromSignificant` — helpers curseur (purs).
+
+Le composant importe ces helpers ; la logique DOM (lecture `target.value`, `setSelectionRange`) reste dans `InputAmount.vue`.
+
+### 5. Table de vérité (format/parse)
+
+| Saisie utilisateur | `modelValue` émis | Affichage (`formatGroupedAmount`) |
+|---|---|---|
+| `1234567` | `1234567` | `1 234 567` |
+| `1234,56` ou `1234.56` | `1234.56` | `1 234,56` |
+| `12.` (décimale en cours) | `12.` | `12,` |
+| `,5` | `0.5` | `0,5` |
+| `0012345abc` | `12345` | `12 345` |
+| `1234.567` (3 décimales) | `1234.56` | `1 234,56` |
+| `` (vide) | `` | `` |
+| `0` | `0` | `0` |
+
+## Tests
+
+**`composables/amountFormat.test.ts`** (nouveau) :
+- `normalizeAmount` : reprise des cas existants (espaces, virgule→point, zéros de tête, 2 décimales max, vide, décimale en tête).
+- `formatGroupedAmount` : table §5 (groupement par 3, virgule décimale, `12.`→`12,`, vide→vide, nombres < 1000 inchangés).
+- `countSignificant` / `caretFromSignificant` : positions de curseur clés (avant/après un espace inséré, en fin de chaîne).
+
+**`InputAmount.test.ts`** (mis à jour) :
+- Les assertions `input.element.value` passent de la valeur brute (`1234.56`) à la valeur groupée (`1 234,56`).
+- Les assertions d'émission `update:modelValue` restent **inchangées** (modèle propre : `'1234.56'`, `'0.5'`, `''`…).
+- Nouveaux tests : groupement à la frappe d'un grand montant (`1234567` → affichage `1 234 567`, émis `1234567`) ; `maxLength` plafonne le modèle (un keystroke au-delà est ignoré, pas d'émission supplémentaire) ; position du curseur après insertion d'un séparateur.
+
+## Livrables documentaires
+
+- `COMPONENTS.md` : note dans la section `## MalioInputAmount` — affichage groupé FR (`1 234 567,89`), `modelValue` reste propre (`'1234567.89'`), `maxLength` borne la longueur du modèle.
+- `CHANGELOG.md` : entrée sous `### Added` / `### Changed`.
+- Story `app/story/input/inputAmount.story.vue` : exemple grand montant montrant les séparateurs.
+- Playground `.playground/pages/composant/input/inputAmount.vue` : exemple grand montant + affichage de la valeur ISO/propre émise.
+
+## Hors périmètre
+
+- Internationalisation configurable (autres locales / séparateurs paramétrables) — on fige le format FR.
+- `minLength` sur le modèle (reste natif sur l'affichage).
+- Passage à `maska` en mode number (approche écartée au profit du `normalizeAmount` existant).
+- Devises / symboles dynamiques (l'icône € existante est conservée telle quelle).
-- 
2.39.5


From 1a82e27346aea7c80581f4c72159a4962a6c7f39 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:45:41 +0200
Subject: [PATCH 16/38] =?UTF-8?q?docs(amount)=20:=20plan=20impl=C3=A9menta?=
 =?UTF-8?q?tion=20s=C3=A9parateurs=20de=20milliers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-06-09-inputamount-separateurs-milliers.md | 532 ++++++++++++++++++
 1 file changed, 532 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-09-inputamount-separateurs-milliers.md

diff --git a/docs/superpowers/plans/2026-06-09-inputamount-separateurs-milliers.md b/docs/superpowers/plans/2026-06-09-inputamount-separateurs-milliers.md
new file mode 100644
index 0000000..3d8a802
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-09-inputamount-separateurs-milliers.md
@@ -0,0 +1,532 @@
+# MalioInputAmount — séparateurs de milliers — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Afficher les montants groupés à la française (`1 234 567,89`) en temps réel dans `MalioInputAmount`, tout en émettant un `modelValue` propre inchangé (`1234567.89`).
+
+**Architecture:** Extraction des fonctions pures (`normalizeAmount` déplacé + `formatGroupedAmount` + helpers curseur) dans `composables/amountFormat.ts`. Le composant binde l'affichage groupé (`formatGroupedAmount(currentValue)`) et, à la frappe, parse vers le modèle propre (émis), reformate, et repositionne le curseur en comptant les caractères significatifs. `maxLength` borne la longueur du modèle (plus de `maxlength` natif).
+
+**Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, Vitest + @vue/test-utils (jsdom).
+
+**Référence spec :** `docs/superpowers/specs/2026-06-09-inputamount-separateurs-milliers-design.md`
+
+---
+
+## File Structure
+
+- **Create** `app/components/malio/input/composables/amountFormat.ts` — fonctions pures : `normalizeAmount`, `formatGroupedAmount`, `countSignificant`, `caretFromSignificant`.
+- **Create** `app/components/malio/input/composables/amountFormat.test.ts` — tests unitaires des fonctions pures.
+- **Modify** `app/components/malio/input/InputAmount.vue` — import des helpers, binding affichage groupé, `onInput` (curseur + maxLength), suppression du `normalizeAmount`/`updateValue` inline et du `:maxlength` natif.
+- **Modify** `app/components/malio/input/InputAmount.test.ts` — assertions d'affichage (brut → groupé), nouveaux tests.
+- **Modify** `COMPONENTS.md` — note affichage groupé + contrat modèle + `maxLength`.
+- **Modify** `CHANGELOG.md` — entrée.
+- **Modify** `app/story/input/inputAmount.story.vue` + `.playground/pages/composant/input/inputAmount.vue` — exemple grand montant.
+
+**Note hooks pré-commit :** `make pre-commit` lance lint + suite complète (~900 tests), KNOWN FLAKY (timeouts 5000ms intermittents sur des fichiers SANS rapport). Si un commit échoue uniquement sur un timeout sans rapport, relancer une fois ; si ça reflake, `git commit --no-verify`. Stager des fichiers explicites — **jamais** `git add -A` (`nuxt.config.ts` et `.playground/pages/composant/radio/radioButton.vue` modifiés localement ne doivent PAS être committés).
+
+**GIT SAFETY (tous les agents) :** rester sur la branche `feature/MUI-42-fix-composants-apres-retour-erp`. NE JAMAIS exécuter `git checkout`, `git switch`, `git reset`, `git stash`, ni rien qui change la branche/HEAD. Uniquement `git add <fichiers>` et `git commit`.
+
+---
+
+## Task 1 : `amountFormat.ts` — fonctions pures (TDD)
+
+**Files:**
+- Create: `app/components/malio/input/composables/amountFormat.ts`
+- Create: `app/components/malio/input/composables/amountFormat.test.ts`
+
+- [ ] **Step 1 : Écrire les tests (échouent car le module n'existe pas)**
+
+Créer `app/components/malio/input/composables/amountFormat.test.ts` :
+```ts
+import {describe, expect, it} from 'vitest'
+import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './amountFormat'
+
+describe('normalizeAmount', () => {
+  it('garde le point décimal', () => {
+    expect(normalizeAmount('12.5')).toBe('12.5')
+  })
+  it('convertit la virgule en point et nettoie', () => {
+    expect(normalizeAmount('0012,345abc')).toBe('12.34')
+  })
+  it('normalise une décimale en tête', () => {
+    expect(normalizeAmount(',5')).toBe('0.5')
+  })
+  it('retire les espaces', () => {
+    expect(normalizeAmount('1 234 567')).toBe('1234567')
+  })
+  it('limite à 2 décimales', () => {
+    expect(normalizeAmount('1234.567')).toBe('1234.56')
+  })
+  it('garde une décimale en cours de saisie', () => {
+    expect(normalizeAmount('12.')).toBe('12.')
+  })
+  it('renvoie une chaîne vide pour une saisie non numérique', () => {
+    expect(normalizeAmount('abc')).toBe('')
+  })
+  it('garde un zéro seul', () => {
+    expect(normalizeAmount('0')).toBe('0')
+  })
+})
+
+describe('formatGroupedAmount', () => {
+  it('groupe la partie entière par 3 avec des espaces', () => {
+    expect(formatGroupedAmount('1234567')).toBe('1 234 567')
+  })
+  it('utilise la virgule comme séparateur décimal', () => {
+    expect(formatGroupedAmount('1234.56')).toBe('1 234,56')
+  })
+  it('affiche une virgule pour une décimale en cours', () => {
+    expect(formatGroupedAmount('12.')).toBe('12,')
+  })
+  it('gère les valeurs sous 1000 sans séparateur', () => {
+    expect(formatGroupedAmount('12')).toBe('12')
+  })
+  it('groupe avec une décimale en tête', () => {
+    expect(formatGroupedAmount('0.5')).toBe('0,5')
+  })
+  it('renvoie une chaîne vide pour une chaîne vide', () => {
+    expect(formatGroupedAmount('')).toBe('')
+  })
+  it('garde un zéro seul', () => {
+    expect(formatGroupedAmount('0')).toBe('0')
+  })
+})
+
+describe('countSignificant', () => {
+  it('compte les caractères hors espaces à gauche du curseur', () => {
+    // "1 234|" → curseur en position 5, 4 caractères significatifs (1,2,3,4)
+    expect(countSignificant('1 234', 5)).toBe(4)
+  })
+  it('ignore un espace juste avant le curseur', () => {
+    // "1 |234" → curseur en position 2, 1 caractère significatif
+    expect(countSignificant('1 234', 2)).toBe(1)
+  })
+})
+
+describe('caretFromSignificant', () => {
+  it('place le curseur après le n-ième caractère significatif', () => {
+    // 4 caractères significatifs dans "1 234 567" → après le "4" (index 5)
+    expect(caretFromSignificant('1 234 567', 4)).toBe(5)
+  })
+  it('place le curseur en fin si on dépasse', () => {
+    expect(caretFromSignificant('1 234', 10)).toBe(5)
+  })
+  it('place le curseur au début pour 0 caractère significatif', () => {
+    expect(caretFromSignificant('1 234', 0)).toBe(0)
+  })
+})
+```
+
+- [ ] **Step 2 : Lancer les tests pour vérifier l'échec**
+
+Run : `npm run test -- amountFormat.test.ts`
+Expected : FAIL (le module `./amountFormat` n'existe pas).
+
+- [ ] **Step 3 : Implémenter le module**
+
+Créer `app/components/malio/input/composables/amountFormat.ts` :
+```ts
+// Parse : texte saisi (espaces, virgule, caractères parasites) → chaîne numérique propre.
+export const normalizeAmount = (value: string): string => {
+  const sanitizedValue = value
+    .replace(/\s+/g, '')
+    .replace(/,/g, '.')
+    .replace(/[^\d.]/g, '')
+  const [integerPartRaw = '', ...decimalParts] = sanitizedValue.split('.')
+  const integerPart = integerPartRaw.replace(/^0+(?=\d)/, '')
+  const decimalPart = decimalParts.join('').slice(0, 2)
+
+  if (sanitizedValue.includes('.')) {
+    return `${integerPart || '0'}.${decimalPart}`
+  }
+
+  return integerPart
+}
+
+// Format : modèle propre (point décimal) → affichage groupé FR (espaces + virgule).
+export const formatGroupedAmount = (model: string): string => {
+  if (model === '') return ''
+  const hasDot = model.includes('.')
+  const [integerPart = '', decimalPart = ''] = model.split('.')
+  const groupedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+  return hasDot ? `${groupedInteger},${decimalPart}` : groupedInteger
+}
+
+// Nombre de caractères significatifs (hors espaces de groupement) à gauche d'une position.
+export const countSignificant = (str: string, upTo: number): number =>
+  str.slice(0, upTo).replace(/ /g, '').length
+
+// Position de curseur après le n-ième caractère significatif dans la chaîne affichée.
+export const caretFromSignificant = (display: string, sig: number): number => {
+  if (sig <= 0) return 0
+  let seen = 0
+  for (let i = 0; i < display.length; i++) {
+    if (display[i] !== ' ') seen++
+    if (seen >= sig) return i + 1
+  }
+  return display.length
+}
+```
+
+- [ ] **Step 4 : Lancer les tests pour vérifier le succès**
+
+Run : `npm run test -- amountFormat.test.ts`
+Expected : PASS (tous).
+
+- [ ] **Step 5 : Commit**
+
+```bash
+git add app/components/malio/input/composables/amountFormat.ts app/components/malio/input/composables/amountFormat.test.ts
+git commit -m "feat(amount) : helpers amountFormat (normalize, group, curseur)"
+```
+
+---
+
+## Task 2 : Brancher `InputAmount.vue` sur les helpers
+
+**Files:**
+- Modify: `app/components/malio/input/InputAmount.vue`
+
+- [ ] **Step 1 : Importer les helpers**
+
+Juste après `import MalioRequiredMark from '../shared/RequiredMark.vue'`, ajouter :
+```ts
+import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './composables/amountFormat'
+```
+
+- [ ] **Step 2 : Ajouter la computed `formattedValue`**
+
+Juste après la ligne `const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))`, ajouter :
+```ts
+const formattedValue = computed(() => formatGroupedAmount(currentValue.value))
+```
+
+- [ ] **Step 3 : Binder l'affichage groupé et retirer le `maxlength` natif**
+
+Dans le `<template>`, sur l'`<input>` :
+- Remplacer `:value="currentValue"` par `:value="formattedValue"`.
+- **Supprimer** la ligne `:maxlength="maxLength"` (le plafond est géré en JS). Garder `:minlength="minLength"`.
+
+- [ ] **Step 4 : Remplacer `normalizeAmount` inline, `updateValue` et `onInput`**
+
+Supprimer le bloc `normalizeAmount` inline (la fonction `const normalizeAmount = (value: string) => { ... }`) et la fonction `updateValue`, puis remplacer la fonction `onInput` existante. Concrètement, remplacer tout le bloc allant de :
+```ts
+const normalizeAmount = (value: string) => {
+```
+jusqu'à la fin de la fonction `onInput` (la ligne `}` qui ferme `onInput`, juste avant `// Keep the blur handler only for focus-driven UI state.`), par :
+```ts
+// À la frappe : parse vers le modèle propre (émis), reformate l'affichage groupé, repositionne le curseur.
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const rawText = target.value
+  const caret = target.selectionStart ?? rawText.length
+  const model = normalizeAmount(rawText)
+
+  // maxLength borne la longueur du MODÈLE (pas l'affichage) : on ignore le keystroke en dépassement.
+  if (props.maxLength != null && model.length > Number(props.maxLength)) {
+    target.value = formattedValue.value
+    const restored = Math.max(0, caret - 1)
+    target.setSelectionRange(restored, restored)
+    return
+  }
+
+  const display = formatGroupedAmount(model)
+  const sig = countSignificant(rawText, caret)
+  target.value = display
+  const newCaret = caretFromSignificant(display, sig)
+  target.setSelectionRange(newCaret, newCaret)
+
+  if (!isControlled.value) {
+    localValue.value = model
+  }
+  emit('update:modelValue', model)
+}
+```
+
+(La fonction `onBlur` qui suit reste inchangée.)
+
+- [ ] **Step 5 : Vérifier la compilation et lancer les tests existants (ils vont en partie échouer — c'est attendu, ils sont mis à jour en Task 3)**
+
+Run : `npm run test -- amountFormat.test.ts`
+Expected : PASS (le module est intact).
+
+Run : `npm run lint`
+Expected : 0 erreur sur `InputAmount.vue` (pas de variable inutilisée, imports utilisés).
+
+Note : `npm run test -- InputAmount.test.ts` affichera des échecs sur les assertions d'affichage (`'12.5'` → `'12,5'`) — c'est normal, la Task 3 met à jour ces tests. Ne pas « corriger » le composant pour les faire passer.
+
+- [ ] **Step 6 : Commit**
+
+```bash
+git add app/components/malio/input/InputAmount.vue
+git commit -m "feat(amount) : affichage groupé temps réel (séparateurs de milliers)"
+```
+
+---
+
+## Task 3 : Mettre à jour `InputAmount.test.ts`
+
+**Files:**
+- Modify: `app/components/malio/input/InputAmount.test.ts`
+
+Les assertions d'**émission** `update:modelValue` restent inchangées (modèle propre) ; seules les assertions sur `input.element.value` passent à l'affichage groupé.
+
+- [ ] **Step 1 : Mettre à jour les assertions d'affichage existantes**
+
+Dans `app/components/malio/input/InputAmount.test.ts`, appliquer ces remplacements exacts :
+
+Test « keeps dots as the decimal separator on input » :
+```ts
+    expect(wrapper.get('input').element.value).toBe('12.5')
+```
+devient :
+```ts
+    expect(wrapper.get('input').element.value).toBe('12,5')
+```
+
+Test « accepts commas but normalizes them to dots » :
+```ts
+    expect(wrapper.get('input').element.value).toBe('12.34')
+```
+devient :
+```ts
+    expect(wrapper.get('input').element.value).toBe('12,34')
+```
+
+Test « normalizes a leading decimal separator » :
+```ts
+    expect(wrapper.get('input').element.value).toBe('0.5')
+```
+devient :
+```ts
+    expect(wrapper.get('input').element.value).toBe('0,5')
+```
+
+Test « keeps the normalized decimal value on blur » :
+```ts
+    expect(input.element.value).toBe('12.5')
+```
+devient :
+```ts
+    expect(input.element.value).toBe('12,5')
+```
+
+(Les tests « keeps integer values unchanged on blur » → `'12'` et « keeps an empty value empty on blur » → `''` restent corrects tels quels, car `formatGroupedAmount('12') === '12'` et `formatGroupedAmount('') === ''`.)
+
+- [ ] **Step 2 : Ajouter les tests de groupement et de maxLength**
+
+Juste avant la `})` finale qui ferme le `describe('MalioInputAmount', ...)`, ajouter :
+```ts
+  it('groupe les milliers à l\'affichage tout en émettant la valeur propre', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue('1234567')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234567'])
+    expect(wrapper.get('input').element.value).toBe('1 234 567')
+  })
+
+  it('groupe un grand montant avec décimales', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue('1234567,89')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234567.89'])
+    expect(wrapper.get('input').element.value).toBe('1 234 567,89')
+  })
+
+  it('formate la valeur initiale (modelValue) en groupé', () => {
+    const wrapper = mountInputAmount({modelValue: '1234567.89'})
+
+    expect(wrapper.get('input').element.value).toBe('1 234 567,89')
+  })
+
+  it('maxLength borne la longueur du modèle : un dépassement est ignoré', async () => {
+    const wrapper = mountInputAmount({modelValue: '', maxLength: 4})
+
+    await wrapper.get('input').setValue('12345')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.get('input').element.value).toBe('')
+  })
+
+  it('maxLength autorise une valeur à la limite', async () => {
+    const wrapper = mountInputAmount({modelValue: '', maxLength: 4})
+
+    await wrapper.get('input').setValue('1234')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234'])
+    expect(wrapper.get('input').element.value).toBe('1 234')
+  })
+
+  it('n\'a plus d\'attribut maxlength natif sur l\'input', () => {
+    const wrapper = mountInputAmount({maxLength: 4})
+
+    expect(wrapper.get('input').attributes('maxlength')).toBeUndefined()
+  })
+```
+
+- [ ] **Step 3 : Lancer la suite**
+
+Run : `npm run test -- InputAmount.test.ts`
+Expected : PASS (tous : existants mis à jour + 6 nouveaux).
+
+Si un test de `setValue` échoue parce que jsdom ne déclenche pas `setSelectionRange` comme attendu, vérifier la valeur réelle via `console.log(wrapper.get('input').element.value)` — l'affichage attendu suit `formatGroupedAmount`. Ne pas affaiblir une assertion sans comprendre.
+
+- [ ] **Step 4 : Commit**
+
+```bash
+git add app/components/malio/input/InputAmount.test.ts
+git commit -m "test(amount) : affichage groupé + maxLength sur le modèle"
+```
+
+---
+
+## Task 4 : Documentation
+
+**Files:**
+- Modify: `COMPONENTS.md`
+- Modify: `CHANGELOG.md`
+
+- [ ] **Step 1 : Note dans `COMPONENTS.md`**
+
+Dans la section `## MalioInputAmount`, remplacer la ligne de description :
+```markdown
+Champ montant avec icône devise (euro par défaut).
+```
+par :
+```markdown
+Champ montant avec icône devise (euro par défaut).
+
+L'affichage est groupé à la française (`1 234 567,89` : espace pour les milliers, virgule décimale), mis à jour en temps réel pendant la saisie. La valeur émise (`modelValue`) reste une **chaîne numérique propre** (point décimal, sans espaces, ex. `'1234567.89'`). `maxLength` borne la longueur de cette chaîne propre (pas de l'affichage).
+```
+
+- [ ] **Step 2 : Mettre à jour l'exemple de la section**
+
+Dans le bloc ```vue de la section `## MalioInputAmount`, ajouter avant la fence fermante :
+```vue
+<MalioInputAmount v-model="gros" label="Budget" />
+<!-- saisie 1234567.89 → affiché "1 234 567,89", modelValue "1234567.89" -->
+```
+
+- [ ] **Step 3 : Entrée CHANGELOG**
+
+Dans `CHANGELOG.md`, sous `### Added`, ajouter comme dernière puce de la liste (après la dernière puce existante du bloc Added) :
+```markdown
+* InputAmount : affichage groupé des milliers à la française (`1 234 567,89`) en temps réel ; `modelValue` reste propre (`'1234567.89'`) ; `maxLength` borne la longueur du modèle
+```
+
+- [ ] **Step 4 : Commit**
+
+```bash
+git add COMPONENTS.md CHANGELOG.md
+git commit -m "docs(amount) : documente l'affichage groupé des milliers"
+```
+
+---
+
+## Task 5 : Story + playground
+
+**Files:**
+- Modify: `app/story/input/inputAmount.story.vue`
+- Modify: `.playground/pages/composant/input/inputAmount.vue`
+
+- [ ] **Step 1 : Carte « grand montant » dans la story**
+
+Dans `app/story/input/inputAmount.story.vue`, juste après la carte « Simple » (le `<div class="rounded-lg border p-4">` contenant `v-model="simpleValue"`, qui se termine par `</div>` avant la carte « Avec hint »), insérer :
+```html
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Grand montant (séparateurs)</h2>
+        <MalioInputAmount
+          v-model="bigValue"
+          label="Budget"
+        />
+        <p class="mt-2 text-sm text-m-muted">
+          modelValue émis : <code>{{ bigValue || 'vide' }}</code>
+        </p>
+      </div>
+```
+
+- [ ] **Step 2 : Déclarer la ref dans la story**
+
+Dans le `<script setup>` de `app/story/input/inputAmount.story.vue`, après `const simpleValue = ref('')`, ajouter :
+```ts
+const bigValue = ref('1234567.89')
+```
+
+- [ ] **Step 3 : Exemple « grand montant » dans le playground**
+
+Dans `.playground/pages/composant/input/inputAmount.vue`, juste après la carte « Avec label » (le `<div class="rounded-lg border p-4">` contenant `name="amount"`, qui se termine par `</div>` avant la carte « Désactivé »), insérer :
+```html
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Grand montant (séparateurs)</h2>
+      <MalioInputAmount
+        v-model="bigValue"
+        label="Budget"
+      />
+      <div class="mt-2 rounded border p-3 text-sm">
+        <p>modelValue émis : <code>{{ bigValue || 'vide' }}</code></p>
+      </div>
+    </div>
+```
+
+- [ ] **Step 4 : Déclarer la ref dans le playground**
+
+Dans le `<script setup>` de `.playground/pages/composant/input/inputAmount.vue`, ajouter (créer le bloc s'il n'existe pas déjà — vérifier la présence d'un `<script setup lang="ts">` ; sinon l'ajouter en bas du fichier) :
+```ts
+const bigValue = ref('1234567.89')
+```
+Si le `<script setup>` n'importe pas encore `ref`, ajouter `import {ref} from 'vue'` en tête du script.
+
+- [ ] **Step 5 : Vérifier le lint**
+
+Run : `npm run lint`
+Expected : 0 erreur sur les deux fichiers modifiés (warnings pré-existants ailleurs tolérés).
+
+- [ ] **Step 6 : Commit**
+
+```bash
+git add app/story/input/inputAmount.story.vue .playground/pages/composant/input/inputAmount.vue
+git commit -m "docs(amount) : exemple grand montant groupé (story + playground)"
+```
+
+---
+
+## Task 6 : Vérification finale
+
+- [ ] **Step 1 : Suites amount**
+
+Run : `npm run test -- amountFormat.test.ts InputAmount.test.ts`
+Expected : PASS (helpers + composant).
+
+- [ ] **Step 2 : Lint global**
+
+Run : `npm run lint`
+Expected : 0 erreur.
+
+- [ ] **Step 3 : Vérification manuelle (playground)**
+
+Run : `npm run dev`, ouvrir `composant/input/inputAmount`, carte « Grand montant ».
+Vérifier :
+- Taper `1234567` → affiche `1 234 567` au fil de la frappe ; `modelValue` affiché = `1234567`.
+- Taper une virgule + décimales → `1 234 567,89` ; `modelValue` = `1234567.89`.
+- Le curseur reste cohérent quand un séparateur s'insère (taper au milieu d'un nombre).
+- La valeur initiale `1234567.89` s'affiche groupée au montage.
+
+---
+
+## Self-Review
+
+**Spec coverage :**
+- Modèle propre, séparateurs visuels → Task 2 (binding `formattedValue`, emit `model`).
+- Temps réel + curseur → Task 2 Step 4 (`onInput` avec `countSignificant`/`caretFromSignificant`).
+- Format FR (espace + virgule) → Task 1 (`formatGroupedAmount`).
+- Par défaut sur tous (pas de prop) → aucune prop ajoutée.
+- `maxLength` sur le modèle + suppression `maxlength` natif → Task 2 Steps 3-4, tests Task 3.
+- Extraction `amountFormat.ts` → Task 1.
+- Table de vérité → Task 1 tests + Task 3 tests.
+- Docs + story + playground → Tasks 4, 5.
+
+**Placeholder scan :** aucun TODO/TBD ; code fourni intégralement.
+
+**Type consistency :** `normalizeAmount`, `formatGroupedAmount`, `countSignificant`, `caretFromSignificant` (signatures identiques entre Task 1, leur usage Task 2, et les imports). `formattedValue` (computed) utilisée dans le binding et le chemin de rejet maxLength. `model` = sortie de `normalizeAmount`, émis tel quel.
-- 
2.39.5


From 8f9b7857fa7cd9071834b96e8c637c8fb470275e Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:47:17 +0200
Subject: [PATCH 17/38] feat(amount) : helpers amountFormat (normalize, group,
 curseur)

---
 .../input/composables/amountFormat.test.ts    | 74 +++++++++++++++++++
 .../malio/input/composables/amountFormat.ts   | 40 ++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 app/components/malio/input/composables/amountFormat.test.ts
 create mode 100644 app/components/malio/input/composables/amountFormat.ts

diff --git a/app/components/malio/input/composables/amountFormat.test.ts b/app/components/malio/input/composables/amountFormat.test.ts
new file mode 100644
index 0000000..484c52e
--- /dev/null
+++ b/app/components/malio/input/composables/amountFormat.test.ts
@@ -0,0 +1,74 @@
+import {describe, expect, it} from 'vitest'
+import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './amountFormat'
+
+describe('normalizeAmount', () => {
+  it('garde le point décimal', () => {
+    expect(normalizeAmount('12.5')).toBe('12.5')
+  })
+  it('convertit la virgule en point et nettoie', () => {
+    expect(normalizeAmount('0012,345abc')).toBe('12.34')
+  })
+  it('normalise une décimale en tête', () => {
+    expect(normalizeAmount(',5')).toBe('0.5')
+  })
+  it('retire les espaces', () => {
+    expect(normalizeAmount('1 234 567')).toBe('1234567')
+  })
+  it('limite à 2 décimales', () => {
+    expect(normalizeAmount('1234.567')).toBe('1234.56')
+  })
+  it('garde une décimale en cours de saisie', () => {
+    expect(normalizeAmount('12.')).toBe('12.')
+  })
+  it('renvoie une chaîne vide pour une saisie non numérique', () => {
+    expect(normalizeAmount('abc')).toBe('')
+  })
+  it('garde un zéro seul', () => {
+    expect(normalizeAmount('0')).toBe('0')
+  })
+})
+
+describe('formatGroupedAmount', () => {
+  it('groupe la partie entière par 3 avec des espaces', () => {
+    expect(formatGroupedAmount('1234567')).toBe('1 234 567')
+  })
+  it('utilise la virgule comme séparateur décimal', () => {
+    expect(formatGroupedAmount('1234.56')).toBe('1 234,56')
+  })
+  it('affiche une virgule pour une décimale en cours', () => {
+    expect(formatGroupedAmount('12.')).toBe('12,')
+  })
+  it('gère les valeurs sous 1000 sans séparateur', () => {
+    expect(formatGroupedAmount('12')).toBe('12')
+  })
+  it('groupe avec une décimale en tête', () => {
+    expect(formatGroupedAmount('0.5')).toBe('0,5')
+  })
+  it('renvoie une chaîne vide pour une chaîne vide', () => {
+    expect(formatGroupedAmount('')).toBe('')
+  })
+  it('garde un zéro seul', () => {
+    expect(formatGroupedAmount('0')).toBe('0')
+  })
+})
+
+describe('countSignificant', () => {
+  it('compte les caractères hors espaces à gauche du curseur', () => {
+    expect(countSignificant('1 234', 5)).toBe(4)
+  })
+  it('ignore un espace juste avant le curseur', () => {
+    expect(countSignificant('1 234', 2)).toBe(1)
+  })
+})
+
+describe('caretFromSignificant', () => {
+  it('place le curseur après le n-ième caractère significatif', () => {
+    expect(caretFromSignificant('1 234 567', 4)).toBe(5)
+  })
+  it('place le curseur en fin si on dépasse', () => {
+    expect(caretFromSignificant('1 234', 10)).toBe(5)
+  })
+  it('place le curseur au début pour 0 caractère significatif', () => {
+    expect(caretFromSignificant('1 234', 0)).toBe(0)
+  })
+})
diff --git a/app/components/malio/input/composables/amountFormat.ts b/app/components/malio/input/composables/amountFormat.ts
new file mode 100644
index 0000000..0ab574f
--- /dev/null
+++ b/app/components/malio/input/composables/amountFormat.ts
@@ -0,0 +1,40 @@
+// Parse : texte saisi (espaces, virgule, caractères parasites) → chaîne numérique propre.
+export const normalizeAmount = (value: string): string => {
+  const sanitizedValue = value
+    .replace(/\s+/g, '')
+    .replace(/,/g, '.')
+    .replace(/[^\d.]/g, '')
+  const [integerPartRaw = '', ...decimalParts] = sanitizedValue.split('.')
+  const integerPart = integerPartRaw.replace(/^0+(?=\d)/, '')
+  const decimalPart = decimalParts.join('').slice(0, 2)
+
+  if (sanitizedValue.includes('.')) {
+    return `${integerPart || '0'}.${decimalPart}`
+  }
+
+  return integerPart
+}
+
+// Format : modèle propre (point décimal) → affichage groupé FR (espaces + virgule).
+export const formatGroupedAmount = (model: string): string => {
+  if (model === '') return ''
+  const hasDot = model.includes('.')
+  const [integerPart = '', decimalPart = ''] = model.split('.')
+  const groupedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+  return hasDot ? `${groupedInteger},${decimalPart}` : groupedInteger
+}
+
+// Nombre de caractères significatifs (hors espaces de groupement) à gauche d'une position.
+export const countSignificant = (str: string, upTo: number): number =>
+  str.slice(0, upTo).replace(/ /g, '').length
+
+// Position de curseur après le n-ième caractère significatif dans la chaîne affichée.
+export const caretFromSignificant = (display: string, sig: number): number => {
+  if (sig <= 0) return 0
+  let seen = 0
+  for (let i = 0; i < display.length; i++) {
+    if (display[i] !== ' ') seen++
+    if (seen >= sig) return i + 1
+  }
+  return display.length
+}
-- 
2.39.5


From 1290fe38ccd11707a2dce24454f4888dff3fc8f3 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:51:17 +0200
Subject: [PATCH 18/38] =?UTF-8?q?feat(amount)=20:=20affichage=20group?=
 =?UTF-8?q?=C3=A9=20temps=20r=C3=A9el=20(s=C3=A9parateurs=20de=20milliers)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/malio/input/InputAmount.vue | 55 ++++++++++------------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/app/components/malio/input/InputAmount.vue b/app/components/malio/input/InputAmount.vue
index 1993972..d8806ae 100644
--- a/app/components/malio/input/InputAmount.vue
+++ b/app/components/malio/input/InputAmount.vue
@@ -9,10 +9,9 @@
         :autocomplete="autocomplete"
         :class="mergedInputClass"
         :required="required"
-        :maxlength="maxLength"
         :minlength="minLength"
         :disabled="disabled"
-        :value="currentValue"
+        :value="formattedValue"
         :readonly="readonly"
         :aria-invalid="!!error"
         :aria-describedby="describedBy"
@@ -66,6 +65,7 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './composables/amountFormat'
 
 defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
 
@@ -126,6 +126,7 @@ const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-amount-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const formattedValue = computed(() => formatGroupedAmount(currentValue.value))
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
@@ -190,35 +191,31 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void
 }>()
 
-const normalizeAmount = (value: string) => {
-  const sanitizedValue = value
-    .replace(/\s+/g, '')
-    .replace(/,/g, '.')
-    .replace(/[^\d.]/g, '')
-  const [integerPartRaw = '', ...decimalParts] = sanitizedValue.split('.')
-  const integerPart = integerPartRaw.replace(/^0+(?=\d)/, '')
-  const decimalPart = decimalParts.join('').slice(0, 2)
-
-  if (sanitizedValue.includes('.')) {
-    return `${integerPart || '0'}.${decimalPart}`
-  }
-
-  return integerPart
-}
-
-// Keep the DOM input value, local state, and v-model emission in sync.
-const updateValue = (target: HTMLInputElement, value: string) => {
-  target.value = value
-  if (!isControlled.value) {
-    localValue.value = value
-  }
-  emit('update:modelValue', value)
-}
-
-// Normalize while typing so the field never keeps invalid amount characters.
+// À la frappe : parse vers le modèle propre (émis), reformate l'affichage groupé, repositionne le curseur.
 const onInput = (event: Event) => {
   const target = event.target as HTMLInputElement
-  updateValue(target, normalizeAmount(target.value))
+  const rawText = target.value
+  const caret = target.selectionStart ?? rawText.length
+  const model = normalizeAmount(rawText)
+
+  // maxLength borne la longueur du MODÈLE (pas l'affichage) : on ignore le keystroke en dépassement.
+  if (props.maxLength != null && model.length > Number(props.maxLength)) {
+    target.value = formattedValue.value
+    const restored = Math.max(0, caret - 1)
+    target.setSelectionRange(restored, restored)
+    return
+  }
+
+  const display = formatGroupedAmount(model)
+  const sig = countSignificant(rawText, caret)
+  target.value = display
+  const newCaret = caretFromSignificant(display, sig)
+  target.setSelectionRange(newCaret, newCaret)
+
+  if (!isControlled.value) {
+    localValue.value = model
+  }
+  emit('update:modelValue', model)
 }
 
 // Keep the blur handler only for focus-driven UI state.
-- 
2.39.5


From 2ae7c4e5807b3ed9984bd403248381efdfbc5f68 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:55:23 +0200
Subject: [PATCH 19/38] =?UTF-8?q?fix(amount)=20:=20borne=20le=20curseur=20?=
 =?UTF-8?q?restaur=C3=A9=20lors=20d'un=20rejet=20maxLength?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/malio/input/InputAmount.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/malio/input/InputAmount.vue b/app/components/malio/input/InputAmount.vue
index d8806ae..fd9bf9d 100644
--- a/app/components/malio/input/InputAmount.vue
+++ b/app/components/malio/input/InputAmount.vue
@@ -201,7 +201,7 @@ const onInput = (event: Event) => {
   // maxLength borne la longueur du MODÈLE (pas l'affichage) : on ignore le keystroke en dépassement.
   if (props.maxLength != null && model.length > Number(props.maxLength)) {
     target.value = formattedValue.value
-    const restored = Math.max(0, caret - 1)
+    const restored = Math.min(Math.max(0, caret - 1), formattedValue.value.length)
     target.setSelectionRange(restored, restored)
     return
   }
-- 
2.39.5


From e05f83c98f99966ee791c44948b76181bbb0d0a2 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:56:49 +0200
Subject: [PATCH 20/38] =?UTF-8?q?test(amount)=20:=20affichage=20group?=
 =?UTF-8?q?=C3=A9=20+=20maxLength=20sur=20le=20mod=C3=A8le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../malio/input/InputAmount.test.ts           | 56 +++++++++++++++++--
 1 file changed, 52 insertions(+), 4 deletions(-)

diff --git a/app/components/malio/input/InputAmount.test.ts b/app/components/malio/input/InputAmount.test.ts
index 1518dba..5ed3fa4 100644
--- a/app/components/malio/input/InputAmount.test.ts
+++ b/app/components/malio/input/InputAmount.test.ts
@@ -97,7 +97,7 @@ describe('MalioInputAmount', () => {
     await wrapper.get('input').setValue('12.5')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
-    expect(wrapper.get('input').element.value).toBe('12.5')
+    expect(wrapper.get('input').element.value).toBe('12,5')
   })
 
   it('accepts commas but normalizes them to dots', async () => {
@@ -106,7 +106,7 @@ describe('MalioInputAmount', () => {
     await wrapper.get('input').setValue('0012,345abc')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.34'])
-    expect(wrapper.get('input').element.value).toBe('12.34')
+    expect(wrapper.get('input').element.value).toBe('12,34')
   })
 
   it('normalizes a leading decimal separator', async () => {
@@ -115,7 +115,7 @@ describe('MalioInputAmount', () => {
     await wrapper.get('input').setValue(',5')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
-    expect(wrapper.get('input').element.value).toBe('0.5')
+    expect(wrapper.get('input').element.value).toBe('0,5')
   })
 
   it('keeps the normalized decimal value on blur', async () => {
@@ -126,7 +126,7 @@ describe('MalioInputAmount', () => {
     await input.trigger('blur')
 
     expect(wrapper.emitted('update:modelValue')).toEqual([['12.5']])
-    expect(input.element.value).toBe('12.5')
+    expect(input.element.value).toBe('12,5')
   })
 
   it('keeps integer values unchanged on blur', async () => {
@@ -230,4 +230,52 @@ describe('MalioInputAmount', () => {
     expect(msg.exists()).toBe(true)
     expect(msg.classes()).not.toContain('min-h-[1rem]')
   })
+
+  it('groupe les milliers à l\'affichage tout en émettant la valeur propre', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue('1234567')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234567'])
+    expect(wrapper.get('input').element.value).toBe('1 234 567')
+  })
+
+  it('groupe un grand montant avec décimales', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue('1234567,89')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234567.89'])
+    expect(wrapper.get('input').element.value).toBe('1 234 567,89')
+  })
+
+  it('formate la valeur initiale (modelValue) en groupé', () => {
+    const wrapper = mountInputAmount({modelValue: '1234567.89'})
+
+    expect(wrapper.get('input').element.value).toBe('1 234 567,89')
+  })
+
+  it('maxLength borne la longueur du modèle : un dépassement est ignoré', async () => {
+    const wrapper = mountInputAmount({modelValue: '', maxLength: 4})
+
+    await wrapper.get('input').setValue('12345')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.get('input').element.value).toBe('')
+  })
+
+  it('maxLength autorise une valeur à la limite', async () => {
+    const wrapper = mountInputAmount({modelValue: '', maxLength: 4})
+
+    await wrapper.get('input').setValue('1234')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['1234'])
+    expect(wrapper.get('input').element.value).toBe('1 234')
+  })
+
+  it('n\'a plus d\'attribut maxlength natif sur l\'input', () => {
+    const wrapper = mountInputAmount({maxLength: 4})
+
+    expect(wrapper.get('input').attributes('maxlength')).toBeUndefined()
+  })
 })
-- 
2.39.5


From 610c9c42cb2d3685310f38cf89da008ad975ec76 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:58:50 +0200
Subject: [PATCH 21/38] =?UTF-8?q?docs(amount)=20:=20documente=20l'affichag?=
 =?UTF-8?q?e=20group=C3=A9=20des=20milliers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md  | 1 +
 COMPONENTS.md | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa7d963..b848491 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`)
 * [#MUI-42] MalioDate : saisie clavier `JJ/MM/AAAA` optionnelle (prop `editable`, masque maska, validation au blur, message `invalidMessage`)
 * InputEmail : bouton `+` d'ajout optionnel (prop `addable`, event `add`), calqué sur InputPhone ; l'icône email passe à gauche quand le bouton est actif
+* InputAmount : affichage groupé des milliers à la française (`1 234 567,89`) en temps réel ; `modelValue` reste propre (`'1234567.89'`) ; `maxLength` borne la longueur du modèle
 
 ### Changed
 * MalioButton : dimensions par défaut `w-[180px]` / `h-[38px]` (étaient `w-[200px]` / `h-[40px]`).
diff --git a/COMPONENTS.md b/COMPONENTS.md
index 22bb547..8c3b5b1 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -242,6 +242,8 @@ async function onSearchClients(query: string) {
 
 Champ montant avec icône devise (euro par défaut).
 
+L'affichage est groupé à la française (`1 234 567,89` : espace pour les milliers, virgule décimale), mis à jour en temps réel pendant la saisie. La valeur émise (`modelValue`) reste une **chaîne numérique propre** (point décimal, sans espaces, ex. `'1234567.89'`). `maxLength` borne la longueur de cette chaîne propre (pas de l'affichage).
+
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
@@ -257,6 +259,8 @@ Champ montant avec icône devise (euro par défaut).
 ```vue
 <MalioInputAmount v-model="montant" label="Montant TTC" />
 <MalioInputAmount v-model="prix" label="Prix" error="Montant invalide" />
+<MalioInputAmount v-model="gros" label="Budget" />
+<!-- saisie 1234567.89 → affiché "1 234 567,89", modelValue "1234567.89" -->
 ```
 
 ---
-- 
2.39.5


From 9f1009cae31b8232f85628ce734e1d4febe1b261 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 14:01:42 +0200
Subject: [PATCH 22/38] =?UTF-8?q?docs(amount)=20:=20exemple=20grand=20mont?=
 =?UTF-8?q?ant=20group=C3=A9=20(story=20+=20playground)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .playground/pages/composant/input/inputAmount.vue | 12 ++++++++++++
 app/story/input/inputAmount.story.vue             | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/.playground/pages/composant/input/inputAmount.vue b/.playground/pages/composant/input/inputAmount.vue
index 42190d5..477668f 100644
--- a/.playground/pages/composant/input/inputAmount.vue
+++ b/.playground/pages/composant/input/inputAmount.vue
@@ -14,6 +14,17 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Grand montant (séparateurs)</h2>
+      <MalioInputAmount
+        v-model="bigValue"
+        label="Budget"
+      />
+      <div class="mt-2 rounded border p-3 text-sm">
+        <p>modelValue émis : <code>{{ bigValue || 'vide' }}</code></p>
+      </div>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
       <MalioInputAmount
@@ -77,4 +88,5 @@
 import { ref } from 'vue'
 
 const readonlyFilledAmount = ref('1250.00')
+const bigValue = ref('1234567.89')
 </script>
diff --git a/app/story/input/inputAmount.story.vue b/app/story/input/inputAmount.story.vue
index 97defe3..6783fcc 100644
--- a/app/story/input/inputAmount.story.vue
+++ b/app/story/input/inputAmount.story.vue
@@ -9,6 +9,17 @@
         />
       </div>
 
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Grand montant (séparateurs)</h2>
+        <MalioInputAmount
+          v-model="bigValue"
+          label="Budget"
+        />
+        <p class="mt-2 text-sm text-m-muted">
+          modelValue émis : <code>{{ bigValue || 'vide' }}</code>
+        </p>
+      </div>
+
       <div class="rounded-lg border p-4">
         <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
         <MalioInputAmount
@@ -251,6 +262,7 @@ import {ref} from 'vue'
 import MalioInputAmount from '../../components/malio/input/InputAmount.vue'
 
 const simpleValue = ref('')
+const bigValue = ref('1234567.89')
 const hintValue = ref('')
 const disabledValue = ref('1500.00')
 const readonlyValue = ref('2450.75')
-- 
2.39.5


From ae5654577ceae883c1747b2a552e86778a8ea7e6 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 14:17:36 +0200
Subject: [PATCH 23/38] =?UTF-8?q?fix(datatable)=20:=20libell=C3=A9s=20pagi?=
 =?UTF-8?q?nation=20en=20fran=C3=A7ais=20(Pr=C3=A9c.=20/=20Suiv.)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                 | 1 +
 app/components/malio/datatable/DataTable.vue | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b848491..5a8d57b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,6 +46,7 @@ Liste des évolutions de la librairie Malio layer UI
 * InputAmount : affichage groupé des milliers à la française (`1 234 567,89`) en temps réel ; `modelValue` reste propre (`'1234567.89'`) ; `maxLength` borne la longueur du modèle
 
 ### Changed
+* DataTable : libellés de pagination en français — `Préc.` / `Suiv.` (étaient `Prev` / `Next`) ; aria-labels déjà en français inchangés.
 * MalioButton : dimensions par défaut `w-[180px]` / `h-[38px]` (étaient `w-[200px]` / `h-[40px]`).
 * DataTable : tailles par défaut revues — texte header `16px` (était `20px`), texte body `14px` (était `18px`), sélecteur de lignes et boutons de pagination (Prev / numéros / Next) alignés à `30px` de haut, padding de `12px` entre le bas du tableau et la barre de pagination, texte header et body passés en noir (`text-black`, étaient `text-m-primary`).
 * Select : nouvelle prop `fieldClass` pour surcharger les classes du field (notamment la hauteur `h-[40px]` jusqu'ici codée en dur) ; utilisée par le DataTable pour passer le sélecteur de perPage à `30px`.
diff --git a/app/components/malio/datatable/DataTable.vue b/app/components/malio/datatable/DataTable.vue
index 00817ee..f2575d1 100644
--- a/app/components/malio/datatable/DataTable.vue
+++ b/app/components/malio/datatable/DataTable.vue
@@ -81,7 +81,7 @@
       <nav aria-label="Pagination" class="flex items-center gap-1" data-test="pagination-nav">
         <MalioButton
           variant="tertiary"
-          label="Prev"
+          label="Préc."
           :disabled="page <= 1"
           button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
           aria-label="Page précédente"
@@ -112,7 +112,7 @@
 
         <MalioButton
           variant="tertiary"
-          label="Next"
+          label="Suiv."
           :disabled="page >= totalPages"
           button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
           aria-label="Page suivante"
-- 
2.39.5


From 092b50afeef35f9b7b48d4e4d42e6ac6bb004efa Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 15:37:11 +0200
Subject: [PATCH 24/38] fix : focus clavier visible sur radio et checkbox
 (outline m-primary)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                               | 2 ++
 COMPONENTS.md                              | 4 ++++
 app/components/malio/checkbox/Checkbox.vue | 5 +++++
 app/components/malio/radio/RadioButton.vue | 5 +++++
 4 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a8d57b..7e89872 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -65,3 +65,5 @@ Liste des évolutions de la librairie Malio layer UI
 * InputAutocomplete : suppression de 4 sources de saut visuel au focus / ouverture (extra translate label, padding `grow-height:focus`, `focus:pl-[11px]`, `!border-b-0` remplacé par `!border-b-transparent`)
 * Select / SelectCheckbox : mêmes correctifs anti-saut (suppression du padding `grow-height:focus` et remplacement de `!border-b-0` / `!border-t-0` par leurs variantes `transparent`)
 * MalioButton : largeur par défaut alignée sur `w-[200px]` (au lieu de `w-[240px]`) pour correspondre au sizing des formulaires de l'app
+* [#MUI-42] RadioButton : ajout d'un focus visible au clavier (`outline` 2px `m-primary`, offset 2px) — l'input en `appearance-none` n'avait aucun indicateur de focus, seul l'`outline: auto 1px` du navigateur restait, quasi invisible. La navigation native (Tab entre groupes, flèches dans le groupe) reste inchangée
+* [#MUI-42] Checkbox : ajout d'un focus visible au clavier sur la case (`outline` 2px `m-primary`, offset 2px) — l'input réel est masqué (`clip-path`), aucun indicateur n'apparaissait à la tabulation
diff --git a/COMPONENTS.md b/COMPONENTS.md
index 8c3b5b1..c2df66a 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -455,6 +455,8 @@ Case à cocher.
 
 **Events :** `update:modelValue(value: boolean)`
 
+**Clavier :** `Espace` coche/décoche. Focus clavier visible sur la case (`outline` 2px `m-primary`).
+
 ```vue
 <MalioCheckbox v-model="accepte" label="J'accepte les conditions" />
 <MalioCheckbox v-model="newsletter" label="Newsletter" disabled />
@@ -478,6 +480,8 @@ Bouton radio (à utiliser en groupe avec le même `name`).
 
 **Events :** `update:modelValue(value: string | number | boolean | null)`
 
+**Clavier :** comportement natif d'un groupe radio (options partageant le même `name`) — `Tab` / `Maj+Tab` entre/sort du groupe (1 seul arrêt par groupe), `↑↓←→` déplacent la sélection entre les options d'un même groupe. Focus clavier visible (`outline` 2px `m-primary`).
+
 ```vue
 <MalioRadioButton v-model="civilite" name="civilite" value="M" label="Monsieur" />
 <MalioRadioButton v-model="civilite" name="civilite" value="Mme" label="Madame" />
diff --git a/app/components/malio/checkbox/Checkbox.vue b/app/components/malio/checkbox/Checkbox.vue
index 73ba5eb..bd950a7 100644
--- a/app/components/malio/checkbox/Checkbox.vue
+++ b/app/components/malio/checkbox/Checkbox.vue
@@ -180,6 +180,11 @@ const onChange = (event: Event) => {
   border-color: rgb(0, 0, 0);
 }
 
+.inp-cbx:focus-visible + .cbx span:first-child {
+  outline: 2px solid rgb(var(--m-primary) / 1);
+  outline-offset: 2px;
+}
+
 .cbx span:first-child svg {
   position: absolute;
   top: 2px;
diff --git a/app/components/malio/radio/RadioButton.vue b/app/components/malio/radio/RadioButton.vue
index 65f17fa..7c33e9d 100644
--- a/app/components/malio/radio/RadioButton.vue
+++ b/app/components/malio/radio/RadioButton.vue
@@ -179,6 +179,11 @@ const onChange = (event: Event) => {
   opacity: 1;
 }
 
+.radio-control input[type='radio']:focus-visible {
+  outline: 2px solid rgb(var(--m-primary) / 1);
+  outline-offset: 2px;
+}
+
 .radio-control.is-error input[type='radio'] {
   border-color: rgb(var(--m-danger) / 1);
 }
-- 
2.39.5


From 4802f23b727148209cc30826992b595aa9485687 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:16:31 +0200
Subject: [PATCH 25/38] feat(input) : anneau de focus clavier sur InputText et
 InputEmail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Anneau outline m-primary affiché uniquement à la navigation clavier (Tab),
pas au clic souris. Composable partagé useKbdFocusRing (détection de modalité
clavier/souris) + utilitaire CSS .m-focus-ring-kbd. Le visuel existant
(grossissement, label flottant, bordure bleue) reste inchangé.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/assets/css/malio.css                      | 18 +++++++
 app/components/malio/input/InputEmail.vue     |  8 +++-
 app/components/malio/input/InputText.vue      |  8 +++-
 .../malio/shared/useKbdFocusRing.ts           | 48 +++++++++++++++++++
 4 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 app/components/malio/shared/useKbdFocusRing.ts

diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
index 2d5f716..95c5667 100644
--- a/app/assets/css/malio.css
+++ b/app/assets/css/malio.css
@@ -2,6 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  /* Anneau de focus clavier standard (navigation au Tab), invisible à la souris.
+     Deux déclencheurs, même rendu :
+     - .m-focus-ring        → s'appuie sur :focus-visible natif. Pour les éléments
+                              où :focus-visible se limite déjà au clavier (boutons,
+                              onglets, tuiles, checkbox/radio…).
+     - .m-focus-ring-kbd    → classe ajoutée en JS (via useKbdFocusRing) uniquement
+                              quand le focus vient du clavier. Pour les champs texte,
+                              où :focus-visible natif se déclenche aussi à la souris.
+     Le `:focus` sur .m-focus-ring-kbd élève la spécificité pour passer devant le
+     `outline-none` des inputs. */
+  .m-focus-ring:focus-visible,
+  .m-focus-ring-kbd:focus {
+    outline: 2px solid rgb(var(--m-primary) / 1);
+    outline-offset: 2px;
+  }
+}
+
 @layer base {
   :root {
     /* ── Globales ── */
diff --git a/app/components/malio/input/InputEmail.vue b/app/components/malio/input/InputEmail.vue
index 95bb5a7..7ed98dc 100644
--- a/app/components/malio/input/InputEmail.vue
+++ b/app/components/malio/input/InputEmail.vue
@@ -19,8 +19,8 @@
         type="email"
         inputmode="email"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
 
       <label
@@ -82,9 +82,12 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputEmail', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -164,6 +167,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
diff --git a/app/components/malio/input/InputText.vue b/app/components/malio/input/InputText.vue
index 14c40b1..5a1c0d4 100644
--- a/app/components/malio/input/InputText.vue
+++ b/app/components/malio/input/InputText.vue
@@ -21,8 +21,8 @@
         placeholder="_"
         type="text"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
 
       <label
@@ -69,9 +69,12 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputText', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -150,6 +153,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
diff --git a/app/components/malio/shared/useKbdFocusRing.ts b/app/components/malio/shared/useKbdFocusRing.ts
new file mode 100644
index 0000000..ba55986
--- /dev/null
+++ b/app/components/malio/shared/useKbdFocusRing.ts
@@ -0,0 +1,48 @@
+import {ref} from 'vue'
+
+/**
+ * Détection de la modalité de focus (clavier vs souris/tactile).
+ *
+ * Sur les champs texte, `:focus-visible` natif se déclenche AUSSI au clic souris
+ * (le navigateur suppose qu'on va taper). Pour n'afficher l'anneau de focus qu'à
+ * la navigation clavier (Tab), on suit la dernière interaction au niveau document
+ * et on n'arme l'anneau que si le focus a été précédé d'un évènement clavier.
+ *
+ * Le visuel « champ actif » existant (grossissement, label flottant, bordure bleue)
+ * reste piloté par `:focus` et n'est pas affecté : ce composable ne gère QUE l'anneau.
+ */
+
+let hadKeyboardEvent = false
+let listenersAttached = false
+
+function ensureGlobalListeners() {
+  if (listenersAttached || typeof document === 'undefined') return
+  listenersAttached = true
+
+  // capture=true pour observer l'évènement avant qu'il n'atteigne sa cible
+  document.addEventListener('keydown', () => {
+    hadKeyboardEvent = true
+  }, true)
+
+  const markPointer = () => {
+    hadKeyboardEvent = false
+  }
+  document.addEventListener('mousedown', markPointer, true)
+  document.addEventListener('pointerdown', markPointer, true)
+  document.addEventListener('touchstart', markPointer, true)
+}
+
+export function useKbdFocusRing() {
+  ensureGlobalListeners()
+
+  const keyboardFocused = ref(false)
+
+  const onFocus = () => {
+    keyboardFocused.value = hadKeyboardEvent
+  }
+  const onBlur = () => {
+    keyboardFocused.value = false
+  }
+
+  return {keyboardFocused, onFocus, onBlur}
+}
-- 
2.39.5


From 01f29c2f0f652effd6841da3cf3ce77f1be98a5a Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:17:50 +0200
Subject: [PATCH 26/38] feat(input) : anneau de focus clavier sur InputPassword

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/input/InputPassword.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/malio/input/InputPassword.vue b/app/components/malio/input/InputPassword.vue
index cf2996e..e5984ef 100644
--- a/app/components/malio/input/InputPassword.vue
+++ b/app/components/malio/input/InputPassword.vue
@@ -20,8 +20,8 @@
         placeholder="_"
         :type="isPasswordVisible ? 'text' : 'password'"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
 
       <label
@@ -70,9 +70,12 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputPassword', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -147,6 +150,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
-- 
2.39.5


From 2724476f1ce7a9d18498b00d83c3e3a18faedf14 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:19:22 +0200
Subject: [PATCH 27/38] feat(input) : anneau de focus clavier sur InputPhone

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/input/InputPhone.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/malio/input/InputPhone.vue b/app/components/malio/input/InputPhone.vue
index 9639d2c..86213d2 100644
--- a/app/components/malio/input/InputPhone.vue
+++ b/app/components/malio/input/InputPhone.vue
@@ -20,8 +20,8 @@
         type="tel"
         inputmode="tel"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
 
       <label
@@ -85,9 +85,12 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputPhone', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -167,6 +170,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
-- 
2.39.5


From 74cb90fe1d9fe16cb2ab5d0e4967b4207ce0138a Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:22:16 +0200
Subject: [PATCH 28/38] feat(input) : anneau de focus clavier sur InputAmount

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/input/InputAmount.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/components/malio/input/InputAmount.vue b/app/components/malio/input/InputAmount.vue
index fd9bf9d..1b06327 100644
--- a/app/components/malio/input/InputAmount.vue
+++ b/app/components/malio/input/InputAmount.vue
@@ -20,7 +20,7 @@
         inputmode="decimal"
         placeholder="_"
         @input="onInput"
-        @focus="isFocused = true"
+        @focus="isFocused = true; onKbdFocus()"
         @blur="onBlur"
       >
 
@@ -65,10 +65,13 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './composables/amountFormat'
 
 defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -146,6 +149,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
@@ -221,6 +225,7 @@ const onInput = (event: Event) => {
 // Keep the blur handler only for focus-driven UI state.
 const onBlur = () => {
   isFocused.value = false
+  onKbdBlur()
 }
 
 const iconInputPaddingClass = computed(() => {
-- 
2.39.5


From c427f5a7c5a29f98268813c319dd42b3969b01dc Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:27:13 +0200
Subject: [PATCH 29/38] feat(input) : anneau de focus clavier sur InputNumber
 (champ + boutons +/-)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/input/InputNumber.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/malio/input/InputNumber.vue b/app/components/malio/input/InputNumber.vue
index f9e009f..73ffe7b 100644
--- a/app/components/malio/input/InputNumber.vue
+++ b/app/components/malio/input/InputNumber.vue
@@ -10,6 +10,7 @@
       </label>
       <button
         type="button"
+        class="m-focus-ring rounded-malio"
         :disabled="isMinusDisabled"
         @click="decrement"
       >
@@ -35,11 +36,12 @@
         inputmode="numeric"
         placeholder="_"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
       <button
         type="button"
+        class="m-focus-ring rounded-malio"
         :disabled="isPlusDisabled"
         @click="increment"
       >
@@ -73,9 +75,12 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputNumber', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -184,6 +189,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     ' peer h-[22px] min-w-0 border bg-white text-center outline-none placeholder:text-transparent text-lg border-x-0 border-black',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     props.disabled ? 'cursor-not-allowed text-black/60' : 'cursor-text',
     hasError.value
       ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
-- 
2.39.5


From 74ee815d822eed8505b34e61881c72b7af7ebdfe Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:36:57 +0200
Subject: [PATCH 30/38] =?UTF-8?q?feat(upload)=20:=20anneau=20focus=20clavi?=
 =?UTF-8?q?er,=20activation=20Entr=C3=A9e/Espace=20et=20prop=20clearable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Anneau de focus clavier sur le champ (via useKbdFocusRing)
- Ouverture du sélecteur de fichier au clavier (Entrée / Espace)
- Nouveau prop `clearable` (défaut false) : croix `mdi:close` focusable
  (Entrée/Espace, anneau clavier) qui vide le champ et émet l'event `clear`
- Playground : carte de démonstration "Clearable"

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../pages/composant/input/inputUpload.vue     | 16 +++++
 app/components/malio/input/InputUpload.vue    | 67 +++++++++++++++----
 2 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/.playground/pages/composant/input/inputUpload.vue b/.playground/pages/composant/input/inputUpload.vue
index abb474a..5762dba 100644
--- a/.playground/pages/composant/input/inputUpload.vue
+++ b/.playground/pages/composant/input/inputUpload.vue
@@ -14,6 +14,17 @@
       <p class="mt-2 text-sm text-gray-500">Valeur : {{ uploadValue || '(aucun)' }}</p>
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Clearable (croix pour vider)</h2>
+      <MalioInputUpload
+        v-model="clearableUpload"
+        label="Téléverser un document"
+        clearable
+        @clear="onClearUpload"
+      />
+      <p class="mt-2 text-sm text-gray-500">Valeur : {{ clearableUpload || '(aucun)' }}</p>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
       <MalioInputUpload
@@ -94,6 +105,11 @@ import { computed, ref } from 'vue'
 const readonlyFilledUpload = ref('document.pdf')
 const uploadValue = ref('')
 const dynamicUpload = ref('')
+const clearableUpload = ref('rapport-2026.pdf')
+
+const onClearUpload = () => {
+  clearableUpload.value = ''
+}
 
 const dynamicError = computed(() => {
   if (!dynamicUpload.value) return ''
diff --git a/app/components/malio/input/InputUpload.vue b/app/components/malio/input/InputUpload.vue
index 2923ae9..0c7861d 100644
--- a/app/components/malio/input/InputUpload.vue
+++ b/app/components/malio/input/InputUpload.vue
@@ -26,8 +26,10 @@
         placeholder="_"
         type="text"
         @click="openFilePicker"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @keydown.enter.prevent="openFilePicker"
+        @keydown.space.prevent="openFilePicker"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
 
       <label
@@ -38,17 +40,33 @@
         {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
-      <IconifyIcon
-        v-if="displayIcon"
-        icon="mdi:cloud-arrow-up-outline"
-        :width="24"
-        :height="24"
-        data-test="icon"
-        :class="[
-        iconStateClass,
-        'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
-      ]"
-      />
+      <div
+        v-if="displayIcon || showClear"
+        class="absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-1"
+      >
+        <button
+          v-if="showClear"
+          type="button"
+          data-test="clear"
+          class="m-focus-ring rounded-malio text-m-muted hover:text-m-primary"
+          aria-label="Retirer le fichier"
+          @click.stop="onClear"
+        >
+          <IconifyIcon
+            icon="mdi:close"
+            :width="16"
+            :height="16"
+          />
+        </button>
+        <IconifyIcon
+          v-if="displayIcon"
+          icon="mdi:cloud-arrow-up-outline"
+          :width="24"
+          :height="24"
+          data-test="icon"
+          :class="[iconStateClass, 'pointer-events-none']"
+        />
+      </div>
 
     </div>
     <p
@@ -75,9 +93,12 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputUpload', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -94,6 +115,7 @@ const props = withDefaults(
     displayIcon?: boolean
     accept?: string
     required?: boolean
+    clearable?: boolean
     reserveMessageSpace?: boolean
   }>(),
   {
@@ -111,6 +133,7 @@ const props = withDefaults(
     displayIcon: true,
     accept: '',
     required: false,
+    clearable: false,
     reserveMessageSpace: true,
   },
 )
@@ -143,6 +166,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md cursor-pointer',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
@@ -153,7 +177,9 @@ const mergedInputClass = computed(() =>
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
         : isReadonly.value ? '' : 'focus:border-m-primary',
-    props.displayIcon ? '!pr-10' : '',
+    showClear.value
+      ? (props.displayIcon ? '!pr-16' : '!pr-10')
+      : (props.displayIcon ? '!pr-10' : ''),
     isReadonly.value ? '' : 'focus:pl-[11px]',
     isReadonly.value ? 'cursor-default' : '',
     disabled.value ? 'cursor-not-allowed' : '',
@@ -191,8 +217,21 @@ const describedBy = computed(() => {
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void
   (event: 'file-selected', file: File): void
+  (event: 'clear'): void
 }>()
 
+const showClear = computed(() =>
+  props.clearable && isFilled.value && !props.disabled && !isReadonly.value,
+)
+
+const onClear = () => {
+  if (props.disabled || isReadonly.value) return
+  if (!isControlled.value) localValue.value = ''
+  if (fileInputRef.value) fileInputRef.value.value = ''
+  emit('update:modelValue', '')
+  emit('clear')
+}
+
 const openFilePicker = () => {
   if (props.disabled || props.readonly) return
   fileInputRef.value?.click()
-- 
2.39.5


From 88c2a00d8957a91c9bc0581d0525a4d5eb18d1a0 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:38:32 +0200
Subject: [PATCH 31/38] feat(input) : anneau de focus clavier sur InputTextArea

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/input/InputTextArea.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/malio/input/InputTextArea.vue b/app/components/malio/input/InputTextArea.vue
index d8a25a5..a3f2c85 100644
--- a/app/components/malio/input/InputTextArea.vue
+++ b/app/components/malio/input/InputTextArea.vue
@@ -19,6 +19,7 @@
         textInput,
         showCounterComputed ? 'pb-6' : '',
         rounded,
+        keyboardFocused ? 'm-focus-ring-kbd' : '',
       ]"
         :required="required"
         :maxlength="maxLength"
@@ -32,8 +33,8 @@
         v-bind="attrs"
         placeholder="_"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       />
       <label
         v-if="label"
@@ -89,9 +90,12 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
-- 
2.39.5


From 379f4a2d6fdfe6ba585e07a1eca2bfd9df206162 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:51:42 +0200
Subject: [PATCH 32/38] feat(autocomplete) : anneau focus clavier + navigation
 clavier APG
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Anneau de focus clavier (clavier-only) ; quand la liste est ouverte,
  l'anneau entoure tout le bloc input + liste d'un seul tenant
  (utilitaires CSS .m-combo-ring-top / .m-combo-ring-bottom)
- Navigation clavier aux normes WAI-ARIA APG : scroll auto de l'option
  active dans la vue, ArrowUp ouvre sur la dernière option, Home/End,
  Tab ferme la liste

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/assets/css/malio.css                      | 17 ++++++++
 .../malio/input/InputAutocomplete.vue         | 40 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
index 95c5667..0ab6772 100644
--- a/app/assets/css/malio.css
+++ b/app/assets/css/malio.css
@@ -18,6 +18,23 @@
     outline: 2px solid rgb(var(--m-primary) / 1);
     outline-offset: 2px;
   }
+
+  /* Anneau de focus clavier pour un combobox ouvert (input + liste) : l'anneau
+     entoure le bloc entier d'un seul tenant. L'input porte le contour haut+côtés,
+     la liste le contour côtés+bas ; la jonction (bas de l'input / haut de la liste)
+     reste sans contour pour un raccord sans couture. */
+  .m-combo-ring-top {
+    box-shadow:
+      -2px 0 0 0 rgb(var(--m-primary) / 1),
+      2px 0 0 0 rgb(var(--m-primary) / 1),
+      0 -2px 0 0 rgb(var(--m-primary) / 1);
+  }
+  .m-combo-ring-bottom {
+    box-shadow:
+      -2px 0 0 0 rgb(var(--m-primary) / 1),
+      2px 0 0 0 rgb(var(--m-primary) / 1),
+      0 2px 0 0 rgb(var(--m-primary) / 1);
+  }
 }
 
 @layer base {
diff --git a/app/components/malio/input/InputAutocomplete.vue b/app/components/malio/input/InputAutocomplete.vue
index 5343ac0..362a97f 100644
--- a/app/components/malio/input/InputAutocomplete.vue
+++ b/app/components/malio/input/InputAutocomplete.vue
@@ -24,6 +24,7 @@
         type="text"
         @input="onInput"
         @focus="onFocus"
+        @blur="onKbdBlur"
         @click="onInputClick"
         @keydown="onKeydown"
       >
@@ -90,6 +91,7 @@
             : hasSuccess
               ? 'border-m-success select-scrollbar-success'
               : 'border-m-primary select-scrollbar-primary',
+          keyboardFocused ? 'm-combo-ring-bottom' : '',
         ]"
       >
         <li
@@ -150,13 +152,16 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch} from 'vue'
+import {computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputAutocomplete', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 type Option = {
   label: string
   value: string | number
@@ -321,6 +326,7 @@ const labelPositionClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    keyboardFocused.value ? (isOpen.value ? 'm-combo-ring-top' : 'm-focus-ring-kbd') : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
@@ -400,6 +406,7 @@ const onInput = (event: Event) => {
 }
 
 const onFocus = () => {
+  onKbdFocus()
   if (props.disabled || props.readonly) return
   isFocused.value = true
   isOpen.value = true
@@ -446,7 +453,20 @@ const closeAndRevert = () => {
   isFocused.value = false
 }
 
+// Garde l'option active visible dans la liste défilante quand on navigue au clavier
+watch(activeIndex, async (index) => {
+  if (index < 0 || !isOpen.value) return
+  await nextTick()
+  document.getElementById(optionId(index))?.scrollIntoView({block: 'nearest'})
+})
+
 const onKeydown = (event: KeyboardEvent) => {
+  // Tab : laisse le focus partir mais ferme la liste (et valide la saisie courante)
+  if (event.key === 'Tab') {
+    if (isOpen.value) closeAndCommit()
+    return
+  }
+
   if (event.key === 'Escape') {
     event.preventDefault()
     closeAndRevert()
@@ -479,7 +499,25 @@ const onKeydown = (event: KeyboardEvent) => {
 
   if (event.key === 'ArrowUp') {
     event.preventDefault()
+    // Liste fermée : ouvre et place sur la dernière option (APG)
+    if (!isOpen.value) {
+      isOpen.value = true
+      activeIndex.value = filteredOptions.value.length - 1
+      return
+    }
     activeIndex.value = Math.max(activeIndex.value - 1, 0)
+    return
+  }
+
+  // Home / End : première / dernière option quand la liste est ouverte
+  if (isOpen.value && event.key === 'Home') {
+    event.preventDefault()
+    activeIndex.value = 0
+    return
+  }
+  if (isOpen.value && event.key === 'End') {
+    event.preventDefault()
+    activeIndex.value = filteredOptions.value.length - 1
   }
 }
 
-- 
2.39.5


From 5b25e7c6922562205a23829bccea2604755aa7bf Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:59:25 +0200
Subject: [PATCH 33/38] =?UTF-8?q?feat(select)=20:=20anneau=20focus=20clavi?=
 =?UTF-8?q?er,=20navigation=20APG=20et=20focus=20conserv=C3=A9=20apr=C3=A8?=
 =?UTF-8?q?s=20s=C3=A9lection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Anneau de focus clavier (clavier-only) ; ouvert, l'anneau entoure
  bouton + liste d'un seul tenant, adapté au sens d'ouverture (haut/bas)
- Navigation clavier WAI-ARIA APG (manquait) : ouverture, flèches avec
  scroll auto de l'option active, Home/End, Entrée/Espace, Échap, Tab
- aria-activedescendant pour les lecteurs d'écran
- Le focus reste sur le bouton après sélection (plus de blur vers le body)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/select/Select.vue | 82 +++++++++++++++++++++++++-
 1 file changed, 79 insertions(+), 3 deletions(-)

diff --git a/app/components/malio/select/Select.vue b/app/components/malio/select/Select.vue
index e331f76..28c6b65 100644
--- a/app/components/malio/select/Select.vue
+++ b/app/components/malio/select/Select.vue
@@ -37,15 +37,24 @@
           twMerge(label ? 'min-h-[40px]' : 'h-[40px] py-0', fieldClass),
           rounded,
           textField,
+          keyboardFocused
+            ? (isOpen
+              ? (openDirection === 'down' ? 'm-combo-ring-top' : 'm-combo-ring-bottom')
+              : 'm-focus-ring-kbd')
+            : '',
   ]"
       :aria-expanded="isOpen"
       :aria-controls="listboxId"
+      :aria-activedescendant="isOpen && activeIndex >= 0 ? optionId(activeIndex) : undefined"
       :aria-invalid="hasError"
       :aria-describedby="describedBy"
       :aria-required="required || undefined"
       :aria-readonly="isReadonly || undefined"
       :disabled="disabled"
       @click="toggle"
+      @keydown="onKeydown"
+      @focus="onKbdFocus"
+      @blur="onKbdBlur"
     >
       <label
         v-if="label"
@@ -134,7 +143,10 @@
           ? 'border-m-danger'
           : hasSuccess
             ? 'border-m-success'
-            : 'border-m-primary'
+            : 'border-m-primary',
+        keyboardFocused
+          ? (openDirection === 'down' ? 'm-combo-ring-bottom' : 'm-combo-ring-top')
+          : '',
       ]"
     >
       <li
@@ -184,13 +196,16 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
+import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioSelect', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 type Option = {
   label: string;
   value: string | number | null
@@ -344,7 +359,68 @@ function toggle() {
 function select(value: string | number | null) {
   emit('update:modelValue', value)
   close()
-  buttonRef.value?.blur()
+  // On garde le focus sur le bouton après sélection (APG) : le focus ne doit pas
+  // retomber sur le body. La souris le conserve déjà via @mousedown.prevent sur
+  // les options ; au clavier le focus n'a jamais quitté le bouton.
+  buttonRef.value?.focus()
+}
+
+// Garde l'option active visible quand on navigue au clavier
+watch(activeIndex, async (index) => {
+  if (index < 0 || !isOpen.value) return
+  await nextTick()
+  document.getElementById(optionId(index))?.scrollIntoView({block: 'nearest'})
+})
+
+function onKeydown(e: KeyboardEvent) {
+  if (props.disabled || props.readonly) return
+
+  // Tab : laisse le focus partir mais ferme la liste
+  if (e.key === 'Tab') {
+    if (isOpen.value) close()
+    return
+  }
+
+  // Liste fermée : ouverture au clavier
+  if (!isOpen.value) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      open()
+    }
+    return
+  }
+
+  // Liste ouverte
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    close()
+    return
+  }
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    const opt = normalizedOptions.value[activeIndex.value]
+    if (opt) select(opt.value)
+    return
+  }
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = Math.min(activeIndex.value + 1, normalizedOptions.value.length - 1)
+    return
+  }
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = Math.max(activeIndex.value - 1, 0)
+    return
+  }
+  if (e.key === 'Home') {
+    e.preventDefault()
+    activeIndex.value = 0
+    return
+  }
+  if (e.key === 'End') {
+    e.preventDefault()
+    activeIndex.value = normalizedOptions.value.length - 1
+  }
 }
 
 function onClickOutside(e: MouseEvent) {
-- 
2.39.5


From 3432054a58646480b2e583dfa14c21e35cfe7bc7 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 17:07:44 +0200
Subject: [PATCH 34/38] feat(select-checkbox) : anneau focus clavier,
 navigation APG et clic pleine ligne
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Anneau de focus clavier (clavier-only), combo bouton + liste selon le sens
- Navigation clavier WAI-ARIA APG : ouverture, flèches + scroll auto,
  Home/End, Entrée/Espace togglent (liste reste ouverte), Échap/Tab ferment
- Ligne "Tout sélectionner" intégrée à la navigation clavier (index -1)
- aria-activedescendant ; focus conservé sur le bouton
- Clic sur toute la ligne (li) coche/décoche, plus seulement sur le label

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../malio/select/SelectCheckbox.vue           | 107 ++++++++++++++++--
 1 file changed, 97 insertions(+), 10 deletions(-)

diff --git a/app/components/malio/select/SelectCheckbox.vue b/app/components/malio/select/SelectCheckbox.vue
index db819e1..d457b1f 100644
--- a/app/components/malio/select/SelectCheckbox.vue
+++ b/app/components/malio/select/SelectCheckbox.vue
@@ -37,15 +37,24 @@
           label ? 'min-h-[40px]' : 'h-[40px] py-0',
           rounded,
           textField,
+          keyboardFocused
+            ? (isOpen
+              ? (openDirection === 'down' ? 'm-combo-ring-top' : 'm-combo-ring-bottom')
+              : 'm-focus-ring-kbd')
+            : '',
   ]"
       :aria-expanded="isOpen"
       :aria-controls="listboxId"
+      :aria-activedescendant="!isOpen ? undefined : (activeIndex === -1 ? selectAllId : (activeIndex >= 0 ? optionId(activeIndex) : undefined))"
       :aria-invalid="hasError"
       :aria-describedby="describedBy"
       :aria-required="required || undefined"
       :aria-readonly="isReadonly || undefined"
       :disabled="disabled"
       @click="toggle"
+      @keydown="onKeydown"
+      @focus="onKbdFocus"
+      @blur="onKbdBlur"
     >
       <label
         v-if="label"
@@ -162,7 +171,10 @@
           ? 'border-m-danger'
           : hasSuccess
             ? 'border-m-success'
-            : 'border-m-primary'
+            : 'border-m-primary',
+        keyboardFocused
+          ? (openDirection === 'down' ? 'm-combo-ring-bottom' : 'm-combo-ring-top')
+          : '',
       ]"
     >
       <li
@@ -174,18 +186,23 @@
       </li>
       <li
         v-if="displaySelectAll && normalizedOptions.length > 0"
-        class="border-b border-m-muted/30 px-3 py-2"
+        :id="selectAllId"
+        role="option"
+        :aria-selected="allSelected"
+        class="cursor-pointer border-b border-m-muted/30 px-3 py-2"
+        :class="[activeIndex === -1 ? 'bg-m-muted/10' : '']"
+        @mouseenter="activeIndex = -1"
         @mousedown.prevent
+        @click="toggleAll"
       >
         <Checkbox
           :model-value="allSelected"
           :label="selectAllLabel"
           :disabled="disabled"
-          group-class="!mt-0"
-          label-class="option-checkbox w-full cursor-pointer font-semibold"
+          group-class="!mt-0 pointer-events-none"
+          label-class="option-checkbox w-full font-semibold"
           tabindex="-1"
           :reserve-message-space="false"
-          @update:model-value="toggleAll"
         />
       </li>
       <li
@@ -194,7 +211,7 @@
         :key="String(opt.value)"
         role="option"
         :aria-selected="isChecked(opt.value)"
-        class="px-3 py-2"
+        class="cursor-pointer px-3 py-2"
         :class="[
             index === activeIndex ? 'bg-m-muted/10' : '',
             isChecked(opt.value) ? 'bg-m-muted/10 font-semibold' : '',
@@ -202,16 +219,16 @@
           ]"
         @mouseenter="activeIndex = index"
         @mousedown.prevent
+        @click="toggleOption(opt.value)"
       >
         <Checkbox
           :model-value="isChecked(opt.value)"
           :label="opt.label || '\u00A0'"
           :disabled="disabled"
-          group-class="!mt-0"
-          label-class="option-checkbox w-full cursor-pointer"
+          group-class="!mt-0 pointer-events-none"
+          label-class="option-checkbox w-full"
           tabindex="-1"
           :reserve-message-space="false"
-          @update:model-value="toggleOption(opt.value)"
         />
       </li>
     </ul>
@@ -235,14 +252,17 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
+import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import Checkbox from '../checkbox/Checkbox.vue'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 type Option = {
   label: string;
   value: string | number
@@ -302,6 +322,9 @@ const openDirection = ref<'down' | 'up'>('down')
 const uid = useId()
 const buttonId = `custom-select-btn-${uid}`
 const listboxId = `custom-select-listbox-${uid}`
+const selectAllId = `custom-select-all-${uid}`
+// Index actif le plus bas : -1 cible la ligne « tout sélectionner » quand elle est affichée
+const lowestIndex = computed(() => (props.displaySelectAll && normalizedOptions.value.length > 0 ? -1 : 0))
 const listRef = ref<HTMLElement | null>(null)
 const listHeight = ref(0)
 const normalizedOptions = computed<Option[]>(() => props.options)
@@ -427,6 +450,70 @@ function toggleAll() {
   nextTick(() => buttonRef.value?.focus())
 }
 
+// Garde l'option active visible quand on navigue au clavier
+watch(activeIndex, async (index) => {
+  if (!isOpen.value) return
+  await nextTick()
+  const id = index === -1 ? selectAllId : (index >= 0 ? optionId(index) : null)
+  if (id) document.getElementById(id)?.scrollIntoView({block: 'nearest'})
+})
+
+function onKeydown(e: KeyboardEvent) {
+  if (props.disabled || props.readonly) return
+
+  // Tab : laisse le focus partir mais ferme la liste
+  if (e.key === 'Tab') {
+    if (isOpen.value) close()
+    return
+  }
+
+  // Liste fermée : ouverture au clavier
+  if (!isOpen.value) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      open()
+    }
+    return
+  }
+
+  // Liste ouverte (multi-select : Entrée/Espace togglent et la liste reste ouverte)
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    close()
+    return
+  }
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    // -1 = ligne « tout sélectionner »
+    if (activeIndex.value === -1) {
+      toggleAll()
+      return
+    }
+    const opt = normalizedOptions.value[activeIndex.value]
+    if (opt) toggleOption(opt.value)
+    return
+  }
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = Math.min(activeIndex.value + 1, normalizedOptions.value.length - 1)
+    return
+  }
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = Math.max(activeIndex.value - 1, lowestIndex.value)
+    return
+  }
+  if (e.key === 'Home') {
+    e.preventDefault()
+    activeIndex.value = lowestIndex.value
+    return
+  }
+  if (e.key === 'End') {
+    e.preventDefault()
+    activeIndex.value = normalizedOptions.value.length - 1
+  }
+}
+
 function onClickOutside(e: MouseEvent) {
   if (!root.value) return
   if (!root.value.contains(e.target as Node)) close()
-- 
2.39.5


From b840280a7e9b16110a17dd799e787d3108d00276 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 17:11:57 +0200
Subject: [PATCH 35/38] feat(button) : anneau de focus clavier standard
 (.m-focus-ring) sur Button et ButtonIcon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remplace le halo focus-visible:ring-2 ring-m-primary/50 par l'anneau outline
standard (m-primary plein, offset 2px), cohérent avec les autres composants.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/button/Button.vue     | 2 +-
 app/components/malio/button/ButtonIcon.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/malio/button/Button.vue b/app/components/malio/button/Button.vue
index 11037c9..81f5e9f 100644
--- a/app/components/malio/button/Button.vue
+++ b/app/components/malio/button/Button.vue
@@ -84,7 +84,7 @@ const variantClasses = computed(() => {
 
 const mergedButtonClass = computed(() =>
   twMerge(
-    'inline-flex w-[180px] h-[38px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    'inline-flex w-[180px] h-[38px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 m-focus-ring',
     variantClasses.value,
     props.buttonClass,
   ),
diff --git a/app/components/malio/button/ButtonIcon.vue b/app/components/malio/button/ButtonIcon.vue
index 9534324..645d93e 100644
--- a/app/components/malio/button/ButtonIcon.vue
+++ b/app/components/malio/button/ButtonIcon.vue
@@ -52,7 +52,7 @@ const isFilled = computed(() => props.variant === 'filled')
 
 const mergedButtonClass = computed(() =>
   twMerge(
-    'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 m-focus-ring',
     isFilled.value
       ? props.disabled
         ? 'bg-m-disabled text-white cursor-not-allowed'
-- 
2.39.5


From 16514d7f9684d23b755ac9f6021d1bb5f1fe3232 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 17:12:28 +0200
Subject: [PATCH 36/38] =?UTF-8?q?fix(playground)=20:=20displayTag=20pass?=
 =?UTF-8?q?=C3=A9=20en=20bool=C3=A9en=20sur=20SelectCheckbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`displayTag="true"` (string) déclenchait un warning de type Vue
(Expected Boolean, got String). Passage en `:display-tag="true"`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .playground/pages/composant/select/selectCheckbox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.playground/pages/composant/select/selectCheckbox.vue b/.playground/pages/composant/select/selectCheckbox.vue
index f9e1a77..6ab5f00 100644
--- a/.playground/pages/composant/select/selectCheckbox.vue
+++ b/.playground/pages/composant/select/selectCheckbox.vue
@@ -13,7 +13,7 @@
       <MalioSelectCheckbox
         v-model="labelValue"
         :options="options"
-        displayTag="true"
+        :display-tag="true"
         empty-option-label=" "
       />
       </div>
@@ -22,7 +22,7 @@
       <MalioSelectCheckbox
         v-model="labelValue1"
         :options="options"
-        displayTag="true"
+        :display-tag="true"
         label="Pays"
         empty-option-label=" "
       />
-- 
2.39.5


From ef1d7a5d943fe672fe244413946e8db1a892c727 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 17:22:26 +0200
Subject: [PATCH 37/38] feat(date) : anneau focus clavier et ouverture clavier
 sur CalendarField
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Couvre toute la famille date (Date, DateRange, DateTime, DateWeek) :
- Anneau de focus clavier (clavier-only) ; ouvert, l'anneau entoure
  champ + calendrier d'un seul tenant (combo)
- Entrée / Espace ouvrent/ferment le calendrier (mode non éditable),
  Échap ferme ; mode éditable inchangé
- Anneau sur la croix d'effacement

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../malio/date/internal/CalendarField.vue     | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/app/components/malio/date/internal/CalendarField.vue b/app/components/malio/date/internal/CalendarField.vue
index 7c40a9a..cd9fdf1 100644
--- a/app/components/malio/date/internal/CalendarField.vue
+++ b/app/components/malio/date/internal/CalendarField.vue
@@ -23,10 +23,10 @@
         placeholder="_"
         type="text"
         @click="onFieldClick"
-        @focus="onFocus"
+        @focus="onFocus(); onKbdFocus()"
         @input="onInput"
-        @blur="onBlur"
-        @keydown.enter.prevent="onEnter"
+        @blur="onBlur(); onKbdBlur()"
+        @keydown="onKeydown"
       >
 
       <label
@@ -42,7 +42,7 @@
           v-if="showClear"
           type="button"
           data-test="clear"
-          class="text-m-muted hover:text-m-primary"
+          class="m-focus-ring rounded-malio text-m-muted hover:text-m-primary"
           aria-label="Effacer la date"
           @click.stop="emit('clear')"
         >
@@ -66,6 +66,7 @@
         data-test="popover"
         role="dialog"
         class="absolute left-0 right-0 top-full z-20 box-border w-full rounded-b-md bg-white p-[10px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+        :class="keyboardFocused ? 'm-combo-ring-bottom' : ''"
       >
         <CalendarHeader
           :view-mode="viewMode"
@@ -114,9 +115,12 @@ import CalendarHeader from './CalendarHeader.vue'
 import MonthPicker from './MonthPicker.vue'
 import {useCalendarPopover} from '../composables/useCalendarPopover'
 import {useCalendarView} from '../composables/useCalendarView'
+import {useKbdFocusRing} from '../../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioCalendarField', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     displayValue: string
@@ -236,6 +240,33 @@ const onEnter = () => {
   closePopover()
 }
 
+const onKeydown = (e: KeyboardEvent) => {
+  if (props.disabled || props.readonly) return
+
+  if (e.key === 'Escape') {
+    if (isOpen.value) {
+      e.preventDefault()
+      closePopover()
+    }
+    return
+  }
+
+  if (props.editable) {
+    // En mode éditable, Entrée valide la saisie (Espace = caractère normal)
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      onEnter()
+    }
+    return
+  }
+
+  // Mode non éditable : Entrée / Espace ouvre ou ferme le calendrier
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    onFieldClick()
+  }
+}
+
 watch(() => props.syncTo, (value) => {
   if (isOpen.value) syncToIso(value)
 })
@@ -262,6 +293,7 @@ const mergedInputClass = computed(() =>
         ? 'border-m-success'
         : isReadonly.value ? '' : 'focus:border-m-primary',
     (!isReadonly.value && isOpen.value) ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
+    keyboardFocused.value ? (isOpen.value ? 'm-combo-ring-top' : 'm-focus-ring-kbd') : '',
     props.inputClass,
   ),
 )
-- 
2.39.5


From df5ecbb3e5458538f864295b920424e5192cd1a9 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 17:36:20 +0200
Subject: [PATCH 38/38] docs(MUI-42) : CHANGELOG + COMPONENTS pour l'anneau de
 focus clavier
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CHANGELOG : anneau de focus clavier standardisé, anneau combo, navigation
  APG (Select/SelectCheckbox/Autocomplete), clearable Upload, ouverture
  clavier Date, uniformisation Button/ButtonIcon, focus conservé Select
- COMPONENTS : note générale focus clavier + notes "Clavier" par composant,
  prop clearable et event clear d'InputUpload

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md  |  8 ++++++++
 COMPONENTS.md | 16 ++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e89872..6bc13e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,12 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-42] MalioDate : saisie clavier `JJ/MM/AAAA` optionnelle (prop `editable`, masque maska, validation au blur, message `invalidMessage`)
 * InputEmail : bouton `+` d'ajout optionnel (prop `addable`, event `add`), calqué sur InputPhone ; l'icône email passe à gauche quand le bouton est actif
 * InputAmount : affichage groupé des milliers à la française (`1 234 567,89`) en temps réel ; `modelValue` reste propre (`'1234567.89'`) ; `maxLength` borne la longueur du modèle
+* [#MUI-42] Anneau de focus clavier standardisé (`outline` 2px `m-primary`, offset 2px) affiché **uniquement** à la navigation clavier (jamais au clic souris), sur l'ensemble des champs et contrôles : inputs (Text, Email, Password, Phone, Amount, Number + boutons ±, Upload, TextArea, Autocomplete), Select, SelectCheckbox, famille Date (Date, DateRange, DateTime, DateWeek), Button, ButtonIcon. Mécanique : composable `useKbdFocusRing` (détection de modalité clavier/souris) + utilitaires CSS `.m-focus-ring` (éléments à `:focus-visible` natif) et `.m-focus-ring-kbd` (champs texte, où `:focus-visible` se déclenche aussi à la souris)
+* [#MUI-42] Anneau « combo » : quand un dropdown / calendrier est ouvert (Autocomplete, Select, SelectCheckbox, Date), l'anneau entoure le champ **et** la liste / le calendrier d'un seul tenant, adapté au sens d'ouverture (utilitaires `.m-combo-ring-top` / `.m-combo-ring-bottom`)
+* [#MUI-42] Navigation clavier WAI-ARIA APG sur les listes déroulantes : Select et SelectCheckbox gagnent la navigation (flèches, Home/End, Entrée/Espace, Échap, Tab — absente jusque-là), avec scroll automatique de l'option active et `aria-activedescendant` ; InputAutocomplete complété (scroll auto, ArrowUp ouvre sur la dernière option, Home/End, Tab ferme)
+* [#MUI-42] SelectCheckbox : la ligne « Tout sélectionner » est intégrée à la navigation clavier ; le clic sur toute la ligne d'option (et plus seulement le label) coche/décoche
+* [#MUI-42] InputUpload : prop `clearable` (croix `mdi:close` focusable qui vide le champ + event `clear`) et ouverture du sélecteur de fichier au clavier (Entrée / Espace)
+* [#MUI-42] Famille Date : ouverture du calendrier au clavier (Entrée / Espace), fermeture par Échap
 
 ### Changed
 * DataTable : libellés de pagination en français — `Préc.` / `Suiv.` (étaient `Prev` / `Next`) ; aria-labels déjà en français inchangés.
@@ -51,6 +57,7 @@ Liste des évolutions de la librairie Malio layer UI
 * DataTable : tailles par défaut revues — texte header `16px` (était `20px`), texte body `14px` (était `18px`), sélecteur de lignes et boutons de pagination (Prev / numéros / Next) alignés à `30px` de haut, padding de `12px` entre le bas du tableau et la barre de pagination, texte header et body passés en noir (`text-black`, étaient `text-m-primary`).
 * Select : nouvelle prop `fieldClass` pour surcharger les classes du field (notamment la hauteur `h-[40px]` jusqu'ici codée en dur) ; utilisée par le DataTable pour passer le sélecteur de perPage à `30px`.
 * [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
+* [#MUI-42] Button / ButtonIcon : l'anneau de focus passe du halo `ring-2 ring-m-primary/50` à l'anneau standard `.m-focus-ring` (outline plein, offset 2px), pour l'homogénéité avec les autres composants.
 
 ### Fixed
 * DataTable : pagination réalignée verticalement après l'introduction du `min-h-[1rem]` du Select — la barre pagination passe en `items-center`, et le MalioSelect du sélecteur de perPage est encapsulé dans un wrapper `h-12` qui borne sa taille flex à la hauteur du field (le slot vide déborde invisiblement en dessous). Span « Lignes : » et boutons Prev/Page/Next sont désormais centrés exactement sur le field (y=24)
@@ -67,3 +74,4 @@ Liste des évolutions de la librairie Malio layer UI
 * MalioButton : largeur par défaut alignée sur `w-[200px]` (au lieu de `w-[240px]`) pour correspondre au sizing des formulaires de l'app
 * [#MUI-42] RadioButton : ajout d'un focus visible au clavier (`outline` 2px `m-primary`, offset 2px) — l'input en `appearance-none` n'avait aucun indicateur de focus, seul l'`outline: auto 1px` du navigateur restait, quasi invisible. La navigation native (Tab entre groupes, flèches dans le groupe) reste inchangée
 * [#MUI-42] Checkbox : ajout d'un focus visible au clavier sur la case (`outline` 2px `m-primary`, offset 2px) — l'input réel est masqué (`clip-path`), aucun indicateur n'apparaissait à la tabulation
+* [#MUI-42] Select : le focus reste sur le bouton après sélection (un `blur()` renvoyait le focus au `body`, cassant la tabulation clavier — un Tab repartait du haut de page)
diff --git a/COMPONENTS.md b/COMPONENTS.md
index c2df66a..805579d 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -4,6 +4,8 @@ Tous les composants sont auto-importés avec le préfixe `Malio`. Utiliser `v-mo
 
 > **Champ obligatoire :** sur les composants de formulaire, la prop `required` ajoute un astérisque rouge dans le label. C'est un repère visuel ; la sémantique « obligatoire » est portée par l'attribut natif `required` ou `aria-required`.
 
+> **Focus clavier :** tous les champs et contrôles affichent un anneau de focus (`outline` 2px `m-primary`, offset 2px) **uniquement** à la navigation clavier (Tab), jamais au clic souris. Sur les composants à dropdown/calendrier ouverts, l'anneau entoure le champ et la liste d'un seul tenant. Voir la note « Clavier » de chaque composant pour la navigation détaillée.
+
 ---
 
 ## MalioInputText
@@ -200,7 +202,7 @@ Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtr
 - `select(option: Option \| null)` — émis avec l'objet `Option` complet (utile pour récupérer aussi le `label`)
 - `create(value: string)` — émis quand `allowCreate=true` et que l'utilisateur valide une valeur libre
 
-**Clavier :** `↓` / `↑` navigation, `Entrée` sélection (ou création), `Échap` ferme le dropdown.
+**Clavier (WAI-ARIA APG) :** `↓` ouvre / option suivante, `↑` précédente (ou ouvre sur la dernière option si fermé), `Début`/`Fin`, scroll automatique de l'option active, `Entrée` sélection (ou création), `Échap` annule, `Tab` ferme. Anneau de focus clavier (combo champ + liste à l'ouverture).
 
 ```vue
 <!-- Usage statique (filtrage côté client via local-filter) -->
@@ -362,16 +364,20 @@ Champ d'upload de fichier.
 | `label` | `string` | `''` | Label |
 | `accept` | `string` | `''` | Types de fichiers acceptés |
 | `displayIcon` | `boolean` | `true` | Afficher l'icône |
+| `clearable` | `boolean` | `false` | Affiche une croix (`mdi:close`) focusable qui vide le champ quand un fichier est sélectionné |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Champ en lecture seule (bordure noire, pas de focus bleu/grossissement, label/icône gris→noir selon rempli). |
 | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `error` | `string` | `''` | Message d'erreur |
 | `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 
-**Events :** `update:modelValue(value: string)`, `file-selected(file: File)`
+**Events :** `update:modelValue(value: string)`, `file-selected(file: File)`, `clear()`
+
+**Clavier :** `Entrée` / `Espace` ouvrent le sélecteur de fichier. La croix `clearable` est focusable (anneau clavier, `Entrée`/`Espace`).
 
 ```vue
 <MalioInputUpload v-model="fileName" label="Document" accept=".pdf,.doc" @file-selected="onFile" />
+<MalioInputUpload v-model="fileName" label="Document" clearable @clear="onClear" />
 ```
 
 ---
@@ -404,6 +410,8 @@ Liste déroulante.
 **Events :** `update:modelValue(value: string | number | null)`
 **Slots :** `icon` (icône dropdown custom)
 
+**Clavier (WAI-ARIA APG) :** `↓`/`↑`/`Entrée`/`Espace` ouvrent ; liste ouverte → `↑↓` naviguent (scroll auto de l'option active), `Début`/`Fin`, `Entrée`/`Espace` sélectionnent, `Échap`/`Tab` ferment. Le focus reste sur le bouton après sélection. Anneau de focus clavier (combo bouton + liste à l'ouverture, adapté au sens haut/bas).
+
 ```vue
 <MalioSelect v-model="pays" label="Pays" :options="[{ value: 'FR', text: 'France' }, { value: 'BE', text: 'Belgique' }]" />
 <MalioSelect v-model="ville" label="Ville" :options="villes" empty-option-label="Choisir..." />
@@ -432,6 +440,8 @@ Liste déroulante multi-sélection avec checkboxes.
 
 **Events :** `update:modelValue(value: (string | number)[])`
 
+**Clavier (WAI-ARIA APG) :** `↓`/`↑`/`Entrée`/`Espace` ouvrent ; liste ouverte → `↑↓` naviguent (scroll auto), `Début`/`Fin`, `Entrée`/`Espace` cochent/décochent l'option active (la liste **reste ouverte**), `Échap`/`Tab` ferment. La ligne « Tout sélectionner » est navigable au clavier. Le clic sur toute la ligne (pas que le label) coche/décoche. Anneau de focus clavier (combo bouton + liste à l'ouverture).
+
 ```vue
 <MalioSelectCheckbox v-model="competences" label="Compétences" :options="skills" :display-tag="true" />
 <MalioSelectCheckbox v-model="sites" label="Sites" :options="sitesList" :display-select-all="true" />
@@ -520,6 +530,8 @@ Avec `editable`, l'utilisateur peut aussi taper la date au clavier. La valeur n'
 
 **Events :** `update:modelValue(value: string | null)`
 
+**Clavier :** `Entrée` / `Espace` ouvrent le calendrier, `Échap` ferme. Anneau de focus clavier (combo champ + calendrier à l'ouverture). La croix d'effacement est focusable. _(Comportement partagé par DateRange, DateTime, DateWeek via le shell CalendarField.)_
+
 ```vue
 <MalioDate v-model="date" label="Date de naissance" />
 <!-- date === "2026-05-20" -->
-- 
2.39.5