[#MUI-27] Création d'un composant sélection de site (#29 )

Composant MalioSiteSelector : bande horizontale pour choisir un site (usine ou lieu) parmi une liste. Tuiles flex proportionnelles, couleur du site sélectionné partagée par toutes les tuiles (opacité 1 / 0.4). Expose update:modelValue (id) + change (objet site complet) pour faciliter les appels API côté consommateur. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> | 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: #29 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
Merge branch 'main' into develop
2026-04-17 12:28:44 +00:00 · 2026-04-16 09:06:04 +02:00 · 2026-04-16 07:00:59 +00:00 · 2026-04-07 14:31:29 +02:00 · 2026-04-07 14:30:06 +02:00 · 2026-04-07 10:14:51 +02:00
132 changed files with 571 additions and 23336 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,24 +0,0 @@
 <template>
  <div class="flex h-screen">
    <MalioSidebar :sections="navSections">
      <template #logo>
        <NuxtLink to="/">
          <img src="/LOGO_MALIO.png" alt="Malio">
        </NuxtLink>
      </template>
      <template #logo-collapsed>
        <NuxtLink to="/">
          <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio">
        </NuxtLink>
      </template>
    </MalioSidebar>
    <main class="flex-1 overflow-y-auto p-6">
      <slot />
    </main>
  </div>
 </template>
 <script setup lang="ts">
 import {navSections} from '../playground.nav'
 </script>
@@ -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 +1,48 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const drawerRight = ref(false)
+const drawerDefault = ref(false)
-const drawerLeft = ref(false)
+const drawerNoClose = ref(false)
-const drawerForm = ref(false)
+const drawerCustomWidth = ref(false)
-const drawerFixedFooter = ref(false)
+const drawerWithForm = ref(false)
 const drawerNoDismiss = 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">Drawer droite (défaut)</h2>
+      <h2 class="mb-6 text-xl font-bold">Drawer simple</h2>
-      <MalioButton label="Ouvrir à droite" @click="drawerRight = true" />
+      <MalioButton label="Ouvrir le drawer" @click="drawerDefault = true" />
-      <MalioDrawer v-model="drawerRight">
+      <MalioDrawer v-model="drawerDefault" title="Titre du drawer">
-        <template #header>
+        <p class="text-m-text">Contenu du drawer. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <h2 class="text-[24px] font-bold text-black">Détails</h2>
        </template>
        <p class="text-m-text">Contenu du drawer. Échap, clic backdrop et croix le ferment.</p>
      </MalioDrawer>
    </div>
    <div class="rounded-lg border p-6">
-      <h2 class="mb-6 text-xl font-bold">Drawer gauche</h2>
+      <h2 class="mb-6 text-xl font-bold">Sans bouton fermer</h2>
-      <MalioButton label="Ouvrir à gauche" variant="secondary" @click="drawerLeft = true" />
+      <MalioButton label="Ouvrir le drawer" variant="secondary" @click="drawerNoClose = true" />
-      <MalioDrawer v-model="drawerLeft" side="left">
+      <MalioDrawer v-model="drawerNoClose" title="Sans croix" :show-close="false">
-        <template #header>
+        <p class="text-m-text">Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
          <h2 class="text-[24px] font-bold text-black">Navigation</h2>
        </template>
        <p class="text-m-text">Ce drawer glisse depuis la gauche.</p>
      </MalioDrawer>
    </div>
    <div class="rounded-lg border p-6">
-      <h2 class="mb-6 text-xl font-bold">Avec footer collant</h2>
+      <h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
-      <MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="drawerForm = true" />
+      <MalioButton label="Ouvrir le drawer large" variant="tertiary" @click="drawerCustomWidth = true" />
-      <MalioDrawer v-model="drawerForm" drawer-class="max-w-lg">
+      <MalioDrawer v-model="drawerCustomWidth" title="Drawer large" drawer-class="max-w-2xl">
-        <template #header>
+        <p class="text-m-text">Ce drawer utilise une largeur personnalisée via drawerClass.</p>
-          <h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
+      </MalioDrawer>
-        </template>
+    </div>
-        <div class="flex flex-col gap-4 py-2">
+
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Avec formulaire</h2>
      <MalioButton label="Ouvrir le formulaire" variant="danger" @click="drawerWithForm = true" />
      <MalioDrawer v-model="drawerWithForm" title="Formulaire">
        <div class="flex flex-col gap-4">
          <MalioInputText label="Nom" />
          <MalioInputText label="Prénom" />
          <MalioInputText label="Email" />
          <MalioButton label="Enregistrer" button-class="w-full" @click="drawerWithForm = false" />
        </div>
        <template #footer>
          <div class="sticky bottom-0 flex gap-3 bg-white py-4">
            <MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
            <MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
          </div>
        </template>
      </MalioDrawer>
    </div>
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Avec footer fixed bottom</h2>
      <MalioButton label="Ouvrir (footer fixe)" variant="tertiary" @click="drawerFixedFooter = true" />
      <MalioDrawer v-model="drawerFixedFooter">
        <template #header>
          <h2 class="text-[24px] font-bold text-black">Conditions</h2>
        </template>
        <!-- pb-24 : laisse la place au footer fixe qui sort du flux et recouvrirait le bas du contenu -->
        <div class="flex flex-col gap-4 pb-24">
          <p v-for="n in 12" :key="n" class="text-m-text">
            Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que le footer reste fixé en bas du viewport.
          </p>
        </div>
        <template #footer>
          <!-- fixed : positionné par rapport au viewport ; w-full max-w-md cale la largeur sur le drawer droite par défaut -->
          <div class="fixed bottom-0 right-0 w-full max-w-md border-t border-m-border bg-white px-5 py-4">
            <MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
          </div>
        </template>
      </MalioDrawer>
    </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="drawerNoDismiss = true" />
      <MalioDrawer v-model="drawerNoDismiss" :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 ce drawer. Utilisez la croix.</p>
      </MalioDrawer>
    </div>
  </div>
@@ -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>
@@ -1,322 +0,0 @@
 <template>
  <div class="flex justify-center">
    <div class="w-[1348px]">
      <div class="flex gap-3 mt-[46px]">
        <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">Ajouter un client</h1>
      </div>
      <div class="mt-[48px] grid grid-cols-3 gap-x-[80px] gap-y-8">
        <MalioInputText
          label="Nom du client (Entreprise)"
        />
        <MalioInputText
          label="Nom du contact principal"
        />
        <MalioInputText
          label="Prénom du contact principal"
        />
        <MalioSelectCheckbox
          v-model="multiselectValue"
          label="Catégorie"
          :options="[
            {label: 'Catégorie 1', value: 'Catégorie 1'},
            {label: 'Catégorie 2', value: 'Catégorie 2'}
          ]"
        />
        <MalioInputPhone
          v-for="(_, index) in phones"
          :key="index"
          v-model="phones[index]"
          label="Téléphone"
          add-icon-name="mdi:plus"
          :addable="phones.length === 1"
          @add="addPhoneInput"
        />
        <MalioInputEmail
          label="Email"
        />
        <MalioSelect
          v-model="distributeur"
          value=""
          label="Distributeur / Courtier"
          :options="[
            {label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
            {label: 'Distributeur', value: 'Distributeur'},
            {label: 'Courtier', value: 'Courtier'},
          ]"
        />
        <MalioSelect
          v-model="nomCourtier"
          value=""
          label="Nom du courtier"
          :options="[
            {label: 'Nom 1', value: 'Nom 1'}
          ]"
        />
        <MalioSelect
          v-model="nomDistributeur"
          value=""
          label="Nom du distributeur"
          :options="[
            {label: 'Nom 1', value: 'Nom 1'}
          ]"
        />
        <MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
      </div>
      <div class="mt-12 flex justify-center">
        <MalioButton label="Valider" variant="primary"/>
      </div>
      <div class="mt-[60px]">
        <MalioTabList :tabs="tabs" v-model="tabsValue">
          <template #information>
            <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
                v-model="dateCreation"
                label="Date création"
              />
              <MalioInputText label="Nombre de salariés" />
              <MalioInputAmount label="CA"/>
              <MalioInputText label="Dirigeant" />
              <MalioInputText label="Résultat" />
            </div>
            <div class="mt-12 flex justify-center">
              <MalioButton label="Valider" variant="primary"/>
            </div>
          </template>
          <template #adresses>
            <div class="relative grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
              <MalioButtonIcon
                icon="mdi:delete-outline"
                aria-label="Supprimer l'adresse"
                variant="ghost"
                button-class="absolute top-3 right-3"
                @click="onDeleteAdresse"
              />
              <MalioCheckbox label="Prospect" groupClass="self-center"/>
              <MalioCheckbox label="Adresse de livraison" groupClass="self-center"/>
              <MalioCheckbox label="Facturation" groupClass="self-center"/>
              <MalioSelectCheckbox
                v-model="multiselectValue"
                label="Catégorie"
                :options="[
              {label: 'Catégorie 1', value: 'Catégorie 1'},
              {label: 'Catégorie 2', value: 'Catégorie 2'}
            ]"
              />
              <MalioSelect
                label="Pays"
                v-model="pays"
                :options="[
                    {label: 'France', value: 'France'},
                    {label: 'Espagne', value: 'Espagne'}
            ]"/>
              <MalioInputText v-model="codePostal" label="Code postal" />
              <MalioSelect
                v-model="ville"
                label="Ville"
                :options="villeOptions"
                :no-options-text="villeNoOptionsText"
              />
              <MalioInputAutocomplete
                v-model="adresse"
                label="Adresse"
                :options="adresseOptions"
                :loading="adresseLoading"
                :min-search-length="2"
                :no-results-text="adresseNoResultsText"
                :min-search-text="adresseMinSearchText"
                @search="onSearchAdresse"
              />
              <MalioInputText label="Adresse complémentaire"/>
              <div class="flex justify-between">
                <MalioCheckbox
                  v-for="dep in departements"
                  :key="dep"
                  v-model="departementsSelected[dep]"
                  :label="dep"
                  group-class="w-auto self-center"
                />
              </div>
              <MalioSelect label="Contact" :options="[]"/>
              <MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
            </div>
            <div class="mt-12 flex justify-center gap-6">
              <MalioButton label="Nouvelle Adresse" variant="secondary" icon-name="mdi:add-bold" icon-position="left"/>
              <MalioButton label="Valider" variant="primary"/>
            </div>
          </template>
        </MalioTabList>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref, computed, watch} from 'vue'
 import MalioDate from "../../../../app/components/malio/date/Date.vue";
 type Commune = {
  nom: string
  code: string
  codesPostaux: string[]
 }
 type BanFeature = {
  properties: {
    label: string
    id: string
    name: string
    housenumber?: string
    street?: string
    postcode: string
    citycode: string
    city: string
  }
 }
 const multiselectValue = ref<Array<string | number>>([])
 const distributeur = ref<string>('')
 const phones = ref<string[]>([''])
 const nomDistributeur = ref<string>('')
 const nomCourtier = ref<string>('')
 function addPhoneInput() {
  phones.value.push('')
 }
 function onDeleteAdresse() {
  console.log('Supprimer cette adresse')
 }
 const departements = ['86', '17', '82']
 const departementsSelected = ref<Record<string, boolean>>({86: false, 17: false, 82: false})
 const pays = ref<string>('France')
 const codePostal = ref<string>('')
 const ville = ref<string | number | null>(null)
 const villeOptions = ref<Array<{label: string; value: string}>>([])
 const villeLoading = ref(false)
 const villeNoOptionsText = computed(() => {
  if (villeLoading.value) return 'Chargement…'
  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir un code postal (5 chiffres)'
  return 'Aucune ville pour ce code postal'
 })
 let villeFetchId = 0
 watch(codePostal, async (cp) => {
  ville.value = null
  villeOptions.value = []
  adresse.value = null
  adresseOptions.value = []
  if (!/^\d{5}$/.test(cp)) {
    villeLoading.value = false
    return
  }
  const requestId = ++villeFetchId
  villeLoading.value = true
  try {
    const response = await fetch(`https://geo.api.gouv.fr/communes?codePostal=${cp}`)
    const data = await response.json() as Commune[]
    if (requestId !== villeFetchId) return
    villeOptions.value = data.map(c => ({label: c.nom, value: c.code}))
  } catch (err) {
    if (requestId !== villeFetchId) return
    villeOptions.value = []
    console.error('Erreur lors du chargement des villes', err)
  } finally {
    if (requestId === villeFetchId) villeLoading.value = false
  }
 })
 const adresse = ref<string | number | null>(null)
 const adresseOptions = ref<Array<{label: string; value: string}>>([])
 const adresseLoading = ref(false)
 const adresseMinSearchText = computed(() => {
  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir d\'abord un code postal'
  return 'Tapez au moins 3 caractères'
 })
 const adresseNoResultsText = computed(() => {
  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir d\'abord un code postal'
  return 'Aucune adresse trouvée'
 })
 let adresseFetchId = 0
 const onSearchAdresse = async (query: string) => {
  if (!/^\d{5}$/.test(codePostal.value) || query.length < 3) {
    adresseOptions.value = []
    adresseLoading.value = false
    return
  }
  const requestId = ++adresseFetchId
  adresseLoading.value = true
  try {
    const params = new URLSearchParams({
      q: query,
      postcode: codePostal.value,
      type: 'housenumber',
    })
    const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`)
    const data = await response.json() as {features: BanFeature[]}
    if (requestId !== adresseFetchId) return
    adresseOptions.value = data.features.map(f => ({
      label: f.properties.name,
      value: f.properties.name,
    }))
  } catch (err) {
    if (requestId !== adresseFetchId) return
    adresseOptions.value = []
    console.error('Erreur lors du chargement des adresses', err)
  } finally {
    if (requestId === adresseFetchId) adresseLoading.value = false
  }
 }
 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))
 const tabs = computed(() => [
  {
    key: 'information',
    label: 'Information',
    icon: 'mdi:account-outline',
  },
  {
    key: 'contacts',
    label: 'Contacts',
    icon: 'mdi:account-box-plus-outline',
    disabled: !informationValid.value,
  },
  {
    key: 'adresses',
    label: 'Adresses',
    icon: 'mdi:map-marker-outline',
    disabled: !informationValid.value,
  },
  {
    key: 'transport',
    label: 'Transport',
    icon: 'mdi:truck-delivery-outline',
    disabled: !informationValid.value || !adressesValid.value,
  },
  {
    key: 'comptabilité',
    label: 'Comptabilité',
    icon: 'mdi:bank-circle-outline',
    disabled: !informationValid.value || !adressesValid.value,
  },
 ])
 </script>
@@ -1,180 +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 (statique)</h2>
      <MalioInputAutocomplete
        v-model="simpleValue"
        label="Pays"
        :options="staticOptions"
      />
      <p class="mt-2 text-sm text-m-muted">
        Valeur sélectionnée : <code>{{ simpleValue ?? 'null' }}</code>
      </p>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
      <MalioInputAutocomplete
        v-model="leftIconValue"
        label="Recherche"
        icon-name="mdi:magnify"
        icon-position="left"
        :options="staticOptions"
      />
    </div>
    <div class="rounded-lg border p-4 md:col-span-2">
      <h2 class="mb-4 text-xl font-bold">Branché sur une API (simulé)</h2>
      <p class="mb-3 text-sm text-m-muted">
        Le parent écoute l'event <code>search</code> et alimente <code>options</code> + <code>loading</code>.
        Tapez au moins 2 caractères.
      </p>
      <MalioInputAutocomplete
        v-model="apiValue"
        label="Client"
        :options="apiOptions"
        :loading="apiLoading"
        :min-search-length="2"
        icon-name="mdi:magnify"
        icon-position="left"
        @search="onSearchApi"
        @select="onSelectApi"
      />
      <p v-if="apiSelected" class="mt-2 text-sm text-m-muted">
        Sélection : <code>{{ apiSelected.label }} (id={{ apiSelected.value }})</code>
      </p>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec création (allowCreate)</h2>
      <MalioInputAutocomplete
        v-model="createValue"
        label="Catégorie"
        :options="staticOptions"
        allow-create
        hint="Taper Entrée pour créer une nouvelle valeur"
        @create="onCreate"
      />
      <p v-if="createdItems.length > 0" class="mt-2 text-sm text-m-muted">
        Créés : {{ createdItems.join(', ') }}
      </p>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputAutocomplete
        model-value="fr"
        label="Pays"
        :options="staticOptions"
        disabled
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputAutocomplete
        model-value="fr"
        label="Pays"
        :options="staticOptions"
        readonly
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
      <MalioInputAutocomplete
        v-model="hintValue"
        label="Pays"
        :options="staticOptions"
        hint="Sélectionne un pays dans la liste"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputAutocomplete
        model-value="fr"
        label="Pays"
        :options="staticOptions"
        error="Sélection invalide"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputAutocomplete
        model-value="fr"
        label="Pays"
        :options="staticOptions"
        success="Sélection valide"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Liste vide</h2>
      <MalioInputAutocomplete
        v-model="emptyValue"
        label="Recherche"
        :options="[]"
        no-results-text="Aucun élément disponible"
      />
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 type Option = {label: string; value: string | number}
 const staticOptions: Option[] = [
  {label: 'France', value: 'fr'},
  {label: 'Belgique', value: 'be'},
  {label: 'Canada', value: 'ca'},
  {label: 'Suisse', value: 'ch'},
  {label: 'Luxembourg', value: 'lu'},
  {label: 'Allemagne', value: 'de'},
  {label: 'Espagne', value: 'es'},
  {label: 'Italie', value: 'it'},
 ]
 const simpleValue = ref<string | number | null>(null)
 const leftIconValue = ref<string | number | null>(null)
 const createValue = ref<string | number | null>(null)
 const hintValue = ref<string | number | null>(null)
 const emptyValue = ref<string | number | null>(null)
 const createdItems = ref<string[]>([])
 const onCreate = (value: string) => {
  createdItems.value.push(value)
 }
 const apiValue = ref<string | number | null>(null)
 const apiOptions = ref<Option[]>([])
 const apiLoading = ref(false)
 const apiSelected = ref<Option | null>(null)
 const fakeClients: Option[] = [
  {label: 'Yuno Malio', value: 1},
  {label: 'Yuna Corp', value: 2},
  {label: 'Yum Foods', value: 3},
  {label: 'Yumi Studio', value: 4},
  {label: 'Acme Inc.', value: 5},
  {label: 'Globex Corp', value: 6},
  {label: 'Initech', value: 7},
  {label: 'Soylent Corp', value: 8},
 ]
 const onSearchApi = async (query: string) => {
  apiLoading.value = true
  await new Promise(resolve => setTimeout(resolve, 400))
  apiOptions.value = fakeClients.filter(c =>
    c.label.toLowerCase().includes(query.toLowerCase()),
  )
  apiLoading.value = false
 }
 const onSelectApi = (option: Option | null) => {
  apiSelected.value = option
 }
 </script>
@@ -1,106 +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>
      <MalioInputEmail />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
      <MalioInputEmail
        v-model="emailValue"
        label="Adresse email"
        name="email"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
      <MalioInputEmail
        label="Adresse email"
        icon-position="left"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
      <MalioInputEmail
        label="Adresse email"
        :icon-name="''"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputEmail
        model-value="contact@malio.fr"
        disabled
        label="Adresse email"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputEmail
        model-value="readonly@malio.fr"
        readonly
        label="Adresse email"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
      <MalioInputEmail
        label="Adresse email"
        hint="ex: prenom.nom@malio.fr"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputEmail
        model-value="pas-un-email"
        label="Adresse email"
        error="Adresse email invalide"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputEmail
        model-value="contact@malio.fr"
        label="Adresse email"
        success="Adresse email valide"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
      <MalioInputEmail
        v-model="dynamicEmail"
        label="Adresse email"
        hint="Saisir une adresse au format prenom@domaine.tld"
        :error="dynamicError"
        :success="dynamicSuccess"
      />
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 const emailValue = ref('')
 const dynamicEmail = ref('')
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 const isDynamicValid = computed(() => emailRegex.test(dynamicEmail.value))
 const dynamicError = computed(() => {
  if (!dynamicEmail.value) return ''
  return isDynamicValid.value ? '' : 'Adresse email invalide'
 })
 const dynamicSuccess = computed(() => {
  if (!dynamicEmail.value) return ''
  return isDynamicValid.value ? 'Adresse email valide' : ''
 })
 </script>
@@ -1,141 +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>
      <MalioInputPhone />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
      <MalioInputPhone
        v-model="phoneValue"
        label="Téléphone"
        name="phone"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
      <MalioInputPhone
        v-model="phoneAddable"
        label="Téléphone"
        addable
        @add="onAdd"
      />
      <p v-if="addClicks > 0" class="mt-2 text-sm text-m-muted">
        Bouton cliqué {{ addClicks }} fois
      </p>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Icône à droite (sans bouton +)</h2>
      <MalioInputPhone
        label="Téléphone"
        icon-position="right"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
      <MalioInputPhone
        label="Téléphone"
        :icon-name="''"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec masque français</h2>
      <MalioInputPhone
        v-model="phoneFrench"
        label="Téléphone (FR)"
        mask="+33 # ## ## ## ##"
        hint="Saisir uniquement les chiffres"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé (avec addable)</h2>
      <MalioInputPhone
        model-value="+33 6 12 34 56 78"
        addable
        disabled
        label="Téléphone"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (avec addable)</h2>
      <MalioInputPhone
        model-value="+33 6 12 34 56 78"
        addable
        readonly
        label="Téléphone"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
      <MalioInputPhone
        label="Téléphone"
        hint="Format international recommandé"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputPhone
        model-value="abc"
        label="Téléphone"
        error="Numéro de téléphone invalide"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputPhone
        model-value="+33 6 12 34 56 78"
        label="Téléphone"
        success="Numéro valide"
      />
    </div>
    <div class="rounded-lg border p-4 md:col-span-2">
      <h2 class="mb-4 text-xl font-bold">Cas ERP — liste de téléphones (max 2)</h2>
      <p class="mb-3 text-sm text-m-muted">
        Le bouton + s'affiche sur le dernier champ tant que la liste contient moins de {{ MAX_PHONES }} numéros.
      </p>
      <div class="flex flex-col gap-4">
        <MalioInputPhone
          v-for="(phone, index) in phones"
          :key="index"
          v-model="phones[index]"
          :label="`Téléphone ${index + 1}`"
          :addable="index === phones.length - 1 && phones.length < MAX_PHONES"
          @add="addPhone"
        />
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 const phoneValue = ref('')
 const phoneAddable = ref('')
 const phoneFrench = ref('')
 const addClicks = ref(0)
 const onAdd = () => {
  addClicks.value++
 }
 const MAX_PHONES = 2
 const phones = ref<string[]>([''])
 const addPhone = () => {
  if (phones.value.length < MAX_PHONES) {
    phones.value.push('')
  }
 }
 </script>
@@ -1,91 +0,0 @@
 <template>
  <div class="grid grid-cols-1 items-start gap-6 p-4 lg:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <MalioInputRichText
        v-model="simpleValue"
        label="Note"
        placeholder="Écrire ici…"
      />
      <pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ simpleValue }}</pre>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec contenu initial + hint</h2>
      <MalioInputRichText
        v-model="hintValue"
        label="Description"
        hint="Tu peux mettre en forme avec la barre d'outils"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputRichText
        v-model="errorValue"
        label="Compte-rendu"
        error="Le compte-rendu doit faire au moins 20 caractères"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputRichText
        v-model="successValue"
        label="Compte-rendu"
        success="Compte-rendu validé"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputRichText
        v-model="readonlyValue"
        label="Note (lecture seule)"
        readonly
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Disabled</h2>
      <MalioInputRichText
        v-model="disabledValue"
        label="Note (désactivée)"
        disabled
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Affichage seul (editable=false)</h2>
      <MalioInputRichText
        :model-value="readonlyValue"
        :editable="false"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
      <MalioInputRichText
        v-model="htmlValue"
        label="Article"
        output-format="html"
        min-height="200px"
        placeholder="Tape ici, la sortie sera en HTML…"
      />
      <pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ htmlValue }}</pre>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import MalioInputRichText from '../../../../app/components/malio/input/InputRichText.vue'
 const simpleValue = ref('')
 const hintValue = ref('## Titre\n\nUn paragraphe avec du **gras**, de l\'*italique* et un [lien](https://malio.fr).')
 const errorValue = ref('Trop court')
 const successValue = ref('Tout est bon de mon côté.')
 const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
 const disabledValue = ref('Contenu indisponible.')
 const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
 </script>
@@ -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>
@@ -1,10 +1,181 @@
 <template>
-  <div class="mx-auto max-w-2xl py-16 text-center">
+  <div class="flex min-h-screen">
-    <h1 class="text-3xl font-bold text-m-text">
+    <aside class="w-72 bg-m-bg p-6 text-white">
-      Playground @malio/layer-ui
+      <button
-    </h1>
+        type="button"
-    <p class="mt-4 text-m-muted">
+        class="text-xl text-black font-semibold"
-      Sélectionne un composant dans la barre latérale pour afficher sa page de démonstration.
+        @click="clearSelection"
-    </p>
+      >
        Liste des composants
      </button>
      <nav class="mt-6 flex flex-col gap-1">
        <div
          v-for="group in groups"
          :key="group.category"
        >
          <button
            type="button"
            class="flex w-full items-center justify-between rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary/10"
            @click="toggleCategory(group.category)"
          >
            {{ group.category }}
            <span
              class="text-xs transition-transform duration-200"
              :class="openCategories.has(group.category) ? 'rotate-90' : ''"
            >
              &#9654;
            </span>
          </button>
          <div
            v-if="openCategories.has(group.category)"
            class="ml-3 flex flex-col gap-1 border-l border-gray-300 pl-2"
          >
            <button
              v-for="item in group.items"
              :key="item.name"
              type="button"
              class="rounded px-3 py-1.5 text-left text-sm text-black hover:bg-m-primary hover:text-white"
              :class="selectedName === item.name ? 'bg-m-primary/50 text-white' : ''"
              @click="selectItem(item.name)"
            >
              {{ item.label }}
            </button>
          </div>
        </div>
      </nav>
    </aside>
    <main class="flex-1 p-6">
      <component
        :is="selectedDemoComponent"
        v-if="selectedDemoComponent"
      />
      <p
        v-else-if="selectedName"
        class="text-gray-700"
      >
        Page de demo introuvable:
        <code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
      </p>
      <div v-else>
        <h1 class="text-2xl font-semibold text-gray-900">
          Playground composants
        </h1>
        <p class="mt-2 text-gray-600">
          Selectionne un composant dans la liste pour afficher sa page de demo.
        </p>
      </div>
    </main>
  </div>
 </template>
 <script setup lang="ts">
 import {computed, reactive, ref, watch, shallowRef} from 'vue'
 type LoadedModule = {
  default: unknown
 }
 type Item = {
  name: string
  label: string
 }
 type Group = {
  category: string
  items: Item[]
 }
 const componentModules = import.meta.glob('../../app/components/malio/**/*.vue')
 const demoModules = import.meta.glob('./composant/**/*.vue')
 const demoByName: Record<string, () => Promise<LoadedModule>> =
  Object.fromEntries(
    Object.entries(demoModules).map(([file, loader]) => {
      const name = file.split('/').pop()?.replace('.vue', '') ?? ''
      return [name.toLowerCase(), loader as () => Promise<LoadedModule>]
    }),
  )
 const groups = computed<Group[]>(() => {
  const categoryMap = new Map<string, Item[]>()
  Object.keys(componentModules).forEach((file) => {
    const parts = file.split('/')
    const name = parts.pop()?.replace('.vue', '') ?? ''
    const category = parts.pop() ?? ''
    if (!categoryMap.has(category)) {
      categoryMap.set(category, [])
    }
    categoryMap.get(category)!.push({name, label: name})
  })
  return Array.from(categoryMap.entries())
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([category, items]) => ({
      category: category.charAt(0).toUpperCase() + category.slice(1),
      items: items.sort((a, b) => a.label.localeCompare(b.label)),
    }))
 })
 const openCategories = reactive(new Set<string>())
 const selectedName = ref('')
 const hasInitializedSelection = ref(false)
 watch(
  groups,
  (val) => {
    if (!hasInitializedSelection.value && val.length > 0) {
      openCategories.add(val[0].category)
      if (val[0].items.length > 0) {
        selectedName.value = val[0].items[0].name
      }
      hasInitializedSelection.value = true
    }
  },
  {immediate: true},
 )
 function toggleCategory(category: string) {
  if (openCategories.has(category)) {
    openCategories.delete(category)
  } else {
    openCategories.add(category)
  }
 }
 function selectItem(name: string) {
  selectedName.value = selectedName.value === name ? '' : name
 }
 function clearSelection() {
  selectedName.value = ''
 }
 const selectedDemoComponent = shallowRef<unknown>(null)
 watch(selectedName, async (name) => {
  if (!name) {
    selectedDemoComponent.value = null
    return
  }
  const loader = demoByName[name.toLowerCase()]
  if (!loader) {
    selectedDemoComponent.value = null
    return
  }
  const mod = await loader()
  selectedDemoComponent.value = mod.default
 })
 const selectedDemoFileName = computed(() => {
  const name = selectedName.value
  if (!name) return ''
  return name.charAt(0).toLowerCase() + name.slice(1)
 })
 </script>
@@ -1,78 +0,0 @@
 import type {SidebarSection} from '../app/components/malio/sidebar/Sidebar.vue'
 export const navSections: SidebarSection[] = [
  {
    label: 'BOUTONS',
    icon: 'mdi:gesture-tap-button',
    items: [
      {label: 'Button', to: '/composant/button/button'},
      {label: 'Button Icon', to: '/composant/button/buttonIcon'},
    ],
  },
  {
    label: 'CHAMPS',
    icon: 'mdi:form-textbox',
    items: [
      {label: 'Texte', to: '/composant/input/inputText'},
      {label: 'Nombre', to: '/composant/input/inputNumber'},
      {label: 'Montant', to: '/composant/input/inputAmount'},
      {label: 'Email', to: '/composant/input/inputEmail'},
      {label: 'Mot de passe', to: '/composant/input/inputPassword'},
      {label: 'Téléphone', to: '/composant/input/inputPhone'},
      {label: 'Zone de texte', to: '/composant/input/inputTextArea'},
      {label: 'Saisie assistée', to: '/composant/input/inputAutocomplete'},
      {label: 'Upload', to: '/composant/input/inputUpload'},
      {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',
    items: [
      {label: 'Select', to: '/composant/select/select'},
      {label: 'Select Checkbox', to: '/composant/select/selectCheckbox'},
      {label: 'Checkbox', to: '/composant/checkbox/checkbox'},
      {label: 'Radio', to: '/composant/radio/radioButton'},
    ],
  },
  {
    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'},
      {label: 'Accordéon', to: '/composant/accordion/accordion'},
    ],
  },
  {
    label: 'DONNÉES',
    icon: 'mdi:table',
    items: [
      {label: 'DataTable', to: '/composant/datatable/datatable'},
    ],
  },
  {
    label: 'DIVERS',
    icon: 'mdi:dots-horizontal',
    items: [
      {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'},
    ],
  },
 ]
@@ -2,26 +2,8 @@
  "branches": ["main", "master"],
  "repositoryUrl": "https://gitea.malio.fr/MALIO-DEV/malio-layer-ui.git",
  "plugins": [
-    [
+    "@semantic-release/commit-analyzer",
-      "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
      {
        "preset": "angular",
        "parserOpts": {
          "headerPattern": "^(\\w+)(?:\\(([\\w$.\\-* ]+)\\))?\\s*:\\s+(.+)$",
          "headerCorrespondence": ["type", "scope", "subject"]
        }
      }
    ],
    [
      "@semantic-release/release-notes-generator",
      {
        "preset": "angular",
        "parserOpts": {
          "headerPattern": "^(\\w+)(?:\\(([\\w$.\\-* ]+)\\))?\\s*:\\s+(.+)$",
          "headerCorrespondence": ["type", "scope", "subject"]
        }
      }
    ],
    "@semantic-release/npm"
  ]
 }
@@ -26,20 +26,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-15] Création d'un composant drawer
 * [#MUI-22] Création d'un composant datatable
 * [#MUI-27] Création d'un composant sélection de site
 * Création d'un composant rich text (TipTap) avec sortie markdown / HTML
 * [#MUI-30] Création d'un composant email
 * [#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`.
 ### Fixed
 * Hauteur des boutons de pagination du datatable alignée sur le select (40px)
 * Distribution de `tailwind.config.ts` aux projets consommateurs avec paths `content` absolus
@@ -66,160 +66,6 @@ Champ mot de passe avec toggle visibilité.
 ---
 ## MalioInputEmail
 Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outline` à droite par défaut.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `label` | `string` | `''` | Label du champ |
 | `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
 | `name` | `string` | `''` | Attribut name |
 | `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'email'` pour suggérer l'email utilisateur) |
 | `disabled` | `boolean` | `false` | Désactive le champ |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `required` | `boolean` | `false` | Champ requis |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
 | `iconName` | `string` | `'mdi:email-outline'` | Icône Iconify (chaîne vide pour masquer) |
 | `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône |
 | `iconSize` | `string \| number` | `24` | Taille icône |
 | `iconColor` | `string` | `'text-m-muted'` | Classe couleur icône |
 | `inputClass` | `string` | `''` | Classes CSS input |
 | `labelClass` | `string` | `''` | Classes CSS label |
 | `groupClass` | `string` | `''` | Classes CSS conteneur |
 **Events :** `update:modelValue(value: string)`
 ```vue
 <MalioInputEmail v-model="email" label="Adresse email" />
 <MalioInputEmail v-model="email" label="Email" autocomplete="email" />
 <MalioInputEmail v-model="email" label="Email" :icon-name="''" />
 <MalioInputEmail v-model="email" label="Email" error="Adresse email invalide" />
 ```
 ---
 ## MalioInputPhone
 Champ téléphone (`type="tel"` + `inputmode="tel"`) avec icône `mdi:phone-outline` à gauche par défaut et bouton `+` optionnel à droite pour gérer une liste de numéros côté parent.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `label` | `string` | `''` | Label du champ |
 | `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
 | `name` | `string` | `''` | Attribut name |
 | `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'tel'` pour suggérer un numéro enregistré) |
 | `disabled` | `boolean` | `false` | Désactive le champ et le bouton + |
 | `readonly` | `boolean` | `false` | Lecture seule (désactive aussi le bouton +) |
 | `required` | `boolean` | `false` | Champ requis |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
 | `iconName` | `string` | `'mdi:phone-outline'` | Icône Iconify (chaîne vide pour masquer) |
 | `iconPosition` | `'left' \| 'right'` | `'left'` | Position de l'icône |
 | `iconSize` | `string \| number` | `24` | Taille icône |
 | `iconColor` | `string` | `'text-m-muted'` | Classe couleur icône |
 | `mask` | `string \| MaskInputOptions` | `undefined` | Masque maska (aucun par défaut, utile pour mono-pays) |
 | `addable` | `boolean` | `false` | Affiche un bouton à droite qui émet l'event `add` |
 | `addIconName` | `string` | `'mdi:plus'` | Icône Iconify du bouton d'ajout |
 | `addButtonLabel` | `string` | `'Ajouter un numéro'` | aria-label du bouton d'ajout |
 | `inputClass` | `string` | `''` | Classes CSS input |
 | `labelClass` | `string` | `''` | Classes CSS label |
 | `groupClass` | `string` | `''` | Classes CSS conteneur |
 **Events :**
 - `update:modelValue(value: string)`
 - `add()` — émis au clic du bouton `+` (uniquement si `addable`, non `disabled`, non `readonly`)
 ```vue
 <MalioInputPhone v-model="phone" label="Téléphone" />
 <MalioInputPhone v-model="phone" label="Téléphone (FR)" mask="+33 # ## ## ## ##" />
 <MalioInputPhone v-model="phone" label="Téléphone" addable @add="addPhoneField" />
 <MalioInputPhone v-model="phone" label="Téléphone" error="Numéro invalide" />
 ```
 ---
 ## MalioInputAutocomplete
 Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtrer une liste d'options, ou pour déclencher une recherche côté parent (API). Le parent alimente `options` et `loading` en réponse à l'event `search` — c'est lui qui gère l'appel API, l'auth, la transformation et le cache.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `label` | `string` | `''` | Label flottant |
 | `modelValue` | `string \| number \| null` | `undefined` | Valeur sélectionnée (v-model) |
 | `name` | `string` | `''` | Attribut name |
 | `options` | `{label: string; value: string\|number}[]` | `[]` | Liste affichée dans le dropdown |
 | `loading` | `boolean` | `false` | Affiche un spinner + un message de chargement |
 | `debounce` | `number` | `300` | Délai (ms) avant émission de `search` |
 | `minSearchLength` | `number` | `0` | Caractères mini avant d'émettre `search` |
 | `allowCreate` | `boolean` | `false` | Autorise la saisie libre validée par Entrée (émet `create`) |
 | `iconName` | `string` | `''` | Icône Iconify décorative |
 | `iconPosition` | `'left' \| 'right'` | `'left'` | Position de l'icône décorative |
 | `iconSize` | `string \| number` | `24` | Taille de l'icône |
 | `iconColor` | `string` | `'text-m-muted'` | Classe couleur de l'icône |
 | `noResultsText` | `string` | `'Aucun résultat'` | Texte affiché quand `options` est vide |
 | `loadingText` | `string` | `'Chargement…'` | Texte affiché pendant le chargement |
 | `minSearchText` | `string` | `'Tapez pour rechercher'` | Texte affiché tant que `minSearchLength` n'est pas atteint |
 | `disabled` | `boolean` | `false` | Désactive le champ et empêche l'ouverture |
 | `readonly` | `boolean` | `false` | Lecture seule (n'ouvre pas le dropdown) |
 | `required` | `boolean` | `false` | Champ requis |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur (prioritaire) |
 | `success` | `string` | `''` | Message de succès |
 | `inputClass` | `string` | `''` | Classes CSS input |
 | `labelClass` | `string` | `''` | Classes CSS label |
 | `groupClass` | `string` | `''` | Classes CSS conteneur |
 **Events :**
 - `update:modelValue(value: string \| number \| null)` — valeur sélectionnée (v-model)
 - `search(query: string)` — émis (après debounce + minSearchLength) avec le texte tapé ; le parent l'écoute pour lancer son fetch API
 - `select(option: Option \| null)` — émis avec l'objet `Option` complet (utile pour récupérer aussi le `label`)
 - `create(value: string)` — émis quand `allowCreate=true` et que l'utilisateur valide une valeur libre
 **Clavier :** `↓` / `↑` navigation, `Entrée` sélection (ou création), `Échap` ferme le dropdown.
 ```vue
 <!-- Usage statique -->
 <MalioInputAutocomplete v-model="country" label="Pays" :options="countries" />
 <!-- Usage API (parent gère le fetch) -->
 <MalioInputAutocomplete
  v-model="clientId"
  label="Client"
  :options="clientOptions"
  :loading="isFetching"
  :min-search-length="2"
  @search="onSearchClients"
  @select="onSelectClient"
 />
 <!-- Avec création libre -->
 <MalioInputAutocomplete
  v-model="category"
  label="Catégorie"
  :options="categories"
  allow-create
  @create="onCreateCategory"
 />
 ```
 ```ts
 async function onSearchClients(query: string) {
  isFetching.value = true
  const res = await $fetch('/api/clients', {params: {q: query}})
  clientOptions.value = res.map(c => ({label: c.name, value: c.id}))
  isFetching.value = false
 }
 ```
 ---
 ## MalioInputAmount
 Champ montant avec icône devise (euro par défaut).
@@ -276,7 +122,6 @@ Zone de texte multiligne avec compteur et redimensionnement.
 | `showCounter` | `boolean` | `false` | Afficher le compteur |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `error` | `string` | `''` | Message d'erreur |
 | `groupClass` | `string` | `''` | Classes CSS sur la div conteneur (utile pour `row-span-*`, `col-span-*`, etc.) |
 **Events :** `update:modelValue(value: string)`
@@ -287,41 +132,6 @@ Zone de texte multiligne avec compteur et redimensionnement.
 ---
 ## MalioInputRichText
 Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown** + **TextStyle/Color/Highlight**. Toolbar avec gras, italique, barré, titres H2/H3, listes, citation, code, code-block, lien, **couleur du texte**, **surlignage**, undo/redo. Sortie en HTML (par défaut) ou markdown.
 > Couleurs et surlignages ne sont **pas persistés en markdown**. Pour les conserver au save/reload, utiliser `output-format="html"`.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `label` | `string` | `''` | Label affiché au-dessus de l'éditeur |
 | `modelValue` | `string \| null` | `undefined` | Contenu (v-model) |
 | `placeholder` | `string` | `''` | Texte affiché quand vide |
 | `minHeight` | `string` | `'160px'` | Hauteur min de la zone d'édition |
 | `editable` | `boolean` | `true` | `false` → mode affichage seul (toolbar masquée) |
 | `disabled` | `boolean` | `false` | Désactive l'édition et la toolbar |
 | `readonly` | `boolean` | `false` | Lecture seule (toolbar visible mais désactivée) |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
 | `outputFormat` | `'markdown' \| 'html'` | `'html'` | Format émis dans `update:modelValue` |
 | `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
 | `labelClass` | `string` | `''` | Classes CSS label (twMerge) |
 | `editorClass` | `string` | `''` | Classes CSS wrapper éditeur (twMerge) |
 **Events :** `update:modelValue(value: string)`
 ```vue
 <MalioInputRichText v-model="note" label="Note" placeholder="Écrire ici…" />
 <MalioInputRichText v-model="cr" label="Compte-rendu" error="Trop court" />
 <MalioInputRichText v-model="article" label="Article" min-height="240px" />
 <MalioInputRichText :model-value="content" :editable="false" />
 ```
 ---
 ## MalioInputUpload
 Champ d'upload de fichier.
@@ -358,11 +168,12 @@ Liste déroulante.
 | `success` | `string` | `''` | Message de succès |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
 | `minWidth` | `string` | `'w-96'` | Classe largeur minimum |
 | `maxWidth` | `string` | `''` | Classe largeur maximum |
 | `rounded` | `string` | `'rounded-md'` | Classe border-radius |
 | `textField` | `string` | `'text-lg'` | Classe taille texte bouton |
 | `textValue` | `string` | `'text-lg'` | Classe taille texte valeur |
 | `textLabel` | `string` | `'text-sm'` | Classe taille texte label |
 | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide |
 **Events :** `update:modelValue(value: string | number | null)`
 **Slots :** `icon` (icône dropdown custom)
@@ -388,7 +199,6 @@ Liste déroulante multi-sélection avec checkboxes.
 | `selectAllLabel` | `string` | `'Tout sélectionner'` | Texte du sélecteur global |
 | `label` | `string` | `''` | Label |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide |
 **Events :** `update:modelValue(value: (string | number)[])`
@@ -442,106 +252,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 +273,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.
@@ -685,90 +329,18 @@ Navigation par onglets avec contenu dynamique.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `modelValue` | `string` | `undefined` | Onglet actif (v-model) |
-| `tabs` | `Tab[]` | **requis** | Liste des onglets (voir type ci-dessous) |
+| `tabs` | `{ key: string, label: string, icon?: string }[]` | **requis** | Liste des onglets |
-Type `Tab` :
+**Events :** `update:modelValue(value: string)`
 | Propriété | Type | Défaut | Description |
 |-----------|------|--------|-------------|
 | `key` | `string` | — | Identifiant unique (utilisé pour le slot et le v-model) |
 | `label` | `string` | — | Texte de l'onglet |
 | `icon` | `string` | — | Nom Iconify (optionnel) |
 | `iconSize` | `string` | `24` | Taille de l'icône |
 | `disabled` | `boolean` | `false` | Onglet désactivé : grisé et non cliquable. Le parent calcule cet état selon sa logique de validation |
 **Events :** `update:modelValue(value: string)` — émis uniquement quand l'onglet cible n'est pas `disabled`
 **Slots :** Un slot nommé par `tab.key` pour le contenu de chaque onglet
 ```vue
-<MalioTabList v-model="activeTab" :tabs="tabs">
+<MalioTabList v-model="activeTab" :tabs="[{ key: 'infos', label: 'Informations' }, { key: 'docs', label: 'Documents', icon: 'mdi:file' }]">
  <template #infos>Contenu infos</template>
  <template #docs>Contenu docs</template>
 </MalioTabList>
 ```
 **Pattern de gating progressif** (déverrouille les onglets quand les précédents sont valides) :
 ```ts
 const informationValid = computed(() => name.value && email.value)
 const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
 const tabs = computed(() => [
  { key: 'information', label: 'Information' },
  { key: 'contacts', label: 'Contacts', disabled: !informationValid.value },
  { key: 'adresses', label: 'Adresses', disabled: !informationValid.value },
  { key: 'transport', label: 'Transport', disabled: !informationValid.value || !adressesValid.value },
 ])
 ```
 ---
 ## 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
@@ -798,112 +370,29 @@ Barre latérale de navigation rétractable.
 ## MalioDrawer
-Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche 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 drawers.
+Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transparent.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
-| `side` | `'right' \| 'left'` | `'right'` | Côté d'apparition |
+| `title` | `string` | `''` | Titre affiché dans le header |
 | `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
-| `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
+| `drawerClass` | `string` | `''` | Classes CSS panneau (twMerge) |
 | `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
 | `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
 | `drawerClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-2xl` (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 wrapper du footer (aucune position imposée) |
-**Events :** `update:modelValue(value: boolean)`, `close()`
+**Events :** `update:modelValue(value: boolean)`
-
+**Slots :** `default` (contenu du drawer)
 **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` — rendu dans la zone scrollable, sans positionnement imposé : le consommateur choisit (`sticky bottom-0`, `fixed`, ou rien).
 ```vue
-<MalioDrawer v-model="isOpen">
+<MalioDrawer v-model="isOpen" title="Détails">
  <template #header>
    <h2 class="text-[24px] font-bold">Détails</h2>
  </template>
  <p>Contenu du drawer</p>
 </MalioDrawer>
-
+<MalioDrawer v-model="isOpen" title="Sans croix" :show-close="false">
-<!-- Côté gauche, largeur custom -->
+  <p>Fermeture uniquement via backdrop</p>
 <MalioDrawer v-model="isOpen" side="left" drawer-class="max-w-2xl">
  <template #header><h2>Navigation</h2></template>
  <p>Drawer large depuis la gauche</p>
 </MalioDrawer>
-
+<MalioDrawer v-model="isOpen" title="Large" drawer-class="max-w-2xl">
-<!-- Footer collé en bas (le consommateur applique le positionnement) -->
+  <p>Drawer plus large</p>
 <MalioDrawer v-model="isOpen">
  <template #header><h2>Formulaire</h2></template>
  <MalioInputText label="Nom" />
  <template #footer>
    <div class="sticky bottom-0 bg-white py-4">
      <MalioButton label="Enregistrer" button-class="w-full" @click="isOpen = false" />
    </div>
  </template>
 </MalioDrawer>
 <!-- Non fermable au backdrop / Échap (croix uniquement) -->
 <MalioDrawer v-model="isOpen" :dismissable="false" :close-on-escape="false">
  <template #header><h2>Action requise</h2></template>
  <p>Fermeture via la croix uniquement</p>
 </MalioDrawer>
 ```
 ---
 ## 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>
 ```
 ---
@@ -966,28 +455,25 @@ Tableau de données presentational avec pagination, filtres par slots et lignes
 ## 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).
+Sélecteur horizontal pour choisir un site (usine ou lieu) parmi une liste. Les tuiles occupent une largeur proportionnelle du conteneur. La couleur du site sélectionné est appliquée à toutes les tuiles ; la tuile active est opaque, les autres sont atténuées à 40 %.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
-| `sites` | `{ id: string, name: string, color: string }[]` | **requis** | Liste des sites (la `color` colore la tuile active) |
+| `sites` | `{ id: string, name: string, color: string }[]` | **requis** | Liste des sites. `color` est un hex (ex : `'#0055ff'`) |
-| `modelValue` | `string` | `undefined` | `id` du site sélectionné (v-model) |
+| `modelValue` | `string` | `undefined` | `id` du site sélectionné (v-model). Sans v-model, le premier site est sélectionné |
 | `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) |
+| `labelClass` | `string` | `''` | Classes CSS du libellé (twMerge) |
 **Events :**
- `update:modelValue(value: string)` — `id` du site sélectionné (v-model)
+- `update:modelValue(value: string)` — id du site sélectionné (v-model)
- `change(site: Site)` — émis avec l'objet site complet sélectionné
+- `change(site: { id: string, name: string, color: string })` — objet site complet, émis au clic (pratique pour déclencher un appel API côté consommateur)
 ```vue
 <MalioSiteSelector
-  v-model="siteId"
+  v-model="siteActifId"
-  :sites="[
+  :sites="sites"
-    { id: 'paris', name: 'Paris', color: '#2563eb' },
+  @change="(site) => refetch(site.id)"
    { 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 */
@@ -36,6 +35,6 @@
    --m-site-yellow: 243 203 0;     /* #F3CB00 - Jaune Saint-Jean */
    --m-site-green: 116 191 4;      /* #74BF04 - Vert Pommevic */
-    --m-radius: 6px;
+    --m-radius: 8px;
  }
 }
@@ -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')
@@ -114,7 +114,7 @@ describe('MalioCheckbox', () => {
    })
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
    expect(wrapper.get('p').text()).toBe('You must accept')
  })
@@ -125,7 +125,7 @@ describe('MalioCheckbox', () => {
    })
    expect(wrapper.get('p').text()).toBe('Invalid')
-    expect(wrapper.get('p').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
  })
  it('shows success styles and message when there is no error', () => {
@@ -139,26 +139,4 @@ describe('MalioCheckbox', () => {
    expect(wrapper.get('p').text()).toBe('Valid')
    expect(wrapper.get('p').classes()).toContain('text-m-success')
  })
  it('uses muted label color when unchecked', () => {
    const wrapper = mountCheckbox({label: 'Accept terms', modelValue: false})
    expect(wrapper.get('label').classes()).toContain('text-m-muted')
  })
  it('uses black label color when checked', () => {
    const wrapper = mountCheckbox({label: 'Accept terms', modelValue: true})
    expect(wrapper.get('label').classes()).toContain('text-black')
  })
  it('updates label color when toggled without v-model (uncontrolled)', async () => {
    const wrapper = mountCheckbox({label: 'Accept terms'})
    expect(wrapper.get('label').classes()).toContain('text-m-muted')
    await wrapper.get('input').setValue(true)
    expect(wrapper.get('label').classes()).toContain('text-black')
  })
 })
@@ -40,7 +40,7 @@
 </template>
 <script setup lang="ts">
-import {computed, ref, useAttrs, useId} from 'vue'
+import {computed, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
@@ -80,11 +80,9 @@ const props = withDefaults(
 const attrs = useAttrs()
 const generatedId = useId()
 const localChecked = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
-const isControlled = computed(() => props.modelValue !== undefined)
+const isChecked = computed(() => !!props.modelValue)
 const isChecked = computed(() => (isControlled.value ? !!props.modelValue : localChecked.value))
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const disabled = computed(() => props.disabled)
@@ -96,24 +94,23 @@ const describedBy = computed(() => {
 const mergedGroupClass = computed(() =>
  twMerge(
-    'checkbox-wrapper-4 w-full',
+    'checkbox-wrapper-4 mt-4 w-full',
    props.groupClass,
  ),
 )
 const mergedInputClass = computed(() =>
  twMerge(
-    'inp-cbx peer ',
+    'inp-cbx peer',
    props.inputClass,
  ),
 )
 const mergedLabelClass = computed(() =>
  twMerge(
-    'cbx text-lg',
+    'cbx text-black',
    isChecked.value ? 'text-black' : 'text-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60' : '',
-    hasError.value ? 'text-m-danger' : '',
+    hasError.value ? 'text-m-error' : '',
    hasSuccess.value ? 'text-m-success' : '',
    props.labelClass,
  ),
@@ -123,7 +120,7 @@ const mergedMessageClass = computed(() =>
  twMerge(
    'text-xs',
    hasError.value
-      ? 'text-m-danger'
+      ? 'text-m-error'
      : hasSuccess.value
        ? 'text-m-success'
        : 'text-m-muted',
@@ -142,10 +139,6 @@ const onChange = (event: Event) => {
    return
  }
  if (!isControlled.value) {
    localChecked.value = target.checked
  }
  emit('update:modelValue', target.checked)
 }
 </script>
@@ -168,14 +161,10 @@ const onChange = (event: Event) => {
  height: 18px;
  flex: 0 0 18px;
  transform: scale(1);
-  border: 2px solid rgb(var(--m-muted) / 1);
+  border: 2px solid rgb(0, 0, 0);
  transition: all 0.1s ease;
 }
 .inp-cbx:checked + .cbx span:first-child {
  border-color: rgb(0, 0, 0);
 }
 .cbx span:first-child svg {
  position: absolute;
  top: 2px;
@@ -211,14 +200,14 @@ const onChange = (event: Event) => {
  stroke-dashoffset: 0;
 }
-.inp-cbx + .cbx.text-m-danger span:first-child {
+.inp-cbx + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-danger) / 1);
+  border-color: rgb(var(--m-error) / 1);
 }
-.cbx.text-m-danger span:first-child svg {
+.cbx.text-m-error span:first-child svg {
-  stroke: rgb(var(--m-danger) / 1);
+  stroke: rgb(var(--m-error) / 1);
 }
-.inp-cbx:checked + .cbx.text-m-danger span:first-child {
+.inp-cbx:checked + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-danger) / 1);
+  border-color: rgb(var(--m-error) / 1);
 }
 .inp-cbx + .cbx.text-m-success span:first-child {
@@ -80,7 +80,7 @@
          variant="tertiary"
          label="Prev"
          :disabled="page <= 1"
-          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          button-class="h-8 w-auto min-w-0 px-3 text-sm"
          aria-label="Page précédente"
          data-test="prev-button"
          @click="goToPage(page - 1)"
@@ -95,7 +95,7 @@
          <button
            v-else
            type="button"
-            class="h-10 min-w-[2.5rem] rounded px-2 text-sm transition-colors"
+            class="h-8 min-w-[2rem] rounded px-2 text-sm transition-colors"
            :class="p === page
              ? 'bg-m-btn-primary text-white font-semibold'
              : 'text-m-text hover:bg-m-bg'"
@@ -111,7 +111,7 @@
          variant="tertiary"
          label="Next"
          :disabled="page >= totalPages"
-          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          button-class="h-8 w-auto min-w-0 px-3 text-sm"
          aria-label="Page suivante"
          data-test="next-button"
          @click="goToPage(page + 1)"
@@ -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,22 +1,15 @@
-import { afterEach, describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
-import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import type { DefineComponent } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import Drawer from './Drawer.vue'
 type DrawerProps = {
  id?: string
  modelValue?: boolean
-  side?: 'right' | 'left'
+  title?: string
  showClose?: boolean
-  dismissable?: boolean
+  id?: string
  closeOnEscape?: boolean
  ariaLabel?: string
  drawerClass?: string
  overlayClass?: string
  headerClass?: string
  bodyClass?: string
  footerClass?: string
 }
 const DrawerForTest = Drawer as DefineComponent<DrawerProps>
@@ -25,38 +18,64 @@ function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>)
  return mount(DrawerForTest, {
    props,
    slots,
-    global: { stubs: { Teleport: true } },
+    global: {
      stubs: {
        Teleport: true,
      },
    },
  })
 }
 describe('MalioDrawer', () => {
  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', () => {
+  it('renders when modelValue is true', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
  })
-  it('renders default slot in the body', () => {
+  it('renders the title', () => {
-    const wrapper = mountComponent(
+    const wrapper = mountComponent({ modelValue: true, title: 'Mon tiroir' })
-      { modelValue: true },
+    expect(wrapper.find('h2').text()).toBe('Mon tiroir')
      { 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)', () => {
+  it('renders slot content', () => {
-    const wrapper = mountComponent()
+    const wrapper = mountComponent(
-    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
+      { modelValue: true },
      { default: '<p data-test="content">Contenu du drawer</p>' },
    )
    expect(wrapper.find('[data-test="content"]').text()).toBe('Contenu du drawer')
  })
  it('emits update:modelValue false on backdrop click', async () => {
    const wrapper = mountComponent({ modelValue: true })
    await wrapper.find('[data-test="backdrop"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
  })
  it('emits update:modelValue false 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])
  })
  it('shows close button by default', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
  })
  it('hides close button when showClose is false', () => {
    const wrapper = mountComponent({ modelValue: true, showClose: false })
    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
  })
  it('close button renders mdi:close icon', () => {
    const wrapper = mountComponent({ modelValue: true })
    const icon = wrapper.findComponent(IconifyIcon)
    expect(icon.props('icon')).toBe('mdi:close')
  })
  it('uses custom id when provided', () => {
@@ -66,276 +85,38 @@ describe('MalioDrawer', () => {
  it('generates an id when not provided', () => {
    const wrapper = mountComponent({ modelValue: true })
-    expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-drawer-/)
+    const id = wrapper.find('.fixed').attributes('id')
    expect(id).toMatch(/^malio-drawer-/)
  })
-  it('has role="dialog" and aria-modal on the panel', () => {
+  it('has role="dialog" and aria-modal on 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('aria-labelledby links to title id', () => {
    const wrapper = mountComponent({ modelValue: true, id: 'test-drawer' })
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-labelledby')).toBe('test-drawer-title')
    expect(wrapper.find('h2').attributes('id')).toBe('test-drawer-title')
  })
  it('applies drawerClass to the panel', () => {
-    const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-2xl' })
+    const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-lg' })
-    expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
+    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.classes()).toContain('max-w-lg')
  })
-  it('renders the #header slot inside the header bar', () => {
+  it('works in uncontrolled mode', () => {
-    const wrapper = mountComponent(
+    const wrapper = mountComponent()
-      { modelValue: true },
+    // Without modelValue, defaults to closed
-      { header: '<h2 data-test="title">Titre</h2>' },
+    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
    )
    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-drawer' },
      { header: '<h2>Titre</h2>' },
    )
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-labelledby')).toBe('test-drawer-header')
    expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-drawer-header')
  })
  it('sets aria-label from ariaLabel when no #header is provided', () => {
    const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Panneau latéral' })
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-label')).toBe('Panneau latéral')
    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 inside the body (scrollable zone)', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { footer: '<button data-test="save">Enregistrer</button>' },
    )
    expect(wrapper.find('[data-test="body"] [data-test="footer"] [data-test="save"]').exists()).toBe(true)
  })
  it('does not render the footer wrapper 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 wrapper', () => {
    const wrapper = mountComponent(
      { modelValue: true, footerClass: 'sticky bottom-0' },
      { footer: '<span>pied</span>' },
    )
    const footer = wrapper.find('[data-test="footer"]')
    expect(footer.classes()).toContain('sticky')
    expect(footer.classes()).toContain('bottom-0')
  })
  it('aligns to the right by default', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('.fixed').classes()).toContain('justify-end')
  })
  it('aligns to the left when side is "left"', () => {
    const wrapper = mountComponent({ modelValue: true, side: 'left' })
    expect(wrapper.find('.fixed').classes()).toContain('justify-start')
  })
  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(DrawerForTest, {
      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(DrawerForTest, {
      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('moves focus to the close button on open (default showClose)', async () => {
    const wrapper = mount(DrawerForTest, {
      props: { modelValue: false, showClose: true },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    await wrapper.setProps({ modelValue: true })
    await wrapper.vm.$nextTick()
    expect(document.activeElement).toBe(wrapper.find('[data-test="close-button"]').element)
    wrapper.unmount()
  })
  it('wraps focus to the first element when Tab is pressed on the last element', async () => {
    const wrapper = mount(DrawerForTest, {
      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(DrawerForTest, {
      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 drawer closes while another is still open', async () => {
    const wrapperA = mount(DrawerForTest, {
      props: { modelValue: false },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    const wrapperB = mount(DrawerForTest, {
      props: { modelValue: false },
      attachTo: document.body,
      global: { stubs: { Teleport: true } },
    })
    // Open drawer A → scroll locked
    await wrapperA.setProps({ modelValue: true })
    expect(document.body.style.overflow).toBe('hidden')
    // Open drawer B → still locked
    await wrapperB.setProps({ modelValue: true })
    expect(document.body.style.overflow).toBe('hidden')
    // Close drawer B → A is still open, scroll must remain locked
    await wrapperB.setProps({ modelValue: false })
    expect(document.body.style.overflow).toBe('hidden')
    // Close drawer A → both closed, scroll-lock released
    await wrapperA.setProps({ modelValue: false })
    expect(document.body.style.overflow).toBe('')
  })
 })
@@ -1,76 +1,59 @@
 <template>
  <Teleport to="body">
    <Transition
-      :name="`drawer-${side}`"
+      name="drawer"
      appear
      @after-leave="isRendered = false"
    >
      <div
        v-if="isRendered && isOpen"
        :id="componentId"
-        class="fixed inset-0 z-50 flex"
+        class="fixed inset-0 z-50 flex justify-end"
        :class="side === 'right' ? 'justify-end' : 'justify-start'"
        v-bind="attrs"
      >
        <div
-          :class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
+          class="absolute inset-0 bg-black/40"
          data-test="backdrop"
-          @click="onBackdropClick"
+          @click="close"
        />
        <div
          ref="panelRef"
          :class="twMerge(
-            'relative z-50 flex h-full w-full max-w-md flex-col bg-white',
+            'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
            drawerClass,
          )"
          role="dialog"
-          aria-modal="true"
+          :aria-modal="true"
-          :aria-labelledby="hasHeader ? headerId : undefined"
+          :aria-labelledby="titleId"
          :aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
          tabindex="-1"
          data-test="panel"
          @keydown="onKeydown"
        >
-          <div
+          <div class="flex items-center justify-between px-5 pb-8 pt-8">
-            v-if="hasHeader || showClose"
+            <h2
-            :class="twMerge('flex items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
+              :id="titleId"
-            data-test="header"
+              class="text-[32px] font-semibold text-m-primary"
          >
            <div
              :id="headerId"
              class="min-w-0 flex-1"
              data-test="header-content"
            >
-              <slot name="header" />
+              {{ title }}
-            </div>
+            </h2>
            <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"
+              class="flex h-8 w-8 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"
+                icon="mdi:close"
-                :width="16"
+                :width="24"
-                :height="16"
+                :height="24"
              />
            </button>
          </div>
          <div
-            :class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
+            class="flex-1 overflow-y-auto px-5"
            data-test="body"
          >
            <slot />
            <div
              v-if="$slots.footer"
              :class="footerClass"
              data-test="footer"
            >
              <slot name="footer" />
            </div>
          </div>
        </div>
      </div>
@@ -79,17 +62,7 @@
 </template>
 <script setup lang="ts">
-import {
+import { computed, ref, useAttrs, useId, watch } from 'vue'
  computed,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  useAttrs,
  useId,
  useSlots,
  watch,
 } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { twMerge } from 'tailwind-merge'
@@ -99,195 +72,68 @@ const props = withDefaults(
  defineProps<{
    id?: string
    modelValue?: boolean
-    side?: 'right' | 'left'
+    title?: string
    showClose?: boolean
    dismissable?: boolean
    closeOnEscape?: boolean
    ariaLabel?: string
    drawerClass?: string
    overlayClass?: string
    headerClass?: string
    bodyClass?: string
    footerClass?: string
  }>(),
  {
    id: '',
    modelValue: undefined,
-    side: 'right',
+    title: '',
    showClose: true,
    dismissable: true,
    closeOnEscape: true,
    ariaLabel: '',
    drawerClass: '',
    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-drawer-${generatedId}`)
