feat(ui) : saisie clavier MalioDate + bouton « + » InputEmail + séparateurs InputAmount (#MUI-42) (#68)

Cette PR regroupe **trois évolutions** de la librairie (retours ERP).

---

## 1. MalioDate — saisie manuelle au clavier

Ajoute la **saisie manuelle au clavier** `JJ/MM/AAAA` sur `MalioDate` (opt-in via la prop `editable`), en plus de la sélection au calendrier.

- `CalendarField` (interne) gagne un mode `editable` : input non `readonly`, masque maska `##/##/####`, buffer local synchronisé sur la valeur, event `commit` au blur / à Entrée.
- `MalioDate` parse le texte (`parseDisplayToIso`), valide les bornes (`isDateInRange`) et gère un état d'erreur interne fusionné avec la prop `error` du consommateur.
- Le focus ouvre le popover ; la saisie invalide/hors bornes conserve le texte et affiche un message (`invalidMessage`, défaut `Date invalide`) ; la sélection au calendrier ou un changement externe de `modelValue` efface l'erreur.
- **Aucune régression** : `editable` défaut `false` ; le reste de la famille Date (DateRange/DateTime/DateWeek) est inchangé.

Nouvelles props `MalioDate` : `editable` (boolean, défaut false), `invalidMessage` (string, défaut Date invalide).

---

## 2. MalioInputEmail — bouton « + » d'ajout

Ajoute à `MalioInputEmail` le même bouton « + » que `MalioInputPhone` : un bouton optionnel qui émet un event `add` (ex. pour ajouter dynamiquement un autre champ email).

- Props `addable` (défaut `false`), `addIconName` (défaut `mdi:plus`), `addButtonLabel` (défaut `Ajouter une adresse email`) ; nouvel event `add()`.
- L'icône email étant à droite par défaut, une computed `effectiveIconPosition` la **déplace automatiquement à gauche** quand `addable` est actif, libérant la droite pour le bouton.
- Le bouton respecte `disabled`/`readonly` (pas d'émission).
- **Aucune régression** : `addable` défaut `false` ; la logique de sanitisation email (espaces, `lowercase`, caret) est intacte.

---

## 3. MalioInputAmount — séparateurs de milliers

Affiche les montants groupés à la française (`1 234 567,89` : espace pour les milliers, virgule décimale), **en temps réel** pendant la saisie, tout en gardant une valeur émise propre.

- La valeur émise (`modelValue`) reste une **chaîne numérique propre** : point décimal, sans espaces (`'1234567.89'`). Contrat consommateur inchangé.
- Fonctions pures extraites dans `composables/amountFormat.ts` (`normalizeAmount`, `formatGroupedAmount`, helpers curseur) — testées en isolation.
- À la frappe : parse → émission du modèle propre → reformatage groupé → repositionnement du curseur (comptage des caractères significatifs hors espaces).
- `maxLength` borne désormais la **longueur du modèle** (le `maxlength` natif, qui compterait les espaces, est retiré).
- **Activé par défaut** sur tous les `MalioInputAmount` ; format FR figé.

---

Spec et plan des trois features : `docs/superpowers/specs/` et `docs/superpowers/plans/`.

## Plan de test
- [x] `npm run test -- Date.test.ts` → 40 tests OK
- [x] `npm run test -- InputEmail.test.ts` → 52 tests OK
- [x] `npm run test -- amountFormat.test.ts InputAmount.test.ts` → 50 tests OK
- [x] `npm run lint` → 0 erreur
- [ ] Vérif manuelle playground `composant/date` : saisie valide → ISO ; `32/13/2026` → texte conservé + rouge ; sélection calendrier efface l'erreur
- [ ] Vérif manuelle playground `composant/input/inputEmail` : carte « Ajout dynamique » → le « + » ajoute un champ ; icône à gauche + bouton à droite
- [ ] Vérif manuelle playground `composant/input/inputAmount` : carte « Grand montant » → `1234567` s'affiche `1 234 567` en live, `modelValue` émis `1234567` ; curseur cohérent

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #68
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

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
@@ -94,19 +96,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" />
 ```
 
 ---
@@ -194,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) -->
@@ -236,6 +244,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) |
@@ -251,6 +261,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" -->
 ```
 
 ---
@@ -352,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" />
 ```
 
 ---
@@ -394,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..." />
@@ -422,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" />
@@ -445,6 +465,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 />
@@ -468,6 +490,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" />
@@ -481,6 +505,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,15 +523,20 @@ 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 |
 
 **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" -->
 <MalioDate v-model="rdv" label="Rendez-vous" :min="todayIso" :max="maxIso" />
+<MalioDate v-model="date" label="Date de naissance" editable />
 ```
 
 ---