[#MUI-35] Refonte du composant drawer (#49 )

| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #49 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
[#MUI-34] Revoir le système de playground (#48 )
2026-05-21 15:17:58 +00:00 · 2026-05-21 08:30:23 +00:00 · 2026-05-13 09:00:12 +02:00 · 2026-05-13 06:59:13 +00:00 · 2026-05-12 06:54:35 +00:00 · 2026-05-11 08:54:31 +00:00
81 changed files with 5 additions and 14897 deletions
@@ -12,14 +12,7 @@
      "Bash(mv buttonIcon.story.vue button/)",
      "Bash(mv inputText.story.vue inputAmount.story.vue inputNumber.story.vue inputPassword.story.vue inputTextArea.story.vue inputUpload.story.vue input/)",
      "Bash(mv InputSelect.story.vue selectCheckbox.story.vue select/)",
-      "Bash(mv inputCheckbox.story.vue checkbox/)",
+      "Bash(mv inputCheckbox.story.vue checkbox/)"
      "Bash(npx eslint *)",
      "Bash(echo \"LINT EXIT: $?\")",
      "Bash(git commit *)",
      "mcp__chrome__navigate_page",
      "mcp__chrome__take_snapshot",
      "mcp__chrome__click",
      "mcp__chrome__evaluate_script"
    ]
  }
 }
@@ -108,9 +108,9 @@ npm run lint    # Pas d'erreurs
 ### 5. Créer la page playground
-**Fichier :** `.playground/pages/composant/<categorie>/<nomComposant>.vue` (camelCase, dans le sous-dossier de catégorie)
+**Fichier :** `.playground/pages/composant/<nomComposant>.vue` (camelCase)
-La page devient automatiquement une route Nuxt (`/composant/<categorie>/<nomComposant>`) et hérite du layout `default` (qui affiche la `MalioSidebar`). **Ajouter ensuite le lien dans la nav centralisée** `.playground/playground.nav.ts` : insérer un `{label, to}` dans la section appropriée (ou créer une nouvelle section), où `to` = `/composant/<categorie>/<nomComposant>`. Inclure des variantes représentatives dans une grille :
+La page est auto-détectée par `index.vue` via `import.meta.glob`. Inclure des variantes représentatives dans une grille :
 ```html
 <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
@@ -216,7 +216,7 @@ Cette section est alimentée au fur et à mesure des retours utilisateur et des
 |--------|----------|
 | Stub IconifyIcon ne fonctionne pas dans les tests | Utiliser `findComponent(IconifyIcon)` avec l'import réel pour tester les props |
 | Oubli de `inheritAttrs: false` | Toujours dans `defineOptions` — sinon les attrs se dupliquent |
-| Composant absent de la sidebar du playground | Ajouter son entrée `{label, to}` dans `.playground/playground.nav.ts` (la page n'est plus auto-découverte) |
+| Page playground non détectée | Vérifier le nom du fichier en camelCase dans `.playground/pages/composant/` |
 | Padding input pas ajusté avec icône | Ajouter `!pr-10` (ou équivalent) quand une icône est présente à droite |
 | Story sans initial state | Toujours initialiser les `ref` avec des valeurs pour que les variantes soient visibles dès le chargement |
 | CHANGELOG oublié | Toujours ajouter la ligne dans `### Added` avant de commit |
@@ -1,63 +0,0 @@
 <template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Multiple (filtres) — défaut</h2>
      <MalioAccordion v-model="multiple">
        <MalioAccordionItem title="Prix" value="prix">
          <p>Slider de prix ici…</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Catégorie" value="cat">
          <p>Liste de checkboxes ici…</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Marque" value="marque">
          <p>Recherche + liste ici…</p>
        </MalioAccordionItem>
      </MalioAccordion>
      <p class="mt-2 text-sm text-gray-500">Ouverts : {{ multiple }}</p>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
      <MalioAccordion v-model="single" mode="single">
        <MalioAccordionItem title="Question 1" value="q1">
          <p>Réponse 1</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Question 2" value="q2">
          <p>Réponse 2</p>
        </MalioAccordionItem>
      </MalioAccordion>
      <p class="mt-2 text-sm text-gray-500">Ouvert : {{ single }}</p>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Non contrôlé + defaultOpen</h2>
      <MalioAccordion>
        <MalioAccordionItem title="Section A" value="a" :default-open="true">
          <p>Ouverte au montage</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Section B" value="b">
          <p>Fermée au montage</p>
        </MalioAccordionItem>
      </MalioAccordion>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
      <MalioAccordion>
        <MalioAccordionItem title="Active" value="ok">
          <p>Contenu accessible</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
          <p>Inaccessible</p>
        </MalioAccordionItem>
      </MalioAccordion>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 const multiple = ref<string[]>(['prix'])
 const single = ref('q1')
 </script>
@@ -1,68 +0,0 @@
 <template>
  <div class="space-y-6 p-4">
    <h1 class="text-2xl font-bold">MalioDate</h1>
    <div class="flex flex-wrap items-start gap-10">
      <div class="w-[480px] space-y-3">
        <h2 class="font-semibold">Large (480px)</h2>
        <MalioDate
          v-model="value"
          label="Date de naissance"
          hint="Clique pour ouvrir le calendrier"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
        </div>
        <div class="flex gap-2">
          <button
            type="button"
            class="rounded bg-m-primary px-3 py-1.5 text-white"
            @click="value = '2026-12-25'"
          >
            Forcer le 25/12/2026
          </button>
          <button
            type="button"
            class="rounded border px-3 py-1.5"
            @click="value = null"
          >
            Réinitialiser
          </button>
        </div>
      </div>
      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">ERP (396px)</h2>
        <MalioDate
          v-model="erpValue"
          label="Date du rendez-vous"
          hint="Largeur cible ERP"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur (ISO) : <code>{{ erpValue ?? 'null' }}</code></p>
        </div>
        <MalioDate
          v-model="bounded"
          label="Date bornée"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
 </script>
@@ -1,72 +0,0 @@
 <template>
  <div class="space-y-6 p-4">
    <h1 class="text-2xl font-bold">MalioDateRange</h1>
    <div class="flex flex-wrap items-start gap-10">
      <div class="w-[480px] space-y-3">
        <h2 class="font-semibold">Large (480px)</h2>
        <MalioDateRange
          v-model="value"
          label="Période"
          hint="Clique deux fois pour définir une plage"
        />
        <div class="rounded border p-3 text-sm">
          <p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
          <p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
        </div>
        <div class="flex gap-2">
          <button
            type="button"
            class="rounded bg-m-primary px-3 py-1.5 text-white"
            @click="value = {start: '2026-12-20', end: '2026-12-31'}"
          >
            Forcer 20→31/12/2026
          </button>
          <button
            type="button"
            class="rounded border px-3 py-1.5"
            @click="value = null"
          >
            Réinitialiser
          </button>
        </div>
      </div>
      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">ERP (396px)</h2>
        <MalioDateRange
          v-model="erpValue"
          label="Période"
          hint="Largeur cible ERP"
        />
        <div class="rounded border p-3 text-sm">
          <p>Début : <code>{{ erpValue?.start ?? 'null' }}</code></p>
          <p>Fin : <code>{{ erpValue?.end ?? 'null' }}</code></p>
        </div>
        <MalioDateRange
          v-model="bounded"
          label="Plage bornée"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 type RangeValue = {start: string; end: string}
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 const value = ref<RangeValue | null>(null)
 const erpValue = ref<RangeValue | null>(null)
 const bounded = ref<RangeValue | null>(null)
 </script>
@@ -1,68 +0,0 @@
 <template>
  <div class="space-y-6 p-4">
    <h1 class="text-2xl font-bold">MalioDateWeek</h1>
    <div class="flex flex-wrap items-start gap-10">
      <div class="w-[480px] space-y-3">
        <h2 class="font-semibold">Large (480px)</h2>
        <MalioDateWeek
          v-model="value"
          label="Semaine"
          hint="Clique un jour ou un n° de semaine"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur : <code>{{ value ?? 'null' }}</code></p>
        </div>
        <div class="flex gap-2">
          <button
            type="button"
            class="rounded bg-m-primary px-3 py-1.5 text-white"
            @click="value = '2026-W52'"
          >
            Forcer 2026-W52
          </button>
          <button
            type="button"
            class="rounded border px-3 py-1.5"
            @click="value = null"
          >
            Réinitialiser
          </button>
        </div>
      </div>
      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">ERP (396px)</h2>
        <MalioDateWeek
          v-model="erpValue"
          label="Semaine"
          hint="Largeur cible ERP"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur : <code>{{ erpValue ?? 'null' }}</code></p>
        </div>
        <MalioDateWeek
          v-model="bounded"
          label="Semaine bornée"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +60 jours"
        />
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
 const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
 </script>
@@ -1,68 +0,0 @@
 <template>
  <div class="space-y-6 p-4">
    <h1 class="text-2xl font-bold">MalioDateTime</h1>
    <div class="flex flex-wrap items-start gap-10">
      <div class="w-[480px] space-y-3">
        <h2 class="font-semibold">Large (480px)</h2>
        <MalioDateTime
          v-model="value"
          label="Date et heure du rendez-vous"
          hint="Choisis un jour puis une heure"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p>
        </div>
        <div class="flex gap-2">
          <button
            type="button"
            class="rounded bg-m-primary px-3 py-1.5 text-white"
            @click="value = '2026-12-25T09:30:00'"
          >
            Forcer le 25/12/2026 09:30
          </button>
          <button
            type="button"
            class="rounded border px-3 py-1.5"
            @click="value = null"
          >
            Réinitialiser
          </button>
        </div>
      </div>
      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">ERP (396px)</h2>
        <MalioDateTime
          v-model="erpValue"
          label="Date et heure du rendez-vous"
          hint="Largeur cible ERP"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur (ISO naïf) : <code>{{ erpValue ?? 'null' }}</code></p>
        </div>
        <MalioDateTime
          v-model="bounded"
          label="Créneau borné"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>('2026-05-20T14:30:00')
 </script>
@@ -1,88 +0,0 @@
 <template>
  <div class="flex justify-center">
    <div class="w-[1348px]">
      <div class="flex items-center justify-between mt-[46px]">
        <div class="flex items-center gap-3">
          <MalioButtonIcon
            icon="mdi:arrow-left-bold"
            icon-size="24"
            aria-label="Précédent"
            variant="ghost"
          />
          <h1 class="text-[32px] text-m-primary font-bold">Filtres</h1>
        </div>
        <MalioButton
          label="Filtres"
          variant="tertiary"
          icon-name="mdi:tune"
          icon-position="left"
          button-class="w-[184px] px-2 py-2 justify-start text-black gap-4"
          @click="drawerOpen = true"
        />
      </div>
    </div>
    <MalioDrawer
      v-model="drawerOpen"
      side="right"
      drawer-class="max-w-[450px]"
      body-class="p-0"
      footer-class="sticky bottom-0 flex justify-between gap-4 bg-white px-5 py-7"
    >
      <template #header>
        <h2 class="text-[24px] font-bold uppercase">Filtres</h2>
      </template>
      <MalioAccordion>
        <MalioAccordionItem title="Type de camion" value="camion">
          <div class="flex flex-col gap-6">
            <MalioCheckbox v-model="semiBenne" label="Semi Benne" />
            <MalioCheckbox v-model="benne" label="Benne" />
          </div>
        </MalioAccordionItem>
        <MalioAccordionItem title="Date à Date" value="date">
          <div class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-4">
            <span>Du</span>
            <MalioDate v-model="dateDebut"/>
            <span>Au</span>
            <MalioDate v-model="dateFin"/>
          </div>
        </MalioAccordionItem>
      </MalioAccordion>
      <template #footer>
        <MalioButton
          label="Réinitialiser"
          variant="tertiary"
          button-class="w-[150px]"
          @click="resetFiltres"
        />
        <MalioButton
          label="Voir les résultats"
          variant="primary"
          button-class="w-[170px]"
        />
      </template>
    </MalioDrawer>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 const drawerOpen = ref(false)
 const semiBenne = ref(false)
 const benne = ref(false)
 const dateDebut = ref<string | null>(null)
 const dateFin = ref<string | null>(null)
 function resetFiltres() {
  semiBenne.value = false
  benne.value = false
  dateDebut.value = null
  dateFin.value = null
 }
 </script>
@@ -78,10 +78,7 @@
            <div class="grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
              <MalioInputTextArea label="Descritpion" resize="none" groupClass="row-span-2" textInput="h-full"/>
              <MalioInputText v-model="concurrent" label="Concurrent"/>
-              <MalioDate
+              <MalioInputText label="Date création"/>
                v-model="dateCreation"
                label="Date création"
              />
              <MalioInputText label="Nombre de salariés" />
              <MalioInputAmount label="CA"/>
              <MalioInputText label="Dirigeant" />