-
+const titleId = computed(() => `${componentId.value}-title`)
 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 drawer 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
    openDrawerCount++
    if (openDrawerCount === 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
    openDrawerCount = Math.max(0, openDrawerCount - 1)
    if (openDrawerCount === 0) {
      document.body.style.overflow = ''
    }
  }
  previouslyFocused?.focus?.()
  previouslyFocused = null
 }
 watch(isOpen, (val) => {
-  if (val) {
+  if (val) isRendered.value = true
    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
    openDrawerCount = Math.max(0, openDrawerCount - 1)
    if (openDrawerCount === 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
+  if (!isControlled.value) {
    localValue.value = false
  }
  emit('update:modelValue', false)
  emit('close')
 }
 </script>
 <script lang="ts">
 // Shared across all MalioDrawer instances: only the last open drawer releases the body scroll-lock.
 let openDrawerCount = 0
 </script>
 <style scoped>
-.drawer-right-enter-active,
+.drawer-enter-active,
-.drawer-right-leave-active,
+.drawer-leave-active {
 .drawer-left-enter-active,
 .drawer-left-leave-active {
  transition: opacity 0.2s ease;
 }
-.drawer-right-enter-active > div:last-child,
+.drawer-enter-active > div:last-child,
-.drawer-right-leave-active > div:last-child,
+.drawer-leave-active > div:last-child {
 .drawer-left-enter-active > div:last-child,
 .drawer-left-leave-active > div:last-child {
  transition: transform 0.3s ease;
 }
-.drawer-right-enter-from,
+.drawer-enter-from,
-.drawer-right-leave-to,
+.drawer-leave-to {
 .drawer-left-enter-from,
 .drawer-left-leave-to {
  opacity: 0;
 }
-.drawer-right-enter-from > div:last-child,
+.drawer-enter-from > div:last-child,
-.drawer-right-leave-to > div:last-child {
+.drawer-leave-to > div:last-child {
  transform: translateX(100%);
 }
 .drawer-left-enter-from > div:last-child,
 .drawer-left-leave-to > div:last-child {
  transform: translateX(-100%);
 }
 </style>
@@ -279,7 +279,7 @@ describe('MalioInputText', () => {
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
    expect(wrapper.get('input').classes()).toContain('!pl-11')
-    expect(wrapper.get('label').classes()).toContain('left-11')
+    expect(wrapper.get('label').classes()).toContain('left-8')
  })
  it('passes icon size props to icon component', () => {
@@ -294,18 +294,4 @@ describe('MalioInputText', () => {
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
  })
  it('shows primary icon color on focus', async () => {
    const wrapper = mountInput({iconName: 'mdi:key-outline'})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
  })
  it('shows black icon color when filled and unfocused', () => {
    const wrapper = mountInput({iconName: 'mdi:key-outline', modelValue: 'hello'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
  })
 })
@@ -158,20 +158,6 @@ describe('MalioInputAmount', () => {
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
    expect(wrapper.get('input').classes()).toContain('!pl-11')
-    expect(wrapper.get('label').classes()).toContain('left-11')
+    expect(wrapper.get('label').classes()).toContain('left-8')
  })
  it('shows primary icon color on focus', async () => {
    const wrapper = mountInputAmount()
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
  })
  it('shows black icon color when filled and unfocused', () => {
    const wrapper = mountInputAmount({modelValue: '12,50'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
  })
 })
@@ -39,7 +39,13 @@
        :width="iconSize"
        :height="iconSize"
        data-test="icon"
-        :class="[iconStateClass, iconPositionClass]"
+        :class="[
        hasError
          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success' : iconColor,
        iconPositionClass,
      ]"
      />
    </div>
@@ -135,7 +141,7 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
  twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
@@ -216,7 +222,7 @@ const iconInputPaddingClass = computed(() => {
 const disabled = computed(() => props.disabled)
 const labelPositionClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'left-11'
+  if (props.iconName && props.iconPosition === 'left') return 'left-8'
  return 'left-3'
 })
@@ -229,15 +235,6 @@ const iconPositionClass = computed(() => {
  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (disabled.value) return props.iconColor
  if (isFocused.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return props.iconColor
 })
 </script>
 <style scoped>
@@ -1,430 +0,0 @@
 import {describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import InputAutocomplete from './InputAutocomplete.vue'
 type Option = {
  label: string
  value: string | number
 }
 type InputAutocompleteProps = {
  id?: string
  label?: string
  name?: string
  modelValue?: string | number | null
  inputClass?: string
  labelClass?: string
  groupClass?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  options?: Option[]
  loading?: boolean
  debounce?: number
  minSearchLength?: number
  allowCreate?: boolean
  iconName?: string
  iconPosition?: 'left' | 'right'
  iconSize?: string | number
  iconColor?: string
  noResultsText?: string
  loadingText?: string
  minSearchText?: string
 }
 const InputAutocompleteForTest = InputAutocomplete as DefineComponent<InputAutocompleteProps>
 const options: Option[] = [
  {label: 'France', value: 'fr'},
  {label: 'Belgique', value: 'be'},
  {label: 'Canada', value: 'ca'},
 ]
 const mountComponent = (props: InputAutocompleteProps = {}) =>
  mount(InputAutocompleteForTest, {
    props,
    global: {
      stubs: {
        IconifyIcon: {
          template: '<span data-test="icon" v-bind="$attrs" />',
        },
      },
    },
  })
 describe('MalioInputAutocomplete', () => {
  it('renders the label text', () => {
    const wrapper = mountComponent({label: 'Pays'})
    expect(wrapper.get('label').text()).toBe('Pays')
  })
  it('renders with type combobox role', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('role')).toBe('combobox')
  })
  it('renders input with provided modelValue label when option matches', () => {
    const wrapper = mountComponent({modelValue: 'fr', options})
    expect(wrapper.get('input').element.value).toBe('France')
  })
  it('opens dropdown on focus', async () => {
    const wrapper = mountComponent({options})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(true)
    expect(wrapper.get('input').attributes('aria-expanded')).toBe('true')
  })
  it('does not open dropdown on focus when disabled', async () => {
    const wrapper = mountComponent({options, disabled: true})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
  })
  it('does not open dropdown on focus when readonly', async () => {
    const wrapper = mountComponent({options, readonly: true})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
  })
  it('renders all options in dropdown', async () => {
    const wrapper = mountComponent({options})
    await wrapper.get('input').trigger('focus')
    const items = wrapper.findAll('[data-test="option"]')
    expect(items).toHaveLength(3)
    expect(items[0].text()).toBe('France')
    expect(items[1].text()).toBe('Belgique')
    expect(items[2].text()).toBe('Canada')
  })
  it('emits update:modelValue with option value when option is selected', async () => {
    const wrapper = mountComponent({options})
    await wrapper.get('input').trigger('focus')
    await wrapper.findAll('[data-test="option"]')[1].trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
  })
  it('emits select with full option object', async () => {
    const wrapper = mountComponent({options})
    await wrapper.get('input').trigger('focus')
    await wrapper.findAll('[data-test="option"]')[0].trigger('click')
    expect(wrapper.emitted('select')?.[0]).toEqual([options[0]])
  })
  it('closes dropdown after selecting an option', async () => {
    const wrapper = mountComponent({options})
    await wrapper.get('input').trigger('focus')
    await wrapper.findAll('[data-test="option"]')[0].trigger('click')
    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
  })
  it('fills input with selected option label after selection', async () => {
    const wrapper = mountComponent({options, modelValue: null})
    await wrapper.get('input').trigger('focus')
    await wrapper.findAll('[data-test="option"]')[1].trigger('click')
    await wrapper.setProps({modelValue: 'be'})
    expect(wrapper.get('input').element.value).toBe('Belgique')
  })
  it('emits search after debounce when user types', async () => {
    vi.useFakeTimers()
    const wrapper = mountComponent({options, debounce: 300})
    await wrapper.get('input').setValue('fra')
    expect(wrapper.emitted('search')).toBeUndefined()
    vi.advanceTimersByTime(300)
    expect(wrapper.emitted('search')?.[0]).toEqual(['fra'])
    vi.useRealTimers()
  })
  it('does not emit search until minSearchLength is reached', async () => {
    vi.useFakeTimers()
    const wrapper = mountComponent({minSearchLength: 3, debounce: 300})
    await wrapper.get('input').setValue('fr')
    vi.advanceTimersByTime(300)
    expect(wrapper.emitted('search')).toBeUndefined()
    await wrapper.get('input').setValue('fra')
    vi.advanceTimersByTime(300)
    expect(wrapper.emitted('search')?.[0]).toEqual(['fra'])
    vi.useRealTimers()
  })
  it('shows minSearch text in dropdown when minSearchLength not reached', async () => {
    const wrapper = mountComponent({minSearchLength: 3, minSearchText: 'Tapez 3 caractères'})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.find('[data-test="min-search-text"]').text()).toBe('Tapez 3 caractères')
  })
  it('shows loading text in dropdown when loading', async () => {
    const wrapper = mountComponent({loading: true, loadingText: 'En cours…'})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.find('[data-test="loading-text"]').text()).toBe('En cours…')
  })
  it('shows loading icon when loading', async () => {
    const wrapper = mountComponent({loading: true})
    expect(wrapper.find('[data-test="loading-icon"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="chevron"]').exists()).toBe(false)
  })
  it('shows no results text when options is empty', async () => {
    const wrapper = mountComponent({options: [], noResultsText: 'Rien trouvé'})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.find('[data-test="no-results-text"]').text()).toBe('Rien trouvé')
  })
  it('clears selection when typing different value', async () => {
    const wrapper = mountComponent({options, modelValue: 'fr'})
    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('belg')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
    expect(wrapper.emitted('select')?.[0]).toEqual([null])
  })
  it('emits create event with typed value when allowCreate and Enter pressed', async () => {
    const wrapper = mountComponent({options, allowCreate: true})
    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('Custom')
    await wrapper.get('input').trigger('keydown', {key: 'Enter'})
    expect(wrapper.emitted('create')?.[0]).toEqual(['Custom'])
    expect(wrapper.emitted('update:modelValue')?.some(e => e[0] === 'Custom')).toBe(true)
  })
  it('does not emit create when allowCreate is false', async () => {
    const wrapper = mountComponent({options, allowCreate: false})
    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('Custom')
    await wrapper.get('input').trigger('keydown', {key: 'Enter'})
    expect(wrapper.emitted('create')).toBeUndefined()
  })
  it('selects option on Enter with active index', async () => {
    const wrapper = mountComponent({options})
    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
    await wrapper.get('input').trigger('keydown', {key: 'Enter'})
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['fr'])
  })
  it('navigates options with ArrowDown', async () => {
    const wrapper = mountComponent({options})
    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
    await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
    expect(wrapper.get('input').attributes('aria-activedescendant')).toContain('-option-1')
  })
  it('closes dropdown on Escape', async () => {
    const wrapper = mountComponent({options})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(true)
    await wrapper.get('input').trigger('keydown', {key: 'Escape'})
    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
  })
  it('reverts input value on Escape', async () => {
    const wrapper = mountComponent({options, modelValue: 'fr'})
    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('xyz')
    await wrapper.get('input').trigger('keydown', {key: 'Escape'})
    expect(wrapper.get('input').element.value).toBe('France')
  })
  it('shows error message and styles', () => {
    const wrapper = mountComponent({error: 'Champ invalide'})
    expect(wrapper.get('p.text-m-danger').text()).toBe('Champ invalide')
    expect(wrapper.get('input').classes()).toContain('border-m-danger')
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
  })
  it('shows success message and styles', () => {
    const wrapper = mountComponent({success: 'Champ valide'})
    expect(wrapper.get('p.text-m-success').text()).toBe('Champ valide')
    expect(wrapper.get('input').classes()).toContain('border-m-success')
  })
  it('shows hint message', () => {
    const wrapper = mountComponent({hint: 'Tapez pour rechercher'})
    expect(wrapper.get('p.text-m-muted').text()).toBe('Tapez pour rechercher')
  })
  it('renders left icon when iconName provided with left position', () => {
    const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'left'})
    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
  })
  it('renders right icon when iconName provided with right position', () => {
    const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'right'})
    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
  })
  it('does not render icon when iconName is empty', () => {
    const wrapper = mountComponent({iconName: ''})
    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
  })
  it('uses left padding when icon is left', () => {
    const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'left'})
    expect(wrapper.get('input').classes()).toContain('!pl-11')
  })
  it('uses extra right padding when icon is right', () => {
    const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'right'})
    expect(wrapper.get('input').classes()).toContain('!pr-16')
  })
  it('renders the chevron with default icon', () => {
    const wrapper = mountComponent()
    const icons = wrapper.findAllComponents(IconifyIcon)
    const chevron = icons[icons.length - 1]
    expect(chevron.props('icon')).toBe('mdi:chevron-down')
  })
  it('rotates the chevron when dropdown is open', async () => {
    const wrapper = mountComponent({options})
    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('rotate-0')
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('rotate-180')
  })
  it('sets disabled attribute', () => {
    const wrapper = mountComponent({disabled: true})
    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
    expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
  })
  it('sets readonly attribute', () => {
    const wrapper = mountComponent({readonly: true})
    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
  })
  it('links label to input via for/id', () => {
    const wrapper = mountComponent({id: 'country', label: 'Pays'})
    expect(wrapper.get('input').attributes('id')).toBe('country')
    expect(wrapper.get('label').attributes('for')).toBe('country')
  })
  it('generates an id when missing and reuses it on label', () => {
    const wrapper = mountComponent({label: 'Pays'})
    const inputId = wrapper.get('input').attributes('id')
    expect(inputId?.startsWith('malio-input-autocomplete-')).toBe(true)
    expect(wrapper.get('label').attributes('for')).toBe(inputId)
  })
  it('aria-invalid is false when no error', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
  })
  it('marks the option matching modelValue as aria-selected', async () => {
    const wrapper = mountComponent({options, modelValue: 'be'})
    await wrapper.get('input').trigger('focus')
    const items = wrapper.findAll('[data-test="option"]')
    expect(items[0].attributes('aria-selected')).toBe('false')
    expect(items[1].attributes('aria-selected')).toBe('true')
    expect(items[2].attributes('aria-selected')).toBe('false')
  })
  it('updates inputValue when modelValue changes externally', async () => {
    const wrapper = mountComponent({options, modelValue: 'fr'})
    expect(wrapper.get('input').element.value).toBe('France')
    await wrapper.setProps({modelValue: 'ca'})
    expect(wrapper.get('input').element.value).toBe('Canada')
  })
  it('clears inputValue when modelValue is cleared externally', async () => {
    const wrapper = mountComponent({options, modelValue: 'fr'})
    expect(wrapper.get('input').element.value).toBe('France')
    await wrapper.setProps({modelValue: null})
    expect(wrapper.get('input').element.value).toBe('')
  })
  it('uses allowCreate modelValue as inputValue when no match in options', async () => {
    const wrapper = mountComponent({options, allowCreate: true, modelValue: 'Custom'})
    expect(wrapper.get('input').element.value).toBe('Custom')
  })
 })
