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>

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) {

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()