@@ -161,7 +158,6 @@
 <script setup lang="ts">
 import {ref, computed, watch} from 'vue'
 import MalioDate from "../../../../app/components/malio/date/Date.vue";
 type Commune = {
  nom: string
@@ -283,7 +279,6 @@ const onSearchAdresse = async (query: string) => {
 const tabsValue = ref('information')
 const concurrent = ref('')
 const dateCreation = ref<string | null>(null)
 const informationValid = computed(() => concurrent.value.trim().length > 0)
 const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
@@ -1,74 +0,0 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import MalioButton from "../../../../app/components/malio/button/Button.vue";
 const modalBase = ref(false)
 const modalForm = ref(false)
 const modalLong = ref(false)
 const modalNoDismiss = ref(false)
 </script>
 <template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Modal simple</h2>
      <MalioButton label="Ouvrir" @click="modalBase = true" />
      <MalioModal v-model="modalBase" headerClass="py-7 px-[25px]" footerClass="flex justify-center pt-8">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Marquer comme vu ?</h2>
        </template>
        <template #footer>
          <MalioButton label="Valider"/>
        </template>
      </MalioModal>
    </div>
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
      <MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="modalForm = true" />
      <MalioModal v-model="modalForm" modal-class="max-w-lg">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
        </template>
        <div class="flex flex-col gap-4 py-2">
          <MalioInputText label="Nom" />
          <MalioInputText label="Prénom" />
          <MalioInputText label="Email" />
        </div>
        <template #footer>
          <MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="modalForm = false" />
          <MalioButton label="Enregistrer" button-class="flex-1" @click="modalForm = false" />
        </template>
      </MalioModal>
    </div>
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Contenu long (body scrollable)</h2>
      <MalioButton label="Ouvrir" variant="tertiary" @click="modalLong = true" />
      <MalioModal v-model="modalLong">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Conditions</h2>
        </template>
        <div class="flex flex-col gap-4">
          <p v-for="n in 20" :key="n" class="text-m-text">
            Paragraphe {{ n }} — contenu long pour forcer le scroll interne ; le header et le footer restent fixes.
          </p>
        </div>
        <template #footer>
          <MalioButton label="Accepter" button-class="w-full" @click="modalLong = false" />
        </template>
      </MalioModal>
    </div>
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
      <MalioButton label="Ouvrir" variant="danger" @click="modalNoDismiss = true" />
      <MalioModal v-model="modalNoDismiss" :dismissable="false" :close-on-escape="false">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Action requise</h2>
        </template>
        <p class="text-m-text">Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
      </MalioModal>
    </div>
  </div>
 </template>
@@ -1,45 +0,0 @@
 <template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <MalioTimePicker v-model="simpleValue" label="Heure" />
      <p class="mt-2 text-sm text-m-muted">Valeur : {{ simpleValue || '—' }}</p>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
      <MalioTimePicker v-model="initialValue" label="Heure de départ" hint="Format HH:MM" />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioTimePicker v-model="disabledValue" label="Heure verrouillée" disabled />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioTimePicker v-model="errorValue" label="Heure de fermeture" error="Heure invalide" />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioTimePicker v-model="successValue" label="Heure confirmée" success="Horaire enregistré" />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
      <MalioTimePicker v-model="noClearValue" label="Heure" :clearable="false" />
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 const simpleValue = ref('')
 const initialValue = ref('08:30')
 const disabledValue = ref('14:15')
 const errorValue = ref('25:90')
 const successValue = ref('09:00')
 const noClearValue = ref('10:00')
 </script>
@@ -25,18 +25,6 @@ export const navSections: SidebarSection[] = [
      {label: 'Éditeur riche', to: '/composant/input/inputRichText'},
    ],
  },
  {
    label: 'DATES & HEURES',
    icon: 'mdi:calendar-clock',
    items: [
      {label: 'Date', to: '/composant/date/date'},
      {label: 'Plage de dates', to: '/composant/date/dateRange'},
      {label: 'Semaine', to: '/composant/date/dateWeek'},
      {label: 'Date & heure', to: '/composant/date/datetime'},
      {label: 'Heure', to: '/composant/time/time'},
      {label: 'Sélecteur d\'heure', to: '/composant/time/timePicker'},
    ],
  },
  {
    label: 'SÉLECTIONS',
    icon: 'mdi:form-dropdown',
@@ -53,9 +41,7 @@ export const navSections: SidebarSection[] = [
    items: [
      {label: 'Sidebar', to: '/composant/sidebar/sidebar'},
      {label: 'Drawer', to: '/composant/drawer/drawer'},
      {label: 'Modal', to: '/composant/modal/modal'},
      {label: 'Onglets', to: '/composant/tab/tabList'},
      {label: 'Accordéon', to: '/composant/accordion/accordion'},
    ],
  },
  {
@@ -72,7 +58,6 @@ export const navSections: SidebarSection[] = [
      {label: 'Heure', to: '/composant/time/time'},
      {label: 'Sélecteur de site', to: '/composant/site/siteSelector'},
      {label: 'Formulaire client', to: '/composant/form/client'},
      {label: 'Filtres', to: '/composant/filtre/filtres'},
    ],
  },
 ]
@@ -31,11 +31,6 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-31] Création d'un composant téléphone
 * [#MUI-32] Création d'un composant saisie assistée (autocomplete)
 * [#MUI-34] Revoir le système de playground
 * [#MUI-33] Développer le composant Datepicker
 * [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire)
 * [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
 * [#MUI-37] Création d'un composant accordéon
 * [#MUI-39] Création d'un sélecteur d'heure à molettes (MalioTimePicker) ; DateTime rebranché dessus (remplace l'input time natif intérimaire)
 ### Changed
 * [#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`.
@@ -442,106 +442,6 @@ Bouton radio (à utiliser en groupe avec le même `name`).
 ---
 ## MalioDate
 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.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `modelValue` | `string \| null` | `undefined` | Date ISO `"YYYY-MM-DD"` (v-model) |
 | `id` | `string` | `''` | Id du champ |
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
 | `required` | `boolean` | `false` | Requis |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `hint` | `string` | `''` | Texte d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
 | `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 |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 **Events :** `update:modelValue(value: string | null)`
 ```vue
 <MalioDate v-model="date" label="Date de naissance" />
 <!-- date === "2026-05-20" -->
 <MalioDate v-model="rdv" label="Rendez-vous" :min="todayIso" :max="maxIso" />
 ```
 ---
 ## MalioDateRange
 Sélecteur de **plage de dates** (date de début → date de fin) dans un seul champ. Cliquer un premier jour démarre la plage, le second la termine ; un survol prévisualise la plage.
 La valeur est un objet `{ start: string; end: string }` (dates ISO `"YYYY-MM-DD"`), ou `null`.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `modelValue` | `{ start: string; end: string } \| null` | `undefined` | Plage de dates ISO (v-model) |
 | `id` | `string` | `''` | Id du champ |
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
 | `required` | `boolean` | `false` | Requis |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `hint` | `string` | `''` | Texte d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
 | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` |
 | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 **Events :** `update:modelValue(value: { start: string; end: string } | null)`
 ```vue
 <MalioDateRange v-model="periode" label="Période de séjour" />
 <!-- periode === { start: "2026-05-20", end: "2026-05-27" } -->
 ```
 ---
 ## MalioDateWeek
 Sélecteur de **semaine ISO** : cliquer un jour (ou un numéro de semaine) sélectionne la semaine entière.
 La valeur est une chaîne au format **semaine ISO native** `"YYYY-Www"` (ex. `"2026-W21"`), ou `null`. Le champ affiche `Semaine W (JJ/MM → JJ/MM/AAAA)`.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `modelValue` | `string \| null` | `undefined` | Semaine ISO `"YYYY-Www"` (v-model) |
 | `id` | `string` | `''` | Id du champ |
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
 | `required` | `boolean` | `false` | Requis |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `hint` | `string` | `''` | Texte d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
 | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` |
 | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 **Events :** `update:modelValue(value: string | null)`
 ```vue
 <MalioDateWeek v-model="semaine" label="Semaine de livraison" />
 <!-- semaine === "2026-W21" -->
 ```
 ---
 ## MalioTime
 Sélecteur d'heure.
@@ -563,72 +463,6 @@ Sélecteur d'heure.
 ---
 ## MalioTimePicker
 Sélecteur d'heure à **molettes style iOS** (champ + popover). Deux colonnes infinies (heures `00–23`, minutes `00–59`, pas de 1) avec une bande de sélection centrale ; la valeur centrée est sélectionnée. Défilement, clic sur une valeur (recentrage) ou flèches clavier (`role="spinbutton"`). Pour une saisie clavier directe au format texte, voir plutôt `MalioTime`.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `modelValue` | `string \| null` | `undefined` | Heure au format `"HH:MM"` (v-model) |
 | `placeholder` | `string` | `'HH:MM'` | Placeholder |
 | `required` | `boolean` | `false` | Champ requis |
 | `disabled` | `boolean` | `false` | Désactive le champ |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 **Events :** `update:modelValue(value: string | null)`
 ```vue
 <MalioTimePicker v-model="heure" label="Heure" />
 <MalioTimePicker v-model="heure" label="Départ" hint="Format HH:MM" />
 ```
 ---
 ## MalioDateTime
 Champ unique combinant **date et heure** dans un popover (grille de calendrier + sélecteur d'heure sous la grille).
 > Depuis MUI-39, le réglage de l'heure utilise le sélecteur à molettes (cf. `MalioTimePicker`), qui remplace l'ancien `<input type="time">` natif intérimaire.
 La valeur est une chaîne **ISO naïve sans fuseau** au format `"YYYY-MM-DDTHH:MM:00"` (heure murale locale). Symfony (`DateTimeNormalizer`) parse ce format et applique son fuseau configuré côté back — pas de gestion de fuseau côté front.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `modelValue` | `string \| null` | `undefined` | Date + heure ISO naïve `"YYYY-MM-DDTHH:MM:00"` (v-model) |
 | `id` | `string` | `''` | Id du champ |
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `placeholder` | `string` | `'JJ/MM/AAAA HH:MM'` | Placeholder |
 | `required` | `boolean` | `false` | Requis |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `hint` | `string` | `''` | Texte d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
 | `min` | `string` | `undefined` | Borne min (datetime ou date ; borne la grille sur la partie date) |
 | `max` | `string` | `undefined` | Borne max (idem) |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 **Events :** `update:modelValue(value: string | null)`
 Flux : cliquer un jour fixe la date (heure par défaut `00:00`), régler l'heure met à jour l'heure ; le popover se ferme au clic extérieur. La valeur est émise en direct à chaque interaction.
 ```vue
 <MalioDateTime v-model="rdv" label="Date et heure du rendez-vous" />
 <!-- rdv === "2026-05-20T14:30:00" -->
 ```
 ---
 ## MalioButton
 Bouton d'action avec 4 variantes visuelles et icône optionnelle.
@@ -723,54 +557,6 @@ const tabs = computed(() => [
 ---
 ## MalioAccordion
 Accordéon compositionnel : `<MalioAccordion>` enveloppe des `<MalioAccordionItem>`. Plusieurs panneaux ouverts (`multiple`, défaut) ou un seul (`single`). Pensé pour les filtres en drawer et les FAQ.
 ### MalioAccordion
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `mode` | `'single' \| 'multiple'` | `'multiple'` | Un seul ou plusieurs panneaux ouverts |
 | `modelValue` | `string \| string[]` | `undefined` | Clés ouvertes (v-model). `string[]` en `multiple`, `string` en `single` |
 | `id` | `string` | auto | Préfixe des IDs d'accessibilité |
 | `groupClass` | `string` | `''` | Classes du conteneur (twMerge) |
 **Events :** `update:modelValue(value: string | string[])`
 ### MalioAccordionItem
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `title` | `string` | — | Texte de l'en-tête |
 | `value` | `string` | auto | Clé unique de la section |
 | `defaultOpen` | `boolean` | `false` | Ouvert au montage (mode non contrôlé) |
 | `disabled` | `boolean` | `false` | En-tête non cliquable |
 | `headerClass` | `string` | `''` | Override classes en-tête (twMerge) |
 | `panelClass` | `string` | `''` | Override classes panneau (twMerge) |
 **Slot :** par défaut = contenu du panneau.
 ```vue
 <!-- Filtres : plusieurs sections ouvertes -->
 <MalioAccordion v-model="ouverts">
  <MalioAccordionItem title="Prix" value="prix">
    <MalioInputAmount v-model="prix" />
  </MalioAccordionItem>
  <MalioAccordionItem title="Catégorie" value="cat">
    <MalioCheckbox v-model="cats" />
  </MalioAccordionItem>
 </MalioAccordion>
 <!-- FAQ : une seule section ouverte -->
 <MalioAccordion mode="single">
  <MalioAccordionItem title="Question 1" value="q1">Réponse 1</MalioAccordionItem>
  <MalioAccordionItem title="Question 2" value="q2">Réponse 2</MalioAccordionItem>
 </MalioAccordion>
 ```
 ---
 ## MalioSidebar
 Barre latérale de navigation rétractable.
@@ -856,58 +642,6 @@ Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdro
 ---
 ## MalioModal
 Boîte de dialogue modale centrée avec backdrop semi-transparent. Gère l'accessibilité (focus-trap, restitution du focus, `Échap`), le verrouillage du scroll de la page et un empilement correct de plusieurs modals. Structure : header fixe, body scrollable (`max-h-[85vh]`), footer fixe.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
 | `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
 | `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
 | `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
 | `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
 | `modalClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-lg` (twMerge) |
 | `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
 | `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
 | `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
 | `footerClass` | `string` | `''` | Classes CSS footer fixe (twMerge) |
 **Events :** `update:modelValue(value: boolean)`, `close()`
 **Slots :**
 - `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
 - `default` — contenu (zone scrollable).
 - `footer` — actions (boutons). Rendu en bas, fixe, séparé par une bordure. N'apparaît que si le slot est fourni.
 ```vue
 <MalioModal v-model="isOpen">
  <template #header>
    <h2 class="text-[24px] font-bold">Détails</h2>
  </template>
  <p>Contenu de la modal</p>
 </MalioModal>
 <!-- Largeur custom + footer d'actions -->
 <MalioModal v-model="isOpen" modal-class="max-w-lg">
  <template #header><h2>Nouveau contact</h2></template>
  <MalioInputText label="Nom" />
  <template #footer>
    <MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="isOpen = false" />
    <MalioButton label="Enregistrer" button-class="flex-1" @click="isOpen = false" />
  </template>
 </MalioModal>
 <!-- Non fermable au backdrop / Échap (croix uniquement) -->
 <MalioModal v-model="isOpen" :dismissable="false" :close-on-escape="false">
  <template #header><h2>Action requise</h2></template>
  <p>Fermeture via la croix uniquement</p>
 </MalioModal>
 ```
 ---
 ## MalioDataTable
 Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
@@ -961,33 +695,3 @@ Tableau de données presentational avec pagination, filtres par slots et lignes
  v-model:per-page="perPage"
 />
 ```
 ---
 ## MalioSiteSelector
 Sélecteur de site sous forme de tuiles segmentées (`role="radiogroup"`). Chaque site occupe une tuile de largeur égale ; la tuile active s'affiche pleine opacité dans sa couleur (`site.color`), les autres sont atténuées. Pattern contrôlé (`v-model`) ou non contrôlé (premier site sélectionné par défaut).
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `sites` | `{ id: string, name: string, color: string }[]` | **requis** | Liste des sites (la `color` colore la tuile active) |
 | `modelValue` | `string` | `undefined` | `id` du site sélectionné (v-model) |
 | `id` | `string` | auto | Identifiant HTML du conteneur |
 | `groupClass` | `string` | `''` | Classes CSS du conteneur (twMerge) |
 | `tileClass` | `string` | `''` | Classes CSS de chaque tuile (twMerge) |
 | `labelClass` | `string` | `''` | Classes CSS du label de tuile (twMerge) |
 **Events :**
 - `update:modelValue(value: string)` — `id` du site sélectionné (v-model)
 - `change(site: Site)` — émis avec l'objet site complet sélectionné
 ```vue
 <MalioSiteSelector
  v-model="siteId"
  :sites="[
    { id: 'paris', name: 'Paris', color: '#2563eb' },
    { id: 'lyon', name: 'Lyon', color: '#16a34a' },
  ]"
  @change="onSiteChange"
 />
 ```
@@ -6,7 +6,6 @@
  :root {
    /* ── Globales ── */
    --m-primary: 34 39 131;         /* #222783 - Bleu Malio */
    --m-primary-light: 239 239 253; /* #EFEFFD - Teinte claire du primary (fonds doux) */
    --m-bg: 243 244 248;            /* #F3F4F8 - Fond de page */
    --m-surface: 243 244 248;       /* #F3F4F8 - Fond hover/cartes */
    --m-text: 15 23 42;             /* #0F172A */
@@ -1,256 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {mount} from '@vue/test-utils'
 import {nextTick} from 'vue'
 import Accordion from './Accordion.vue'
 import AccordionItem from './AccordionItem.vue'
 const TWO_ITEMS = `
  <MalioAccordionItem title="Prix" value="prix"><p>Contenu prix</p></MalioAccordionItem>
  <MalioAccordionItem title="Catégorie" value="cat"><p>Contenu catégorie</p></MalioAccordionItem>
 `
 function mountAccordion(props: Record<string, unknown> = {}, slot: string = TWO_ITEMS, attachTo?: HTMLElement) {
  return mount(Accordion, {
    props,
    slots: {default: slot},
    attachTo,
    global: {components: {MalioAccordionItem: AccordionItem}},
  })
 }
 describe('MalioAccordion — rendu & mode multiple', () => {
  it('renders each item header with its title', () => {
    const wrapper = mountAccordion()
    const headers = wrapper.findAll('button[aria-expanded]')
    expect(headers).toHaveLength(2)
    expect(headers[0].text()).toContain('Prix')
    expect(headers[1].text()).toContain('Catégorie')
  })
  it('renders the slot content of each panel', () => {
    const wrapper = mountAccordion()
    expect(wrapper.html()).toContain('Contenu prix')
    expect(wrapper.html()).toContain('Contenu catégorie')
  })
  it('all panels are collapsed by default', () => {
    const wrapper = mountAccordion()
    const headers = wrapper.findAll('button[aria-expanded]')
    expect(headers[0].attributes('aria-expanded')).toBe('false')
    expect(headers[1].attributes('aria-expanded')).toBe('false')
    const regions = wrapper.findAll('[role="region"]')
    expect(regions[0].classes()).toContain('grid-rows-[0fr]')
  })
  it('opens a panel on header click (multiple mode is default)', async () => {
    const wrapper = mountAccordion()
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[0].trigger('click')
    expect(headers[0].attributes('aria-expanded')).toBe('true')
    const regions = wrapper.findAll('[role="region"]')
    expect(regions[0].classes()).toContain('grid-rows-[1fr]')
  })
  it('keeps multiple panels open simultaneously in multiple mode', async () => {
    const wrapper = mountAccordion()
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[0].trigger('click')
    await headers[1].trigger('click')
    expect(headers[0].attributes('aria-expanded')).toBe('true')
    expect(headers[1].attributes('aria-expanded')).toBe('true')
  })
  it('closes an open panel when its header is clicked again', async () => {
    const wrapper = mountAccordion()
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[0].trigger('click')
    await headers[0].trigger('click')
    expect(headers[0].attributes('aria-expanded')).toBe('false')
  })
  it('wires aria-controls / aria-labelledby / role=region correctly', () => {
    const wrapper = mountAccordion({id: 'acc'})
    const headers = wrapper.findAll('button[aria-expanded]')
    const regions = wrapper.findAll('[role="region"]')
    expect(headers[0].attributes('id')).toBe('acc-header-prix')
    expect(headers[0].attributes('aria-controls')).toBe('acc-panel-prix')
    expect(regions[0].attributes('id')).toBe('acc-panel-prix')
    expect(regions[0].attributes('aria-labelledby')).toBe('acc-header-prix')
  })
  it('emits update:modelValue with an array in multiple mode', async () => {
    const wrapper = mountAccordion()
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[0].trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['prix']])
    await nextTick()
  })
 })
 describe('MalioAccordion — mode single & contrôlé', () => {
  it('opening a panel closes the others in single mode', async () => {
    const wrapper = mountAccordion({mode: 'single'})
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[0].trigger('click')
    await headers[1].trigger('click')
    expect(headers[0].attributes('aria-expanded')).toBe('false')
    expect(headers[1].attributes('aria-expanded')).toBe('true')
  })
  it('emits a string in single mode', async () => {
    const wrapper = mountAccordion({mode: 'single'})
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[1].trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['cat'])
  })
  it('emits empty string when closing the open panel in single mode', async () => {
    const wrapper = mountAccordion({mode: 'single', modelValue: 'prix'})
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[0].trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
  })
  it('respects modelValue array in controlled multiple mode', () => {
    const wrapper = mountAccordion({modelValue: ['cat']})
    const headers = wrapper.findAll('button[aria-expanded]')
    expect(headers[0].attributes('aria-expanded')).toBe('false')
    expect(headers[1].attributes('aria-expanded')).toBe('true')
  })
  it('respects modelValue string in controlled single mode', () => {
    const wrapper = mountAccordion({mode: 'single', modelValue: 'prix'})
    const headers = wrapper.findAll('button[aria-expanded]')
    expect(headers[0].attributes('aria-expanded')).toBe('true')
    expect(headers[1].attributes('aria-expanded')).toBe('false')
  })
  it('does not mutate local state in controlled mode (emits only)', async () => {
    const wrapper = mountAccordion({modelValue: []})
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[0].trigger('click')
    // état piloté par le parent : sans mise à jour de la prop, reste fermé
    expect(headers[0].attributes('aria-expanded')).toBe('false')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['prix']])
  })
 })
 describe('MalioAccordion — defaultOpen, disabled & clavier', () => {
  const WITH_DEFAULT_OPEN = `
    <MalioAccordionItem title="Prix" value="prix"><p>P</p></MalioAccordionItem>
    <MalioAccordionItem title="Catégorie" value="cat" :default-open="true"><p>C</p></MalioAccordionItem>
  `
  const WITH_DISABLED = `
    <MalioAccordionItem title="Prix" value="prix"><p>P</p></MalioAccordionItem>
    <MalioAccordionItem title="Catégorie" value="cat" :disabled="true"><p>C</p></MalioAccordionItem>
  `
  it('opens defaultOpen items initially in uncontrolled mode', async () => {
    const wrapper = mountAccordion({}, WITH_DEFAULT_OPEN)
    await nextTick()
    const headers = wrapper.findAll('button[aria-expanded]')
    expect(headers[0].attributes('aria-expanded')).toBe('false')
    expect(headers[1].attributes('aria-expanded')).toBe('true')
  })
  it('sets disabled and aria-disabled on a disabled item', () => {
    const wrapper = mountAccordion({}, WITH_DISABLED)
    const headers = wrapper.findAll('button[aria-expanded]')
    expect(headers[1].attributes('disabled')).toBeDefined()
    expect(headers[1].attributes('aria-disabled')).toBe('true')
  })
  it('does not toggle a disabled item on click', async () => {
    const wrapper = mountAccordion({}, WITH_DISABLED)
    const headers = wrapper.findAll('button[aria-expanded]')
    await headers[1].trigger('click')
    expect(headers[1].attributes('aria-expanded')).toBe('false')
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
  })
  it('moves focus to the next header on ArrowDown', async () => {
    const root = document.createElement('div')
    document.body.appendChild(root)
    const wrapper = mountAccordion({}, TWO_ITEMS, root)
    const headers = wrapper.findAll('button[aria-expanded]')
    ;(headers[0].element as HTMLElement).focus()
    await headers[0].trigger('keydown', {key: 'ArrowDown'})
    expect(document.activeElement).toBe(headers[1].element)
    wrapper.unmount()
    root.remove()
  })
  it('wraps focus to the first header on ArrowDown from the last', async () => {
    const root = document.createElement('div')
    document.body.appendChild(root)
    const wrapper = mountAccordion({}, TWO_ITEMS, root)
    const headers = wrapper.findAll('button[aria-expanded]')
    ;(headers[1].element as HTMLElement).focus()
    await headers[1].trigger('keydown', {key: 'ArrowDown'})
    expect(document.activeElement).toBe(headers[0].element)
    wrapper.unmount()
    root.remove()
  })
  it('moves focus to the previous header on ArrowUp', async () => {
    const root = document.createElement('div')
    document.body.appendChild(root)
    const wrapper = mountAccordion({}, TWO_ITEMS, root)
    const headers = wrapper.findAll('button[aria-expanded]')
    ;(headers[1].element as HTMLElement).focus()
    await headers[1].trigger('keydown', {key: 'ArrowUp'})
    expect(document.activeElement).toBe(headers[0].element)
    wrapper.unmount()
    root.remove()
  })
  it('skips disabled headers during keyboard navigation', async () => {
    const root = document.createElement('div')
    document.body.appendChild(root)
    const slot = `
      <MalioAccordionItem title="A" value="a"><p>A</p></MalioAccordionItem>
      <MalioAccordionItem title="B" value="b" :disabled="true"><p>B</p></MalioAccordionItem>
      <MalioAccordionItem title="C" value="c"><p>C</p></MalioAccordionItem>
    `
    const wrapper = mountAccordion({}, slot, root)
    const headers = wrapper.findAll('button[aria-expanded]')
    ;(headers[0].element as HTMLElement).focus()
    await headers[0].trigger('keydown', {key: 'ArrowDown'})
    // saute le header désactivé (B) pour aller directement à C
    expect(document.activeElement).toBe(headers[2].element)
    wrapper.unmount()
    root.remove()
  })
 })
 describe('MalioAccordion — overflow du panneau (popovers enfants)', () => {
  const ONE = `<MalioAccordionItem title="A" value="a"><p>contenu</p></MalioAccordionItem>`
  const ONE_OPEN = `<MalioAccordionItem title="A" value="a" :default-open="true"><p>contenu</p></MalioAccordionItem>`
  it('clips the panel (overflow-hidden) while collapsed', () => {
    const wrapper = mountAccordion({}, ONE)
    const inner = wrapper.find('[role="region"] > div')
    expect(inner.classes()).toContain('overflow-hidden')
    expect(inner.classes()).not.toContain('overflow-visible')
  })
  it('lets the panel overflow once open at mount (defaultOpen)', async () => {
    const wrapper = mountAccordion({}, ONE_OPEN)
    await nextTick()
    expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-visible')
  })
  it('switches to overflow-visible after the open transition ends', async () => {
    const wrapper = mountAccordion({}, ONE)
    await wrapper.find('button[aria-expanded]').trigger('click')
    await wrapper.find('[role="region"]').trigger('transitionend', {propertyName: 'grid-template-rows'})
    expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-visible')
  })
  it('re-clips (overflow-hidden) as soon as it closes', async () => {
    const wrapper = mountAccordion({}, ONE_OPEN)
    await nextTick()
    await wrapper.find('button[aria-expanded]').trigger('click')
    expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-hidden')
  })
 })
@@ -1,109 +0,0 @@
 <template>
  <div v-bind="$attrs" :class="rootClass">
    <slot />
  </div>
 </template>
 <script setup lang="ts">
 import {computed, provide, ref, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 import {accordionContextKey, type AccordionItemRegistration} from './context'
 defineOptions({name: 'MalioAccordion', inheritAttrs: false})
 const props = withDefaults(defineProps<{
  mode?: 'single' | 'multiple'
  modelValue?: string | string[]
  id?: string
  groupClass?: string
 }>(), {
  mode: 'multiple',
  modelValue: undefined,
  id: '',
  groupClass: '',
 })
 const emit = defineEmits<{
  (e: 'update:modelValue', value: string | string[]): void
 }>()
 const generatedId = useId()
 const baseId = computed(() => props.id || `malio-accordion-${generatedId}`)
 const mode = computed(() => props.mode)
 const isControlled = computed(() => props.modelValue !== undefined)
 const localOpen = ref<string[]>([])
 const items = ref<AccordionItemRegistration[]>([])
 const openKeys = computed<string[]>(() => {
  if (isControlled.value) {
    const v = props.modelValue
    if (props.mode === 'single') return v ? [v as string] : []
    if (Array.isArray(v)) return v
    return v ? [v as string] : []
  }
  return localOpen.value
 })
 function isOpen(value: string) {
  return openKeys.value.includes(value)
 }
 function toggle(value: string) {
  const current = openKeys.value
  let next: string[]
  if (props.mode === 'single') {
    next = current.includes(value) ? [] : [value]
  } else {
    next = current.includes(value)
      ? current.filter(v => v !== value)
      : [...current, value]
  }
  if (!isControlled.value) {
    localOpen.value = next
  }
  emit('update:modelValue', props.mode === 'single' ? (next[0] ?? '') : next)
 }
 function register(item: AccordionItemRegistration, defaultOpen: boolean) {
  items.value.push(item)
  if (defaultOpen && !isControlled.value) {
    if (props.mode === 'single') {
      if (localOpen.value.length === 0) localOpen.value = [item.value]
    } else if (!localOpen.value.includes(item.value)) {
      localOpen.value.push(item.value)
    }
  }
 }
 function unregister(value: string) {
  items.value = items.value.filter(i => i.value !== value)
 }
 // `items` est ordonné par ordre de montage (= ordre du DOM pour des sections
 // statiques/ajoutées en fin). Si un consommateur réordonne dynamiquement les
 // items, cet ordre peut diverger de l'ordre visuel ; trier par position DOM
 // serait alors nécessaire (hors périmètre v1).
 function focusSibling(value: string, offset: 1 | -1) {
  const enabled = items.value.filter(i => !i.isDisabled())
  const idx = enabled.findIndex(i => i.value === value)
  if (idx === -1) return
  const next = enabled[(idx + offset + enabled.length) % enabled.length]
  next?.getHeaderEl()?.focus()
 }
 const rootClass = computed(() =>
  twMerge('divide-y divide-black border-y border-black', props.groupClass),
 )
 provide(accordionContextKey, {
  mode,
  baseId,
  isOpen,
  toggle,
  register,
  unregister,
  focusSibling,
 })
 </script>
@@ -1,48 +0,0 @@
 import {describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import Accordion from './Accordion.vue'
 import AccordionItem from './AccordionItem.vue'
 function mountInAccordion(slot: string, accordionProps: Record<string, unknown> = {}) {
  return mount(Accordion, {
    props: accordionProps,
    slots: {default: slot},
    global: {components: {MalioAccordionItem: AccordionItem}},
  })
 }
 describe('MalioAccordionItem', () => {
  it('throws when used outside MalioAccordion', () => {
    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
    expect(() => mount(AccordionItem, {props: {title: 'Solo'}})).toThrow(
      /à l'intérieur de MalioAccordion/,
    )
    spy.mockRestore()
  })
  it('generates an auto id-based value and still toggles when value prop is omitted', async () => {
    const wrapper = mountInAccordion(
      `<MalioAccordionItem title="Sans value"><p>X</p></MalioAccordionItem>`,
    )
    const header = wrapper.find('button[aria-expanded]')
    expect(header.attributes('aria-controls')).toMatch(/-panel-malio-accordion-item-/)
    await header.trigger('click')
    expect(header.attributes('aria-expanded')).toBe('true')
  })
  it('applies headerClass and panelClass overrides via twMerge', () => {
    const wrapper = mountInAccordion(
      `<MalioAccordionItem title="T" value="t" header-class="bg-red-500" panel-class="text-lg"><p>X</p></MalioAccordionItem>`,
    )
    const header = wrapper.find('button[aria-expanded]')
    expect(header.classes()).toContain('bg-red-500')
    expect(wrapper.find('[role="region"]').html()).toContain('text-lg')
  })
  it('renders a rotating chevron icon', () => {
    const wrapper = mountInAccordion(
      `<MalioAccordionItem title="T" value="t"><p>X</p></MalioAccordionItem>`,
    )
    expect(wrapper.find('button[aria-expanded] svg').exists()).toBe(true)
  })
 })
@@ -1,126 +0,0 @@
 <template>
  <div>
    <h3 class="m-0">
      <button
        :id="headerId"
        ref="headerRef"
        type="button"
        :class="headerClasses"
        :aria-expanded="open"
        :aria-controls="panelId"
        :disabled="disabled"
        :aria-disabled="disabled || undefined"
        @click="onToggle"
        @keydown.down.prevent="ctx.focusSibling(value, 1)"
        @keydown.up.prevent="ctx.focusSibling(value, -1)"
      >
        <span>{{ title }}</span>
        <IconifyIcon
          icon="mdi:chevron-down"
          :width="24"
          class="shrink-0 transition-transform duration-200"
          :class="open ? 'rotate-180' : ''"
        />
      </button>
    </h3>
    <div
      :id="panelId"
      role="region"
      :aria-labelledby="headerId"
      class="grid transition-[grid-template-rows] duration-200 ease-out"
      :class="open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
      @transitionend="onPanelTransitionEnd"
    >
      <div
        :class="overflowVisible ? 'overflow-visible' : 'overflow-hidden'"
        :inert="!open || undefined"
      >
        <div :class="panelInnerClass">
          <slot />
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {computed, inject, onBeforeUnmount, onMounted, ref, useId, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import {accordionContextKey} from './context'
 defineOptions({name: 'MalioAccordionItem', inheritAttrs: false})
 const props = withDefaults(defineProps<{
  title: string
  value?: string
  defaultOpen?: boolean
  disabled?: boolean
  headerClass?: string
  panelClass?: string
 }>(), {
  value: '',
  defaultOpen: false,
  disabled: false,
  headerClass: '',
  panelClass: '',
 })
 const ctx = inject(accordionContextKey)
 if (!ctx) {
  throw new Error('MalioAccordionItem doit être utilisé à l\'intérieur de MalioAccordion')
 }
 const generatedId = useId()
 const value = computed(() => props.value || `malio-accordion-item-${generatedId}`)
 const headerRef = ref<HTMLButtonElement | null>(null)
 const headerId = computed(() => `${ctx.baseId.value}-header-${value.value}`)
 const panelId = computed(() => `${ctx.baseId.value}-panel-${value.value}`)
 const open = computed(() => ctx.isOpen(value.value))
 // Le panneau garde `overflow-hidden` pendant l'animation (clipping requis par
 // la transition grid-template-rows), puis passe en `overflow-visible` une fois
 // complètement ouvert pour qu'un popover enfant (datepicker, select…) ne soit
 // pas rogné. On re-clippe dès le début de la fermeture.
 const overflowVisible = ref(false)
 watch(open, (isOpen) => {
  if (!isOpen) overflowVisible.value = false
 })
 function onPanelTransitionEnd(e: TransitionEvent) {
  if (e.propertyName === 'grid-template-rows' && open.value) {
    overflowVisible.value = true
  }
 }
 function onToggle() {
  if (props.disabled) return
  ctx.toggle(value.value)
 }
 const headerClasses = computed(() =>
  twMerge(
    'flex w-full items-center justify-between gap-4 px-7 pt-[28px] pb-[20px] text-left font-[600] text-[20px] transition-colors',
    props.disabled ? 'cursor-not-allowed text-m-muted' : 'cursor-pointer hover:bg-m-surface',
    props.headerClass,
  ),
 )
 const panelInnerClass = computed(() => twMerge('px-7 pt-[10px] pb-[20px]', props.panelClass))
 onMounted(() => {
  ctx.register(
    {
      value: value.value,
      getHeaderEl: () => headerRef.value,
      isDisabled: () => props.disabled,
    },
    props.defaultOpen,
  )
  // Ouvert au montage (defaultOpen / contrôlé) : pas d'animation, overflow visible direct.
  if (open.value) overflowVisible.value = true
 })
 onBeforeUnmount(() => ctx.unregister(value.value))
 </script>
@@ -1,19 +0,0 @@
 import type {ComputedRef, InjectionKey} from 'vue'
 export interface AccordionItemRegistration {
  value: string
  getHeaderEl: () => HTMLElement | null
  isDisabled: () => boolean
 }
 export interface AccordionContext {
  mode: ComputedRef<'single' | 'multiple'>
  baseId: ComputedRef<string>
  isOpen: (value: string) => boolean
  toggle: (value: string) => void
  register: (item: AccordionItemRegistration, defaultOpen: boolean) => void
  unregister: (value: string) => void
  focusSibling: (value: string, offset: 1 | -1) => void
 }
 export const accordionContextKey: InjectionKey<AccordionContext> = Symbol('MalioAccordion')
@@ -1,198 +0,0 @@
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import Date_ from './Date.vue'
 type DateProps = {
  id?: string
  name?: string
  label?: string
  modelValue?: string | null
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  min?: string
  max?: string
  clearable?: boolean
  inputClass?: string
  labelClass?: string
  groupClass?: string
 }
 const DateForTest = Date_ as DefineComponent<DateProps>
 const mountDate = (props: DateProps = {}) => mount(DateForTest, {props, attachTo: document.body})
 describe('MalioDate', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
  })
  afterEach(() => vi.useRealTimers())
  describe('rendu', () => {
    it('renders the label and the calendar icon', () => {
      const wrapper = mountDate({label: 'Date de naissance'})
      expect(wrapper.get('label').text()).toBe('Date de naissance')
      expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
    })
    it('displays the formatted value in the field', () => {
      const wrapper = mountDate({modelValue: '2026-05-19'})
      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
      expect(input.value).toBe('19/05/2026')
    })
    it('does not show the popover initially', () => {
      const wrapper = mountDate()
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    })
  })
  describe('popover', () => {
    it('opens on field click', async () => {
      const wrapper = mountDate()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
    })
    it('opens on the current month when there is no value', async () => {
      const wrapper = mountDate()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Mai 2026')
    })
    it('opens on the value month when a value is set', async () => {
      const wrapper = mountDate({modelValue: '2025-12-25'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
    })
    it('closes on outside mousedown', async () => {
      const wrapper = mountDate()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
      await wrapper.vm.$nextTick()
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    })
  })
  describe('navigation jours', () => {
    it('goes to the next month on the right chevron', async () => {
      const wrapper = mountDate()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="header-next"]').trigger('click')
      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Juin 2026')
    })
    it('rolls December to January and bumps the year', async () => {
      const wrapper = mountDate({modelValue: '2026-12-15'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="header-next"]').trigger('click')
      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2027')
    })
  })
  describe('sélection', () => {
    it('emits the ISO date and closes on day click', async () => {
      const wrapper = mountDate()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      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.find('[data-test="popover"]').exists()).toBe(false)
    })
  })
  describe('bornes min/max', () => {
    it('disables days outside the range', async () => {
      const wrapper = mountDate({min: '2026-05-10', max: '2026-05-20'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
      expect((outside.element as HTMLButtonElement).disabled).toBe(true)
      await outside.trigger('click')
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
    })
  })
  describe('vue mois', () => {
    it('switches to month view on header toggle', async () => {
      const wrapper = mountDate()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="header-toggle"]').trigger('click')
      expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(true)
    })
    it('navigates the year with chevrons in month view', async () => {
      const wrapper = mountDate()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="header-toggle"]').trigger('click')
      await wrapper.get('[data-test="header-next"]').trigger('click')
      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2027')
    })
    it('returns to day view on month click', async () => {
      const wrapper = mountDate()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="header-toggle"]').trigger('click')
      await wrapper.get('[data-test="month"][data-month="0"]').trigger('click')
      expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(false)
      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2026')
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
    })
  })
  describe('effacement', () => {
    it('shows the clear button when there is a value', () => {
      const wrapper = mountDate({modelValue: '2026-05-19'})
      expect(wrapper.find('[data-test="clear"]').exists()).toBe(true)
    })
    it('hides the clear button when empty', () => {
      const wrapper = mountDate()
      expect(wrapper.find('[data-test="clear"]').exists()).toBe(false)
    })
    it('emits null and does not open the popover on clear', async () => {
      const wrapper = mountDate({modelValue: '2026-05-19'})
      await wrapper.get('[data-test="clear"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    })
  })
  describe('états', () => {
    it('does not open when disabled', async () => {
      const wrapper = mountDate({disabled: true})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    })
    it('does not open when readonly', async () => {
      const wrapper = mountDate({readonly: true, modelValue: '2026-05-19'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    })
  })
  describe('accessibilité', () => {
    it('sets aria-invalid and describedby on error', () => {
      const wrapper = mountDate({error: 'Date requise'})
      const input = wrapper.get('[data-test="date-input"]')
      expect(input.attributes('aria-invalid')).toBe('true')
      expect(input.attributes('aria-describedby')).toBeTruthy()
      expect(wrapper.text()).toContain('Date requise')
    })
  })
  describe('synchronisation externe', () => {
    it('updates the displayed value when modelValue changes', async () => {
      const wrapper = mountDate({modelValue: '2026-05-19'})
      await wrapper.setProps({modelValue: '2026-12-25'})
      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
      expect(input.value).toBe('25/12/2026')
    })
  })
 })
@@ -1,93 +0,0 @@
 <template>
  <CalendarField
    :id="id"
    :display-value="displayValue"
    :sync-to="modelValue ?? null"
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :required="required"
    :disabled="disabled"
    :readonly="readonly"
    :hint="hint"
    :error="error"
    :success="success"
    :clearable="clearable"
    :input-class="inputClass"
    :label-class="labelClass"
    :group-class="groupClass"
    v-bind="$attrs"
    @clear="emit('update:modelValue', null)"
  >
    <template #default="{ currentMonth, currentYear, close }">
      <MonthGrid
        :month="currentMonth"
        :year="currentYear"
        :selected-date="modelValue ?? null"
        :min="min"
        :max="max"
        @select="(iso) => { emit('update:modelValue', iso); close() }"
      />
    </template>
  </CalendarField>
 </template>
 <script setup lang="ts">
 import {computed, watch} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
 import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
 defineOptions({name: 'MalioDate', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    name?: string
    label?: string
    modelValue?: string | null
    placeholder?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    min?: string
    max?: string
    clearable?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
  }>(),
  {
    id: '',
    name: '',
    label: '',
    modelValue: undefined,
    placeholder: 'JJ/MM/AAAA',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    min: undefined,
    max: undefined,
    clearable: true,
    inputClass: '',
    labelClass: '',
    groupClass: '',
  },
 )
 const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
 const displayValue = computed(() => formatIsoToDisplay(props.modelValue ?? null))
 watch(() => props.modelValue, (val) => {
  if (val && !isValidIso(val) && import.meta.dev) {
    console.warn(`[MalioDate] modelValue invalide ignoré : "${val}"`)
  }
 })
 </script>
@@ -1,155 +0,0 @@
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import DateRange from './DateRange.vue'
 type RangeValue = {start: string; end: string}
 type DateRangeProps = {
  modelValue?: RangeValue | null
  label?: string
  disabled?: boolean
  readonly?: boolean
  error?: string
  min?: string
  max?: string
  clearable?: boolean
 }
 const DateRangeForTest = DateRange as DefineComponent<DateRangeProps>
 const mountRange = (props: DateRangeProps = {}) =>
  mount(DateRangeForTest, {props, attachTo: document.body})
 const openAndClickDays = async (wrapper: ReturnType<typeof mountRange>, isos: string[]) => {
  await wrapper.get('[data-test="date-input"]').trigger('click')
  for (const iso of isos) {
    await wrapper.get(`[data-test="day"][data-iso="${iso}"]`).trigger('click')
  }
 }
 describe('MalioDateRange', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
  })
  afterEach(() => vi.useRealTimers())
  it('renders the label and calendar icon', () => {
    const wrapper = mountRange({label: 'Période'})
    expect(wrapper.get('label').text()).toBe('Période')
    expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
  })
  it('displays the formatted range when modelValue is set', () => {
    const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
    expect(input.value).toBe('19/05/2026 - 25/05/2026')
  })
  it('shows an empty field without a value', () => {
    const wrapper = mountRange()
    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
    expect(input.value).toBe('')
  })
  it('opens on the start month when a range is set', async () => {
    const wrapper = mountRange({modelValue: {start: '2025-12-10', end: '2025-12-20'}})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
  })
  it('does not emit on the first click', async () => {
    const wrapper = mountRange()
    await openAndClickDays(wrapper, ['2026-05-19'])
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
  })
  it('emits the range and closes on the second click', async () => {
    const wrapper = mountRange()
    await openAndClickDays(wrapper, ['2026-05-19', '2026-05-25'])
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-25'}])
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('auto-inverts when the second click is before the first', async () => {
    const wrapper = mountRange()
    await openAndClickDays(wrapper, ['2026-05-25', '2026-05-19'])
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-25'}])
  })
  it('allows a single-day range', async () => {
    const wrapper = mountRange()
    await openAndClickDays(wrapper, ['2026-05-19', '2026-05-19'])
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-19'}])
  })
  it('restarts a new range on the third click', async () => {
    const wrapper = mountRange()
    await openAndClickDays(wrapper, ['2026-05-19', '2026-05-25'])
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="day"][data-iso="2026-05-10"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
    await wrapper.get('[data-test="day"][data-iso="2026-05-12"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-10', end: '2026-05-12'}])
  })
  it('previews the range on hover while selecting', async () => {
    const wrapper = mountRange()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
    await wrapper.get('[data-test="day"][data-iso="2026-05-22"]').trigger('mouseenter')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
  })
  it('does not preview before selecting', async () => {
    const wrapper = mountRange()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="day"][data-iso="2026-05-22"]').trigger('mouseenter')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('none')
  })
  it('marks start, end and in-range roles for a committed range', async () => {
    const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-19"]').attributes('data-range-role')).toBe('start')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-25"]').attributes('data-range-role')).toBe('end')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
  })
  it('cancels an in-progress selection on outside click', async () => {
    const wrapper = mountRange()
    await openAndClickDays(wrapper, ['2026-05-19'])
    document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-19"]').attributes('data-range-role')).toBe('none')
  })
  it('emits null on clear', async () => {
    const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
    await wrapper.get('[data-test="clear"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
  })
  it('disables days outside min/max', async () => {
    const wrapper = mountRange({min: '2026-05-10', max: '2026-05-20'})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
    expect((outside.element as HTMLButtonElement).disabled).toBe(true)
    await outside.trigger('click')
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
  })
  it('sets aria-invalid on error', () => {
    const wrapper = mountRange({error: 'Période requise'})
    expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
    expect(wrapper.text()).toContain('Période requise')
  })
  it('does not open when disabled', async () => {
    const wrapper = mountRange({disabled: true})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
 })
@@ -1,140 +0,0 @@
 <template>
  <CalendarField
    :id="id"
    :display-value="displayValue"
    :sync-to="validRange?.start ?? null"
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :required="required"
    :disabled="disabled"
    :readonly="readonly"
    :hint="hint"
    :error="error"
    :success="success"
    :clearable="clearable"
    :input-class="inputClass"
    :label-class="labelClass"
    :group-class="groupClass"
    v-bind="$attrs"
    @clear="onClear"
    @close="onClose"
  >
    <template #default="{ currentMonth, currentYear, close }">
      <MonthGrid
        :month="currentMonth"
        :year="currentYear"
        :range-start="rangeStart"
        :range-end="rangeEnd"
        :preview-date="previewDate"
        :min="min"
        :max="max"
        @select="(iso) => onSelectDay(iso, close)"
        @hover="onHover"
      />
    </template>
  </CalendarField>
 </template>
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
 import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
 import {normalizeRange, type DateRangeValue} from './composables/dateRange'
 defineOptions({name: 'MalioDateRange', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    name?: string
    label?: string
    modelValue?: DateRangeValue | null
    placeholder?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    min?: string
    max?: string
    clearable?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
  }>(),
  {
    id: '',
    name: '',
    label: '',
    modelValue: undefined,
    placeholder: 'JJ/MM/AAAA',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    min: undefined,
    max: undefined,
    clearable: true,
    inputClass: '',
    labelClass: '',
    groupClass: '',
  },
 )
 const emit = defineEmits<{(e: 'update:modelValue', value: DateRangeValue | null): void}>()
 const pendingStart = ref<string | null>(null)
 const hoverDate = ref<string | null>(null)
 const isSelecting = computed(() => pendingStart.value !== null)
 const validRange = computed<DateRangeValue | null>(() => {
  const v = props.modelValue
  if (v && isValidIso(v.start) && isValidIso(v.end)) return v
  return null
 })
 const rangeStart = computed(() =>
  isSelecting.value ? pendingStart.value : (validRange.value?.start ?? null),
 )
 const rangeEnd = computed(() =>
  isSelecting.value ? null : (validRange.value?.end ?? null),
 )
 const previewDate = computed(() => (isSelecting.value ? hoverDate.value : null))
 const displayValue = computed(() => {
  if (isSelecting.value || !validRange.value) return ''
  return `${formatIsoToDisplay(validRange.value.start)} - ${formatIsoToDisplay(validRange.value.end)}`
 })
 const onSelectDay = (iso: string, close: () => void) => {
  if (pendingStart.value === null) {
    pendingStart.value = iso
    hoverDate.value = null
    return
  }
  emit('update:modelValue', normalizeRange(pendingStart.value, iso))
  pendingStart.value = null
  hoverDate.value = null
  close()
 }
 const onHover = (iso: string | null) => {
  if (isSelecting.value) hoverDate.value = iso
 }
 const onClose = () => {
  pendingStart.value = null
  hoverDate.value = null
 }
 const onClear = () => {
  emit('update:modelValue', null)
  pendingStart.value = null
  hoverDate.value = null
 }
 </script>
@@ -1,123 +0,0 @@
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import DateTime_ from './DateTime.vue'
 import MalioTimePicker from '../time/TimePicker.vue'
 type DateTimeProps = {
  id?: string
  name?: string
  label?: string
  modelValue?: string | null
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  min?: string
  max?: string
  clearable?: boolean
  inputClass?: string
  labelClass?: string
  groupClass?: string
 }
 const DateTimeForTest = DateTime_ as DefineComponent<DateTimeProps>
 const mountDateTime = (props: DateTimeProps = {}) =>
  mount(DateTimeForTest, {props, attachTo: document.body})
 describe('MalioDateTime', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19, 9, 5, 0)) // 19 mai 2026, 09:05
  })
  afterEach(() => vi.useRealTimers())
  describe('rendu', () => {
    it('affiche le label et l\'icône calendrier', () => {
      const wrapper = mountDateTime({label: 'Rendez-vous'})
      expect(wrapper.get('label').text()).toBe('Rendez-vous')
      expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
    })
    it('affiche la valeur formatée date + heure dans le champ', () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
      expect(input.value).toBe('20/05/2026 14:30')
    })
  })
  describe('popover', () => {
    it('ouvre la grille et le champ sélecteur d\'heure au clic', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
      expect(wrapper.findComponent(MalioTimePicker).exists()).toBe(true)
      expect(wrapper.find('[data-test="time-field"]').exists()).toBe(true)
    })
  })
  describe('sélection', () => {
    it('émet le jour à l\'heure actuelle (si aucune heure choisie) et garde le popover ouvert', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      // heure système figée à 09:05
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:05:00'])
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
    })
    it('applique l\'heure réglée avant le clic du jour', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '09:15')
      await wrapper.vm.$nextTick()
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
    })
    it('met à jour l\'heure quand une date est déjà choisie', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '08:45')
      await wrapper.vm.$nextTick()
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
    })
    it('initialise le champ heure depuis la valeur', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.findComponent(MalioTimePicker).props('modelValue')).toBe('14:30')
    })
  })
  describe('bornes min/max', () => {
    it('désactive les jours hors bornes (datetime borné sur la date)', async () => {
      const wrapper = mountDateTime({min: '2026-05-10T00:00:00', max: '2026-05-20T00:00:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
      expect((outside.element as HTMLButtonElement).disabled).toBe(true)
    })
  })
  describe('effacement', () => {
    it('émet null au clic sur la croix', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="clear"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
    })
  })
  describe('accessibilité', () => {
    it('positionne aria-invalid et describedby sur erreur', () => {
      const wrapper = mountDateTime({error: 'Date requise'})
      const input = wrapper.get('[data-test="date-input"]')
      expect(input.attributes('aria-invalid')).toBe('true')
      expect(input.attributes('aria-describedby')).toBeTruthy()
      expect(wrapper.text()).toContain('Date requise')
    })
  })
 })
@@ -1,133 +0,0 @@
 <template>
  <CalendarField
    :id="id"
    :display-value="displayValue"
    :sync-to="datePart"
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :required="required"
    :disabled="disabled"
    :readonly="readonly"
    :hint="hint"
    :error="error"
    :success="success"
    :clearable="clearable"
    :input-class="inputClass"
    :label-class="labelClass"
    :group-class="groupClass"
    v-bind="$attrs"
    @clear="onClear"
  >
    <template #default="{ currentMonth, currentYear }">
      <MonthGrid
        :month="currentMonth"
        :year="currentYear"
        :selected-date="datePart"
        :min="min?.slice(0, 10)"
        :max="max?.slice(0, 10)"
        @select="onSelectDay"
      />
      <div class="mt-4">
        <MalioTimePicker
          :model-value="timeValue || null"
          label="Heure"
          :clearable="false"
          static-popover
          @update:model-value="onTimeChange"
        />
      </div>
    </template>
  </CalendarField>
 </template>
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
 import MalioTimePicker from '../time/TimePicker.vue'
 import {formatTime} from '../time/composables/timeFormat'
 import {composeDateTime, formatIsoDateTimeToDisplay, isValidIsoDateTime, splitDateTime} from './composables/datetimeFormat'
 defineOptions({name: 'MalioDateTime', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    name?: string
    label?: string
    modelValue?: string | null
    placeholder?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    min?: string
    max?: string
    clearable?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
  }>(),
  {
    id: '',
    name: '',
    label: '',
    modelValue: undefined,
    placeholder: 'JJ/MM/AAAA HH:MM',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    min: undefined,
    max: undefined,
    clearable: true,
    inputClass: '',
    labelClass: '',
    groupClass: '',
  },
 )
 const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
 // pendingTime : heure réglée avant qu'un jour ne soit choisi (sinon on ne peut pas émettre).
 const pendingTime = ref('')
 const parts = computed(() => splitDateTime(props.modelValue ?? null))
 const datePart = computed(() => parts.value.date)
 const displayValue = computed(() => formatIsoDateTimeToDisplay(props.modelValue ?? null))
 const timeValue = computed(() => parts.value.time || pendingTime.value)
 function onSelectDay(iso: string) {
  // Si aucune heure n'a été choisie, on prend l'heure actuelle (pas 00:00).
  // (heure courante au moment du clic)
  const now = new Date()
  const time = parts.value.time || pendingTime.value || formatTime(now.getHours(), now.getMinutes())
  emit('update:modelValue', composeDateTime(iso, time))
 }
 function onTimeChange(value: string | null) {
  if (!value) return
  if (datePart.value) {
    emit('update:modelValue', composeDateTime(datePart.value, value))
  }
  else {
    pendingTime.value = value
  }
 }
 function onClear() {
  pendingTime.value = ''
  emit('update:modelValue', null)
 }
 watch(() => props.modelValue, (val) => {
  if (val && !isValidIsoDateTime(val) && import.meta.dev) {
    console.warn(`[MalioDateTime] modelValue invalide ignoré : "${val}"`)
  }
 })
 </script>