@@ -1,513 +0,0 @@
 <template>
  <div>
    <div
      ref="root"
      :class="mergedGroupClass"
    >
      <input
        :id="inputId"
        :name="name"
        autocomplete="off"
        :class="mergedInputClass"
        :required="required"
        :disabled="disabled"
        :readonly="readonly"
        :value="inputValue"
        :aria-invalid="!!error"
        :aria-describedby="describedBy"
        :aria-expanded="isOpen"
        :aria-controls="listboxId"
        :aria-activedescendant="activeOptionId"
        role="combobox"
        v-bind="attrs"
        placeholder="_"
        type="text"
        @input="onInput"
        @focus="onFocus"
        @click="onInputClick"
        @keydown="onKeydown"
      >
      <label
        v-if="label"
        :for="inputId"
        :class="mergedLabelClass"
      >
        {{ label }}
      </label>
      <IconifyIcon
        v-if="iconName && iconPosition === 'left'"
        :icon="iconName"
        :width="iconSize"
        :height="iconSize"
        data-test="icon-left"
        :class="[iconStateClass, 'pointer-events-none absolute left-[10px] top-1/2 -translate-y-1/2']"
      />
      <div class="pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
        <IconifyIcon
          v-if="iconName && iconPosition === 'right'"
          :icon="iconName"
          :width="iconSize"
          :height="iconSize"
          data-test="icon-right"
          :class="[iconStateClass]"
        />
        <IconifyIcon
          v-if="loading"
          icon="mdi:loading"
          :width="20"
          :height="20"
          data-test="loading-icon"
          class="animate-spin text-m-primary"
        />
        <IconifyIcon
          v-else
          icon="mdi:chevron-down"
          :width="20"
          :height="20"
          data-test="chevron"
          class="transition-transform duration-300"
          :class="[
            isOpen ? 'rotate-180' : 'rotate-0',
            chevronColorClass,
          ]"
        />
      </div>
      <ul
        v-if="isOpen"
        :id="listboxId"
        ref="listRef"
        data-test="dropdown"
        role="listbox"
        :aria-labelledby="inputId"
        class="absolute left-0 right-0 top-[calc(100%-4px)] z-20 max-h-60 w-full overflow-auto rounded-b-md border border-t-0 bg-white"
        :class="[
          hasError
            ? 'border-m-danger select-scrollbar-error'
            : hasSuccess
              ? 'border-m-success select-scrollbar-success'
              : 'border-m-primary select-scrollbar-primary',
        ]"
      >
        <li
          v-if="loading"
          class="px-3 py-2 text-m-muted"
          data-test="loading-text"
        >
          {{ loadingText }}
        </li>
        <li
          v-else-if="showMinSearch"
          class="px-3 py-2 text-m-muted"
          data-test="min-search-text"
        >
          {{ minSearchText }}
        </li>
        <li
          v-else-if="options.length === 0"
          class="px-3 py-2 text-m-muted"
          data-test="no-results-text"
        >
          {{ noResultsText }}
        </li>
        <template v-else>
          <li
            v-for="(opt, index) in options"
            :id="optionId(index)"
            :key="String(opt.value)"
            data-test="option"
            role="option"
            :aria-selected="opt.value === modelValue"
            class="cursor-pointer px-3 py-2 text-black"
            :class="[
              index === activeIndex ? 'bg-m-muted/10' : '',
              opt.value === modelValue ? 'bg-m-muted/10 font-semibold' : '',
            ]"
            @mouseenter="activeIndex = index"
            @mousedown.prevent
            @click="onSelect(opt)"
          >
            {{ opt.label || '\u00A0' }}
          </li>
        </template>
      </ul>
    </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',
      ]"
    >
      {{ hint || error || success }}
    </p>
  </div>
 </template>
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 defineOptions({name: 'MalioInputAutocomplete', inheritAttrs: false})
 type Option = {
  label: string
  value: string | number
 }
 const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    name?: string
    modelValue?: string | number | null
    inputClass?: string
    labelClass?: string
    groupClass?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    options?: Option[]
    loading?: boolean
    debounce?: number
    minSearchLength?: number
    allowCreate?: boolean
    iconName?: string
    iconPosition?: 'left' | 'right'
    iconSize?: string | number
    iconColor?: string
    noResultsText?: string
    loadingText?: string
    minSearchText?: string
  }>(),
  {
    id: '',
    name: '',
    modelValue: undefined,
    inputClass: '',
    labelClass: '',
    groupClass: '',
    label: '',
    required: false,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    options: () => [],
    loading: false,
    debounce: 300,
    minSearchLength: 0,
    allowCreate: false,
    iconName: '',
    iconPosition: 'left',
    iconSize: 24,
    iconColor: 'text-m-muted',
    noResultsText: 'Aucun résultat',
    loadingText: 'Chargement…',
    minSearchText: 'Tapez pour rechercher',
  },
 )
 const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number | null): void
  (e: 'search' | 'create', value: string): void
  (e: 'select', option: Option | null): void
 }>()
 const attrs = useAttrs()
 const generatedId = useId()
 const root = ref<HTMLElement | null>(null)
 const listRef = ref<HTMLElement | null>(null)
 const inputValue = ref<string>('')
 const isFocused = ref(false)
 const isOpen = ref(false)
 const activeIndex = ref(-1)
 let debounceTimer: ReturnType<typeof setTimeout> | null = null
 const inputId = computed(() => props.id?.toString() || `malio-input-autocomplete-${generatedId}`)
 const listboxId = computed(() => `${inputId.value}-listbox`)
 const selectedOption = computed(() =>
  props.options.find(o => o.value === props.modelValue) ?? null,
 )
 const hasSelection = computed(() =>
  props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '',
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isFilled = computed(() => inputValue.value.trim().length > 0 || hasSelection.value)
 const shouldFloatLabel = computed(() => isFocused.value || inputValue.value.length > 0)
 const showMinSearch = computed(() =>
  props.minSearchLength > 0 && inputValue.value.length < props.minSearchLength,
 )
 const optionId = (index: number) => `${inputId.value}-option-${index}`
 const activeOptionId = computed(() =>
  activeIndex.value >= 0 && props.options[activeIndex.value]
    ? optionId(activeIndex.value)
    : undefined,
 )
 const describedBy = computed(() =>
  (props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
 )
 watch(
  [() => props.modelValue, () => props.options],
  () => {
    if (isFocused.value) return
    if (selectedOption.value) {
      inputValue.value = selectedOption.value.label
    } else if (props.allowCreate && typeof props.modelValue === 'string' && props.modelValue !== '') {
      inputValue.value = props.modelValue
    } else if (!hasSelection.value) {
      inputValue.value = ''
    }
  },
  {immediate: true},
 )
 const mergedGroupClass = computed(() =>
  twMerge('relative flex h-12 w-full items-center', props.groupClass),
 )
 const iconInputPaddingClass = computed(() => {
  const parts: string[] = []
  if (props.iconName && props.iconPosition === 'left') parts.push('!pl-11')
  const hasCustomRight = !!props.iconName && props.iconPosition === 'right'
  if (hasCustomRight) parts.push('!pr-16')
  else parts.push('!pr-10')
  return parts.join(' ')
 })
 const focusPaddingClass = computed(() => {
  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
  return 'focus:pl-[11px]'
 })
 const labelPositionClass = computed(() =>
  props.iconName && props.iconPosition === 'left' ? 'left-11' : 'left-3',
 )
 const mergedInputClass = computed(() =>
  twMerge(
    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
    isFilled.value ? 'border-black' : 'border-m-muted',
    props.disabled
      ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted'
      : 'cursor-text',
    hasError.value
      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
    isOpen.value ? '!rounded-b-none !border-b-0' : '',
    props.inputClass,
    iconInputPaddingClass.value,
    focusPaddingClass.value,
  ),
 )
 const mergedLabelClass = computed(() =>
  twMerge(
    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
    labelPositionClass.value,
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    props.disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
    props.labelClass,
  ),
 )
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (props.disabled) return props.iconColor
  if (isFocused.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return props.iconColor
 })
 const chevronColorClass = 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'
 })
 const scheduleSearch = () => {
  if (debounceTimer) clearTimeout(debounceTimer)
  if (showMinSearch.value) return
  debounceTimer = setTimeout(() => {
    emit('search', inputValue.value)
  }, props.debounce)
 }
 const onInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  inputValue.value = target.value
  if (!isOpen.value) isOpen.value = true
  activeIndex.value = -1
  if (hasSelection.value && target.value !== selectedOption.value?.label) {
    emit('update:modelValue', null)
    emit('select', null)
  }
  scheduleSearch()
 }
 const onFocus = () => {
  if (props.disabled || props.readonly) return
  isFocused.value = true
  isOpen.value = true
 }
 const onInputClick = () => {
  if (props.disabled || props.readonly) return
  isOpen.value = true
 }
 const onSelect = (option: Option) => {
  inputValue.value = option.label
  activeIndex.value = -1
  emit('update:modelValue', option.value)
  emit('select', option)
  isOpen.value = false
  isFocused.value = false
 }
 const closeAndCommit = () => {
  if (
    props.allowCreate
    && inputValue.value !== ''
    && inputValue.value !== selectedOption.value?.label
  ) {
    emit('update:modelValue', inputValue.value)
    emit('create', inputValue.value)
  } else if (selectedOption.value) {
    inputValue.value = selectedOption.value.label
  } else if (!props.allowCreate) {
    inputValue.value = ''
  }
  isOpen.value = false
  isFocused.value = false
 }
 const closeAndRevert = () => {
  if (selectedOption.value) {
    inputValue.value = selectedOption.value.label
  } else {
    inputValue.value = ''
  }
  isOpen.value = false
  isFocused.value = false
 }
 const onKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    event.preventDefault()
    closeAndRevert()
    return
  }
  if (event.key === 'Enter') {
    event.preventDefault()
    if (activeIndex.value >= 0 && props.options[activeIndex.value]) {
      onSelect(props.options[activeIndex.value])
      return
    }
    if (props.allowCreate && inputValue.value !== '') {
      emit('update:modelValue', inputValue.value)
      emit('create', inputValue.value)
      isOpen.value = false
      isFocused.value = false
    }
    return
  }
  if (event.key === 'ArrowDown') {
    event.preventDefault()
    if (!isOpen.value) {
      isOpen.value = true
    }
    activeIndex.value = Math.min(activeIndex.value + 1, props.options.length - 1)
    return
  }
  if (event.key === 'ArrowUp') {
    event.preventDefault()
    activeIndex.value = Math.max(activeIndex.value - 1, 0)
  }
 }
 const onClickOutside = (event: MouseEvent) => {
  if (!root.value) return
  if (!root.value.contains(event.target as Node)) {
    closeAndCommit()
  }
 }
 onMounted(() => document.addEventListener('mousedown', onClickOutside))
 onBeforeUnmount(() => {
  document.removeEventListener('mousedown', onClickOutside)
  if (debounceTimer) clearTimeout(debounceTimer)
 })
 </script>
 <style scoped>
 .floating-label {
  background: white;
  padding: 0 0.25rem;
 }
 .grow-height {
  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
 }
 .grow-height:focus {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
 }
