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

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

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

.playground/layouts/default.vue

@@ -0,0 +1,24 @@
+<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>

.playground/pages/composant/drawer/drawer.vue

@@ -1,48 +1,88 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const drawerDefault = ref(false)
-const drawerNoClose = ref(false)
-const drawerCustomWidth = ref(false)
-const drawerWithForm = ref(false)
+const drawerRight = ref(false)
+const drawerLeft = ref(false)
+const drawerForm = ref(false)
+const drawerFixedFooter = 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 simple</h2>
-      <MalioButton label="Ouvrir le drawer" @click="drawerDefault = true" />
-      <MalioDrawer v-model="drawerDefault" title="Titre du drawer">
-        <p class="text-m-text">Contenu du drawer. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <h2 class="mb-6 text-xl font-bold">Drawer droite (défaut)</h2>
+      <MalioButton label="Ouvrir à droite" @click="drawerRight = true" />
+      <MalioDrawer v-model="drawerRight">
+        <template #header>
+          <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">Sans bouton fermer</h2>
-      <MalioButton label="Ouvrir le drawer" variant="secondary" @click="drawerNoClose = true" />
-      <MalioDrawer v-model="drawerNoClose" title="Sans croix" :show-close="false">
-        <p class="text-m-text">Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
+      <h2 class="mb-6 text-xl font-bold">Drawer gauche</h2>
+      <MalioButton label="Ouvrir à gauche" variant="secondary" @click="drawerLeft = true" />
+      <MalioDrawer v-model="drawerLeft" side="left">
+        <template #header>
+          <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">Largeur personnalisée</h2>
-      <MalioButton label="Ouvrir le drawer large" variant="tertiary" @click="drawerCustomWidth = true" />
-      <MalioDrawer v-model="drawerCustomWidth" title="Drawer large" drawer-class="max-w-2xl">
-        <p class="text-m-text">Ce drawer utilise une largeur personnalisée via drawerClass.</p>
-      </MalioDrawer>
-    </div>
-
-    <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">
+      <h2 class="mb-6 text-xl font-bold">Avec footer collant</h2>
+      <MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="drawerForm = true" />
+      <MalioDrawer v-model="drawerForm" drawer-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" />
-          <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>

.playground/pages/composant/form/client.vue

@@ -0,0 +1,317 @@
+<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"/>
+              <MalioInputText 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'
+
+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 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>

.playground/pages/composant/input/inputAutocomplete.vue

@@ -0,0 +1,180 @@
+<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>

.playground/pages/composant/input/inputEmail.vue

@@ -0,0 +1,106 @@
+<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>

.playground/pages/composant/input/inputPhone.vue

@@ -0,0 +1,141 @@
+<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>

.playground/pages/index.vue

@@ -1,181 +1,10 @@
 <template>
-  <div class="flex min-h-screen">
-    <aside class="w-72 bg-m-bg p-6 text-white">
-      <button
-        type="button"
-        class="text-xl text-black font-semibold"
-        @click="clearSelection"
-      >
-        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 class="mx-auto max-w-2xl py-16 text-center">
+    <h1 class="text-3xl font-bold text-m-text">
+      Playground @malio/layer-ui
+    </h1>
+    <p class="mt-4 text-m-muted">
+      Sélectionne un composant dans la barre latérale pour afficher sa page de démonstration.
+    </p>
   </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>

.playground/playground.nav.ts

@@ -0,0 +1,63 @@
+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: '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: 'Onglets', to: '/composant/tab/tabList'},
+    ],
+  },
+  {
+    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'},
+    ],
+  },
+]

.releaserc.json

@@ -2,8 +2,26 @@
   "branches": ["main", "master"],
   "repositoryUrl": "https://gitea.malio.fr/MALIO-DEV/malio-layer-ui.git",
   "plugins": [
-    "@semantic-release/commit-analyzer",
-    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "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"
   ]
 }

CHANGELOG.md

@@ -27,8 +27,13 @@ Liste des évolutions de la librairie Malio layer UI
 * [#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
 
 ### 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)

COMPONENTS.md

@@ -66,6 +66,160 @@ 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).
@@ -122,6 +276,7 @@ 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)`
 
@@ -134,7 +289,9 @@ Zone de texte multiligne avec compteur et redimensionnement.
 
 ## MalioInputRichText
 
-Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**. Toolbar avec gras, italique, barré, titres H2/H3, listes, citation, code, code-block, lien, undo/redo. Sortie en markdown (par défaut) ou HTML.
+É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 |
 |------|------|--------|-------------|
@@ -149,7 +306,7 @@ Zone de texte multiligne avec compteur et redimensionnement.
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
-| `outputFormat` | `'markdown' \| 'html'` | `'markdown'` | Format émis dans `update:modelValue` |
+| `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) |
@@ -159,7 +316,7 @@ Zone de texte multiligne avec compteur et redimensionnement.
 ```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" output-format="html" min-height="240px" />
+<MalioInputRichText v-model="article" label="Article" min-height="240px" />
 <MalioInputRichText :model-value="content" :editable="false" />
 ```
 
@@ -201,12 +358,11 @@ 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)
@@ -232,6 +388,7 @@ 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)[])`
 
@@ -362,18 +519,42 @@ Navigation par onglets avec contenu dynamique.
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `modelValue` | `string` | `undefined` | Onglet actif (v-model) |
-| `tabs` | `{ key: string, label: string, icon?: string }[]` | **requis** | Liste des onglets |
+| `tabs` | `Tab[]` | **requis** | Liste des onglets (voir type ci-dessous) |
 
-**Events :** `update:modelValue(value: string)`
+Type `Tab` :
+
+| 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="[{ key: 'infos', label: 'Informations' }, { key: 'docs', label: 'Documents', icon: 'mdi:file' }]">
+<MalioTabList v-model="activeTab" :tabs="tabs">
   <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 },
+])
+```
+
 ---
 
 ## MalioSidebar
@@ -403,28 +584,59 @@ Barre latérale de navigation rétractable.
 
 ## MalioDrawer
 
-Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transparent.
+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.
 
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
-| `title` | `string` | `''` | Titre affiché dans le header |
+| `side` | `'right' \| 'left'` | `'right'` | Côté d'apparition |
 | `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
-| `drawerClass` | `string` | `''` | Classes CSS panneau (twMerge) |
+| `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 |
+| `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)`
-**Slots :** `default` (contenu du drawer)
+**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` — rendu dans la zone scrollable, sans positionnement imposé : le consommateur choisit (`sticky bottom-0`, `fixed`, ou rien).
 
 ```vue