@@ -1,122 +0,0 @@
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import DateWeek from './DateWeek.vue'
 type DateWeekProps = {
  modelValue?: string | null
  label?: string
  disabled?: boolean
  readonly?: boolean
  error?: string
  min?: string
  max?: string
 }
 const DateWeekForTest = DateWeek as DefineComponent<DateWeekProps>
 const mountWeek = (props: DateWeekProps = {}) =>
  mount(DateWeekForTest, {props, attachTo: document.body})
 describe('MalioDateWeek', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
  })
  afterEach(() => vi.useRealTimers())
  it('renders the label and calendar icon', () => {
    const wrapper = mountWeek({label: 'Semaine'})
    expect(wrapper.get('label').text()).toBe('Semaine')
    expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
  })
  it('displays the formatted week when modelValue is set', () => {
    const wrapper = mountWeek({modelValue: '2026-W21'})
    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
    expect(input.value).toBe('Semaine 21 (18/05 → 24/05/2026)')
  })
  it('shows an empty field without a value', () => {
    const wrapper = mountWeek()
    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
    expect(input.value).toBe('')
  })
  it('opens on the month of the selected week', async () => {
    const wrapper = mountWeek({modelValue: '2026-W01'}) // lundi 2025-12-29
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
  })
  it('selects the week when a day is clicked', async () => {
    const wrapper = mountWeek()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('selects the week when the week number is clicked', async () => {
    const wrapper = mountWeek()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('previews the whole week on day hover', async () => {
    const wrapper = mountWeek()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('mouseenter')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-24"]').attributes('data-range-role')).toBe('end')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
  })
  it('previews the whole week on week-number hover', async () => {
    const wrapper = mountWeek()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('mouseenter')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
  })
  it('marks the committed week number', async () => {
    const wrapper = mountWeek({modelValue: '2026-W21'})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').attributes('data-marked')).toBe('true')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
  })
  it('emits null on clear', async () => {
    const wrapper = mountWeek({modelValue: '2026-W21'})
    await wrapper.get('[data-test="clear"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
  })
  it('disables a week fully outside min/max', async () => {
    const wrapper = mountWeek({min: '2026-05-18', max: '2026-05-31'})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    const earlyWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-11"]')
    expect((earlyWeek.element as HTMLButtonElement).disabled).toBe(true)
    const selectableWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]')
    expect((selectableWeek.element as HTMLButtonElement).disabled).toBe(false)
  })
  it('does not open when disabled', async () => {
    const wrapper = mountWeek({disabled: true})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('does not open when readonly', async () => {
    const wrapper = mountWeek({readonly: true, modelValue: '2026-W21'})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('sets aria-invalid on error', () => {
    const wrapper = mountWeek({error: 'Semaine requise'})
    expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
    expect(wrapper.text()).toContain('Semaine requise')
  })
 })
@@ -1,123 +0,0 @@
 <template>
  <CalendarField
    :id="id"
    :display-value="displayValue"
    :sync-to="validWeek?.monday ?? null"
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :required="required"
    :disabled="disabled"
    :readonly="readonly"
    :hint="hint"
    :error="error"
    :success="success"
    :clearable="clearable"
    :input-class="inputClass"
    :label-class="labelClass"
    :group-class="groupClass"
    v-bind="$attrs"
    @clear="onClear"
    @close="onClose"
  >
    <template #default="{ currentMonth, currentYear, close }">
      <MonthGrid
        :month="currentMonth"
        :year="currentYear"
        :range-start="activeMonday"
        :range-end="activeSunday"
        :marked-week-start="validWeek?.monday ?? null"
        interactive-week-number
        :min="min"
        :max="max"
        @select="(iso) => onSelect(iso, close)"
        @hover="onHover"
      />
    </template>
  </CalendarField>
 </template>
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
 import {formatWeekDisplay, isValidIsoWeek, isoWeekToMonday, mondayOf, sundayOf, toIsoWeek} from './composables/dateWeek'
 defineOptions({name: 'MalioDateWeek', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    name?: string
    label?: string
    modelValue?: string | null
    placeholder?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    min?: string
    max?: string
    clearable?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
  }>(),
  {
    id: '',
    name: '',
    label: '',
    modelValue: undefined,
    placeholder: 'JJ/MM/AAAA',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    min: undefined,
    max: undefined,
    clearable: true,
    inputClass: '',
    labelClass: '',
    groupClass: '',
  },
 )
 const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
 const hoverWeekStart = ref<string | null>(null)
 const validWeek = computed(() => {
  if (props.modelValue && isValidIsoWeek(props.modelValue)) {
    return {monday: isoWeekToMonday(props.modelValue) as string}
  }
  return null
 })
 const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
 const activeSunday = computed(() => (activeMonday.value ? sundayOf(activeMonday.value) : null))
 const displayValue = computed(() => (validWeek.value ? formatWeekDisplay(props.modelValue as string) : ''))
 const onSelect = (iso: string, close: () => void) => {
  emit('update:modelValue', toIsoWeek(iso))
  hoverWeekStart.value = null
  close()
 }
 const onHover = (iso: string | null) => {
  hoverWeekStart.value = iso ? mondayOf(iso) : null
 }
 const onClose = () => {
  hoverWeekStart.value = null
 }
 const onClear = () => {
  emit('update:modelValue', null)
  hoverWeekStart.value = null
 }
 </script>
@@ -1,62 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {formatIsoToDisplay, isDateInRange, isValidIso, parseDisplayToIso} from './dateFormat'
 describe('dateFormat', () => {
  describe('isValidIso', () => {
    it('accepts a real ISO date', () => {
      expect(isValidIso('2026-05-19')).toBe(true)
    })
    it('rejects a malformed string', () => {
      expect(isValidIso('19/05/2026')).toBe(false)
      expect(isValidIso('2026-5-9')).toBe(false)
      expect(isValidIso('')).toBe(false)
    })
    it('rejects an impossible date', () => {
      expect(isValidIso('2026-02-30')).toBe(false)
      expect(isValidIso('2026-13-01')).toBe(false)
    })
    it('accepts Feb 29 on a leap year and rejects it otherwise', () => {
      expect(isValidIso('2024-02-29')).toBe(true)
      expect(isValidIso('2026-02-29')).toBe(false)
    })
  })
  describe('formatIsoToDisplay', () => {
    it('formats ISO to DD/MM/YYYY', () => {
      expect(formatIsoToDisplay('2026-05-19')).toBe('19/05/2026')
    })
    it('returns empty string for null or invalid input', () => {
      expect(formatIsoToDisplay(null)).toBe('')
      expect(formatIsoToDisplay('nope')).toBe('')
    })
  })
  describe('parseDisplayToIso', () => {
    it('parses DD/MM/YYYY to ISO', () => {
      expect(parseDisplayToIso('19/05/2026')).toBe('2026-05-19')
    })
    it('returns null for malformed or impossible input', () => {
      expect(parseDisplayToIso('2026-05-19')).toBeNull()
      expect(parseDisplayToIso('31/02/2026')).toBeNull()
      expect(parseDisplayToIso('')).toBeNull()
    })
  })
  describe('isDateInRange', () => {
    it('returns true when no bounds are given', () => {
      expect(isDateInRange('2026-05-19')).toBe(true)
    })
    it('respects the min bound (inclusive)', () => {
      expect(isDateInRange('2026-05-19', '2026-05-19')).toBe(true)
      expect(isDateInRange('2026-05-18', '2026-05-19')).toBe(false)
    })
    it('respects the max bound (inclusive)', () => {
      expect(isDateInRange('2026-05-19', undefined, '2026-05-19')).toBe(true)
      expect(isDateInRange('2026-05-20', undefined, '2026-05-19')).toBe(false)
    })
    it('respects both bounds', () => {
      expect(isDateInRange('2026-05-15', '2026-05-10', '2026-05-20')).toBe(true)
      expect(isDateInRange('2026-05-25', '2026-05-10', '2026-05-20')).toBe(false)
    })
  })
 })
@@ -1,26 +0,0 @@
 export function isValidIso(iso: string): boolean {
  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return false
  const [y, m, d] = iso.split('-').map(Number)
  const date = new Date(y, m - 1, d)
  return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d
 }
 export function formatIsoToDisplay(iso: string | null): string {
  if (!iso || !isValidIso(iso)) return ''
  const [y, m, d] = iso.split('-')
  return `${d}/${m}/${y}`
 }
 export function parseDisplayToIso(display: string): string | null {
  const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(display.trim())
  if (!match) return null
  const [, dd, mm, yyyy] = match
  const iso = `${yyyy}-${mm}-${dd}`
  return isValidIso(iso) ? iso : null
 }
 export function isDateInRange(iso: string, min?: string, max?: string): boolean {
  if (min && iso < min) return false
  if (max && iso > max) return false
  return true
 }
@@ -1,57 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {dayRangeRole, normalizeRange, resolveRangeBounds} from './dateRange'
 describe('dateRange', () => {
  describe('normalizeRange', () => {
    it('keeps an already ordered pair', () => {
      expect(normalizeRange('2026-05-19', '2026-05-25')).toEqual({start: '2026-05-19', end: '2026-05-25'})
    })
    it('swaps a reversed pair', () => {
      expect(normalizeRange('2026-05-25', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-25'})
    })
    it('handles an equal pair', () => {
      expect(normalizeRange('2026-05-19', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-19'})
    })
  })
  describe('resolveRangeBounds', () => {
    it('returns null without a start', () => {
      expect(resolveRangeBounds(null, null, null)).toBeNull()
    })
    it('returns a single-point range when only start is set', () => {
      expect(resolveRangeBounds('2026-05-19', null, null)).toEqual({lo: '2026-05-19', hi: '2026-05-19'})
    })
    it('orders start and committed end', () => {
      expect(resolveRangeBounds('2026-05-19', '2026-05-25', null)).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
    })
    it('uses preview when end is not set', () => {
      expect(resolveRangeBounds('2026-05-19', null, '2026-05-22')).toEqual({lo: '2026-05-19', hi: '2026-05-22'})
    })
    it('inverts when preview is before start', () => {
      expect(resolveRangeBounds('2026-05-19', null, '2026-05-10')).toEqual({lo: '2026-05-10', hi: '2026-05-19'})
    })
    it('prioritises committed end over preview', () => {
      expect(resolveRangeBounds('2026-05-19', '2026-05-25', '2026-05-30')).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
    })
  })
  describe('dayRangeRole', () => {
    const bounds = {lo: '2026-05-19', hi: '2026-05-25'}
    it('returns none without bounds', () => {
      expect(dayRangeRole('2026-05-20', null)).toBe('none')
    })
    it('returns single when lo === hi and matches', () => {
      expect(dayRangeRole('2026-05-19', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('single')
      expect(dayRangeRole('2026-05-20', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('none')
    })
    it('returns start, end and in-range', () => {
      expect(dayRangeRole('2026-05-19', bounds)).toBe('start')
      expect(dayRangeRole('2026-05-25', bounds)).toBe('end')
      expect(dayRangeRole('2026-05-22', bounds)).toBe('in-range')
    })
    it('returns none outside the bounds', () => {
      expect(dayRangeRole('2026-05-10', bounds)).toBe('none')
      expect(dayRangeRole('2026-05-30', bounds)).toBe('none')
    })
  })
 })
@@ -1,31 +0,0 @@
 export type DateRangeValue = {start: string; end: string}
 export function normalizeRange(a: string, b: string): DateRangeValue {
  return a <= b ? {start: a, end: b} : {start: b, end: a}
 }
 export function resolveRangeBounds(
  start: string | null,
  end: string | null,
  preview: string | null,
 ): {lo: string; hi: string} | null {
  if (!start) return null
  const other = end ?? preview
  if (!other) return {lo: start, hi: start}
  return start <= other ? {lo: start, hi: other} : {lo: other, hi: start}
 }
 export type DayRangeRole = 'none' | 'single' | 'start' | 'end' | 'in-range'
 export function dayRangeRole(
  iso: string,
  bounds: {lo: string; hi: string} | null,
 ): DayRangeRole {
  if (!bounds) return 'none'
  const {lo, hi} = bounds
  if (lo === hi) return iso === lo ? 'single' : 'none'
  if (iso === lo) return 'start'
  if (iso === hi) return 'end'
  if (iso > lo && iso < hi) return 'in-range'
  return 'none'
 }
@@ -1,74 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {
  formatWeekDisplay,
  isValidIsoWeek,
  isoWeekToMonday,
  mondayOf,
  sundayOf,
  toIsoWeek,
 } from './dateWeek'
 describe('dateWeek', () => {
  describe('mondayOf / sundayOf', () => {
    it('returns Monday and Sunday of a midweek date', () => {
      expect(mondayOf('2026-05-20')).toBe('2026-05-18') // mercredi
      expect(sundayOf('2026-05-20')).toBe('2026-05-24')
    })
    it('keeps Monday on a Monday', () => {
      expect(mondayOf('2026-05-18')).toBe('2026-05-18')
    })
    it('returns the preceding Monday for a Sunday', () => {
      expect(mondayOf('2026-05-24')).toBe('2026-05-18')
    })
  })
  describe('toIsoWeek', () => {
    it('returns the ISO week of a date', () => {
      expect(toIsoWeek('2026-05-20')).toBe('2026-W21')
    })
    it('handles year boundaries', () => {
      expect(toIsoWeek('2026-01-01')).toBe('2026-W01')
      expect(toIsoWeek('2025-12-31')).toBe('2026-W01')
      expect(toIsoWeek('2027-01-01')).toBe('2026-W53')
    })
  })
  describe('isoWeekToMonday', () => {
    it('returns the Monday of a week string', () => {
      expect(isoWeekToMonday('2026-W21')).toBe('2026-05-18')
    })
    it('round-trips with toIsoWeek', () => {
      for (const w of ['2026-W01', '2026-W21', '2026-W53', '2024-W09']) {
        const monday = isoWeekToMonday(w)
        expect(monday).not.toBeNull()
        expect(toIsoWeek(monday as string)).toBe(w)
      }
    })
    it('returns null for invalid input', () => {
      expect(isoWeekToMonday('2026-21')).toBeNull()
      expect(isoWeekToMonday('2026-W00')).toBeNull()
      expect(isoWeekToMonday('2026-W54')).toBeNull()
      expect(isoWeekToMonday('2025-W53')).toBeNull() // 2025 n'a que 52 semaines ISO
    })
  })
  describe('isValidIsoWeek', () => {
    it('accepts a real ISO week', () => {
      expect(isValidIsoWeek('2026-W21')).toBe(true)
    })
    it('rejects malformed or impossible weeks', () => {
      expect(isValidIsoWeek('2026-21')).toBe(false)
      expect(isValidIsoWeek('2026-W00')).toBe(false)
      expect(isValidIsoWeek('2026-W54')).toBe(false)
    })
  })
  describe('formatWeekDisplay', () => {
    it('formats a week as a human label', () => {
      expect(formatWeekDisplay('2026-W21')).toBe('Semaine 21 (18/05 → 24/05/2026)')
    })
    it('returns empty string for invalid input', () => {
      expect(formatWeekDisplay('2026-W54')).toBe('')
    })
  })
 })
@@ -1,67 +0,0 @@
 import {formatIsoToDisplay} from './dateFormat'
 const parseUtc = (iso: string): Date => {
  const [y, m, d] = iso.split('-').map(Number)
  return new Date(Date.UTC(y, m - 1, d))
 }
 const toIso = (d: Date): string => {
  const y = d.getUTCFullYear()
  const m = String(d.getUTCMonth() + 1).padStart(2, '0')
  const day = String(d.getUTCDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
 }
 export function mondayOf(iso: string): string {
  const d = parseUtc(iso)
  const dayNum = d.getUTCDay() || 7 // dimanche = 7
  d.setUTCDate(d.getUTCDate() - (dayNum - 1))
  return toIso(d)
 }
 export function sundayOf(iso: string): string {
  const d = parseUtc(mondayOf(iso))
  d.setUTCDate(d.getUTCDate() + 6)
  return toIso(d)
 }
 export function toIsoWeek(iso: string): string {
  const d = parseUtc(iso)
  const dayNum = d.getUTCDay() || 7
  d.setUTCDate(d.getUTCDate() + 4 - dayNum) // jeudi de la semaine
  const isoYear = d.getUTCFullYear()
  const yearStart = new Date(Date.UTC(isoYear, 0, 1))
  const week = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
  return `${isoYear}-W${String(week).padStart(2, '0')}`
 }
 export function isoWeekToMonday(week: string): string | null {
  const m = /^(\d{4})-W(\d{2})$/.exec(week)
  if (!m) return null
  const year = Number(m[1])
  const w = Number(m[2])
  if (w < 1 || w > 53) return null
  // Lundi de la semaine 1 = lundi de la semaine contenant le 4 janvier
  const jan4 = new Date(Date.UTC(year, 0, 4))
  const jan4Day = jan4.getUTCDay() || 7
  const monday = new Date(jan4)
  monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (w - 1) * 7)
  const iso = toIso(monday)
  // Garde-fou : la semaine 53 n'existe pas pour toutes les années
  if (toIsoWeek(iso) !== week) return null
  return iso
 }
 export function isValidIsoWeek(week: string): boolean {
  return isoWeekToMonday(week) !== null
 }
 export function formatWeekDisplay(week: string): string {
  const monday = isoWeekToMonday(week)
  if (!monday) return ''
  const sunday = sundayOf(monday)
  const w = Number(week.slice(6))
  const startDdMm = formatIsoToDisplay(monday).slice(0, 5) // "18/05"
  const endFull = formatIsoToDisplay(sunday) // "24/05/2026"
  return `Semaine ${w} (${startDdMm} → ${endFull})`
 }
@@ -1,61 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {
  composeDateTime,
  formatIsoDateTimeToDisplay,
  isValidIsoDateTime,
  splitDateTime,
 } from './datetimeFormat'
 describe('datetimeFormat', () => {
  describe('isValidIsoDateTime', () => {
    it('accepte un datetime ISO complet valide', () => {
      expect(isValidIsoDateTime('2026-05-20T14:30:00')).toBe(true)
      expect(isValidIsoDateTime('2026-01-01T00:00:00')).toBe(true)
      expect(isValidIsoDateTime('2026-12-31T23:59:59')).toBe(true)
    })
    it('rejette une date seule, des composants invalides ou une chaîne vide', () => {
      expect(isValidIsoDateTime('2026-05-20')).toBe(false)
      expect(isValidIsoDateTime('2026-13-01T00:00:00')).toBe(false)
      expect(isValidIsoDateTime('2026-05-20T24:00:00')).toBe(false)
      expect(isValidIsoDateTime('2026-05-20T14:60:00')).toBe(false)
      expect(isValidIsoDateTime('2026-05-20T14:30:60')).toBe(false)
      expect(isValidIsoDateTime('2026-05-20T14:30')).toBe(false)
      expect(isValidIsoDateTime('')).toBe(false)
    })
  })
  describe('formatIsoDateTimeToDisplay', () => {
    it('formate un datetime valide en JJ/MM/AAAA HH:MM', () => {
      expect(formatIsoDateTimeToDisplay('2026-05-20T14:30:00')).toBe('20/05/2026 14:30')
    })
    it('renvoie une chaîne vide pour nul ou invalide', () => {
      expect(formatIsoDateTimeToDisplay(null)).toBe('')
      expect(formatIsoDateTimeToDisplay('2026-05-20')).toBe('')
      expect(formatIsoDateTimeToDisplay('nope')).toBe('')
    })
  })
  describe('splitDateTime', () => {
    it('découpe un datetime valide', () => {
      expect(splitDateTime('2026-05-20T14:30:00')).toEqual({date: '2026-05-20', time: '14:30'})
    })
    it('renvoie date null et time vide pour nul, date seule ou invalide', () => {
      expect(splitDateTime(null)).toEqual({date: null, time: ''})
      expect(splitDateTime('2026-05-20')).toEqual({date: null, time: ''})
      expect(splitDateTime('nope')).toEqual({date: null, time: ''})
    })
  })
  describe('composeDateTime', () => {
    it('recompose un datetime ISO avec secondes à 00', () => {
      expect(composeDateTime('2026-05-20', '14:30')).toBe('2026-05-20T14:30:00')
    })
    it('utilise 00:00 quand l\'heure est vide', () => {
      expect(composeDateTime('2026-05-20', '')).toBe('2026-05-20T00:00:00')
    })
  })
 })
@@ -1,33 +0,0 @@
 import {isValidIso} from './dateFormat'
 const DATETIME_RE = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2}):(\d{2})$/
 export function isValidIsoDateTime(s: string): boolean {
  const m = DATETIME_RE.exec(s)
  if (!m) return false
  const [, date, hh, mm, ss] = m
  if (!isValidIso(date)) return false
  const h = Number(hh)
  const min = Number(mm)
  const sec = Number(ss)
  return h >= 0 && h <= 23 && min >= 0 && min <= 59 && sec >= 0 && sec <= 59
 }
 export function formatIsoDateTimeToDisplay(s: string | null): string {
  if (!s || !isValidIsoDateTime(s)) return ''
  const [date, time] = s.split('T')
  const [y, mo, d] = date.split('-')
  const [hh, mm] = time.split(':')
  return `${d}/${mo}/${y} ${hh}:${mm}`
 }
 export function splitDateTime(s: string | null): {date: string | null; time: string} {
  if (!s || !isValidIsoDateTime(s)) return {date: null, time: ''}
  const [date, time] = s.split('T')
  return {date, time: time.slice(0, 5)}
 }
 export function composeDateTime(date: string, time: string): string {
  const t = time || '00:00'
  return `${date}T${t}:00`
 }
@@ -1,64 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {defineComponent, h, ref} from 'vue'
 import {mount} from '@vue/test-utils'
 import {useCalendarPopover} from './useCalendarPopover'
 const mountHost = () => {
  const api: ReturnType<typeof useCalendarPopover> = {} as never
  const Host = defineComponent({
    setup() {
      const root = ref<HTMLElement | null>(null)
      Object.assign(api, useCalendarPopover(root))
      return () => h('div', {ref: root}, 'host')
    },
  })
  const wrapper = mount(Host, {attachTo: document.body})
  return {wrapper, api}
 }
 describe('useCalendarPopover', () => {
  it('starts closed in days view', () => {
    const {api} = mountHost()
    expect(api.isOpen.value).toBe(false)
    expect(api.viewMode.value).toBe('days')
  })
  it('open() opens in days view', () => {
    const {api} = mountHost()
    api.open()
    expect(api.isOpen.value).toBe(true)
    expect(api.viewMode.value).toBe('days')
  })
  it('toggleView() switches between days and months', () => {
    const {api} = mountHost()
    api.open()
    api.toggleView()
    expect(api.viewMode.value).toBe('months')
    api.toggleView()
    expect(api.viewMode.value).toBe('days')
  })
  it('close() resets isOpen and viewMode', () => {
    const {api} = mountHost()
    api.open()
    api.toggleView()
    api.close()
    expect(api.isOpen.value).toBe(false)
    expect(api.viewMode.value).toBe('days')
  })
  it('closes on outside mousedown', () => {
    const {api} = mountHost()
    api.open()
    document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
    expect(api.isOpen.value).toBe(false)
  })
  it('stays open on inside mousedown', () => {
    const {wrapper, api} = mountHost()
    api.open()
    wrapper.element.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
    expect(api.isOpen.value).toBe(true)
  })
 })
@@ -1,28 +0,0 @@
 import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
 export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
  const isOpen = ref(false)
  const viewMode = ref<'days' | 'months'>('days')
  const open = () => {
    isOpen.value = true
    viewMode.value = 'days'
  }
  const close = () => {
    isOpen.value = false
    viewMode.value = 'days'
  }
  const toggleView = () => {
    viewMode.value = viewMode.value === 'days' ? 'months' : 'days'
  }
  const onMouseDown = (event: MouseEvent) => {
    if (!isOpen.value || !rootRef.value) return
    if (!rootRef.value.contains(event.target as Node)) close()
  }
  onMounted(() => document.addEventListener('mousedown', onMouseDown))
  onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
  return {isOpen, viewMode, open, close, toggleView}
 }
@@ -1,68 +0,0 @@
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {ref} from 'vue'
 import {useCalendarView} from './useCalendarView'
 describe('useCalendarView', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
  })
  afterEach(() => vi.useRealTimers())
  it('initialises to the current month and year', () => {
    const {currentMonth, currentYear} = useCalendarView(ref('days'))
    expect(currentMonth.value).toBe(4)
    expect(currentYear.value).toBe(2026)
  })
  it('goToNext advances the month in days view', () => {
    const {currentMonth, goToNext} = useCalendarView(ref('days'))
    goToNext()
    expect(currentMonth.value).toBe(5)
  })
  it('rolls December to January and bumps the year', () => {
    const {currentMonth, currentYear, goToNext} = useCalendarView(ref('days'))
    currentMonth.value = 11
    goToNext()
    expect(currentMonth.value).toBe(0)
    expect(currentYear.value).toBe(2027)
  })
  it('rolls January to December backwards', () => {
    const {currentMonth, currentYear, goToPrev} = useCalendarView(ref('days'))
    currentMonth.value = 0
    goToPrev()
    expect(currentMonth.value).toBe(11)
    expect(currentYear.value).toBe(2025)
  })
  it('navigates the year in months view', () => {
    const {currentYear, goToNext, goToPrev} = useCalendarView(ref('months'))
    goToNext()
    expect(currentYear.value).toBe(2027)
    goToPrev()
    expect(currentYear.value).toBe(2026)
  })
  it('selectMonth sets the current month', () => {
    const {currentMonth, selectMonth} = useCalendarView(ref('days'))
    selectMonth(0)
    expect(currentMonth.value).toBe(0)
  })
  it('syncToIso sets month/year from a valid ISO', () => {
    const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
    syncToIso('2025-12-25')
    expect(currentMonth.value).toBe(11)
    expect(currentYear.value).toBe(2025)
  })
  it('syncToIso falls back to today for null/invalid', () => {
    const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
    syncToIso('2025-12-25')
    syncToIso(null)
    expect(currentMonth.value).toBe(4)
    expect(currentYear.value).toBe(2026)
  })
 })
@@ -1,51 +0,0 @@
 import {ref, type Ref} from 'vue'
 import {isValidIso} from './dateFormat'
 export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
  const today = new Date()
  const currentMonth = ref(today.getMonth())
  const currentYear = ref(today.getFullYear())
  const goToPrev = () => {
    if (viewMode.value === 'months') {
      currentYear.value -= 1
      return
    }
    if (currentMonth.value === 0) {
      currentMonth.value = 11
      currentYear.value -= 1
    } else {
      currentMonth.value -= 1
    }
  }
  const goToNext = () => {
    if (viewMode.value === 'months') {
      currentYear.value += 1
      return
    }
    if (currentMonth.value === 11) {
      currentMonth.value = 0
      currentYear.value += 1
    } else {
      currentMonth.value += 1
    }
  }
  const selectMonth = (m: number) => {
    currentMonth.value = m
  }
  const syncToIso = (iso: string | null) => {
    if (iso && isValidIso(iso)) {
      currentMonth.value = Number(iso.slice(5, 7)) - 1
      currentYear.value = Number(iso.slice(0, 4))
    } else {
      const now = new Date()
      currentMonth.value = now.getMonth()
      currentYear.value = now.getFullYear()
    }
  }
  return {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso}
 }
@@ -1,69 +0,0 @@
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {ref} from 'vue'
 import {useMonthMatrix} from './useMonthMatrix'
 describe('useMonthMatrix', () => {
  it('always produces 6 weeks of 7 days', () => {
    const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai 2026
    expect(weeks.value).toHaveLength(6)
    weeks.value.forEach(week => expect(week.days).toHaveLength(7))
  })
  it('starts every week on a Monday', () => {
    const {weeks} = useMonthMatrix(ref(4), ref(2026))
    weeks.value.forEach(week => {
      const first = new Date(`${week.days[0].isoDate}T00:00:00`)
      expect(first.getDay()).toBe(1) // 1 = lundi
    })
  })
  it('flags exactly the days of the current month', () => {
    const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai = 31 jours
    const currentMonthDays = weeks.value
      .flatMap(w => w.days)
      .filter(d => d.isCurrentMonth)
    expect(currentMonthDays).toHaveLength(31)
    expect(currentMonthDays.every(d => d.isoDate.startsWith('2026-05'))).toBe(true)
  })
  it('handles leap year February (29 days)', () => {
    const {weeks} = useMonthMatrix(ref(1), ref(2024)) // février 2024
    const days = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth)
    expect(days).toHaveLength(29)
  })
  it('assigns ISO week 1 to the week containing Jan 4th', () => {
    const {weeks} = useMonthMatrix(ref(0), ref(2026)) // janvier 2026
    const weekWithJan4 = weeks.value.find(w =>
      w.days.some(d => d.isoDate === '2026-01-04'),
    )
    expect(weekWithJan4?.weekNumber).toBe(1)
  })
  it('reacts to month/year changes', () => {
    const month = ref(4)
    const year = ref(2026)
    const {weeks} = useMonthMatrix(month, year)
    const mayCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
    month.value = 1 // février
    year.value = 2024
    const febCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
    expect(mayCount).toBe(31)
    expect(febCount).toBe(29)
  })
  describe('isToday', () => {
    beforeEach(() => {
      vi.useFakeTimers()
      vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
    })
    afterEach(() => vi.useRealTimers())
    it('flags only today', () => {
      const {weeks} = useMonthMatrix(ref(4), ref(2026))
      const todays = weeks.value.flatMap(w => w.days).filter(d => d.isToday)
      expect(todays).toHaveLength(1)
      expect(todays[0].isoDate).toBe('2026-05-19')
    })
  })
 })
@@ -1,60 +0,0 @@
 import {computed, type ComputedRef, type Ref} from 'vue'
 export type DayCell = {
  isoDate: string
  day: number
  isCurrentMonth: boolean
  isToday: boolean
 }
 export type WeekRow = {
  weekNumber: number
  days: DayCell[]
 }
 const toIso = (d: Date): string => {
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
 }
 const isoWeek = (d: Date): number => {
  const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
  const dayNum = target.getUTCDay() || 7 // dimanche = 7
  target.setUTCDate(target.getUTCDate() + 4 - dayNum) // jeudi de la semaine
  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
  return Math.ceil((((target.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
 }
 export function useMonthMatrix(
  month: Ref<number>,
  year: Ref<number>,
 ): {weeks: ComputedRef<WeekRow[]>} {
  const weeks = computed<WeekRow[]>(() => {
    const todayIso = toIso(new Date())
    const first = new Date(year.value, month.value, 1)
    // recule jusqu'au lundi (getDay : 0 = dimanche)
    const offset = (first.getDay() + 6) % 7
    const start = new Date(year.value, month.value, 1 - offset)
    const rows: WeekRow[] = []
    const cursor = new Date(start)
    for (let w = 0; w < 6; w++) {
      const days: DayCell[] = []
      for (let i = 0; i < 7; i++) {
        const iso = toIso(cursor)
        days.push({
          isoDate: iso,
          day: cursor.getDate(),
          isCurrentMonth: cursor.getMonth() === month.value,
          isToday: iso === todayIso,
        })
        cursor.setDate(cursor.getDate() + 1)
      }
      rows.push({weekNumber: isoWeek(new Date(`${days[0].isoDate}T00:00:00`)), days})
    }
    return rows
  })
  return {weeks}
 }
@@ -1,239 +0,0 @@
 <template>
  <div>
    <div
      ref="root"
      :class="mergedGroupClass"
    >
      <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"
      >
      <label
        v-if="label"
        :for="inputId"
        :class="mergedLabelClass"
      >
        {{ label }}
      </label>
      <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
        <button
          v-if="showClear"
          type="button"
          data-test="clear"
          class="text-m-muted hover:text-m-primary"
          aria-label="Effacer la date"
          @click.stop="emit('clear')"
        >
          <Icon
            icon="mdi:close"
            :width="16"
            :height="16"
          />
        </button>
        <Icon
          data-test="calendar-icon"
          icon="mdi:calendar-blank"
          :width="24"
          :height="24"
          :class="iconStateClass"
        />
      </div>
      <div
        v-if="isOpen"
        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)]"
      >
        <CalendarHeader
          :view-mode="viewMode"
          :current-month="currentMonth"
          :current-year="currentYear"
          @prev="goToPrev"
          @next="goToNext"
          @toggle-view="toggleView"
        />
        <slot
          v-if="viewMode === 'days'"
          :current-month="currentMonth"
          :current-year="currentYear"
          :close="closePopover"
        />
        <MonthPicker
          v-else
          :selected-month="currentMonth"
          @select="onSelectMonth"
        />
      </div>
    </div>
    <p
      v-if="hint || hasError || hasSuccess"
      :id="`${inputId}-describedby`"
      :class="[
        hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
        'mt-1 ml-[2px] text-xs',
      ]"
    >
      {{ error || success || hint }}
    </p>
  </div>
 </template>
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId, watch} from 'vue'
 import {Icon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import CalendarHeader from './CalendarHeader.vue'
 import MonthPicker from './MonthPicker.vue'
 import {useCalendarPopover} from '../composables/useCalendarPopover'
 import {useCalendarView} from '../composables/useCalendarView'
 defineOptions({name: 'MalioCalendarField', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    displayValue: string
    syncTo: string | null
    id?: string
    name?: string
    label?: string
    placeholder?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    clearable?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
  }>(),
  {
    id: '',
    name: '',
    label: '',
    placeholder: 'JJ/MM/AAAA',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    clearable: true,
    inputClass: '',
    labelClass: '',
    groupClass: '',
  },
 )
 const emit = defineEmits<{(e: 'clear' | 'close'): void}>()
 const attrs = useAttrs()
 const generatedId = useId()
 const root = ref<HTMLElement | null>(null)
 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 showClear = computed(() =>
  props.clearable && isFilled.value && !props.disabled && !props.readonly,
 )
 const describedBy = computed(() =>
  (props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
 )
 watch(isOpen, (value) => {
  if (!value) emit('close')
 })
 const onFieldClick = () => {
  if (props.disabled || props.readonly) return
  if (isOpen.value) {
    closePopover()
    return
  }
  syncToIso(props.syncTo)
  open()
 }
 watch(() => props.syncTo, (value) => {
  if (isOpen.value) syncToIso(value)
 })
 const onSelectMonth = (m: number) => {
  selectMonth(m)
  toggleView()
 }
 const mergedGroupClass = computed(() =>
  twMerge('relative flex h-12 w-full items-center', props.groupClass),
 )
 const mergedInputClass = computed(() =>
  twMerge(
    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
    isFilled.value ? 'border-black' : 'border-m-muted',
    props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : '',
    hasError.value
      ? 'border-m-danger'
      : hasSuccess.value
        ? 'border-m-success'
        : 'focus:border-m-primary',
    isOpen.value ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
    props.inputClass,
  ),
 )
 const mergedLabelClass = computed(() =>
  twMerge(
    'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left font-medium text-sm transition-transform duration-150',
    (isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : isOpen.value
          ? 'text-m-primary'
          : 'peer-placeholder-shown:text-m-muted text-black',
    props.labelClass,
  ),
 )
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (isOpen.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return 'text-m-muted'
 })
 </script>
 <style scoped>
 .floating-label {
  background: white;
  padding: 0 0.25rem;
 }
 </style>
@@ -1,70 +0,0 @@
 <template>
  <div class="flex h-[36px] justify-between border-b border-black/60 mb-3">
    <button
      type="button"
      data-test="header-prev"
      class="ml-2 flex self-start rounded"
      :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
      @click="emit('prev')"
    >
      <Icon
        icon="mdi:chevron-left"
        :width="25"
        :height="25"
      />
    </button>
    <button
      type="button"
      data-test="header-toggle"
      class="flex gap-1 rounded text-base font-medium"
      @click="emit('toggle-view')"
    >
      <span class="mt-[2px]">{{ label }}</span>
      <Icon
        icon="mdi:chevron-down"
        :width="25"
        :height="25"
      />
    </button>
    <button
      type="button"
      data-test="header-next"
      class="mr-2 flex self-start rounded"
      :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
      @click="emit('next')"
    >
      <Icon
        icon="mdi:chevron-right"
        :width="25"
        :height="25"
      />
    </button>
  </div>
 </template>
 <script setup lang="ts">
 import {computed} from 'vue'
 import {Icon} from '@iconify/vue'
 defineOptions({name: 'MalioDateCalendarHeader'})
 const props = defineProps<{
  viewMode: 'days' | 'months'
  currentMonth: number
  currentYear: number
 }>()
 const emit = defineEmits<{
  (e: 'prev' | 'next' | 'toggle-view'): void
 }>()
 const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
 const label = computed(() => {
  const name = monthsLong[props.currentMonth]
  return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
 })
 </script>
@@ -1,178 +0,0 @@
 <template>
  <div
    data-test="month-grid"
    @mouseleave="emit('hover', null)"
  >
    <div class="grid grid-cols-[auto_repeat(7,minmax(0,1fr))]">
      <div class="mr-[12px] flex h-8 w-[35px] items-center justify-center text-[14px] font-medium opacity-[60%]">
        S
      </div>
      <div
        v-for="d in dayLabels"
        :key="d"
        class="flex h-8 items-center justify-center text-[14px] font-medium opacity-[60%]"
      >
        {{ d }}
      </div>
      <template
        v-for="(week, wIndex) in weeks"
        :key="week.days[0].isoDate"
      >
        <component
          :is="interactiveWeekNumber ? 'button' : 'div'"
          data-test="week-number"
          :data-week-start="week.days[0].isoDate"
          :data-marked="markedWeekStart === week.days[0].isoDate"
          :type="interactiveWeekNumber ? 'button' : undefined"
          :disabled="interactiveWeekNumber ? !weekSelectable(week) : undefined"
          class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center p-[10px] text-sm"
          :class="[
            weekNumberClass(week),
            wIndex === 0 ? 'rounded-t-md' : '',
            wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
          ]"
          @click="onWeekNumberClick(week)"
          @mouseenter="onWeekNumberHover(week)"
        >
          {{ week.weekNumber }}
        </component>
        <button
          v-for="cell in week.days"
          :key="cell.isoDate"
          type="button"
          data-test="day"
          :data-iso="cell.isoDate"
          :data-range-role="roleOf(cell)"
          :disabled="!inRange(cell.isoDate)"
          :aria-label="ariaLabel(cell)"
          :aria-disabled="!inRange(cell.isoDate)"
          class="relative flex h-[45px] w-full items-center justify-center"
          :class="inRange(cell.isoDate) ? 'cursor-pointer' : 'cursor-not-allowed'"
          @click="onSelect(cell.isoDate)"
          @mouseenter="emit('hover', cell.isoDate)"
        >
          <span
            v-if="roleOf(cell) === 'in-range'"
            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 bg-m-primary-light"
          />
          <span
            v-else-if="roleOf(cell) === 'start'"
            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-l-full bg-m-primary-light"
          />
          <span
            v-else-if="roleOf(cell) === 'end'"
            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-r-full bg-m-primary-light"
          />
          <span
            class="relative flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors duration-100"
            :class="cellClass(cell)"
          >
            {{ cell.day }}
          </span>
        </button>
      </template>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {computed, toRef} from 'vue'
 import {useMonthMatrix, type DayCell, type WeekRow} from '../composables/useMonthMatrix'
 import {isDateInRange} from '../composables/dateFormat'
 import {dayRangeRole, resolveRangeBounds, type DayRangeRole} from '../composables/dateRange'
 defineOptions({name: 'MalioDateMonthGrid'})
 const props = withDefaults(
  defineProps<{
    month: number
    year: number
    selectedDate?: string | null
    rangeStart?: string | null
    rangeEnd?: string | null
    previewDate?: string | null
    interactiveWeekNumber?: boolean
    markedWeekStart?: string | null
    min?: string
    max?: string
  }>(),
  {
    selectedDate: null,
    rangeStart: undefined,
    rangeEnd: undefined,
    previewDate: undefined,
    interactiveWeekNumber: false,
    markedWeekStart: null,
    min: undefined,
    max: undefined,
  },
 )
 const emit = defineEmits<{
  (e: 'select', iso: string): void
  (e: 'hover', iso: string | null): void
 }>()
 const dayLabels = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
 const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
 const {weeks} = useMonthMatrix(toRef(props, 'month'), toRef(props, 'year'))
 const inRange = (iso: string) => isDateInRange(iso, props.min, props.max)
 const weekSelectable = (week: WeekRow) => week.days.some(d => inRange(d.isoDate))
 const weekNumberClass = (week: WeekRow) => {
  if (props.markedWeekStart === week.days[0].isoDate) return 'bg-m-primary text-white'
  const parts = ['bg-m-primary-light']
  parts.push(week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60')
  if (props.interactiveWeekNumber && weekSelectable(week)) parts.push('cursor-pointer')
  return parts.join(' ')
 }
 const onWeekNumberClick = (week: WeekRow) => {
  if (!props.interactiveWeekNumber || !weekSelectable(week)) return
  emit('select', week.days[0].isoDate)
 }
 const onWeekNumberHover = (week: WeekRow) => {
  if (!props.interactiveWeekNumber || !weekSelectable(week)) return
  emit('hover', week.days[0].isoDate)
 }
 const isRangeMode = computed(() => props.rangeStart !== undefined)
 const bounds = computed(() =>
  isRangeMode.value
    ? resolveRangeBounds(props.rangeStart ?? null, props.rangeEnd ?? null, props.previewDate ?? null)
    : null,
 )
 const roleOf = (cell: DayCell): DayRangeRole => {
  if (isRangeMode.value) return dayRangeRole(cell.isoDate, bounds.value)
  return props.selectedDate === cell.isoDate ? 'single' : 'none'
 }
 const ariaLabel = (cell: DayCell) => {
  const [, m, d] = cell.isoDate.split('-')
  return `${Number(d)} ${monthsLong[Number(m) - 1]} ${cell.isoDate.slice(0, 4)}`
 }
 const cellClass = (cell: DayCell) => {
  if (!inRange(cell.isoDate)) return 'text-m-muted/30'
  const role = roleOf(cell)
  if (role === 'start' || role === 'end' || role === 'single') return 'bg-m-primary text-white'
  if (role === 'in-range') return 'text-black'
  const parts = ['hover:bg-m-primary/10']
  if (cell.isToday) parts.push('border border-m-primary text-m-primary')
  else if (cell.isCurrentMonth) parts.push('text-black')
  else parts.push('opacity-[60%]')
  return parts.join(' ')
 }
 const onSelect = (iso: string) => {
  if (!inRange(iso)) return
  emit('select', iso)
 }
 </script>
@@ -1,36 +0,0 @@
 <template>
  <div
    data-test="month-picker"
    class="grid grid-cols-3 gap-3"
  >
    <button
      v-for="(name, index) in months"
      :key="name"
      type="button"
      data-test="month"
      :data-month="index"
      class="flex h-[45px] w-full items-center justify-center"
      @click="emit('select', index)"
    >
      <span
        class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
        :class="index === selectedMonth
          ? 'bg-m-primary text-white'
          : 'text-black hover:bg-m-primary/10'"
      >
        {{ name }}
      </span>
    </button>
  </div>
 </template>
 <script setup lang="ts">
 defineOptions({name: 'MalioDateMonthPicker'})
 defineProps<{selectedMonth?: number}>()
 const emit = defineEmits<{(e: 'select', month: number): void}>()
 const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
  'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
 </script>
@@ -1,320 +0,0 @@
 import { afterEach, describe, expect, it } from 'vitest'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import type { DefineComponent } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import Modal from './Modal.vue'
 type ModalProps = {
  id?: string
  modelValue?: boolean
  showClose?: boolean
  dismissable?: boolean
  closeOnEscape?: boolean
  ariaLabel?: string
  modalClass?: string
  overlayClass?: string
  headerClass?: string
  bodyClass?: string
  footerClass?: string
 }
 const ModalForTest = Modal as DefineComponent<ModalProps>
 function mountComponent(props: ModalProps = {}, slots?: Record<string, string>) {
  return mount(ModalForTest, {
    props,
    slots,
    global: { stubs: { Teleport: true } },
  })
 }
 describe('MalioModal', () => {
  enableAutoUnmount(afterEach)
  afterEach(() => {
    document.body.style.overflow = ''
  })
  it('does not render when modelValue is false', () => {
    const wrapper = mountComponent({ modelValue: false })
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
  })
  it('renders the panel when modelValue is true', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
  })
  it('centers the modal (items-center justify-center)', () => {
    const wrapper = mountComponent({ modelValue: true })
    const root = wrapper.find('.fixed')
    expect(root.classes()).toContain('items-center')
    expect(root.classes()).toContain('justify-center')
  })
  it('renders default slot in the body', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { default: '<p data-test="content">Contenu</p>' },
    )
    expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
  })
  it('works in uncontrolled mode (defaults closed)', () => {
    const wrapper = mountComponent()
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
  })
  it('uses custom id when provided', () => {
    const wrapper = mountComponent({ modelValue: true, id: 'my-modal' })
    expect(wrapper.find('.fixed').attributes('id')).toBe('my-modal')
  })
  it('generates an id when not provided', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-modal-/)
  })
  it('has role="dialog" and aria-modal on the panel', () => {
    const wrapper = mountComponent({ modelValue: true })
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('role')).toBe('dialog')
    expect(panel.attributes('aria-modal')).toBe('true')
  })
  it('applies modalClass to the panel', () => {
    const wrapper = mountComponent({ modelValue: true, modalClass: 'max-w-2xl' })
    expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
  })
  it('renders the #header slot inside the header bar', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { header: '<h2 data-test="title">Titre</h2>' },
    )
    expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
  })
  it('renders the header bar when showClose is true even without #header', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
  })
  it('does not render the header bar when no #header and showClose is false', () => {
    const wrapper = mountComponent({ modelValue: true, showClose: false })
    expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
  })
  it('shows the close button by default', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
  })
  it('hides the close button when showClose is false', () => {
    const wrapper = mountComponent(
      { modelValue: true, showClose: false },
      { header: '<h2>Titre</h2>' },
    )
    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
  })
  it('close button renders mdi:cancel-bold icon', () => {
    const wrapper = mountComponent({ modelValue: true })
    const icon = wrapper.findComponent(IconifyIcon)
    expect(icon.props('icon')).toBe('mdi:cancel-bold')
  })
  it('close button has aria-label "Fermer"', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
  })
  it('emits update:modelValue false and close on close button click', async () => {
    const wrapper = mountComponent({ modelValue: true })
    await wrapper.find('[data-test="close-button"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
    expect(wrapper.emitted('close')).toHaveLength(1)
  })
  it('sets aria-labelledby to the header id when #header is provided', () => {
    const wrapper = mountComponent(
      { modelValue: true, id: 'test-modal' },
      { header: '<h2>Titre</h2>' },
    )
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-labelledby')).toBe('test-modal-header')
    expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-modal-header')
  })
  it('sets aria-label from ariaLabel when no #header is provided', () => {
    const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Boîte de dialogue' })
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-label')).toBe('Boîte de dialogue')
    expect(panel.attributes('aria-labelledby')).toBeUndefined()
  })
  it('applies headerClass to the header bar', () => {
    const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
    expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
  })
  it('renders the #footer slot in a footer pinned below the body', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { footer: '<button data-test="save">Enregistrer</button>' },
    )
    expect(wrapper.find('[data-test="body"] [data-test="footer"]').exists()).toBe(false)
    expect(wrapper.find('[data-test="footer"] [data-test="save"]').exists()).toBe(true)
  })
  it('does not render the footer when no #footer slot', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
  })
  it('applies bodyClass to the body', () => {
    const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
    expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
  })
  it('applies footerClass to the footer', () => {
    const wrapper = mountComponent(
      { modelValue: true, footerClass: 'justify-end' },
      { footer: '<span>pied</span>' },
    )
    expect(wrapper.find('[data-test="footer"]').classes()).toContain('justify-end')
  })
  it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
    const wrapper = mountComponent({ modelValue: true })
    await wrapper.find('[data-test="backdrop"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
    expect(wrapper.emitted('close')).toHaveLength(1)
  })
  it('does not close on backdrop click when dismissable is false', async () => {
    const wrapper = mountComponent({ modelValue: true, dismissable: false })
    await wrapper.find('[data-test="backdrop"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
  })
  it('applies overlayClass to the backdrop', () => {
    const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
    expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
  })
  it('closes on Escape key when closeOnEscape is true', async () => {
    const wrapper = mountComponent({ modelValue: true })
    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
    expect(wrapper.emitted('close')).toHaveLength(1)
  })
  it('does not close on Escape when closeOnEscape is false', async () => {
    const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
  })
  it('locks body scroll when opened and restores it when closed', async () => {
    const wrapper = mountComponent({ modelValue: false })
    expect(document.body.style.overflow).toBe('')
    await wrapper.setProps({ modelValue: true })
    expect(document.body.style.overflow).toBe('hidden')
    await wrapper.setProps({ modelValue: false })
    expect(document.body.style.overflow).toBe('')
  })
  it('moves focus into the panel when opened', async () => {
    const wrapper = mount(ModalForTest, {
      props: { modelValue: false, showClose: false },
      slots: { default: '<button data-test="first">OK</button>' },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.setProps({ modelValue: true })
    await wrapper.vm.$nextTick()
    const first = wrapper.find('[data-test="first"]').element
    expect(document.activeElement).toBe(first)
    wrapper.unmount()
  })
  it('restores focus to the trigger when closed', async () => {
    const trigger = document.createElement('button')
    document.body.appendChild(trigger)
    trigger.focus()
    expect(document.activeElement).toBe(trigger)
    const wrapper = mount(ModalForTest, {
      props: { modelValue: false },
      slots: { default: '<button>OK</button>' },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.setProps({ modelValue: true })
    await wrapper.vm.$nextTick()
    await wrapper.setProps({ modelValue: false })
    await wrapper.vm.$nextTick()
    expect(document.activeElement).toBe(trigger)
    wrapper.unmount()
    trigger.remove()
  })
  it('wraps focus to the first element when Tab is pressed on the last element', async () => {
    const wrapper = mount(ModalForTest, {
      props: { modelValue: true, showClose: false },
      slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.vm.$nextTick()
    const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
    last.focus()
    expect(document.activeElement).toBe(last)
    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
    expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
    wrapper.unmount()
  })
  it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
    const wrapper = mount(ModalForTest, {
      props: { modelValue: true, showClose: false },
      slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.vm.$nextTick()
    const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
    first.focus()
    expect(document.activeElement).toBe(first)
    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
    expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
    wrapper.unmount()
  })
  it('does not release body scroll-lock when one stacked modal closes while another is still open', async () => {
    const wrapperA = mount(ModalForTest, {
      props: { modelValue: false },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    const wrapperB = mount(ModalForTest, {
      props: { modelValue: false },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapperA.setProps({ modelValue: true })
    expect(document.body.style.overflow).toBe('hidden')
    await wrapperB.setProps({ modelValue: true })
    expect(document.body.style.overflow).toBe('hidden')
    await wrapperB.setProps({ modelValue: false })
    expect(document.body.style.overflow).toBe('hidden')
    await wrapperA.setProps({ modelValue: false })
    expect(document.body.style.overflow).toBe('')
  })
 })
@@ -1,279 +0,0 @@
 <template>
  <Teleport to="body">
    <Transition
      name="modal"
      appear
      @after-leave="isRendered = false"
    >
      <div
        v-if="isRendered && isOpen"
        :id="componentId"
        class="fixed inset-0 z-50 flex items-center justify-center p-4"
        v-bind="attrs"
      >
        <div
          :class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
          data-test="backdrop"
          @click="onBackdropClick"
        />
        <div
          ref="panelRef"
          :class="twMerge(
            'relative z-50 flex max-h-[85vh] w-full max-w-md flex-col rounded-malio bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]',
            modalClass,
          )"
          role="dialog"
          aria-modal="true"
          :aria-labelledby="hasHeader ? headerId : undefined"
          :aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
          tabindex="-1"
          data-test="panel"
          @keydown="onKeydown"
        >
          <div
            v-if="hasHeader || showClose"
            :class="twMerge('flex shrink-0 items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
            data-test="header"
          >
            <div
              :id="headerId"
              class="min-w-0 flex-1"
              data-test="header-content"
            >
              <slot name="header" />
            </div>
            <button
              v-if="showClose"
              type="button"
              aria-label="Fermer"
              class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
              data-test="close-button"
              @click="close"
            >
              <IconifyIcon
                icon="mdi:cancel-bold"
                :width="16"
                :height="16"
              />
            </button>
          </div>
          <div
            :class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
            data-test="body"
          >
            <slot />
          </div>
          <div
            v-if="$slots.footer"
            :class="twMerge('flex shrink-0 items-center gap-3 px-5 py-4', footerClass)"
            data-test="footer"
          >
            <slot name="footer" />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
 </template>
 <script setup lang="ts">
 import {
  computed,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  useAttrs,
  useId,
  useSlots,
  watch,
 } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { twMerge } from 'tailwind-merge'
 defineOptions({ name: 'MalioModal', inheritAttrs: false })
 const props = withDefaults(
  defineProps<{
    id?: string
    modelValue?: boolean
    showClose?: boolean
    dismissable?: boolean
    closeOnEscape?: boolean
    ariaLabel?: string
    modalClass?: string
    overlayClass?: string
    headerClass?: string
    bodyClass?: string
    footerClass?: string
  }>(),
  {
    id: '',
    modelValue: undefined,
    showClose: true,
    dismissable: true,
    closeOnEscape: true,
    ariaLabel: '',
    modalClass: '',
    overlayClass: '',
    headerClass: '',
    bodyClass: '',
    footerClass: '',
  },
 )
 const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
 }>()
 const attrs = useAttrs()
 const generatedId = useId()
 const componentId = computed(() => props.id || `malio-modal-${generatedId}`)
 const slots = useSlots()
 const headerId = computed(() => `${componentId.value}-header`)
 const hasHeader = computed(() => !!slots.header)
 const isControlled = computed(() => props.modelValue !== undefined)
 const localValue = ref(false)
 const isOpen = computed(() =>
  isControlled.value ? props.modelValue! : localValue.value,
 )
 const isRendered = ref(isOpen.value)
 const panelRef = ref<HTMLElement | null>(null)
 let previouslyFocused: HTMLElement | null = null
 // Per-instance flag: true while this modal holds a scroll-lock count slot.
 let lockedByThisInstance = false
 function getFocusable(container: HTMLElement): HTMLElement[] {
  return Array.from(
    container.querySelectorAll<HTMLElement>(
      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
    ),
  ).filter((el) => el.tabIndex !== -1)
 }
 function onOpen() {
  previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
  if (!lockedByThisInstance) {
    lockedByThisInstance = true
    openModalCount++
    if (openModalCount === 1) {
      document.body.style.overflow = 'hidden'
    }
  }
  nextTick(() => {
    const panel = panelRef.value
    if (!panel) return
    const focusable = getFocusable(panel)
    ;(focusable[0] ?? panel).focus()
  })
 }
 function onClose() {
  if (lockedByThisInstance) {
    lockedByThisInstance = false
    openModalCount = Math.max(0, openModalCount - 1)
    if (openModalCount === 0) {
      document.body.style.overflow = ''
    }
  }
  previouslyFocused?.focus?.()
  previouslyFocused = null
 }
 watch(isOpen, (val) => {
  if (val) {
    isRendered.value = true
    onOpen()
  }
  else {
    onClose()
  }
 })
 onMounted(() => {
  if (isOpen.value) onOpen()
 })
 onBeforeUnmount(() => {
  // If this instance is still holding a scroll-lock slot, release it.
  if (lockedByThisInstance) {
    lockedByThisInstance = false
    openModalCount = Math.max(0, openModalCount - 1)
    if (openModalCount === 0) {
      document.body.style.overflow = ''
    }
  }
 })
 function onBackdropClick() {
  if (props.dismissable) close()
 }
 function onKeydown(e: KeyboardEvent) {
  if (e.key === 'Escape' && props.closeOnEscape) {
    e.stopPropagation()
    close()
    return
  }
  if (e.key !== 'Tab') return
  const panel = panelRef.value
  if (!panel) return
  const focusable = getFocusable(panel)
  if (focusable.length === 0) {
    e.preventDefault()
    panel.focus()
    return
  }
  const first = focusable[0]!
  const last = focusable[focusable.length - 1]!
  if (e.shiftKey && document.activeElement === first) {
    e.preventDefault()
    last.focus()
  }
  else if (!e.shiftKey && document.activeElement === last) {
    e.preventDefault()
    first.focus()
  }
 }
 function close() {
  if (!isControlled.value) localValue.value = false
  emit('update:modelValue', false)
  emit('close')
 }
 </script>
 <script lang="ts">
 // Shared across all MalioModal instances: only the last open modal releases the body scroll-lock.
 let openModalCount = 0
 </script>
 <style scoped>
 .modal-enter-active,
 .modal-leave-active {
  transition: opacity 0.2s ease;
 }
 .modal-enter-active > div:last-child,
 .modal-leave-active > div:last-child {
  transition: transform 0.2s ease;
 }
 .modal-enter-from,
 .modal-leave-to {
  opacity: 0;
 }
 .modal-enter-from > div:last-child,
 .modal-leave-to > div:last-child {
  transform: scale(0.95);
 }
 </style>
@@ -1,76 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import TimePicker from './TimePicker.vue'
 type TimePickerProps = {
  id?: string
  name?: string
  label?: string
  modelValue?: string | null
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  clearable?: boolean
  inputClass?: string
  labelClass?: string
  groupClass?: string
 }
 const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
 const mountPicker = (props: TimePickerProps = {}) =>
  mount(TimePickerForTest, {props, attachTo: document.body})
 describe('MalioTimePicker', () => {
  it('affiche le label et l\'icône horloge', () => {
    const wrapper = mountPicker({label: 'Heure'})
    expect(wrapper.get('label').text()).toBe('Heure')
    expect(wrapper.find('[data-test="clock-icon"]').exists()).toBe(true)
  })
  it('affiche la valeur HH:MM dans le champ', () => {
    const wrapper = mountPicker({modelValue: '14:30'})
    const input = wrapper.get('[data-test="time-field"]').element as HTMLInputElement
    expect(input.value).toBe('14:30')
  })
  it('ouvre le popover à molettes au clic', async () => {
    const wrapper = mountPicker()
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    await wrapper.get('[data-test="time-field"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="time-wheels"]').exists()).toBe(true)
  })
  it('n\'ouvre pas le popover si disabled', async () => {
    const wrapper = mountPicker({disabled: true})
    await wrapper.get('[data-test="time-field"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('émet la valeur réglée depuis les molettes', async () => {
    const wrapper = mountPicker({modelValue: '09:30'})
    await wrapper.get('[data-test="time-field"]').trigger('click')
    wrapper.findComponent({name: 'MalioTimeWheels'}).vm.$emit('update:modelValue', '10:30')
    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['10:30'])
  })
  it('émet null au clic sur la croix', async () => {
    const wrapper = mountPicker({modelValue: '14:30'})
    await wrapper.get('[data-test="clear"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
  })
  it('positionne aria-invalid et describedby sur erreur', () => {
    const wrapper = mountPicker({error: 'Heure requise'})
    const input = wrapper.get('[data-test="time-field"]')
    expect(input.attributes('aria-invalid')).toBe('true')
    expect(input.attributes('aria-describedby')).toBeTruthy()
    expect(wrapper.text()).toContain('Heure requise')
  })
 })
@@ -1,236 +0,0 @@
 <template>
  <div ref="root">
    <div :class="mergedGroupClass">
      <input
        :id="inputId"
        :name="name"
        data-test="time-field"
        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"
      >
      <label
        v-if="label"
        :for="inputId"
        :class="mergedLabelClass"
      >
        {{ label }}
      </label>
      <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
        <button
          v-if="showClear"
          type="button"
          data-test="clear"
          class="text-m-muted hover:text-m-primary"
          aria-label="Effacer l'heure"
          @click.stop="onClear"
        >
          <Icon icon="mdi:close" :width="16" :height="16" />
        </button>
        <Icon
          data-test="clock-icon"
          icon="mdi:clock-outline"
          :width="24"
          :height="24"
          :class="iconStateClass"
        />
      </div>
      <!-- Mode overlay (par défaut) : popover absolu au-dessus du contenu suivant. -->
      <div
        v-if="isOpen && !staticPopover"
        data-test="popover"
        role="dialog"
        class="absolute left-0 right-0 top-full z-20 box-border w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
      >
        <TimeWheels
          :model-value="wheelsValue"
          @update:model-value="onWheelChange"
        />
      </div>
    </div>
    <!-- Mode statique : molette en flux (hors du groupe à hauteur fixe) → le
         conteneur parent (ex. popover du DateTime) grandit pour l'englober. -->
    <div
      v-if="isOpen && staticPopover"
      data-test="popover"
      role="dialog"
      class="relative mt-4 w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
    >
      <TimeWheels
        :model-value="wheelsValue"
        @update:model-value="onWheelChange"
      />
    </div>
    <p
      v-if="hint || hasError || hasSuccess"
      :id="`${inputId}-describedby`"
      :class="[
        hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
        'mt-1 ml-[2px] text-xs',
      ]"
    >
      {{ error || success || hint }}
    </p>
  </div>
 </template>
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId} from 'vue'
 import {Icon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import TimeWheels from './internal/TimeWheels.vue'
 defineOptions({name: 'MalioTimePicker', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    name?: string
    label?: string
    modelValue?: string | null
    placeholder?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    clearable?: boolean
    staticPopover?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
  }>(),
  {
    id: '',
    name: '',
    label: '',
    modelValue: undefined,
    placeholder: 'HH:MM',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    clearable: true,
    staticPopover: false,
    inputClass: '',
    labelClass: '',
    groupClass: '',
  },
 )
 const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
 const attrs = useAttrs()
 const generatedId = useId()
 const root = ref<HTMLElement | null>(null)
 const isOpen = ref(false)
 const localValue = ref<string | null>(null)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? props.modelValue : localValue.value))
 const inputId = computed(() => props.id?.toString() || `malio-time-picker-${generatedId}`)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const displayValue = computed(() => currentValue.value ?? '')
 const isFilled = computed(() => displayValue.value.length > 0)
 const wheelsValue = computed(() => currentValue.value || '00:00')
 const showClear = computed(() =>
  props.clearable && isFilled.value && !props.disabled && !props.readonly,
 )
 const describedBy = computed(() =>
  (props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
 )
 const commit = (value: string | null) => {
  if (!isControlled.value) localValue.value = value
  emit('update:modelValue', value)
 }
 const onWheelChange = (value: string) => commit(value)
 const onClear = () => {
  commit(null)
 }
 const onFieldClick = () => {
  if (props.disabled || props.readonly) return
  isOpen.value = !isOpen.value
 }
 const onMouseDown = (event: MouseEvent) => {
  if (!isOpen.value || !root.value) return
  if (!root.value.contains(event.target as Node)) isOpen.value = false
 }
 onMounted(() => document.addEventListener('mousedown', onMouseDown))
 onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
 const mergedGroupClass = computed(() =>
  twMerge('relative flex h-12 w-full items-center', props.groupClass),
 )
 const mergedInputClass = computed(() =>
  twMerge(
    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
    isFilled.value ? 'border-black' : 'border-m-muted',
    props.disabled ? 'cursor-not-allowed border-m-muted text-black/60' : '',
    hasError.value
      ? 'border-m-danger'
      : hasSuccess.value
        ? 'border-m-success'
        : 'focus:border-m-primary',
    isOpen.value ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
    props.inputClass,
  ),
 )
 const mergedLabelClass = computed(() =>
  twMerge(
    'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left text-sm font-medium transition-transform duration-150',
    (isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : isOpen.value
          ? 'text-m-primary'
          : 'text-black peer-placeholder-shown:text-m-muted',
    props.labelClass,
  ),
 )
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (isOpen.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return 'text-m-muted'
 })
 </script>
 <style scoped>
 .floating-label {
  background: white;
  padding: 0 0.25rem;
 }
 </style>
@@ -1,31 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {clampHours, clampMinutes, formatTime, padSegment, parseTime} from './timeFormat'
 describe('timeFormat', () => {
  it('parse une chaîne HH:MM valide', () => {
    expect(parseTime('09:05')).toEqual({hours: 9, minutes: 5})
  })
  it('renvoie null pour vide ou invalide', () => {
    expect(parseTime('')).toBeNull()
    expect(parseTime(null)).toBeNull()
    expect(parseTime('abc')).toBeNull()
    expect(parseTime('12')).toBeNull()
  })
  it('clamp les valeurs hors bornes au parsing', () => {
    expect(parseTime('99:88')).toEqual({hours: 23, minutes: 59})
  })
  it('formate avec zéro-padding', () => {
    expect(formatTime(9, 5)).toBe('09:05')
    expect(formatTime(0, 0)).toBe('00:00')
  })
  it('clamp et pad les helpers', () => {
    expect(clampHours(30)).toBe(23)
    expect(clampHours(-2)).toBe(0)
    expect(clampMinutes(75)).toBe(59)
    expect(padSegment(7)).toBe('07')
  })
 })
@@ -1,32 +0,0 @@
 export interface TimeParts {
  hours: number
  minutes: number
 }
 export function clampHours(value: number): number {
  if (Number.isNaN(value)) return 0
  return Math.min(23, Math.max(0, Math.trunc(value)))
 }
 export function clampMinutes(value: number): number {
  if (Number.isNaN(value)) return 0
  return Math.min(59, Math.max(0, Math.trunc(value)))
 }
 export function padSegment(value: number): string {
  return value.toString().padStart(2, '0')
 }
 export function parseTime(value: string | null | undefined): TimeParts | null {
  if (!value) return null
  const match = /^(\d{1,2}):(\d{1,2})$/.exec(value.trim())
  if (!match) return null
  return {
    hours: clampHours(Number.parseInt(match[1], 10)),
    minutes: clampMinutes(Number.parseInt(match[2], 10)),
  }
 }
 export function formatTime(hours: number, minutes: number): string {
  return `${padSegment(clampHours(hours))}:${padSegment(clampMinutes(minutes))}`
 }
@@ -1,120 +0,0 @@
 import {describe, expect, it, vi} from 'vitest'
 import {defineComponent, nextTick, ref} from 'vue'
 import {mount} from '@vue/test-utils'
 import {
  CENTER_OFFSET,
  VISIBLE_ROWS,
  loopCorrection,
  scrollTopForValueIndex,
  useInfiniteWheel,
  valueIndexFromScroll,
 } from './useInfiniteWheel'
 const H = 40 // itemHeight
 const LEN = 24 // ex. heures
 describe('useInfiniteWheel — math pure', () => {
  it('expose 5 lignes visibles et un offset central de 2', () => {
    expect(VISIBLE_ROWS).toBe(5)
    expect(CENTER_OFFSET).toBe(2)
  })
  it('scrollTopForValueIndex et valueIndexFromScroll font un aller-retour', () => {
    for (const index of [0, 1, 9, 23]) {
      const top = scrollTopForValueIndex(index, H, LEN)
      expect(valueIndexFromScroll(top, H, LEN)).toBe(index)
    }
  })
  it('valueIndexFromScroll boucle en modulo', () => {
    const top = scrollTopForValueIndex(0, H, LEN)
    expect(valueIndexFromScroll(top + LEN * H, H, LEN)).toBe(0)
  })
  it('loopCorrection laisse le scroll de la copie du milieu inchangé', () => {
    const top = scrollTopForValueIndex(12, H, LEN)
    expect(loopCorrection(top, H, LEN)).toBe(top)
  })
  it('loopCorrection ramène vers le milieu quand on dérive vers le haut', () => {
    const drifted = scrollTopForValueIndex(0, H, LEN) - LEN * H
    expect(loopCorrection(drifted, H, LEN)).toBe(drifted + LEN * H)
  })
  it('loopCorrection ramène vers le milieu quand on dérive vers le bas', () => {
    const drifted = scrollTopForValueIndex(0, H, LEN) + LEN * H
    expect(loopCorrection(drifted, H, LEN)).toBe(drifted - LEN * H)
  })
 })
 function mountWheelHarness(initialIndex: number, onChange: (i: number) => void) {
  let api!: ReturnType<typeof useInfiniteWheel>
  const Harness = defineComponent({
    setup() {
      const container = ref<HTMLElement | null>(null)
      api = useInfiniteWheel(container, {
        length: 24,
        itemHeight: 40,
        initialIndex: () => initialIndex,
        onChange,
      })
      return {container}
    },
    template: '<div ref="container" style="height:200px;overflow:auto"><div style="height:2880px" /></div>',
  })
  const wrapper = mount(Harness, {attachTo: document.body})
  return {wrapper, api: () => api}
 }
 describe('useInfiniteWheel — composable', () => {
  it('step(+1) émet l\'index suivant', async () => {
    const changes: number[] = []
    const {api} = mountWheelHarness(9, (i) => changes.push(i))
    await nextTick()
    api().step(1)
    expect(changes.at(-1)).toBe(10)
  })
  it('step boucle de 23 à 0', async () => {
    const changes: number[] = []
    const {api} = mountWheelHarness(23, (i) => changes.push(i))
    await nextTick()
    api().step(1)
    expect(changes.at(-1)).toBe(0)
  })
  it('onKeydown ArrowUp décrémente (avec wrap)', async () => {
    const changes: number[] = []
    const {api} = mountWheelHarness(0, (i) => changes.push(i))
    await nextTick()
    api().onKeydown(new KeyboardEvent('keydown', {key: 'ArrowUp'}))
    expect(changes.at(-1)).toBe(23)
  })
  // Anti-boucle navigateur : un scroll programmatique déclenche une rafale d'évènements
  // scroll (animation/snap). Ils ne doivent PAS être pris pour du scroll utilisateur,
  // sinon settle() ré-émet en boucle et corrompt le patch DOM de Vue.
  it('n\'émet pas en double quand un scroll programmatique déclenche une rafale de scroll', async () => {
    vi.useFakeTimers()
    try {
      const changes: number[] = []
      const {wrapper, api} = mountWheelHarness(9, (i) => changes.push(i))
      await nextTick()
      const el = wrapper.element as HTMLElement
      changes.length = 0
      api().scrollToIndex(12)
      el.dispatchEvent(new Event('scroll'))
      el.dispatchEvent(new Event('scroll'))
      el.dispatchEvent(new Event('scroll'))
      vi.advanceTimersByTime(300)
      expect(changes).toEqual([12])
    }
    finally {
      vi.useRealTimers()
    }
  })
 })
@@ -1,117 +0,0 @@
 import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
 export const VISIBLE_ROWS = 5
 export const CENTER_OFFSET = (VISIBLE_ROWS - 1) / 2 // 2
 /** Index de valeur logique (0..length-1) centré pour un scrollTop donné. */
 export function valueIndexFromScroll(scrollTop: number, itemHeight: number, length: number): number {
  const flat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
  return ((flat % length) + length) % length
 }
 /** scrollTop qui centre l'index donné dans la copie du milieu (buffer à 3 copies). */
 export function scrollTopForValueIndex(valueIndex: number, itemHeight: number, length: number): number {
  const flat = length + valueIndex - CENTER_OFFSET
  return flat * itemHeight
 }
 /** Recentre le scrollTop dans la copie du milieu [length, 2*length) si on a dérivé. */
 export function loopCorrection(scrollTop: number, itemHeight: number, length: number): number {
  const block = length * itemHeight
  const centeredFlat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
  if (centeredFlat < length) return scrollTop + block
  if (centeredFlat >= 2 * length) return scrollTop - block
  return scrollTop
 }
 export interface UseInfiniteWheelOptions {
  length: number
  itemHeight: number
  initialIndex: () => number
  onChange: (index: number) => void
 }
 export function useInfiniteWheel(
  containerRef: Ref<HTMLElement | null>,
  options: UseInfiniteWheelOptions,
 ) {
  const centeredIndex = ref(options.initialIndex())
  let scrollEndTimer: ReturnType<typeof setTimeout> | null = null
  // Fenêtre de suppression : ignore les évènements scroll provoqués par NOS
  // repositionnements programmatiques (et les réajustements de scroll-snap), qui
  // arrivent en rafale. Un booléen one-shot n'en absorberait qu'un seul : les
  // suivants seraient pris pour du scroll utilisateur → settle() → onChange en
  // boucle (re-render ré-entrant qui corrompt le patch DOM dans le navigateur).
  let suppressed = false
  let suppressTimer: ReturnType<typeof setTimeout> | null = null
  // Scroll programmatique INSTANTANÉ : pas de 'smooth', dont l'animation multi-frames
  // émettrait justement la rafale d'évènements scroll problématique.
  function applyScroll(top: number) {
    const el = containerRef.value
    if (!el) return
    suppressed = true
    if (suppressTimer) clearTimeout(suppressTimer)
    suppressTimer = setTimeout(() => { suppressed = false }, 100)
    el.scrollTop = top
  }
  function readCentered() {
    const el = containerRef.value
    if (!el) return
    centeredIndex.value = valueIndexFromScroll(el.scrollTop, options.itemHeight, options.length)
  }
  function settle() {
    const el = containerRef.value
    if (!el) return
    readCentered()
    options.onChange(centeredIndex.value)
    const corrected = loopCorrection(el.scrollTop, options.itemHeight, options.length)
    if (corrected !== el.scrollTop) applyScroll(corrected)
  }
  function onScroll() {
    if (suppressed) return
    readCentered()
    if (scrollEndTimer) clearTimeout(scrollEndTimer)
    scrollEndTimer = setTimeout(settle, 120)
  }
  function scrollToIndex(index: number) {
    centeredIndex.value = index
    applyScroll(scrollTopForValueIndex(index, options.itemHeight, options.length))
    options.onChange(index)
  }
  function step(delta: number) {
    const next = (((centeredIndex.value + delta) % options.length) + options.length) % options.length
    scrollToIndex(next)
  }
  function onKeydown(event: KeyboardEvent) {
    if (event.key === 'ArrowUp') {
      event.preventDefault()
      step(-1)
    }
    else if (event.key === 'ArrowDown') {
      event.preventDefault()
      step(1)
    }
  }
  onMounted(() => {
    const el = containerRef.value
    if (!el) return
    el.addEventListener('scroll', onScroll, {passive: true})
    applyScroll(scrollTopForValueIndex(options.initialIndex(), options.itemHeight, options.length))
  })
  onBeforeUnmount(() => {
    containerRef.value?.removeEventListener('scroll', onScroll)
    if (scrollEndTimer) clearTimeout(scrollEndTimer)
    if (suppressTimer) clearTimeout(suppressTimer)
  })
  return {centeredIndex, scrollToIndex, step, onKeydown}
 }
@@ -1,41 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {mount} from '@vue/test-utils'
 import TimeWheel from './TimeWheel.vue'
 const HOURS = Array.from({length: 24}, (_, i) => i)
 const mountWheel = (modelValue = 9) =>
  mount(TimeWheel, {
    props: {modelValue, values: HOURS, ariaLabel: 'Heures'},
    attachTo: document.body,
  })
 describe('MalioTimeWheel', () => {
  it('expose le rôle spinbutton et les attributs aria', () => {
    const wrapper = mountWheel(9)
    const el = wrapper.get('[role="spinbutton"]')
    expect(el.attributes('aria-label')).toBe('Heures')
    expect(el.attributes('aria-valuenow')).toBe('9')
    expect(el.attributes('aria-valuemin')).toBe('0')
    expect(el.attributes('aria-valuemax')).toBe('23')
    expect(el.attributes('aria-valuetext')).toBe('09')
  })
  it('rend 3 copies des valeurs (buffer infini)', () => {
    const wrapper = mountWheel()
    expect(wrapper.findAll('[data-test="wheel-item"]')).toHaveLength(24 * 3)
  })
  it('émet la nouvelle valeur au clavier ArrowDown', async () => {
    const wrapper = mountWheel(9)
    await wrapper.get('[role="spinbutton"]').trigger('keydown', {key: 'ArrowDown'})
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([10])
  })
  it('émet la valeur cliquée', async () => {
    const wrapper = mountWheel(9)
    const item = wrapper.findAll('[data-test="wheel-item"]').find((w) => w.text() === '11')!
    await item.trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([11])
  })
 })
@@ -1,95 +0,0 @@
 <template>
  <div
    ref="container"
    class="malio-wheel relative h-[160px] w-14 snap-y snap-mandatory overflow-y-scroll"
    role="spinbutton"
    :tabindex="0"
    :aria-label="ariaLabel"
    :aria-valuenow="modelValue"
    :aria-valuemin="values[0]"
    :aria-valuemax="values[values.length - 1]"
    :aria-valuetext="pad(modelValue)"
    @keydown="onKeydown"
  >
    <button
      v-for="item in buffer"
      :key="item.key"
      type="button"
      data-test="wheel-item"
      class="flex h-8 w-full snap-center items-center justify-center leading-none outline-none transition-all"
      :class="itemClass(item.flat)"
      tabindex="-1"
      @click="onItemClick(item.value)"
    >
      {{ pad(item.value) }}
    </button>
  </div>
 </template>
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 import {useInfiniteWheel} from '../composables/useInfiniteWheel'
 import {padSegment} from '../composables/timeFormat'
 defineOptions({name: 'MalioTimeWheel', inheritAttrs: false})
 const props = defineProps<{
  modelValue: number
  values: number[]
  ariaLabel: string
 }>()
 const emit = defineEmits<{(e: 'update:modelValue', value: number): void}>()
 const ITEM_HEIGHT = 32
 const container = ref<HTMLElement | null>(null)
 const pad = (value: number) => padSegment(value)
 const indexOfValue = (value: number) => Math.max(0, props.values.indexOf(value))
 const {centeredIndex, scrollToIndex, onKeydown} = useInfiniteWheel(container, {
  length: props.values.length,
  itemHeight: ITEM_HEIGHT,
  initialIndex: () => indexOfValue(props.modelValue),
  onChange: (index) => emit('update:modelValue', props.values[index]),
 })
 const buffer = computed(() =>
  [0, 1, 2].flatMap((copy) =>
    props.values.map((value, i) => {
      const flat = copy * props.values.length + i
      return {value, flat, key: flat}
    }),
  ),
 )
 // Taille décroissante avec la distance au centre (effet molette iOS).
 const itemClass = (flat: number) => {
  const distance = Math.abs(flat - (props.values.length + centeredIndex.value))
  if (distance === 0) return 'text-[16px] font-medium text-black'
  if (distance === 1) return 'text-[14px] text-m-muted'
  return 'text-[12px] text-m-muted'
 }
 const onItemClick = (value: number) => scrollToIndex(indexOfValue(value))
 watch(
  () => props.modelValue,
  (value) => {
    if (props.values[centeredIndex.value] !== value) scrollToIndex(indexOfValue(value))
  },
 )
 </script>
 <style scoped>
 .malio-wheel {
  scrollbar-width: none;
  /* Estompe les valeurs en haut et en bas (effet molette iOS) pour qu'elles ne
     débordent pas visuellement du cadre. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
 }
 .malio-wheel::-webkit-scrollbar {
  display: none;
 }
 </style>
@@ -1,48 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {mount} from '@vue/test-utils'
 import TimeWheels from './TimeWheels.vue'
 import TimeWheel from './TimeWheel.vue'
 const mountWheels = (modelValue = '09:30') =>
  mount(TimeWheels, {props: {modelValue}, attachTo: document.body})
 describe('MalioTimeWheels', () => {
  it('rend deux molettes (heures + minutes) et un séparateur', () => {
    const wrapper = mountWheels('09:30')
    const wheels = wrapper.findAllComponents(TimeWheel)
    expect(wheels).toHaveLength(2)
    expect(wheels[0].props('ariaLabel')).toBe('Heures')
    expect(wheels[1].props('ariaLabel')).toBe('Minutes')
    expect(wrapper.text()).toContain(':')
  })
  it('splitte modelValue vers les bonnes molettes', () => {
    const wrapper = mountWheels('09:30')
    const wheels = wrapper.findAllComponents(TimeWheel)
    expect(wheels[0].props('modelValue')).toBe(9)
    expect(wheels[1].props('modelValue')).toBe(30)
  })
  it('recompose et émet HH:MM quand l\'heure change', async () => {
    const wrapper = mountWheels('09:30')
    const wheels = wrapper.findAllComponents(TimeWheel)
    wheels[0].vm.$emit('update:modelValue', 14)
    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['14:30'])
  })
  it('recompose et émet HH:MM quand la minute change', async () => {
    const wrapper = mountWheels('09:30')
    const wheels = wrapper.findAllComponents(TimeWheel)
    wheels[1].vm.$emit('update:modelValue', 5)
    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['09:05'])
  })
  it('par défaut 00:00 quand modelValue est vide', () => {
    const wrapper = mountWheels('')
    const wheels = wrapper.findAllComponents(TimeWheel)
    expect(wheels[0].props('modelValue')).toBe(0)
    expect(wheels[1].props('modelValue')).toBe(0)
  })
 })
@@ -1,54 +0,0 @@
 <template>
  <div
    data-test="time-wheels"
    class="relative flex items-center justify-center gap-3 py-2"
  >
    <!-- bande centrale (overlay, traverse les 2 colonnes) -->
    <div
      class="pointer-events-none absolute inset-x-2 top-1/2 z-0 h-8 mx-3 -translate-y-1/2 rounded-lg bg-m-primary-light"
    />
    <MalioTimeWheel
      :model-value="hours"
      :values="HOURS"
      aria-label="Heures"
      class="relative z-10"
      @update:model-value="onHours"
    />
    <span class="relative z-10 text-[14px] font-bold text-black">:</span>
    <MalioTimeWheel
      :model-value="minutes"
      :values="MINUTES"
      aria-label="Minutes"
      class="relative z-10"
      @update:model-value="onMinutes"
    />
  </div>
 </template>
 <script setup lang="ts">
 import {computed} from 'vue'
 import MalioTimeWheel from './TimeWheel.vue'
 import {formatTime, parseTime} from '../composables/timeFormat'
 defineOptions({name: 'MalioTimeWheels', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{modelValue?: string | null}>(),
  {modelValue: ''},
 )
 const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>()
 const HOURS = Array.from({length: 24}, (_, i) => i)
 const MINUTES = Array.from({length: 60}, (_, i) => i)
 const parts = computed(() => parseTime(props.modelValue) ?? {hours: 0, minutes: 0})
 const hours = computed(() => parts.value.hours)
 const minutes = computed(() => parts.value.minutes)
 const onHours = (value: number) => emit('update:modelValue', formatTime(value, minutes.value))
 const onMinutes = (value: number) => emit('update:modelValue', formatTime(hours.value, value))
 </script>
@@ -1,125 +0,0 @@
 <template>
  <Story title="Disclosure/Accordion">
    <div class="grid grid-cols-1 gap-6">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Multiple (filtres) — défaut</h2>
        <MalioAccordion v-model="multiple">
          <MalioAccordionItem title="Prix" value="prix">
            <p>Slider de prix ici…</p>
          </MalioAccordionItem>
          <MalioAccordionItem title="Catégorie" value="cat">
            <p>Liste de checkboxes ici…</p>
          </MalioAccordionItem>
          <MalioAccordionItem title="Marque" value="marque">
            <p>Recherche + liste ici…</p>
          </MalioAccordionItem>
        </MalioAccordion>
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
        <MalioAccordion v-model="single" mode="single">
          <MalioAccordionItem title="Question 1" value="q1">
            <p>Réponse 1</p>
          </MalioAccordionItem>
          <MalioAccordionItem title="Question 2" value="q2">
            <p>Réponse 2</p>
          </MalioAccordionItem>
        </MalioAccordion>
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
        <MalioAccordion>
          <MalioAccordionItem title="Active" value="ok">
            <p>Contenu accessible</p>
          </MalioAccordionItem>
          <MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
            <p>Inaccessible</p>
          </MalioAccordionItem>
        </MalioAccordion>
      </div>
    </div>
  </Story>
 </template>
 <docs lang="md">
 # MalioAccordion
 Accordéon compositionnel : un parent `MalioAccordion` qui enveloppe des
 `MalioAccordionItem`. Conçu pour des systèmes de filtres (plusieurs sections
 dépliées simultanément) comme pour des FAQ (une seule section ouverte).
 ---
 ## Props — MalioAccordion
 ### mode
 - Type: `'single' | 'multiple'`
 - Défaut: `'multiple'`
 - Description: `multiple` autorise plusieurs panneaux ouverts ; `single` ferme les autres à l'ouverture.
 ### modelValue
 - Type: `string | string[]`
 - Description: clés ouvertes. `string[]` en mode `multiple`, `string` en mode `single`. Sans v-model, état interne (non contrôlé).
 ### id
 - Type: `string`
 - Description: préfixe des IDs d'accessibilité. Auto-généré si absent.
 ### groupClass
 - Type: `string`
 - Description: classes du conteneur, fusionnées via `twMerge`.
 ---
 ## Props — MalioAccordionItem
 ### title
 - Type: `string` (requis) — texte de l'en-tête.
 ### value
 - Type: `string` — clé unique de la section (recommandée pour piloter le v-model). Auto-générée si absente.
 ### defaultOpen
 - Type: `boolean` — défaut `false`. Ouvre la section au montage (mode non contrôlé uniquement).
 ### disabled
 - Type: `boolean` — défaut `false`. En-tête non cliquable.
 ### headerClass / panelClass
 - Type: `string` — override des classes de l'en-tête / du panneau (`twMerge`).
 ---
 ## Slots
 Slot par défaut de `MalioAccordionItem` = contenu du panneau.
 ---
 ## Accessibilité
 - En-tête = `<button>` natif, `aria-expanded`, `aria-controls`.
 - Panneau `role="region"` + `aria-labelledby`.
 - Sections désactivées : `disabled` + `aria-disabled`.
 - Navigation clavier ↑/↓ entre les en-têtes.
 ---
 ## Events
 ### update:modelValue
 - Émis à chaque bascule. Retourne `string[]` (mode `multiple`) ou `string` (mode `single`, `''` si tout fermé).
 </docs>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioAccordion from '../../components/malio/accordion/Accordion.vue'
 import MalioAccordionItem from '../../components/malio/accordion/AccordionItem.vue'
 defineOptions({ name: 'AccordionStory' })
 const multiple = ref<string[]>(['prix'])
 const single = ref('q1')
 </script>
@@ -1,94 +0,0 @@
 <template>
  <Story title="Date/Date">
    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioDate
          v-model="simpleValue"
          label="Date de naissance"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioDate
          v-model="initialValue"
          label="Date du jour"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
        <MalioDate
          v-model="boundedValue"
          label="Date du rendez-vous"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
        <MalioDate
          v-model="initialValue"
          label="Date verrouillée"
          :clearable="false"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioDate
          v-model="initialValue"
          label="Désactivé"
          disabled
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
        <MalioDate
          v-model="initialValue"
          label="Lecture seule"
          readonly
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioDate
          v-model="errorValue"
          label="Date limite"
          error="Date invalide"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioDate
          v-model="initialValue"
          label="Date confirmée"
          success="Enregistrée"
        />
      </div>
    </div>
  </Story>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioDate from '../../components/malio/date/Date.vue'
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 const simpleValue = ref<string | null>(null)
 const initialValue = ref<string | null>(todayIso)
 const boundedValue = ref<string | null>(null)
 const errorValue = ref<string | null>(null)
 </script>
@@ -1,77 +0,0 @@
 <template>
  <Story title="Date/DateRange">
    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioDateRange
          v-model="simpleValue"
          label="Période"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioDateRange
          v-model="initialValue"
          label="Séjour"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
        <MalioDateRange
          v-model="boundedValue"
          label="Plage bornée"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
        <MalioDateRange
          v-model="initialValue"
          label="Période verrouillée"
          :clearable="false"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioDateRange
          v-model="initialValue"
          label="Désactivé"
          disabled
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioDateRange
          v-model="errorValue"
          label="Période"
          error="Période invalide"
        />
      </div>
    </div>
  </Story>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioDateRange from '../../components/malio/date/DateRange.vue'
 type RangeValue = {start: string; end: string}
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 const simpleValue = ref<RangeValue | null>(null)
 const initialValue = ref<RangeValue | null>({start: todayIso, end: maxIso})
 const boundedValue = ref<RangeValue | null>(null)
 const errorValue = ref<RangeValue | null>(null)
 </script>
@@ -1,76 +0,0 @@
 <template>
  <Story title="Date/DateTime">
    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioDateTime
          v-model="simpleValue"
          label="Date et heure"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioDateTime
          v-model="initialValue"
          label="Rendez-vous"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
        <MalioDateTime
          v-model="boundedValue"
          label="Créneau"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioDateTime
          v-model="errorValue"
          label="Date limite"
          error="Date et heure requises"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioDateTime
          v-model="initialValue"
          label="Désactivé"
          disabled
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
        <MalioDateTime
          v-model="initialValue"
          label="Lecture seule"
          readonly
        />
      </div>
    </div>
  </Story>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioDateTime from '../../components/malio/date/DateTime.vue'
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 const simpleValue = ref<string | null>(null)
 const initialValue = ref<string | null>('2026-05-20T14:30:00')
 const boundedValue = ref<string | null>(null)
 const errorValue = ref<string | null>(null)
 </script>
@@ -1,75 +0,0 @@
 <template>
  <Story title="Date/DateWeek">
    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioDateWeek
          v-model="simpleValue"
          label="Semaine"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioDateWeek
          v-model="initialValue"
          label="Semaine de livraison"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
        <MalioDateWeek
          v-model="boundedValue"
          label="Semaine bornée"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +60 jours"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
        <MalioDateWeek
          v-model="initialValue"
          label="Semaine verrouillée"
          :clearable="false"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioDateWeek
          v-model="initialValue"
          label="Désactivé"
          disabled
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioDateWeek
          v-model="errorValue"
          label="Semaine"
          error="Semaine invalide"
        />
      </div>
    </div>
  </Story>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioDateWeek from '../../components/malio/date/DateWeek.vue'
 const simpleValue = ref<string | null>(null)
 const initialValue = ref<string | null>('2026-W21')
 const boundedValue = ref<string | null>(null)
 const errorValue = ref<string | null>(null)
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
 </script>
@@ -1,70 +0,0 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 defineOptions({ name: 'ModalStory' })
 const showBase = ref(false)
 const showForm = ref(false)
 const showNoDismiss = ref(false)
 </script>
 <template>
  <Story title="Overlay/Modal">
    <Variant title="Simple">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showBase = true"
        >
          Ouvrir
        </button>
        <MalioModal v-model="showBase">
          <template #header>
            <h2 class="text-xl font-bold">Détails</h2>
          </template>
          <p>Contenu simple de la modal.</p>
        </MalioModal>
      </div>
    </Variant>
    <Variant title="Avec footer d'actions">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showForm = true"
        >
          Ouvrir le formulaire
        </button>
        <MalioModal v-model="showForm" modal-class="max-w-lg">
          <template #header>
            <h2 class="text-xl font-bold">Nouveau contact</h2>
          </template>
          <div class="flex flex-col gap-4 py-2">
            <MalioInputText label="Nom" />
            <MalioInputText label="Prénom" />
          </div>
          <template #footer>
            <MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
          </template>
        </MalioModal>
      </div>
    </Variant>
    <Variant title="Non dismissable">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showNoDismiss = true"
        >
          Ouvrir
        </button>
        <MalioModal v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
          <template #header>
            <h2 class="text-xl font-bold">Action requise</h2>
          </template>
          <p>Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
        </MalioModal>
      </div>
    </Variant>
  </Story>
 </template>
@@ -1,41 +0,0 @@
 <template>
  <Story title="Time/TimePicker">
    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioTimePicker v-model="simpleValue" label="Heure" />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioTimePicker v-model="initialValue" label="Heure de départ" hint="Format HH:MM" />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioTimePicker v-model="disabledValue" label="Heure verrouillée" disabled />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioTimePicker v-model="errorValue" label="Heure de fermeture" error="Heure invalide" />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioTimePicker v-model="successValue" label="Heure confirmée" success="Horaire enregistré" />
      </div>
    </div>
  </Story>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioTimePicker from '../../components/malio/time/TimePicker.vue'
 const simpleValue = ref('')
 const initialValue = ref('08:30')
 const disabledValue = ref('14:15')
 const errorValue = ref('25:90')
 const successValue = ref('09:00')
 </script>
@@ -1,780 +0,0 @@
 # MalioDateWeek — 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:** Composant `<MalioDateWeek>` (sélection d'une semaine ISO en un clic, hover de semaine), réutilisant le shell + le rendu pilule de `DateRange`.
 **Architecture:** Une semaine sélectionnée est une plage lundi→dimanche : `DateWeek` calcule ces bornes et les passe à `MonthGrid` (rendu pilule réutilisé). Ajout de 2 props additives à `MonthGrid` (n° de semaine cliquable + repère) et d'un module pur `dateWeek.ts`.
 **Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, TypeScript strict, Tailwind (`m-*`), `@iconify/vue`, Vitest + `@vue/test-utils` (jsdom).
 **Référence spec :** `docs/superpowers/specs/2026-05-20-dateweek-design.md`
 ---
 ## Conventions
 - Tests ciblés : `npx vitest run <chemin>` ; commits avec `--no-verify` en cas de hook flaky (suite complète lancée par le hook).
 - `data-test` réutilisés (`date-input`, `popover`, `header-*`, `day`+`data-iso`, `clear`, `calendar-icon`, `month`, `week-number`).
 - Nouveaux attributs sur la cellule n° de semaine : `data-week-start` (lundi de la ligne), `data-marked` (`"true"`/`"false"`).
 - Ordre : 1) `dateWeek.ts` → 2) extension `MonthGrid` → 3) `DateWeek.vue` + tests → 4) story + playground.
 ---
 ## Task 1 : Helpers purs `dateWeek.ts`
 **Files:**
 - Create: `app/components/malio/date/composables/dateWeek.ts`
 - Test: `app/components/malio/date/composables/dateWeek.test.ts`
 - [ ] **Step 1 : Écrire les tests (échouent)**
 ```ts
 import {describe, expect, it} from 'vitest'
 import {
  formatWeekDisplay,
  isValidIsoWeek,
  isoWeekToMonday,
  mondayOf,
  sundayOf,
  toIsoWeek,
 } from './dateWeek'
 describe('dateWeek', () => {
  describe('mondayOf / sundayOf', () => {
    it('returns Monday and Sunday of a midweek date', () => {
      expect(mondayOf('2026-05-20')).toBe('2026-05-18') // mercredi
      expect(sundayOf('2026-05-20')).toBe('2026-05-24')
    })
    it('keeps Monday on a Monday', () => {
      expect(mondayOf('2026-05-18')).toBe('2026-05-18')
    })
    it('returns the preceding Monday for a Sunday', () => {
      expect(mondayOf('2026-05-24')).toBe('2026-05-18')
    })
  })
  describe('toIsoWeek', () => {
    it('returns the ISO week of a date', () => {
      expect(toIsoWeek('2026-05-20')).toBe('2026-W21')
    })
    it('handles year boundaries', () => {
      expect(toIsoWeek('2026-01-01')).toBe('2026-W01')
      expect(toIsoWeek('2025-12-31')).toBe('2026-W01')
      expect(toIsoWeek('2027-01-01')).toBe('2026-W53')
    })
  })
  describe('isoWeekToMonday', () => {
    it('returns the Monday of a week string', () => {
      expect(isoWeekToMonday('2026-W21')).toBe('2026-05-18')
    })
    it('round-trips with toIsoWeek', () => {
      for (const w of ['2026-W01', '2026-W21', '2026-W53', '2024-W09']) {
        const monday = isoWeekToMonday(w)
        expect(monday).not.toBeNull()
        expect(toIsoWeek(monday as string)).toBe(w)
      }
    })
    it('returns null for invalid input', () => {
      expect(isoWeekToMonday('2026-21')).toBeNull()
      expect(isoWeekToMonday('2026-W00')).toBeNull()
      expect(isoWeekToMonday('2026-W54')).toBeNull()
      expect(isoWeekToMonday('2025-W53')).toBeNull() // 2025 n'a que 52 semaines ISO
    })
  })
  describe('isValidIsoWeek', () => {
    it('accepts a real ISO week', () => {
      expect(isValidIsoWeek('2026-W21')).toBe(true)
    })
    it('rejects malformed or impossible weeks', () => {
      expect(isValidIsoWeek('2026-21')).toBe(false)
      expect(isValidIsoWeek('2026-W00')).toBe(false)
      expect(isValidIsoWeek('2026-W54')).toBe(false)
    })
  })
  describe('formatWeekDisplay', () => {
    it('formats a week as a human label', () => {
      expect(formatWeekDisplay('2026-W21')).toBe('Semaine 21 (18/05 → 24/05/2026)')
    })
    it('returns empty string for invalid input', () => {
      expect(formatWeekDisplay('2026-W54')).toBe('')
    })
  })
 })
 ```
 - [ ] **Step 2 : Lancer, vérifier l'échec** — `npx vitest run app/components/malio/date/composables/dateWeek.test.ts` → FAIL (import non résolu)
 - [ ] **Step 3 : Implémenter**
 ```ts
 // app/components/malio/date/composables/dateWeek.ts
 import {formatIsoToDisplay} from './dateFormat'
 const parseUtc = (iso: string): Date => {
  const [y, m, d] = iso.split('-').map(Number)
  return new Date(Date.UTC(y, m - 1, d))
 }
 const toIso = (d: Date): string => {
  const y = d.getUTCFullYear()
  const m = String(d.getUTCMonth() + 1).padStart(2, '0')
  const day = String(d.getUTCDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
 }
 export function mondayOf(iso: string): string {
  const d = parseUtc(iso)
  const dayNum = d.getUTCDay() || 7 // dimanche = 7
  d.setUTCDate(d.getUTCDate() - (dayNum - 1))
  return toIso(d)
 }
 export function sundayOf(iso: string): string {
  const d = parseUtc(mondayOf(iso))
  d.setUTCDate(d.getUTCDate() + 6)
  return toIso(d)
 }
 export function toIsoWeek(iso: string): string {
  const d = parseUtc(iso)
  const dayNum = d.getUTCDay() || 7
  d.setUTCDate(d.getUTCDate() + 4 - dayNum) // jeudi de la semaine
  const isoYear = d.getUTCFullYear()
  const yearStart = new Date(Date.UTC(isoYear, 0, 1))
  const week = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
  return `${isoYear}-W${String(week).padStart(2, '0')}`
 }
 export function isoWeekToMonday(week: string): string | null {
  const m = /^(\d{4})-W(\d{2})$/.exec(week)
  if (!m) return null
  const year = Number(m[1])
  const w = Number(m[2])
  if (w < 1 || w > 53) return null
  // Lundi de la semaine 1 = lundi de la semaine contenant le 4 janvier
  const jan4 = new Date(Date.UTC(year, 0, 4))
  const jan4Day = jan4.getUTCDay() || 7
  const monday = new Date(jan4)
  monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (w - 1) * 7)
  const iso = toIso(monday)
  // Garde-fou : la semaine 53 n'existe pas pour toutes les années
  if (toIsoWeek(iso) !== week) return null
  return iso
 }
 export function isValidIsoWeek(week: string): boolean {
  return isoWeekToMonday(week) !== null
 }
 export function formatWeekDisplay(week: string): string {
  const monday = isoWeekToMonday(week)
  if (!monday) return ''
  const sunday = sundayOf(monday)
  const w = Number(week.slice(6))
  const startDdMm = formatIsoToDisplay(monday).slice(0, 5) // "18/05"
  const endFull = formatIsoToDisplay(sunday) // "24/05/2026"
  return `Semaine ${w} (${startDdMm} → ${endFull})`
 }
 ```
 - [ ] **Step 4 : Lancer, vérifier le succès** — PASS
 - [ ] **Step 5 : Commit**
 ```bash
 git add app/components/malio/date/composables/dateWeek.ts app/components/malio/date/composables/dateWeek.test.ts
 git commit -m "feat : helpers purs de semaine ISO (#MUI-33)" --no-verify
 ```
 ---
 ## Task 2 : Ajouts additifs à `MonthGrid.vue`
 **Files:**
 - Modify: `app/components/malio/date/internal/MonthGrid.vue`
 Couvert par `DateWeek.test.ts` (Task 3) ; non-régression par `Date.test.ts` / `DateRange.test.ts`.
 - [ ] **Step 1 : Remplacer la cellule n° de semaine** par un élément polymorphe interactif
 Dans le template, remplacer le bloc actuel :
 ```vue
        <div
          data-test="week-number"
          class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center bg-m-primary-light p-[10px] text-sm"
          :class="[
            week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60',
            wIndex === 0 ? 'rounded-t-md' : '',
            wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
          ]"
        >
          {{ week.weekNumber }}
        </div>
 ```
 par :
 ```vue
        <component
          :is="interactiveWeekNumber ? 'button' : 'div'"
          data-test="week-number"
          :data-week-start="week.days[0].isoDate"
          :data-marked="markedWeekStart === week.days[0].isoDate"
          :type="interactiveWeekNumber ? 'button' : undefined"
          :disabled="interactiveWeekNumber ? !weekSelectable(week) : undefined"
          class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center p-[10px] text-sm"
          :class="[
            weekNumberClass(week),
            wIndex === 0 ? 'rounded-t-md' : '',
            wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
          ]"
          @click="onWeekNumberClick(week)"
          @mouseenter="onWeekNumberHover(week)"
        >
          {{ week.weekNumber }}
        </component>
 ```
 - [ ] **Step 2 : Ajouter les props et la logique** (script)
 Modifier les `defineProps`/`withDefaults` pour ajouter `interactiveWeekNumber` et `markedWeekStart`, importer `WeekRow`, et ajouter les helpers. Remplacer le bloc props :
 ```ts
 const props = withDefaults(
  defineProps<{
    month: number
    year: number
    selectedDate?: string | null
    rangeStart?: string | null
    rangeEnd?: string | null
    previewDate?: string | null
    interactiveWeekNumber?: boolean
    markedWeekStart?: string | null
    min?: string
    max?: string
  }>(),
  {
    selectedDate: null,
    rangeStart: undefined,
    rangeEnd: undefined,
    previewDate: undefined,
    interactiveWeekNumber: false,
    markedWeekStart: null,
    min: undefined,
    max: undefined,
  },
 )
 ```
 Mettre à jour l'import du composable pour récupérer `WeekRow` :
 ```ts
 import {useMonthMatrix, type DayCell, type WeekRow} from '../composables/useMonthMatrix'
 ```
 Ajouter, après `const inRange = ...` :
 ```ts
 const weekSelectable = (week: WeekRow) => week.days.some(d => inRange(d.isoDate))
 const weekNumberClass = (week: WeekRow) => {
  if (props.markedWeekStart === week.days[0].isoDate) return 'bg-m-primary text-white'
  const parts = ['bg-m-primary-light']
  parts.push(week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60')
  if (props.interactiveWeekNumber && weekSelectable(week)) parts.push('cursor-pointer')
  return parts.join(' ')
 }
 const onWeekNumberClick = (week: WeekRow) => {
  if (!props.interactiveWeekNumber || !weekSelectable(week)) return
  emit('select', week.days[0].isoDate)
 }
 const onWeekNumberHover = (week: WeekRow) => {
  if (!props.interactiveWeekNumber || !weekSelectable(week)) return
  emit('hover', week.days[0].isoDate)
 }
 ```
 - [ ] **Step 3 : Non-régression `Date` et `DateRange`**
 Run: `npx vitest run app/components/malio/date/Date.test.ts app/components/malio/date/DateRange.test.ts`
 Expected: PASS (21 + 17). La cellule n° reste un `<div>` non interactif quand `interactiveWeekNumber` est `false`.
 - [ ] **Step 4 : Lint** — `npx eslint app/components/malio/date/internal/MonthGrid.vue` → 0 erreur
 - [ ] **Step 5 : Commit**
 ```bash
 git add app/components/malio/date/internal/MonthGrid.vue
 git commit -m "feat : MonthGrid n° de semaine interactif + repère (mode semaine) (#MUI-33)" --no-verify
 ```
 ---
 ## Task 3 : `DateWeek.vue` + tests
 **Files:**
 - Create: `app/components/malio/date/DateWeek.vue`
 - Test: `app/components/malio/date/DateWeek.test.ts`
 - [ ] **Step 1 : Créer `DateWeek.vue`**
 ```vue
 <!-- app/components/malio/date/DateWeek.vue -->
 <template>
  <CalendarField
    :id="id"
    :display-value="displayValue"
    :sync-to="validWeek?.monday ?? null"
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :required="required"
    :disabled="disabled"
    :readonly="readonly"
    :hint="hint"
    :error="error"
    :success="success"
    :clearable="clearable"
    :input-class="inputClass"
    :label-class="labelClass"
    :group-class="groupClass"
    v-bind="$attrs"
    @clear="onClear"
    @close="onClose"
  >
    <template #default="{ currentMonth, currentYear, close }">
      <MonthGrid
        :month="currentMonth"
        :year="currentYear"
        :range-start="activeMonday"
        :range-end="activeSunday"
        :marked-week-start="validWeek?.monday ?? null"
        interactive-week-number
        :min="min"
        :max="max"
        @select="(iso) => onSelect(iso, close)"
        @hover="onHover"
      />
    </template>
  </CalendarField>
 </template>
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
 import {isValidIsoWeek, isoWeekToMonday, mondayOf, sundayOf, toIsoWeek, formatWeekDisplay} from './composables/dateWeek'
 defineOptions({name: 'MalioDateWeek', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    name?: string
    label?: string
    modelValue?: string | null
    placeholder?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    min?: string
    max?: string
    clearable?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
  }>(),
  {
    id: '',
    name: '',
    label: '',
    modelValue: undefined,
    placeholder: 'JJ/MM/AAAA',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    min: undefined,
    max: undefined,
    clearable: true,
    inputClass: '',
    labelClass: '',
    groupClass: '',
  },
 )
 const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
 const hoverWeekStart = ref<string | null>(null)
 const validWeek = computed(() => {
  if (props.modelValue && isValidIsoWeek(props.modelValue)) {
    return {monday: isoWeekToMonday(props.modelValue) as string}
  }
  return null
 })
 const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
 const activeSunday = computed(() => (activeMonday.value ? sundayOf(activeMonday.value) : null))
 const displayValue = computed(() => (validWeek.value ? formatWeekDisplay(props.modelValue as string) : ''))
 const onSelect = (iso: string, close: () => void) => {
  emit('update:modelValue', toIsoWeek(iso))
  hoverWeekStart.value = null
  close()
 }
 const onHover = (iso: string | null) => {
  hoverWeekStart.value = iso ? mondayOf(iso) : null
 }
 const onClose = () => {
  hoverWeekStart.value = null
 }
 const onClear = () => {
  emit('update:modelValue', null)
  hoverWeekStart.value = null
 }
 </script>
 ```
 - [ ] **Step 2 : Écrire `DateWeek.test.ts`**
 ```ts
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import DateWeek from './DateWeek.vue'
 type DateWeekProps = {
  modelValue?: string | null
  label?: string
  disabled?: boolean
  readonly?: boolean
  error?: string
  min?: string
  max?: string
 }
 const DateWeekForTest = DateWeek as DefineComponent<DateWeekProps>
 const mountWeek = (props: DateWeekProps = {}) =>
  mount(DateWeekForTest, {props, attachTo: document.body})
 describe('MalioDateWeek', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
  })
  afterEach(() => vi.useRealTimers())
  it('renders the label and calendar icon', () => {
    const wrapper = mountWeek({label: 'Semaine'})
    expect(wrapper.get('label').text()).toBe('Semaine')
    expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
  })
  it('displays the formatted week when modelValue is set', () => {
    const wrapper = mountWeek({modelValue: '2026-W21'})
    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
    expect(input.value).toBe('Semaine 21 (18/05 → 24/05/2026)')
  })
  it('shows an empty field without a value', () => {
    const wrapper = mountWeek()
    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
    expect(input.value).toBe('')
  })
  it('opens on the month of the selected week', async () => {
    const wrapper = mountWeek({modelValue: '2026-W01'}) // lundi 2025-12-29
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
  })
  it('selects the week when a day is clicked', async () => {
    const wrapper = mountWeek()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('selects the week when the week number is clicked', async () => {
    const wrapper = mountWeek()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('previews the whole week on day hover', async () => {
    const wrapper = mountWeek()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('mouseenter')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-24"]').attributes('data-range-role')).toBe('end')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
  })
  it('previews the whole week on week-number hover', async () => {
    const wrapper = mountWeek()
    await wrapper.get('[data-test="date-input"]').trigger('click')
    await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('mouseenter')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
  })
  it('marks the committed week number', async () => {
    const wrapper = mountWeek({modelValue: '2026-W21'})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').attributes('data-marked')).toBe('true')
    expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
  })
  it('emits null on clear', async () => {
    const wrapper = mountWeek({modelValue: '2026-W21'})
    await wrapper.get('[data-test="clear"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
  })
  it('disables a week fully outside min/max', async () => {
    const wrapper = mountWeek({min: '2026-05-18', max: '2026-05-31'})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    const earlyWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-11"]')
    expect((earlyWeek.element as HTMLButtonElement).disabled).toBe(true)
    const selectableWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]')
    expect((selectableWeek.element as HTMLButtonElement).disabled).toBe(false)
  })
  it('does not open when disabled', async () => {
    const wrapper = mountWeek({disabled: true})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('does not open when readonly', async () => {
    const wrapper = mountWeek({readonly: true, modelValue: '2026-W21'})
    await wrapper.get('[data-test="date-input"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })
  it('sets aria-invalid on error', () => {
    const wrapper = mountWeek({error: 'Semaine requise'})
    expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
    expect(wrapper.text()).toContain('Semaine requise')
  })
 })
 ```
 - [ ] **Step 3 : Lancer, vérifier le succès** — `npx vitest run app/components/malio/date/DateWeek.test.ts` → PASS (~14)
 - [ ] **Step 4 : Lint + suite date complète**
 Run: `npx eslint app/components/malio/date/ && npx vitest run app/components/malio/date/`
 Expected: 0 erreur lint ; tout vert (dont `Date` 21 et `DateRange` 17 inchangés).
 - [ ] **Step 5 : Commit**
 ```bash
 git add app/components/malio/date/DateWeek.vue app/components/malio/date/DateWeek.test.ts
 git commit -m "feat : composant MalioDateWeek (sélection semaine ISO) (#MUI-33)" --no-verify
 ```
 ---
 ## Task 4 : Story + playground
 **Files:**
 - Create: `app/story/date/dateWeek.story.vue`
 - Create: `.playground/pages/composant/date/dateWeek.vue`
 - [ ] **Step 1 : Créer la story**
 ```vue
 <!-- app/story/date/dateWeek.story.vue -->
 <template>
  <Story title="Date/DateWeek">
    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioDateWeek
          v-model="simpleValue"
          label="Semaine"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioDateWeek
          v-model="initialValue"
          label="Semaine de livraison"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
        <MalioDateWeek
          v-model="boundedValue"
          label="Semaine bornée"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +60 jours"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
        <MalioDateWeek
          v-model="initialValue"
          label="Semaine verrouillée"
          :clearable="false"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioDateWeek
          v-model="initialValue"
          label="Désactivé"
          disabled
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioDateWeek
          v-model="errorValue"
          label="Semaine"
          error="Semaine invalide"
        />
      </div>
    </div>
  </Story>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioDateWeek from '../../components/malio/date/DateWeek.vue'
 const simpleValue = ref<string | null>(null)
 const initialValue = ref<string | null>('2026-W21')
 const boundedValue = ref<string | null>(null)
 const errorValue = ref<string | null>(null)
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
 </script>
 ```
 - [ ] **Step 2 : Créer la page playground**
 ```vue
 <!-- .playground/pages/composant/date/dateWeek.vue -->
 <template>
  <div class="space-y-6 p-4">
    <h1 class="text-2xl font-bold">MalioDateWeek</h1>
    <div class="flex flex-wrap items-start gap-10">
      <div class="w-[480px] space-y-3">
        <h2 class="font-semibold">Large (480px)</h2>
        <MalioDateWeek
          v-model="value"
          label="Semaine"
          hint="Clique un jour ou un n° de semaine"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur : <code>{{ value ?? 'null' }}</code></p>
        </div>
        <div class="flex gap-2">
          <button
            type="button"
            class="rounded bg-m-primary px-3 py-1.5 text-white"
            @click="value = '2026-W52'"
          >
            Forcer 2026-W52
          </button>
          <button
            type="button"
            class="rounded border px-3 py-1.5"
            @click="value = null"
          >
            Réinitialiser
          </button>
        </div>
      </div>
      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">ERP (396px)</h2>
        <MalioDateWeek
          v-model="erpValue"
          label="Semaine"
          hint="Largeur cible ERP"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur : <code>{{ erpValue ?? 'null' }}</code></p>
        </div>
        <MalioDateWeek
          v-model="bounded"
          label="Semaine bornée"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +60 jours"
        />
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
 const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
 </script>
 ```
 - [ ] **Step 3 : Vérification visuelle** — `npm run dev` → menu "Date" → page DateWeek : hover de semaine (ligne entière), clic jour/n° → sélection, repère n° en bleu plein, bornes. Et `npm run story:dev`.
 - [ ] **Step 4 : Lint** — `npx eslint app/story/date/dateWeek.story.vue .playground/pages/composant/date/dateWeek.vue` → 0 erreur
 - [ ] **Step 5 : Commit**
 ```bash
 git add app/story/date/dateWeek.story.vue .playground/pages/composant/date/dateWeek.vue
 git commit -m "feat : story et page playground de MalioDateWeek (#MUI-33)" --no-verify
 ```
 ---
 ## Self-Review (effectuée à l'écriture)
 **Couverture spec :** `dateWeek.ts` (mondayOf/sundayOf/toIsoWeek/isoWeekToMonday/isValidIsoWeek/formatWeekDisplay) ✓ T1 ; `MonthGrid` `interactiveWeekNumber`+`markedWeekStart`+`data-week-start`/`data-marked`+weekSelectable ✓ T2 ; `DateWeek` API + un clic + hover semaine + repère + clear + min/max overlap + invalide→null ✓ T3 ; affichage `"Semaine 21 (...)"` ✓ T1/T3 ; story+playground ✓ T4. modelValue `YYYY-Www` ✓.
 **Placeholders :** aucun ; code complet.
 **Cohérence des types :** `toIsoWeek(iso)→string`, `isoWeekToMonday(week)→string|null`, `mondayOf`/`sundayOf(iso)→string`, `formatWeekDisplay(week)→string` définis T1, consommés T3. `MonthGrid` props `interactiveWeekNumber`/`markedWeekStart` T2 → passées par `DateWeek` T3. Events `select`/`hover` (iso jour) réutilisés ; `DateWeek.onSelect` mappe via `toIsoWeek`, `onHover` via `mondayOf`. `WeekRow` importé de `useMonthMatrix` (déjà exporté). Le rendu pilule s'appuie sur `rangeStart`/`rangeEnd` (inchangés) → `Date`/`DateRange` non impactés.
 **Écart assumé :** `MonthGrid` gagne `data-week-start`/`data-marked` (testabilité), conforme à la spec.
@@ -1,712 +0,0 @@
 # MalioDateTime 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 un composant `MalioDateTime` (date + heure dans un seul champ) à la famille temporelle de `@malio/layer-ui`, en version intérimaire avec `<input type="time">` natif.
 **Architecture:** Fine enveloppe autour du shell `internal/CalendarField.vue` (comme `MalioDate`). Le slot popover contient `MonthGrid` (jour) + un `<input type="time">` (heure) sous la grille. La valeur émise est l'ISO naïf `"YYYY-MM-DDTHH:MM:00"`. Logique de découpe/recomposition dans un nouveau composable `datetimeFormat.ts`.
 **Tech Stack:** Vue 3 `<script setup lang="ts">`, TypeScript strict, Tailwind (`m-*`), `tailwind-merge`, Vitest + @vue/test-utils (jsdom).
 **Conventions (rappel) :** Conventional Commits **avec espace avant `:`**, type minuscule, suffixe ticket `(#MUI-33)`, pas de préfixe `[#...]`. Terminer par `Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>`. Le hook pre-commit est flaky (timeouts WSL2) → après vérification ciblée `npx vitest run <chemin>`, committer avec `--no-verify`.
 **Réfs spec :** `docs/superpowers/specs/2026-05-22-datetime-design.md`.
 ---
 ### Task 1 : Composable `datetimeFormat.ts`
 **Files:**
 - Create: `app/components/malio/date/composables/datetimeFormat.ts`
 - Test: `app/components/malio/date/composables/datetimeFormat.test.ts`
 - [ ] **Step 1 : Écrire les tests qui échouent**
 Créer `app/components/malio/date/composables/datetimeFormat.test.ts` :
 ```ts
 import {describe, expect, it} from 'vitest'
 import {
  composeDateTime,
  formatIsoDateTimeToDisplay,
  isValidIsoDateTime,
  splitDateTime,
 } from './datetimeFormat'
 describe('datetimeFormat', () => {
  describe('isValidIsoDateTime', () => {
    it('accepte un datetime ISO complet valide', () => {
      expect(isValidIsoDateTime('2026-05-20T14:30:00')).toBe(true)
      expect(isValidIsoDateTime('2026-01-01T00:00:00')).toBe(true)
      expect(isValidIsoDateTime('2026-12-31T23:59:59')).toBe(true)
    })
    it('rejette une date seule, des composants invalides ou une chaîne vide', () => {
      expect(isValidIsoDateTime('2026-05-20')).toBe(false)
      expect(isValidIsoDateTime('2026-13-01T00:00:00')).toBe(false)
      expect(isValidIsoDateTime('2026-05-20T24:00:00')).toBe(false)
      expect(isValidIsoDateTime('2026-05-20T14:60:00')).toBe(false)
      expect(isValidIsoDateTime('2026-05-20T14:30:60')).toBe(false)
      expect(isValidIsoDateTime('2026-05-20T14:30')).toBe(false)
      expect(isValidIsoDateTime('')).toBe(false)
    })
  })
  describe('formatIsoDateTimeToDisplay', () => {
    it('formate un datetime valide en JJ/MM/AAAA HH:MM', () => {
      expect(formatIsoDateTimeToDisplay('2026-05-20T14:30:00')).toBe('20/05/2026 14:30')
    })
    it('renvoie une chaîne vide pour nul ou invalide', () => {
      expect(formatIsoDateTimeToDisplay(null)).toBe('')
      expect(formatIsoDateTimeToDisplay('2026-05-20')).toBe('')
      expect(formatIsoDateTimeToDisplay('nope')).toBe('')
    })
  })
  describe('splitDateTime', () => {
    it('découpe un datetime valide', () => {
      expect(splitDateTime('2026-05-20T14:30:00')).toEqual({date: '2026-05-20', time: '14:30'})
    })
    it('renvoie date null et time vide pour nul, date seule ou invalide', () => {
      expect(splitDateTime(null)).toEqual({date: null, time: ''})
      expect(splitDateTime('2026-05-20')).toEqual({date: null, time: ''})
      expect(splitDateTime('nope')).toEqual({date: null, time: ''})
    })
  })
  describe('composeDateTime', () => {
    it('recompose un datetime ISO avec secondes à 00', () => {
      expect(composeDateTime('2026-05-20', '14:30')).toBe('2026-05-20T14:30:00')
    })
    it('utilise 00:00 quand l\\'heure est vide', () => {
      expect(composeDateTime('2026-05-20', '')).toBe('2026-05-20T00:00:00')
    })
  })
 })
 ```
 - [ ] **Step 2 : Lancer les tests pour vérifier qu'ils échouent**
 Run: `npx vitest run app/components/malio/date/composables/datetimeFormat.test.ts`
 Expected: FAIL (module `./datetimeFormat` introuvable).
 - [ ] **Step 3 : Écrire l'implémentation**
 Créer `app/components/malio/date/composables/datetimeFormat.ts` :
 ```ts
 import {isValidIso} from './dateFormat'
 const DATETIME_RE = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2}):(\d{2})$/
 export function isValidIsoDateTime(s: string): boolean {
  const m = DATETIME_RE.exec(s)
  if (!m) return false
  const [, date, hh, mm, ss] = m
  if (!isValidIso(date)) return false
  const h = Number(hh)
  const min = Number(mm)
  const sec = Number(ss)
  return h >= 0 && h <= 23 && min >= 0 && min <= 59 && sec >= 0 && sec <= 59
 }
 export function formatIsoDateTimeToDisplay(s: string | null): string {
  if (!s || !isValidIsoDateTime(s)) return ''
  const [date, time] = s.split('T')
  const [y, mo, d] = date.split('-')
  const [hh, mm] = time.split(':')
  return `${d}/${mo}/${y} ${hh}:${mm}`
 }
 export function splitDateTime(s: string | null): {date: string | null; time: string} {
  if (!s || !isValidIsoDateTime(s)) return {date: null, time: ''}
  const [date, time] = s.split('T')
  return {date, time: time.slice(0, 5)}
 }
 export function composeDateTime(date: string, time: string): string {
  const t = time || '00:00'
  return `${date}T${t}:00`
 }
 ```
 - [ ] **Step 4 : Lancer les tests pour vérifier qu'ils passent**
 Run: `npx vitest run app/components/malio/date/composables/datetimeFormat.test.ts`
 Expected: PASS (tous verts).
 - [ ] **Step 5 : Commit**
 ```bash
 git add app/components/malio/date/composables/datetimeFormat.ts app/components/malio/date/composables/datetimeFormat.test.ts
 git commit --no-verify -m "feat : composable datetimeFormat pour MalioDateTime (#MUI-33)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 ---
 ### Task 2 : Composant `DateTime.vue`
 **Files:**
 - Create: `app/components/malio/date/DateTime.vue`
 - Test: `app/components/malio/date/DateTime.test.ts`
 - [ ] **Step 1 : Écrire les tests qui échouent**
 Créer `app/components/malio/date/DateTime.test.ts` :
 ```ts
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import DateTime_ from './DateTime.vue'
 type DateTimeProps = {
  id?: string
  name?: string
  label?: string
  modelValue?: string | null
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  min?: string
  max?: string
  clearable?: boolean
  inputClass?: string
  labelClass?: string
  groupClass?: string
 }
 const DateTimeForTest = DateTime_ as DefineComponent<DateTimeProps>
 const mountDateTime = (props: DateTimeProps = {}) =>
  mount(DateTimeForTest, {props, attachTo: document.body})
 describe('MalioDateTime', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
  })
  afterEach(() => vi.useRealTimers())
  describe('rendu', () => {
    it('affiche le label et l\\'icône calendrier', () => {
      const wrapper = mountDateTime({label: 'Rendez-vous'})
      expect(wrapper.get('label').text()).toBe('Rendez-vous')
      expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
    })
    it('affiche la valeur formatée date + heure dans le champ', () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
      expect(input.value).toBe('20/05/2026 14:30')
    })
  })
  describe('popover', () => {
    it('ouvre la grille et l\\'input heure au clic', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
      expect(wrapper.find('[data-test="time-input"]').exists()).toBe(true)
    })
  })
  describe('sélection', () => {
    it('émet le jour à 00:00 et garde le popover ouvert', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T00:00:00'])
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
    })
    it('applique l\\'heure réglée avant le clic du jour', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      const time = wrapper.get('[data-test="time-input"]')
      ;(time.element as HTMLInputElement).value = '09:15'
      await time.trigger('input')
      // pas d'émission tant qu'aucun jour n'est choisi
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
    })
    it('met à jour l\\'heure quand une date est déjà choisie', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      const time = wrapper.get('[data-test="time-input"]')
      ;(time.element as HTMLInputElement).value = '08:45'
      await time.trigger('input')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
    })
    it('initialise l\\'input heure depuis la valeur', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      const time = wrapper.get('[data-test="time-input"]').element as HTMLInputElement
      expect(time.value).toBe('14:30')
    })
  })
  describe('bornes min/max', () => {
    it('désactive les jours hors bornes (datetime borné sur la date)', async () => {
      const wrapper = mountDateTime({min: '2026-05-10T00:00:00', max: '2026-05-20T00:00:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
      expect((outside.element as HTMLButtonElement).disabled).toBe(true)
    })
  })
  describe('effacement', () => {
    it('émet null au clic sur la croix', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="clear"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
    })
  })
  describe('accessibilité', () => {
    it('positionne aria-invalid et describedby sur erreur', () => {
      const wrapper = mountDateTime({error: 'Date requise'})
      const input = wrapper.get('[data-test="date-input"]')
      expect(input.attributes('aria-invalid')).toBe('true')
      expect(input.attributes('aria-describedby')).toBeTruthy()
      expect(wrapper.text()).toContain('Date requise')
    })
  })
 })
 ```
 - [ ] **Step 2 : Lancer les tests pour vérifier qu'ils échouent**
 Run: `npx vitest run app/components/malio/date/DateTime.test.ts`
 Expected: FAIL (`DateTime.vue` introuvable).
 - [ ] **Step 3 : Écrire l'implémentation**
 Créer `app/components/malio/date/DateTime.vue` :
 ```vue
 <template>
  <CalendarField
    :id="id"
    :display-value="displayValue"
    :sync-to="datePart"
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :required="required"
    :disabled="disabled"
    :readonly="readonly"
    :hint="hint"
    :error="error"
    :success="success"
    :clearable="clearable"
    :input-class="inputClass"
    :label-class="labelClass"
    :group-class="groupClass"
    v-bind="$attrs"
    @clear="onClear"
  >
    <template #default="{ currentMonth, currentYear }">
      <MonthGrid
        :month="currentMonth"
        :year="currentYear"
        :selected-date="datePart"
        :min="min?.slice(0, 10)"
        :max="max?.slice(0, 10)"
        @select="onSelectDay"
      />
      <!-- Bloc heure intérimaire : input natif, isolé pour remplacement futur par le sélecteur dédié. -->
      <div class="mt-[10px] flex items-center gap-2 border-t border-m-muted/30 pt-[10px]">
        <label
          :for="timeInputId"
          class="text-sm font-medium text-m-muted"
        >
          Heure
        </label>
        <input
          :id="timeInputId"
          data-test="time-input"
          type="time"
          :value="timeValue"
          class="rounded-md border border-m-muted bg-white px-2 py-1 text-base outline-none focus:border-m-primary"
          @input="onTimeInput"
        >
      </div>
    </template>
  </CalendarField>
 </template>
 <script setup lang="ts">
 import {computed, ref, useId, watch} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
 import {composeDateTime, formatIsoDateTimeToDisplay, isValidIsoDateTime, splitDateTime} from './composables/datetimeFormat'
 defineOptions({name: 'MalioDateTime', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    name?: string
    label?: string
    modelValue?: string | null
    placeholder?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    min?: string
    max?: string
    clearable?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
  }>(),
  {
    id: '',
    name: '',
    label: '',
    modelValue: undefined,
    placeholder: 'JJ/MM/AAAA HH:MM',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    min: undefined,
    max: undefined,
    clearable: true,
    inputClass: '',
    labelClass: '',
    groupClass: '',
  },
 )
 const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
 const generatedId = useId()
 const timeInputId = computed(() => `${props.id || `malio-datetime-${generatedId}`}-time`)
 // pendingTime : heure réglée avant qu'un jour ne soit choisi (sinon on ne peut pas émettre).
 const pendingTime = ref('')
 const parts = computed(() => splitDateTime(props.modelValue ?? null))
 const datePart = computed(() => parts.value.date)
 const displayValue = computed(() => formatIsoDateTimeToDisplay(props.modelValue ?? null))
 const timeValue = computed(() => parts.value.time || pendingTime.value)
 function onSelectDay(iso: string) {
  const time = parts.value.time || pendingTime.value || '00:00'
  emit('update:modelValue', composeDateTime(iso, time))
 }
 function onTimeInput(e: Event) {
  const value = (e.target as HTMLInputElement).value
  if (!value) return
  if (datePart.value) {
    emit('update:modelValue', composeDateTime(datePart.value, value))
  }
  else {
    pendingTime.value = value
  }
 }
 function onClear() {
  pendingTime.value = ''
  emit('update:modelValue', null)
 }
 watch(() => props.modelValue, (val) => {
  if (val && !isValidIsoDateTime(val) && import.meta.dev) {
    console.warn(`[MalioDateTime] modelValue invalide ignoré : "${val}"`)
  }
 })
 </script>
 ```
 - [ ] **Step 4 : Lancer les tests pour vérifier qu'ils passent**
 Run: `npx vitest run app/components/malio/date/DateTime.test.ts`
 Expected: PASS (tous verts).
 Note : si `@input` ne déclenche pas `value` correctement en jsdom, utiliser `await time.setValue('09:15')` à la place du couple `.value =` + `.trigger('input')` dans les tests.
 - [ ] **Step 5 : Commit**
 ```bash
 git add app/components/malio/date/DateTime.vue app/components/malio/date/DateTime.test.ts
 git commit --no-verify -m "feat : composant MalioDateTime (date + heure) (#MUI-33)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 ---
 ### Task 3 : Page playground + entrée nav
 **Files:**
 - Create: `.playground/pages/composant/date/datetime.vue`
 - Modify: `.playground/playground.nav.ts` (section `DATES & HEURES`)
 - [ ] **Step 1 : Créer la page playground**
 Créer `.playground/pages/composant/date/datetime.vue` :
 ```vue
 <template>
  <div class="space-y-6 p-4">
    <h1 class="text-2xl font-bold">MalioDateTime</h1>
    <div class="flex flex-wrap items-start gap-10">
      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">Simple</h2>
        <MalioDateTime
          v-model="value"
          label="Date et heure du rendez-vous"
          hint="Choisis un jour puis une heure"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p>
        </div>
        <button
          type="button"
          class="rounded border px-3 py-1.5"
          @click="value = null"
        >
          Réinitialiser
        </button>
      </div>
      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">Valeur initiale + bornes</h2>
        <MalioDateTime
          v-model="bounded"
          label="Créneau"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur (ISO naïf) : <code>{{ bounded ?? 'null' }}</code></p>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 const value = ref<string | null>(null)
 const bounded = ref<string | null>('2026-05-20T14:30:00')
 </script>
 ```
 - [ ] **Step 2 : Ajouter l'entrée nav**
 Dans `.playground/playground.nav.ts`, section `DATES & HEURES`, ajouter l'item après `Semaine` :
 ```ts
      {label: 'Date & heure', to: '/composant/date/datetime'},
 ```
 Le bloc devient :
 ```ts
    items: [
      {label: 'Date', to: '/composant/date/date'},
      {label: 'Plage de dates', to: '/composant/date/dateRange'},
      {label: 'Semaine', to: '/composant/date/dateWeek'},
      {label: 'Date & heure', to: '/composant/date/datetime'},
      {label: 'Heure', to: '/composant/time/time'},
    ],
 ```
 - [ ] **Step 3 : Vérifier le lint**
 Run: `npm run lint`
 Expected: PASS (pas d'erreur sur les fichiers playground).
 - [ ] **Step 4 : Commit**
 ```bash
 git add .playground/pages/composant/date/datetime.vue .playground/playground.nav.ts
 git commit --no-verify -m "feat : page playground MalioDateTime (#MUI-33)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 ---
 ### Task 4 : Story Histoire
 **Files:**
 - Create: `app/story/date/dateTime.story.vue`
 - [ ] **Step 1 : Créer la story**
 Créer `app/story/date/dateTime.story.vue` (nom de fichier camelCase pour éviter `vue/multi-word-component-names`) :
 ```vue
 <template>
  <Story title="Date/DateTime">
    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioDateTime
          v-model="simpleValue"
          label="Date et heure"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioDateTime
          v-model="initialValue"
          label="Rendez-vous"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
        <MalioDateTime
          v-model="boundedValue"
          label="Créneau"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioDateTime
          v-model="errorValue"
          label="Date limite"
          error="Date et heure requises"
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioDateTime
          v-model="initialValue"
          label="Désactivé"
          disabled
        />
      </div>
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
        <MalioDateTime
          v-model="initialValue"
          label="Lecture seule"
          readonly
        />
      </div>
    </div>
  </Story>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioDateTime from '../../components/malio/date/DateTime.vue'
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`
 const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 const simpleValue = ref<string | null>(null)
 const initialValue = ref<string | null>('2026-05-20T14:30:00')
 const boundedValue = ref<string | null>(null)
 const errorValue = ref<string | null>(null)
 </script>
 ```
 - [ ] **Step 2 : Vérifier le lint**
 Run: `npm run lint`
 Expected: PASS.
 - [ ] **Step 3 : Commit**
 ```bash
 git add app/story/date/dateTime.story.vue
 git commit --no-verify -m "docs : story Histoire pour MalioDateTime (#MUI-33)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 ---
 ### Task 5 : Documentation (COMPONENTS.md + CHANGELOG.md)
 **Files:**
 - Modify: `COMPONENTS.md`
 - Modify: `CHANGELOG.md`
 - [ ] **Step 1 : Ajouter la section dans COMPONENTS.md**
 Ouvrir `COMPONENTS.md`, repérer la section `MalioDate` (ou la famille date) et ajouter une section `MalioDateTime` calquée dessus, documentant :
 - Description : champ unique date + heure, popover (grille + sélecteur d'heure), version intérimaire avec `<input type="time">` natif.
 - `modelValue` : `string | null`, format `"YYYY-MM-DDTHH:MM:00"` (ISO naïf sans fuseau ; Symfony applique son fuseau).
 - Table des props identique à `MalioDate` (ajouter la note sur `min`/`max` bornant la date).
 - Émission `update:modelValue`.
 - Exemple d'usage :
 ```vue
 <MalioDateTime v-model="rdv" label="Date et heure du rendez-vous" />
 <!-- rdv === "2026-05-20T14:30:00" -->
 ```
 - Note : le sélecteur d'heure est intérimaire et sera remplacé par un composant dédié (maquette à venir).
 Respecter le style et la structure exacts des sections existantes (titres, tableaux markdown).
 - [ ] **Step 2 : Ajouter l'entrée CHANGELOG.md**
 Dans `CHANGELOG.md`, sous `## [0.0.0]` → `### Added`, ajouter après la ligne `[#MUI-33] Développer le composant Datepicker` :
 ```
 * [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire)
 ```
 - [ ] **Step 3 : Commit**
 ```bash
 git add COMPONENTS.md CHANGELOG.md
 git commit --no-verify -m "docs : documente MalioDateTime (COMPONENTS + CHANGELOG) (#MUI-33)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 ---
 ## Vérification finale
 - [ ] `npx vitest run app/components/malio/date/` → toute la famille date verte.
 - [ ] `npm run lint` → pas d'erreur.
 - [ ] Revue finale du composant (cohérence avec la famille date, isolation du bloc heure pour remplacement futur).
@@ -1,979 +0,0 @@
 # MalioModal 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 un composant `MalioModal` (dialogue modal centré) autonome à `@malio/layer-ui`, sans modifier le Drawer existant.
 **Architecture:** Composant Vue SFC unique `app/components/malio/modal/Modal.vue`, auto-importé comme `<MalioModal>`. Réimplémente sa propre logique (Teleport, focus-trap, scroll-lock partagé via compteur module-level, pattern contrôlé/non-contrôlé, transition fade+scale) en s'inspirant du Drawer. Structure : header fixe / body scrollable / footer fixe.
 **Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, Tailwind (tokens `m-*`), `tailwind-merge`, `@iconify/vue`, Vitest + `@vue/test-utils` (jsdom), Histoire.
 **Spec:** `docs/superpowers/specs/2026-05-26-modal-design.md`
 **Conventions projet à respecter :**
 - Commits Conventional **avec espace avant les `:`** : `feat : … (#MUI-36)`, `docs : …`, `test : …`. Type en minuscules, pas de préfixe `[#…]`. Finir par la ligne `Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>`.
 - Le hook pre-commit lance lint + ~595 tests et **time out de façon flaky** sous WSL2. Pattern : réessayer ; après 2 échecs flaky (échecs différents d'un run à l'autre), vérifier les tests ciblés à la main (`npx vitest run <chemin>`) puis committer avec `--no-verify`.
 - Story : nom de fichier sous un dossier (`story/modal/modal.story.vue`) ; `defineOptions({ name: 'ModalStory' })` pour éviter `vue/multi-word-component-names`.
 **File Structure:**
 - Create `app/components/malio/modal/Modal.vue` — le composant (≈ taille du Drawer).
 - Create `app/components/malio/modal/Modal.test.ts` — tests colocalisés.
 - Create `.playground/pages/composant/modal/modal.vue` — page de démo (route `/composant/modal/modal`).
 - Modify `.playground/playground.nav.ts` — ajout de l'entrée nav dans la section `NAVIGATION`.
 - Create `app/story/modal/modal.story.vue` — story Histoire.
 - Modify `COMPONENTS.md` — section `## MalioModal` (insérée après la section `## MalioDrawer`).
 - Modify `CHANGELOG.md` — ligne sous `### Added`.
 ---
 ### Task 1: Composant MalioModal + suite de tests (cycle TDD)
 **Files:**
 - Create: `app/components/malio/modal/Modal.test.ts`
 - Create: `app/components/malio/modal/Modal.vue`
 - [ ] **Step 1: Écrire la suite de tests qui échoue**
 Create `app/components/malio/modal/Modal.test.ts` :
 ```ts
 import { afterEach, describe, expect, it } from 'vitest'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import type { DefineComponent } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import Modal from './Modal.vue'
 type ModalProps = {
  id?: string
  modelValue?: boolean
  showClose?: boolean
  dismissable?: boolean
  closeOnEscape?: boolean
  ariaLabel?: string
  modalClass?: string
  overlayClass?: string
  headerClass?: string
  bodyClass?: string
  footerClass?: string
 }
 const ModalForTest = Modal as DefineComponent<ModalProps>
 function mountComponent(props: ModalProps = {}, slots?: Record<string, string>) {
  return mount(ModalForTest, {
    props,
    slots,
    global: { stubs: { Teleport: true } },
  })
 }
 describe('MalioModal', () => {
  enableAutoUnmount(afterEach)
  afterEach(() => {
    document.body.style.overflow = ''
  })
  it('does not render when modelValue is false', () => {
    const wrapper = mountComponent({ modelValue: false })
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
  })
  it('renders the panel when modelValue is true', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
  })
  it('centers the modal (items-center justify-center)', () => {
    const wrapper = mountComponent({ modelValue: true })
    const root = wrapper.find('.fixed')
    expect(root.classes()).toContain('items-center')
    expect(root.classes()).toContain('justify-center')
  })
  it('renders default slot in the body', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { default: '<p data-test="content">Contenu</p>' },
    )
    expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
  })
  it('works in uncontrolled mode (defaults closed)', () => {
    const wrapper = mountComponent()
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
  })
  it('uses custom id when provided', () => {
    const wrapper = mountComponent({ modelValue: true, id: 'my-modal' })
    expect(wrapper.find('.fixed').attributes('id')).toBe('my-modal')
  })
  it('generates an id when not provided', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-modal-/)
  })
  it('has role="dialog" and aria-modal on the panel', () => {
    const wrapper = mountComponent({ modelValue: true })
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('role')).toBe('dialog')
    expect(panel.attributes('aria-modal')).toBe('true')
  })
  it('applies modalClass to the panel', () => {
    const wrapper = mountComponent({ modelValue: true, modalClass: 'max-w-2xl' })
    expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
  })
  it('renders the #header slot inside the header bar', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { header: '<h2 data-test="title">Titre</h2>' },
    )
    expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
  })
  it('renders the header bar when showClose is true even without #header', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
  })
  it('does not render the header bar when no #header and showClose is false', () => {
    const wrapper = mountComponent({ modelValue: true, showClose: false })
    expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
  })
  it('shows the close button by default', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
  })
  it('hides the close button when showClose is false', () => {
    const wrapper = mountComponent(
      { modelValue: true, showClose: false },
      { header: '<h2>Titre</h2>' },
    )
    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
  })
  it('close button renders mdi:cancel-bold icon', () => {
    const wrapper = mountComponent({ modelValue: true })
    const icon = wrapper.findComponent(IconifyIcon)
    expect(icon.props('icon')).toBe('mdi:cancel-bold')
  })
  it('close button has aria-label "Fermer"', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
  })
  it('emits update:modelValue false and close on close button click', async () => {
    const wrapper = mountComponent({ modelValue: true })
    await wrapper.find('[data-test="close-button"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
    expect(wrapper.emitted('close')).toHaveLength(1)
  })
  it('sets aria-labelledby to the header id when #header is provided', () => {
    const wrapper = mountComponent(
      { modelValue: true, id: 'test-modal' },
      { header: '<h2>Titre</h2>' },
    )
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-labelledby')).toBe('test-modal-header')
    expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-modal-header')
  })
  it('sets aria-label from ariaLabel when no #header is provided', () => {
    const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Boîte de dialogue' })
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-label')).toBe('Boîte de dialogue')
    expect(panel.attributes('aria-labelledby')).toBeUndefined()
  })
  it('applies headerClass to the header bar', () => {
    const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
    expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
  })
  it('renders the #footer slot in a footer pinned below the body', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { footer: '<button data-test="save">Enregistrer</button>' },
    )
    // le footer n'est PAS dans la zone scrollable (≠ Drawer)
    expect(wrapper.find('[data-test="body"] [data-test="footer"]').exists()).toBe(false)
    expect(wrapper.find('[data-test="footer"] [data-test="save"]').exists()).toBe(true)
  })
  it('does not render the footer when no #footer slot', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
  })
  it('applies bodyClass to the body', () => {
    const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
    expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
  })
  it('applies footerClass to the footer', () => {
    const wrapper = mountComponent(
      { modelValue: true, footerClass: 'justify-end' },
      { footer: '<span>pied</span>' },
    )
    expect(wrapper.find('[data-test="footer"]').classes()).toContain('justify-end')
  })
  it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
    const wrapper = mountComponent({ modelValue: true })
    await wrapper.find('[data-test="backdrop"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
    expect(wrapper.emitted('close')).toHaveLength(1)
  })
  it('does not close on backdrop click when dismissable is false', async () => {
    const wrapper = mountComponent({ modelValue: true, dismissable: false })
    await wrapper.find('[data-test="backdrop"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
  })
  it('applies overlayClass to the backdrop', () => {
    const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
    expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
  })
  it('closes on Escape key when closeOnEscape is true', async () => {
    const wrapper = mountComponent({ modelValue: true })
    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
    expect(wrapper.emitted('close')).toHaveLength(1)
  })
  it('does not close on Escape when closeOnEscape is false', async () => {
    const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
  })
  it('locks body scroll when opened and restores it when closed', async () => {
    const wrapper = mountComponent({ modelValue: false })
    expect(document.body.style.overflow).toBe('')
    await wrapper.setProps({ modelValue: true })
    expect(document.body.style.overflow).toBe('hidden')
    await wrapper.setProps({ modelValue: false })
    expect(document.body.style.overflow).toBe('')
  })
  it('moves focus into the panel when opened', async () => {
    const wrapper = mount(ModalForTest, {
      props: { modelValue: false, showClose: false },
      slots: { default: '<button data-test="first">OK</button>' },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.setProps({ modelValue: true })
    await wrapper.vm.$nextTick()
    const first = wrapper.find('[data-test="first"]').element
    expect(document.activeElement).toBe(first)
    wrapper.unmount()
  })
  it('restores focus to the trigger when closed', async () => {
    const trigger = document.createElement('button')
    document.body.appendChild(trigger)
    trigger.focus()
    expect(document.activeElement).toBe(trigger)
    const wrapper = mount(ModalForTest, {
      props: { modelValue: false },
      slots: { default: '<button>OK</button>' },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.setProps({ modelValue: true })
    await wrapper.vm.$nextTick()
    await wrapper.setProps({ modelValue: false })
    await wrapper.vm.$nextTick()
    expect(document.activeElement).toBe(trigger)
    wrapper.unmount()
    trigger.remove()
  })
  it('wraps focus to the first element when Tab is pressed on the last element', async () => {
    const wrapper = mount(ModalForTest, {
      props: { modelValue: true, showClose: false },
      slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.vm.$nextTick()
    const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
    last.focus()
    expect(document.activeElement).toBe(last)
    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
    expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
    wrapper.unmount()
  })
  it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
    const wrapper = mount(ModalForTest, {
      props: { modelValue: true, showClose: false },
      slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.vm.$nextTick()
    const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
    first.focus()
    expect(document.activeElement).toBe(first)
    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
    expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
    wrapper.unmount()
  })
  it('does not release body scroll-lock when one stacked modal closes while another is still open', async () => {
    const wrapperA = mount(ModalForTest, {
      props: { modelValue: false },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    const wrapperB = mount(ModalForTest, {
      props: { modelValue: false },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapperA.setProps({ modelValue: true })
    expect(document.body.style.overflow).toBe('hidden')
    await wrapperB.setProps({ modelValue: true })
    expect(document.body.style.overflow).toBe('hidden')
    await wrapperB.setProps({ modelValue: false })
    expect(document.body.style.overflow).toBe('hidden')
    await wrapperA.setProps({ modelValue: false })
    expect(document.body.style.overflow).toBe('')
  })
 })
 ```
 - [ ] **Step 2: Lancer les tests pour vérifier qu'ils échouent**
 Run: `npx vitest run app/components/malio/modal/Modal.test.ts`
 Expected: FAIL — `Failed to resolve import "./Modal.vue"` (le composant n'existe pas encore).
 - [ ] **Step 3: Implémenter le composant**
 Create `app/components/malio/modal/Modal.vue` :
 ```vue
 <template>
  <Teleport to="body">
    <Transition
      name="modal"
      appear
      @after-leave="isRendered = false"
    >
      <div
        v-if="isRendered && isOpen"
        :id="componentId"
        class="fixed inset-0 z-50 flex items-center justify-center p-4"
        v-bind="attrs"
      >
        <div
          :class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
          data-test="backdrop"
          @click="onBackdropClick"
        />
        <div
          ref="panelRef"
          :class="twMerge(
            'relative z-50 flex max-h-[85vh] w-full max-w-md flex-col rounded-malio bg-white',
            modalClass,
          )"
          role="dialog"
          aria-modal="true"
          :aria-labelledby="hasHeader ? headerId : undefined"
          :aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
          tabindex="-1"
          data-test="panel"
          @keydown="onKeydown"
        >
          <div
            v-if="hasHeader || showClose"
            :class="twMerge('flex shrink-0 items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
            data-test="header"
          >
            <div
              :id="headerId"
              class="min-w-0 flex-1"
              data-test="header-content"
            >
              <slot name="header" />
            </div>
            <button
              v-if="showClose"
              type="button"
              aria-label="Fermer"
              class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
              data-test="close-button"
              @click="close"
            >
              <IconifyIcon
                icon="mdi:cancel-bold"
                :width="16"
                :height="16"
              />
            </button>
          </div>
          <div
            :class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
            data-test="body"
          >
            <slot />
          </div>
          <div
            v-if="$slots.footer"
            :class="twMerge('flex shrink-0 items-center gap-3 border-t border-m-border px-5 py-4', footerClass)"
            data-test="footer"
          >
            <slot name="footer" />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
 </template>
 <script setup lang="ts">
 import {
  computed,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  useAttrs,
  useId,
  useSlots,
  watch,
 } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { twMerge } from 'tailwind-merge'
 defineOptions({ name: 'MalioModal', inheritAttrs: false })
 const props = withDefaults(
  defineProps<{
    id?: string
    modelValue?: boolean
    showClose?: boolean
    dismissable?: boolean
    closeOnEscape?: boolean
    ariaLabel?: string
    modalClass?: string
    overlayClass?: string
    headerClass?: string
    bodyClass?: string
    footerClass?: string
  }>(),
  {
    id: '',
    modelValue: undefined,
    showClose: true,
    dismissable: true,
    closeOnEscape: true,
    ariaLabel: '',
    modalClass: '',
    overlayClass: '',
    headerClass: '',
    bodyClass: '',
    footerClass: '',
  },
 )
 const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
 }>()
 const attrs = useAttrs()
 const generatedId = useId()
 const componentId = computed(() => props.id || `malio-modal-${generatedId}`)
 const slots = useSlots()
 const headerId = computed(() => `${componentId.value}-header`)
 const hasHeader = computed(() => !!slots.header)
 const isControlled = computed(() => props.modelValue !== undefined)
 const localValue = ref(false)
 const isOpen = computed(() =>
  isControlled.value ? props.modelValue! : localValue.value,
 )
 const isRendered = ref(isOpen.value)
 const panelRef = ref<HTMLElement | null>(null)
 let previouslyFocused: HTMLElement | null = null
 // Per-instance flag: true while this modal holds a scroll-lock count slot.
 let lockedByThisInstance = false
 function getFocusable(container: HTMLElement): HTMLElement[] {
  return Array.from(
    container.querySelectorAll<HTMLElement>(
      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
    ),
  ).filter((el) => el.tabIndex !== -1)
 }
 function onOpen() {
  previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
  if (!lockedByThisInstance) {
    lockedByThisInstance = true
    openModalCount++
    if (openModalCount === 1) {
      document.body.style.overflow = 'hidden'
    }
  }
  nextTick(() => {
    const panel = panelRef.value
    if (!panel) return
    const focusable = getFocusable(panel)
    ;(focusable[0] ?? panel).focus()
  })
 }
 function onClose() {
  if (lockedByThisInstance) {
    lockedByThisInstance = false
    openModalCount = Math.max(0, openModalCount - 1)
    if (openModalCount === 0) {
      document.body.style.overflow = ''
    }
  }
  previouslyFocused?.focus?.()
  previouslyFocused = null
 }
 watch(isOpen, (val) => {
  if (val) {
    isRendered.value = true
    onOpen()
  }
  else {
    onClose()
  }
 })
 onMounted(() => {
  if (isOpen.value) onOpen()
 })
 onBeforeUnmount(() => {
  // If this instance is still holding a scroll-lock slot, release it.
  if (lockedByThisInstance) {
    lockedByThisInstance = false
    openModalCount = Math.max(0, openModalCount - 1)
    if (openModalCount === 0) {
      document.body.style.overflow = ''
    }
  }
 })
 function onBackdropClick() {
  if (props.dismissable) close()
 }
 function onKeydown(e: KeyboardEvent) {
  if (e.key === 'Escape' && props.closeOnEscape) {
    e.stopPropagation()
    close()
    return
  }
  if (e.key !== 'Tab') return
  const panel = panelRef.value
  if (!panel) return
  const focusable = getFocusable(panel)
  if (focusable.length === 0) {
    e.preventDefault()
    panel.focus()
    return
  }
  const first = focusable[0]!
  const last = focusable[focusable.length - 1]!
  if (e.shiftKey && document.activeElement === first) {
    e.preventDefault()
    last.focus()
  }
  else if (!e.shiftKey && document.activeElement === last) {
    e.preventDefault()
    first.focus()
  }
 }
 function close() {
  if (!isControlled.value) localValue.value = false
  emit('update:modelValue', false)
  emit('close')
 }
 </script>
 <script lang="ts">
 // Shared across all MalioModal instances: only the last open modal releases the body scroll-lock.
 let openModalCount = 0
 </script>
 <style scoped>
 .modal-enter-active,
 .modal-leave-active {
  transition: opacity 0.2s ease;
 }
 .modal-enter-active > div:last-child,
 .modal-leave-active > div:last-child {
  transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .modal-enter-from,
 .modal-leave-to {
  opacity: 0;
 }
 .modal-enter-from > div:last-child,
 .modal-leave-to > div:last-child {
  transform: scale(0.95);
  opacity: 0;
 }
 </style>
 ```
 - [ ] **Step 4: Lancer les tests pour vérifier qu'ils passent**
 Run: `npx vitest run app/components/malio/modal/Modal.test.ts`
 Expected: PASS — tous les tests (≈ 32) verts.
 - [ ] **Step 5: Lint**
 Run: `npm run lint`
 Expected: 0 erreur sur les fichiers du composant.
 - [ ] **Step 6: Commit**
 ```bash
 git add app/components/malio/modal/Modal.vue app/components/malio/modal/Modal.test.ts
 git commit -m "feat : composant Modal (#MUI-36)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 (En cas de timeout flaky pre-commit, voir le pattern conventions en tête de plan : retry ×2 puis `--no-verify` après vérif ciblée `npx vitest run app/components/malio/modal/Modal.test.ts`.)
 ---
 ### Task 2: Page playground + entrée nav
 **Files:**
 - Create: `.playground/pages/composant/modal/modal.vue`
 - Modify: `.playground/playground.nav.ts` (section `NAVIGATION`, après le Drawer)
 - [ ] **Step 1: Créer la page de démo**
 Create `.playground/pages/composant/modal/modal.vue` :
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
 const modalBase = ref(false)
 const modalForm = ref(false)
 const modalLong = ref(false)
 const modalNoDismiss = ref(false)
 </script>
 <template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Modal simple</h2>
      <MalioButton label="Ouvrir" @click="modalBase = true" />
      <MalioModal v-model="modalBase">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Détails</h2>
        </template>
        <p class="text-m-text">Contenu de la modal. Échap, clic backdrop et croix la ferment.</p>
      </MalioModal>
    </div>
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
      <MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="modalForm = true" />
      <MalioModal v-model="modalForm" modal-class="max-w-lg">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
        </template>
        <div class="flex flex-col gap-4 py-2">
          <MalioInputText label="Nom" />
          <MalioInputText label="Prénom" />
          <MalioInputText label="Email" />
        </div>
        <template #footer>
          <MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="modalForm = false" />
          <MalioButton label="Enregistrer" button-class="flex-1" @click="modalForm = false" />
        </template>
      </MalioModal>
    </div>
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Contenu long (body scrollable)</h2>
      <MalioButton label="Ouvrir" variant="tertiary" @click="modalLong = true" />
      <MalioModal v-model="modalLong">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Conditions</h2>
        </template>
        <div class="flex flex-col gap-4">
          <p v-for="n in 20" :key="n" class="text-m-text">
            Paragraphe {{ n }} — contenu long pour forcer le scroll interne ; le header et le footer restent fixes.
          </p>
        </div>
        <template #footer>
          <MalioButton label="Accepter" button-class="w-full" @click="modalLong = false" />
        </template>
      </MalioModal>
    </div>
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
      <MalioButton label="Ouvrir" variant="danger" @click="modalNoDismiss = true" />
      <MalioModal v-model="modalNoDismiss" :dismissable="false" :close-on-escape="false">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Action requise</h2>
        </template>
        <p class="text-m-text">Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
      </MalioModal>
    </div>
  </div>
 </template>
 ```
 - [ ] **Step 2: Ajouter l'entrée nav**
 Modify `.playground/playground.nav.ts`, dans la section `NAVIGATION`, ajouter la ligne Modal juste après le Drawer :
 ```ts
  {
    label: 'NAVIGATION',
    icon: 'mdi:navigation-variant',
    items: [
      {label: 'Sidebar', to: '/composant/sidebar/sidebar'},
      {label: 'Drawer', to: '/composant/drawer/drawer'},
      {label: 'Modal', to: '/composant/modal/modal'},
      {label: 'Onglets', to: '/composant/tab/tabList'},
    ],
  },
 ```
 - [ ] **Step 3: Vérifier le lint**
 Run: `npm run lint`
 Expected: 0 erreur.
 - [ ] **Step 4: Commit**
 ```bash
 git add .playground/pages/composant/modal/modal.vue .playground/playground.nav.ts
 git commit -m "docs : page playground Modal (#MUI-36)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 ---
 ### Task 3: Story Histoire
 **Files:**
 - Create: `app/story/modal/modal.story.vue`
 - [ ] **Step 1: Créer la story**
 Create `app/story/modal/modal.story.vue` :
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
 defineOptions({ name: 'ModalStory' })
 const showBase = ref(false)
 const showForm = ref(false)
 const showNoDismiss = ref(false)
 </script>
 <template>
  <Story title="Overlay/Modal">
    <Variant title="Simple">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showBase = true"
        >
          Ouvrir
        </button>
        <MalioModal v-model="showBase">
          <template #header>
            <h2 class="text-xl font-bold">Détails</h2>
          </template>
          <p>Contenu simple de la modal.</p>
        </MalioModal>
      </div>
    </Variant>
    <Variant title="Avec footer d'actions">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showForm = true"
        >
          Ouvrir le formulaire
        </button>
        <MalioModal v-model="showForm" modal-class="max-w-lg">
          <template #header>
            <h2 class="text-xl font-bold">Nouveau contact</h2>
          </template>
          <div class="flex flex-col gap-4 py-2">
            <MalioInputText label="Nom" />
            <MalioInputText label="Prénom" />
          </div>
          <template #footer>
            <MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
          </template>
        </MalioModal>
      </div>
    </Variant>
    <Variant title="Non dismissable">
      <div class="p-4">
        <button
          class="rounded bg-m-btn-primary px-4 py-2 text-white"
          @click="showNoDismiss = true"
        >
          Ouvrir
        </button>
        <MalioModal v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
          <template #header>
            <h2 class="text-xl font-bold">Action requise</h2>
          </template>
          <p>Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
        </MalioModal>
      </div>
    </Variant>
  </Story>
 </template>
 ```
 - [ ] **Step 2: Vérifier le lint**
 Run: `npm run lint`
 Expected: 0 erreur (notamment pas de `vue/multi-word-component-names` grâce au `defineOptions`).
 - [ ] **Step 3: Commit**
 ```bash
 git add app/story/modal/modal.story.vue
 git commit -m "docs : story Histoire Modal (#MUI-36)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 ---
 ### Task 4: Documentation (COMPONENTS.md + CHANGELOG.md)
 **Files:**
 - Modify: `COMPONENTS.md` (insérer après la section `## MalioDrawer`, juste avant `## MalioDataTable`)
 - Modify: `CHANGELOG.md` (ligne sous `### Added`)
 - [ ] **Step 1: Ajouter la section dans COMPONENTS.md**
 Dans `COMPONENTS.md`, insérer ce bloc juste après le `---` qui clôt la section `## MalioDrawer` (et avant `## MalioDataTable`) :
 ```markdown
 ## MalioModal
 Boîte de dialogue modale centrée avec backdrop semi-transparent. Gère l'accessibilité (focus-trap, restitution du focus, `Échap`), le verrouillage du scroll de la page et un empilement correct de plusieurs modals. Structure : header fixe, body scrollable (`max-h-[85vh]`), footer fixe.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
 | `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
 | `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
 | `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
 | `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
 | `modalClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-lg` (twMerge) |
 | `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
 | `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
 | `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
 | `footerClass` | `string` | `''` | Classes CSS footer fixe (twMerge) |
 **Events :** `update:modelValue(value: boolean)`, `close()`
 **Slots :**
 - `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
 - `default` — contenu (zone scrollable).
 - `footer` — actions (boutons). Rendu en bas, fixe, séparé par une bordure. N'apparaît que si le slot est fourni.
 ```vue
 <MalioModal v-model="isOpen">
  <template #header>
    <h2 class="text-[24px] font-bold">Détails</h2>
  </template>
  <p>Contenu de la modal</p>
 </MalioModal>
 <!-- Largeur custom + footer d'actions -->
 <MalioModal v-model="isOpen" modal-class="max-w-lg">
  <template #header><h2>Nouveau contact</h2></template>
  <MalioInputText label="Nom" />
  <template #footer>
    <MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="isOpen = false" />
    <MalioButton label="Enregistrer" button-class="flex-1" @click="isOpen = false" />
  </template>
 </MalioModal>
 <!-- Non fermable au backdrop / Échap (croix uniquement) -->
 <MalioModal v-model="isOpen" :dismissable="false" :close-on-escape="false">
  <template #header><h2>Action requise</h2></template>
  <p>Fermeture via la croix uniquement</p>
 </MalioModal>
 ```
 ---
 ```
 - [ ] **Step 2: Ajouter l'entrée CHANGELOG**
 Dans `CHANGELOG.md`, sous `### Added`, ajouter en dernière ligne de la liste (après la ligne DateTime) :
 ```markdown
 * [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
 ```
 - [ ] **Step 3: Commit**
 ```bash
 git add COMPONENTS.md CHANGELOG.md
 git commit -m "docs : documentation du composant Modal (#MUI-36)
 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
 ```
 ---
 ## Vérification finale
 - [ ] `npx vitest run app/components/malio/modal/Modal.test.ts` → tous verts.
 - [ ] `npm run lint` → 0 erreur.
 - [ ] `npm run dev` → la page `/composant/modal/modal` s'affiche, l'entrée « Modal » est dans la nav sous NAVIGATION, les 4 démos fonctionnent (ouverture, fermeture backdrop/Échap/croix, scroll interne, non-dismissable).
@@ -1,373 +0,0 @@
 # MalioDate — Design Spec
 Composant de sélection de date avec champ + popover calendrier. Première brique d'une famille de pickers temporels (futurs `DateRange`, `DateTime`).
 **Ticket :** MUI-33
 **Branche :** `feature/MUI-33-developper-le-composant-datepicker`
 ## Périmètre v1
 Sélection d'une date unique via un calendrier. Le champ est **readonly** (clic uniquement, pas de saisie clavier en v1). Locale FR hardcodée, semaine commençant le lundi.
 **Inclus en v1 :**
 - Affichage `JJ/MM/AAAA` dans le champ, valeur ISO `YYYY-MM-DD` en `modelValue`
 - Surlignage du jour sélectionné et du jour "aujourd'hui"
 - Jours du mois précédent/suivant affichés grisés mais cliquables (naviguent vers le mois cible)
 - Bornes `min` / `max` (jours hors bornes désactivés)
 - Bouton effacer (croix) si `clearable`
 - Vue mois (grille 4×3) accessible via clic sur `Mois Année ⌄` dans le header
 - Numéros de semaine ISO 8601 dans une colonne à fond `m-primary/10`
 **Reporté à plus tard :**
 - Saisie clavier dans le champ (parsing `JJ/MM/AAAA` manuel)
 - Navigation clavier dans la grille (flèches, Enter, Escape)
 - Vue années (sélection rapide d'une année)
 - Prop `disabledDates` (prédicat ou array)
 - i18n (autres langues)
 ## Architecture
 Composant public unique `<MalioDate>` (autoimporté depuis `app/components/malio/date/Date.vue`), composé de sous-composants internes et de modules utilitaires colocalisés.
 ```
 app/components/malio/date/
  Date.vue                       # composant public (orchestration)
  Date.test.ts
  internal/
    CalendarHeader.vue           # header mois/année + chevrons + toggle vue
    MonthGrid.vue                # grille 6×7 jours + colonne semaine
    MonthPicker.vue              # grille 4×3 mois
  composables/
    useMonthMatrix.ts            # calcule la matrice 6×7 + n° semaines ISO
    dateFormat.ts                # fonctions pures de format/parsing/validation
    useCalendarPopover.ts        # état ouvert/fermé + click outside
 ```
 Les sous-composants `internal/` ne sont pas destinés à être consommés directement. Ils seront réutilisés par `DateRange` et `DateTime` à venir.
 ## Type `modelValue`
 `string | null`, au format ISO `YYYY-MM-DD`. Le composant interne convertit en affichage `JJ/MM/AAAA` via `dateFormat.formatIsoToDisplay()`. Cette représentation a été retenue pour :
 - Cohérence avec `<MalioTime>` qui émet déjà une string (`"HH:MM"`)
 - Sérialisation directe vers une API REST/JSON sans conversion
 - Pas de piège de fuseau horaire (un objet `Date` JS porte une heure + un fuseau)
 - Comparaison lexicographique = comparaison chronologique (utile pour `min`/`max`)
 ## Props
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto-généré | Identifiant HTML du champ |
 | `name` | `string` | `''` | Attribut `name` pour les `<form>` |
 | `label` | `string` | `''` | Label flottant |
 | `modelValue` | `string \| null` | `undefined` | Date ISO `YYYY-MM-DD` (v-model) |
 | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder du champ |
 | `required` | `boolean` | `false` | Attribut required |
 | `disabled` | `boolean` | `false` | Verrouille champ et calendrier |
 | `readonly` | `boolean` | `false` | Affiche la valeur mais bloque l'ouverture |
 | `hint` | `string` | `''` | Texte d'aide sous le champ |
 | `error` | `string` | `''` | Message d'erreur (bordure et texte rouges) |
 | `success` | `string` | `''` | Message succès (bordure et texte verts) |
 | `min` | `string` | `undefined` | Borne inférieure incluse, format ISO |
 | `max` | `string` | `undefined` | Borne supérieure incluse, format ISO |
 | `clearable` | `boolean` | `true` | Affiche une croix pour effacer la valeur |
 | `inputClass` | `string` | `''` | Override classes input (twMerge) |
 | `labelClass` | `string` | `''` | Override classes label (twMerge) |
 | `groupClass` | `string` | `''` | Override classes wrapper (twMerge) |
 Si `min`/`max` sont invalides (format incorrect ou `min > max`), ils sont ignorés silencieusement avec un warning console en dev.
 ## Events
 | Event | Payload | Description |
 |-------|---------|-------------|
 | `update:modelValue` | `string \| null` | Date ISO sélectionnée, ou `null` si effacée |
 ## Slots
 Aucun slot en v1. L'icône calendrier est fixée (`mdi:calendar-outline`).
 ## Sous-composants internes
 ### `CalendarHeader.vue`
 Affiche la barre du haut du popover : `[‹] Mois Année [⌄] [›]`.
 **Props :**
 - `viewMode: 'days' | 'months'`
 - `currentMonth: number` (0-11)
 - `currentYear: number`
 **Events :**
 - `prev` — chevron gauche (interprété par le parent : mois précédent en vue jours, année précédente en vue mois)
 - `next` — chevron droit (idem)
 - `toggle-view` — clic sur le bouton central
 ### `MonthGrid.vue`
 Rend la grille 6 lignes × 8 colonnes (semaine + 7 jours).
 **Props :**
 - `month: number` (0-11)
 - `year: number`
 - `selectedDate?: string | null` (ISO)
 - `min?: string` (ISO)
 - `max?: string` (ISO)
 **Events :**
 - `select` payload `string` — date ISO `YYYY-MM-DD` du jour cliqué
 Utilise `useMonthMatrix(month, year)` pour générer les 6 lignes. La grille fait toujours 6 lignes (forcé) pour stabiliser la hauteur du popover entre les mois.
 ### `MonthPicker.vue`
 Rend la grille 4×3 des mois.
 **Props :**
 - `selectedMonth?: number` (0-11, mois courant à surligner)
 **Events :**
 - `select` payload `number` (0-11)
 Pas de gestion `min`/`max` au niveau mois en v1 — `MonthGrid` filtrera les jours hors bornes au retour vue jours.
 ## Composables
 ### `useMonthMatrix.ts`
 ```ts
 type DayCell = {
  isoDate: string        // "YYYY-MM-DD"
  day: number            // 1-31
  isCurrentMonth: boolean
  isToday: boolean
 }
 type WeekRow = {
  weekNumber: number     // ISO 8601, 1-53
  days: DayCell[]        // toujours 7, Lun → Dim
 }
 function useMonthMatrix(
  month: Ref<number>,
  year: Ref<number>
 ): { weeks: ComputedRef<WeekRow[]> }
 ```
 Le premier jour de la grille est le lundi de la semaine contenant le 1er du mois affiché. La grille fait **toujours** 6 lignes (`WeekRow[]` de longueur 6), au besoin en débordant sur le mois suivant.
 Les numéros de semaine suivent **ISO 8601** : la semaine 1 contient le premier jeudi de l'année.
 ### `dateFormat.ts`
 Module de fonctions pures, **pas un composable réactif**. Le nommage sans préfixe `use` reflète sa nature.
 ```ts
 function formatIsoToDisplay(iso: string | null): string
 // "2026-05-19" → "19/05/2026", null/invalide → ""
 function parseDisplayToIso(display: string): string | null
 // "19/05/2026" → "2026-05-19", invalide → null
 function isValidIso(iso: string): boolean
 // "2026-05-19" → true, "2026-13-45" → false
 function isDateInRange(iso: string, min?: string, max?: string): boolean
 // Comparaison lexicographique (= chronologique pour ISO)
 ```
 `parseDisplayToIso` est écrit dès la v1 même si non utilisé (le champ est readonly) — il sera réutilisé en v2 quand on rendra le champ éditable.
 ### `useCalendarPopover.ts`
 ```ts
 function useCalendarPopover(rootRef: Ref<HTMLElement | null>): {
  isOpen: Ref<boolean>
  viewMode: Ref<'days' | 'months'>
  open: () => void
  close: () => void
  toggleView: () => void
 }
 ```
 - `isOpen` et `viewMode` reset à `false` / `'days'` à la fermeture
 - Listener `mousedown` global attaché à `onMounted`, retiré à `onBeforeUnmount`
 - Fermeture si le clic est hors de `rootRef`
 - Pas de gestion clavier en v1
 ## Comportements détaillés
 ### Ouverture du popover
 Clic sur le champ ou l'icône calendrier (sauf si `disabled` ou `readonly`) → `open()`. Vue initiale :
 - Si `modelValue` valide → grille du mois de cette date
 - Sinon → grille du mois courant (`new Date()`)
 Le champ passe en mode "popover ouvert" : bordure du bas retirée, `rounded-b-none`, bordure latérale colorée (`m-primary` ou `m-danger`/`m-success` selon état).
 ### Sélection d'un jour (vue jours)
 Clic sur une cellule jour cliquable :
 1. Émission `update:modelValue` avec la date ISO
 2. Fermeture du popover
 3. Réaffichage du champ avec la valeur formatée `JJ/MM/AAAA`
 Cas spéciaux :
 - Jour hors mois courant : sélection normale, le popover se ferme (peu importe que la vue interne saute au mois cible, elle n'est plus visible)
 - Jour hors `min`/`max` : non cliquable, `cursor-not-allowed`, pas d'émission
 - Re-clic sur la date déjà sélectionnée : ré-émission de la même valeur, popover ferme
 ### Navigation chevrons (vue jours)
 - Chevron gauche : `currentMonth -= 1` (décembre + `year -= 1` si on était en janvier)
 - Chevron droit : symétrique
 - Pas de bornage de navigation par `min`/`max` — on peut naviguer où on veut, seuls les jours sont désactivés
 ### Bascule vers la vue mois
 Clic sur `Mois Année ⌄` → `toggleView()` → `viewMode = 'months'`.
 En vue mois :
 - Header inchangé visuellement, mais les chevrons naviguent désormais l'**année** (`year ± 1`)
 - Le bouton central reste cliquable : un nouveau clic ramène à `viewMode = 'days'` (toggle binaire, validé Q4b)
 - Clic sur un mois dans la grille 4×3 → `currentMonth = mois cliqué`, retour `viewMode = 'days'` sans sélection de date
 ### Fermeture sans sélection
 Clic en dehors du champ ET du popover → `close()`. `modelValue` inchangé. L'état interne (`currentMonth`, `currentYear`, `viewMode`) est **reset à la prochaine ouverture** selon la règle "Ouverture du popover" (pas de mémorisation).
 ### Bouton effacer
 Si `modelValue !== null && clearable && !disabled && !readonly` :
 - Une croix `mdi:close` apparaît à gauche de l'icône calendrier
 - Clic émet `null` et `stopPropagation` pour ne pas ouvrir le popover
 ### États
 - `disabled` : opacity réduite, curseur not-allowed, clic sans effet, croix masquée
 - `readonly` : affichage normal, clic sans effet sur l'ouverture, croix masquée
 ### Synchronisation `modelValue` externe
 Si le parent change `modelValue` programmatiquement :
 - Le champ se met à jour (re-format)
 - Si le popover est ouvert, la vue saute au mois de la nouvelle valeur
 - Si la nouvelle valeur a un format invalide, le composant traite comme `null` et log un warning console en dev
 ## Style / CSS
 ### Popover
 - `min-w-[320px]`, hauteur fixe ~`360px` (6 semaines × ~38px + header)
 - Position : `absolute top-[calc(100%-4px)] left-0 z-20`
 - `bg-white border border-t-0` (couleur selon état : `m-primary` / `m-danger` / `m-success`)
 - `rounded-b-md`
 - Transition : `opacity` 150ms à l'apparition, respect `prefers-reduced-motion`
 ### Header
 - Hauteur `h-12`, `border-b border-m-primary/20`
 - Chevrons (`mdi:chevron-left` / `mdi:chevron-right`) : 20px, padding cliquable 8px, `hover:bg-m-primary/10 rounded`
 - Texte central : `text-base font-medium`, cliquable, `mdi:chevron-down` 16px à côté
 ### Grille jours
 - En-tête `Sem | Lun | Mar | Mer | Jeu | Ven | Sam | Dim` : `text-xs uppercase text-m-muted font-medium`, 32px de hauteur
 - Cellule : `w-10 h-10 text-sm`, centrée
 - Colonne semaine : `bg-m-primary/10`, `text-m-primary/70`, non cliquable
 - Jour du mois courant : `text-black`
 - Jour hors mois : `text-m-muted/50`
 - Jour "aujourd'hui" : `border border-m-primary`, `text-m-primary font-semibold`
 - Jour sélectionné : `bg-m-primary text-white font-medium rounded-full` (prime sur "aujourd'hui")
 - Jour hors `min`/`max` : `text-m-muted/30 cursor-not-allowed`, non cliquable
 - Hover : `hover:bg-m-primary/10 rounded-full`
 ### Grille mois (MonthPicker)
 - `grid grid-cols-4 gap-2 p-3`
 - Cellule : `py-3 text-sm rounded`
 - Libellés : `Janv | Févr | Mars | Avr | Mai | Juin | Juil | Août | Sept | Oct | Nov | Déc`
 - Mois sélectionné : `bg-m-primary text-white`
 - Hover : `hover:bg-m-primary/10`
 ### Champ
 Reprend le pattern de `<MalioInputAutocomplete>` : label flottant, bordure `m-muted` au repos, `m-primary` au focus/open, `m-danger`/`m-success` selon état.
 - Icône calendrier `mdi:calendar-outline` 20px, à droite, couleur dynamique selon état
 - Croix d'effacement `mdi:close` 16px, à gauche de l'icône, `text-m-muted hover:text-black`
 ## Accessibilité
 - `aria-invalid` synchronisé sur `error`
 - `aria-describedby` lié au texte de `hint`/`error`/`success`
 - `aria-expanded` sur le champ pour signaler l'état du popover
 - `aria-haspopup="dialog"` sur le champ
 - Label `<label for>` lié au champ
 - Cellules jour : `role="button"`, `aria-label="19 mai 2026"` (jour en toutes lettres pour les lecteurs d'écran)
 - Cellules désactivées : `aria-disabled="true"`
 - Navigation clavier dans la grille : **reportée v2** (Escape, flèches, Enter)
 ## Tests
 ### `Date.test.ts` (~30 cas)
 Tests groupés par `describe` :
 - **Rendu** : label, placeholder, icône calendrier, affichage de la valeur formatée
 - **Popover** : ouverture au clic, fermeture au click outside, vue initiale selon `modelValue`
 - **Navigation** : chevrons en vue jours, passage décembre↔janvier avec changement d'année
 - **Sélection** : émission ISO correcte, fermeture après sélection, sélection d'un jour hors mois
 - **Bornes** : jours hors `min`/`max` non cliquables, comparaison ISO
 - **Vue mois** : bascule, chevrons en vue mois naviguent l'année, clic mois retourne en vue jours
 - **Clearable** : présence/absence de la croix, émission `null`, pas d'ouverture
 - **États** : `disabled` et `readonly` bloquent l'ouverture
 - **A11y** : `aria-invalid`, `aria-describedby`
 - **Synchro externe** : changement de `modelValue` programmatique
 ### `useMonthMatrix.test.ts` (~10 cas)
 - Mois standard (mai 2026) produit 6×7 cellules
 - Mois commençant un lundi (toutes les cases du premier lundi sont du mois courant)
 - Mois finissant un dimanche
 - Année bissextile (février 2024 : 29 jours)
 - Numéro de semaine ISO en début d'année (janvier 2026 commence en semaine 1 ou 52/53 de 2025 ?)
 - Numéro de semaine ISO en fin d'année
 ### `dateFormat.test.ts` (~10 cas)
 - `formatIsoToDisplay` : nominal, null, format invalide
 - `parseDisplayToIso` : nominal, format invalide, jour ou mois hors borne
 - `isValidIso` : nominal, faux positifs (32 jours, mois 13)
 - `isDateInRange` : sans bornes, avec min seul, avec max seul, avec les deux
 Helper `mountComponent(props)` reprend le pattern existant des autres tests Malio. Environnement Vitest + jsdom (déjà configurés).
 ## Story Histoire `Date.story.vue`
 Dans `app/story/date/Date.story.vue`. Variants :
 1. **Default** — vierge, label "Date de naissance"
 2. **Avec valeur initiale** — `modelValue="2026-05-19"`
 3. **Avec min/max** — borné aujourd'hui → +30 jours, label "Date du rendez-vous"
 4. **États** — disabled, readonly, error, success, hint
 5. **Non-clearable** — `clearable=false`
 6. **Required** — avec error si vide
 7. **Override de classes** — `inputClass`, `groupClass` custom
 ## Playground `.playground/pages/composant/date.vue`
 Page de test dev :
 - Un `<MalioDate>` standalone
 - Affichage de la valeur courante en dessous
 - Boutons pour reset (`value = null`) et forcer une date (`value = '2026-12-25'`)
 - Un cas avec `min`/`max`
 Lien ajouté dans `.playground/pages/index.vue`.
 ## Découpage de l'implémentation
 Le plan d'implémentation (généré ensuite via `writing-plans`) découpera en étapes ordonnées :
 1. Composables purs (`dateFormat`, `useMonthMatrix`, `useCalendarPopover`) + leurs tests
 2. Sous-composants internes (`CalendarHeader`, `MonthGrid`, `MonthPicker`)
 3. Composant public `Date.vue`
 4. Tests d'intégration `Date.test.ts`
 5. Story Histoire + page playground
@@ -1,243 +0,0 @@
 # MalioDateRange — Design Spec
 Composant de sélection d'une **période** (date début / date fin) via un champ + popover calendrier. Deuxième brique de la famille temporelle, construite sur un shell partagé extrait de `MalioDate`.
 **Ticket :** MUI-33 (suite)
 **Branche :** `feature/MUI-33-developper-le-composant-datepicker`
 **Spec liée :** `docs/superpowers/specs/2026-05-19-datepicker-design.md`
 ## Contexte & roadmap
 `MalioDate` (sélection simple) est déjà livré. Suivront `DateWeek` et `DateTime`. Les 4 composants partagent le **même champ + popover + header + vue mois** ; seule la sélection diffère. On extrait donc un shell réutilisable `CalendarField` (Approche 3 retenue parce que la famille comptera 4 variantes — la duplication de coquille ×4 et la maintenance front en parallèle sont le vrai risque).
 ## Périmètre
 Sélection d'une période sur **un seul mois** affiché (popover = largeur du champ, comme `Date`). Visuellement identique à `Date`, sauf :
 - on sélectionne **deux dates** (début/fin)
 - les jours **entre** les bornes ont un fond `bg-m-primary-light` (bleu clair)
 - les bornes (start/end) gardent le cercle plein `bg-m-primary`
 - **aperçu au survol** (hover preview) de la plage pendant la sélection
 **Inclus :** sélection 2 clics, auto-inversion, hover preview, surlignage de plage (demi-barre aux bornes), bornes `min`/`max`, effacement, vue mois conservée.
 **Reporté :** deux mois côte à côte, ajustement de la borne la plus proche au 3e clic (on garde le reset standard), saisie clavier, navigation clavier.
 ## Architecture (Approche 3 — shell partagé)
 ```
 app/components/malio/date/
  Date.vue                       # ENVELOPPE (refacto) — sélection simple
  DateRange.vue                  # ENVELOPPE (nouveau) — sélection période
  Date.test.ts                   # inchangé (filet de sécurité du refacto)
  DateRange.test.ts              # nouveau
  internal/
    CalendarField.vue            # NOUVEAU — shell : champ + popover + header + MonthPicker
    CalendarHeader.vue           # inchangé
    MonthGrid.vue                # étendu : props range + émission hover + data-range-role
    MonthPicker.vue              # inchangé
  composables/
    useCalendarView.ts           # NOUVEAU — état mois/année + navigation (extrait de Date.vue)
    useCalendarView.test.ts
    useCalendarPopover.ts        # inchangé
    dateRange.ts                 # NOUVEAU — helpers purs de plage
    dateRange.test.ts
    dateFormat.ts                # inchangé
    useMonthMatrix.ts            # inchangé
 app/story/date/dateRange.story.vue
 .playground/pages/composant/date/dateRange.vue
 ```
 Flux :
 ```
 DateRange.vue (enveloppe)
 ├─ état de sélection range ({start,end} + pendingStart + hoverDate)
 ├─ displayValue ("19/05/2026 - 25/05/2026")
 └─ <CalendarField :display-value :sync-to=start ... @clear @close>
        ├─ champ + popover (useCalendarPopover) + navigation (useCalendarView)
        ├─ header + MonthPicker (viewMode='months')
        └─ <slot :current-month :current-year :close>   ← viewMode='days'
               └─ <MonthGrid> mode range (rangeStart/rangeEnd/previewDate, @select, @hover)
 ```
 `CalendarField` ne connaît **rien** de la sélection : il gère champ, ouverture, navigation, et expose `{ currentMonth, currentYear, close }` au slot. Chaque enveloppe branche son `MonthGrid` et décide quand appeler `close()`.
 ## `useCalendarView.ts`
 ```ts
 function useCalendarView(viewMode: Ref<'days' | 'months'>): {
  currentMonth: Ref<number>          // 0-11
  currentYear: Ref<number>
  goToPrev: () => void               // viewMode==='months' ? année-1 : mois-1 (roulement déc↔jan)
  goToNext: () => void               // idem +1
  selectMonth: (m: number) => void   // currentMonth = m
  syncToIso: (iso: string | null) => void  // mois/année depuis un ISO valide, sinon mois courant
 }
 ```
 Reprend la logique `onPrev`/`onNext`/`syncViewToValue` actuelle de `Date.vue`. Pur, testable seul.
 ## `CalendarField.vue` (shell)
 **Props :**
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `displayValue` | `string` | **requis** | Texte affiché dans le champ (`''` si rien/incomplet) |
 | `syncTo` | `string \| null` | **requis** | ISO servant à caler le mois à l'ouverture |
 | `id`,`name`,`label`,`placeholder` | `string` | `''` / `'JJ/MM/AAAA'` | Champ |
 | `required`,`disabled`,`readonly` | `boolean` | `false` | États |
 | `hint`,`error`,`success` | `string` | `''` | Messages |
 | `clearable` | `boolean` | `true` | Croix d'effacement |
 | `inputClass`,`labelClass`,`groupClass` | `string` | `''` | Overrides twMerge |
 **Events :**
 | Event | Payload | Description |
 |-------|---------|-------------|
 | `clear` | — | Croix cliquée → l'enveloppe met son `modelValue` à `null` |
 | `close` | — | Popover fermé (clic dehors ou programmatique) → l'enveloppe annule sa sélection en cours |
 **Slot par défaut** (scoped, rendu quand `viewMode==='days'`) : `{ currentMonth: number, currentYear: number, close: () => void }`.
 **Comportement** (repris à l'identique de l'actuel `Date.vue`) : input readonly, label flottant (bleu à l'ouverture), icône calendrier, croix (si `clearable && displayValue && !disabled && !readonly`), grossissement calibré 48px, bordures/états, popover ombré largeur champ collé sous le champ, header (`prev`/`next`→`useCalendarView`, `toggle`→`useCalendarPopover.toggleView`), `MonthPicker` en vue mois (clic mois → `selectMonth` + retour vue jours), `syncToIso(syncTo)` à l'ouverture + watch resync. `isFilled` dérivé de `displayValue.length > 0`.
 ## `dateRange.ts` (helpers purs)
 ```ts
 type DateRangeValue = { start: string; end: string }
 function normalizeRange(a: string, b: string): DateRangeValue
 // réordonne pour garantir start ≤ end
 function resolveRangeBounds(
  start: string | null, end: string | null, preview: string | null,
 ): { lo: string; hi: string } | null
 // pas de start → null ; end committé prioritaire, sinon preview, sinon {lo:start,hi:start}
 type DayRangeRole = 'none' | 'single' | 'start' | 'end' | 'in-range'
 function dayRangeRole(iso: string, bounds: { lo: string; hi: string } | null): DayRangeRole
 ```
 ## `MonthGrid.vue` — extension
 **Nouvelles props (optionnelles) :** `rangeStart?`, `rangeEnd?`, `previewDate?` (ISO ou null). Mode plage actif dès que `rangeStart` est passé ; sinon mode simple (`selectedDate`, comportement actuel inchangé).
 **Nouvel event :** `hover` payload `string | null` — `mouseenter` d'un jour → ISO, `mouseleave` de la grille → `null`.
 **Attribut testabilité :** chaque bouton jour porte `:data-range-role="role"` (`none`/`single`/`start`/`end`/`in-range`).
 **Rendu d'un jour en mode plage** — bouton `relative` superposant 2 couches :
 1. Barre de fond absolue `bg-m-primary-light` : `in-range` → pleine largeur (`inset-0`) ; `start` → moitié droite (`left-1/2 right-0`) ; `end` → moitié gauche (`left-0 right-1/2`) ; `single`/`none` → aucune.
 2. Cercle (span `h-10 w-10`) au-dessus : `start`/`end`/`single` → `bg-m-primary` blanc ; `in-range` → transparent, texte noir ; `none` → rendu simple actuel (aujourd'hui, hors-mois…).
 La barre passe sous les cercles, colonnes jointives → plage continue démarrant/finissant au centre des cercles.
 ## `DateRange.vue` (enveloppe)
 **Props :** identiques à `Date` sauf `modelValue?: { start: string; end: string } | null`. (`id`,`name`,`label`,`placeholder`,`required`,`disabled`,`readonly`,`hint`,`error`,`success`,`min`,`max`,`clearable`,`inputClass`,`labelClass`,`groupClass`.)
 **Emit :** `update:modelValue` → `{ start: string; end: string } | null`.
 **État interne :**
 ```ts
 pendingStart = ref<string | null>(null)   // 1er clic en attente du 2e
 hoverDate    = ref<string | null>(null)   // survol pour le preview
 const isSelecting = computed(() => pendingStart.value !== null)
 ```
 **Passé au `<MonthGrid>` :**
 ```ts
 rangeStart  = isSelecting ? pendingStart : (modelValue?.start ?? null)
 rangeEnd    = isSelecting ? null         : (modelValue?.end ?? null)
 previewDate = isSelecting ? hoverDate    : null
 // + :min :max :month :year (slot)
 ```
 **`displayValue` :** `''` pendant la sélection (1 seul jour choisi) ; `"JJ/MM/AAAA - JJ/MM/AAAA"` si plage complète ; `''` sinon. **`syncTo`** = `modelValue?.start ?? null`.
 **Machine à états :**
 ```
 onSelectDay(iso):
  si pendingStart === null:                 # 1er clic (ou reset après plage complète)
      pendingStart = iso ; hoverDate = null
  sinon:                                     # 2e clic → complète
      { start, end } = normalizeRange(pendingStart, iso)   # auto-inversion
      emit('update:modelValue', { start, end })
      pendingStart = null ; hoverDate = null
      close()                                # ferme le popover (slot)
 onHover(iso):                                # émis par MonthGrid
  si isSelecting: hoverDate = iso            # preview seulement pendant la sélection
 onClose():                                   # CalendarField émet 'close'
  pendingStart = null ; hoverDate = null     # annule la sélection en cours, modelValue inchangé
 onClear():                                   # CalendarField émet 'clear'
  emit('update:modelValue', null)
  pendingStart = null ; hoverDate = null
 ```
 - **3e clic** (plage complète) : `pendingStart===null` → nouveau `start`, ancienne plage masquée pendant la sélection (`rangeEnd=null`), remplacée à la complétion.
 - **min/max** : `MonthGrid` désactive les jours hors bornes → les 2 clics sont contraints.
 - **modelValue invalide** (start/end mal formés) : traité comme `null` + warning dev.
 ## Refacto `Date.vue`
 API publique **inchangée**. Devient une enveloppe (~80 lignes) :
 ```vue
 <CalendarField :display-value="displayValue" :sync-to="modelValue ?? null" ...props
  @clear="emit('update:modelValue', null)">
  <template #default="{ currentMonth, currentYear, close }">
    <MonthGrid :month="currentMonth" :year="currentYear"
      :selected-date="modelValue ?? null" :min="min" :max="max"
      @select="(iso) => { emit('update:modelValue', iso); close() }" />
  </template>
 </CalendarField>
 ```
 `displayValue = formatIsoToDisplay(modelValue)`. Watch modelValue invalide → warning dev (conservé). Mode simple : pas de `@close` (rien à annuler), pas de `@hover`.
 **Les 21 tests de `Date.test.ts` doivent passer sans modification** : tous les `data-test` sont rendus par `CalendarField`/`MonthGrid`, donc présents dans le DOM monté de `Date`. C'est le filet de sécurité du refacto.
 ## Tests
 ### `dateRange.test.ts` (~12)
 - `normalizeRange` : ordonné, inversé, égal
 - `resolveRangeBounds` : pas de start → null ; start seul → `{lo,hi}=start` ; start+end ordonné ; start+preview ; preview avant start (inversion) ; end prioritaire sur preview
 - `dayRangeRole` : none (pas de bornes / hors plage), single (lo===hi), start, end, in-range
 ### `useCalendarView.test.ts` (~8, fake timers)
 - mois/année initiaux = aujourd'hui ; `goToNext`/`goToPrev` vue jours (+ roulement déc↔jan avec année) ; `goToNext`/`goToPrev` vue mois (année ±1) ; `selectMonth` ; `syncToIso` valide / null
 ### `Date.test.ts`
 Inchangé — doit rester vert (filet du refacto).
 ### `DateRange.test.ts` (~18)
 - Rendu : label, icône, `"19/05/2026 - 25/05/2026"` si modelValue, champ vide sinon
 - Ouverture popover, vue sur le mois du `start`
 - 1er clic → pas d'émission ; 2e clic → émet `{start,end}` + ferme
 - 2e clic avant le 1er → auto-inversion (start ≤ end)
 - Même jour ×2 → `{start:x, end:x}`
 - 3e clic → repart sur un nouveau start (pas d'émission avant le 2e)
 - Hover pendant sélection → `data-range-role="in-range"` sur jours intermédiaires ; pas de preview hors sélection
 - Rôles : `start`/`end`/`in-range` corrects via `data-range-role`
 - Clic dehors pendant sélection → annulation, `modelValue` inchangé
 - `clear` → émet `null`
 - min/max → jours hors bornes non cliquables
 - a11y : `aria-invalid` sur error
 ### Story `dateRange.story.vue`
 Default vide, plage initiale, min/max, états (disabled/readonly/error/success), non-clearable.
 ### Playground `.playground/pages/composant/date/dateRange.vue`
 `<MalioDateRange>` standalone + affichage `start → end`, boutons set/reset, cas borné.
 ## Découpage d'implémentation
 1. Helpers purs `dateRange.ts` + tests
 2. Composable `useCalendarView.ts` + tests
 3. Shell `CalendarField.vue` (extraction depuis `Date.vue`)
 4. Refacto `Date.vue` en enveloppe → `Date.test.ts` doit rester vert
 5. Extension `MonthGrid.vue` (range + hover + data-range-role)
 6. `DateRange.vue` + `DateRange.test.ts`
 7. Story + playground
@@ -1,168 +0,0 @@
 # MalioDateWeek — Design Spec
 Composant de sélection d'une **semaine ISO complète** (lundi→dimanche) via le shell calendrier partagé. Troisième brique de la famille temporelle.
 **Ticket :** MUI-33 (suite)
 **Branche :** `feature/MUI-33-developper-le-composant-datepicker`
 **Specs liées :** `2026-05-19-datepicker-design.md`, `2026-05-20-daterange-design.md`
 ## Périmètre
 Sélection d'une semaine entière en **un clic** (sur n'importe quel jour OU le numéro de semaine). Visuellement : la ligne de la semaine se surligne en pilule `bg-m-primary-light` (lundi arrondi gauche, dimanche arrondi droit), exactement comme une plage `DateRange` figée lun→dim. Survol = aperçu de la semaine. La cellule n° de la semaine sélectionnée passe en `bg-m-primary` (repère).
 **Inclus :** clic jour/n° → semaine, hover de semaine, surlignage pilule, repère n° semaine, bornes `min`/`max` (semaine sélectionnable si elle chevauche), effacement, vue mois conservée.
 **Reporté :** deux mois, saisie/navigation clavier.
 ## Donnée retournée
 `modelValue: string | null` au format **ISO 8601 semaine `YYYY-Www`** (ex. `"2026-W21"`), comme l'`<input type="week">` natif. L'année est l'**année ISO de numérotation** (peut différer de l'année calendaire aux bords d'année). Affichage humain dans le champ : `"Semaine 21 (18/05 → 24/05/2026)"` (le `modelValue` reste `2026-W21`).
 ## Architecture (Approche 1 — réutilisation du rendu plage)
 Une semaine sélectionnée **est** une plage lundi→dimanche : on réutilise le rendu pilule de `MonthGrid` (mode plage) en passant les bornes de la semaine active. Les events `select`/`hover` (jour) sont réutilisés ; l'enveloppe `DateWeek` mappe jour → semaine.
 ```
 app/components/malio/date/
  DateWeek.vue                   # NOUVEAU — enveloppe
  DateWeek.test.ts               # nouveau
  internal/
    MonthGrid.vue                # étendu : interactiveWeekNumber + markedWeekStart (additifs)
    CalendarField.vue            # inchangé (shell réutilisé)
    CalendarHeader.vue           # inchangé
    MonthPicker.vue              # inchangé
  composables/
    dateWeek.ts                  # NOUVEAU — helpers semaine ISO (purs)
    dateWeek.test.ts             # nouveau
    dateRange.ts                 # inchangé (rendu pilule réutilisé)
    dateFormat.ts                # inchangé
    useCalendarView.ts           # inchangé
    useCalendarPopover.ts        # inchangé
    useMonthMatrix.ts            # inchangé
 app/story/date/dateWeek.story.vue
 .playground/pages/composant/date/dateWeek.vue
 ```
 Flux :
 ```
 DateWeek.vue (enveloppe)
 ├─ état : hoverWeekStart (lundi de la semaine survolée)
 ├─ validWeek = isValidIsoWeek(modelValue) ? { monday: isoWeekToMonday(modelValue) } : null
 ├─ activeMonday = hoverWeekStart ?? validWeek.monday   → activeSunday = sundayOf(activeMonday)
 ├─ displayValue = formatWeekDisplay(modelValue)
 └─ <CalendarField :display-value :sync-to=validWeek.monday @clear @close>
        └─ <MonthGrid
              :range-start=activeMonday :range-end=activeSunday   ← pilule lun→dim réutilisée
              :marked-week-start=validWeek.monday                  ← repère n° semaine
              interactive-week-number                              ← n° semaine cliquable/hoverable
              :min :max
              @select="(iso)=>onSelect(iso, close)"   @hover="onHover" />
 ```
 ## `dateWeek.ts` (helpers purs)
 ```ts
 function mondayOf(iso: string): string       // "2026-05-20" → "2026-05-18"
 function sundayOf(iso: string): string       // "2026-05-20" → "2026-05-24"
 function toIsoWeek(iso: string): string      // "2026-05-20" → "2026-W21" (année ISO + n° semaine)
 function isoWeekToMonday(week: string): string | null  // "2026-W21" → "2026-05-18" ; invalide → null
 function isValidIsoWeek(week: string): boolean         // "2026-W21" → true ; "2026-W54"/"2026-21" → false
 function formatWeekDisplay(week: string): string       // "2026-W21" → "Semaine 21 (18/05 → 24/05/2026)" ; invalide → ""
 ```
 - Algo ISO 8601 : jeudi de la semaine pour l'année de numérotation ; lundi de la semaine contenant le 4 janvier = semaine 1.
 - `formatWeekDisplay` : `Semaine {n° sans zéro} ({JJ/MM lundi} → {JJ/MM/AAAA dimanche})`, réutilise `formatIsoToDisplay`.
 - Cas pièges testés : `2025-12-31` → `2026-W01`, `2027-01-01` → `2026-W53`, `2026-01-01` → `2026-W01`.
 ## `MonthGrid.vue` — ajouts additifs
 Nouvelles props optionnelles (n'altèrent pas les modes simple/plage) :
 ```ts
 interactiveWeekNumber?: boolean   // défaut false
 markedWeekStart?: string | null   // défaut null — lundi de la semaine repère
 ```
 Quand `interactiveWeekNumber === true` :
 - La cellule n° de semaine devient un `<button>` : `@click` émet `select(week.days[0].isoDate)`, `@mouseenter` émet `hover(week.days[0].isoDate)`. `:disabled` si `!weekSelectable`, où `weekSelectable = week.days.some(d => inRange(d.isoDate))`. `cursor-pointer` si sélectionnable.
 - Repère : si `week.days[0].isoDate === markedWeekStart`, la cellule n° passe en `bg-m-primary text-white` (au lieu de `bg-m-primary-light`).
 Toujours (inoffensif hors mode semaine) : la cellule n° porte `:data-week-start="week.days[0].isoDate"` et `:data-marked="week.days[0].isoDate === markedWeekStart"`.
 Inchangé : rendu pilule des jours piloté par `rangeStart`/`rangeEnd` ; events `select`/`hover` jour ; quand `interactiveWeekNumber` est `false`, la cellule n° reste un `<div>` non cliquable (aucune régression `Date`/`DateRange`).
 ## `DateWeek.vue` (enveloppe)
 **Props :** identiques à `Date` sauf `modelValue?: string | null` (`YYYY-Www`).
 **Emit :** `update:modelValue` → `string | null`.
 **État :**
 ```ts
 hoverWeekStart = ref<string | null>(null)
 const validWeek = computed(() =>
  (props.modelValue && isValidIsoWeek(props.modelValue))
    ? {monday: isoWeekToMonday(props.modelValue) as string}
    : null)
 const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
 const activeSunday = computed(() => activeMonday.value ? sundayOf(activeMonday.value) : null)
 ```
 **Passé à `MonthGrid` :** `range-start=activeMonday`, `range-end=activeSunday`, `marked-week-start=validWeek?.monday ?? null`, `interactive-week-number`, `min`, `max`, month/year du slot.
 **`displayValue`** = `validWeek ? formatWeekDisplay(modelValue) : ''`. **`syncTo`** = `validWeek?.monday ?? null`.
 **Comportement (1 clic) :**
 ```
 onSelect(iso, close):            # jour OU n° de semaine (= lundi)
  emit('update:modelValue', toIsoWeek(iso))
  hoverWeekStart = null
  close()
 onHover(iso):                    # jour/n° survolé ; null au mouseleave
  hoverWeekStart = iso ? mondayOf(iso) : null
 onClose():  hoverWeekStart = null
 onClear():  emit('update:modelValue', null) ; hoverWeekStart = null
 ```
 - Survol → toute la ligne en pilule via `activeMonday`.
 - Sélection en un clic → `YYYY-Www` + fermeture.
 - Repère de la semaine committée conservé pendant le survol d'une autre.
 - `modelValue` invalide → traité comme `null` + warning dev.
 ## Tests
 ### `dateWeek.test.ts` (~14)
 - `mondayOf`/`sundayOf` : mercredi, lundi (idempotent), dimanche
 - `toIsoWeek` : nominal + bords d'année (`2025-12-31`→`2026-W01`, `2027-01-01`→`2026-W53`, `2026-01-01`→`2026-W01`)
 - `isoWeekToMonday` : `2026-W21`→`2026-05-18` ; round-trip ; invalide → null
 - `isValidIsoWeek` : valide / `W00` / `W54` / format faux
 - `formatWeekDisplay` : `2026-W21`→`"Semaine 21 (18/05 → 24/05/2026)"` ; invalide → `""`
 ### `DateWeek.test.ts` (~14, `setSystemTime(2026-05-19)`)
 - Rendu label/icône, affichage `"Semaine ..."` si modelValue, champ vide sinon
 - Ouverture sur le mois de la semaine du modelValue
 - Clic d'un jour → émet le `YYYY-Www` de sa semaine + ferme
 - Clic du n° de semaine (`[data-test="week-number"][data-week-start="..."]`) → émet + ferme
 - Hover d'un jour → `data-range-role` start/in-range/end sur les 7 jours de la ligne ; autre ligne `none`
 - Hover du n° de semaine → même surlignage
 - Semaine committée → roles corrects + `data-marked="true"` sur la cellule n°
 - `clear` → émet `null`
 - min/max : semaine hors bornes n° désactivé + jours non cliquables ; semaine qui chevauche reste sélectionnable
 - `disabled`/`readonly` → pas d'ouverture
 - a11y : `aria-invalid` sur error
 `Date.test.ts` / `DateRange.test.ts` restent verts (props additives).
 ### Story `dateWeek.story.vue`
 Default vide, semaine initiale, min/max, états (disabled/readonly/error/success), non-clearable.
 ### Playground `.playground/pages/composant/date/dateWeek.vue`
 Comparatif Large (480px) / ERP (396px), affichage `modelValue` + bornes du champ, boutons set/reset, cas borné.
 ## Découpage d'implémentation
 1. `dateWeek.ts` (purs) + tests
 2. Extension `MonthGrid.vue` (interactiveWeekNumber + markedWeekStart + data attrs)
 3. `DateWeek.vue` + `DateWeek.test.ts`
 4. Story + playground
@@ -1,146 +0,0 @@
 # MalioDateTime — Design (version intérimaire)
 **Date :** 2026-05-22
 **Ticket :** #MUI-33 (famille Datepicker)
 **Statut :** validé, prêt pour le plan d'implémentation
 ## Objectif
 Ajouter un composant `MalioDateTime` à la famille temporelle de `@malio/layer-ui`, permettant de saisir **une date ET une heure** dans un seul champ avec popover.
 Cette version est **intérimaire** : le sélecteur d'heure utilise un `<input type="time">` natif, le temps que la maquette du sélecteur d'heure dédié soit fournie. Le bloc heure est volontairement isolé pour pouvoir être remplacé sans toucher au reste.
 ## Valeur du modèle
 `modelValue: string | null` au format **ISO naïf sans fuseau** : `"YYYY-MM-DDTHH:MM:00"` (ex. `"2026-05-20T14:30:00"`).
 - Heure murale locale : un picker n'a pas de notion de fuseau.
 - Symfony (`DateTimeNormalizer`, RFC 3339) parse ce format et applique son fuseau configuré → zéro bug TZ/DST côté front.
 - Les secondes sont toujours `00` (le natif `type="time"` par défaut n'expose pas les secondes).
 - Cohérent avec `MalioDate` (`YYYY-MM-DD`) et `MalioTime` (`HH:MM`).
 ## Architecture
 Fine enveloppe autour du shell partagé `internal/CalendarField.vue`, comme `MalioDate` / `MalioDateRange` / `MalioDateWeek`.
 ```
 MalioDateTime (Date/DateTime.vue)
  └─ CalendarField (champ + popover + header + navigation mois)
       slot #default={ currentMonth, currentYear, close }
         ├─ MonthGrid          (sélection du jour)
         └─ <input type="time"> (sélection de l'heure, sous la grille)
 ```
 Le `close` du slot n'est **pas** appelé sur sélection (contrairement à `MalioDate`) : on a besoin de date ET heure, la fermeture se fait au clic extérieur (déjà gérée par `CalendarField` via `useCalendarPopover`).
 ## Props
 Identiques à `MalioDate` :
 | Prop | Type | Défaut | Note |
 |---|---|---|---|
 | `id` | `string` | `''` | |
 | `name` | `string` | `''` | |
 | `label` | `string` | `''` | |
 | `modelValue` | `string \| null` | `undefined` | `"YYYY-MM-DDTHH:MM:00"` |
 | `placeholder` | `string` | `'JJ/MM/AAAA HH:MM'` | |
 | `required` | `boolean` | `false` | |
 | `disabled` | `boolean` | `false` | |
 | `readonly` | `boolean` | `false` | |
 | `hint` | `string` | `''` | |
 | `error` | `string` | `''` | |
 | `success` | `string` | `''` | |
 | `min` | `string` | `undefined` | datetime ou date ; on borne la grille avec la partie date |
 | `max` | `string` | `undefined` | idem |
 | `clearable` | `boolean` | `true` | |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | |
 **Émissions :** `update:modelValue: string | null`.
 ## Affichage du champ
 `displayValue` = `formatIsoDateTimeToDisplay(modelValue)` → `"JJ/MM/AAAA HH:MM"` (ex. `20/05/2026 14:30`). Chaîne vide si `modelValue` nul ou invalide.
 ## Flux de sélection
 État : `modelValue` est la source de vérité. Une ref locale `pendingTime: string` (`'HH:MM'` ou `''`) sert de pont quand l'heure est réglée avant qu'un jour soit choisi.
 - **Partie date courante** = `splitDateTime(modelValue).date` (ou `null`).
 - **Valeur de l'`<input type="time">`** = `splitDateTime(modelValue).time` si présent, sinon `pendingTime`.
 Interactions :
 1. **Clic sur un jour `iso`** :
   - `heureEffective` = partie heure de `modelValue`, sinon `pendingTime`, sinon `'00:00'`.
   - émet `composeDateTime(iso, heureEffective)` → `"iso T heure:00"`.
   - le popover **reste ouvert**.
 2. **Changement de l'`<input type="time">` (`hhmm`)** :
   - si une partie date existe → émet `composeDateTime(datePart, hhmm)`.
   - sinon → stocke `hhmm` dans `pendingTime` (pas d'émission tant qu'aucun jour n'est choisi).
   - si `hhmm` est vidé (`''`) et qu'une date existe → on garde la date avec `00:00` ? **Non** : on n'émet rien sur vidage, on conserve la dernière valeur émise (le natif renvoie rarement `''` une fois rempli ; cas négligé pour l'intérim).
 3. **Effacer (croix)** : émet `null`, `pendingTime = ''`.
 Bornes `min`/`max` : passées à `MonthGrid` après slice de la partie date (`min?.slice(0, 10)`). Pas de borne sur l'heure dans cette version.
 ## Composable `composables/datetimeFormat.ts`
 Réutilise `isValidIso` de `dateFormat.ts` pour valider la partie date.
 ```ts
 // "YYYY-MM-DDTHH:MM:00" complet et valide ?
 export function isValidIsoDateTime(s: string): boolean
 // "YYYY-MM-DDTHH:MM:00" -> "JJ/MM/AAAA HH:MM" (chaîne vide si invalide/nul)
 export function formatIsoDateTimeToDisplay(s: string | null): string
 // "YYYY-MM-DDTHH:MM:00" -> { date: "YYYY-MM-DD" | null, time: "HH:MM" | '' }
 export function splitDateTime(s: string | null): { date: string | null; time: string }
 // (date "YYYY-MM-DD", time "HH:MM") -> "YYYY-MM-DDTHH:MM:00"
 export function composeDateTime(date: string, time: string): string
 ```
 Règles :
 - `isValidIsoDateTime` : regex `^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$`, partie date valide via `isValidIso`, heure `00–23`, minutes `00–59`, secondes `00–59`.
 - `splitDateTime` : si `s` nul ou ne matche pas le motif datetime → `{ date: null, time: '' }`. Sinon découpe sur `T`, renvoie la date et `HH:MM` (5 premiers car. de la partie heure).
 - `composeDateTime(date, time)` : `${date}T${time}:00`. Si `time` vide → `${date}T00:00:00`.
 - `formatIsoDateTimeToDisplay` : si `!isValidIsoDateTime` → `''`. Sinon `${dd}/${mm}/${yyyy} ${hh}:${min}`.
 ## Tests
 Colocalisés, Vitest + @vue/test-utils (jsdom), `vi.setSystemTime(new Date(2026, 4, 19))` pour déterminisme.
 **`datetimeFormat.test.ts`** (helpers purs) :
 - `isValidIsoDateTime` : accepte `"2026-05-20T14:30:00"` ; rejette `"2026-05-20"`, `"2026-13-01T00:00:00"`, `"2026-05-20T24:00:00"`, `"2026-05-20T14:60:00"`, `""`, format sans secondes.
 - `formatIsoDateTimeToDisplay` : `"2026-05-20T14:30:00"` → `"20/05/2026 14:30"` ; nul/invalide → `''`.
 - `splitDateTime` : `"2026-05-20T14:30:00"` → `{ date: "2026-05-20", time: "14:30" }` ; `null` → `{ date: null, time: '' }` ; `"2026-05-20"` (date seule, non datetime) → `{ date: null, time: '' }`.
 - `composeDateTime` : `("2026-05-20", "14:30")` → `"2026-05-20T14:30:00"` ; `("2026-05-20", "")` → `"2026-05-20T00:00:00"`.
 **`DateTime.test.ts`** (composant) :
 - Rendu : champ présent, placeholder `JJ/MM/AAAA HH:MM`, `displayValue` correct quand `modelValue` fourni.
 - Ouverture popover au clic → `MonthGrid` + `input[type=time]` visibles.
 - Clic sur un jour sans heure → émet `"<iso>T00:00:00"`, popover reste ouvert.
 - Clic sur un jour avec `pendingTime` réglé d'abord → émet `"<iso>T<pendingTime>:00"`.
 - Changement de l'heure avec date déjà choisie → émet `"<date>T<nouvelleHeure>:00"`.
 - Changement de l'heure sans date → **aucune émission**.
 - `clearable` : croix émet `null`.
 - `min`/`max` datetime → jours hors bornes désactivés dans la grille.
 - Accessibilité : label lié, `aria-invalid` sur erreur.
 ## Livrables
 1. `app/components/malio/date/composables/datetimeFormat.ts`
 2. `app/components/malio/date/composables/datetimeFormat.test.ts`
 3. `app/components/malio/date/DateTime.vue`
 4. `app/components/malio/date/DateTime.test.ts`
 5. Page playground `.playground/pages/composant/date/datetime.vue` + entrée nav (`playground.nav.ts`)
 6. Story `app/story/date/dateTime.story.vue`
 7. `COMPONENTS.md` (section MalioDateTime)
 8. `CHANGELOG.md` (ligne sous `### Added`)
 ## Hors périmètre (intérim)
 - Sélecteur d'heure dédié / maquette → itération ultérieure ; on remplacera le bloc `<input type="time">` isolé.
 - Bornes horaires (min/max sur l'heure).
 - Pas de minutes configurable (granularité native du navigateur).
 - Secondes dans l'UI.
@@ -1,167 +0,0 @@
 # Spec — Composant Accordéon `<MalioAccordion>`
 **Date :** 2026-05-26
 **Ticket :** MUI-37
 **Statut :** Validé (design), prêt pour planification
 ## Contexte & objectif
 Ajouter un composant accordéon à `@malio/layer-ui`. Cas d'usage principal :
 un **système de filtres dans un drawer** d'ERP, où plusieurs sections de
 critères (prix, catégorie, marque…) doivent pouvoir être dépliées
 simultanément, chaque section ayant un contenu hétérogène (checkboxes,
 slider, recherche…).
 ## Décision d'API : composants enfants (compositional)
 Plutôt que l'API « tableau `items` + slots » de NuxtUI (qui impose un template
 `#content` unique avec un switch central sur l'item courant), on adopte une
 **API compositionnelle** : un parent `<MalioAccordion>` qui enveloppe des
 enfants `<MalioAccordionItem>`. Chaque section déclare son titre **et** son
 contenu au même endroit, sans switch central, et s'ajoute/se retire
 indépendamment.
 Rationale : pour des filtres au contenu hétérogène, c'est nettement plus
 lisible et évolutif. On reste **100 % natif** (pas de dépendance Reka UI,
 contrairement à NuxtUI), cohérent avec le `TabList` maison et les conventions
 du layer (`@iconify/vue`, `twMerge`, props `*Class`).
 ## Architecture
 ```
 MalioAccordion        (parent : état d'ouverture, mode, coordination)
 └─ MalioAccordionItem  (enfant : en-tête cliquable + panneau animé + slot)
 ```
 Le parent **fournit** (`provide`) un contexte d'accordéon ; chaque enfant
 **l'injecte** (`inject`) pour connaître son état d'ouverture et déclencher les
 bascules. Communication via une clé `Symbol` (`InjectionKey`).
 **Contexte fourni** (forme indicative) :
 ```ts
 interface AccordionContext {
  mode: ComputedRef<'single' | 'multiple'>
  isOpen: (value: string) => boolean
  toggle: (value: string) => void
  register: (value: string, defaultOpen: boolean) => void  // enfant → parent au montage
  unregister: (value: string) => void
  baseId: string                                           // pour générer les ids ARIA
  registerHeader / focus nav helpers                       // pour la navigation flèches
 }
 ```
 **Fichiers :**
 ```
 app/components/malio/accordion/Accordion.vue
 app/components/malio/accordion/AccordionItem.vue
 app/components/malio/accordion/Accordion.test.ts
 app/components/malio/accordion/AccordionItem.test.ts
 ```
 (+ page playground et story Histoire, cf. skill `creating-malio-component`.)
 ## API publique
 ### `<MalioAccordion>`
 `defineOptions({ name: 'MalioAccordion', inheritAttrs: false })`
 | Prop | Type | Défaut | Rôle |
 |------|------|--------|------|
 | `mode` | `'single' \| 'multiple'` | `'multiple'` | Un seul ou plusieurs panneaux ouverts |
 | `modelValue` | `string \| string[]` | `undefined` | v-model des clés ouvertes (`string` en `single`, `string[]` en `multiple`) |
 | `id` | `string` | auto (`useId`) | Base d'id pour les attributs ARIA |
 | `groupClass` | `string` | `''` | Classes du conteneur (fusion `twMerge`) |
 **Events :** `update:modelValue(value: string | string[])`
 **Pattern contrôlé / non-contrôlé** (convention maison) :
 `isControlled = computed(() => props.modelValue !== undefined)`, avec
 `localValue` en fallback. En non-contrôlé, l'état initial est dérivé des
 enfants ayant `defaultOpen`.
 ### `<MalioAccordionItem>`
 `defineOptions({ name: 'MalioAccordionItem', inheritAttrs: false })`
 | Prop | Type | Défaut | Rôle |
 |------|------|--------|------|
 | `title` | `string` | — | Texte de l'en-tête |
 | `value` | `string` | auto (`useId`) | Clé unique (recommandée pour piloter le v-model) |
 | `defaultOpen` | `boolean` | `false` | Ouvert au montage (mode non-contrôlé) |
 | `disabled` | `boolean` | `false` | En-tête non cliquable |
 | `headerClass` | `string` | `''` | Override classes de l'en-tête (`twMerge`) |
 | `panelClass` | `string` | `''` | Override classes du panneau (`twMerge`) |
 **Slot par défaut** = contenu du panneau.
 ## Comportement : mode `single` vs `multiple`
 - **`multiple`** (défaut) : `modelValue` est un `string[]`. Basculer une
  section ajoute/retire sa clé du tableau, sans affecter les autres.
 - **`single`** : `modelValue` est un `string` (clé ouverte, ou `''`/`undefined`
  si tout fermé). Ouvrir une section ferme la précédente.
 L'en-tête minimal : **titre + chevron animé** uniquement. Pas de badge, pas
 d'icône leading, pas de slot d'en-tête custom dans cette version (extensible
 plus tard si besoin métier).
 ## Animation & rendu
 - **Ouverture/fermeture** : transition de hauteur via
  `grid-template-rows: 0fr → 1fr` sur un wrapper en `overflow: hidden`
  (gère la hauteur dynamique du contenu sans mesure JS).
 - **Chevron** : `mdi:chevron-down` via `@iconify/vue`, rotation 180° en
  transition synchronisée avec l'ouverture.
 - **Tokens Malio** : séparateurs `border-m-border`, titre `text-m-text`,
  `rounded-malio` au besoin. Tout surchargeable via `headerClass` / `panelClass`
  fusionnés avec `twMerge()`.
 ## Accessibilité (WAI-ARIA Accordion Pattern)
 - En-tête = vrai `<button type="button">` → focusable nativement,
  Entrée/Espace pour basculer.
 - `aria-expanded` sur le bouton, `aria-controls` → id du panneau.
 - Panneau : `role="region"` + `aria-labelledby` → id du bouton.
 - Sections désactivées : `disabled` + `aria-disabled` sur le bouton.
 - **Navigation clavier ↑/↓** entre les en-têtes (déplacement du focus d'un
  en-tête à l'autre), conformément au pattern WAI-ARIA. `Home`/`End`
  optionnels (nice-to-have).
 ## Tests (Vitest + @vue/test-utils, jsdom)
 Helper `mountComponent(props)` colocalisé. Couverture cible :
 **Accordion.test.ts**
 - Rendu des enfants (slots).
 - Mode `multiple` : plusieurs sections ouvertes simultanément.
 - Mode `single` : ouvrir une section ferme la précédente.
 - v-model contrôlé : `modelValue` pilote l'état ; émission de `update:modelValue`.
 - Non-contrôlé : `defaultOpen` sur enfants → état initial correct.
 **AccordionItem.test.ts**
 - Toggle au clic sur l'en-tête.
 - `disabled` : clic sans effet, attributs `disabled` / `aria-disabled`.
 - Attributs ARIA : `aria-expanded`, `aria-controls`, `role="region"`,
  `aria-labelledby` correctement liés.
 - Navigation clavier ↑/↓ entre en-têtes.
 - Override de classes via `headerClass` / `panelClass`.
 ## Livrables documentaires (convention maison)
 - Mise à jour de `COMPONENTS.md` (tableau de props + exemples).
 - Mise à jour de `CHANGELOG.md`.
 - Page playground (ajout à `playground.nav.ts`).
 - Story Histoire (`app/story/accordion/`).
 ## Hors périmètre (YAGNI, V1)
 - Badge / compteur de filtres actifs dans l'en-tête.
 - Icône leading.
 - Slot d'en-tête personnalisé.
 - Persistance d'état (localStorage, URL).
 Ces éléments pourront être ajoutés ultérieurement si un besoin métier concret
 émerge, sans casser l'API.
@@ -1,109 +0,0 @@
 # Design — `MalioModal`
 Date : 2026-05-26
 Statut : validé
 ## Objectif
 Ajouter un composant `MalioModal` à `@malio/layer-ui` : un dialogue modal centré sur fond
 assombri. Périmètre initial = **shell générique seul** (pas de variante confirmation/alerte).
 Le consommateur place ce qu'il veut dans les slots.
 ## Décisions clés
 - **Composant autonome** : la Modal réimplémente sa propre logique en s'inspirant du Drawer,
  **sans modifier le Drawer existant** (zéro risque de régression). Un éventuel refactor vers
  un composable partagé Drawer/Modal pourra se faire plus tard.
 - **Largeur unique + override** : une largeur par défaut (`max-w-md`), ajustable par le
  consommateur via la prop `modalClass` (pas de prop `size`).
 - **Footer fixe en bas** : header fixe en haut, body scrollable au milieu (`max-h-[85vh]`),
  footer fixe en bas séparé par une bordure — structure modale classique (≠ Drawer où le footer
  est dans la zone scrollable).
 - **Front volontairement simple** pour cette première version.
 ## Emplacement & livrables
 - `app/components/malio/modal/Modal.vue`
 - `app/components/malio/modal/Modal.test.ts` (colocalisé, jsdom)
 - Page playground `.playground/pages/composant/modal/modal.vue`
 - Entrée nav : `{label: 'Modal', to: '/composant/modal/modal'}` ajoutée dans la section
  **NAVIGATION** de `.playground/playground.nav.ts`, juste après le Drawer
 - Story Histoire `app/story/modal.story.vue`
 - Mise à jour `COMPONENTS.md` (API) et `CHANGELOG.md` (`### Added`)
 ## Structure (template)
 ```
 Teleport to body
 └ Transition (fade overlay + fade/scale du panneau)
    └ div fixed inset-0 z-50 flex items-center justify-center p-4   ← centre la modal
       ├ div backdrop (bg-black/40, @click → si dismissable)
       └ div panel (role=dialog, aria-modal, w-full max-w-md max-h-[85vh], flex flex-col)
          ├ header (slot #header + bouton fermer)   ← shrink-0, rendu si slot OU showClose
          ├ body   (slot par défaut)                ← flex-1 overflow-y-auto
          └ footer (slot #footer, bordure haute)    ← shrink-0, rendu si slot #footer présent
 ```
 ## API
 ### Props
 | Prop | Type | Défaut | Rôle |
 |------|------|--------|------|
 | `id` | `string` | `''` | id du composant (sinon généré via `useId`) |
 | `modelValue` | `boolean` | `undefined` | ouverture (contrôlé) ; fallback `localValue` interne si non fourni |
 | `showClose` | `boolean` | `true` | affiche le bouton de fermeture (croix) dans le header |
 | `dismissable` | `boolean` | `true` | clic sur le backdrop ferme la modal |
 | `closeOnEscape` | `boolean` | `true` | touche Échap ferme la modal |
 | `ariaLabel` | `string` | `''` | label ARIA si pas de slot header |
 | `modalClass` | `string` | `''` | override du panneau (ex. largeur `max-w-lg`) |
 | `overlayClass` | `string` | `''` | override du backdrop |
 | `headerClass` | `string` | `''` | override du header |
 | `bodyClass` | `string` | `''` | override du body |
 | `footerClass` | `string` | `''` | override du footer |
 Mêmes props que le Drawer, **sans `side`** ; `drawerClass` → `modalClass`.
 ### Events
 - `update:modelValue(value: boolean)` — pour le `v-model`
 - `close()` — émis à chaque fermeture (croix, backdrop, Échap, fermeture programmatique)
 ### Slots
 - `#header` — contenu du header (titre…). Si absent **et** `showClose=false`, header non rendu.
 - *(défaut)* — corps de la modal (zone scrollable)
 - `#footer` — pied (boutons d'action). Rendu uniquement si le slot est fourni.
 ## Comportements repris du Drawer
 - **Teleport** vers `<body>`.
 - **Focus-trap** : focus initial sur le 1er élément focusable (sinon le panneau) ; boucle
  Tab / Shift+Tab ; restauration du focus précédent à la fermeture.
 - **Scroll-lock partagé** : compteur module-level (`openModalCount`) — `overflow:hidden` sur
  `<body>` tant qu'au moins une instance est ouverte, libéré par la dernière (gère aussi
  `onBeforeUnmount`).
 - **Pattern contrôlé / non-contrôlé** : `isControlled = computed(() => modelValue !== undefined)`
  avec `localValue` en fallback ; `isRendered` pour démonter après la transition de sortie.
 - **`defineOptions({ name: 'MalioModal', inheritAttrs: false })`** + `v-bind="attrs"` sur le
  conteneur.
 - **Transition** : fade de l'overlay + fade léger **et scale** (`scale-95 → scale-100`) du
  panneau (remplace le translate latéral du Drawer).
 ## Accessibilité
 `role="dialog"`, `aria-modal="true"`, `aria-labelledby` vers l'id du header si présent (sinon
 `aria-label`), bouton fermer avec `aria-label="Fermer"`.
 ## Tests (Vitest + @vue/test-utils, jsdom, colocalisés)
 - Rendu conditionnel (fermé → non rendu ; ouvert → panneau + backdrop).
 - `v-model` / contrôlé vs non-contrôlé.
 - Fermeture : croix, backdrop (selon `dismissable`), Échap (selon `closeOnEscape`) ; events
  `update:modelValue(false)` + `close`.
 - Slots header / défaut / footer (footer rendu seulement si fourni ; header rendu si slot OU
  `showClose`).
 - Accessibilité : `role`, `aria-modal`, `aria-labelledby`/`aria-label`.
 - Focus-trap : focus initial, boucle Tab/Shift+Tab.
 - Scroll-lock : `overflow:hidden` à l'ouverture, libéré à la fermeture (et avec instances
  multiples).
@@ -1,173 +0,0 @@
 # Design — `MalioTimePicker` (sélecteur d'heure molette, MUI-39)
 Date : 2026-05-27
 Branche : `feature/MUI-39-developper-le-composant-select-heure`
 Statut : validé (design), prêt pour plan d'implémentation
 ## Contexte
 `MalioDateTime` a été livré en version intérimaire (MUI-33) avec un `<input type="time">`
 natif sous la grille du calendrier, volontairement isolé dans `DateTime.vue` en attendant
 une maquette pour le sélecteur d'heure dédié. La maquette est maintenant fournie
 (`time.png` à la racine) : c'est une **molette de défilement style iOS** avec bande de
 sélection centrale (pastille teintée), valeur centrée en noir/gras, voisins estompés.
 Ce ticket développe ce sélecteur dédié comme **nouveau composant** et rebranche `DateTime`
 dessus.
 ## Décisions (issues du brainstorming)
 | Sujet | Décision |
 |-------|----------|
 | Relation à `MalioTime` (champs texte HH/MM) | **Nouveau composant séparé** ; `MalioTime` reste intact |
 | Nom public | **`MalioTimePicker`** (`time/TimePicker.vue`) |
 | Mécanique | **Molette iOS** : scroll vertical, snap, bande centrale ; valeur centrée = sélection |
 | Colonnes | **2 molettes** : heures `00–23`, minutes `00–59`, pas de **1** |
 | Format `modelValue` | `"HH:MM"` (24h) `string \| null` |
 | Bornes min/max | **Non** (YAGNI) — colonnes pleines |
 | Interaction | **Scroll + clic (recentre) + clavier (↑/↓)** — accessible |
 | Forme | **Champ + popover** (floating-label + icône horloge), comme `Date`/`DateTime` |
 | Style panneau | Même style que le popover date **mais sans `rounded-b`** |
 | Extrémités molette | **Boucle infinie** (23→00 sans fin) |
 | Approche technique | **CSS `scroll-snap` natif** + repositionnement par bloc pour la boucle (zéro dépendance) |
 | Rebranchement `DateTime` | **Dans cette itération** : retrait de l'`<input type="time">` natif |
 ## Arborescence des fichiers
 ```
 app/components/malio/time/
  TimePicker.vue              # NOUVEAU — public <MalioTimePicker> : champ + popover
  TimePicker.test.ts
  internal/
    TimeWheels.vue            # NOUVEAU — brique réutilisable : les 2 molettes (v-model "HH:MM")
    TimeWheel.vue             # NOUVEAU — une colonne molette infinie (v-model number)
  composables/
    useInfiniteWheel.ts       # NOUVEAU — scroll-snap + boucle infinie + index centré
    useInfiniteWheel.test.ts
    timeFormat.ts             # NOUVEAU — parse/format/pad/clamp "HH:MM"
    timeFormat.test.ts
 ```
 `Time.vue` (`MalioTime`, champs texte) **n'est pas modifié**.
 ## Composants & responsabilités
 ### `TimeWheel.vue` (interne)
 Une colonne molette infinie.
 - **Props** : `modelValue: number`, `values: number[]` (ex. `0..23`), `ariaLabel: string`.
 - **Emits** : `update:modelValue (value: number)`.
 - Délègue scroll/snap/boucle/index-centré au composable `useInfiniteWheel`.
 - Rendu : buffer de valeurs répété ; item centré en noir/gras, voisins estompés (opacité
  décroissante avec la distance au centre).
 - **Clic** sur un item visible → recentre (`scrollToValue`).
 - **Clavier** : ↑/↓ changent l'index (et scrollent), `role="spinbutton"`, `tabindex=0`,
  `aria-valuenow` / `aria-valuemin` / `aria-valuemax` / `aria-valuetext`, `aria-label`.
 ### `TimeWheels.vue` (interne — la brique partagée)
 Compose les 2 molettes + la bande centrale.
 - **Props** : `modelValue: string` (`"HH:MM"`).
 - **Emits** : `update:modelValue (value: string)`.
 - Splitte via `timeFormat` → `heures` + `minutes` ; passe à chaque `TimeWheel` ; recompose
  et émet à chaque changement.
 - **Bande centrale** : pastille teintée (`bg-m-primary/10` ou équivalent) en overlay
  positionné au centre, traversant les 2 colonnes ; le « : » séparateur entre les colonnes.
 - **C'est ce bloc qui est inséré dans `DateTime`** (et dans le popover de `TimePicker`).
 ### `TimePicker.vue` (public `MalioTimePicker`)
 Champ + popover.
 - Input **lecture-seule** affichant `"HH:MM"` (ou placeholder), floating-label, icône
  `mdi:clock-outline`, bouton **clear** (si `clearable` et rempli).
 - Au clic → ouvre un **popover** au style du popover date **sans `rounded-b`**, contenant
  `<TimeWheels v-model>`.
 - **Props famille** : `id`, `name`, `label`, `modelValue`, `placeholder`, `required`,
  `disabled`, `readonly`, `hint`, `error`, `success`, `clearable`, `inputClass`,
  `labelClass`, `groupClass`.
 - Pattern **contrôlé/non-contrôlé** (`isControlled = computed(() => props.modelValue !== undefined)`).
 - Fermeture au **clic extérieur** (handler local sur le root ; on ne réutilise pas
  `useCalendarPopover` qui porte une logique `viewMode` propre au calendrier).
 - `disabled`/`readonly` n'ouvrent pas le popover.
 - Ligne `hint`/`error`/`success` + `aria-invalid`/`aria-describedby` comme `CalendarField`.
 ### `useInfiniteWheel.ts` (composable — cœur logique)
 Toute la mécanique délicate, isolée et testable.
 - **Entrées** : ref du conteneur scrollable, `itemHeight`, longueur des valeurs, valeur
  courante, callback de changement.
 - **Sorties** : `centeredIndex` (`round(scrollTop / itemHeight) % len`), `scrollToValue(value, smooth)`,
  handlers `onScroll` / `onScrollEnd` / clavier.
 - **Boucle infinie** : buffer répété N fois ; quand `scrollTop` approche un bord, on
  repositionne `scrollTop` d'un bloc (hauteur d'un cycle de valeurs) **sans animation**,
  position visuelle identique → illusion d'infini.
 - Garde anti-boucle entre scroll programmatique et émission `modelValue`.
 ### `timeFormat.ts` (composable pur)
 - `parseTime(value: string | null): { hours: number; minutes: number } | null`
 - `formatTime(hours: number, minutes: number): string` (zéro-paddé `"HH:MM"`)
 - `padSegment`, `clampHours` (0–23), `clampMinutes` (0–59).
 ## Flux de données
 1. `TimePicker` détient `modelValue` `"HH:MM" | null` (contrôlé/non-contrôlé).
 2. À l'ouverture, `TimeWheels` reçoit la valeur courante ; si **vide**, les molettes se
   centrent sur un **défaut neutre `00:00` sans émettre**. La **1ʳᵉ interaction**
   (scroll/clic/clavier) committe et émet.
 3. `TimeWheels` splitte `"HH:MM"` → 2 nombres → `TimeWheel` ; tout changement recompose
   `"HH:MM"` et remonte via `update:modelValue`.
 4. Le **bouton clear** remet la valeur à vide/`null`.
 5. Le popover **reste ouvert** pendant le réglage (cohérent avec `DateTime`) ; se ferme au
   clic extérieur.
 ## Rebranchement `DateTime.vue`
 - Remplacer le bloc `<input type="time">` (lignes ~31-41) par :
  `<TimeWheels :model-value="timeValue || '00:00'" @update:model-value="onTimeChange" />`.
 - `onTimeChange(hhmm)` reprend la logique existante de `onTimeInput` : si `datePart`
  présent → `composeDateTime(datePart, hhmm)` ; sinon → `pendingTime.value = hhmm`.
 - Supprimer `timeInputId` et le handler `onTimeInput` natif. `pendingTime` / `composeDateTime`
  / `splitDateTime` inchangés.
 - **Mettre à jour `DateTime.test.ts`** : l'ancien test ciblait `data-test="time-input"` /
  `type="time"` ; le réécrire pour interagir avec `TimeWheels` (émission de
  `update:modelValue` depuis la brique).
 ## Accessibilité
 - Molette : `role="spinbutton"`, `tabindex=0`, `aria-label` « Heures » / « Minutes »,
  `aria-valuenow/valuemin/valuemax/valuetext`, flèches ↑/↓.
 - Champ : `aria-haspopup="dialog"`, `aria-expanded`, popover `role="dialog"`,
  `aria-invalid` + `aria-describedby` reliés à la ligne hint/error/success.
 - Label lié `for`/`id`.
 ## Stratégie de tests
 - **`useInfiniteWheel.test.ts`** : index centré depuis `scrollTop`, `scrollToValue`, math du
  repositionnement de boucle (jump par bloc), modulo/clamp.
 - **`TimeWheel.test.ts`** : flèches clavier changent la valeur & émettent, clic recentre,
  attributs aria (`role`, `aria-valuenow`...).
 - **`TimeWheels.test.ts`** : split/compose `"HH:MM"`, émission de la valeur combinée, 2
  molettes rendues, séparateur.
 - **`TimePicker.test.ts`** : rendu, label/id, ouverture popover au clic, affichage de
  `modelValue`, clear, contrôlé/non-contrôlé, `disabled`/`readonly` n'ouvrent pas, aria.
 - **`timeFormat.test.ts`** : parse/format/pad/clamp (valeurs limites, `null`, invalides).
 - **`DateTime.test.ts`** : mis à jour pour la brique molette.
 - ⚠️ **Limite jsdom** : pas de scroll-snap réel. La mécanique est testée via le composable
  (métriques `scrollTop`/`itemHeight` mockées) ; les tests composant portent sur
  émissions/clavier/clic/aria, pas le snap pixel.
 - ⚠️ **Tests flaky connus** (Date & InputRichText) : relancer 2–3× avant de conclure à une
  régression ; hook pre-commit parfois flaky → `--no-verify` documenté.
 ## Livrables documentation (conventions projet)
 - **`COMPONENTS.md`** : ajout `MalioTimePicker` + note « `DateTime` utilise désormais la
  molette ». (manuel)
 - **`CHANGELOG.md`** : entrée. (manuel)
 - **Playground** : page dédiée + entrée dans `playground.nav.ts` (routage Nuxt centralisé).
 - **Histoire** : `TimePicker.story.vue`.
 - Appui sur la skill `creating-malio-component` pendant l'implémentation.
 ## Hors scope
 - Bornes horaires `min`/`max`.
 - Format 12h / AM-PM.
 - Granularité minutes configurable (`minuteStep`).
 - Colonne secondes.
 Ces points pourront faire l'objet d'itérations ultérieures si le besoin métier émerge.
@@ -12,7 +12,6 @@ export default defineNuxtConfig({
      path: join(dir, 'app/components/malio'),
      prefix: 'Malio',
      pathPrefix: false,
      extensions: ['vue'],
    },
  ],
@@ -20,7 +20,6 @@ export default {
      colors: {
        m: {
          primary: 'rgb(var(--m-primary) / <alpha-value>)',
          'primary-light': 'rgb(var(--m-primary-light) / <alpha-value>)',
          surface: 'rgb(var(--m-surface) / <alpha-value>)',
          border: 'rgb(var(--m-border) / <alpha-value>)',
          text: 'rgb(var(--m-text) / <alpha-value>)',