@media (prefers-reduced-motion: reduce) {
  .grow-height {
    transition: none;
  }
 }
 :deep(ul[role="listbox"]) {
  scrollbar-width: auto;
 }
 :deep(.select-scrollbar-primary) {
  scrollbar-color: rgb(var(--m-primary)) transparent;
 }
 :deep(.select-scrollbar-error) {
  scrollbar-color: #000000 transparent;
 }
 :deep(.select-scrollbar-success) {
  scrollbar-color: #000000 transparent;
 }
 </style>
@@ -1,228 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import InputEmail from './InputEmail.vue'
 type InputEmailProps = {
  id?: string
  label?: string
  name?: string
  autocomplete?: string
  modelValue?: string | null
  inputClass?: string
  labelClass?: string
  groupClass?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  iconName?: string
  iconPosition?: 'left' | 'right'
  iconSize?: string | number
  iconColor?: string
 }
 const InputEmailForTest = InputEmail as DefineComponent<InputEmailProps>
 const mountComponent = (props: InputEmailProps = {}) =>
  mount(InputEmailForTest, {
    props,
    global: {
      stubs: {
        IconifyIcon: {
          template: '<span data-test="icon" v-bind="$attrs" />',
        },
      },
    },
  })
 describe('MalioInputEmail', () => {
  it('renders the initial input value', () => {
    const wrapper = mountComponent({modelValue: 'user@example.com'})
    expect(wrapper.get('input').element.value).toBe('user@example.com')
  })
  it('renders the label text', () => {
    const wrapper = mountComponent({label: 'Adresse email'})
    expect(wrapper.get('label').text()).toBe('Adresse email')
  })
  it('has type email', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('type')).toBe('email')
  })
  it('has inputmode email', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('inputmode')).toBe('email')
  })
  it('renders the default email icon', () => {
    const wrapper = mountComponent()
    const iconComponent = wrapper.findComponent(IconifyIcon)
    expect(iconComponent.props('icon')).toBe('mdi:email-outline')
  })
  it('allows overriding the icon', () => {
    const wrapper = mountComponent({iconName: 'mdi:at'})
    const iconComponent = wrapper.findComponent(IconifyIcon)
    expect(iconComponent.props('icon')).toBe('mdi:at')
  })
  it('does not render icon when iconName is empty', () => {
    const wrapper = mountComponent({iconName: ''})
    expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
  })
  it('places icon on the right by default', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
  })
  it('places icon on the left when iconPosition is left', () => {
    const wrapper = mountComponent({iconPosition: 'left'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
  })
  it('emits update:modelValue on input change', async () => {
    const wrapper = mountComponent({modelValue: ''})
    await wrapper.get('input').setValue('new@example.com')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new@example.com'])
  })
  it('sets disabled styles when true', () => {
    const wrapper = mountComponent({disabled: true})
    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
    expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
  })
  it('sets readonly when true', () => {
    const wrapper = mountComponent({readonly: true})
    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
  })
  it('shows error message and styles', () => {
    const wrapper = mountComponent({error: 'Email invalide'})
    expect(wrapper.get('p.text-m-danger').text()).toBe('Email invalide')
    expect(wrapper.get('input').classes()).toContain('border-m-danger')
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
  })
  it('shows error style on icon', () => {
    const wrapper = mountComponent({error: 'Error'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
  })
  it('shows success message and styles', () => {
    const wrapper = mountComponent({success: 'Email valide'})
    expect(wrapper.get('p.text-m-success').text()).toBe('Email valide')
    expect(wrapper.get('input').classes()).toContain('border-m-success')
  })
  it('shows success style on icon', () => {
    const wrapper = mountComponent({success: 'Success'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
  })
  it('shows default icon color when empty and unfocused', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
  })
  it('shows primary icon color on focus', async () => {
    const wrapper = mountComponent()
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
  })
  it('shows black icon color when filled and unfocused', () => {
    const wrapper = mountComponent({modelValue: 'user@example.com'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
  })
  it('keeps primary icon color when filled and focused', async () => {
    const wrapper = mountComponent({modelValue: 'user@example.com'})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
  })
  it('keeps default icon color when disabled, even if filled', () => {
    const wrapper = mountComponent({modelValue: 'user@example.com', disabled: true})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
  })
  it('error overrides focus color on icon', async () => {
    const wrapper = mountComponent({error: 'Email invalide'})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
  })
  it('shows hint message', () => {
    const wrapper = mountComponent({hint: 'ex: prenom.nom@malio.fr'})
    expect(wrapper.get('p.text-m-muted').text()).toBe('ex: prenom.nom@malio.fr')
  })
  it('links label to input via for/id', () => {
    const wrapper = mountComponent({id: 'email-field', label: 'Email'})
    expect(wrapper.get('input').attributes('id')).toBe('email-field')
    expect(wrapper.get('label').attributes('for')).toBe('email-field')
  })
  it('generates an id when missing and reuses it on label', () => {
    const wrapper = mountComponent({label: 'Email'})
    const inputId = wrapper.get('input').attributes('id')
    expect(inputId?.startsWith('malio-input-email-')).toBe(true)
    expect(wrapper.get('label').attributes('for')).toBe(inputId)
  })
  it('aria-invalid is false when no error', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
  })
  it('uses autocomplete off by default', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('autocomplete')).toBe('off')
  })
  it('allows overriding autocomplete', () => {
    const wrapper = mountComponent({autocomplete: 'email'})
    expect(wrapper.get('input').attributes('autocomplete')).toBe('email')
  })
 })
@@ -1,229 +0,0 @@
 <template>
  <div>
    <div
      :class="mergedGroupClass"
    >
      <input
        :id="inputId"
        :name="name"
        :autocomplete="autocomplete"
        :class="mergedInputClass"
        :required="required"
        :disabled="disabled"
        :value="currentValue"
        :readonly="readonly"
        :aria-invalid="!!error"
        :aria-describedby="describedBy"
        v-bind="attrs"
        placeholder="_"
        type="email"
        inputmode="email"
        @input="onInput"
        @focus="isFocused = true"
        @blur="isFocused = false"
      >
      <label
        v-if="label"
        :for="inputId"
        :class="mergedLabelClass"
      >
        {{ label }}
      </label>
      <IconifyIcon
        v-if="iconName"
        :icon="iconName"
        :width="iconSize"
        :height="iconSize"
        data-test="icon"
        :class="[iconStateClass, iconPositionClass]"
      />
    </div>
    <p
      v-if="hint || hasError || hasSuccess"
      :id="`${inputId}-describedby`"
      :class="[
          hasError
            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : 'text-m-muted',
          'mt-1 text-xs ml-[2px] ',
        ]"
    >
      {{ hint || error || success }}
    </p>
  </div>
 </template>
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 defineOptions({name: 'MalioInputEmail', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    name?: string
    autocomplete?: string
    modelValue?: string | null | undefined
    inputClass?: string
    labelClass?: string
    groupClass?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    iconName?: string
    iconPosition?: 'left' | 'right'
    iconSize?: string | number
    iconColor?: string
  }>(),
  {
    id: '',
    name: '',
    autocomplete: 'off',
    modelValue: undefined,
    iconName: 'mdi:email-outline',
    iconPosition: 'right',
    label: '',
    inputClass: '',
    labelClass: '',
    groupClass: '',
    required: false,
    readonly: false,
    disabled: false,
    hint: '',
    error: '',
    success: '',
    iconSize: 24,
    iconColor: 'text-m-muted',
  },
 )
 const attrs = useAttrs()
 const generatedId = useId()
 const localValue = ref('')
 const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-email-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
 const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
 const mergedGroupClass = computed(() =>
  twMerge(
    'relative flex h-12 w-full items-center',
    props.groupClass,
  ),
 )
 const mergedInputClass = computed(() =>
  twMerge(
    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
    props.inputClass,
    iconInputPaddingClass.value,
    focusPaddingClass.value,
  ),
 )
 const mergedLabelClass = computed(() =>
  twMerge(
    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
    labelPositionClass.value,
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
    props.labelClass,
  ),
 )
 const describedBy = computed(() => {
  const ids: string[] = []
  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
  if (hasError.value) ids.push(`${inputId.value}-error`)
  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
  return ids.length ? ids.join(' ') : undefined
 })
 const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void
 }>()
 const onInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (!isControlled.value) {
    localValue.value = target.value
  }
  emit('update:modelValue', target.value)
 }
 const iconInputPaddingClass = computed(() => {
  if (!props.iconName) return ''
  return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3 !pr-10'
 })
 const disabled = computed(() => props.disabled)
 const labelPositionClass = computed(() => {
  if (props.iconName && props.iconPosition === 'left') return 'left-11'
  return 'left-3'
 })
 const focusPaddingClass = computed(() => {
  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
  return 'focus:pl-[11px]'
 })
 const iconPositionClass = computed(() => {
  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (disabled.value) return props.iconColor
  if (isFocused.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return props.iconColor
 })
 </script>
 <style scoped>
 .floating-label {
  background: white;
  padding: 0 0.25rem;
 }
 .grow-height {
  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
 }
 .grow-height:focus {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
 }
@media (prefers-reduced-motion: reduce) {
  .grow-height { transition: none; }
 }
 </style>
@@ -171,18 +171,4 @@ describe('MalioInputPassword', () => {
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
  })
  it('shows primary icon color on focus', async () => {
    const wrapper = mountComponent()
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
  })
  it('shows black icon color when filled and unfocused', () => {
    const wrapper = mountComponent({modelValue: 'secret'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
  })
 })
@@ -39,7 +39,10 @@
        :height="24"
        data-test="icon"
        :class="[
-        iconStateClass,
+        hasError
          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success' : 'text-m-muted',
        'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
      ]"
        @click="toggleVisibility"