-<MalioDrawer v-model="isOpen" title="Détails">
+<MalioDrawer v-model="isOpen">
+  <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">
-  <p>Fermeture uniquement via backdrop</p>
+
+<!-- Côté gauche, largeur custom -->
+<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">
-  <p>Drawer plus large</p>
+
+<!-- Footer collé en bas (le consommateur applique le positionnement) -->
+<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>
 ```
 

app/components/malio/checkbox/Checkbox.test.ts

@@ -114,7 +114,7 @@ describe('MalioCheckbox', () => {
     })
 
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
     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-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
   })
 
   it('shows success styles and message when there is no error', () => {
@@ -139,4 +139,26 @@ 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')
+  })
 })

app/components/malio/checkbox/Checkbox.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, useAttrs, useId} from 'vue'
+import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 
 defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
@@ -80,9 +80,11 @@ const props = withDefaults(
 
 const attrs = useAttrs()
 const generatedId = useId()
+const localChecked = ref(false)
 
 const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
-const isChecked = computed(() => !!props.modelValue)
+const isControlled = computed(() => props.modelValue !== undefined)
+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)
@@ -101,16 +103,17 @@ const mergedGroupClass = computed(() =>
 
 const mergedInputClass = computed(() =>
   twMerge(
-    'inp-cbx peer',
+    'inp-cbx peer ',
     props.inputClass,
   ),
 )
 
 const mergedLabelClass = computed(() =>
   twMerge(
-    'cbx text-black',
+    'cbx text-lg',
+    isChecked.value ? 'text-black' : 'text-m-muted',
     disabled.value ? 'cursor-not-allowed text-black/60' : '',
-    hasError.value ? 'text-m-error' : '',
+    hasError.value ? 'text-m-danger' : '',
     hasSuccess.value ? 'text-m-success' : '',
     props.labelClass,
   ),
@@ -120,7 +123,7 @@ const mergedMessageClass = computed(() =>
   twMerge(
     'text-xs',
     hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : 'text-m-muted',
@@ -139,6 +142,10 @@ const onChange = (event: Event) => {
     return
   }
 
+  if (!isControlled.value) {
+    localChecked.value = target.checked
+  }
+
   emit('update:modelValue', target.checked)
 }
 </script>
@@ -161,10 +168,14 @@ const onChange = (event: Event) => {
   height: 18px;
   flex: 0 0 18px;
   transform: scale(1);
-  border: 2px solid rgb(0, 0, 0);
+  border: 2px solid rgb(var(--m-muted) / 1);
   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;
@@ -200,14 +211,14 @@ const onChange = (event: Event) => {
   stroke-dashoffset: 0;
 }
 
-.inp-cbx + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-error) / 1);
+.inp-cbx + .cbx.text-m-danger span:first-child {
+  border-color: rgb(var(--m-danger) / 1);
 }
-.cbx.text-m-error span:first-child svg {
-  stroke: rgb(var(--m-error) / 1);
+.cbx.text-m-danger span:first-child svg {
+  stroke: rgb(var(--m-danger) / 1);
 }
-.inp-cbx:checked + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-error) / 1);
+.inp-cbx:checked + .cbx.text-m-danger span:first-child {
+  border-color: rgb(var(--m-danger) / 1);
 }
 
 .inp-cbx + .cbx.text-m-success span:first-child {

app/components/malio/drawer/Drawer.test.ts

@@ -1,15 +1,22 @@
-import { describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
+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 Drawer from './Drawer.vue'
 
 type DrawerProps = {
-  modelValue?: boolean
-  title?: string
-  showClose?: boolean
   id?: string
+  modelValue?: boolean
+  side?: 'right' | 'left'
+  showClose?: boolean
+  dismissable?: boolean
+  closeOnEscape?: boolean
+  ariaLabel?: string
   drawerClass?: string
+  overlayClass?: string
+  headerClass?: string
+  bodyClass?: string
+  footerClass?: string
 }
 
 const DrawerForTest = Drawer as DefineComponent<DrawerProps>
@@ -18,64 +25,38 @@ 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 when modelValue is true', () => {
+  it('renders the panel when modelValue is true', () => {
     const wrapper = mountComponent({ modelValue: true })
     expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
   })
 
-  it('renders the title', () => {
-    const wrapper = mountComponent({ modelValue: true, title: 'Mon tiroir' })
-    expect(wrapper.find('h2').text()).toBe('Mon tiroir')
-  })
-
-  it('renders slot content', () => {
+  it('renders default slot in the body', () => {
     const wrapper = mountComponent(
       { modelValue: true },
-      { default: '<p data-test="content">Contenu du drawer</p>' },
+      { default: '<p data-test="content">Contenu</p>' },
     )
-    expect(wrapper.find('[data-test="content"]').text()).toBe('Contenu du drawer')
+    expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
   })
 
-  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('works in uncontrolled mode (defaults closed)', () => {
+    const wrapper = mountComponent()
+    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
   })
 
   it('uses custom id when provided', () => {
@@ -85,38 +66,276 @@ describe('MalioDrawer', () => {
 
   it('generates an id when not provided', () => {
     const wrapper = mountComponent({ modelValue: true })
-    const id = wrapper.find('.fixed').attributes('id')
-    expect(id).toMatch(/^malio-drawer-/)
+    expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-drawer-/)
   })
 
-  it('has role="dialog" and aria-modal on panel', () => {
+  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('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-lg' })
-    const panel = wrapper.find('[data-test="panel"]')
-    expect(panel.classes()).toContain('max-w-lg')
+    const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-2xl' })
+    expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
   })
 
-  it('works in uncontrolled mode', () => {
-    const wrapper = mountComponent()
-    // Without modelValue, defaults to closed
-    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
+  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-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('')
+  })
 })

app/components/malio/drawer/Drawer.vue

@@ -1,59 +1,76 @@
 <template>
   <Teleport to="body">
     <Transition
-      name="drawer"
+      :name="`drawer-${side}`"
       appear
       @after-leave="isRendered = false"
     >
       <div
         v-if="isRendered && isOpen"
         :id="componentId"
-        class="fixed inset-0 z-50 flex justify-end"
+        class="fixed inset-0 z-50 flex"
+        :class="side === 'right' ? 'justify-end' : 'justify-start'"
         v-bind="attrs"
       >
         <div
-          class="absolute inset-0 bg-black/40"
+          :class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
           data-test="backdrop"
-          @click="close"
+          @click="onBackdropClick"
         />
 
         <div
+          ref="panelRef"
           :class="twMerge(
-            'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
+            'relative z-50 flex h-full w-full max-w-md flex-col bg-white',
             drawerClass,
           )"
           role="dialog"
-          :aria-modal="true"
-          :aria-labelledby="titleId"
+          aria-modal="true"
+          :aria-labelledby="hasHeader ? headerId : undefined"
+          :aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
+          tabindex="-1"
           data-test="panel"
+          @keydown="onKeydown"
         >
-          <div class="flex items-center justify-between px-5 pb-8 pt-8">
-            <h2
-              :id="titleId"
-              class="text-[32px] font-semibold text-m-primary"
+          <div
+            v-if="hasHeader || showClose"
+            :class="twMerge('flex 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"
             >
-              {{ title }}
-            </h2>
+              <slot name="header" />
+            </div>
             <button
               v-if="showClose"
               type="button"
               aria-label="Fermer"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
+              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:close"
-                :width="24"
-                :height="24"
+                icon="mdi:cancel-bold"
+                :width="16"
+                :height="16"
               />
             </button>
           </div>
-
           <div
-            class="flex-1 overflow-y-auto px-5"
+            :class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
+            data-test="body"
           >
             <slot />
+            <div
+              v-if="$slots.footer"
+              :class="footerClass"
+              data-test="footer"
+            >
+              <slot name="footer" />
+            </div>
           </div>
         </div>
       </div>
@@ -62,7 +79,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useAttrs, useId, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useAttrs,
+  useId,
+  useSlots,
+  watch,
+} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { twMerge } from 'tailwind-merge'
 
@@ -72,68 +99,195 @@ const props = withDefaults(
   defineProps<{
     id?: string
     modelValue?: boolean
-    title?: string
+    side?: 'right' | 'left'
     showClose?: boolean
+    dismissable?: boolean
+    closeOnEscape?: boolean
+    ariaLabel?: string
     drawerClass?: string
+    overlayClass?: string
+    headerClass?: string
+    bodyClass?: string
+    footerClass?: string
   }>(),
   {
     id: '',
     modelValue: undefined,
-    title: '',
+    side: 'right',
     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) isRendered.value = true
+  if (val) {
+    isRendered.value = true
+    onOpen()
+  }
+  else {
+    onClose()
+  }
 })
 
-function close() {
-  if (!isControlled.value) {
-    localValue.value = false
+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
   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-enter-active,
-.drawer-leave-active {
+.drawer-right-enter-active,
+.drawer-right-leave-active,
+.drawer-left-enter-active,
+.drawer-left-leave-active {
   transition: opacity 0.2s ease;
 }
 
-.drawer-enter-active > div:last-child,
-.drawer-leave-active > div:last-child {
+.drawer-right-enter-active > div:last-child,
+.drawer-right-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-enter-from,
-.drawer-leave-to {
+.drawer-right-enter-from,
+.drawer-right-leave-to,
+.drawer-left-enter-from,
+.drawer-left-leave-to {
   opacity: 0;
 }
 
-.drawer-enter-from > div:last-child,
-.drawer-leave-to > div:last-child {
+.drawer-right-enter-from > div:last-child,
+.drawer-right-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>

app/components/malio/input/Input.test.ts

@@ -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-8')
+    expect(wrapper.get('label').classes()).toContain('left-11')
   })
 
   it('passes icon size props to icon component', () => {
@@ -294,4 +294,18 @@ 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')
+  })
 })

app/components/malio/input/InputAmount.test.ts

@@ -158,6 +158,20 @@ 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-8')
+    expect(wrapper.get('label').classes()).toContain('left-11')
+  })
+
+  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')
   })
 })

app/components/malio/input/InputAmount.vue

@@ -39,13 +39,7 @@
         :width="iconSize"
         :height="iconSize"
         data-test="icon"
-        :class="[
-        hasError
-          ? 'text-m-danger'
-          : hasSuccess
-            ? 'text-m-success' : iconColor,
-        iconPositionClass,
-      ]"
+        :class="[iconStateClass, iconPositionClass]"
       />
 
     </div>
@@ -141,7 +135,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 focus:border-2 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 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
@@ -222,7 +216,7 @@ const iconInputPaddingClass = computed(() => {
 const disabled = computed(() => props.disabled)
 
 const labelPositionClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'left-8'
+  if (props.iconName && props.iconPosition === 'left') return 'left-11'
   return 'left-3'
 })
 
@@ -235,6 +229,15 @@ 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>

app/components/malio/input/InputAutocomplete.test.ts

@@ -0,0 +1,430 @@
+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')
+  })
+})

app/components/malio/input/InputAutocomplete.vue

@@ -0,0 +1,513 @@
+<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>

app/components/malio/input/InputEmail.test.ts

@@ -0,0 +1,228 @@
+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')
+  })
+})

app/components/malio/input/InputEmail.vue

@@ -0,0 +1,229 @@
+<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>

app/components/malio/input/InputPassword.test.ts

@@ -171,4 +171,18 @@ 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')
+  })
 })

app/components/malio/input/InputPassword.vue

@@ -39,10 +39,7 @@
         :height="24"
         data-test="icon"
         :class="[
-        hasError
-          ? 'text-m-danger'
-          : hasSuccess
-            ? 'text-m-success' : 'text-m-muted',
+        iconStateClass,
         'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
       ]"
         @click="toggleVisibility"
@@ -140,7 +137,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 focus:border-2 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 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
@@ -189,6 +186,15 @@ 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>

app/components/malio/input/InputPhone.test.ts

@@ -0,0 +1,308 @@
+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()
+  })
+})

app/components/malio/input/InputPhone.vue

@@ -0,0 +1,274 @@
+<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>

app/components/malio/input/InputRichText.test.ts

@@ -61,10 +61,42 @@ describe('MalioInputRichText', () => {
     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**'})
 

app/components/malio/input/InputRichText.vue

@@ -46,6 +46,110 @@
 
         <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"
@@ -97,11 +201,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, shallowRef, useId, watch } from 'vue'
+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'
 
@@ -139,7 +246,7 @@ const props = withDefaults(
     hint: '',
     error: '',
     success: '',
-    outputFormat: 'markdown',
+    outputFormat: 'html',
     groupClass: '',
     labelClass: '',
     editorClass: '',
@@ -207,9 +314,18 @@ const mergedReadonlyClass = computed(() =>
 
 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
@@ -222,6 +338,78 @@ const promptForLink = () => {
   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 [
@@ -242,13 +430,34 @@ const toolbarButtons = computed(() => {
 const getCurrentValue = (): string => {
   if (!editor.value) return ''
   if (props.outputFormat === 'html') return editor.value.getHTML()
-  const storage = editor.value.storage.markdown as { getMarkdown: () => string } | undefined
-  return storage ? storage.getMarkdown() : 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: props.modelValue ?? '',
+    content: normalizeEditorInput(props.modelValue),
     editable: props.editable && !props.disabled && !props.readonly,
     extensions: [
       StarterKit.configure({
@@ -259,11 +468,14 @@ onMounted(() => {
           HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
         },
       }),
+      TextStyle,
+      Color.configure({ types: ['textStyle'] }),
+      Highlight.configure({ multicolor: true }),
       Placeholder.configure({
         placeholder: props.placeholder,
       }),
       Markdown.configure({
-        html: false,
+        html: true,
         tightLists: true,
         bulletListMarker: '-',
         linkify: true,
@@ -290,20 +502,22 @@ onMounted(() => {
 })
 
 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(incoming ?? '', { emitUpdate: false })
+  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;
@@ -323,4 +537,38 @@ watch(() => [props.editable, props.disabled, props.readonly], () => {
   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>

app/components/malio/input/InputText.vue

@@ -39,13 +39,7 @@
         :width="iconSize"
         :height="iconSize"
         data-test="icon"
-        :class="[
-        hasError
-          ? 'text-m-danger'
-          : hasSuccess
-            ? 'text-m-success' : iconColor,
-        iconPositionClass,
-      ]"
+        :class="[iconStateClass, iconPositionClass]"
       />
 
     </div>
@@ -146,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 focus:border-2 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 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
@@ -202,7 +196,7 @@ const iconInputPaddingClass = computed(() => {
 const disabled = computed(() => props.disabled)
 
 const labelPositionClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'left-8'
+  if (props.iconName && props.iconPosition === 'left') return 'left-11'
   return 'left-3'
 })
 
@@ -215,6 +209,15 @@ 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>

app/components/malio/input/InputTextArea.vue

@@ -1,21 +1,19 @@
 <template>
-  <div
-    class="relative w-full"
-  >
+  <div :class="mergedGroupClass">
     <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 focus:border-2 overflow-auto"
+      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent 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 focus:pl-[11px]'
+        ? 'border-m-danger focus:border-m-danger'
         : hasSuccess
-          ? 'border-m-success focus:border-m-success focus:pl-[11px]'
-          : 'focus:border-m-primary focus:pl-[11px]',
+          ? 'border-m-success focus:border-m-success'
+          : 'focus:border-m-primary',
       textInput,
       showCounterComputed ? 'pb-6' : '',
       rounded,
@@ -81,6 +79,7 @@
 
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
+import {twMerge} from 'tailwind-merge'
 
 defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
 
@@ -108,6 +107,7 @@ const props = withDefaults(
     error?: string
     success?: string
     rounded?: string
+    groupClass?: string
 
   }>(),
   {
@@ -133,9 +133,14 @@ 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('')

app/components/malio/input/InputUpload.test.ts

@@ -172,4 +172,18 @@ 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')
+  })
 })

app/components/malio/input/InputUpload.vue

@@ -43,10 +43,7 @@
         :height="24"
         data-test="icon"
         :class="[
-        hasError
-          ? 'text-m-danger'
-          : hasSuccess
-            ? 'text-m-success' : 'text-m-muted',
+        iconStateClass,
         'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
       ]"
       />
@@ -129,7 +126,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 focus:border-2 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 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
@@ -189,6 +186,15 @@ 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>

app/components/malio/radio/RadioButton.test.ts

@@ -153,4 +153,33 @@ 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')
+  })
 })

app/components/malio/radio/RadioButton.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, useAttrs, useId} from 'vue'
+import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 
 defineOptions({name: 'MalioRadioButton', inheritAttrs: false})
@@ -86,9 +86,13 @@ 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 isChecked = computed(() => props.modelValue === props.value)
+const isControlled = computed(() => props.modelValue !== undefined)
+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)
@@ -117,14 +121,15 @@ const mergedControlClass = computed(() =>
 
 const mergedInputClass = computed(() =>
   twMerge(
-    'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-black',
+    'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-m-muted checked:border-black',
     props.inputClass,
   ),
 )
 
 const mergedLabelClass = computed(() =>
   twMerge(
-    'radio-text mt-px cursor-pointer text-black',
+    'radio-text mt-px cursor-pointer',
+    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' : '',
@@ -160,6 +165,10 @@ const onChange = (event: Event) => {
     return
   }
 
+  if (!isControlled.value) {
+    localValue.value = props.value
+  }
+
   emit('update:modelValue', props.value)
 }
 </script>

app/components/malio/select/Select.test.ts

@@ -16,8 +16,6 @@ type SelectProps = {
   hint?: string
   error?: string
   success?: string
-  minWidth?: string
-  maxWidth?: string
   textField?: string
   textValue?: string
   textLabel?: string

app/components/malio/select/Select.vue

@@ -6,25 +6,26 @@
     >
     <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-2 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-m-primary"
       :class="[
           hasError
             ? isOpen
               ? openDirection === 'down'
-                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
-                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
+                ? 'rounded-b-none !border !border-m-danger !border-b-0'
+                : 'rounded-t-none !border !border-m-danger !border-t-0'
               : 'border-m-danger'
             : hasSuccess
               ? isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
-                  : 'rounded-t-none !border-2 !border-m-success !border-t-0'
+                  ? 'rounded-b-none !border !border-m-success !border-b-0'
+                  : 'rounded-t-none !border !border-m-success !border-t-0'
                 : 'border-m-success'
               : isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
+                  ? 'rounded-b-none !border !border-m-primary !border-b-0'
+                  : 'rounded-t-none !border !border-m-primary !border-t-0'
                 : isOptionSelected
                   ? 'border-black'
                   : 'border-m-muted',
@@ -98,11 +99,11 @@
       ref="listRef"
       role="listbox"
       :aria-labelledby="buttonId"
-      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
+      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
       :class="[
         openDirection === 'down'
-          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
-          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+          ? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
+          : 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
         hasError
           ? 'select-scrollbar-error'
           : hasSuccess
@@ -115,8 +116,16 @@
             : '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"
@@ -171,14 +180,13 @@ 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: '',
@@ -186,20 +194,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')
@@ -213,7 +221,7 @@ const normalizedOptions = computed<Option[]>(() => {
   return [{label: props.emptyOptionLabel, value: null}, ...props.options]
 })
 const mergedGroupClass = computed(() =>
-  twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
+  twMerge('relative w-full h-12 flex items-center', props.groupClass),
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
@@ -303,6 +311,7 @@ function toggle() {
 function select(value: string | number | null) {
   emit('update:modelValue', value)
   close()
+  buttonRef.value?.blur()
 }
 
 function onClickOutside(e: MouseEvent) {
@@ -320,6 +329,21 @@ 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;
 }

app/components/malio/select/SelectCheckbox.test.ts

@@ -16,8 +16,6 @@ type SelectCheckboxProps = {
   hint?: string
   error?: string
   success?: string
-  minWidth?: string
-  maxWidth?: string
   textField?: string
   textValue?: string
   textLabel?: string
@@ -177,15 +175,6 @@ describe('MalioSelectCheckbox', () => {
     expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
   })
 
-  it('applies minWidth via twMerge so it overrides w-full (parity with MalioSelect)', () => {
-    const wrapper = mount(SelectCheckboxForTest, {
-      props: {modelValue: [], options: [], minWidth: 'w-80'},
-    })
-    const root = wrapper.find('button').element.parentElement
-    expect(root?.className).toContain('w-80')
-    expect(root?.className).not.toContain('w-full')
-  })
-
   it('applies groupClass via twMerge', () => {
     const wrapper = mount(SelectCheckboxForTest, {
       props: {modelValue: [], options: [], groupClass: 'mt-4'},

app/components/malio/select/SelectCheckbox.vue

@@ -6,25 +6,26 @@
     >
     <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-2 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-m-primary"
       :class="[
           hasError
             ? isOpen
               ? openDirection === 'down'
-                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
-                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
+                ? 'rounded-b-none !border !border-m-danger !border-b-0'
+                : 'rounded-t-none !border !border-m-danger !border-t-0'
               : 'border-m-danger'
             : hasSuccess
               ? isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
-                  : 'rounded-t-none !border-2 !border-m-success !border-t-0'
+                  ? 'rounded-b-none !border !border-m-success !border-b-0'
+                  : 'rounded-t-none !border !border-m-success !border-t-0'
                 : 'border-m-success'
               : isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
+                  ? 'rounded-b-none !border !border-m-primary !border-b-0'
+                  : 'rounded-t-none !border !border-m-primary !border-t-0'
                 : isOptionSelected
                   ? 'border-black'
                   : 'border-m-muted',
@@ -126,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-2 bg-white"
+      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
       :class="[
         openDirection === 'down'
-          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
-          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+          ? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
+          : 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
         hasError
           ? 'select-scrollbar-error'
           : hasSuccess
@@ -144,7 +145,14 @@
       ]"
     >
       <li
-        v-if="displaySelectAll"
+        v-if="normalizedOptions.length === 0"
+        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
       >
@@ -222,8 +230,6 @@ const props = withDefaults(defineProps<{
   hint?: string
   error?: string
   success?: string
-  minWidth?: string
-  maxWidth?: string
   textField?: string
   textValue?: string
   textLabel?: string
@@ -233,6 +239,7 @@ const props = withDefaults(defineProps<{
   selectAllLabel?: string
   disabled?: boolean
   groupClass?: string
+  noOptionsText?: string
 }>(), {
   options: () => [],
   emptyOptionLabel: '',
@@ -240,8 +247,6 @@ const props = withDefaults(defineProps<{
   hint: '',
   error: '',
   success: '',
-  minWidth: 'w-96',
-  maxWidth: '',
   textField: 'text-lg',
   textValue: 'text-lg',
   textLabel: 'text-sm',
@@ -251,12 +256,14 @@ const props = withDefaults(defineProps<{
   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')
@@ -267,7 +274,7 @@ const listRef = ref<HTMLElement | null>(null)
 const listHeight = ref(0)
 const normalizedOptions = computed<Option[]>(() => props.options)
 const mergedGroupClass = computed(() =>
-  twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
+  twMerge('relative w-full h-12 flex items-center', props.groupClass),
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
@@ -371,9 +378,10 @@ function isChecked(value: string | number) {
 function toggleOption(value: string | number) {
   if (isChecked(value)) {
     emit('update:modelValue', props.modelValue.filter(item => item !== value))
-    return
+  } else {
+    emit('update:modelValue', [...props.modelValue, value])
   }
-  emit('update:modelValue', [...props.modelValue, value])
+  nextTick(() => buttonRef.value?.focus())
 }
 
 function toggleAll() {
@@ -382,6 +390,7 @@ function toggleAll() {
   } else {
     emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
   }
+  nextTick(() => buttonRef.value?.focus())
 }
 
 function onClickOutside(e: MouseEvent) {
@@ -399,6 +408,21 @@ 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;

app/components/malio/tab/TabList.test.ts

@@ -8,6 +8,7 @@ type Tab = {
   key: string
   label: string
   icon?: string
+  disabled?: boolean
 }
 
 type TabListProps = {
@@ -134,4 +135,53 @@ 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')
+  })
 })

app/components/malio/tab/TabList.vue

@@ -12,19 +12,23 @@
         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="[
-          'flex items-center gap-[18px] text-[24px] font-medium transition-colors cursor-pointer',
+          'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
           activeTab === tab.key
-            ? 'border-b-2 border-m-primary text-m-primary font-bold outline-b'
-            : 'border-transparent text-m-primary/50 hover:text-m-primary/70',
+            ? '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'
+            : tab.disabled
+              ? '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="20"
+          :width="tab.iconSize ?? 24"
         />
         {{ tab.label }}
       </button>
@@ -53,6 +57,8 @@ type Tab = {
   key: string
   label: string
   icon?: string
+  iconSize?: string
+  disabled?: boolean
 }
 
 const props = withDefaults(defineProps<{
@@ -79,6 +85,8 @@ 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
   }

app/components/malio/time/Time.vue

@@ -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
-      ? 'focus:border-2 border-m-danger focus:border-m-danger'
+      ? 'border-m-danger focus:border-m-danger'
       : hasSuccess.value
-        ? 'focus:border-2 border-m-success focus:border-m-success'
+        ? 'border-m-success focus:border-m-success'
         : activeField.value === field
-          ? 'border-2 border-m-primary text-m-primary'
+          ? 'border-m-primary text-m-primary'
           : 'border-black text-black',
     props.inputClass,
   )

app/story/drawer/drawer.story.vue

@@ -1,20 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineOptions({ name: 'DrawerStory' })
+
+const showRight = ref(false)
+const showLeft = ref(false)
+const showForm = ref(false)
+const showNoDismiss = ref(false)
+</script>
+
 <template>
   <Story title="Overlay/Drawer">
-    <Variant title="Simple">
+    <Variant title="Droite (défaut)">
       <div class="p-4">
         <button
           class="rounded bg-m-btn-primary px-4 py-2 text-white"
-          @click="showSimple = true"
+          @click="showRight = true"
         >
-          Ouvrir le drawer
+          Ouvrir à droite
         </button>
-        <MalioDrawer v-model="showSimple" title="Détails">
+        <MalioDrawer v-model="showRight">
+          <template #header>
+            <h2 class="text-xl font-bold">Détails</h2>
+          </template>
           <p>Contenu simple du drawer.</p>
         </MalioDrawer>
       </div>
     </Variant>
 
-    <Variant title="Avec formulaire">
+    <Variant title="Gauche">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showLeft = true"
+        >
+          Ouvrir à gauche
+        </button>
+        <MalioDrawer v-model="showLeft" side="left">
+          <template #header>
+            <h2 class="text-xl font-bold">Navigation</h2>
+          </template>
+          <p>Ce drawer glisse depuis la gauche.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Avec footer collant">
       <div class="p-4">
         <button
           class="rounded bg-m-btn-primary px-4 py-2 text-white"
@@ -22,102 +53,38 @@
         >
           Ouvrir le formulaire
         </button>
-        <MalioDrawer v-model="showForm" title="Nouveau contact">
-          <div class="flex flex-col gap-4">
-            <MalioInputText v-model="formNom" label="Nom" />
-            <MalioInputText v-model="formPrenom" label="Prénom" />
-            <MalioButton label="Enregistrer" button-class="w-full" @click="showForm = false" />
+        <MalioDrawer v-model="showForm">
+          <template #header>
+            <h2 class="text-xl font-bold">Nouveau contact</h2>
+          </template>
+          <div class="flex flex-col gap-4 py-2">
+            <MalioInputText label="Nom" />
+            <MalioInputText label="Prénom" />
           </div>
+          <template #footer>
+            <div class="sticky bottom-0 flex gap-3 bg-white py-4">
+              <MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
+            </div>
+          </template>
         </MalioDrawer>
       </div>
     </Variant>
 
-    <Variant title="Sans bouton fermer">
+    <Variant title="Non dismissable">
       <div class="p-4">
         <button
           class="rounded bg-m-btn-primary px-4 py-2 text-white"
-          @click="showNoClose = true"
+          @click="showNoDismiss = true"
         >
-          Ouvrir (sans croix)
+          Ouvrir
         </button>
-        <MalioDrawer v-model="showNoClose" title="Information" :show-close="false">
-          <p>Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
-        </MalioDrawer>
-      </div>
-    </Variant>
-
-    <Variant title="Largeur personnalisée">
-      <div class="p-4">
-        <button
-          class="rounded bg-m-btn-primary px-4 py-2 text-white"
-          @click="showWide = true"
-        >
-          Ouvrir (large)
-        </button>
-        <MalioDrawer v-model="showWide" title="Drawer large" drawer-class="max-w-2xl">
-          <p>Ce drawer utilise une largeur personnalisée via la prop drawerClass.</p>
+        <MalioDrawer v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
+          <template #header>
+            <h2 class="text-xl font-bold">Action requise</h2>
+          </template>
+          <p>Ni le backdrop ni Échap ne ferment ce drawer. Utilisez la croix.</p>
         </MalioDrawer>
       </div>
     </Variant>
   </Story>
 </template>
-
-<docs lang="md">
-# MalioDrawer
-
-Panneau latéral (drawer) qui s'ouvre depuis la droite avec un fond semi-transparent.
-
-## Props détaillées
-
-| Prop | Type | Défaut | Description |
-|------|------|--------|-------------|
-| `id` | `string` | auto-généré | Identifiant HTML du drawer |
-| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
-| `title` | `string` | `''` | Titre affiché dans le header |
-| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
-| `drawerClass` | `string` | `''` | Classes CSS additionnelles sur le panneau (fusionnées via `twMerge`) |
-
-## Comportement
-
-- Le drawer s'ouvre en glissant depuis la droite avec une transition
-- Un backdrop semi-transparent couvre le reste de la page
-- Clic sur le backdrop ferme le drawer
-- Bouton de fermeture (croix) en haut à droite, masquable via `showClose`
-- Contenu scrollable si plus haut que la fenêtre
-- Teleport vers `<body>` pour éviter les problèmes de z-index
-
-## Accessibilité
-
-- `role="dialog"` et `aria-modal="true"` sur le panneau
-- `aria-labelledby` lié au titre
-- Bouton fermer avec `aria-label="Fermer"`
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `boolean` | Émis à la fermeture (backdrop ou bouton) |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Contenu du drawer |
-</docs>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import MalioDrawer from '../../components/malio/drawer/Drawer.vue'
-import MalioInputText from '../../components/malio/input/InputText.vue'
-import MalioButton from '../../components/malio/button/Button.vue'
-
-defineOptions({ name: 'DrawerStory' })
-
-const showSimple = ref(false)
-const showForm = ref(false)
-const showNoClose = ref(false)
-const showWide = ref(false)
-
-const formNom = ref('Dupont')
-const formPrenom = ref('Jean')
-</script>

app/story/input/inputAutocomplete.story.vue

@@ -0,0 +1,294 @@
+<template>
+  <Story title="Input/Autocomplete">
+    <div class="grid grid-cols-1 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"
+        />
+      </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">
+          Tapez au moins 2 caractères. Le parent écoute <code>@search</code> et alimente <code>options</code> + <code>loading</code>.
+        </p>
+        <MalioInputAutocomplete
+          v-model="apiValue"
+          label="Client"
+          :options="apiOptions"
+          :loading="apiLoading"
+          :min-search-length="2"
+          icon-name="mdi:magnify"
+          icon-position="left"
+          @search="onSearchApi"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Création libre (allowCreate)</h2>
+        <MalioInputAutocomplete
+          v-model="createValue"
+          label="Catégorie"
+          :options="staticOptions"
+          allow-create
+          hint="Taper Entrée pour créer une nouvelle valeur"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputAutocomplete
+          v-model="disabledValue"
+          label="Pays"
+          :options="staticOptions"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputAutocomplete
+          v-model="readonlyValue"
+          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
+          v-model="errorValue"
+          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
+          v-model="successValue"
+          label="Pays"
+          :options="staticOptions"
+          success="Sélection valide"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# 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). Combine le pattern floating-label des autres inputs avec un dropdown inspiré de `MalioSelect`. Conçu pour les cas ERP où la liste vient d'un appel API (auth, transformation, cache gérés par le parent).
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+- Type: string
+- Description: Identifiant HTML de l'input. Auto-généré si non fourni (préfixe `malio-input-autocomplete-`).
+
+### label
+- Type: string
+- Description: Texte affiché comme label flottant.
+
+### name
+- Type: string
+- Description: Attribut name de l'input (formulaires).
+
+### modelValue
+- Type: `string | number | null | undefined`
+- Description: Valeur sélectionnée. Doit correspondre à un `option.value` (ou être un texte libre si `allowCreate`).
+
+### options
+- Type: `{ label: string; value: string | number }[]`
+- Défaut: `[]`
+- Description: Liste affichée dans le dropdown. Le parent alimente cette liste (statique ou via API en réponse à l'event `search`).
+
+### loading
+- Type: boolean
+- Défaut: `false`
+- Description: Affiche un spinner à la place du chevron et un message dans le dropdown.
+
+### debounce
+- Type: number
+- Défaut: `300`
+- Description: Délai (ms) avant émission de l'event `search` après une frappe. Évite de spammer l'API.
+
+### minSearchLength
+- Type: number
+- Défaut: `0`
+- Description: Nombre minimum de caractères avant d'émettre `search`. Pratique pour API : ne pas appeler avec query vide.
+
+### allowCreate
+- Type: boolean
+- Défaut: `false`
+- Description: Si vrai, l'utilisateur peut valider (Entrée ou clic ailleurs) une valeur libre non présente dans `options` ; émet l'event `create`.
+
+------------------------------------------------------------------------
+
+## Icône
+
+### iconName
+- Type: string
+- Défaut: `''` (aucune)
+- Description: Nom Iconify de l'icône décorative.
+
+### iconPosition
+- Type: `'left' | 'right'`
+- Défaut: `left`
+- Description: Côté d'affichage de l'icône. À droite, l'icône s'aligne avec le chevron.
+
+### iconSize / iconColor
+- Type: number / string
+- Défaut: `24` / `text-m-muted`
+
+------------------------------------------------------------------------
+
+## Textes du dropdown
+
+### noResultsText
+- Type: string
+- Défaut: `Aucun résultat`
+- Description: Affiché quand `options` est vide.
+
+### loadingText
+- Type: string
+- Défaut: `Chargement…`
+- Description: Affiché pendant que `loading=true`.
+
+### minSearchText
+- Type: string
+- Défaut: `Tapez pour rechercher`
+- Description: Affiché quand l'utilisateur n'a pas atteint `minSearchLength`.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### inputClass / labelClass / groupClass
+- Type: string
+- Description: Classes CSS appliquées respectivement à l'input, au label et au conteneur (fusionnées via `twMerge`).
+
+------------------------------------------------------------------------
+
+## Validation & Contraintes
+
+### required / disabled / readonly
+- Type: boolean
+- Description: Attributs HTML standards. `disabled` et `readonly` empêchent l'ouverture du dropdown.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint / error / success
+- Type: string
+- Description: Messages affichés sous le champ. `error` est prioritaire et active `aria-invalid`.
+
+------------------------------------------------------------------------
+
+## Clavier
+
+- `↓` / `↑` : naviguer dans les options
+- `Entrée` : sélectionner l'option active (ou créer si `allowCreate`)
+- `Échap` : fermer le dropdown et revenir à la dernière sélection
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+- `role="combobox"` sur l'input avec `aria-expanded`, `aria-controls`, `aria-activedescendant`.
+- `role="listbox"` sur le dropdown, `role="option"` sur chaque entrée, `aria-selected` reflète `modelValue`.
+- `aria-invalid` activé si `error` existe.
+- `aria-describedby` référence dynamiquement le message affiché.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+- Émis quand l'utilisateur sélectionne une option. Permet l'utilisation avec v-model.
+
+### search
+- Émis (après debounce + minSearchLength) avec la query texte tapée. C'est ce que le parent écoute pour lancer l'appel API.
+
+### select
+- Émis avec l'objet `Option` complet (ou `null` à la réinitialisation). Utile pour récupérer le `label` côté parent en plus du `value`.
+
+### create
+- Émis avec la chaîne saisie quand `allowCreate` est vrai et que l'utilisateur valide une valeur libre.
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputAutocomplete from '../../components/malio/input/InputAutocomplete.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'},
+]
+
+const simpleValue = ref<string | number | null>('fr')
+const leftIconValue = ref<string | number | null>(null)
+const createValue = ref<string | number | null>(null)
+const disabledValue = ref<string | number | null>('fr')
+const readonlyValue = ref<string | number | null>('be')
+const hintValue = ref<string | number | null>(null)
+const errorValue = ref<string | number | null>('fr')
+const successValue = ref<string | number | null>('fr')
+
+const apiValue = ref<string | number | null>(null)
+const apiOptions = ref<Option[]>([])
+const apiLoading = ref(false)
+
+const fakeClients: Option[] = [
+  {label: 'Yuno Malio', value: 1},
+  {label: 'Yuna Corp', value: 2},
+  {label: 'Yum Foods', value: 3},
+  {label: 'Acme Inc.', value: 4},
+  {label: 'Globex Corp', value: 5},
+]
+
+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
+}
+</script>

app/story/input/inputEmail.story.vue

@@ -0,0 +1,261 @@
+<template>
+  <Story title="Input/Email">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputEmail
+          v-model="simpleValue"
+          label="Adresse email"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
+        <MalioInputEmail
+          v-model="leftIconValue"
+          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
+          v-model="noIconValue"
+          label="Adresse email"
+          :icon-name="''"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputEmail
+          v-model="hintValue"
+          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">Désactivé</h2>
+        <MalioInputEmail
+          v-model="disabledValue"
+          label="Adresse email"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputEmail
+          v-model="readonlyValue"
+          label="Adresse email"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputEmail
+          v-model="errorValue"
+          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
+          v-model="successValue"
+          label="Adresse email"
+          success="Adresse email valide"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputEmail
+
+Champ email avec label flottant, icône email par défaut, états visuels
+(erreur / succès) et accessibilité. Basé sur InputText mais ciblé sur la
+saisie d'une adresse email (`type="email"` + `inputmode="email"`).
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML de l'input.
+-   Comportement: Si non fourni, un id unique est généré automatiquement
+    (préfixe `malio-input-email-`).
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+-   Comportement: Si absent, aucun label n'est rendu.
+
+### name
+
+-   Type: string
+-   Description: Attribut name de l'input (utile pour les formulaires).
+
+### autocomplete
+
+-   Type: string
+-   Défaut: `off`
+-   Description: Active ou configure l'autocomplétion navigateur. La
+    valeur par défaut est `off` pour les formulaires de création d'ERP.
+    Passer `email` pour permettre au navigateur de suggérer l'adresse
+    de l'utilisateur (formulaires de connexion / inscription).
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Valeur contrôlée du composant.
+-   Comportement:
+-   Si défini → composant contrôlé (v-model).
+-   Sinon → gestion interne de l'état.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### inputClass
+
+-   Type: string
+-   Description: Classes CSS appliquées à l'input.
+
+### labelClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+
+### groupClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au conteneur.
+
+------------------------------------------------------------------------
+
+## Validation & Contraintes
+
+### required
+
+-   Type: boolean
+-   Description: Ajoute l'attribut HTML required.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le champ.
+
+### readonly
+
+-   Type: boolean
+-   Description: Rend le champ non modifiable mais focusable.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d'aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d'erreur.
+-   Effet:
+-   Active l'état visuel erreur.
+-   aria-invalid=true
+-   Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès.
+-   Effet:
+-   Actif uniquement si error est absent.
+
+------------------------------------------------------------------------
+
+## Icône
+
+### iconName
+
+-   Type: string
+-   Défaut: `mdi:email-outline`
+-   Description: Nom Iconify de l'icône affichée. Passer une chaîne
+    vide pour ne pas afficher d'icône.
+
+### iconPosition
+
+-   Type: `'left' | 'right'`
+-   Défaut: `right`
+
+### iconSize
+
+-   Type: string | number
+-   Défaut: `24`
+
+### iconColor
+
+-   Type: string
+-   Défaut: `text-m-muted`
+-   Description: Classe Tailwind de couleur. Surchargée automatiquement
+    par les états erreur / succès.
+
+------------------------------------------------------------------------
+
+## Comportement
+
+-   Aucune validation interne — le composant ne vérifie pas le format
+    de l'email. Utiliser la validation HTML native (`type="email"`) ou
+    piloter `error` / `success` depuis le parent.
+-   `inputmode="email"` est appliqué pour adapter le clavier mobile.
+
+## Priorité visuelle
+
+1.  error
+2.  success
+3.  neutre
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   aria-invalid est activé si error existe.
+-   aria-describedby référence dynamiquement le message affiché.
+-   Fonctionne avec ou sans v-model.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque modification de l'input.
+-   Permet l'utilisation avec v-model.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputEmail from '../../components/malio/input/InputEmail.vue'
+
+const simpleValue = ref('')
+const leftIconValue = ref('')
+const noIconValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('contact@malio.fr')
+const readonlyValue = ref('readonly@malio.fr')
+const errorValue = ref('pas-un-email')
+const successValue = ref('contact@malio.fr')
+</script>

app/story/input/inputPhone.story.vue

@@ -0,0 +1,285 @@
+<template>
+  <Story title="Input/Phone">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputPhone
+          v-model="simpleValue"
+          label="Téléphone"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
+        <MalioInputPhone
+          v-model="addableValue"
+          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</h2>
+        <MalioInputPhone
+          v-model="rightIconValue"
+          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
+          v-model="noIconValue"
+          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="maskedValue"
+          label="Téléphone (FR)"
+          mask="+33 # ## ## ## ##"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputPhone
+          v-model="hintValue"
+          label="Téléphone"
+          hint="Format international recommandé"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé (avec addable)</h2>
+        <MalioInputPhone
+          v-model="disabledValue"
+          label="Téléphone"
+          addable
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputPhone
+          v-model="readonlyValue"
+          label="Téléphone"
+          addable
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputPhone
+          v-model="errorValue"
+          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
+          v-model="successValue"
+          label="Téléphone"
+          success="Numéro valide"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputPhone
+
+Champ téléphone avec label flottant, icône phone par défaut (à gauche),
+états visuels (erreur / succès), accessibilité et bouton « + » optionnel
+pour gérer une liste de numéros côté parent (`type="tel"` +
+`inputmode="tel"`).
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML de l'input.
+-   Comportement: Si non fourni, un id unique est généré automatiquement
+    (préfixe `malio-input-phone-`).
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+
+### name
+
+-   Type: string
+-   Description: Attribut name de l'input (utile pour les formulaires).
+
+### autocomplete
+
+-   Type: string
+-   Défaut: `off`
+-   Description: Active ou configure l'autocomplétion navigateur. La
+    valeur par défaut est `off` pour les formulaires de création d'ERP.
+    Passer `tel` pour permettre au navigateur de suggérer un numéro
+    enregistré.
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Valeur contrôlée du composant.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### inputClass / labelClass / groupClass
+
+-   Type: string
+-   Description: Classes CSS appliquées respectivement à l'input, au
+    label et au conteneur.
+
+### mask
+
+-   Type: string | MaskInputOptions
+-   Description: Masque maska à appliquer. Aucun masque par défaut —
+    les formats téléphoniques varient trop selon les pays. À activer
+    pour un usage mono-pays.
+
+------------------------------------------------------------------------
+
+## Validation & Contraintes
+
+### required / disabled / readonly
+
+-   Type: boolean
+-   Description: Attributs HTML standards.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint / error / success
+
+-   Type: string
+-   Description: Messages affichés sous le champ.
+-   `error` est prioritaire sur `success` et active `aria-invalid`.
+
+------------------------------------------------------------------------
+
+## Icône
+
+### iconName
+
+-   Type: string
+-   Défaut: `mdi:phone-outline`
+-   Description: Nom Iconify de l'icône affichée. Passer une chaîne
+    vide pour ne pas afficher d'icône.
+
+### iconPosition
+
+-   Type: `'left' | 'right'`
+-   Défaut: `left` (laisse la droite libre pour le bouton +).
+
+### iconSize / iconColor
+
+-   Type: number / string
+-   Défaut: `24` / `text-m-muted`
+
+------------------------------------------------------------------------
+
+## Bouton « ajouter »
+
+### addable
+
+-   Type: boolean
+-   Défaut: `false`
+-   Description: Affiche un bouton à droite du champ. Au clic, le
+    composant émet l'event `add` — c'est au parent de gérer l'ajout
+    d'un nouveau champ téléphone.
+
+### addIconName
+
+-   Type: string
+-   Défaut: `mdi:plus`
+-   Description: Nom Iconify de l'icône du bouton d'ajout.
+
+### addButtonLabel
+
+-   Type: string
+-   Défaut: `Ajouter un numéro`
+-   Description: Attribut `aria-label` du bouton (accessibilité).
+
+------------------------------------------------------------------------
+
+## Comportement
+
+-   Aucune validation interne — le composant ne vérifie pas le format
+    du numéro. Piloter `error` / `success` depuis le parent.
+-   `inputmode="tel"` adapte le clavier mobile.
+-   Le bouton `+` est désactivé quand `disabled` ou `readonly` est
+    actif et n'émet pas l'event dans ce cas.
+
+## Priorité visuelle
+
+1.  error
+2.  success
+3.  neutre
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   `aria-invalid` activé si `error` existe.
+-   `aria-describedby` référence dynamiquement le message affiché.
+-   Le bouton `+` expose un `aria-label` configurable.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque modification de l'input. Permet l'utilisation avec
+    v-model.
+
+### add
+
+-   Émis au clic du bouton `+` (uniquement si `addable` est vrai et
+    que le champ n'est ni `disabled` ni `readonly`).
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputPhone from '../../components/malio/input/InputPhone.vue'
+
+const simpleValue = ref('')
+const addableValue = ref('')
+const rightIconValue = ref('')
+const noIconValue = ref('')
+const maskedValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('+33 6 12 34 56 78')
+const readonlyValue = ref('+33 6 12 34 56 78')
+const errorValue = ref('abc')
+const successValue = ref('+33 6 12 34 56 78')
+
+const addClicks = ref(0)
+const onAdd = () => {
+  addClicks.value++
+}
+</script>

app/story/input/inputRichText.story.vue

@@ -72,6 +72,17 @@
           min-height="200px"
         />
       </div>
+
+      <div class="rounded-lg border p-4 lg:col-span-2">
+        <h2 class="mb-4 text-xl font-bold">Couleurs &amp; surlignage</h2>
+        <MalioInputRichText
+          v-model="colorValue"
+          label="Note colorée"
+          output-format="html"
+          min-height="180px"
+          hint="Tester les boutons couleur du texte et surlignage (palettes Jira-like)"
+        />
+      </div>
     </div>
   </Story>
 </template>
@@ -80,7 +91,7 @@
 # MalioInputRichText
 
 Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**.
-Sortie en **markdown** (par défaut) ou en **HTML**. Aligné sur le thème Malio
+Sortie en **HTML** (par défaut) ou en **markdown**. Aligné sur le thème Malio
 (couleurs `m-*`, icônes `mdi:*`, états error / success / hint).
 
 ------------------------------------------------------------------------
@@ -144,10 +155,10 @@ Sortie en **markdown** (par défaut) ou en **HTML**. Aligné sur le thème Malio
 ### outputFormat
 
 - Type: `'markdown' | 'html'`
-- Défaut: `'markdown'`
+- Défaut: `'html'`
 - Description: Format émis dans `update:modelValue`.
-  - `markdown` : utilise `tiptap-markdown` (`getMarkdown()`).
   - `html` : utilise `editor.getHTML()`.
+  - `markdown` : utilise `tiptap-markdown` (`getMarkdown()`).
 
 ### groupClass / labelClass / editorClass
 
@@ -166,8 +177,15 @@ Boutons (icônes `mdi:*`) :
 - Citation
 - Code inline, Bloc de code
 - Lien (prompt URL ; vide pour retirer)
+- Couleur du texte (palette de 8 swatches + reset)
+- Surlignage (palette de 8 swatches + reset)
 - Annuler / Rétablir
 
+Les palettes couleur/surlignage s'ouvrent en popover sous leur bouton.
+Fermeture : clic sur un swatch, clic en dehors, ou touche **Échap**.
+
+> Les couleurs et surlignages ne sont **pas persistés en markdown** (spec Markdown ne couvre pas la couleur). Pour préserver les couleurs au save/reload, utiliser `output-format="html"`.
+
 ------------------------------------------------------------------------
 
 ## Accessibilité
@@ -199,4 +217,5 @@ const successValue = ref('Tout est bon de mon côté.')
 const disabledValue = ref('Contenu indisponible.')
 const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
 const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
+const colorValue = ref('<p>Sélectionner du texte puis utiliser les boutons <span style="color: #bf2600">couleur</span> ou <mark data-color="#fff0b3" style="background-color: #fff0b3">surlignage</mark>.</p>')
 </script>

docs/superpowers/plans/2026-05-21-refonte-playground.md

@@ -0,0 +1,302 @@
+# Refonte du playground — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Remplacer la fausse-SPA du playground (sidebar maison + chargement dynamique dans `index.vue`) par du vrai routage Nuxt fichier + un layout par défaut qui embarque le composant `MalioSidebar` de production.
+
+**Architecture:** Une config de navigation centralisée (`.playground/playground.nav.ts`) alimente un layout par défaut (`.playground/layouts/default.vue`) contenant `<MalioSidebar>` + `<slot />`. Les pages de démo existantes sous `.playground/pages/composant/**` deviennent automatiquement des routes et héritent du layout. `index.vue` devient une simple page d'accueil. Le `app/app.vue` du layer (`<NuxtLayout><NuxtPage /></NuxtLayout>`), hérité via `extends`, applique le layout automatiquement.
+
+**Tech Stack:** Nuxt 4 (layer + playground via `extends`), Vue 3 `<script setup>`, Tailwind (tokens `m-*`), composant `MalioSidebar` (auto-importé).
+
+**Note sur les tests :** Le playground est un harnais de dev, non livré. Vitest est scopé à `app/**/*.test.ts` (la bibliothèque) et aucune page playground n'a de test. Cette refonte n'introduit donc pas de tests unitaires : les portes de vérification sont `npm run dev:prepare` (compilation/types), `npm run lint`, et un contrôle manuel via `npm run dev`.
+
+**Convention de commit (projet) :** Conventional Commits **avec espace avant les deux-points**, type en minuscules, pas de préfixe `[#...]`, suffixe ticket `(#MUI-34)`. Terminer par le trailer `Co-Authored-By`. Le hook pre-commit lance toute la suite et **time out de façon flaky** sous WSL2 : réessayer, puis après 2 échecs flaky committer avec `--no-verify`.
+
+---
+
+## File Structure
+
+| Fichier | Rôle | Action |
+|---------|------|--------|
+| `.playground/playground.nav.ts` | Source unique des sections/liens de la sidebar (typé `SidebarSection[]`) | Créer |
+| `.playground/layouts/default.vue` | Layout par défaut : `MalioSidebar` + zone de contenu `<slot />` | Créer |
+| `.playground/pages/index.vue` | Page d'accueil simple (remplace la fausse-SPA) | Réécrire |
+| `.claude/skills/creating-malio-component/SKILL.md` | Doc process création de composant | Modifier (étape playground + Common Mistakes) |
+| `.playground/pages/composant/**/*.vue` | Pages de démo | **Inchangées** (déjà des routes) |
+
+---
+
+## Task 1 : Config de navigation centralisée
+
+**Files:**
+- Create: `.playground/playground.nav.ts`
+
+- [ ] **Step 1 : Créer le fichier de navigation**
+
+Créer `.playground/playground.nav.ts` avec ce contenu exact. Chaque `to` correspond exactement à un fichier existant sous `.playground/pages/composant/`. Le type est importé du SFC `MalioSidebar`.
+
+```ts
+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: '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: 'Onglets', to: '/composant/tab/tabList'},
+    ],
+  },
+  {
+    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'},
+    ],
+  },
+]
+```
+
+- [ ] **Step 2 : Vérifier le lint du fichier**
+
+Run: `npx eslint .playground/playground.nav.ts`
+Expected: aucune erreur (0 problems). Si ESLint signale un import de type non résolu depuis le `.vue`, c'est un faux positif de résolution ; il ne bloque pas (warnings only). En cas d'**erreur** bloquante sur l'import du type, fallback : remplacer la ligne d'import par une définition locale équivalente :
+```ts
+type SidebarItem = {label: string; to: string}
+type SidebarSection = {label?: string; icon?: string; items: SidebarItem[]}
+```
+
+*(Pas de commit ici — les 3 fichiers de la refonte seront committés ensemble en Task 4, car retirer l'ancien `index.vue` casse temporairement le glob.)*
+
+---
+
+## Task 2 : Layout par défaut
+
+**Files:**
+- Create: `.playground/layouts/default.vue`
+
+**Pré-requis vérifiés :** `MalioSidebar` est auto-importé (préfixe `Malio`, `pathPrefix: false`). Ses slots sont `logo` et `logo-collapsed`. Sa prop requise est `sections: SidebarSection[]`. Les logos `LOGO_MALIO.png` / `LOGO_MALIO_COLLAPSED.png` sont servis depuis le `public/` du layer (donc accessibles à la racine `/`).
+
+- [ ] **Step 1 : Créer le layout**
+
+Créer `.playground/layouts/default.vue`. Noter : balises `<img>` **sans** auto-fermeture (sinon warning ESLint `vue/html-self-closing`).
+
+```vue
+<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>
+```
+
+- [ ] **Step 2 : Vérifier le lint du layout**
+
+Run: `npx eslint .playground/layouts/default.vue`
+Expected: aucune erreur bloquante (0 errors).
+
+---
+
+## Task 3 : Réécrire `index.vue` en page d'accueil
+
+**Files:**
+- Modify (réécriture complète): `.playground/pages/index.vue`
+
+- [ ] **Step 1 : Remplacer tout le contenu de `index.vue`**
+
+Remplacer **l'intégralité** du fichier `.playground/pages/index.vue` (supprime la sidebar maison + le chargement dynamique par glob) par :
+
+```vue
+<template>
+  <div class="mx-auto max-w-2xl py-16 text-center">
+    <h1 class="text-3xl font-bold text-m-text">
+      Playground @malio/layer-ui
+    </h1>
+    <p class="mt-4 text-m-muted">
+      Sélectionne un composant dans la barre latérale pour afficher sa page de démonstration.
+    </p>
+  </div>
+</template>
+```
+
+*(Page sans `<script>` : contenu purement statique. Elle hérite du layout `default` automatiquement.)*
+
+- [ ] **Step 2 : Vérifier le lint de la page**
+
+Run: `npx eslint .playground/pages/index.vue`
+Expected: aucune erreur bloquante (0 errors).
+
+---
+
+## Task 4 : Vérification end-to-end + commit de la refonte
+
+**Files:** (commit groupé)
+- `.playground/playground.nav.ts`
+- `.playground/layouts/default.vue`
+- `.playground/pages/index.vue`
+
+- [ ] **Step 1 : Régénérer les types Nuxt (compilation)**
+
+Run: `npm run dev:prepare`
+Expected: « Types generated in .playground/.nuxt. » sans erreur de compilation. Valide que le layout, le nav et `index.vue` compilent et que l'import du type `SidebarSection` se résout.
+
+- [ ] **Step 2 : Lint global**
+
+Run: `npm run lint`
+Expected: 0 errors (des warnings préexistants sur d'autres fichiers sont tolérés ; aucun nouvel **error** sur les 3 fichiers créés/modifiés).
+
+- [ ] **Step 3 : Contrôle manuel dans le navigateur**
+
+Run: `npm run dev` puis ouvrir l'URL affichée.
+Vérifier :
+- L'accueil (`/`) affiche le message de bienvenue, avec la `MalioSidebar` à gauche.
+- La sidebar liste les 6 sections et tous les liens.
+- Cliquer un item (ex. « Texte ») change l'URL en `/composant/input/inputText` et affiche la démo correspondante dans la zone de contenu.
+- Le bouton collapse de la sidebar fonctionne (plier/déplier).
+- Cliquer le logo ramène à `/`.
+
+Arrêter le serveur (Ctrl+C) une fois vérifié.
+
+- [ ] **Step 4 : Commit de la refonte**
+
+```bash
+git add .playground/playground.nav.ts .playground/layouts/default.vue .playground/pages/index.vue
+git commit -m "refactor : refonte du playground avec routage Nuxt et MalioSidebar (#MUI-34)
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+Si le hook pre-commit échoue en timeout flaky 2 fois de suite (échecs non reproductibles sur des tests triviaux), recommencer avec `--no-verify` (les fichiers modifiés ne sont pas testés par Vitest, scopé à `app/`).
+
+---
+
+## Task 5 : Mettre à jour le skill `creating-malio-component`
+
+Le skill décrit encore l'ancien fonctionnement (auto-découverte par `index.vue` via glob). Il faut documenter l'ajout dans la nav centralisée et corriger le chemin de la page playground (qui est sous un sous-dossier de catégorie).
+
+**Files:**
+- Modify: `.claude/skills/creating-malio-component/SKILL.md`
+
+- [ ] **Step 1 : Réécrire l'étape 5 (page playground)**
+
+Remplacer le bloc de l'étape « ### 5. Créer la page playground » — du titre jusqu'à la ligne `**Variantes typiques :**` exclue — par :
+
+```markdown
+### 5. Créer la page playground
+
+**Fichier :** `.playground/pages/composant/<categorie>/<nomComposant>.vue` (camelCase, dans le sous-dossier de catégorie)
+
+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 :
+
+\`\`\`html
+<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">Titre variante</h2>
+    <MalioMonComposant ... />
+  </div>
+</div>
+\`\`\`
+```
+
+- [ ] **Step 2 : Mettre à jour la table « Common Mistakes »**
+
+Remplacer la ligne :
+```markdown
+| Page playground non détectée | Vérifier le nom du fichier en camelCase dans `.playground/pages/composant/` |
+```
+par :
+```markdown
+| 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) |
+```
+
+- [ ] **Step 3 : Vérifier la cohérence du diagramme workflow**
+
+Lire le bloc `digraph` en tête du skill. L'étape « 5. Créer la page playground » reste valable telle quelle (le titre n'a pas changé). Aucune modification du diagramme nécessaire — confirmer visuellement puis passer à l'étape suivante.
+
+- [ ] **Step 4 : Commit de la mise à jour du skill**
+
+```bash
+git add .claude/skills/creating-malio-component/SKILL.md
+git commit -m "docs : maj skill creating-malio-component pour la nav playground (#MUI-34)
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+(Ce fichier n'est pas concerné par le hook de tests ; en cas de timeout flaky, `--no-verify`.)
+
+---
+
+## Vérification finale (après toutes les tâches)
+
+- [ ] `npm run lint` → 0 errors.
+- [ ] `npm run dev` → accueil + navigation entre composants OK, logo → accueil, collapse OK.
+- [ ] `git log --oneline -3` → 2 nouveaux commits au format `type : … (#MUI-34)`.
+- [ ] Plus aucune trace de sidebar maison / `import.meta.glob` dans `.playground/pages/index.vue`.
+
+## Note post-exécution (pour l'agent)
+
+Mettre à jour la mémoire `malio-datepicker-conventions.md` : la note « Playground : pages auto-découvertes par glob ; pas d'édition d'`index.vue` » est désormais fausse. Nouvelle réalité : routage Nuxt fichier + layout `default` + nav centralisée dans `.playground/playground.nav.ts` à éditer pour chaque nouveau composant.

docs/superpowers/specs/2026-05-21-drawer-redesign-design.md

@@ -0,0 +1,146 @@
+# Refonte du composant `<MalioDrawer>` — Design
+
+> Ticket : MUI-35 — Revoir le design du composant Drawer
+> Date : 2026-05-21
+> Statut : design validé, à implémenter
+
+## Contexte & problème
+
+Le `<MalioDrawer>` actuel fait le strict minimum et ne tient pas la comparaison
+avec les drawers des libs modernes (shadcn/Sheet, PrimeVue, Element Plus, Nuxt UI) :
+
+- glisse **uniquement depuis la droite**, pas de choix de côté ;
+- **un seul slot** (le contenu), pas de header/footer structurés ;
+- **aucune accessibilité réelle** : pas de focus-trap, pas de restitution du focus,
+  pas de fermeture au clavier (Échap) ;
+- **pas de scroll-lock** du body quand le drawer est ouvert.
+
+Objectif : refondre le composant en gardant l'esprit du layer Malio
+(hand-rollé, 1 composant `.vue`, props communes, `twMerge`), sans introduire de
+dépendance ni refondre les autres composants.
+
+## Décisions structurantes
+
+- **Hand-rollé**, pas de dépendance type Reka UI. Cohérence avec le reste du layer.
+- **Un seul composant** `<MalioDrawer>` (props + slots). Pas de primitives composables.
+- **Breaking change assumé** → bump de version **majeure** via semantic-release.
+  Les apps consommatrices migreront (cf. section Migration).
+- Périmètre : **le drawer uniquement**. Les autres composants ne bougent pas.
+
+## API
+
+### Slots
+
+| Slot | Rôle |
+|------|------|
+| `#header` | Contenu d'en-tête (titre + ce que veut le consommateur). **Aucune prop `title`.** |
+| _défaut_ | Le body, dans la zone scrollable. |
+| `#footer` | Rendu **dans la zone scrollable**, juste après le body. **Aucune classe de positionnement imposée.** |
+
+### Props
+
+| Prop | Type | Défaut | Rôle |
+|------|------|--------|------|
+| `modelValue` | `boolean` | `undefined` | v-model d'ouverture (pattern contrôlé/non-contrôlé Malio) |
+| `id` | `string` | `''` (auto) | id du composant |
+| `side` | `'right' \| 'left'` | `'right'` | côté d'apparition |
+| `showClose` | `boolean` | `true` | affiche le bouton de fermeture (croix) |
+| `dismissable` | `boolean` | `true` | clic sur le backdrop ferme le drawer |
+| `closeOnEscape` | `boolean` | `true` | touche Échap ferme le drawer |
+| `ariaLabel` | `string` | `''` | nom accessible de secours quand `#header` est absent |
+| `drawerClass` | `string` | `''` | override du panneau (largeur réglée ici, ex. `max-w-2xl`) |
+| `overlayClass` | `string` | `''` | override du backdrop |
+| `headerClass` | `string` | `''` | override de la barre header |
+| `bodyClass` | `string` | `''` | override de la zone scrollable |
+| `footerClass` | `string` | `''` | override du wrapper du `#footer` |
+
+> **Largeur/hauteur** : pas de prop `size`. Tout se règle via `drawerClass`
+> (comme aujourd'hui).
+
+### Emits
+
+| Event | Payload | Quand |
+|-------|---------|-------|
+| `update:modelValue` | `boolean` | ouverture/fermeture |
+| `close` | — | à la fermeture (pratique pour la logique appelante) |
+
+## Layout
+
+```
+┌─────────────────────────────┐
+│ [slot #header]        [ ✕ ]  │  ← barre header (rendue si #header OU showClose)
+├─────────────────────────────┤
+│                             │
+│   slot par défaut (body)    │  ← zone scrollable (flex-1, overflow-y-auto)
+│   [slot #footer]            │  ← rendu juste après le body, dans le même scroll,
+│                             │     SANS classe de position par défaut
+└─────────────────────────────┘
+```
+
+- La **barre header** n'est rendue que si le slot `#header` est fourni **ou** si
+  `showClose` est vrai. Le bouton croix vit dans cette barre, à droite. L'icône de
+  fermeture est **`mdi:cancel-bold`** (on conserve l'icône actuelle ; c'est le test
+  qui sera adapté).
+- La **zone scrollable** (`flex-1 overflow-y-auto`) contient le slot par défaut
+  puis, si fourni, le wrapper `#footer`.
+- Le **`#footer`** n'a **aucune** classe `sticky`/`flex-shrink-0`/position. Par défaut
+  il scrolle avec le contenu. Pour le coller en bas, le consommateur passe
+  `footer-class="sticky bottom-0 bg-white"`.
+
+## Comportements (les manques actuels corrigés)
+
+1. **Échap** ferme le drawer si `closeOnEscape` (listener `keydown` global, ajouté à
+   l'ouverture, retiré à la fermeture).
+2. **Scroll-lock du body** : `overflow: hidden` sur `document.body` à l'ouverture,
+   restauré à la fermeture.
+3. **Focus-trap** : à l'ouverture, focus sur le premier élément focusable du panneau
+   (ou le panneau lui-même) ; `Tab`/`Shift+Tab` bouclent à l'intérieur du panneau.
+4. **Restitution du focus** : mémoriser `document.activeElement` à l'ouverture, le
+   restaurer à la fermeture.
+5. **ARIA** :
+   - `role="dialog"`, `aria-modal="true"` sur le panneau ;
+   - `aria-labelledby` pointant sur l'id du wrapper `#header` **si** le slot est fourni ;
+   - sinon `aria-label` = prop `ariaLabel` (fallback accessible).
+
+## Transition
+
+- Backdrop : fondu (`opacity`).
+- Panneau : translation selon `side` —
+  - `right` : `translateX(100%)` → `0` ;
+  - `left` : `translateX(-100%)` → `0`.
+- Conserver le pattern actuel `<Teleport to="body">` + `<Transition>` +
+  `isRendered` (démontage après l'animation de sortie).
+
+## Migration (breaking)
+
+| Avant | Après |
+|-------|-------|
+| `title="Titre"` | `<template #header><h2>Titre</h2></template>` (ou composant de titre Malio) |
+| `<MalioDrawer>contenu</MalioDrawer>` | inchangé (slot par défaut = body) |
+| `drawer-class` | inchangé |
+| `show-close` | inchangé |
+| _(nouveau)_ | `side`, `dismissable`, `closeOnEscape`, `ariaLabel`, slots `#header`/`#footer` |
+
+Les défauts des nouvelles props reproduisent au plus près le comportement actuel
+(`side="right"`, `showClose=true`, `dismissable=true`).
+
+## Tests (Vitest + @vue/test-utils, jsdom)
+
+À couvrir, en plus des tests de rendu/props/emits existants :
+
+- rendu des 3 slots (`#header`, défaut, `#footer`) ;
+- `side` left/right → classes/transition attendues ;
+- `showClose` toggle la croix ; clic croix → ferme + emit ;
+- `dismissable` : clic backdrop ferme / ne ferme pas ;
+- `closeOnEscape` : Échap ferme / ne ferme pas ;
+- scroll-lock : `body` `overflow:hidden` à l'ouverture, restauré à la fermeture ;
+- focus-trap : focus initial dans le panneau ; restitution au déclencheur ;
+- ARIA : `aria-labelledby` quand `#header`, `aria-label` sinon ;
+- pattern contrôlé/non-contrôlé.
+
+## Hors périmètre (YAGNI)
+
+- côtés `top`/`bottom` (sheets) — extensible plus tard via `side` ;
+- prop `size` sémantique — `drawerClass` suffit ;
+- hook `before-close` ;
+- empilement de plusieurs drawers (un seul scroll-lock géré simplement).

docs/superpowers/specs/2026-05-21-refonte-playground-design.md

@@ -0,0 +1,124 @@
+# Refonte du système de playground
+
+Date : 2026-05-21
+Branche : `feature/MUI-34-revoir-le-systeme-de-playground`
+
+## Contexte
+
+Le playground actuel (`.playground/`) est une **fausse SPA** : une unique page
+`index.vue` contient une sidebar codée à la main et charge dynamiquement les
+pages de démo via `import.meta.glob` + `<component :is>`. Il n'y a ni vrai
+routage, ni layout, et la sidebar ne réutilise pas le composant `MalioSidebar`
+de la bibliothèque.
+
+Les pages de démo existent déjà dans `.playground/pages/composant/<catégorie>/<nom>.vue`
+mais ne sont pas exploitées comme de vraies routes.
+
+## Objectif
+
+Refondre le playground autour du **vrai routage fichier de Nuxt** et d'un
+**layout par défaut** qui embarque le composant `MalioSidebar` de production
+(dogfooding du composant).
+
+## Décisions validées
+
+| Sujet | Décision |
+|-------|----------|
+| Navigation | Vrai routage Nuxt + layout dédié |
+| Construction de la sidebar | Liste manuelle centralisée |
+| Habillage du layout | Sidebar + contenu seul (épuré, chaque page gère son titre) |
+| Page d'accueil | Page de bienvenue simple |
+| Surbrillance lien actif | Hors périmètre (MalioSidebar inchangé) |
+
+## Architecture
+
+### 1. Config de navigation centralisée
+
+Nouveau fichier `.playground/playground.nav.ts` exportant un tableau
+`SidebarSection[]` (type exporté par `MalioSidebar`). Les sections sont
+définies manuellement ; chaque item est un `{ label, to }` pointant vers la
+route de démo.
+
+```ts
+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' },
+    ],
+  },
+  // … autres sections (Champs, Sélections, Navigation, Données, Divers)
+]
+```
+
+Les routes correspondent exactement aux fichiers existants dans
+`.playground/pages/composant/`. Liste à couvrir :
+
+- **button/** : `button`, `buttonIcon`
+- **checkbox/** : `checkbox`
+- **radio/** : `radioButton`
+- **input/** : `inputText`, `inputNumber`, `inputAmount`, `inputEmail`,
+  `inputPassword`, `inputPhone`, `inputTextArea`, `inputAutocomplete`,
+  `inputUpload`, `inputRichText`
+- **select/** : `select`, `selectCheckbox`
+- **time/** : `time`
+- **tab/** : `tabList`
+- **sidebar/** : `sidebar`
+- **drawer/** : `drawer`
+- **datatable/** : `datatable`
+- **site/** : `siteSelector`
+- **form/** : `client`
+
+Le regroupement en sections et les libellés affichés sont au choix du
+développeur (manuel). Les routes, elles, sont imposées par les fichiers.
+
+### 2. Layout par défaut
+
+Nouveau fichier `.playground/layouts/default.vue` :
+
+- Conteneur `flex` pleine hauteur (`h-screen`).
+- `<MalioSidebar :sections="navSections">` à gauche.
+  - Slots `logo` / `logo-collapsed` : logos `LOGO_MALIO.png` /
+    `LOGO_MALIO_COLLAPSED.png` (servis depuis le `public/` du layer),
+    enveloppés dans un `<NuxtLink to="/">` pour revenir à l'accueil.
+  - Collapse géré en interne par le composant (mode non-contrôlé).
+- `<main class="flex-1 overflow-y-auto p-6"><slot /></main>` à droite.
+
+Le layout `default` s'applique automatiquement à toutes les pages du
+playground — aucune page n'a besoin de `definePageMeta({ layout })`.
+
+### 3. Page d'accueil
+
+`.playground/pages/index.vue` réécrite en page de bienvenue simple :
+titre + invitation à choisir un composant dans la sidebar. Toute la logique
+de glob / chargement dynamique / sidebar maison est supprimée.
+
+### 4. Pages de démo
+
+**Inchangées.** Elles sont déjà des routes `/composant/<cat>/<nom>` et
+hériteront automatiquement du layout `default`.
+
+### 5. Mise à jour du skill `creating-malio-component`
+
+Ajouter une étape au skill : lors de la création d'un nouveau composant,
+ajouter son entrée dans `.playground/playground.nav.ts` pour qu'il apparaisse
+dans la sidebar.
+
+## Hors périmètre
+
+- Surbrillance de l'item actif dans `MalioSidebar` (ticket dédié si besoin).
+- Toute autre évolution de `MalioSidebar`.
+- Refonte du contenu des pages de démo existantes.
+
+## Critères de réussite
+
+- `npm run dev` lance le playground avec `MalioSidebar` dans un layout.
+- Cliquer sur un item de la sidebar change l'URL et affiche la bonne démo.
+- Le logo ramène à l'accueil ; l'accueil affiche le message de bienvenue.
+- Plus aucune trace de la sidebar maison ni du chargement dynamique dans
+  `index.vue`.
+- `npm run lint` et `npm run test` passent.

package-lock.json

@@ -10,7 +10,10 @@
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",
+        "@tiptap/extension-color": "^3.22.5",
+        "@tiptap/extension-highlight": "^3.22.5",
         "@tiptap/extension-placeholder": "^3.22.5",
+        "@tiptap/extension-text-style": "^3.22.5",
         "@tiptap/pm": "^3.22.5",
         "@tiptap/starter-kit": "^3.22.5",
         "@tiptap/vue-3": "^3.22.5",
@@ -183,7 +186,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -809,7 +811,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -850,7 +851,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -1575,7 +1575,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
       "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@floating-ui/core": "^1.7.5",
         "@floating-ui/utils": "^0.2.11"
@@ -2670,7 +2669,6 @@
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.1.tgz",
       "integrity": "sha512-UjBFt72dnpc+83BV3OIbCT0YHLevJtgJCHpxMX0YRKWLDhhbcDdUse87GtsQBrjvOzK7WUNUYLDS/hQLYev5rA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "c12": "^3.3.3",
         "consola": "^3.4.2",
@@ -2758,7 +2756,6 @@
       "integrity": "sha512-S+wHJdYDuyk9I43Ej27y5BeWMZgi7R/UVql3b3qtT35d0fbpXW7fUenzhLRCCDC6O10sjguc6fcMcR9sMKvV8g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/shared": "^3.5.27",
         "defu": "^6.1.4",
@@ -5049,7 +5046,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.22.5.tgz",
       "integrity": "sha512-L1lhWz6ujGny8LduTJ7MBWYhzigwOvfUJUrJ7IzOJSuy3+OAzisdGDD1GV7LEO/hU0Hr2Mkm1wajRIHExvS9HQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -5142,6 +5138,19 @@
         "@tiptap/pm": "3.22.5"
       }
     },
+    "node_modules/@tiptap/extension-color": {
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-color/-/extension-color-3.22.5.tgz",
+      "integrity": "sha512-4aTygOUlTFBYCvJy67SeKVdXCQw7du3Rj+N5ZutVnDnrpfzUBWsO7f+I+iDS8eMQFbWxVFLlWxGMcTbjtk1a+Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-text-style": "3.22.5"
+      }
+    },
     "node_modules/@tiptap/extension-document": {
       "version": "3.22.5",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.22.5.tgz",
@@ -5223,6 +5232,19 @@
         "@tiptap/core": "3.22.5"
       }
     },
+    "node_modules/@tiptap/extension-highlight": {
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-3.22.5.tgz",
+      "integrity": "sha512-byWruAOKcqRN0OuzVSKqLLrced3M9AZaR2pD1BV3aUZHzMzeBjLBfByh8s4lExH2Z547xQUdHHnUflBQ572I5A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.22.5"
+      }
+    },
     "node_modules/@tiptap/extension-horizontal-rule": {
       "version": "3.22.5",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.22.5.tgz",
@@ -5272,7 +5294,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.22.5.tgz",
       "integrity": "sha512-cVO3ZHCgxAWZ4zrFSs81FO2nyCk1wb2EHkpLpW98FzbJLkN9rDkazhW99P3HRWy/CvUldOT+8ecI1YrQtBojMg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -5373,6 +5394,19 @@
         "@tiptap/core": "3.22.5"
       }
     },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-3.22.5.tgz",
+      "integrity": "sha512-jt63jy8YbhZJUGMxTUzeivLhowGtFp6YbCFrrmZJ7G6IHu8X8LJzO81ksz5nT5l8DKpldGwnINUfA6iE91JIAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.22.5"
+      }
+    },
     "node_modules/@tiptap/extension-underline": {
       "version": "3.22.5",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.22.5.tgz",
@@ -5391,7 +5425,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.22.5.tgz",
       "integrity": "sha512-Ifg4MzKCj3uRqe3ieTwYnomu2y4p7EXr2avVSKZYfh12i2dyWe2Gkn1KuZDREANVE+gHqFlQjJRYzhJFwzSCrg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -5406,7 +5439,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.22.5.tgz",
       "integrity": "sha512-Cr9Mv4igxvI2tKMiahw48sZxva3PfDzypErH8IB82N+9qa9n9ygVMt0BOaDg53hLKxEEVeYr2S/wCcJIVFgBTw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prosemirror-changeset": "^2.3.0",
         "prosemirror-commands": "^1.6.2",
@@ -5550,8 +5582,7 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/jsonfile": {
       "version": "6.1.4",
@@ -5574,7 +5605,6 @@
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
       "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/linkify-it": "^5",
         "@types/mdurl": "^2"
@@ -5655,7 +5685,6 @@
       "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.56.0",
         "@typescript-eslint/types": "8.56.0",
@@ -6500,7 +6529,6 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
       "integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.29.0",
         "@vue/compiler-core": "3.5.28",
@@ -6723,7 +6751,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7227,7 +7254,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7623,7 +7649,6 @@
       "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
       "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "consola": "^3.2.3"
       }
@@ -8824,7 +8849,6 @@
       "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -8894,7 +8918,6 @@
       "integrity": "sha512-O0piBKY36YSJhlFSG8p9VUdPV/SxxS4FYDWVpr/9GJuMaepzwlf4J8I4ov1b+ySQfDTPhc3DtLaxcT1fN0yqCg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",
@@ -10295,7 +10318,6 @@
       "integrity": "sha512-hzhFiqlL9Ko1B2APCamGIchM3Bjng5+CTX7kLL1q/NB2Lp4Uqpe4ZZicc7RU4CTCe4Vj7Q/Eb3UE/IacL1Ta5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@akryum/tinypool": "^0.3.1",
         "@histoire/app": "^1.0.0-beta.1",
@@ -11958,7 +11980,6 @@
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
       "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "argparse": "^2.0.1",
         "entities": "^4.4.0",
@@ -12724,7 +12745,6 @@
       "integrity": "sha512-bl+0rFcT5Ax16aiWFBFPyWcsTob19NTZaDL5P6t0MQdK63AtgS6fN6fwvwdbXtnTk6/YdCzlmuLzXhSM22h0OA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dxup/nuxt": "^0.3.2",
         "@nuxt/cli": "^3.33.0",
@@ -13079,7 +13099,6 @@
       "integrity": "sha512-7rQ3QdJwobMQLMZwQaPuPYMEF2fDRZwf51lZ//V+bA37nejjKW5ifMHbbCwvA889Y4RLhT+/wLJpPRhAoBaZYw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@oxc-project/types": "^0.112.0"
       },
@@ -13455,7 +13474,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -14024,7 +14042,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
       "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -14767,7 +14784,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
       "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -15783,7 +15799,6 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -16314,7 +16329,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16715,7 +16729,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "napi-postinstall": "^0.3.0"
       },
@@ -17011,7 +17024,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -17503,7 +17515,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
       "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
         "@vue/compiler-sfc": "3.5.28",
@@ -17550,7 +17561,6 @@
       "integrity": "sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "debug": "^4.4.0",
         "eslint-scope": "^8.2.0 || ^9.0.0",
@@ -17588,7 +17598,6 @@
       "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^6.6.4"
       },
@@ -17823,7 +17832,6 @@
       "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
       "devOptional": true,
       "license": "ISC",
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },

package.json

@@ -42,7 +42,10 @@
   "dependencies": {
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/tailwindcss": "^6.14.0",
+    "@tiptap/extension-color": "^3.22.5",
+    "@tiptap/extension-highlight": "^3.22.5",
     "@tiptap/extension-placeholder": "^3.22.5",
+    "@tiptap/extension-text-style": "^3.22.5",
     "@tiptap/pm": "^3.22.5",
     "@tiptap/starter-kit": "^3.22.5",
     "@tiptap/vue-3": "^3.22.5",