feat(ui) : gabarit fantome de saisie + saisie clavier DateTime + fix clear (#MUI-43)

- gabarit fantome progressif sur la famille Date editable (Date, DateTime) :
  le format s'affiche en gris et se remplit au fil de la saisie (overlay ghost)
- separateurs (/, espace, :) poses automatiquement (maska eager)
- espace insecable pour eviter le collage « 12/12/1999HH:MM »
- CalendarField : prop placeholderTemplate (masque maska derive), remplace mask
- fix : la croix reinitialise la saisie clavier meme apres une date invalide
- tests + COMPONENTS.md + CHANGELOG.md

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/components/malio/date/internal/CalendarField.vue

@@ -29,6 +29,19 @@
         @keydown="onKeydown"
       >
 
+      <div
+        v-if="showGhost"
+        data-test="format-ghost"
+        aria-hidden="true"
+        class="pointer-events-none absolute left-0 right-0 top-1/2 flex h-10 -translate-y-1/2 items-center overflow-hidden whitespace-nowrap rounded-md border border-transparent pl-3 pr-10 text-lg"
+      ><span
+         data-test="ghost-typed"
+         class="text-black"
+       >{{ ghostTyped }}</span><span
+         data-test="ghost-remaining"
+         class="text-m-muted"
+       >{{ ghostRemaining }}</span></div>
+
       <label
         v-if="label"
         :for="inputId"
@@ -44,7 +57,7 @@
           data-test="clear"
           class="m-focus-ring rounded-malio text-m-muted hover:text-m-primary"
           aria-label="Effacer la date"
-          @click.stop="emit('clear')"
+          @click.stop="onClearClick"
         >
           <Icon
             icon="mdi:close"
@@ -137,7 +150,7 @@ const props = withDefaults(
     success?: string
     clearable?: boolean
     editable?: boolean
-    mask?: string
+    placeholderTemplate?: string
     inputClass?: string
     labelClass?: string
     groupClass?: string
@@ -156,7 +169,7 @@ const props = withDefaults(
     success: '',
     clearable: true,
     editable: false,
-    mask: '##/##/####',
+    placeholderTemplate: 'JJ/MM/AAAA',
     inputClass: '',
     labelClass: '',
     groupClass: '',
@@ -174,9 +187,22 @@ const generatedId = useId()
 const root = ref<HTMLElement | null>(null)
 
 const draft = ref(props.displayValue)
-const maskaOptions = computed<MaskInputOptions>(() => ({mask: props.editable ? props.mask : undefined}))
+// Le masque maska est dérivé du gabarit (lettres → slot `#`, séparateurs conservés).
+// eager : pose les séparateurs (/, espace, :) dès qu'un groupe est complet.
+const maskaOptions = computed<MaskInputOptions>(() => ({
+  mask: props.editable ? props.placeholderTemplate.replace(/[A-Za-z]/g, '#') : undefined,
+  eager: props.editable,
+}))
 const inputReadonly = computed(() => !props.editable || props.readonly || props.disabled)
 
+// Gabarit fantôme : la partie saisie (noire) + le reste du gabarit (gris), affiché
+// par-dessus l'input (dont le texte est rendu transparent en mode editable).
+// Espaces → insécables : un espace en bord de span (flex-item) serait sinon rogné,
+// collant la suite du gabarit à la date (« 12/12/1999HH:MM »).
+const nbsp = (s: string) => s.replace(/ /g, ' ')
+const ghostTyped = computed(() => nbsp(draft.value))
+const ghostRemaining = computed(() => nbsp(props.placeholderTemplate.slice(draft.value.length)))
+
 watch(() => props.displayValue, (value) => {
   draft.value = value
 })
@@ -191,6 +217,7 @@ const isFilled = computed(() =>
   (props.editable ? draft.value.length : props.displayValue.length) > 0,
 )
 const isReadonly = computed(() => props.readonly && !props.disabled)
+const showGhost = computed(() => props.editable && (isOpen.value || isFilled.value))
 const showClear = computed(() =>
   props.clearable && isFilled.value && !props.disabled && !props.readonly,
 )
@@ -231,6 +258,13 @@ const onInput = (event: Event) => {
   draft.value = (event.target as HTMLInputElement).value
 }
 
+// Reset local immédiat : sur saisie invalide, modelValue est déjà null, donc le
+// watch(displayValue) ne se redéclenche pas — il faut vider le draft soi-même.
+const onClearClick = () => {
+  draft.value = ''
+  emit('clear')
+}
+
 const onBlur = () => {
   if (!props.editable) return
   emit('commit', draft.value)
@@ -296,6 +330,8 @@ const mergedInputClass = computed(() =>
         : 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') : '',
+    // En mode editable, le texte réel est masqué : c'est le gabarit fantôme qui l'affiche.
+    props.editable ? 'text-transparent caret-black' : '',
     props.inputClass,
   ),
 )