@@ -137,7 +140,7 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
  twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
@@ -186,15 +189,6 @@ const onInput = (event: Event) => {
 }
 const disabled = computed(() => props.disabled)
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (disabled.value) return 'text-m-muted'
  if (isFocused.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return 'text-m-muted'
 })
 </script>
 <style scoped>
@@ -1,308 +0,0 @@
 import {describe, expect, it} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import InputPhone from './InputPhone.vue'
 type InputPhoneProps = {
  id?: string
  label?: string
  name?: string
  autocomplete?: string
  modelValue?: string | null
  inputClass?: string
  labelClass?: string
  groupClass?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  iconName?: string
  iconPosition?: 'left' | 'right'
  iconSize?: string | number
  iconColor?: string
  mask?: string
  addable?: boolean
  addIconName?: string
  addButtonLabel?: string
 }
 const InputPhoneForTest = InputPhone as DefineComponent<InputPhoneProps>
 const mountComponent = (props: InputPhoneProps = {}) =>
  mount(InputPhoneForTest, {
    props,
    global: {
      stubs: {
        IconifyIcon: {
          template: '<span data-test="icon" v-bind="$attrs" />',
        },
      },
    },
  })
 describe('MalioInputPhone', () => {
  it('renders the initial input value', () => {
    const wrapper = mountComponent({modelValue: '+33 6 12 34 56 78'})
    expect(wrapper.get('input').element.value).toBe('+33 6 12 34 56 78')
  })
  it('renders the label text', () => {
    const wrapper = mountComponent({label: 'Téléphone'})
    expect(wrapper.get('label').text()).toBe('Téléphone')
  })
  it('has type tel', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('type')).toBe('tel')
  })
  it('has inputmode tel', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('inputmode')).toBe('tel')
  })
  it('renders the default phone icon', () => {
    const wrapper = mountComponent()
    const iconComponent = wrapper.findComponent(IconifyIcon)
    expect(iconComponent.props('icon')).toBe('mdi:phone-outline')
  })
  it('allows overriding the icon', () => {
    const wrapper = mountComponent({iconName: 'mdi:cellphone'})
    const iconComponent = wrapper.findComponent(IconifyIcon)
    expect(iconComponent.props('icon')).toBe('mdi:cellphone')
  })
  it('does not render icon when iconName is empty', () => {
    const wrapper = mountComponent({iconName: ''})
    expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
  })
  it('places icon on the left by default', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
  })
  it('places icon on the right when iconPosition is right', () => {
    const wrapper = mountComponent({iconPosition: 'right'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
  })
  it('emits update:modelValue on input change', async () => {
    const wrapper = mountComponent({modelValue: ''})
    await wrapper.get('input').setValue('+33612345678')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['+33612345678'])
  })
  it('sets disabled styles when true', () => {
    const wrapper = mountComponent({disabled: true})
    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
    expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
  })
  it('sets readonly when true', () => {
    const wrapper = mountComponent({readonly: true})
    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
  })
  it('shows error message and styles', () => {
    const wrapper = mountComponent({error: 'Numéro invalide'})
    expect(wrapper.get('p.text-m-danger').text()).toBe('Numéro invalide')
    expect(wrapper.get('input').classes()).toContain('border-m-danger')
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
  })
  it('shows error style on icon', () => {
    const wrapper = mountComponent({error: 'Error'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
  })
  it('shows success message and styles', () => {
    const wrapper = mountComponent({success: 'Numéro valide'})
    expect(wrapper.get('p.text-m-success').text()).toBe('Numéro valide')
    expect(wrapper.get('input').classes()).toContain('border-m-success')
  })
  it('shows success style on icon', () => {
    const wrapper = mountComponent({success: 'Success'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
  })
  it('shows default icon color when empty and unfocused', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
  })
  it('shows primary icon color on focus', async () => {
    const wrapper = mountComponent()
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
  })
  it('shows black icon color when filled and unfocused', () => {
    const wrapper = mountComponent({modelValue: '+33612345678'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
  })
  it('keeps default icon color when disabled, even if filled', () => {
    const wrapper = mountComponent({modelValue: '+33612345678', disabled: true})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
  })
  it('error overrides focus color on icon', async () => {
    const wrapper = mountComponent({error: 'Numéro invalide'})
    await wrapper.get('input').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
  })
  it('shows hint message', () => {
    const wrapper = mountComponent({hint: 'Format international recommandé'})
    expect(wrapper.get('p.text-m-muted').text()).toBe('Format international recommandé')
  })
  it('links label to input via for/id', () => {
    const wrapper = mountComponent({id: 'phone-field', label: 'Téléphone'})
    expect(wrapper.get('input').attributes('id')).toBe('phone-field')
    expect(wrapper.get('label').attributes('for')).toBe('phone-field')
  })
  it('generates an id when missing and reuses it on label', () => {
    const wrapper = mountComponent({label: 'Téléphone'})
    const inputId = wrapper.get('input').attributes('id')
    expect(inputId?.startsWith('malio-input-phone-')).toBe(true)
    expect(wrapper.get('label').attributes('for')).toBe(inputId)
  })
  it('aria-invalid is false when no error', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
  })
  it('uses autocomplete off by default', () => {
    const wrapper = mountComponent()
    expect(wrapper.get('input').attributes('autocomplete')).toBe('off')
  })
  it('allows overriding autocomplete', () => {
    const wrapper = mountComponent({autocomplete: 'tel'})
    expect(wrapper.get('input').attributes('autocomplete')).toBe('tel')
  })
  it('does not render add button by default', () => {
    const wrapper = mountComponent()
    expect(wrapper.find('[data-test="add-button"]').exists()).toBe(false)
  })
  it('renders add button when addable is true', () => {
    const wrapper = mountComponent({addable: true})
    expect(wrapper.find('[data-test="add-button"]').exists()).toBe(true)
  })
  it('emits add event when add button is clicked', async () => {
    const wrapper = mountComponent({addable: true})
    await wrapper.get('[data-test="add-button"]').trigger('click')
    expect(wrapper.emitted('add')).toHaveLength(1)
  })
  it('does not emit add when disabled', async () => {
    const wrapper = mountComponent({addable: true, disabled: true})
    await wrapper.get('[data-test="add-button"]').trigger('click')
    expect(wrapper.emitted('add')).toBeUndefined()
  })
  it('does not emit add when readonly', async () => {
    const wrapper = mountComponent({addable: true, readonly: true})
    await wrapper.get('[data-test="add-button"]').trigger('click')
    expect(wrapper.emitted('add')).toBeUndefined()
  })
  it('disables add button when disabled', () => {
    const wrapper = mountComponent({addable: true, disabled: true})
    expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
  })
  it('disables add button when readonly', () => {
    const wrapper = mountComponent({addable: true, readonly: true})
    expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
  })
  it('renders the default add icon (mdi:plus)', () => {
    const wrapper = mountComponent({addable: true})
    const icons = wrapper.findAllComponents(IconifyIcon)
    const addIcon = icons[icons.length - 1]
    expect(addIcon.props('icon')).toBe('mdi:plus')
  })
  it('allows overriding the add icon', () => {
    const wrapper = mountComponent({addable: true, addIconName: 'mdi:phone-plus'})
    const icons = wrapper.findAllComponents(IconifyIcon)
    const addIcon = icons[icons.length - 1]
    expect(addIcon.props('icon')).toBe('mdi:phone-plus')
  })
  it('exposes aria-label on add button', () => {
    const wrapper = mountComponent({addable: true, addButtonLabel: 'Ajouter un autre numéro'})
    expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter un autre numéro')
  })
  it('adds right padding to input when addable', () => {
    const wrapper = mountComponent({addable: true})
    expect(wrapper.get('input').classes()).toContain('!pr-10')
  })
  it('applies mask via maska directive', async () => {
    const wrapper = mountComponent({mask: '+## # ## ## ## ##'})
    await wrapper.get('input').setValue('33612345678')
    expect(wrapper.emitted('update:modelValue')).toBeDefined()
  })
 })
@@ -1,274 +0,0 @@
 <template>
  <div>
    <div
      :class="mergedGroupClass"
    >
      <input
        :id="inputId"
        v-maska="mask"
        :name="name"
        :autocomplete="autocomplete"
        :class="mergedInputClass"
        :required="required"
        :disabled="disabled"
        :value="currentValue"
        :readonly="readonly"
        :aria-invalid="!!error"
        :aria-describedby="describedBy"
        v-bind="attrs"
        placeholder="_"
        type="tel"
        inputmode="tel"
        @input="onInput"
        @focus="isFocused = true"
        @blur="isFocused = false"
      >
      <label
        v-if="label"
        :for="inputId"
        :class="mergedLabelClass"
      >
        {{ label }}
      </label>
      <IconifyIcon
        v-if="iconName"
        :icon="iconName"
        :width="iconSize"
        :height="iconSize"
        data-test="icon"
        :class="[iconStateClass, iconPositionClass]"
      />
      <button
        v-if="addable"
        type="button"
        :disabled="disabled || readonly"
        :aria-label="addButtonLabel"
        data-test="add-button"
        :class="mergedAddButtonClass"
        @click="onAdd"
      >
        <IconifyIcon
          :icon="addIconName"
          :width="24"
          :height="24"
          data-test="add-icon"
        />
      </button>
    </div>
    <p
      v-if="hint || hasError || hasSuccess"
      :id="`${inputId}-describedby`"
      :class="[
          hasError
            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : 'text-m-muted',
          'mt-1 text-xs ml-[2px] ',
        ]"
    >
      {{ hint || error || success }}
    </p>
  </div>
 </template>
 <script setup lang="ts">
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 defineOptions({name: 'MalioInputPhone', inheritAttrs: false})
 const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    name?: string
    autocomplete?: string
    modelValue?: string | null | undefined
    inputClass?: string
    labelClass?: string
    groupClass?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    iconName?: string
    iconPosition?: 'left' | 'right'
    iconSize?: string | number
    iconColor?: string
    mask?: string | MaskInputOptions
    addable?: boolean
    addIconName?: string
    addButtonLabel?: string
  }>(),
  {
    id: '',
    name: '',
    autocomplete: 'off',
    modelValue: undefined,
    iconName: 'mdi:phone-outline',
    iconPosition: 'left',
    label: '',
    inputClass: '',
    labelClass: '',
    groupClass: '',
    required: false,
    readonly: false,
    disabled: false,
    hint: '',
    error: '',
    success: '',
    iconSize: 24,
    iconColor: 'text-m-muted',
    mask: undefined,
    addable: false,
    addIconName: 'mdi:plus',
    addButtonLabel: 'Ajouter un numéro',
  },
 )
 const attrs = useAttrs()
 const generatedId = useId()
 const localValue = ref('')
 const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-phone-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
 const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
 const mergedGroupClass = computed(() =>
  twMerge(
    'relative flex h-12 w-full items-center',
    props.groupClass,
  ),
 )
 const mergedInputClass = computed(() =>
  twMerge(
    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
    props.inputClass,
    iconInputPaddingClass.value,
    focusPaddingClass.value,
  ),
 )
 const mergedLabelClass = computed(() =>
  twMerge(
    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
    labelPositionClass.value,
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
    props.labelClass,
  ),
 )
 const mergedAddButtonClass = computed(() =>
  twMerge(
    'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer text-m-primary transition-opacity hover:opacity-70',
    (props.disabled || props.readonly) ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
  ),
 )
 const describedBy = computed(() => {
  const ids: string[] = []
  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
  if (hasError.value) ids.push(`${inputId.value}-error`)
  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
  return ids.length ? ids.join(' ') : undefined
 })
 const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void
  (event: 'add'): void
 }>()
 const onInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (!isControlled.value) {
    localValue.value = target.value
  }
  emit('update:modelValue', target.value)
 }
 const onAdd = () => {
  if (props.disabled || props.readonly) return
  emit('add')
 }
 const iconInputPaddingClass = computed(() => {
  const leftIcon = props.iconName && props.iconPosition === 'left'
  const rightIcon = props.iconName && props.iconPosition === 'right'
  const parts: string[] = []
  if (leftIcon) parts.push('!pl-11')
  if (rightIcon || props.addable) parts.push('!pr-10')
  return parts.join(' ')
 })
 const disabled = computed(() => props.disabled)
 const labelPositionClass = computed(() => {
  if (props.iconName && props.iconPosition === 'left') return 'left-11'
  return 'left-3'
 })
 const focusPaddingClass = computed(() => {
  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
  return 'focus:pl-[11px]'
 })
 const iconPositionClass = computed(() => {
  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (disabled.value) return props.iconColor
  if (isFocused.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return props.iconColor
 })
 </script>
 <style scoped>
 .floating-label {
  background: white;
  padding: 0 0.25rem;
 }
 .grow-height {
  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
 }
 .grow-height:focus {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
 }
@media (prefers-reduced-motion: reduce) {
  .grow-height { transition: none; }
 }
 </style>
@@ -1,165 +0,0 @@
 import {afterEach, describe, expect, it} from 'vitest'
 import {flushPromises, mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import InputRichText from './InputRichText.vue'
 type InputRichTextProps = {
  id?: string
  label?: string
  modelValue?: string | null
  placeholder?: string
  minHeight?: string
  editable?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  outputFormat?: 'markdown' | 'html'
  groupClass?: string
  labelClass?: string
  editorClass?: string
 }
 const InputRichTextForTest = InputRichText as DefineComponent<InputRichTextProps>
 const mountComponent = async (props: InputRichTextProps = {}) => {
  const wrapper = mount(InputRichTextForTest, {
    props,
    attachTo: document.body,
  })
  await flushPromises()
  return wrapper
 }
 afterEach(() => {
  document.body.replaceChildren()
 })
 describe('MalioInputRichText', () => {
  it('renders the label and reuses a provided id', async () => {
    const wrapper = await mountComponent({id: 'custom-rt-id', label: 'Description'})
    const label = wrapper.get('label')
    expect(label.text()).toBe('Description')
    expect(label.attributes('for')).toBe('custom-rt-id')
    expect(wrapper.get('#custom-rt-id').exists()).toBe(true)
  })
  it('generates an id when missing', async () => {
    const wrapper = await mountComponent({label: 'Description'})
    const labelFor = wrapper.get('label').attributes('for')
    expect(labelFor?.startsWith('malio-input-rich-text-')).toBe(true)
  })
  it('renders the toolbar buttons in editable mode', async () => {
    const wrapper = await mountComponent({modelValue: ''})
    const buttons = wrapper.findAll('button[type="button"]')
    expect(buttons.length).toBeGreaterThanOrEqual(13)
    expect(wrapper.find('button[title="Gras"]').exists()).toBe(true)
    expect(wrapper.find('button[title="Italique"]').exists()).toBe(true)
    expect(wrapper.find('button[title="Lien"]').exists()).toBe(true)
    expect(wrapper.find('button[title="Couleur du texte"]').exists()).toBe(true)
    expect(wrapper.find('button[title="Surlignage"]').exists()).toBe(true)
    expect(wrapper.find('button[title="Annuler"]').exists()).toBe(true)
    expect(wrapper.find('button[title="Rétablir"]').exists()).toBe(true)
  })
  it('opens and closes the text color palette', async () => {
    const wrapper = await mountComponent({modelValue: ''})
    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
  })
  it('opens the highlight palette and closes the color palette', async () => {
    const wrapper = await mountComponent({modelValue: ''})
    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
    await wrapper.get('button[title="Surlignage"]').trigger('click')
    expect(wrapper.find('[aria-label="Palette de surlignage"]').exists()).toBe(true)
    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
  })
  it('disables color and highlight buttons when readonly', async () => {
    const wrapper = await mountComponent({readonly: true, modelValue: ''})
    expect(wrapper.get('button[title="Couleur du texte"]').attributes('disabled')).toBeDefined()
    expect(wrapper.get('button[title="Surlignage"]').attributes('disabled')).toBeDefined()
  })
  it('does not render the toolbar in readonly display mode (editable=false)', async () => {
    const wrapper = await mountComponent({editable: false, modelValue: '**hi**'})
    expect(wrapper.find('button[title="Gras"]').exists()).toBe(false)
  })
  it('disables toolbar buttons when disabled', async () => {
    const wrapper = await mountComponent({disabled: true, modelValue: ''})
    const boldBtn = wrapper.get('button[title="Gras"]')
    expect(boldBtn.attributes('disabled')).toBeDefined()
  })
  it('disables toolbar buttons when readonly', async () => {
    const wrapper = await mountComponent({readonly: true, modelValue: ''})
    const boldBtn = wrapper.get('button[title="Gras"]')
    expect(boldBtn.attributes('disabled')).toBeDefined()
  })
  it('shows hint message in muted color', async () => {
    const wrapper = await mountComponent({hint: 'Helpful hint'})
    expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
  })
  it('shows error state on wrapper, label and message', async () => {
    const wrapper = await mountComponent({label: 'Description', error: 'Editor error'})
    expect(wrapper.get('label').classes()).toContain('text-m-danger')
    expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
  })
  it('shows success state on wrapper, label and message', async () => {
    const wrapper = await mountComponent({label: 'Description', success: 'Editor success'})
    expect(wrapper.get('label').classes()).toContain('text-m-success')
    expect(wrapper.get('p.text-m-success').text()).toBe('Editor success')
    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-success')
  })
  it('prioritizes error over success', async () => {
    const wrapper = await mountComponent({error: 'Editor error', success: 'Editor success'})
    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
    expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
  })
  it('sets aria-invalid and aria-describedby on the editor content when error', async () => {
    const wrapper = await mountComponent({id: 'rt-aria', error: 'Boom'})
    const editorContent = wrapper.find('[aria-invalid="true"]')
    expect(editorContent.exists()).toBe(true)
    expect(editorContent.attributes('aria-describedby')).toBe('rt-aria-describedby')
  })
  it('renders initial markdown content visually', async () => {
    const wrapper = await mountComponent({modelValue: '## Mon titre\n\nUn paragraphe.'})
    const html = wrapper.html()
    expect(html).toContain('Mon titre')
    expect(html).toContain('Un paragraphe.')
  })
 })
@@ -1,574 +0,0 @@
 <template>
  <div :class="mergedGroupClass">
    <label
      v-if="label"
      :for="editorId"
      :class="mergedLabelClass"
    >
      {{ label }}
    </label>
    <!-- Mode lecture seule (rendu uniquement) -->
    <div
      v-if="!editable"
      :id="editorId"
      :class="mergedReadonlyClass"
    >
      <EditorContent :editor="editor" />
    </div>
    <!-- Mode éditable -->
    <div
      v-else
      :id="editorId"
      :class="mergedEditorWrapperClass"
      @click="focusEditor"
    >
      <div
        class="flex flex-wrap items-center gap-0.5 border-b border-m-border bg-m-bg p-1"
        @click.stop
      >
        <button
          v-for="btn in toolbarButtons"
          :key="btn.key"
          type="button"
          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
          :class="btn.isActive() ? 'bg-m-primary/15 text-m-primary' : ''"
          :title="btn.title"
          :disabled="disabled || readonly"
          :aria-label="btn.title"
          :aria-pressed="btn.isActive()"
          @mousedown.prevent
          @click="btn.action()"
        >
          <IconifyIcon :icon="btn.icon" :width="18" :height="18" />
        </button>
        <span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
        <div class="relative">
          <button
            type="button"
            class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
            :class="colorPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
            title="Couleur du texte"
            aria-label="Couleur du texte"
            :aria-expanded="colorPickerOpen"
            :disabled="disabled || readonly"
            @mousedown.prevent
            @click="toggleColorPicker"
          >
            <IconifyIcon icon="mdi:format-color-text" :width="18" :height="18" />
            <span
              class="-mt-0.5 block h-1 w-4 rounded-sm"
              :style="{ backgroundColor: currentTextColor ?? 'transparent' }"
              aria-hidden="true"
            />
          </button>
          <div
            v-if="colorPickerOpen"
            class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
            role="dialog"
            aria-label="Palette couleur du texte"
          >
            <div class="grid grid-cols-4 gap-1">
              <button
                v-for="swatch in textColorSwatches"
                :key="swatch.value"
                type="button"
                class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
                :class="currentTextColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
                :style="{ backgroundColor: swatch.value }"
                :title="swatch.label"
                :aria-label="swatch.label"
                @mousedown.prevent
                @click="applyTextColor(swatch.value)"
              />
            </div>
            <button
              type="button"
              class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
              @mousedown.prevent
              @click="applyTextColor(null)"
            >
              <IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
              Aucune couleur
            </button>
          </div>
        </div>
        <div class="relative">
          <button
            type="button"
            class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
            :class="highlightPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
            title="Surlignage"
            aria-label="Surlignage"
            :aria-expanded="highlightPickerOpen"
            :disabled="disabled || readonly"
            @mousedown.prevent
            @click="toggleHighlightPicker"
          >
            <IconifyIcon icon="mdi:marker" :width="18" :height="18" />
            <span
              class="-mt-0.5 block h-1 w-4 rounded-sm"
              :style="{ backgroundColor: currentHighlightColor ?? 'transparent' }"
              aria-hidden="true"
            />
          </button>
          <div
            v-if="highlightPickerOpen"
            class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
            role="dialog"
            aria-label="Palette de surlignage"
          >
            <div class="grid grid-cols-4 gap-1">
              <button
                v-for="swatch in highlightSwatches"
                :key="swatch.value"
                type="button"
                class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
                :class="currentHighlightColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
                :style="{ backgroundColor: swatch.value }"
                :title="swatch.label"
                :aria-label="swatch.label"
                @mousedown.prevent
                @click="applyHighlight(swatch.value)"
              />
            </div>
            <button
              type="button"
              class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
              @mousedown.prevent
              @click="applyHighlight(null)"
            >
              <IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
              Aucun surlignage
            </button>
          </div>
        </div>
        <span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
        <button
          type="button"
          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
          title="Annuler"
          aria-label="Annuler"
          :disabled="disabled || readonly || !editor?.can().undo()"
          @mousedown.prevent
          @click="editor?.chain().focus().undo().run()"
        >
          <IconifyIcon icon="mdi:undo" :width="18" :height="18" />
        </button>
        <button
          type="button"
          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
          title="Rétablir"
          aria-label="Rétablir"
          :disabled="disabled || readonly || !editor?.can().redo()"
          @mousedown.prevent
          @click="editor?.chain().focus().redo().run()"
        >
          <IconifyIcon icon="mdi:redo" :width="18" :height="18" />
        </button>
      </div>
      <EditorContent
        :editor="editor"
        class="malio-rich-text flex flex-1 cursor-text"
        :style="{ minHeight }"
        :aria-invalid="hasError || undefined"
        :aria-describedby="describedBy"
      />
    </div>
    <p
      v-if="hint || hasError || hasSuccess"
      :id="`${editorId}-describedby`"
      :class="[
        hasError
          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
        'mt-1 text-xs ml-[2px]',
      ]"
    >
      {{ error || success || hint }}
    </p>
  </div>
 </template>
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useId, watch } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import { TextStyle } from '@tiptap/extension-text-style'
 import Color from '@tiptap/extension-color'
 import Highlight from '@tiptap/extension-highlight'
 import { Markdown } from 'tiptap-markdown'
 import { twMerge } from 'tailwind-merge'
 defineOptions({ name: 'MalioInputRichText', inheritAttrs: false })
 type OutputFormat = 'markdown' | 'html'
 const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    modelValue?: string | null | undefined
    placeholder?: string
    minHeight?: string
    editable?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    outputFormat?: OutputFormat
    groupClass?: string
    labelClass?: string
    editorClass?: string
  }>(),
  {
    id: '',
    label: '',
    modelValue: undefined,
    placeholder: '',
    minHeight: '160px',
    editable: true,
    disabled: false,
    readonly: false,
    hint: '',
    error: '',
    success: '',
    outputFormat: 'html',
    groupClass: '',
    labelClass: '',
    editorClass: '',
  },
 )
 const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void
 }>()
 const generatedId = useId()
 const editor = shallowRef<Editor>()
 const isFocused = shallowRef(false)
 const editorId = computed(() => props.id?.toString() || `malio-input-rich-text-${generatedId}`)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isInteractionLocked = computed(() => props.disabled || props.readonly)
 const describedBy = computed(() =>
  hasError.value || hasSuccess.value || props.hint ? `${editorId.value}-describedby` : undefined,
 )
 const mergedGroupClass = computed(() => twMerge('w-full', props.groupClass))
 const mergedLabelClass = computed(() =>
  twMerge(
    'mb-1 block text-sm font-medium',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : isFocused.value
          ? 'text-m-primary'
          : 'text-m-text',
    props.disabled ? 'text-black/60' : '',
    props.labelClass,
  ),
 )
 const mergedEditorWrapperClass = computed(() =>
  twMerge(
    'rich-text-wrapper flex flex-col overflow-hidden rounded-md border bg-white transition-colors',
    hasError.value
      ? 'border-m-danger focus-within:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus-within:border-m-success'
        : isFocused.value
          ? 'border-m-primary'
          : 'border-m-muted hover:border-m-text/60',
    props.disabled ? 'cursor-not-allowed bg-m-bg/50 opacity-70' : '',
    props.editorClass,
  ),
 )
 const mergedReadonlyClass = computed(() =>
  twMerge(
    'malio-rich-text prose prose-sm max-w-none rounded-md border border-m-border bg-white p-3',
    'prose-headings:font-semibold prose-a:text-m-primary',
    'prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none',
    'prose-pre:bg-m-text prose-pre:text-white',
    props.editorClass,
  ),
 )
 const focusEditor = () => {
  if (isInteractionLocked.value) return
  closePickers()
  editor.value?.commands.focus()
 }
 const htmlPattern = /<\/?[a-z][\s\S]*>/i
 const normalizeEditorInput = (value: string | null | undefined): string => {
  const content = (value ?? '').replace(/\r\n?/g, '\n')
  if (htmlPattern.test(content)) return content
  return content.split('\n').join('\n\n').replace(/\n{3,}/g, '\n\n')
 }
 const promptForLink = () => {
  if (!editor.value) return
  const previous = editor.value.getAttributes('link').href as string | undefined
  const url = window.prompt('URL du lien (vide pour retirer)', previous ?? '')
  if (url === null) return
  if (url === '') {
    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
    return
  }
  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
 }
 type ColorSwatch = { label: string; value: string }
 const textColorSwatches: ColorSwatch[] = [
  { label: 'Rouge', value: '#bf2600' },
  { label: 'Orange', value: '#ff8b00' },
  { label: 'Jaune', value: '#ffc400' },
  { label: 'Vert', value: '#00875a' },
  { label: 'Turquoise', value: '#00a3bf' },
  { label: 'Bleu', value: '#0747a6' },
  { label: 'Violet', value: '#5243aa' },
  { label: 'Gris', value: '#42526e' },
 ]
 const highlightSwatches: ColorSwatch[] = [
  { label: 'Rouge', value: '#fdd0c8' },
  { label: 'Orange', value: '#ffe2c2' },
  { label: 'Jaune', value: '#fff0b3' },
  { label: 'Vert', value: '#c6edd0' },
  { label: 'Turquoise', value: '#c1ecf0' },
  { label: 'Bleu', value: '#cce0ff' },
  { label: 'Violet', value: '#dfd8fa' },
  { label: 'Gris', value: '#dfe1e6' },
 ]
 const colorPickerOpen = ref(false)
 const highlightPickerOpen = ref(false)
 const closePickers = () => {
  colorPickerOpen.value = false
  highlightPickerOpen.value = false
 }
 const toggleColorPicker = () => {
  highlightPickerOpen.value = false
  colorPickerOpen.value = !colorPickerOpen.value
 }
 const toggleHighlightPicker = () => {
  colorPickerOpen.value = false
  highlightPickerOpen.value = !highlightPickerOpen.value
 }
 const applyTextColor = (value: string | null) => {
  if (!editor.value) return
  if (value === null) {
    editor.value.chain().focus().unsetColor().run()
  } else {
    editor.value.chain().focus().setColor(value).run()
  }
  colorPickerOpen.value = false
 }
 const applyHighlight = (value: string | null) => {
  if (!editor.value) return
  if (value === null) {
    editor.value.chain().focus().unsetHighlight().run()
  } else {
    editor.value.chain().focus().setHighlight({ color: value }).run()
  }
  highlightPickerOpen.value = false
 }
 const currentTextColor = computed(() => {
  const attrs = editor.value?.getAttributes('textStyle') as { color?: string } | undefined
  return attrs?.color ?? null
 })
 const currentHighlightColor = computed(() => {
  const attrs = editor.value?.getAttributes('highlight') as { color?: string } | undefined
  return attrs?.color ?? null
 })
 const toolbarButtons = computed(() => {
  const e = editor.value
  return [
    { key: 'bold', icon: 'mdi:format-bold', title: 'Gras', isActive: () => !!e?.isActive('bold'), action: () => e?.chain().focus().toggleBold().run() },
    { key: 'italic', icon: 'mdi:format-italic', title: 'Italique', isActive: () => !!e?.isActive('italic'), action: () => e?.chain().focus().toggleItalic().run() },
    { key: 'strike', icon: 'mdi:format-strikethrough', title: 'Barré', isActive: () => !!e?.isActive('strike'), action: () => e?.chain().focus().toggleStrike().run() },
    { key: 'h2', icon: 'mdi:format-header-2', title: 'Titre H2', isActive: () => !!e?.isActive('heading', { level: 2 }), action: () => e?.chain().focus().toggleHeading({ level: 2 }).run() },
    { key: 'h3', icon: 'mdi:format-header-3', title: 'Titre H3', isActive: () => !!e?.isActive('heading', { level: 3 }), action: () => e?.chain().focus().toggleHeading({ level: 3 }).run() },
    { key: 'bulletList', icon: 'mdi:format-list-bulleted', title: 'Liste à puces', isActive: () => !!e?.isActive('bulletList'), action: () => e?.chain().focus().toggleBulletList().run() },
    { key: 'orderedList', icon: 'mdi:format-list-numbered', title: 'Liste numérotée', isActive: () => !!e?.isActive('orderedList'), action: () => e?.chain().focus().toggleOrderedList().run() },
    { key: 'blockquote', icon: 'mdi:format-quote-close', title: 'Citation', isActive: () => !!e?.isActive('blockquote'), action: () => e?.chain().focus().toggleBlockquote().run() },
    { key: 'code', icon: 'mdi:code-tags', title: 'Code inline', isActive: () => !!e?.isActive('code'), action: () => e?.chain().focus().toggleCode().run() },
    { key: 'codeBlock', icon: 'mdi:code-braces-box', title: 'Bloc de code', isActive: () => !!e?.isActive('codeBlock'), action: () => e?.chain().focus().toggleCodeBlock().run() },
    { key: 'link', icon: 'mdi:link-variant', title: 'Lien', isActive: () => !!e?.isActive('link'), action: promptForLink },
  ]
 })
 const getCurrentValue = (): string => {
  if (!editor.value) return ''
  if (props.outputFormat === 'html') return editor.value.getHTML()
  const storage = (editor.value.storage as unknown as Record<string, { getMarkdown?: () => string } | undefined>).markdown
  return storage?.getMarkdown ? storage.getMarkdown() : editor.value.getHTML()
 }
 const handleDocumentMousedown = (event: MouseEvent) => {
  if (!colorPickerOpen.value && !highlightPickerOpen.value) return
  const target = event.target as Node | null
  if (!target) return
  const popovers = document.querySelectorAll(`#${editorId.value} [role="dialog"]`)
  const triggers = document.querySelectorAll(`#${editorId.value} [aria-expanded]`)
  for (const node of [...popovers, ...triggers]) {
    if (node.contains(target)) return
  }
  closePickers()
 }
 const handleDocumentKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape' && (colorPickerOpen.value || highlightPickerOpen.value)) {
    closePickers()
  }
 }
 onMounted(() => {
  document.addEventListener('mousedown', handleDocumentMousedown)
  document.addEventListener('keydown', handleDocumentKeydown)
  editor.value = new Editor({
    content: normalizeEditorInput(props.modelValue),
    editable: props.editable && !props.disabled && !props.readonly,
    extensions: [
      StarterKit.configure({
        heading: { levels: [2, 3] },
        link: {
          openOnClick: false,
          autolink: true,
          HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
        },
      }),
      TextStyle,
      Color.configure({ types: ['textStyle'] }),
      Highlight.configure({ multicolor: true }),
      Placeholder.configure({
        placeholder: props.placeholder,
      }),
      Markdown.configure({
        html: true,
        tightLists: true,
        bulletListMarker: '-',
        linkify: true,
        breaks: false,
        transformPastedText: true,
        transformCopiedText: true,
      }),
    ],
    editorProps: {
      attributes: {
        class: 'prose prose-sm max-w-none w-full p-3 focus:outline-none prose-headings:font-semibold prose-a:text-m-primary prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-m-text prose-pre:text-white',
      },
    },
    onUpdate: () => {
      emit('update:modelValue', getCurrentValue())
    },
    onFocus: () => {
      isFocused.value = true
    },
    onBlur: () => {
      isFocused.value = false
    },
  })
 })
 onBeforeUnmount(() => {
  document.removeEventListener('mousedown', handleDocumentMousedown)
  document.removeEventListener('keydown', handleDocumentKeydown)
  editor.value?.destroy()
 })
 watch(() => props.modelValue, (incoming) => {
  if (!editor.value) return
  if ((incoming ?? '') === getCurrentValue()) return
  editor.value.commands.setContent(normalizeEditorInput(incoming), { emitUpdate: false })
 })
 watch(() => [props.editable, props.disabled, props.readonly], () => {
  editor.value?.setEditable(props.editable && !props.disabled && !props.readonly)
 })
 </script>
 <style scoped>
 .malio-rich-text :deep(.ProseMirror) {
  outline: none;
  flex: 1 1 auto;
  min-width: 0;
 }
 .malio-rich-text :deep(.ProseMirror > *:first-child) {
  margin-top: 0;
 }
 .malio-rich-text :deep(.ProseMirror > *:last-child) {
  margin-bottom: 0;
 }
 .malio-rich-text :deep(.ProseMirror p.is-editor-empty:first-child::before) {
  content: attr(data-placeholder);
  float: left;
  color: rgb(var(--m-muted));
  pointer-events: none;
  height: 0;
 }
 .malio-rich-text :deep(h2) {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: rgb(var(--m-text));
 }
 .malio-rich-text :deep(h3) {
  margin: 0.65rem 0 0.4rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: rgb(var(--m-text));
 }
 .malio-rich-text :deep(p) {
  margin: 0.45rem 0;
 }
 .malio-rich-text :deep(ul),
 .malio-rich-text :deep(ol) {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
 }
 .malio-rich-text :deep(ul) {
  list-style: disc;
 }
 .malio-rich-text :deep(ol) {
  list-style: decimal;
 }
 .malio-rich-text :deep(blockquote) {
  margin: 0.75rem 0;
  border-left: 3px solid rgb(var(--m-border));
  padding-left: 0.75rem;
  color: rgb(var(--m-muted));
 }
 </style>
@@ -39,7 +39,13 @@
        :width="iconSize"
        :height="iconSize"
        data-test="icon"
-        :class="[iconStateClass, iconPositionClass]"
+        :class="[
        hasError
          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success' : iconColor,
        iconPositionClass,
      ]"
      />
    </div>
@@ -140,7 +146,7 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
  twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
@@ -196,7 +202,7 @@ const iconInputPaddingClass = computed(() => {
 const disabled = computed(() => props.disabled)
 const labelPositionClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'left-11'
+  if (props.iconName && props.iconPosition === 'left') return 'left-8'
  return 'left-3'
 })
@@ -209,15 +215,6 @@ const iconPositionClass = computed(() => {
  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (disabled.value) return props.iconColor
  if (isFocused.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return props.iconColor
 })
 </script>
 <style scoped>
@@ -1,19 +1,21 @@
 <template>
-  <div :class="mergedGroupClass">
+  <div
    class="relative mt-4 w-full"
  >
    <textarea
      :id="inputId"
      :name="name"
      :autocomplete="autocomplete"
-      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
+      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 overflow-auto"
      :class="[
      isFilled ? 'border-black' : 'border-m-muted',
      disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
      hasError
-        ? 'border-m-danger focus:border-m-danger'
+        ? 'border-m-danger focus:border-m-danger focus:pl-[11px]'
        : hasSuccess
-          ? 'border-m-success focus:border-m-success'
+          ? 'border-m-success focus:border-m-success focus:pl-[11px]'
-          : 'focus:border-m-primary',
+          : 'focus:border-m-primary focus:pl-[11px]',
      textInput,
      showCounterComputed ? 'pb-6' : '',
      rounded,
@@ -79,7 +81,6 @@
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
@@ -107,7 +108,6 @@ const props = withDefaults(
    error?: string
    success?: string
    rounded?: string
    groupClass?: string
  }>(),
  {
@@ -133,14 +133,9 @@ const props = withDefaults(
    maxResizeWidth: 640,
    minResizeHeight: 40,
    maxResizeHeight: 320,
    groupClass: '',
  },
 )
 const mergedGroupClass = computed(() =>
  twMerge('relative w-full', props.groupClass),
 )
 const attrs = useAttrs()
 const generatedId = useId()
 const localValue = ref('')
@@ -172,18 +172,4 @@ describe('MalioInputUpload', () => {
    expect(wrapper.get('input[type="file"]').attributes('accept')).toBe('.pdf,.doc')
  })
  it('shows primary icon color on focus', async () => {
    const wrapper = mountComponent()
    await wrapper.get('input[type="text"]').trigger('focus')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
  })
  it('shows black icon color when filled and unfocused', () => {
    const wrapper = mountComponent({modelValue: 'document.pdf'})
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
  })
 })
@@ -43,7 +43,10 @@
        :height="24"
        data-test="icon"
        :class="[
-        iconStateClass,
+        hasError
          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success' : 'text-m-muted',
        'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
      ]"
      />
@@ -126,7 +129,7 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
  twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-pointer',
    hasError.value
@@ -186,15 +189,6 @@ const onFileChange = (event: Event) => {
 }
 const disabled = computed(() => props.disabled)
 const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (disabled.value) return 'text-m-muted'
  if (isFocused.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return 'text-m-muted'
 })
 </script>
 <style scoped>
@@ -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>
@@ -153,33 +153,4 @@ describe('MalioRadioButton', () => {
    expect(wrapper.get('input').classes()).toContain('border-red-500')
    expect(wrapper.get('.radio-text').classes()).toContain('font-bold')
  })
  it('uses muted label color and muted border when unchecked', () => {
    const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'b'})
    expect(wrapper.get('.radio-text').classes()).toContain('text-m-muted')
    expect(wrapper.get('input').classes()).toContain('border-m-muted')
  })
  it('uses black label color when checked', () => {
    const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
    expect(wrapper.get('.radio-text').classes()).toContain('text-black')
  })
  it('has checked:border-black on input', () => {
    const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
    expect(wrapper.get('input').classes()).toContain('checked:border-black')
  })
  it('updates label color when toggled without v-model (uncontrolled)', async () => {
    const wrapper = mountRadioButton({label: 'Option 1', value: 'a'})
    expect(wrapper.get('.radio-text').classes()).toContain('text-m-muted')
    await wrapper.get('input').trigger('change')
    expect(wrapper.get('.radio-text').classes()).toContain('text-black')
  })
 })
@@ -44,7 +44,7 @@
 </template>
 <script setup lang="ts">
-import {computed, ref, useAttrs, useId} from 'vue'
+import {computed, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 defineOptions({name: 'MalioRadioButton', inheritAttrs: false})
@@ -86,13 +86,9 @@ const props = withDefaults(
 const attrs = useAttrs()
 const generatedId = useId()
 const localValue = ref<string | number | boolean | null | undefined>(undefined)
 const inputId = computed(() => props.id?.toString() || `malio-radio-${generatedId}`)
-const isControlled = computed(() => props.modelValue !== undefined)
+const isChecked = computed(() => props.modelValue === props.value)
 const isChecked = computed(() =>
  isControlled.value ? props.modelValue === props.value : localValue.value === props.value,
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const disabled = computed(() => props.disabled)
@@ -121,15 +117,14 @@ const mergedControlClass = computed(() =>
 const mergedInputClass = computed(() =>
  twMerge(
-    'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-m-muted checked:border-black',
+    'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-black',
    props.inputClass,
  ),
 )
 const mergedLabelClass = computed(() =>
  twMerge(
-    'radio-text mt-px cursor-pointer',
+    'radio-text mt-px cursor-pointer text-black',
    isChecked.value ? 'text-black' : 'text-m-muted',
    hasError.value ? 'text-m-danger' : '',
    hasSuccess.value ? 'text-m-success' : '',
    disabled.value ? 'cursor-not-allowed text-black/60' : '',
@@ -165,10 +160,6 @@ const onChange = (event: Event) => {
    return
  }
  if (!isControlled.value) {
    localValue.value = props.value
  }
  emit('update:modelValue', props.value)
 }
 </script>
@@ -16,6 +16,8 @@ type SelectProps = {
  hint?: string
  error?: string
  success?: string
  minWidth?: string
  maxWidth?: string
  textField?: string
  textValue?: string
  textLabel?: string
@@ -86,46 +88,11 @@ describe('MalioSelect', () => {
    })
    await wrapper.get('button').trigger('click')
-    await wrapper.findAll('li')[1].trigger('click')
+    await wrapper.findAll('li')[2].trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
  })
  it('does not render empty option when emptyOptionLabel is empty', async () => {
    const wrapper = mount(SelectForTest, {
      props: {
        modelValue: null,
        options: [
          {label: 'AM', value: 'am'},
          {label: 'PM', value: 'pm'},
        ],
      },
    })
    await wrapper.get('button').trigger('click')
    const items = wrapper.findAll('li[role="option"]')
    expect(items).toHaveLength(2)
    expect(items[0].text()).toBe('AM')
    expect(items[1].text()).toBe('PM')
  })
  it('renders empty option when emptyOptionLabel is provided', async () => {
    const wrapper = mount(SelectForTest, {
      props: {
        modelValue: null,
        options: [{label: 'AM', value: 'am'}],
        emptyOptionLabel: 'Choisir...',
      },
    })
    await wrapper.get('button').trigger('click')
    const items = wrapper.findAll('li[role="option"]')
    expect(items).toHaveLength(2)
    expect(items[0].text()).toBe('Choisir...')
  })
  it('renders the empty option with muted text style', async () => {
    const wrapper = mount(SelectForTest, {
      props: {
@@ -6,26 +6,25 @@
    >
    <button
      :id="buttonId"
      ref="buttonRef"
      type="button"
-      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
+      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-2 focus-visible:border-m-primary"
      :class="[
          hasError
            ? isOpen
              ? openDirection === 'down'
-                ? 'rounded-b-none !border !border-m-danger !border-b-0'
+                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
-                : 'rounded-t-none !border !border-m-danger !border-t-0'
+                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
              : 'border-m-danger'
            : hasSuccess
              ? isOpen
                ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-success !border-b-0'
+                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
-                  : 'rounded-t-none !border !border-m-success !border-t-0'
+                  : 'rounded-t-none !border-2 !border-m-success !border-t-0'
                : 'border-m-success'
              : isOpen
                ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-primary !border-b-0'
+                  ? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border !border-m-primary !border-t-0'
+                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
                : isOptionSelected
                  ? 'border-black'
                  : 'border-m-muted',
@@ -99,11 +98,11 @@
      ref="listRef"
      role="listbox"
      :aria-labelledby="buttonId"
-      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
+      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
      :class="[
        openDirection === 'down'
-          ? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
+          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
-          : 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
+          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
        hasError
          ? 'select-scrollbar-error'
          : hasSuccess
@@ -116,16 +115,8 @@
            : 'border-m-primary'
      ]"
    >
      <li
        v-if="normalizedOptions.length === 0"
        class="px-3 py-2 text-m-muted"
        data-test="no-options-text"
      >
        {{ noOptionsText }}
      </li>
      <li
        v-for="(opt, index) in normalizedOptions"
        v-else
        :id="optionId(index)"
        :key="String(opt.value)"
        role="option"
@@ -180,13 +171,14 @@ const props = withDefaults(defineProps<{
  hint?: string
  error?: string
  success?: string
  minWidth?: string
  maxWidth?: string
  textField?: string
  textValue?: string
  textLabel?: string
  rounded?: string
  disabled?: boolean
  groupClass?: string
  noOptionsText?: string
 }>(), {
  options: () => [],
  emptyOptionLabel: '',
@@ -194,20 +186,20 @@ const props = withDefaults(defineProps<{
  hint: '',
  error: '',
  success: '',
  minWidth: 'w-96',
  maxWidth: '',
  textField: 'text-lg',
  textValue: 'text-lg',
  textLabel: 'text-sm',
  rounded: 'rounded-md',
  disabled: false,
  groupClass: '',
  noOptionsText: 'Aucune option disponible',
 })
 const emit = defineEmits<{
  (e: 'update:modelValue', v: string | number | null): void
 }>()
 const root = ref<HTMLElement | null>(null)
 const buttonRef = ref<HTMLButtonElement | null>(null)
 const isOpen = ref(false)
 const activeIndex = ref(-1)
 const openDirection = ref<'down' | 'up'>('down')
@@ -216,12 +208,12 @@ const buttonId = `custom-select-btn-${uid}`
 const listboxId = `custom-select-listbox-${uid}`
 const listRef = ref<HTMLElement | null>(null)
 const listHeight = ref(0)
-const normalizedOptions = computed<Option[]>(() => {
+const normalizedOptions = computed<Option[]>(() => [
-  if (!props.emptyOptionLabel) return props.options
+  {label: props.emptyOptionLabel, value: null},
-  return [{label: props.emptyOptionLabel, value: null}, ...props.options]
+  ...props.options,
-})
+])
 const mergedGroupClass = computed(() =>
-  twMerge('relative w-full h-12 flex items-center', props.groupClass),
+  twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
@@ -311,7 +303,6 @@ function toggle() {
 function select(value: string | number | null) {
  emit('update:modelValue', value)
  close()
  buttonRef.value?.blur()
 }
 function onClickOutside(e: MouseEvent) {
@@ -329,21 +320,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
  padding: 0 0.25rem;
 }
 .grow-height {
  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
 }
 .grow-height:focus {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
 }
@media (prefers-reduced-motion: reduce) {
  .grow-height {
    transition: none;
  }
 }
 :deep(ul[role="listbox"]) {
  scrollbar-width: auto;
 }
@@ -16,6 +16,8 @@ type SelectCheckboxProps = {
  hint?: string
  error?: string
  success?: string
  minWidth?: string
  maxWidth?: string
  textField?: string
  textValue?: string
  textLabel?: string
@@ -24,7 +26,6 @@ type SelectCheckboxProps = {
  displaySelectAll?: boolean
  selectAllLabel?: string
  disabled?: boolean
  groupClass?: string
 }
 const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
@@ -174,12 +175,4 @@ describe('MalioSelectCheckbox', () => {
    const checkboxes = wrapper.findAll('input[type="checkbox"]')
    expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
  })
  it('applies groupClass via twMerge', () => {
    const wrapper = mount(SelectCheckboxForTest, {
      props: {modelValue: [], options: [], groupClass: 'mt-4'},
    })
    const root = wrapper.find('button').element.parentElement
    expect(root?.className).toContain('mt-4')
  })
 })
@@ -2,31 +2,31 @@
  <div>
    <div
      ref="root"
-      :class="mergedGroupClass"
+      class="relative w-full"
      :class="[minWidth, maxWidth]"
    >
    <button
      :id="buttonId"
      ref="buttonRef"
      type="button"
-      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
+      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-2 focus-visible:border-m-primary"
      :class="[
          hasError
            ? isOpen
              ? openDirection === 'down'
-                ? 'rounded-b-none !border !border-m-danger !border-b-0'
+                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
-                : 'rounded-t-none !border !border-m-danger !border-t-0'
+                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
              : 'border-m-danger'
            : hasSuccess
              ? isOpen
                ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-success !border-b-0'
+                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
-                  : 'rounded-t-none !border !border-m-success !border-t-0'
+                  : 'rounded-t-none !border-2 !border-m-success !border-t-0'
                : 'border-m-success'
              : isOpen
                ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-primary !border-b-0'
+                  ? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border !border-m-primary !border-t-0'
+                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
-                : isOptionSelected
+            : isOptionSelected
                  ? 'border-black'
                  : 'border-m-muted',
          disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
@@ -45,7 +45,7 @@
        v-if="label"
        class="floating-label pointer-events-none absolute left-3 inline-block origin-left transition-transform duration-150 font-medium"
        :class="[
-          isOpen ? 'top-2  z-30' : 'top-2',
+          shouldFloatLabel ? 'top-2 z-30' : 'top-1/2 -translate-y-1/2',
          hasError
            ? 'text-m-danger'
            : hasSuccess
@@ -127,11 +127,11 @@
      ref="listRef"
      role="listbox"
      :aria-labelledby="buttonId"
-      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
+      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
      :class="[
        openDirection === 'down'
-          ? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
+          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
-          : 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
+          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
        hasError
          ? 'select-scrollbar-error'
          : hasSuccess
@@ -145,14 +145,7 @@
      ]"
    >
      <li
-        v-if="normalizedOptions.length === 0"
+        v-if="displaySelectAll"
        class="px-3 py-2 text-m-muted"
        data-test="no-options-text"
      >
        {{ noOptionsText }}
      </li>
      <li
        v-if="displaySelectAll && normalizedOptions.length > 0"
        class="border-b border-m-muted/30 px-3 py-2"
        @mousedown.prevent
      >
@@ -213,7 +206,6 @@
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import Checkbox from '../checkbox/Checkbox.vue'
 defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
@@ -230,6 +222,8 @@ const props = withDefaults(defineProps<{
  hint?: string
  error?: string
  success?: string
  minWidth?: string
  maxWidth?: string
  textField?: string
  textValue?: string
  textLabel?: string
@@ -238,8 +232,6 @@ const props = withDefaults(defineProps<{
  displaySelectAll?: boolean
  selectAllLabel?: string
  disabled?: boolean
  groupClass?: string
  noOptionsText?: string
 }>(), {
  options: () => [],
  emptyOptionLabel: '',
@@ -247,6 +239,8 @@ const props = withDefaults(defineProps<{
  hint: '',
  error: '',
  success: '',
  minWidth: 'w-96',
  maxWidth: '',
  textField: 'text-lg',
  textValue: 'text-lg',
  textLabel: 'text-sm',
@@ -255,15 +249,12 @@ const props = withDefaults(defineProps<{
  displaySelectAll: false,
  selectAllLabel: 'Tout sélectionner',
  disabled: false,
  groupClass: '',
  noOptionsText: 'Aucune option disponible',
 })
 const emit = defineEmits<{
  (e: 'update:modelValue', v: Array<string | number>): void
 }>()
 const root = ref<HTMLElement | null>(null)
 const buttonRef = ref<HTMLButtonElement | null>(null)
 const isOpen = ref(false)
 const activeIndex = ref(-1)
 const openDirection = ref<'down' | 'up'>('down')
@@ -273,9 +264,6 @@ const listboxId = `custom-select-listbox-${uid}`
 const listRef = ref<HTMLElement | null>(null)
 const listHeight = ref(0)
 const normalizedOptions = computed<Option[]>(() => props.options)
 const mergedGroupClass = computed(() =>
  twMerge('relative w-full h-12 flex items-center', props.groupClass),
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isOptionSelected = computed(() =>
@@ -293,10 +281,6 @@ const shouldFloatLabel = computed(() =>
 const selectionSummary = computed(() =>
  `${props.modelValue.length}/${normalizedOptions.value.length}`
 )
 const allSelected = computed(() =>
  normalizedOptions.value.length > 0
  && normalizedOptions.value.every(opt => props.modelValue.includes(opt.value)),
 )
 const describedBy = computed(() =>
  (hasError.value || hasSuccess.value || !!props.hint) ? `${buttonId}-describedby` : undefined,
 )
@@ -336,22 +320,18 @@ function open() {
 }
 const labelTransformStyle = computed(() => {
  // label non flottant
  if (!shouldFloatLabel.value) {
-    return {}
+    return undefined
  }
  // fermé ou ouverture vers le bas : comportement classique
  if (!isOpen.value || openDirection.value === 'down') {
    return {
      transform: 'translateY(-1.15rem) scale(0.9)',
    }
  }
  // ouverture vers le haut : on remonte en fonction de la hauteur de la liste
  const extraOffset = 8 // marge visuelle au-dessus de la liste en px
-  const total = 4 +listHeight.value + extraOffset
+  const total = 4 + listHeight.value + extraOffset
  // 18 ≈ 1.15rem pour garder la même base que votre flottant actuel
  return {
    transform: `translateY(-${total}px) scale(0.9)`,
@@ -371,18 +351,10 @@ function toggle() {
  open()
 }
-function isChecked(value: string | number) {
+const allSelected = computed(() =>
-  return props.modelValue.includes(value)
+  normalizedOptions.value.length > 0
-}
+  && normalizedOptions.value.every(opt => props.modelValue.includes(opt.value)),
-
+)
 function toggleOption(value: string | number) {
  if (isChecked(value)) {
    emit('update:modelValue', props.modelValue.filter(item => item !== value))
  } else {
    emit('update:modelValue', [...props.modelValue, value])
  }
  nextTick(() => buttonRef.value?.focus())
 }
 function toggleAll() {
  if (allSelected.value) {
@@ -390,7 +362,19 @@ function toggleAll() {
  } else {
    emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
  }
-  nextTick(() => buttonRef.value?.focus())
+}
 function isChecked(value: string | number) {
  return props.modelValue.includes(value)
 }
 function toggleOption(value: string | number) {
  if (isChecked(value)) {
    emit('update:modelValue', props.modelValue.filter(item => item !== value))
    return
  }
  emit('update:modelValue', [...props.modelValue, value])
 }
 function onClickOutside(e: MouseEvent) {
@@ -408,21 +392,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
  padding: 0 0.25rem;
 }
 .grow-height {
  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
 }
 .grow-height:focus {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
 }
@media (prefers-reduced-motion: reduce) {
  .grow-height {
    transition: none;
  }
 }
 :deep(ul[role="listbox"]) {
  scrollbar-width: auto;
  scrollbar-gutter: stable;
@@ -8,7 +8,6 @@ type Tab = {
  key: string
  label: string
  icon?: string
  disabled?: boolean
 }
 type TabListProps = {
@@ -135,53 +134,4 @@ describe('MalioTabList', () => {
    expect(icons[0].props('icon')).toBe('mdi:home')
    expect(icons[1].props('icon')).toBe('mdi:account')
  })
  it('sets disabled attribute and aria-disabled on disabled tabs', () => {
    const disabledTabs: Tab[] = [
      {key: 'a', label: 'A'},
      {key: 'b', label: 'B', disabled: true},
    ]
    const wrapper = mountComponent({tabs: disabledTabs})
    const buttons = wrapper.findAll('[role="tab"]')
    expect(buttons[1].attributes('disabled')).toBeDefined()
    expect(buttons[1].attributes('aria-disabled')).toBe('true')
  })
  it('applies cursor-not-allowed on disabled tabs', () => {
    const disabledTabs: Tab[] = [
      {key: 'a', label: 'A'},
      {key: 'b', label: 'B', disabled: true},
    ]
    const wrapper = mountComponent({tabs: disabledTabs})
    const buttons = wrapper.findAll('[role="tab"]')
    expect(buttons[1].classes()).toContain('cursor-not-allowed')
    expect(buttons[1].classes()).not.toContain('hover:text-m-primary/70')
  })
  it('does not emit update:modelValue when clicking a disabled tab', async () => {
    const disabledTabs: Tab[] = [
      {key: 'a', label: 'A'},
      {key: 'b', label: 'B', disabled: true},
    ]
    const wrapper = mountComponent({tabs: disabledTabs, modelValue: 'a'})
    const buttons = wrapper.findAll('[role="tab"]')
    await buttons[1].trigger('click')
    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
  })
  it('does not change active tab in uncontrolled mode when clicking disabled tab', async () => {
    const disabledTabs: Tab[] = [
      {key: 'a', label: 'A'},
      {key: 'b', label: 'B', disabled: true},
    ]
    const wrapper = mountComponent({tabs: disabledTabs})
    const buttons = wrapper.findAll('[role="tab"]')
    await buttons[1].trigger('click')
    expect(buttons[0].attributes('aria-selected')).toBe('true')
    expect(buttons[1].attributes('aria-selected')).toBe('false')
  })
 })
@@ -12,23 +12,19 @@
        type="button"
        :aria-selected="activeTab === tab.key"
        :aria-controls="`${componentId}-panel-${tab.key}`"
        :aria-disabled="!!tab.disabled"
        :tabindex="activeTab === tab.key ? 0 : -1"
        :disabled="tab.disabled"
        :class="[
-          'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
+          'flex items-center gap-[18px] text-[24px] font-medium transition-colors cursor-pointer',
          activeTab === tab.key
-            ? 'cursor-pointer text-m-primary after:content-[\'\'] after:absolute after:-bottom-[3px] after:left-0 after:right-0 after:h-[3px] after:bg-m-primary'
+            ? 'border-b-2 border-m-primary text-m-primary font-bold outline-b'
-            : tab.disabled
+            : 'border-transparent text-m-primary/50 hover:text-m-primary/70',
              ? 'cursor-not-allowed text-m-primary/50'
              : 'cursor-pointer text-m-primary/50 hover:text-m-primary/70',
        ]"
        @click="selectTab(tab.key)"
      >
        <IconifyIcon
          v-if="tab.icon"
          :icon="tab.icon"
-          :width="tab.iconSize ?? 24"
+          :width="20"
        />
        {{ tab.label }}
      </button>
@@ -57,8 +53,6 @@ type Tab = {
  key: string
  label: string
  icon?: string
  iconSize?: string
  disabled?: boolean
 }
 const props = withDefaults(defineProps<{
@@ -85,8 +79,6 @@ const activeTab = computed(() =>
 )
 function selectTab(key: string) {
  const tab = props.tabs.find(t => t.key === key)
  if (tab?.disabled) return
  if (!isControlled.value) {
    localValue.value = key
  }
@@ -197,11 +197,11 @@ const mergedInputClass = (field: 'hours' | 'minutes') =>
    'h-[30px] w-10 border bg-white text-center text-[18px] outline-none rounded-md placeholder:text-m-muted',
    props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
    hasError.value
-      ? 'border-m-danger focus:border-m-danger'
+      ? 'focus:border-2 border-m-danger focus:border-m-danger'
      : hasSuccess.value
-        ? 'border-m-success focus:border-m-success'
+        ? 'focus:border-2 border-m-success focus:border-m-success'
        : activeField.value === field
-          ? 'border-m-primary text-m-primary'
+          ? 'border-2 border-m-primary text-m-primary'
          : 'border-black text-black',
    props.inputClass,
  )
@@ -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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
tristan	e77bf49146	[#MUI-27] Création d'un composant sélection de site (#29 ) Composant MalioSiteSelector : bande horizontale pour choisir un site (usine ou lieu) parmi une liste. Tuiles flex proportionnelles, couleur du site sélectionné partagée par toutes les tuiles (opacité 1 / 0.4). Expose update:modelValue (id) + change (objet site complet) pour faciliter les appels API côté consommateur. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> \| 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: #29 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-04-17 12:28:44 +00:00
tristan	f59f866354	Merge branch 'main' into develop	2026-04-16 09:06:04 +02:00
tristan	660c3787fd	[#MUI-22] Création d'un composant datatable (#27 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [x] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #27 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-04-16 07:00:59 +00:00
tristan	e9741ff38d	Merge branch 'main' into develop	2026-04-07 14:31:29 +02:00
tristan	32608c8f71	fix : suppression du doublon du composant Checkbox	2026-04-07 14:30:06 +02:00
tristan	e1965db04e	Merge remote-tracking branch 'origin/main' into develop	2026-04-07 10:14:51 +02:00
tristan	0ad344bab9	fix : style des inputs + hint/success/error	2026-04-07 10:02:11 +02:00
tristan	96719be78d	Merge branch 'main' into develop # Conflicts: # COMPONENTS.md	2026-03-26 08:57:02 +01:00
tristan	b90baec571	fix : livraison + COMPONENTS.md	2026-03-26 08:54:49 +01:00
tristan	384f86a3b3	Merge remote-tracking branch 'origin/main' into develop # Conflicts: # CHANGELOG.md	2026-03-26 08:39:11 +01:00
tristan	e8ddf4e083	[#MUI-24] Fix composant Select (#22 ) \| 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: #22 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-26 07:33:20 +00:00
tristan	7ee64289a8	fix : drawer animation	2026-03-25 08:38:36 +01:00
tristan	f09f8a91ac	[#MUI-15] Création d'un composant drawer (#21 ) \| 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: #21 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-24 10:49:27 +00:00
tristan	bcadd46ce2	[#MUI-2] Faire un MCP pour la librairie de composant (#20 ) \| 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: #20 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-24 10:31:20 +00:00
tristan	e76337502a	[#MUI-10] Création d'un composant bouton (#19 ) \| 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: #19 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-24 10:12:28 +00:00
tristan	968b7087b5	[#MUI-23] Revoir la config couleur tailwind (#18 ) \| 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: #18 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-24 09:05:23 +00:00
tristan	3deba3f369	[#MUI-20] Développer le composant Menu (#17 ) \| 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: #17 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-23 16:36:16 +00:00
tristan	cf46ab0c85	[#MUI-11] Création d'un composant navigation par onglets (#16 ) \| 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: #16 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-23 07:48:55 +00:00
tristan	09cc3edf6f	feat : reorganisation de la structure projet	2026-03-20 14:22:40 +01:00
tristan	c95a3657c0	[#MUI-14] Création d'un composant bouton icône (#15 ) \| 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: #15 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-20 11:00:38 +00:00
tristan	9843f4d032	feat : ajout de state dans les histoires des composants	2026-03-19 17:45:03 +01:00
tristan	9d9b9c9dc4	feat : ajout d'un sélecteur "Tout cocher" dans le composant SelectCheckbox	2026-03-19 17:30:52 +01:00
tristan	187ef52865	[#MUI-9] Ajout composant upload (#14 ) \| 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: #14 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-19 09:51:37 +00:00
tristan	9925f1ced4	[#MUI-8] Ajout composant mot de passe (#13 ) \| 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: #13 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-19 09:43:55 +00:00
tristan	ded414ba1a	[#MUI12] Correction composant Nombre et Taux horaire (#12 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #12 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-19 08:22:37 +00:00
kevin	11d60e687b	[#366 ] Création d'un composant de type Select checkbox (#11 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #366 \| Création d'un composant de type Select checkbox \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #11 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-17 12:28:57 +00:00
kevin	d3038994c3	[#407 ] Création d'un composant de type time (#10 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #407 \| Création d'un composant de type time \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #10 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-17 12:28:33 +00:00
kevin	0d350e12c6	Merge pull request '[#365 ] Création d'un composant de type Number' (#9 ) from feat/365-creation-composant-number into develop Reviewed-on: #9	2026-03-11 15:16:18 +00:00
tristan	c6acaace27	Merge remote-tracking branch 'origin/develop' into develop	2026-03-08 20:10:32 +01:00
tristan	927c7c3c70	Merge remote-tracking branch 'origin/main' into develop	2026-03-08 20:10:02 +01:00
kevin	bf0aa92497	[#363 ] Création d'un composant de type checkbox (#5 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #363 \| Création d'un composant de type checkbox \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: tristan <tristan@yuno.malio.fr> Reviewed-on: #5 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-08 19:07:53 +00:00
kevin	88dd76a0e4	[#364 ] Création d'un composant de type radio (#6 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #364 \| Création d'un composant de type radio \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #6 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-08 18:59:50 +00:00
kevin	cc04114f89	feat : ajout du composant input number	2026-03-05 09:38:56 +01:00
kevin	f456ea4ddf	feat : ajout du composant input number	2026-03-04 13:15:43 +01:00
kevin	77364daa67	[#362 ] Création d'un composant de type Montant (#4 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #362 \| Création d'un composant de type Montant \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #4 Reviewed-by: Autin <tristan@yuno.malio.fr> Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-03 10:42:39 +00:00
kevin	1ab7b2427a	[#337 ] Création d'un composant Select (#3 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #337 \| Création d'un composant Select \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [ ] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: tristan <tristan@yuno.malio.fr> Reviewed-on: #3 Reviewed-by: Autin <tristan@yuno.malio.fr> Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-02 13:24:58 +00:00
tristan	82ecc9cfe2	feat : ajout config vitest/make/pre-commit/commit-msg + un exemple de test vitest	2026-02-23 11:29:16 +01:00
tristan	65d9060e26	feat : ajout du template de MR + CHANGELOG.md	2026-02-23 11:11:31 +01:00
tristan	ec4c157226	fix: readme.md	2026-02-19 11:18:36 +01:00