feat : ajoute la section Dates & Heures dans la nav du playground (#MUI-33)

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

.claude/settings.local.json

@@ -0,0 +1,20 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run:*)",
+      "Bash(npx vitest:*)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/Checkbox.vue''|from ''../../../app/components/malio/checkbox/Checkbox.vue''|\" .playground/pages/composant/checkbox.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/RadioButton.vue''|from ''../../../app/components/malio/radio/RadioButton.vue''|\" .playground/pages/composant/radioButton.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/Time.vue''|from ''../../../app/components/malio/time/Time.vue''|\" .playground/pages/composant/time.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/InputTextArea.vue''|from ''../../../app/components/malio/input/InputTextArea.vue''|\" .playground/pages/composant/inputTextArea.vue)",
+      "Bash(npx nuxi:*)",
+      "Bash(mkdir -p button input select checkbox radio time)",
+      "Bash(mv buttonIcon.story.vue button/)",
+      "Bash(mv inputText.story.vue inputAmount.story.vue inputNumber.story.vue inputPassword.story.vue inputTextArea.story.vue inputUpload.story.vue input/)",
+      "Bash(mv InputSelect.story.vue selectCheckbox.story.vue select/)",
+      "Bash(mv inputCheckbox.story.vue checkbox/)",
+      "Bash(npx eslint *)",
+      "Bash(echo \"LINT EXIT: $?\")"
+    ]
+  }
+}

.claude/skills/creating-malio-component/SKILL.md

@@ -0,0 +1,223 @@
+---
+name: creating-malio-component
+description: Use when creating a new UI component in the @malio/layer-ui Nuxt layer — covers component, tests, playground page, and Histoire story
+---
+
+# Creating a Malio Component
+
+## Overview
+
+Step-by-step process for creating a component in `@malio/layer-ui`. Each component requires 6 deliverables : le `.vue`, les tests, la page playground, la story Histoire, la mise à jour du CHANGELOG, et la mise à jour du `COMPONENTS.md`.
+
+## When to Use
+
+- Création d'un nouveau composant dans `app/components/malio/`
+- Ajout d'une variante d'un composant existant (ex: InputPassword basé sur InputText)
+
+## Workflow
+
+```dot
+digraph create_component {
+  rankdir=TB;
+  "1. Lire les fichiers de référence" -> "2. Créer le composant .vue";
+  "2. Créer le composant .vue" -> "3. Créer les tests .test.ts";
+  "3. Créer les tests .test.ts" -> "4. npm run test + npm run lint";
+  "4. npm run test + npm run lint" -> "Tests OK?" [shape=diamond];
+  "Tests OK?" -> "5. Créer la page playground" [label="oui"];
+  "Tests OK?" -> "3. Créer les tests .test.ts" [label="non, corriger"];
+  "5. Créer la page playground" -> "6. Créer la story Histoire";
+  "6. Créer la story Histoire" -> "7. Mettre à jour CHANGELOG.md";
+  "7. Mettre à jour CHANGELOG.md" -> "8. Mettre à jour COMPONENTS.md";
+}
+```
+
+## Étapes
+
+### 1. Lire les fichiers de référence
+
+Identifier le composant le plus proche comme base (ex: `InputText.vue` pour `InputPassword.vue`). Lire :
+- Le composant de référence : `app/components/malio/<Ref>.vue`
+- Ses tests : `app/components/malio/<Ref>.test.ts`
+
+### 2. Créer le composant `.vue`
+
+**Fichier :** `app/components/malio/<NomComposant>.vue`
+
+**Checklist obligatoire :**
+
+| Élément | Pattern |
+|---------|---------|
+| `defineOptions` | `{ name: 'Malio<Nom>', inheritAttrs: false }` |
+| Props | `defineProps<T>()` + `withDefaults()` — props communes : `id`, `label`, `modelValue`, `inputClass`, `labelClass`, `groupClass`, `disabled`, `readonly`, `hint`, `error`, `success` |
+| Contrôlé / non-contrôlé | `isControlled = computed(() => props.modelValue !== undefined)` + `localValue` en fallback |
+| Classes CSS | Fusionnées via `twMerge()` pour permettre l'override consommateur |
+| Accessibilité | `aria-invalid`, `aria-describedby`, `label[for]` lié à `input[id]` |
+| Icônes | `Icon as IconifyIcon` depuis `@iconify/vue` (pas `@nuxt/icon`) |
+| ID généré | `useId()` + prefix unique (ex: `malio-input-password-${generatedId}`) |
+
+### 3. Créer les tests `.test.ts`
+
+**Fichier :** `app/components/malio/<NomComposant>.test.ts` (colocalisé)
+
+**Pattern de montage :**
+
+```ts
+import { mount } from '@vue/test-utils'
+import type { DefineComponent } from 'vue'
+import MonComposant from './MonComposant.vue'
+
+const ComposantForTest = MonComposant as DefineComponent<MonComposantProps>
+
+const mountComponent = (props: MonComposantProps = {}) =>
+  mount(ComposantForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+```
+
+**Tests minimum à couvrir :**
+- Rendu initial avec valeur
+- Rendu du label
+- Emit `update:modelValue`
+- Props `disabled`, `readonly`
+- États `error`, `success`, `hint` (messages + classes CSS)
+- Accessibilité (`aria-invalid`, `label[for]` / `input[id]`)
+- Comportements spécifiques au composant
+
+**Attention stub IconifyIcon :** Le stub basé sur le nom `IconifyIcon` ne remplace pas toujours le vrai composant `@iconify/vue`. Pour tester les props du composant Icon (ex: `icon`), utiliser `findComponent` avec l'import réel :
+
+```ts
+import { Icon as IconifyIcon } from '@iconify/vue'
+// ...
+const iconComponent = wrapper.findComponent(IconifyIcon)
+expect(iconComponent.props('icon')).toBe('mdi:eye-outline')
+```
+
+### 4. Vérification
+
+```bash
+npm run test    # Tous les tests passent
+npm run lint    # Pas d'erreurs
+```
+
+### 5. Créer la page playground
+
+**Fichier :** `.playground/pages/composant/<categorie>/<nomComposant>.vue` (camelCase, dans le sous-dossier de catégorie)
+
+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>
+```
+
+**Variantes typiques :** simple, avec label, désactivé, readonly, hint, erreur, succès, validation dynamique.
+
+### 6. Créer la story Histoire
+
+**Fichier :** `app/story/<nomComposant>.story.vue` (camelCase)
+
+**Structure :**
+
+```vue
+<template>
+  <Story title="Category/Name">
+    <!-- Variantes avec v-model et valeurs initiales -->
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioNomComposant
+Description courte.
+## Props détaillées
+<!-- Documenter chaque prop : type, description, défaut, comportement -->
+## Comportement
+## Accessibilité
+## Events
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioMonComposant from '../components/malio/MonComposant.vue'
+// refs pour chaque variante avec valeurs initiales
+</script>
+```
+
+**Important : initial state avec variantes.** La story doit contenir des exemples visuels directement visibles (pas un composant vide). Chaque variante a un `v-model` avec une `ref` initialisée. Variantes typiques à inclure :
+- Simple (avec label)
+- Sans icône (`display-icon="false"`) si applicable
+- Avec hint
+- Désactivé (avec valeur pré-remplie)
+- Readonly (avec valeur pré-remplie)
+- Erreur (avec valeur + message d'erreur)
+- Succès (avec valeur + message de succès)
+
+### 7. Mettre à jour le CHANGELOG
+
+**Fichier :** `CHANGELOG.md` à la racine du projet.
+
+Ajouter une ligne dans la section `### Added` de la version courante. Le numéro de ticket se trouve dans le nom de la branche Git (ex: branche `feat/MUI-8-composant-password` → ticket `MUI-8`).
+
+**Format :**
+- Avec numéro de ticket : `* [#MUI-8] Création d'un composant mot de passe`
+- Sans numéro de ticket : `* Création d'un composant textarea`
+
+Pour extraire le numéro de ticket depuis la branche courante :
+```bash
+git branch --show-current | grep -oP '(MUI-\d+|\d{3,})' | head -1
+```
+
+### 8. Mettre à jour COMPONENTS.md
+
+**Fichier :** `COMPONENTS.md` à la racine du projet.
+
+Ce fichier sert de documentation de référence pour les projets qui consomment `@malio/layer-ui`. Il est lu par Claude dans les projets consommateurs pour connaître les composants disponibles et leurs props.
+
+**Ajouter une section pour le nouveau composant** en suivant le format existant :
+
+```markdown
+## MalioNomComposant
+
+Description courte du composant.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| ... | ... | ... | ... |
+
+**Events :** `update:modelValue(value: string)`
+
+\`\`\`vue
+<MalioNomComposant v-model="val" label="Exemple" />
+\`\`\`
+```
+
+**Checklist :**
+- Toutes les props documentées avec type, défaut et description
+- Events listés
+- Slots listés si applicable
+- 2-5 exemples d'utilisation couvrant les cas courants (simple, avec options, disabled, erreur)
+- Section placée par ordre logique (inputs ensemble, boutons ensemble, etc.)
+
+## Common Mistakes
+
+Cette section est alimentée au fur et à mesure des retours utilisateur et des problèmes rencontrés. **Si un retour ou un bug est identifié lors de la création d'un composant, ajouter une ligne dans ce tableau.**
+
+| Erreur | Solution |
+|--------|----------|
+| Stub IconifyIcon ne fonctionne pas dans les tests | Utiliser `findComponent(IconifyIcon)` avec l'import réel pour tester les props |
+| Oubli de `inheritAttrs: false` | Toujours dans `defineOptions` — sinon les attrs se dupliquent |
+| Composant absent de la sidebar du playground | Ajouter son entrée `{label, to}` dans `.playground/playground.nav.ts` (la page n'est plus auto-découverte) |
+| Padding input pas ajusté avec icône | Ajouter `!pr-10` (ou équivalent) quand une icône est présente à droite |
+| Story sans initial state | Toujours initialiser les `ref` avec des valeurs pour que les variantes soient visibles dès le chargement |
+| CHANGELOG oublié | Toujours ajouter la ligne dans `### Added` avant de commit |
+| COMPONENTS.md pas mis à jour | Ajouter la doc du composant dans `COMPONENTS.md` — c'est la référence pour les projets consommateurs |

.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/button/button.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+</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">Primary</h2>
+      <div class="grid grid-cols-2 items-start gap-3">
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <MalioButton label="Valider" />
+        <MalioButton label="Enregistrer" />
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <MalioButton label="Valider" disabled />
+        <MalioButton label="Valider" disabled />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">Secondary</h2>
+      <div class="grid grid-cols-2 items-start gap-3">
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
+        <MalioButton label="Modifier" variant="secondary" />
+        <MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
+        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
+        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover"  icon-name="mdi:pencil" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
+        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
+        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active"  icon-name="mdi:pencil" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
+        <MalioButton label="Modifier" variant="secondary" disabled />
+        <MalioButton label="Modifier" variant="secondary" disabled  icon-name="mdi:pencil" icon-position="left" />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">Tertiary</h2>
+      <div class="grid grid-cols-2 items-start gap-3">
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <MalioButton label="Voir plus" variant="tertiary" />
+        <MalioButton label="Afficher" variant="tertiary" />
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
+        <MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
+        <MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <MalioButton label="Voir plus" variant="tertiary" disabled />
+        <MalioButton label="Afficher" variant="tertiary" disabled />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">Danger</h2>
+      <div class="grid grid-cols-2 items-start gap-3">
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash" icon-position="left" />
+        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:cancel-bold" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash" icon-position="left" />
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:cancel-bold" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash" icon-position="left" />
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:cancel-bold" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash" icon-position="left" />
+        <MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:cancel-bold" icon-position="left" />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">Avec icône</h2>
+      <div class="grid grid-cols-2 items-start gap-3">
+        <MalioButton label="Valider" icon-name="mdi:check" />
+        <MalioButton label="Icône à gauche" icon-name="mdi:arrow-left" icon-position="left" />
+        <MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil-outline" />
+        <MalioButton label="Annuler" variant="tertiary" icon-name="mdi:close" />
+        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
+      <div class="grid grid-cols-2 items-start gap-3">
+        <MalioButton label="Pleine largeur" button-class="w-full" />
+        <MalioButton label="Compact" button-class="w-auto px-6" />
+      </div>
+    </div>
+  </div>
+</template>

.playground/pages/composant/button/buttonIcon.vue

@@ -0,0 +1,155 @@
+<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>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Retour"
+        />
+        <MalioButtonIcon
+          icon="mdi:pencil-outline"
+          aria-label="Modifier"
+        />
+        <MalioButtonIcon
+          icon="mdi:close"
+          aria-label="Fermer"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:download"
+          aria-label="Télécharger"
+        />
+        <MalioButtonIcon
+          icon="mdi:bell-outline"
+          aria-label="Notifications"
+        />
+        <MalioButtonIcon
+          icon="mdi:cog-outline"
+          aria-label="Paramètres"
+        />
+        <MalioButtonIcon
+          icon="mdi:view-grid-outline"
+          aria-label="Grille"
+        />
+        <MalioButtonIcon
+          icon="mdi:format-list-bulleted"
+          aria-label="Liste"
+        />
+        <MalioButtonIcon
+          icon="mdi:folder-outline"
+          aria-label="Dossier"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Retour"
+          disabled
+        />
+        <MalioButtonIcon
+          icon="mdi:pencil-outline"
+          aria-label="Modifier"
+          disabled
+        />
+        <MalioButtonIcon
+          icon="mdi:close"
+          aria-label="Fermer"
+          disabled
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
+      <div class="flex items-center gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Petit"
+          :icon-size="16"
+        />
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Normal"
+          :icon-size="24"
+        />
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Grand"
+          :icon-size="32"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Ghost</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Retour"
+          variant="ghost"
+        />
+        <MalioButtonIcon
+          icon="mdi:pencil-outline"
+          aria-label="Modifier"
+          variant="ghost"
+        />
+        <MalioButtonIcon
+          icon="mdi:cancel-bold"
+          aria-label="Fermer"
+          variant="ghost"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Retour"
+          variant="ghost"
+          disabled
+        />
+        <MalioButtonIcon
+          icon="mdi:pencil-outline"
+          aria-label="Modifier"
+          variant="ghost"
+          disabled
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec événement click</h2>
+      <div class="flex items-center gap-4">
+        <MalioButtonIcon
+          icon="mdi:plus"
+          aria-label="Incrémenter"
+          @click="counter++"
+        />
+        <span class="text-lg font-semibold">{{ counter }}</span>
+        <MalioButtonIcon
+          icon="mdi:minus"
+          aria-label="Décrémenter"
+          @click="counter--"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const counter = ref(0)
+</script>

.playground/pages/composant/checkbox/checkbox.vue

@@ -87,7 +87,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
+import MalioCheckbox from '../../../../app/components/malio/checkbox/Checkbox.vue'
 const simpleValue = ref(false)
 const checkedValue = ref(true)
 const hintValue = ref(false)

.playground/pages/composant/datatable/datatable.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const page = ref(1)
+const perPage = ref(10)
+const filtreNom = ref('')
+const filtreVille = ref<string | number | null>(null)
+
+const columns = [
+  { key: 'nom', label: 'Nom' },
+  { key: 'prenom', label: 'Prénom' },
+  { key: 'ville', label: 'Ville' },
+  { key: 'montant', label: 'Montant' },
+]
+
+const allItems = [
+  { id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
+  { id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
+  { id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
+  { id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
+  { id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
+  { id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
+  { id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
+  { id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
+  { id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
+  { id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
+  { id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
+  { id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
+  { id: 13, nom: 'Roux', prenom: 'Hugo', ville: 'Paris', montant: 2800 },
+  { id: 14, nom: 'David', prenom: 'Léa', ville: 'Lyon', montant: 670 },
+  { id: 15, nom: 'Bertrand', prenom: 'Lucas', ville: 'Marseille', montant: 1950 },
+]
+
+const filteredItems = computed(() => {
+  return allItems.filter((item) => {
+    if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
+    if (filtreVille.value && item.ville !== filtreVille.value) return false
+    return true
+  })
+})
+
+const paginatedItems = computed(() => {
+  const start = (page.value - 1) * perPage.value
+  return filteredItems.value.slice(start, start + perPage.value)
+})
+
+function onRowClick(item: Record<string, unknown>) {
+  alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">DataTable avec filtres et pagination</h2>
+      <MalioDataTable
+        :columns="columns"
+        :items="paginatedItems"
+        :total-items="filteredItems.length"
+        v-model:page="page"
+        v-model:per-page="perPage"
+        @row-click="onRowClick"
+      >
+        <template #header-nom>
+          <input
+            v-model="filtreNom"
+            type="text"
+            placeholder="Nom"
+            class="w-full border-0 border-b border-black bg-transparent px-0 py-1 outline-none text-[20px]"
+          >
+        </template>
+
+        <template #header-ville>
+          <select
+            :value="filtreVille ?? ''"
+            class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-[20px] outline-none"
+            @change="filtreVille = ($event.target as HTMLSelectElement).value || null"
+          >
+            <option value="">Ville</option>
+            <option value="Paris">Paris</option>
+            <option value="Lyon">Lyon</option>
+            <option value="Marseille">Marseille</option>
+          </select>
+        </template>
+
+        <template #cell-montant="{ item }">
+          <strong>{{ item.montant }} €</strong>
+        </template>
+      </MalioDataTable>
+    </div>
+  </div>
+</template>

.playground/pages/composant/date/date.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="space-y-6 p-4">
+    <h1 class="text-2xl font-bold">MalioDate</h1>
+
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[480px] space-y-3">
+        <h2 class="font-semibold">Large (480px)</h2>
+        <MalioDate
+          v-model="value"
+          label="Date de naissance"
+          hint="Clique pour ouvrir le calendrier"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
+        </div>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="rounded bg-m-primary px-3 py-1.5 text-white"
+            @click="value = '2026-12-25'"
+          >
+            Forcer le 25/12/2026
+          </button>
+          <button
+            type="button"
+            class="rounded border px-3 py-1.5"
+            @click="value = null"
+          >
+            Réinitialiser
+          </button>
+        </div>
+      </div>
+
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">ERP (396px)</h2>
+        <MalioDate
+          v-model="erpValue"
+          label="Date du rendez-vous"
+          hint="Largeur cible ERP"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO) : <code>{{ erpValue ?? 'null' }}</code></p>
+        </div>
+        <MalioDate
+          v-model="bounded"
+          label="Date bornée"
+          :min="todayIso"
+          :max="maxIso"
+          hint="Entre aujourd'hui et +30 jours"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const pad = (n: number) => String(n).padStart(2, '0')
+const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+const now = new Date()
+const todayIso = toIso(now)
+const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
+
+const value = ref<string | null>(null)
+const erpValue = ref<string | null>(null)
+const bounded = ref<string | null>(null)
+</script>

.playground/pages/composant/date/dateRange.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="space-y-6 p-4">
+    <h1 class="text-2xl font-bold">MalioDateRange</h1>
+
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[480px] space-y-3">
+        <h2 class="font-semibold">Large (480px)</h2>
+        <MalioDateRange
+          v-model="value"
+          label="Période"
+          hint="Clique deux fois pour définir une plage"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
+          <p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
+        </div>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="rounded bg-m-primary px-3 py-1.5 text-white"
+            @click="value = {start: '2026-12-20', end: '2026-12-31'}"
+          >
+            Forcer 20→31/12/2026
+          </button>
+          <button
+            type="button"
+            class="rounded border px-3 py-1.5"
+            @click="value = null"
+          >
+            Réinitialiser
+          </button>
+        </div>
+      </div>
+
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">ERP (396px)</h2>
+        <MalioDateRange
+          v-model="erpValue"
+          label="Période"
+          hint="Largeur cible ERP"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Début : <code>{{ erpValue?.start ?? 'null' }}</code></p>
+          <p>Fin : <code>{{ erpValue?.end ?? 'null' }}</code></p>
+        </div>
+        <MalioDateRange
+          v-model="bounded"
+          label="Plage bornée"
+          :min="todayIso"
+          :max="maxIso"
+          hint="Entre aujourd'hui et +30 jours"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+type RangeValue = {start: string; end: string}
+
+const pad = (n: number) => String(n).padStart(2, '0')
+const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+const now = new Date()
+const todayIso = toIso(now)
+const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
+
+const value = ref<RangeValue | null>(null)
+const erpValue = ref<RangeValue | null>(null)
+const bounded = ref<RangeValue | null>(null)
+</script>

.playground/pages/composant/date/dateWeek.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="space-y-6 p-4">
+    <h1 class="text-2xl font-bold">MalioDateWeek</h1>
+
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[480px] space-y-3">
+        <h2 class="font-semibold">Large (480px)</h2>
+        <MalioDateWeek
+          v-model="value"
+          label="Semaine"
+          hint="Clique un jour ou un n° de semaine"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur : <code>{{ value ?? 'null' }}</code></p>
+        </div>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="rounded bg-m-primary px-3 py-1.5 text-white"
+            @click="value = '2026-W52'"
+          >
+            Forcer 2026-W52
+          </button>
+          <button
+            type="button"
+            class="rounded border px-3 py-1.5"
+            @click="value = null"
+          >
+            Réinitialiser
+          </button>
+        </div>
+      </div>
+
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">ERP (396px)</h2>
+        <MalioDateWeek
+          v-model="erpValue"
+          label="Semaine"
+          hint="Largeur cible ERP"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur : <code>{{ erpValue ?? 'null' }}</code></p>
+        </div>
+        <MalioDateWeek
+          v-model="bounded"
+          label="Semaine bornée"
+          :min="todayIso"
+          :max="maxIso"
+          hint="Entre aujourd'hui et +60 jours"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const pad = (n: number) => String(n).padStart(2, '0')
+const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+const now = new Date()
+const todayIso = toIso(now)
+const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
+
+const value = ref<string | null>(null)
+const erpValue = ref<string | null>(null)
+const bounded = ref<string | null>(null)
+</script>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const drawerDefault = ref(false)
+const drawerNoClose = ref(false)
+const drawerCustomWidth = ref(false)
+const drawerWithForm = 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>
+      </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>
+      </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">
+          <MalioInputText label="Nom" />
+          <MalioInputText label="Prénom" />
+          <MalioInputText label="Email" />
+          <MalioButton label="Enregistrer" button-class="w-full" @click="drawerWithForm = false" />
+        </div>
+      </MalioDrawer>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,322 @@
+<template>
+  <div class="flex justify-center">
+    <div class="w-[1348px]">
+      <div class="flex gap-3 mt-[46px]">
+        <MalioButtonIcon
+          icon="mdi:arrow-left-bold"
+          icon-size="24"
+          aria-label="Précédent"
+          variant="ghost"
+        />
+        <h1 class="text-[32px] text-m-primary font-bold">Ajouter un client</h1>
+      </div>
+      <div class="mt-[48px] grid grid-cols-3 gap-x-[80px] gap-y-8">
+        <MalioInputText
+          label="Nom du client (Entreprise)"
+        />
+        <MalioInputText
+          label="Nom du contact principal"
+        />
+        <MalioInputText
+          label="Prénom du contact principal"
+        />
+        <MalioSelectCheckbox
+          v-model="multiselectValue"
+          label="Catégorie"
+          :options="[
+            {label: 'Catégorie 1', value: 'Catégorie 1'},
+            {label: 'Catégorie 2', value: 'Catégorie 2'}
+          ]"
+        />
+        <MalioInputPhone
+          v-for="(_, index) in phones"
+          :key="index"
+          v-model="phones[index]"
+          label="Téléphone"
+          add-icon-name="mdi:plus"
+          :addable="phones.length === 1"
+          @add="addPhoneInput"
+        />
+        <MalioInputEmail
+          label="Email"
+        />
+        <MalioSelect
+          v-model="distributeur"
+          value=""
+          label="Distributeur / Courtier"
+          :options="[
+            {label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
+            {label: 'Distributeur', value: 'Distributeur'},
+            {label: 'Courtier', value: 'Courtier'},
+          ]"
+        />
+        <MalioSelect
+          v-model="nomCourtier"
+          value=""
+          label="Nom du courtier"
+          :options="[
+            {label: 'Nom 1', value: 'Nom 1'}
+          ]"
+        />
+        <MalioSelect
+          v-model="nomDistributeur"
+          value=""
+          label="Nom du distributeur"
+          :options="[
+            {label: 'Nom 1', value: 'Nom 1'}
+          ]"
+        />
+        <MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
+      </div>
+
+      <div class="mt-12 flex justify-center">
+        <MalioButton label="Valider" variant="primary"/>
+      </div>
+      <div class="mt-[60px]">
+        <MalioTabList :tabs="tabs" v-model="tabsValue">
+          <template #information>
+            <div class="grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
+              <MalioInputTextArea label="Descritpion" resize="none" groupClass="row-span-2" textInput="h-full"/>
+              <MalioInputText v-model="concurrent" label="Concurrent"/>
+              <MalioDate
+                v-model="dateCreation"
+                label="Date création"
+              />
+              <MalioInputText label="Nombre de salariés" />
+              <MalioInputAmount label="CA"/>
+              <MalioInputText label="Dirigeant" />
+              <MalioInputText label="Résultat" />
+            </div>
+            <div class="mt-12 flex justify-center">
+              <MalioButton label="Valider" variant="primary"/>
+            </div>
+          </template>
+          <template #adresses>
+            <div class="relative grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
+              <MalioButtonIcon
+                icon="mdi:delete-outline"
+                aria-label="Supprimer l'adresse"
+                variant="ghost"
+                button-class="absolute top-3 right-3"
+                @click="onDeleteAdresse"
+              />
+              <MalioCheckbox label="Prospect" groupClass="self-center"/>
+              <MalioCheckbox label="Adresse de livraison" groupClass="self-center"/>
+              <MalioCheckbox label="Facturation" groupClass="self-center"/>
+              <MalioSelectCheckbox
+                v-model="multiselectValue"
+                label="Catégorie"
+                :options="[
+              {label: 'Catégorie 1', value: 'Catégorie 1'},
+              {label: 'Catégorie 2', value: 'Catégorie 2'}
+            ]"
+              />
+              <MalioSelect
+                label="Pays"
+                v-model="pays"
+                :options="[
+                    {label: 'France', value: 'France'},
+                    {label: 'Espagne', value: 'Espagne'}
+            ]"/>
+              <MalioInputText v-model="codePostal" label="Code postal" />
+              <MalioSelect
+                v-model="ville"
+                label="Ville"
+                :options="villeOptions"
+                :no-options-text="villeNoOptionsText"
+              />
+              <MalioInputAutocomplete
+                v-model="adresse"
+                label="Adresse"
+                :options="adresseOptions"
+                :loading="adresseLoading"
+                :min-search-length="2"
+                :no-results-text="adresseNoResultsText"
+                :min-search-text="adresseMinSearchText"
+                @search="onSearchAdresse"
+              />
+              <MalioInputText label="Adresse complémentaire"/>
+              <div class="flex justify-between">
+                <MalioCheckbox
+                  v-for="dep in departements"
+                  :key="dep"
+                  v-model="departementsSelected[dep]"
+                  :label="dep"
+                  group-class="w-auto self-center"
+                />
+              </div>
+              <MalioSelect label="Contact" :options="[]"/>
+              <MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
+            </div>
+            <div class="mt-12 flex justify-center gap-6">
+              <MalioButton label="Nouvelle Adresse" variant="secondary" icon-name="mdi:add-bold" icon-position="left"/>
+              <MalioButton label="Valider" variant="primary"/>
+            </div>
+          </template>
+        </MalioTabList>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, watch} from 'vue'
+import MalioDate from "../../../../app/components/malio/date/Date.vue";
+
+type Commune = {
+  nom: string
+  code: string
+  codesPostaux: string[]
+}
+
+type BanFeature = {
+  properties: {
+    label: string
+    id: string
+    name: string
+    housenumber?: string
+    street?: string
+    postcode: string
+    citycode: string
+    city: string
+  }
+}
+
+const multiselectValue = ref<Array<string | number>>([])
+const distributeur = ref<string>('')
+const phones = ref<string[]>([''])
+const nomDistributeur = ref<string>('')
+const nomCourtier = ref<string>('')
+
+function addPhoneInput() {
+  phones.value.push('')
+}
+
+function onDeleteAdresse() {
+  console.log('Supprimer cette adresse')
+}
+
+const departements = ['86', '17', '82']
+const departementsSelected = ref<Record<string, boolean>>({86: false, 17: false, 82: false})
+
+const pays = ref<string>('France')
+const codePostal = ref<string>('')
+const ville = ref<string | number | null>(null)
+const villeOptions = ref<Array<{label: string; value: string}>>([])
+const villeLoading = ref(false)
+
+const villeNoOptionsText = computed(() => {
+  if (villeLoading.value) return 'Chargement…'
+  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir un code postal (5 chiffres)'
+  return 'Aucune ville pour ce code postal'
+})
+
+let villeFetchId = 0
+watch(codePostal, async (cp) => {
+  ville.value = null
+  villeOptions.value = []
+  adresse.value = null
+  adresseOptions.value = []
+  if (!/^\d{5}$/.test(cp)) {
+    villeLoading.value = false
+    return
+  }
+  const requestId = ++villeFetchId
+  villeLoading.value = true
+  try {
+    const response = await fetch(`https://geo.api.gouv.fr/communes?codePostal=${cp}`)
+    const data = await response.json() as Commune[]
+    if (requestId !== villeFetchId) return
+    villeOptions.value = data.map(c => ({label: c.nom, value: c.code}))
+  } catch (err) {
+    if (requestId !== villeFetchId) return
+    villeOptions.value = []
+    console.error('Erreur lors du chargement des villes', err)
+  } finally {
+    if (requestId === villeFetchId) villeLoading.value = false
+  }
+})
+
+const adresse = ref<string | number | null>(null)
+const adresseOptions = ref<Array<{label: string; value: string}>>([])
+const adresseLoading = ref(false)
+
+const adresseMinSearchText = computed(() => {
+  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir d\'abord un code postal'
+  return 'Tapez au moins 3 caractères'
+})
+const adresseNoResultsText = computed(() => {
+  if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir d\'abord un code postal'
+  return 'Aucune adresse trouvée'
+})
+
+let adresseFetchId = 0
+const onSearchAdresse = async (query: string) => {
+  if (!/^\d{5}$/.test(codePostal.value) || query.length < 3) {
+    adresseOptions.value = []
+    adresseLoading.value = false
+    return
+  }
+  const requestId = ++adresseFetchId
+  adresseLoading.value = true
+  try {
+    const params = new URLSearchParams({
+      q: query,
+      postcode: codePostal.value,
+      type: 'housenumber',
+    })
+    const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`)
+    const data = await response.json() as {features: BanFeature[]}
+    if (requestId !== adresseFetchId) return
+    adresseOptions.value = data.features.map(f => ({
+      label: f.properties.name,
+      value: f.properties.name,
+    }))
+  } catch (err) {
+    if (requestId !== adresseFetchId) return
+    adresseOptions.value = []
+    console.error('Erreur lors du chargement des adresses', err)
+  } finally {
+    if (requestId === adresseFetchId) adresseLoading.value = false
+  }
+}
+
+const tabsValue = ref('information')
+const concurrent = ref('')
+const dateCreation = ref<string | null>(null)
+
+const informationValid = computed(() => concurrent.value.trim().length > 0)
+const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
+
+const tabs = computed(() => [
+  {
+    key: 'information',
+    label: 'Information',
+    icon: 'mdi:account-outline',
+  },
+  {
+    key: 'contacts',
+    label: 'Contacts',
+    icon: 'mdi:account-box-plus-outline',
+    disabled: !informationValid.value,
+  },
+  {
+    key: 'adresses',
+    label: 'Adresses',
+    icon: 'mdi:map-marker-outline',
+    disabled: !informationValid.value,
+  },
+  {
+    key: 'transport',
+    label: 'Transport',
+    icon: 'mdi:truck-delivery-outline',
+    disabled: !informationValid.value || !adressesValid.value,
+  },
+  {
+    key: 'comptabilité',
+    label: 'Comptabilité',
+    icon: 'mdi:bank-circle-outline',
+    disabled: !informationValid.value || !adressesValid.value,
+  },
+])
+</script>

.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/inputNumber.vue

@@ -0,0 +1,80 @@
+<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>
+      <MalioInputNumber
+        v-model="simpleValue"
+        label="Quantite"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
+      <MalioInputNumber
+        v-model="initialValue"
+        label="Participants"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
+      <MalioInputNumber
+        v-model="boundedValue"
+        label="Places"
+        :min="1"
+        :max="5"
+        hint="Minimum 1, maximum 5"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Desactive</h2>
+      <MalioInputNumber
+        v-model="disabledValue"
+        label="Articles"
+        disabled
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputNumber
+        v-model="readonlyValue"
+        label="Tickets"
+        readonly
+        hint="Valeur verrouillee"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioInputNumber
+        v-model="errorValue"
+        label="Quantite"
+        :min="1"
+        error="La quantite minimale est 1"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succes</h2>
+      <MalioInputNumber
+        v-model="successValue"
+        label="Quantite"
+        success="Quantite validee"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const simpleValue = ref('')
+const initialValue = ref('3')
+const boundedValue = ref('2')
+const disabledValue = ref('4')
+const readonlyValue = ref('7')
+const errorValue = ref('0')
+const successValue = ref('2')
+</script>

.playground/pages/composant/input/inputPassword.vue

@@ -0,0 +1,99 @@
+<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>
+      <MalioInputPassword />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioInputPassword
+        v-model="passwordValue"
+        label="Mot de passe"
+        name="password"
+        autocomplete="current-password"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
+      <MalioInputPassword
+        label="Mot de passe"
+        :display-icon="false"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputPassword
+        model-value="motdepasse123"
+        disabled
+        label="Mot de passe"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputPassword
+        model-value="lectureseule"
+        readonly
+        label="Mot de passe"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+      <MalioInputPassword
+        label="Mot de passe"
+        hint="8 caractères minimum"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioInputPassword
+        model-value="abc"
+        label="Mot de passe"
+        error="Le mot de passe est trop court"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioInputPassword
+        model-value="motdepasse123"
+        label="Mot de passe"
+        success="Mot de passe valide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
+      <MalioInputPassword
+        v-model="dynamicPassword"
+        label="Mot de passe"
+        hint="8 caractères minimum, 1 majuscule, 1 chiffre"
+        :error="dynamicError"
+        :success="dynamicSuccess"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const passwordValue = ref('')
+const dynamicPassword = ref('')
+
+const passwordRegex = /^(?=.*[A-Z])(?=.*\d).{8,}$/
+const isDynamicValid = computed(() => passwordRegex.test(dynamicPassword.value))
+const dynamicError = computed(() => {
+  if (!dynamicPassword.value) return ''
+  return isDynamicValid.value ? '' : 'Mot de passe invalide'
+})
+const dynamicSuccess = computed(() => {
+  if (!dynamicPassword.value) return ''
+  return isDynamicValid.value ? 'Mot de passe 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/composant/input/inputRichText.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 p-4 lg:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioInputRichText
+        v-model="simpleValue"
+        label="Note"
+        placeholder="Écrire ici…"
+      />
+      <pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ simpleValue }}</pre>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec contenu initial + hint</h2>
+      <MalioInputRichText
+        v-model="hintValue"
+        label="Description"
+        hint="Tu peux mettre en forme avec la barre d'outils"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioInputRichText
+        v-model="errorValue"
+        label="Compte-rendu"
+        error="Le compte-rendu doit faire au moins 20 caractères"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioInputRichText
+        v-model="successValue"
+        label="Compte-rendu"
+        success="Compte-rendu validé"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputRichText
+        v-model="readonlyValue"
+        label="Note (lecture seule)"
+        readonly
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Disabled</h2>
+      <MalioInputRichText
+        v-model="disabledValue"
+        label="Note (désactivée)"
+        disabled
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Affichage seul (editable=false)</h2>
+      <MalioInputRichText
+        :model-value="readonlyValue"
+        :editable="false"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
+      <MalioInputRichText
+        v-model="htmlValue"
+        label="Article"
+        output-format="html"
+        min-height="200px"
+        placeholder="Tape ici, la sortie sera en HTML…"
+      />
+      <pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ htmlValue }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputRichText from '../../../../app/components/malio/input/InputRichText.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('## Titre\n\nUn paragraphe avec du **gras**, de l\'*italique* et un [lien](https://malio.fr).')
+const errorValue = ref('Trop court')
+const successValue = ref('Tout est bon de mon côté.')
+const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
+const disabledValue = ref('Contenu indisponible.')
+const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
+</script>

.playground/pages/composant/input/inputTextArea.vue

@@ -92,7 +92,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputTextArea from '../../../app/components/malio/InputTextArea.vue'
+import MalioInputTextArea from '../../../../app/components/malio/input/InputTextArea.vue'
 
 const hintValue = ref('')
 const iconValue = ref('')

.playground/pages/composant/input/inputUpload.vue

@@ -0,0 +1,88 @@
+<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>
+      <MalioInputUpload label="Fichier" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label et v-model</h2>
+      <MalioInputUpload
+        v-model="uploadValue"
+        label="Téléverser un document"
+      />
+      <p class="mt-2 text-sm text-gray-500">Valeur : {{ uploadValue || '(aucun)' }}</p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
+      <MalioInputUpload
+        label="Document PDF"
+        accept=".pdf"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputUpload
+        model-value="document.pdf"
+        disabled
+        label="Fichier"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+      <MalioInputUpload
+        label="Fichier"
+        hint="Formats acceptés : PDF, DOC, DOCX"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioInputUpload
+        model-value="image.bmp"
+        label="Fichier"
+        error="Format non supporté"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioInputUpload
+        model-value="rapport.pdf"
+        label="Fichier"
+        success="Fichier valide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
+      <MalioInputUpload
+        v-model="dynamicUpload"
+        label="Document PDF"
+        accept=".pdf"
+        hint="Seuls les fichiers PDF sont acceptés"
+        :error="dynamicError"
+        :success="dynamicSuccess"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const uploadValue = ref('')
+const dynamicUpload = ref('')
+
+const dynamicError = computed(() => {
+  if (!dynamicUpload.value) return ''
+  return dynamicUpload.value.endsWith('.pdf') ? '' : 'Seuls les fichiers PDF sont acceptés'
+})
+const dynamicSuccess = computed(() => {
+  if (!dynamicUpload.value) return ''
+  return dynamicUpload.value.endsWith('.pdf') ? 'Fichier PDF valide' : ''
+})
+</script>

.playground/pages/composant/radio/radioButton.vue

@@ -93,7 +93,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioRadioButton from '../../../app/components/malio/RadioButton.vue'
+import MalioRadioButton from '../../../../app/components/malio/radio/RadioButton.vue'
 
 const options = [
   {label: 'Option 1', value: 'option1'},

.playground/pages/composant/select/select.vue

@@ -82,6 +82,16 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Peu d'elements (2)</h2>
+      <MalioSelect
+        v-model="shortListValue"
+        :options="shortOptions"
+        label="Civilite"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
     <div class="rounded-lg border p-4 md:col-span-2">
       <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
       <MalioSelect
@@ -121,6 +131,11 @@ const options = [
   {label: 'Portugal', value: 'pt'},
 ]
 
+const shortOptions = [
+  {label: 'Monsieur', value: 'M'},
+  {label: 'Madame', value: 'Mme'},
+]
+
 const longOptions = [
   ...options,
   {label: 'Pays-Bas', value: 'nl'},
@@ -144,6 +159,7 @@ const errorValue = ref<string | number | null>(null)
 const successValue = ref<string | number | null>('be')
 const disabledValue = ref<string | number | null>('ca')
 const emptyValue = ref<string | number | null>(null)
+const shortListValue = ref<string | number | null>(null)
 const longListValue = ref<string | number | null>(null)
 const bottomValue = ref<string | number | null>(null)
 </script>

.playground/pages/composant/select/selectCheckbox.vue

@@ -0,0 +1,193 @@
+<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>
+      <MalioSelectCheckbox
+        v-model="basicValue"
+        :options="options"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec tag</h2>
+      <MalioSelectCheckbox
+        v-model="labelValue"
+        :options="options"
+        displayTag="true"
+        empty-option-label=" "
+      />
+      </div>
+      <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec tag + label</h2>
+      <MalioSelectCheckbox
+        v-model="labelValue1"
+        :options="options"
+        displayTag="true"
+        label="Pays"
+        empty-option-label=" "
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioSelectCheckbox
+        v-model="labelValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Valeur preselectionnee</h2>
+      <MalioSelectCheckbox
+        v-model="selectedValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint</h2>
+      <MalioSelectCheckbox
+        v-model="hintValue"
+        :options="options"
+        label="Pays"
+        hint="Choisissez votre pays"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioSelectCheckbox
+        v-model="errorValue"
+        :options="options"
+        label="Pays"
+        error="Ce champ est obligatoire"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succes</h2>
+      <MalioSelectCheckbox
+        v-model="successValue"
+        :options="options"
+        label="Pays"
+        success="Selection validee"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Desactive</h2>
+      <MalioSelectCheckbox
+        v-model="disabledValue"
+        :options="options"
+        label="Pays"
+        disabled
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sans options</h2>
+      <MalioSelectCheckbox
+        v-model="emptyValue"
+        label="Pays"
+        empty-option-label="Aucun pays disponible"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Tout sélectionner</h2>
+      <MalioSelectCheckbox
+        v-model="selectAllValue"
+        :options="options"
+        label="Pays"
+        :display-select-all="true"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Tout sélectionner (label custom)</h2>
+      <MalioSelectCheckbox
+        v-model="selectAllCustomValue"
+        :options="options"
+        label="Pays"
+        :display-select-all="true"
+        select-all-label="Cocher tout"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
+      <MalioSelectCheckbox
+        v-model="longListValue"
+        :options="longOptions"
+        label="Pays"
+        hint="Permet de verifier la scrollbar"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-4 text-xl font-bold">Ouverture en bas de page</h2>
+      <div class="h-64" />
+      <MalioSelectCheckbox
+        v-model="bottomValue"
+        :options="longOptions"
+        label="Ouverture adaptative"
+        hint="A ouvrir pres du bas de la page"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Allemagne', value: 'de'},
+  {label: 'Espagne', value: 'es'},
+  {label: 'Italie', value: 'it'},
+  {label: 'Portugal', value: 'pt'},
+]
+
+const longOptions = [
+  ...options,
+  {label: 'Pays-Bas', value: 'nl'},
+  {label: 'Suede', value: 'se'},
+  {label: 'Norvege', value: 'no'},
+  {label: 'Danemark', value: 'dk'},
+  {label: 'Finlande', value: 'fi'},
+  {label: 'Autriche', value: 'at'},
+  {label: 'Irlande', value: 'ie'},
+  {label: 'Grece', value: 'gr'},
+  {label: 'Pologne', value: 'pl'},
+  {label: 'Hongrie', value: 'hu'},
+  {label: 'Republique tcheque', value: 'cz'},
+]
+
+const basicValue = ref<Array<string | number>>([])
+const labelValue = ref<Array<string | number>>([])
+const labelValue1 = ref<Array<string | number>>([])
+const selectedValue = ref<Array<string | number>>(['fr'])
+const hintValue = ref<Array<string | number>>([])
+const errorValue = ref<Array<string | number>>([])
+const successValue = ref<Array<string | number>>(['be'])
+const disabledValue = ref<Array<string | number>>(['ca'])
+const emptyValue = ref<Array<string | number>>([])
+const selectAllValue = ref<Array<string | number>>([])
+const selectAllCustomValue = ref<Array<string | number>>([])
+const longListValue = ref<Array<string | number>>([])
+const bottomValue = ref<Array<string | number>>([])
+</script>

.playground/pages/composant/sidebar/sidebar.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="flex gap-8" style="height: calc(100vh - 100px)">
+    <MalioSidebar
+      v-model="collapsed1"
+      :sections="sectionsShort"
+    >
+      <template #logo>
+        <img src="/LOGO_MALIO.png" alt="Malio" />
+      </template>
+      <template #logo-collapsed>
+        <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
+      </template>
+    </MalioSidebar>
+
+    <MalioSidebar
+      v-model="collapsed2"
+      :sections="sectionsLong"
+    >
+      <template #logo>
+        <img src="/LOGO_MALIO.png" alt="Malio" />
+      </template>
+      <template #logo-collapsed>
+        <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
+      </template>
+    </MalioSidebar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const collapsed1 = ref(false)
+const collapsed2 = ref(false)
+
+const sectionsShort = [
+  {
+    label: 'LOGISTIQUE / TRANSPORT',
+    icon: 'mdi:truck-delivery',
+    items: [
+      {label: 'Réception / Expédition', to: '/reception'},
+      {label: 'Validation expédition', to: '/validation'},
+    ],
+  },
+  {
+    label: 'COMMERCIAL',
+    icon: 'mdi:handshake',
+    items: [
+      {label: 'Répertoire fournisseurs', to: '/fournisseurs'},
+      {label: 'Répertoire clients', to: '/clients'},
+    ],
+  },
+]
+
+const sectionsLong = [
+  {
+    label: 'LOGISTIQUE / TRANSPORT',
+    icon: 'mdi:truck-delivery',
+    items: [
+      {label: 'Réception / Expédition', to: '/reception'},
+      {label: 'Validation expédition', to: '/validation'},
+      {label: 'Voyage', to: '/voyage'},
+      {label: 'Ticket de pesée', to: '/pesee'},
+      {label: 'Bon de réception', to: '/bon-reception'},
+      {label: "Bon d'expédition", to: '/bon-expedition'},
+    ],
+  },
+  {
+    label: 'USINE / PRODUCTION',
+    icon: 'mdi:factory',
+    items: [
+      {label: 'Fabrication en cours', to: '/fabrication'},
+      {label: 'Liste des fabrications', to: '/fabrications'},
+    ],
+  },
+  {
+    label: 'COMMERCIAL',
+    icon: 'mdi:handshake',
+    items: [
+      {label: 'Répertoire fournisseurs', to: '/fournisseurs'},
+      {label: 'Compagnie fournisseurs', to: '/compagnie-fournisseurs'},
+      {label: 'Répertoire clients', to: '/clients'},
+      {label: 'Contrats en cours', to: '/contrats'},
+      {label: 'Commissions Clients', to: '/commissions'},
+      {label: 'Attribution expédition', to: '/attribution'},
+    ],
+  },
+  {
+    label: 'PRIX',
+    icon: 'mdi:tag',
+    items: [
+      {label: "Prix d'achat/vente", to: '/prix-achat'},
+      {label: "Prix d'achat spécifiques", to: '/prix-specifiques'},
+      {label: 'Prix de ventes clients', to: '/prix-vente'},
+    ],
+  },
+  {
+    label: 'FACTURATION',
+    icon: 'mdi:receipt',
+    items: [
+      {label: 'Expéditions à facturer', to: '/expeditions-facturer'},
+      {label: 'Factures', to: '/factures'},
+    ],
+  },
+  {
+    label: 'TECHNIQUE',
+    icon: 'mdi:cog',
+    items: [
+      {label: 'Répertoire prestataires', to: '/prestataires'},
+      {label: 'Répertoire transporteurs', to: '/transporteurs'},
+    ],
+  },
+  {
+    label: 'SUIVI HEURES',
+    icon: 'mdi:clock-outline',
+    items: [
+      {label: 'Heure Usine', to: '/heure-usine'},
+      {label: 'Heure Extras', to: '/heure-extras'},
+      {label: 'Heure Ferme', to: '/heure-ferme'},
+    ],
+  },
+  {
+    label: 'ADMINISTRATION',
+    icon: 'mdi:shield-account',
+    items: [
+      {label: 'Catalogue produits', to: '/catalogue'},
+      {label: 'Éditer étiquettes', to: '/etiquettes'},
+      {label: 'Organisation catégorie', to: '/organisation'},
+    ],
+  },
+]
+</script>

.playground/pages/composant/site/siteSelector.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple (3 sites) + event change</h2>
+      <MalioSiteSelector v-model="simpleValue" :sites="sites" @change="onSiteChange" />
+      <p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ simpleValue }}</code></p>
+      <p class="mt-1 text-sm text-gray-600">Dernier event <code>change</code> : <code>{{ lastChange }}</code></p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Deux sites</h2>
+      <MalioSiteSelector v-model="twoValue" :sites="sitesTwo" />
+      <p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ twoValue }}</code></p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Cinq sites (largeur proportionnelle)</h2>
+      <MalioSiteSelector v-model="fiveValue" :sites="sitesFive" />
+      <p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ fiveValue }}</code></p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Non contrôlé (sans v-model)</h2>
+      <MalioSiteSelector :sites="sites" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Largeur contrainte</h2>
+      <div class="w-[480px]">
+        <MalioSiteSelector v-model="constrainedValue" :sites="sites" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const sites = [
+  { id: 'chatellerault', name: 'Châtellerault', color: '#0055ff' },
+  { id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a' },
+  { id: 'pommevic', name: 'Pommevic', color: '#dc2626' },
+]
+
+const sitesTwo = [
+  { id: 'nord', name: 'Usine Nord', color: '#7c3aed' },
+  { id: 'sud', name: 'Usine Sud', color: '#ea580c' },
+]
+
+const sitesFive = [
+  { id: 's1', name: 'Site 1', color: '#0ea5e9' },
+  { id: 's2', name: 'Site 2', color: '#14b8a6' },
+  { id: 's3', name: 'Site 3', color: '#f59e0b' },
+  { id: 's4', name: 'Site 4', color: '#ec4899' },
+  { id: 's5', name: 'Site 5', color: '#6366f1' },
+]
+
+const simpleValue = ref('chatellerault')
+const twoValue = ref('nord')
+const fiveValue = ref('s3')
+const constrainedValue = ref('saint-jean')
+const lastChange = ref<string>('—')
+
+function onSiteChange(site: { id: string; name: string; color: string }) {
+  lastChange.value = JSON.stringify(site)
+}
+</script>

.playground/pages/composant/tab/tabList.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioTabList v-model="simpleValue" :tabs="tabs">
+        <template #qualimat><p class="p-4">Contenu Qualimat</p></template>
+        <template #adresses><p class="p-4">Contenu Adresses</p></template>
+        <template #contacts><p class="p-4">Contenu Contacts</p></template>
+        <template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
+      </MalioTabList>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sans icônes</h2>
+      <MalioTabList v-model="noIconValue" :tabs="tabsNoIcon">
+        <template #tab1><p class="p-4">Contenu onglet 1</p></template>
+        <template #tab2><p class="p-4">Contenu onglet 2</p></template>
+        <template #tab3><p class="p-4">Contenu onglet 3</p></template>
+      </MalioTabList>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Non contrôlé (sans v-model)</h2>
+      <MalioTabList :tabs="tabs">
+        <template #qualimat><p class="p-4">Contenu Qualimat</p></template>
+        <template #adresses><p class="p-4">Contenu Adresses</p></template>
+        <template #contacts><p class="p-4">Contenu Contacts</p></template>
+        <template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
+      </MalioTabList>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Deux onglets</h2>
+      <MalioTabList v-model="twoTabValue" :tabs="tabsTwo">
+        <template #general><p class="p-4">Informations générales</p></template>
+        <template #details><p class="p-4">Détails avancés</p></template>
+      </MalioTabList>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tabs = [
+  { key: 'qualimat', label: 'Qualimat', icon: 'mdi:certificate-outline' },
+  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
+  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
+  { key: 'comptabilite', label: 'Comptabilité', icon: 'mdi:web' },
+]
+
+const tabsNoIcon = [
+  { key: 'tab1', label: 'Onglet 1' },
+  { key: 'tab2', label: 'Onglet 2' },
+  { key: 'tab3', label: 'Onglet 3' },
+]
+
+const tabsTwo = [
+  { key: 'general', label: 'Général', icon: 'mdi:information-outline' },
+  { key: 'details', label: 'Détails', icon: 'mdi:cog-outline' },
+]
+
+const simpleValue = ref('qualimat')
+const noIconValue = ref('tab1')
+const twoTabValue = ref('general')
+</script>

.playground/pages/composant/time/time.vue

@@ -0,0 +1,87 @@
+<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>
+      <MalioTime v-model="simpleValue" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioTime
+        v-model="labeledValue"
+        label="Heure de depart"
+        name="departure-time"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
+      <MalioTime
+        v-model="initialValue"
+        label="Heure d'arrivee"
+        hint="Format HH:MM"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Required</h2>
+      <MalioTime
+        v-model="requiredValue"
+        label="Heure limite"
+        required
+        hint="Champ obligatoire"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Desactive</h2>
+      <MalioTime
+        v-model="disabledValue"
+        label="Heure verrouillee"
+        disabled
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioTime
+        v-model="readonlyValue"
+        label="Heure en lecture seule"
+        readonly
+        hint="Visible mais non modifiable"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioTime
+        v-model="errorValue"
+        label="Heure de fermeture"
+        error="L'heure saisie n'est pas valide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succes</h2>
+      <MalioTime
+        v-model="successValue"
+        label="Heure confirmee"
+        success="Horaire enregistre"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioTime from '../../../../app/components/malio/time/Time.vue'
+
+const simpleValue = ref('')
+const labeledValue = ref('')
+const initialValue = ref('08:30')
+const requiredValue = ref('')
+const disabledValue = ref('14:15')
+const readonlyValue = ref('18:45')
+const errorValue = ref('25:90')
+const successValue = ref('09:00')
+</script>

.playground/pages/index.vue

@@ -1,128 +1,10 @@
 <template>
-  <div class="flex min-h-screen">
+  <div class="mx-auto max-w-2xl py-16 text-center">
-    <aside class="w-72 bg-m-bg p-6 text-white">
+    <h1 class="text-3xl font-bold text-m-text">
-      <button
+      Playground @malio/layer-ui
-        type="button"
-        class="text-xl text-black font-semibold"
-        @click="clearSelection"
-      >
-        Liste des composants
-      </button>
-
-      <nav class="mt-6 flex flex-col gap-2">
-        <button
-          v-for="item in items"
-          :key="item.name"
-          type="button"
-          class="rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary hover:text-white"
-          :class="selectedName === item.name ? 'bg-m-secondary text-white' : ''"
-          @click="selectOrToggle(item.name)"
-        >
-          {{ item.label }}
-        </button>
-      </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">
+    <p class="mt-4 text-m-muted">
-          Selectionne un composant dans la liste pour afficher sa page de demo.
+      Sélectionne un composant dans la barre latérale pour afficher sa page de démonstration.
     </p>
   </div>
-    </main>
-  </div>
 </template>
-
-<script setup lang="ts">
-import { computed, ref, watch, shallowRef } from 'vue'
-
-type LoadedModule = {
-  default: unknown
-}
-
-type Item = {
-  name: string
-  label: string
-}
-
-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 items = computed<Item[]>(() =>
-  Object.keys(componentModules).map((file) => {
-    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
-    return {
-      name,
-      label: name,
-    }
-  }),
-)
-
-const selectedName = ref('')
-const hasInitializedSelection = ref(false)
-
-watch(
-  items,
-  (val) => {
-    if (!hasInitializedSelection.value && val.length > 0) {
-      selectedName.value = val[0].name
-      hasInitializedSelection.value = true
-    }
-  },
-  { immediate: true },
-)
-
-function selectOrToggle(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,72 @@
+import type {SidebarSection} from '../app/components/malio/sidebar/Sidebar.vue'
+
+export const navSections: SidebarSection[] = [
+  {
+    label: 'BOUTONS',
+    icon: 'mdi:gesture-tap-button',
+    items: [
+      {label: 'Button', to: '/composant/button/button'},
+      {label: 'Button Icon', to: '/composant/button/buttonIcon'},
+    ],
+  },
+  {
+    label: 'CHAMPS',
+    icon: 'mdi:form-textbox',
+    items: [
+      {label: 'Texte', to: '/composant/input/inputText'},
+      {label: 'Nombre', to: '/composant/input/inputNumber'},
+      {label: 'Montant', to: '/composant/input/inputAmount'},
+      {label: 'Email', to: '/composant/input/inputEmail'},
+      {label: 'Mot de passe', to: '/composant/input/inputPassword'},
+      {label: 'Téléphone', to: '/composant/input/inputPhone'},
+      {label: 'Zone de texte', to: '/composant/input/inputTextArea'},
+      {label: 'Saisie assistée', to: '/composant/input/inputAutocomplete'},
+      {label: 'Upload', to: '/composant/input/inputUpload'},
+      {label: 'Éditeur riche', to: '/composant/input/inputRichText'},
+    ],
+  },
+  {
+    label: 'DATES & HEURES',
+    icon: 'mdi:calendar-clock',
+    items: [
+      {label: 'Date', to: '/composant/date/date'},
+      {label: 'Plage de dates', to: '/composant/date/dateRange'},
+      {label: 'Semaine', to: '/composant/date/dateWeek'},
+      {label: 'Heure', to: '/composant/time/time'},
+    ],
+  },
+  {
+    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: '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",
+      {
+        "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

@@ -7,11 +7,33 @@ Liste des évolutions de la librairie Malio layer UI
 
 ### Added
 * [#333] Création d'un composant text
-* [#364] Création d'un composant button radio
 * [#337] Création d'un composant select
+* [#362] Création d'un composant checkbox
 * [#363] Création d'un composant amount
-* [#363] Création d'un composant checkbox
+* [#364] Création d'un composant button radio
+* [#365] Création d'un composant number
+* [#366] Création d'un composant select checkbox
+* [#407] Création d'un composant time
+* Création d'un composant textarea
+* [#MUI-8] Création d'un composant mot de passe
+* [#MUI-9] Création d'un composant upload
+* [#MUI-14] Création d'un composant bouton icône
+* [#MUI-11] Création d'un composant navigation par onglets
+* [#MUI-20] Création d'un composant sidebar
+* [#MUI-23] Revoir la config couleur tailwind
+* [#MUI-10] Création d'un composant bouton
+* [#MUI-2] Faire un MCP pour la librairie de composant
+* [#MUI-15] Création d'un composant drawer
+* [#MUI-22] Création d'un composant datatable
+* [#MUI-27] Création d'un composant sélection de site
+* Création d'un composant rich text (TipTap) avec sortie markdown / HTML
+* [#MUI-30] Création d'un composant email
+* [#MUI-31] Création d'un composant téléphone
+* [#MUI-32] Création d'un composant saisie assistée (autocomplete)
+* [#MUI-34] Revoir le système de playground
 
 ### Changed
 
 ### Fixed
+* Hauteur des boutons de pagination du datatable alignée sur le select (40px)
+* Distribution de `tailwind.config.ts` aux projets consommateurs avec paths `content` absolus

CLAUDE.md

@@ -0,0 +1,64 @@
+# CLAUDE.md — @malio/layer-ui
+
+## Projet
+
+Bibliothèque de composants UI sous forme de **Nuxt 4 Layer**. Le package `@malio/layer-ui` est consommé par les autres applications Malio via `extends` dans leur `nuxt.config.ts`.
+
+## Commandes
+
+```bash
+npm run dev            # Lance le playground (.playground/)
+npm run dev:prepare    # Génère les types Nuxt (à lancer après un clone)
+npm run test           # Vitest (run mode)
+npm run lint           # ESLint
+npm run story:dev      # Histoire (documentation composants)
+```
+
+## Architecture
+
+```
+app/
+  components/malio/    # Composants (auto-importés comme <MalioXxx>)
+  story/               # Fichiers .story.vue (Histoire)
+  assets/css/malio.css # Design tokens (CSS custom properties)
+.playground/           # App Nuxt pour tester les composants en dev
+```
+
+## Conventions composants
+
+- **Nommage fichier** : PascalCase (`InputText.vue`). Le préfixe `Malio` est ajouté automatiquement par le dossier `malio/`.
+- **`defineOptions({ name: 'MalioXxx', inheritAttrs: false })`** en tête de chaque composant.
+- **Props communes** : `id`, `label`, `modelValue`, `inputClass`, `labelClass`, `groupClass`, `disabled`, `readonly`, `hint`, `error`, `success`.
+- **Pattern contrôlé/non-contrôlé** : `isControlled = computed(() => props.modelValue !== undefined)` avec `localValue` en fallback.
+- **Classes CSS** : fusionnées avec `twMerge()` pour permettre l'override par le consommateur via les props `*Class`.
+- **Accessibilité** : `aria-invalid`, `aria-describedby`, labels liés par `for/id`.
+- **Icônes** : via `@iconify/vue` (Icon component), pas `@nuxt/icon` dans les composants.
+
+## Stack technique
+
+- **Nuxt 4** (layer), **Vue 3** Composition API (`<script setup lang="ts">`)
+- **TypeScript** strict (`defineProps<T>()` + `withDefaults`)
+- **Tailwind CSS** avec palette custom `m-*` (primary, secondary, error, etc.) basée sur des CSS variables RGB
+- **tailwind-merge** pour la fusion intelligente des classes
+- **maska** pour le masquage d'input (InputText)
+- **Vitest** + `@vue/test-utils` pour les tests unitaires (pattern `*.test.ts` colocalisé)
+- **Histoire** pour la documentation visuelle des composants
+
+## Design tokens
+
+Définis dans `app/assets/css/malio.css` comme CSS custom properties RGB :
+- `--m-primary`, `--m-secondary`, `--m-tertiary`, `--m-border`, `--m-text`, `--m-muted`, `--m-bg`, `--m-error`, `--m-success`, `--m-radius`
+- Utilisés via Tailwind : `text-m-primary`, `border-m-error`, `bg-m-bg`, `rounded-malio`, etc.
+
+## Tests
+
+- Fichiers colocalisés : `ComponentName.test.ts` à côté du `.vue`
+- Pattern : `mountComponent(props)` helper, tests de rendu, props, emits, états, accessibilité
+- Environnement : jsdom
+
+## Git & CI
+
+- **Conventional Commits** obligatoires (hooks pre-commit + commit-msg)
+- Branches : `develop` → `main`
+- **semantic-release** sur push main (Gitea Actions)
+- Registry privé Gitea (`@malio` scope)

COMPONENTS.md

@@ -0,0 +1,666 @@
+# @malio/layer-ui — Composants
+
+Tous les composants sont auto-importés avec le préfixe `Malio`. Utiliser `v-model` pour le binding bidirectionnel sur les composants de formulaire.
+
+---
+
+## MalioInputText
+
+Champ texte avec label, icône optionnelle et support de masque de saisie.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto | Identifiant HTML |
+| `label` | `string` | `''` | Label du champ |
+| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
+| `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` | `''` | Icône Iconify (ex: `mdi:magnify`) |
+| `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 |
+| `mask` | `string \| MaskInputOptions` | — | Masque de saisie (maska) |
+| `maxLength` | `number \| string` | — | Longueur max |
+| `minLength` | `number \| string` | — | Longueur min |
+| `inputClass` | `string` | `''` | Classes CSS input |
+| `labelClass` | `string` | `''` | Classes CSS label |
+| `groupClass` | `string` | `''` | Classes CSS conteneur |
+
+**Events :** `update:modelValue(value: string)`
+
+```vue
+<MalioInputText v-model="nom" label="Nom" />
+<MalioInputText v-model="search" label="Recherche" icon-name="mdi:magnify" />
+<MalioInputText v-model="tel" label="Téléphone" mask="## ## ## ## ##" />
+<MalioInputText v-model="email" label="Email" error="Email invalide" />
+<MalioInputText v-model="info" label="Info" disabled hint="Champ désactivé" />
+```
+
+---
+
+## MalioInputPassword
+
+Champ mot de passe avec toggle visibilité.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
+| `label` | `string` | `''` | Label |
+| `displayIcon` | `boolean` | `true` | Afficher l'icône toggle |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Lecture seule |
+| `hint` | `string` | `''` | Message d'aide |
+| `error` | `string` | `''` | Message d'erreur |
+| `success` | `string` | `''` | Message de succès |
+
+**Events :** `update:modelValue(value: string)`
+
+```vue
+<MalioInputPassword v-model="password" label="Mot de passe" />
+<MalioInputPassword v-model="password" label="Sans icône" :display-icon="false" />
+```
+
+---
+
+## 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).
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
+| `label` | `string` | `''` | Label |
+| `iconName` | `string` | `'mdi:currency-eur'` | Icône devise |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `error` | `string` | `''` | Message d'erreur |
+
+**Events :** `update:modelValue(value: string)`
+
+```vue
+<MalioInputAmount v-model="montant" label="Montant TTC" />
+<MalioInputAmount v-model="prix" label="Prix" error="Montant invalide" />
+```
+
+---
+
+## MalioInputNumber
+
+Champ numérique avec boutons +/-.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
+| `label` | `string` | `''` | Label |
+| `min` | `number \| string` | — | Valeur minimum |
+| `max` | `number \| string` | — | Valeur maximum |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `error` | `string` | `''` | Message d'erreur |
+
+**Events :** `update:modelValue(value: string)`
+
+```vue
+<MalioInputNumber v-model="quantite" label="Quantité" min="0" max="100" />
+```
+
+---
+
+## MalioInputTextArea
+
+Zone de texte multiligne avec compteur et redimensionnement.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
+| `label` | `string` | `''` | Label |
+| `size` | `number \| string` | `2` | Nombre de lignes |
+| `resize` | `'none' \| 'both' \| 'horizontal' \| 'vertical'` | `'both'` | Mode redimensionnement |
+| `maxLength` | `number` | `800` | Longueur max |
+| `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)`
+
+```vue
+<MalioInputTextArea v-model="commentaire" label="Commentaire" :show-counter="true" />
+<MalioInputTextArea v-model="note" label="Note" resize="vertical" :size="4" />
+```
+
+---
+
+## MalioInputRichText
+
+Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown** + **TextStyle/Color/Highlight**. Toolbar avec gras, italique, barré, titres H2/H3, listes, citation, code, code-block, lien, **couleur du texte**, **surlignage**, undo/redo. Sortie en HTML (par défaut) ou markdown.
+
+> Couleurs et surlignages ne sont **pas persistés en markdown**. Pour les conserver au save/reload, utiliser `output-format="html"`.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto | Identifiant HTML |
+| `label` | `string` | `''` | Label affiché au-dessus de l'éditeur |
+| `modelValue` | `string \| null` | `undefined` | Contenu (v-model) |
+| `placeholder` | `string` | `''` | Texte affiché quand vide |
+| `minHeight` | `string` | `'160px'` | Hauteur min de la zone d'édition |
+| `editable` | `boolean` | `true` | `false` → mode affichage seul (toolbar masquée) |
+| `disabled` | `boolean` | `false` | Désactive l'édition et la toolbar |
+| `readonly` | `boolean` | `false` | Lecture seule (toolbar visible mais désactivée) |
+| `hint` | `string` | `''` | Message d'aide |
+| `error` | `string` | `''` | Message d'erreur |
+| `success` | `string` | `''` | Message de succès |
+| `outputFormat` | `'markdown' \| 'html'` | `'html'` | Format émis dans `update:modelValue` |
+| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
+| `labelClass` | `string` | `''` | Classes CSS label (twMerge) |
+| `editorClass` | `string` | `''` | Classes CSS wrapper éditeur (twMerge) |
+
+**Events :** `update:modelValue(value: string)`
+
+```vue
+<MalioInputRichText v-model="note" label="Note" placeholder="Écrire ici…" />
+<MalioInputRichText v-model="cr" label="Compte-rendu" error="Trop court" />
+<MalioInputRichText v-model="article" label="Article" min-height="240px" />
+<MalioInputRichText :model-value="content" :editable="false" />
+```
+
+---
+
+## MalioInputUpload
+
+Champ d'upload de fichier.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| null` | `undefined` | Nom du fichier (v-model) |
+| `label` | `string` | `''` | Label |
+| `accept` | `string` | `''` | Types de fichiers acceptés |
+| `displayIcon` | `boolean` | `true` | Afficher l'icône |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `error` | `string` | `''` | Message d'erreur |
+
+**Events :** `update:modelValue(value: string)`, `file-selected(file: File)`
+
+```vue
+<MalioInputUpload v-model="fileName" label="Document" accept=".pdf,.doc" @file-selected="onFile" />
+```
+
+---
+
+## MalioSelect
+
+Liste déroulante.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| number \| null` | **requis** | Valeur sélectionnée (v-model) |
+| `options` | `{ value: string \| number, text: string }[]` | `[]` | Options disponibles |
+| `emptyOptionLabel` | `string` | `''` | Placeholder option vide |
+| `label` | `string` | `''` | Label |
+| `hint` | `string` | `''` | Message d'aide |
+| `error` | `string` | `''` | Message d'erreur |
+| `success` | `string` | `''` | Message de succès |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
+| `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)
+
+```vue
+<MalioSelect v-model="pays" label="Pays" :options="[{ value: 'FR', text: 'France' }, { value: 'BE', text: 'Belgique' }]" />
+<MalioSelect v-model="ville" label="Ville" :options="villes" empty-option-label="Choisir..." />
+<MalioSelect v-model="civilite" label="Civilité" :options="civilites" group-class="mt-0" />
+```
+
+---
+
+## MalioSelectCheckbox
+
+Liste déroulante multi-sélection avec checkboxes.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `(string \| number)[]` | **requis** | Valeurs sélectionnées (v-model) |
+| `options` | `{ value: string \| number, text: string }[]` | `[]` | Options |
+| `displayTag` | `boolean` | `false` | Afficher les tags sélectionnés |
+| `displaySelectAll` | `boolean` | `false` | Afficher "Tout sélectionner" |
+| `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)[])`
+
+```vue
+<MalioSelectCheckbox v-model="competences" label="Compétences" :options="skills" :display-tag="true" />
+<MalioSelectCheckbox v-model="sites" label="Sites" :options="sitesList" :display-select-all="true" />
+```
+
+---
+
+## MalioCheckbox
+
+Case à cocher.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `boolean \| null` | `undefined` | Valeur (v-model) |
+| `label` | `string` | `''` | Label |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Lecture seule |
+| `error` | `string` | `''` | Message d'erreur |
+
+**Events :** `update:modelValue(value: boolean)`
+
+```vue
+<MalioCheckbox v-model="accepte" label="J'accepte les conditions" />
+<MalioCheckbox v-model="newsletter" label="Newsletter" disabled />
+```
+
+---
+
+## MalioRadioButton
+
+Bouton radio (à utiliser en groupe avec le même `name`).
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| number \| boolean \| null` | `undefined` | Valeur du groupe (v-model) |
+| `value` | `string \| number \| boolean \| null` | `undefined` | Valeur de cette option |
+| `label` | `string` | `''` | Label |
+| `name` | `string` | `''` | Nom du groupe radio |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Lecture seule |
+
+**Events :** `update:modelValue(value: string | number | boolean | null)`
+
+```vue
+<MalioRadioButton v-model="civilite" name="civilite" value="M" label="Monsieur" />
+<MalioRadioButton v-model="civilite" name="civilite" value="Mme" label="Madame" />
+```
+
+---
+
+## MalioTime
+
+Sélecteur d'heure.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| null` | `undefined` | Heure au format HH:mm (v-model) |
+| `label` | `string` | `''` | Label |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Lecture seule |
+| `error` | `string` | `''` | Message d'erreur |
+
+**Events :** `update:modelValue(value: string)`
+
+```vue
+<MalioTime v-model="heure" label="Heure de début" />
+<MalioTime v-model="fin" label="Heure de fin" readonly />
+```
+
+---
+
+## MalioButton
+
+Bouton d'action avec 4 variantes visuelles et icône optionnelle.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `label` | `string` | `''` | Texte du bouton (ou slot par défaut) |
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger'` | `'primary'` | Variante visuelle |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `buttonClass` | `string` | `''` | Classes CSS additionnelles (twMerge) |
+| `iconName` | `string` | `''` | Icône Iconify |
+| `iconPosition` | `'left' \| 'right'` | `'right'` | Position icône |
+| `iconSize` | `string \| number` | `16` | Taille icône |
+
+**Events :** `click(e: MouseEvent)`
+**Slots :** `default` (contenu du bouton, remplace `label`)
+
+```vue
+<MalioButton label="Valider" />
+<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
+<MalioButton label="Voir plus" variant="tertiary" />
+<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash" icon-position="left" />
+<MalioButton label="Pleine largeur" button-class="w-full" />
+```
+
+---
+
+## MalioButtonIcon
+
+Bouton icône seul (sans texte).
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `icon` | `string` | **requis** | Icône Iconify |
+| `ariaLabel` | `string` | **requis** | Label accessible |
+| `variant` | `'filled' \| 'ghost'` | `'filled'` | Variante visuelle |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `buttonClass` | `string` | `''` | Classes CSS additionnelles |
+| `iconSize` | `string \| number` | `24` | Taille icône |
+
+**Events :** `click(e: MouseEvent)`
+
+```vue
+<MalioButtonIcon icon="mdi:pencil" aria-label="Modifier" />
+<MalioButtonIcon icon="mdi:trash" aria-label="Supprimer" variant="ghost" />
+```
+
+---
+
+## MalioTabList
+
+Navigation par onglets avec contenu dynamique.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string` | `undefined` | Onglet actif (v-model) |
+| `tabs` | `Tab[]` | **requis** | Liste des onglets (voir type ci-dessous) |
+
+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="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
+
+Barre latérale de navigation rétractable.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
+| `sections` | `SidebarSection[]` | **requis** | Sections de navigation |
+| `sidebarClass` | `string` | `''` | Classes CSS sidebar |
+| `toggleClass` | `string` | `''` | Classes CSS bouton toggle |
+
+**Type SidebarSection :** `{ title?: string, items: { label: string, icon?: string, to?: string, href?: string, active?: boolean }[] }`
+
+**Events :** `update:modelValue(value: boolean)`
+**Slots :** `logo` (sidebar ouverte), `logo-collapsed` (sidebar fermée)
+
+```vue
+<MalioSidebar v-model="isOpen" :sections="menuSections">
+  <template #logo><img src="/logo.png" /></template>
+  <template #logo-collapsed><img src="/logo-small.png" /></template>
+</MalioSidebar>
+```
+
+---
+
+## MalioDrawer
+
+Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transparent.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto | Identifiant HTML |
+| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
+| `title` | `string` | `''` | Titre affiché dans le header |
+| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
+| `drawerClass` | `string` | `''` | Classes CSS panneau (twMerge) |
+
+**Events :** `update:modelValue(value: boolean)`
+**Slots :** `default` (contenu du drawer)
+
+```vue
+<MalioDrawer v-model="isOpen" title="Détails">
+  <p>Contenu du drawer</p>
+</MalioDrawer>
+<MalioDrawer v-model="isOpen" title="Sans croix" :show-close="false">
+  <p>Fermeture uniquement via backdrop</p>
+</MalioDrawer>
+<MalioDrawer v-model="isOpen" title="Large" drawer-class="max-w-2xl">
+  <p>Drawer plus large</p>
+</MalioDrawer>
+```
+
+---
+
+## MalioDataTable
+
+Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto | Identifiant HTML |
+| `columns` | `{ key: string, label: string }[]` | **requis** | Définition des colonnes |
+| `items` | `Record<string, unknown>[]` | **requis** | Données à afficher |
+| `totalItems` | `number` | **requis** | Total pour la pagination |
+| `page` | `number` | `1` | Page courante (v-model) |
+| `perPage` | `number` | `10` | Lignes par page (v-model) |
+| `perPageOptions` | `number[]` | `[10, 25, 50]` | Options du sélecteur de lignes |
+| `rowClickable` | `boolean` | `true` | Lignes cliquables (cursor pointer + hover) |
+| `tableClass` | `string` | `''` | Classes CSS sur `<table>` (twMerge) |
+| `emptyMessage` | `string` | `'Aucune donnée'` | Message si items vide |
+
+**Events :** `update:page(value: number)`, `update:per-page(value: number)`, `row-click(item: Record<string, unknown>)`
+**Slots :** `#header-{key}` (filtre dans le `<th>`, placeholder = label), `#cell-{key}` (contenu du `<td>`), `#empty` (état vide)
+
+```vue
+<!-- Avec filtres et pagination -->
+<MalioDataTable
+  :columns="[{ key: 'nom', label: 'Nom' }, { key: 'ville', label: 'Ville' }]"
+  :items="data"
+  :total-items="total"
+  v-model:page="page"
+  v-model:per-page="perPage"
+  @row-click="router.push(`/contact/${$event.id}`)"
+>
+  <template #header-nom>
+    <input v-model="filtreNom" placeholder="Nom" class="w-full border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none">
+  </template>
+  <template #header-ville>
+    <select v-model="filtreVille" class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none">
+      <option value="">Ville</option>
+      <option v-for="v in villes" :key="v" :value="v">{{ v }}</option>
+    </select>
+  </template>
+  <template #cell-nom="{ item }">
+    <strong>{{ item.nom }}</strong>
+  </template>
+</MalioDataTable>
+
+<!-- Simple sans filtres -->
+<MalioDataTable
+  :columns="columns"
+  :items="data"
+  :total-items="total"
+  v-model:page="page"
+  v-model:per-page="perPage"
+/>
+```

app/assets/css/malio.css

@@ -4,16 +4,38 @@
 
 @layer base {
   :root {
-    /* Couleurs en RGB “space separated” pour Tailwind */
+    /* ── Globales ── */
-    --m-primary: 34 39 131;       /* Couleur principal*/
+    --m-primary: 34 39 131;         /* #222783 - Bleu Malio */
-    --m-secondary: 48 73 152;     /* Couleur secondaire */
+    --m-primary-light: 239 239 253; /* #EFEFFD - Teinte claire du primary (fonds doux) */
-    --m-tertiary: 243 244 248;    /* Couleur tertiaire (background) */
+    --m-bg: 243 244 248;            /* #F3F4F8 - Fond de page */
-    --m-border: 203 213 225;      /* Couleur des bordures */
+    --m-surface: 243 244 248;       /* #F3F4F8 - Fond hover/cartes */
-    --m-text: 15 23 42;           /*  Couleur du texte */
+    --m-text: 15 23 42;             /* #0F172A */
-    --m-muted: 100 116 139;       /* Couleur pour les éléments désactivés ou secondaires */
+    --m-muted: 100 116 139;         /* #64748B */
-    --m-bg: 243 244 248;          /* Couleur de fond générale */
+    --m-border: 203 213 225;        /* #CBD5E1 */
+    --m-disabled: 204 204 223;      /* #CCCCDF - Partagé entre toutes les familles bouton */
+    --m-danger: 242 105 107;        /* #F2696B - Erreurs et boutons danger */
+    --m-success: 15 149 70;         /* #0F9546 */
 
-    --m-error: 155 17 30;         /* rouge pour les erreurs */
+    /* ── Boutons Primary ── */
-    --m-success: 15 149 70;       /* vert pour les succès  */
+    --m-btn-primary: 34 39 131;           /* #222783 */
+    --m-btn-primary-hover: 18 28 219;     /* #121CDB */
+    --m-btn-primary-active: 33 37 103;    /* #212567 */
+
+    /* ── Boutons Secondary ── */
+    --m-btn-secondary: 75 77 237;         /* #4B4DED */
+    --m-btn-secondary-hover: 137 123 241; /* #897BF1 */
+    --m-btn-secondary-active: 18 28 219;  /* #121CDB */
+
+    /* ── Boutons Danger ── */
+    --m-btn-danger: 242 105 107;          /* #F2696B */
+    --m-btn-danger-hover: 234 151 151;    /* #EA9797 */
+    --m-btn-danger-active: 255 83 86;     /* #FF5356 */
+
+    /* ── Couleurs de site (usage ponctuel) ── */
+    --m-site-blue: 5 108 242;       /* #056CF2 - Bleu Châtellerault */
+    --m-site-yellow: 243 203 0;     /* #F3CB00 - Jaune Saint-Jean */
+    --m-site-green: 116 191 4;      /* #74BF04 - Vert Pommevic */
+
+    --m-radius: 6px;
   }
 }

app/components/malio/button/Button.test.ts

@@ -0,0 +1,218 @@
+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 Button from './Button.vue'
+
+type ButtonProps = {
+  id?: string
+  label?: string
+  disabled?: boolean
+  buttonClass?: string
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+  iconName?: string
+  iconPosition?: 'left' | 'right'
+  iconSize?: string | number
+}
+
+const ButtonForTest = Button as DefineComponent<ButtonProps>
+
+const mountComponent = (props: ButtonProps = {}, slots?: Record<string, string>) =>
+  mount(ButtonForTest, {
+    props,
+    slots,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioButton', () => {
+  it('renders a button with label', () => {
+    const wrapper = mountComponent({ label: 'Valider' })
+
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Valider')
+  })
+
+  it('renders slot content over label prop', () => {
+    const wrapper = mountComponent({ label: 'Prop' }, { default: 'Slot content' })
+
+    expect(wrapper.text()).toContain('Slot content')
+    expect(wrapper.text()).not.toContain('Prop')
+  })
+
+  it('uses provided id on button', () => {
+    const wrapper = mountComponent({ id: 'custom-id' })
+
+    expect(wrapper.get('button').attributes('id')).toBe('custom-id')
+  })
+
+  it('generates an id when missing', () => {
+    const wrapper = mountComponent()
+
+    const buttonId = wrapper.get('button').attributes('id')
+    expect(buttonId?.startsWith('malio-button-')).toBe(true)
+  })
+
+  it('sets type="button" on the button', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').attributes('type')).toBe('button')
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('sets disabled attribute when disabled', () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    expect(wrapper.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  // --- Variant: Primary (default) ---
+
+  it('applies primary variant by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+    expect(wrapper.get('button').classes()).toContain('cursor-pointer')
+  })
+
+  it('applies primary disabled styles', () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Variant: Secondary ---
+
+  it('applies secondary variant', () => {
+    const wrapper = mountComponent({ variant: 'secondary' })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-secondary')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies secondary disabled styles', () => {
+    const wrapper = mountComponent({ variant: 'secondary', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Variant: Tertiary ---
+
+  it('applies tertiary variant with border and no background', () => {
+    const wrapper = mountComponent({ variant: 'tertiary' })
+
+    expect(wrapper.get('button').classes()).toContain('border')
+    expect(wrapper.get('button').classes()).toContain('border-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('bg-transparent')
+    expect(wrapper.get('button').classes()).not.toContain('text-white')
+  })
+
+  it('applies tertiary disabled styles with border', () => {
+    const wrapper = mountComponent({ variant: 'tertiary', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('border')
+    expect(wrapper.get('button').classes()).toContain('border-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('bg-transparent')
+  })
+
+  // --- Variant: Danger ---
+
+  it('applies danger variant', () => {
+    const wrapper = mountComponent({ variant: 'danger' })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-danger')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies danger disabled styles', () => {
+    const wrapper = mountComponent({ variant: 'danger', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Sizing ---
+
+  it('applies correct dimensions', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('w-[240px]')
+    expect(wrapper.get('button').classes()).toContain('h-[40px]')
+  })
+
+  it('applies font styles', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('text-base')
+    expect(wrapper.get('button').classes()).toContain('font-bold')
+  })
+
+  // --- buttonClass override ---
+
+  it('applies buttonClass', () => {
+    const wrapper = mountComponent({ buttonClass: 'w-full rounded-full' })
+
+    expect(wrapper.get('button').classes()).toContain('w-full')
+    expect(wrapper.get('button').classes()).toContain('rounded-full')
+  })
+
+  // --- Icon ---
+
+  it('renders icon on the right by default', () => {
+    const wrapper = mountComponent({ iconName: 'mdi:arrow-right' })
+
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
+  })
+
+  it('renders icon on the left when specified', () => {
+    const wrapper = mountComponent({ iconName: 'mdi:arrow-left', iconPosition: 'left' })
+
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
+  })
+
+  it('does not render icon when iconName is empty', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
+  })
+
+  it('passes icon name and size to icon component', () => {
+    const wrapper = mount(ButtonForTest, {
+      props: { iconName: 'mdi:check', iconSize: 18 },
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:check')
+    expect(iconComponent.props('width')).toBe(18)
+    expect(iconComponent.props('height')).toBe(18)
+  })
+})

app/components/malio/button/Button.vue

@@ -0,0 +1,102 @@
+<template>
+  <button
+    :id="buttonId"
+    :class="mergedButtonClass"
+    :disabled="disabled"
+    type="button"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <IconifyIcon
+      v-if="iconName && iconPosition === 'left'"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon-left"
+    />
+
+    <span><slot>{{ label }}</slot></span>
+
+    <IconifyIcon
+      v-if="iconName && iconPosition === 'right'"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon-right"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'MalioButton', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    disabled?: boolean
+    buttonClass?: string
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+    iconName?: string
+    iconPosition?: 'left' | 'right'
+    iconSize?: string | number
+  }>(),
+  {
+    id: '',
+    label: '',
+    disabled: false,
+    buttonClass: '',
+    variant: 'primary',
+    iconName: '',
+    iconPosition: 'right',
+    iconSize: 16,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const buttonId = computed(() => props.id || `malio-button-${generatedId}`)
+
+const variantClasses = computed(() => {
+  if (props.disabled) {
+    if (props.variant === 'tertiary') {
+      return 'border border-m-disabled text-m-disabled bg-transparent cursor-not-allowed'
+    }
+    return 'bg-m-disabled text-white cursor-not-allowed'
+  }
+
+  switch (props.variant) {
+    case 'secondary':
+      return 'bg-m-btn-secondary hover:bg-m-btn-secondary-hover active:bg-m-btn-secondary-active text-white cursor-pointer'
+    case 'tertiary':
+      return 'border border-m-btn-primary bg-transparent text-m-btn-primary hover:border-m-btn-primary-hover hover:text-m-btn-primary-hover active:border-m-btn-primary-active active:text-m-btn-primary-active cursor-pointer'
+    case 'danger':
+      return 'bg-m-btn-danger hover:bg-m-btn-danger-hover active:bg-m-btn-danger-active text-white cursor-pointer'
+    default:
+      return 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
+  }
+})
+
+const mergedButtonClass = computed(() =>
+  twMerge(
+    'inline-flex w-[240px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    variantClasses.value,
+    props.buttonClass,
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'click', e: MouseEvent): void
+}>()
+
+function onClick(e: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', e)
+  }
+}
+</script>

app/components/malio/button/ButtonIcon.test.ts

@@ -0,0 +1,151 @@
+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 ButtonIcon from './ButtonIcon.vue'
+
+type ButtonIconProps = {
+  id?: string
+  icon: string
+  ariaLabel: string
+  disabled?: boolean
+  buttonClass?: string
+  iconSize?: string | number
+  variant?: 'filled' | 'ghost'
+}
+
+const ButtonIconForTest = ButtonIcon as DefineComponent<ButtonIconProps>
+
+const mountComponent = (props: ButtonIconProps = {icon: 'mdi:arrow-left', ariaLabel: 'Retour'}) =>
+  mount(ButtonIconForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioButtonIcon', () => {
+  it('renders a button with the icon', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
+  })
+
+  it('uses provided id on button', () => {
+    const wrapper = mountComponent({id: 'custom-id', icon: 'mdi:arrow-left', ariaLabel: 'Retour'})
+
+    expect(wrapper.get('button').attributes('id')).toBe('custom-id')
+  })
+
+  it('generates an id when missing', () => {
+    const wrapper = mountComponent()
+
+    const buttonId = wrapper.get('button').attributes('id')
+    expect(buttonId?.startsWith('malio-button-icon-')).toBe(true)
+  })
+
+  it('sets aria-label on button', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour'})
+
+    expect(wrapper.get('button').attributes('aria-label')).toBe('Retour')
+  })
+
+  it('sets type="button" on the button', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').attributes('type')).toBe('button')
+  })
+
+  it('passes icon name to icon component', () => {
+    const wrapper = mount(ButtonIconForTest, {
+      props: {icon: 'mdi:pencil-outline', ariaLabel: 'Modifier'},
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:pencil-outline')
+  })
+
+  it('passes icon size to icon component', () => {
+    const wrapper = mount(ButtonIconForTest, {
+      props: {icon: 'mdi:arrow-left', ariaLabel: 'Retour', iconSize: 32},
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('width')).toBe(32)
+    expect(iconComponent.props('height')).toBe(32)
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('sets disabled attribute when disabled', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    expect(wrapper.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('applies disabled styles when disabled', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+  })
+
+  it('applies cursor-pointer when not disabled', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('cursor-pointer')
+  })
+
+  it('applies white text color for icon visibility', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies default background color', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
+  })
+
+  it('applies buttonClass', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', buttonClass: 'rounded-full'})
+
+    expect(wrapper.get('button').classes()).toContain('rounded-full')
+  })
+
+  it('applies ghost variant with no background and colored icon', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost'})
+
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-primary')
+    expect(wrapper.get('button').classes()).not.toContain('text-white')
+  })
+
+  it('applies ghost disabled styles with no background', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost', disabled: true})
+
+    expect(wrapper.get('button').classes()).toContain('text-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-disabled')
+  })
+})

app/components/malio/button/ButtonIcon.vue

@@ -0,0 +1,76 @@
+<template>
+  <button
+    :id="buttonId"
+    :class="mergedButtonClass"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    type="button"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <IconifyIcon
+      :icon="icon"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import {computed, useAttrs, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioButtonIcon', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    icon: string
+    ariaLabel: string
+    disabled?: boolean
+    buttonClass?: string
+    iconSize?: string | number
+    variant?: 'filled' | 'ghost'
+  }>(),
+  {
+    id: '',
+    disabled: false,
+    buttonClass: '',
+    iconSize: 24,
+    variant: 'filled',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const buttonId = computed(() => props.id || `malio-button-icon-${generatedId}`)
+
+const isFilled = computed(() => props.variant === 'filled')
+
+const mergedButtonClass = computed(() =>
+  twMerge(
+    'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    isFilled.value
+      ? props.disabled
+        ? 'bg-m-disabled text-white cursor-not-allowed'
+        : 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
+      : props.disabled
+        ? 'text-m-disabled cursor-not-allowed'
+        : 'text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active cursor-pointer',
+    props.buttonClass,
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'click', e: MouseEvent): void
+}>()
+
+function onClick(e: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', e)
+  }
+}
+</script>

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)
@@ -94,23 +96,24 @@ const describedBy = computed(() => {
 
 const mergedGroupClass = computed(() =>
   twMerge(
-    'checkbox-wrapper-4 mt-4 w-full',
+    'checkbox-wrapper-4 w-full',
     props.groupClass,
   ),
 )
 
 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 {
+.inp-cbx + .cbx.text-m-danger span:first-child {
-  border-color: rgb(var(--m-error) / 1);
+  border-color: rgb(var(--m-danger) / 1);
 }
-.cbx.text-m-error span:first-child svg {
+.cbx.text-m-danger span:first-child svg {
-  stroke: rgb(var(--m-error) / 1);
+  stroke: rgb(var(--m-danger) / 1);
 }
-.inp-cbx:checked + .cbx.text-m-error span:first-child {
+.inp-cbx:checked + .cbx.text-m-danger span:first-child {
-  border-color: rgb(var(--m-error) / 1);
+  border-color: rgb(var(--m-danger) / 1);
 }
 
 .inp-cbx + .cbx.text-m-success span:first-child {

app/components/malio/datatable/DataTable.test.ts

@@ -0,0 +1,278 @@
+import { describe, expect, it } from 'vitest'
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import type { DefineComponent } from 'vue'
+import DataTable from './DataTable.vue'
+
+type DataTableProps = {
+  id?: string
+  columns?: { key: string; label: string }[]
+  items?: Record<string, unknown>[]
+  totalItems?: number
+  page?: number
+  perPage?: number
+  perPageOptions?: number[]
+  rowClickable?: boolean
+  tableClass?: string
+  emptyMessage?: string
+}
+
+const DataTableForTest = DataTable as DefineComponent<DataTableProps>
+
+const defaultColumns = [
+  { key: 'nom', label: 'Nom' },
+  { key: 'ville', label: 'Ville' },
+]
+
+const defaultItems = [
+  { nom: 'Dupont', ville: 'Paris' },
+  { nom: 'Martin', ville: 'Lyon' },
+  { nom: 'Bernard', ville: 'Marseille' },
+]
+
+function mountComponent(props: DataTableProps = {}, slots?: Record<string, unknown>) {
+  return mount(DataTableForTest, {
+    props: {
+      columns: defaultColumns,
+      items: defaultItems,
+      totalItems: 3,
+      ...props,
+    },
+    slots,
+    global: {
+      stubs: {
+        MalioSelect: {
+          name: 'MalioSelect',
+          template: '<div data-test="malio-select"><slot /></div>',
+          props: ['modelValue', 'options'],
+          emits: ['update:modelValue'],
+        },
+        MalioButton: {
+          template: '<button v-bind="$attrs" :disabled="disabled" @click="$emit(\'click\', $event)"><slot>{{ label }}</slot></button>',
+          props: ['label', 'disabled', 'variant', 'buttonClass'],
+          emits: ['click'],
+          inheritAttrs: true,
+        },
+      },
+    },
+  })
+}
+
+describe('MalioDataTable', () => {
+  describe('Table rendering', () => {
+    it('renders column headers as text when no header slot', () => {
+      const wrapper = mountComponent()
+      const headers = wrapper.findAll('th')
+      expect(headers).toHaveLength(2)
+      expect(headers[0].text()).toBe('Nom')
+      expect(headers[1].text()).toBe('Ville')
+    })
+
+    it('renders header slot when provided', () => {
+      const wrapper = mountComponent({}, {
+        'header-nom': '<input data-test="filter-nom" placeholder="Nom" />',
+      })
+      expect(wrapper.find('[data-test="filter-nom"]').exists()).toBe(true)
+    })
+
+    it('renders items as rows', () => {
+      const wrapper = mountComponent()
+      const rows = wrapper.findAll('[data-test="row"]')
+      expect(rows).toHaveLength(3)
+      expect(rows[0].text()).toContain('Dupont')
+      expect(rows[0].text()).toContain('Paris')
+    })
+
+    it('renders cell slot when provided', () => {
+      const wrapper = mountComponent({}, {
+        'cell-nom': ({ item }: { item: Record<string, unknown> }) => h('strong', String(item.nom)),
+      })
+      const firstRow = wrapper.findAll('[data-test="row"]')[0]
+      expect(firstRow.find('strong').text()).toBe('Dupont')
+    })
+
+    it('renders empty message when items is empty', () => {
+      const wrapper = mountComponent({ items: [], totalItems: 0 })
+      expect(wrapper.find('[data-test="empty-row"]').text()).toBe('Aucune donnée')
+    })
+
+    it('renders custom empty message', () => {
+      const wrapper = mountComponent({ items: [], totalItems: 0, emptyMessage: 'Rien ici' })
+      expect(wrapper.find('[data-test="empty-row"]').text()).toBe('Rien ici')
+    })
+
+    it('renders empty slot when provided', () => {
+      const wrapper = mountComponent(
+        { items: [], totalItems: 0 },
+        { empty: '<p data-test="custom-empty">Vide</p>' },
+      )
+      expect(wrapper.find('[data-test="custom-empty"]').text()).toBe('Vide')
+    })
+
+    it('empty row has colspan equal to columns length', () => {
+      const wrapper = mountComponent({ items: [], totalItems: 0 })
+      const td = wrapper.find('[data-test="empty-row"] td')
+      expect(td.attributes('colspan')).toBe('2')
+    })
+  })
+
+  describe('Row click', () => {
+    it('emits row-click with item on row click', async () => {
+      const wrapper = mountComponent()
+      await wrapper.findAll('[data-test="row"]')[0].trigger('click')
+      expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
+    })
+
+    it('emits row-click on Enter key', async () => {
+      const wrapper = mountComponent()
+      await wrapper.findAll('[data-test="row"]')[0].trigger('keydown.enter')
+      expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
+    })
+
+    it('emits row-click on Space key', async () => {
+      const wrapper = mountComponent()
+      await wrapper.findAll('[data-test="row"]')[0].trigger('keydown.space')
+      expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
+    })
+
+    it('rows have tabindex when clickable', () => {
+      const wrapper = mountComponent()
+      expect(wrapper.findAll('[data-test="row"]')[0].attributes('tabindex')).toBe('0')
+    })
+
+    it('rows have cursor-pointer when clickable', () => {
+      const wrapper = mountComponent()
+      expect(wrapper.findAll('[data-test="row"]')[0].classes()).toContain('cursor-pointer')
+    })
+
+    it('rows are not clickable when rowClickable is false', async () => {
+      const wrapper = mountComponent({ rowClickable: false })
+      await wrapper.findAll('[data-test="row"]')[0].trigger('click')
+      expect(wrapper.emitted('row-click')).toBeUndefined()
+    })
+
+    it('rows have no tabindex when not clickable', () => {
+      const wrapper = mountComponent({ rowClickable: false })
+      expect(wrapper.findAll('[data-test="row"]')[0].attributes('tabindex')).toBeUndefined()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('th elements have scope="col"', () => {
+      const wrapper = mountComponent()
+      const ths = wrapper.findAll('th')
+      ths.forEach(th => {
+        expect(th.attributes('scope')).toBe('col')
+      })
+    })
+
+    it('generates an id when not provided', () => {
+      const wrapper = mountComponent()
+      const id = wrapper.find('div').attributes('id')
+      expect(id).toMatch(/^malio-datatable-/)
+    })
+
+    it('uses custom id when provided', () => {
+      const wrapper = mountComponent({ id: 'my-table' })
+      expect(wrapper.find('div').attributes('id')).toBe('my-table')
+    })
+  })
+
+  describe('Pagination', () => {
+    it('hides pagination when totalItems is 0', () => {
+      const wrapper = mountComponent({ items: [], totalItems: 0 })
+      expect(wrapper.find('[data-test="pagination"]').exists()).toBe(false)
+    })
+
+    it('shows pagination when totalItems > 0', () => {
+      const wrapper = mountComponent({ totalItems: 30 })
+      expect(wrapper.find('[data-test="pagination"]').exists()).toBe(true)
+    })
+
+    it('renders all pages when totalPages <= 5', () => {
+      const wrapper = mountComponent({ totalItems: 50, perPage: 10 })
+      for (let i = 1; i <= 5; i++) {
+        expect(wrapper.find(`[data-test="page-${i}"]`).exists()).toBe(true)
+      }
+    })
+
+    it('highlights current page', () => {
+      const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
+      expect(wrapper.find('[data-test="page-3"]').attributes('aria-current')).toBe('page')
+    })
+
+    it('emits update:page on page button click', async () => {
+      const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 1 })
+      await wrapper.find('[data-test="page-3"]').trigger('click')
+      expect(wrapper.emitted('update:page')?.[0]).toEqual([3])
+    })
+
+    it('Prev button is disabled on page 1', () => {
+      const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 1 })
+      expect(wrapper.find('[data-test="prev-button"]').attributes('disabled')).toBeDefined()
+    })
+
+    it('Next button is disabled on last page', () => {
+      const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 5 })
+      expect(wrapper.find('[data-test="next-button"]').attributes('disabled')).toBeDefined()
+    })
+
+    it('Prev button emits update:page with page - 1', async () => {
+      const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
+      await wrapper.find('[data-test="prev-button"]').trigger('click')
+      expect(wrapper.emitted('update:page')?.[0]).toEqual([2])
+    })
+
+    it('Next button emits update:page with page + 1', async () => {
+      const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
+      await wrapper.find('[data-test="next-button"]').trigger('click')
+      expect(wrapper.emitted('update:page')?.[0]).toEqual([4])
+    })
+
+    it('shows ellipsis for truncated pages (> 5 pages)', () => {
+      const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
+      const ellipsis = wrapper.findAll('[aria-hidden="true"]')
+      expect(ellipsis.length).toBeGreaterThan(0)
+      expect(ellipsis[0].text()).toBe('…')
+    })
+
+    it('always shows first and last page when > 5 pages', () => {
+      const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
+      expect(wrapper.find('[data-test="page-1"]').exists()).toBe(true)
+      expect(wrapper.find('[data-test="page-20"]').exists()).toBe(true)
+    })
+
+    it('shows 1 neighbor on each side of current page', () => {
+      const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
+      expect(wrapper.find('[data-test="page-9"]').exists()).toBe(true)
+      expect(wrapper.find('[data-test="page-10"]').exists()).toBe(true)
+      expect(wrapper.find('[data-test="page-11"]').exists()).toBe(true)
+    })
+
+    it('pagination nav has aria-label', () => {
+      const wrapper = mountComponent({ totalItems: 30 })
+      expect(wrapper.find('[data-test="pagination-nav"]').attributes('aria-label')).toBe('Pagination')
+    })
+
+    it('Prev button has aria-label "Page précédente"', () => {
+      const wrapper = mountComponent({ totalItems: 30 })
+      expect(wrapper.find('[data-test="prev-button"]').attributes('aria-label')).toBe('Page précédente')
+    })
+
+    it('Next button has aria-label "Page suivante"', () => {
+      const wrapper = mountComponent({ totalItems: 30 })
+      expect(wrapper.find('[data-test="next-button"]').attributes('aria-label')).toBe('Page suivante')
+    })
+  })
+
+  describe('Per-page selector', () => {
+    it('emits update:per-page and reset page to 1 on change', async () => {
+      const wrapper = mountComponent({ totalItems: 100, perPage: 10, page: 5 })
+      const select = wrapper.findComponent({ name: 'MalioSelect' })
+      select.vm.$emit('update:modelValue', 25)
+      await wrapper.vm.$nextTick()
+      expect(wrapper.emitted('update:per-page')?.[0]).toEqual([25])
+      expect(wrapper.emitted('update:page')?.[0]).toEqual([1])
+    })
+  })
+})

app/components/malio/datatable/DataTable.vue

@@ -0,0 +1,222 @@
+<template>
+  <div :id="componentId" class="w-full" v-bind="attrs">
+    <table :class="twMerge('w-full border-separate border-spacing-0 border border-black rounded-malio overflow-hidden', tableClass)">
+      <thead>
+        <tr class="bg-m-surface">
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            scope="col"
+            class="border-b border-black px-3 py-3 text-left align-middle text-[20px]"
+          >
+            <slot
+              v-if="$slots[`header-${col.key}`]"
+              :name="`header-${col.key}`"
+              :column="col"
+            />
+            <span v-else class="font-semibold text-m-primary">{{ col.label }}</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(item, index) in items"
+          :key="index"
+          :class="rowClickable ? 'cursor-pointer hover:bg-m-bg' : ''"
+          :tabindex="rowClickable ? 0 : undefined"
+          data-test="row"
+          @click="rowClickable ? emit('row-click', item) : undefined"
+          @keydown.enter="rowClickable ? emit('row-click', item) : undefined"
+          @keydown.space.prevent="rowClickable ? emit('row-click', item) : undefined"
+        >
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            class="px-3 py-4 text-[18px] text-m-primary"
+            :class="index < items.length - 1 ? 'border-b border-black' : ''"
+          >
+            <slot
+              v-if="$slots[`cell-${col.key}`]"
+              :name="`cell-${col.key}`"
+              :item="item"
+              :column="col"
+            />
+            <template v-else>{{ item[col.key] }}</template>
+          </td>
+        </tr>
+        <tr v-if="!items.length" data-test="empty-row">
+          <td
+            :colspan="columns.length"
+            class="px-3 py-4 text-center text-m-muted"
+          >
+            <slot name="empty">{{ emptyMessage }}</slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div
+      v-if="totalItems > 0"
+      class="flex justify-between pt-2"
+      data-test="pagination"
+    >
+      <div class="flex gap-4">
+        <span class="whitespace-nowrap text-[16px] text-black self-center">Lignes :</span>
+        <MalioSelect
+          :model-value="perPage"
+          :options="perPageSelectOptions"
+          min-width="w-20 !mt-0"
+          rounded="rounded"
+          text-field="text-sm"
+          text-value="text-sm"
+          text-label="text-xs"
+          data-test="per-page-select"
+          @update:model-value="onPerPageChange"
+        />
+      </div>
+
+      <nav aria-label="Pagination" class="flex gap-1" data-test="pagination-nav">
+        <MalioButton
+          variant="tertiary"
+          label="Prev"
+          :disabled="page <= 1"
+          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          aria-label="Page précédente"
+          data-test="prev-button"
+          @click="goToPage(page - 1)"
+        />
+
+        <template v-for="(p, idx) in visiblePages" :key="idx">
+          <span
+            v-if="p === '...'"
+            class="px-1 text-sm text-m-muted"
+            aria-hidden="true"
+          >…</span>
+          <button
+            v-else
+            type="button"
+            class="h-10 min-w-[2.5rem] rounded px-2 text-sm transition-colors"
+            :class="p === page
+              ? 'bg-m-btn-primary text-white font-semibold'
+              : 'text-m-text hover:bg-m-bg'"
+            :aria-current="p === page ? 'page' : undefined"
+            :data-test="`page-${p}`"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </template>
+
+        <MalioButton
+          variant="tertiary"
+          label="Next"
+          :disabled="page >= totalPages"
+          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          aria-label="Page suivante"
+          data-test="next-button"
+          @click="goToPage(page + 1)"
+        />
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import MalioSelect from '../select/Select.vue'
+import MalioButton from '../button/Button.vue'
+
+defineOptions({ name: 'MalioDataTable', inheritAttrs: false })
+
+type DataTableColumn = {
+  key: string
+  label: string
+}
+
+const attrs = useAttrs()
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    columns: DataTableColumn[]
+    items: Record<string, unknown>[]
+    totalItems: number
+    page?: number
+    perPage?: number
+    perPageOptions?: number[]
+    rowClickable?: boolean
+    tableClass?: string
+    emptyMessage?: string
+  }>(),
+  {
+    id: '',
+    page: 1,
+    perPage: 10,
+    perPageOptions: () => [10, 25, 50],
+    rowClickable: true,
+    tableClass: '',
+    emptyMessage: 'Aucune donnée',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:page' | 'update:per-page', value: number): void
+  (e: 'row-click', item: Record<string, unknown>): void
+}>()
+
+const generatedId = useId()
+const componentId = computed(() => props.id || `malio-datatable-${generatedId}`)
+
+const totalPages = computed(() => Math.max(1, Math.ceil(props.totalItems / props.perPage)))
+
+const perPageSelectOptions = computed(() =>
+  props.perPageOptions.map(n => ({ label: String(n), value: n }))
+)
+
+function onPerPageChange(value: string | number | null) {
+  if (value !== null) {
+    emit('update:per-page', Number(value))
+    emit('update:page', 1)
+  }
+}
+
+function goToPage(page: number) {
+  if (page >= 1 && page <= totalPages.value) {
+    emit('update:page', page)
+  }
+}
+
+const visiblePages = computed(() => {
+  const total = totalPages.value
+  const current = props.page
+
+  if (total <= 5) {
+    return Array.from({ length: total }, (_, i) => i + 1)
+  }
+
+  const pages: (number | '...')[] = []
+  pages.push(1)
+
+  if (current > 3) {
+    pages.push('...')
+  }
+
+  const start = Math.max(2, current - 1)
+  const end = Math.min(total - 1, current + 1)
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i)
+  }
+
+  if (current < total - 2) {
+    pages.push('...')
+  }
+
+  if (total > 1) {
+    pages.push(total)
+  }
+
+  return pages
+})
+</script>

app/components/malio/date/Date.test.ts

@@ -0,0 +1,198 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Date_ from './Date.vue'
+
+type DateProps = {
+  id?: string
+  name?: string
+  label?: string
+  modelValue?: string | null
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  min?: string
+  max?: string
+  clearable?: boolean
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+}
+
+const DateForTest = Date_ as DefineComponent<DateProps>
+const mountDate = (props: DateProps = {}) => mount(DateForTest, {props, attachTo: document.body})
+
+describe('MalioDate', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+  })
+  afterEach(() => vi.useRealTimers())
+
+  describe('rendu', () => {
+    it('renders the label and the calendar icon', () => {
+      const wrapper = mountDate({label: 'Date de naissance'})
+      expect(wrapper.get('label').text()).toBe('Date de naissance')
+      expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
+    })
+
+    it('displays the formatted value in the field', () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
+      expect(input.value).toBe('19/05/2026')
+    })
+
+    it('does not show the popover initially', () => {
+      const wrapper = mountDate()
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('popover', () => {
+    it('opens on field click', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
+    })
+
+    it('opens on the current month when there is no value', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Mai 2026')
+    })
+
+    it('opens on the value month when a value is set', async () => {
+      const wrapper = mountDate({modelValue: '2025-12-25'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
+    })
+
+    it('closes on outside mousedown', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('navigation jours', () => {
+    it('goes to the next month on the right chevron', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-next"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Juin 2026')
+    })
+
+    it('rolls December to January and bumps the year', async () => {
+      const wrapper = mountDate({modelValue: '2026-12-15'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-next"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2027')
+    })
+  })
+
+  describe('sélection', () => {
+    it('emits the ISO date and closes on day click', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('bornes min/max', () => {
+    it('disables days outside the range', async () => {
+      const wrapper = mountDate({min: '2026-05-10', max: '2026-05-20'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
+      expect((outside.element as HTMLButtonElement).disabled).toBe(true)
+      await outside.trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('vue mois', () => {
+    it('switches to month view on header toggle', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(true)
+    })
+
+    it('navigates the year with chevrons in month view', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="header-next"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2027')
+    })
+
+    it('returns to day view on month click', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="month"][data-month="0"]').trigger('click')
+      expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(false)
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2026')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('effacement', () => {
+    it('shows the clear button when there is a value', () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      expect(wrapper.find('[data-test="clear"]').exists()).toBe(true)
+    })
+
+    it('hides the clear button when empty', () => {
+      const wrapper = mountDate()
+      expect(wrapper.find('[data-test="clear"]').exists()).toBe(false)
+    })
+
+    it('emits null and does not open the popover on clear', async () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      await wrapper.get('[data-test="clear"]').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('états', () => {
+    it('does not open when disabled', async () => {
+      const wrapper = mountDate({disabled: true})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+
+    it('does not open when readonly', async () => {
+      const wrapper = mountDate({readonly: true, modelValue: '2026-05-19'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('accessibilité', () => {
+    it('sets aria-invalid and describedby on error', () => {
+      const wrapper = mountDate({error: 'Date requise'})
+      const input = wrapper.get('[data-test="date-input"]')
+      expect(input.attributes('aria-invalid')).toBe('true')
+      expect(input.attributes('aria-describedby')).toBeTruthy()
+      expect(wrapper.text()).toContain('Date requise')
+    })
+  })
+
+  describe('synchronisation externe', () => {
+    it('updates the displayed value when modelValue changes', async () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      await wrapper.setProps({modelValue: '2026-12-25'})
+      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
+      expect(input.value).toBe('25/12/2026')
+    })
+  })
+})

app/components/malio/date/Date.vue

@@ -0,0 +1,93 @@
+<template>
+  <CalendarField
+    :id="id"
+    :display-value="displayValue"
+    :sync-to="modelValue ?? null"
+    :name="name"
+    :label="label"
+    :placeholder="placeholder"
+    :required="required"
+    :disabled="disabled"
+    :readonly="readonly"
+    :hint="hint"
+    :error="error"
+    :success="success"
+    :clearable="clearable"
+    :input-class="inputClass"
+    :label-class="labelClass"
+    :group-class="groupClass"
+    v-bind="$attrs"
+    @clear="emit('update:modelValue', null)"
+  >
+    <template #default="{ currentMonth, currentYear, close }">
+      <MonthGrid
+        :month="currentMonth"
+        :year="currentYear"
+        :selected-date="modelValue ?? null"
+        :min="min"
+        :max="max"
+        @select="(iso) => { emit('update:modelValue', iso); close() }"
+      />
+    </template>
+  </CalendarField>
+</template>
+
+<script setup lang="ts">
+import {computed, watch} from 'vue'
+import CalendarField from './internal/CalendarField.vue'
+import MonthGrid from './internal/MonthGrid.vue'
+import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
+
+defineOptions({name: 'MalioDate', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    name?: string
+    label?: string
+    modelValue?: string | null
+    placeholder?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    min?: string
+    max?: string
+    clearable?: boolean
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    label: '',
+    modelValue: undefined,
+    placeholder: 'JJ/MM/AAAA',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+    min: undefined,
+    max: undefined,
+    clearable: true,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+  },
+)
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
+
+const displayValue = computed(() => formatIsoToDisplay(props.modelValue ?? null))
+
+watch(() => props.modelValue, (val) => {
+  if (val && !isValidIso(val) && import.meta.dev) {
+    console.warn(`[MalioDate] modelValue invalide ignoré : "${val}"`)
+  }
+})
+</script>

app/components/malio/date/DateRange.test.ts

@@ -0,0 +1,155 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import DateRange from './DateRange.vue'
+
+type RangeValue = {start: string; end: string}
+type DateRangeProps = {
+  modelValue?: RangeValue | null
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  error?: string
+  min?: string
+  max?: string
+  clearable?: boolean
+}
+
+const DateRangeForTest = DateRange as DefineComponent<DateRangeProps>
+const mountRange = (props: DateRangeProps = {}) =>
+  mount(DateRangeForTest, {props, attachTo: document.body})
+
+const openAndClickDays = async (wrapper: ReturnType<typeof mountRange>, isos: string[]) => {
+  await wrapper.get('[data-test="date-input"]').trigger('click')
+  for (const iso of isos) {
+    await wrapper.get(`[data-test="day"][data-iso="${iso}"]`).trigger('click')
+  }
+}
+
+describe('MalioDateRange', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+  })
+  afterEach(() => vi.useRealTimers())
+
+  it('renders the label and calendar icon', () => {
+    const wrapper = mountRange({label: 'Période'})
+    expect(wrapper.get('label').text()).toBe('Période')
+    expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
+  })
+
+  it('displays the formatted range when modelValue is set', () => {
+    const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
+    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
+    expect(input.value).toBe('19/05/2026 - 25/05/2026')
+  })
+
+  it('shows an empty field without a value', () => {
+    const wrapper = mountRange()
+    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
+    expect(input.value).toBe('')
+  })
+
+  it('opens on the start month when a range is set', async () => {
+    const wrapper = mountRange({modelValue: {start: '2025-12-10', end: '2025-12-20'}})
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
+  })
+
+  it('does not emit on the first click', async () => {
+    const wrapper = mountRange()
+    await openAndClickDays(wrapper, ['2026-05-19'])
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
+  })
+
+  it('emits the range and closes on the second click', async () => {
+    const wrapper = mountRange()
+    await openAndClickDays(wrapper, ['2026-05-19', '2026-05-25'])
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-25'}])
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+
+  it('auto-inverts when the second click is before the first', async () => {
+    const wrapper = mountRange()
+    await openAndClickDays(wrapper, ['2026-05-25', '2026-05-19'])
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-25'}])
+  })
+
+  it('allows a single-day range', async () => {
+    const wrapper = mountRange()
+    await openAndClickDays(wrapper, ['2026-05-19', '2026-05-19'])
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-19'}])
+  })
+
+  it('restarts a new range on the third click', async () => {
+    const wrapper = mountRange()
+    await openAndClickDays(wrapper, ['2026-05-19', '2026-05-25'])
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    await wrapper.get('[data-test="day"][data-iso="2026-05-10"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    await wrapper.get('[data-test="day"][data-iso="2026-05-12"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-10', end: '2026-05-12'}])
+  })
+
+  it('previews the range on hover while selecting', async () => {
+    const wrapper = mountRange()
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
+    await wrapper.get('[data-test="day"][data-iso="2026-05-22"]').trigger('mouseenter')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
+  })
+
+  it('does not preview before selecting', async () => {
+    const wrapper = mountRange()
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    await wrapper.get('[data-test="day"][data-iso="2026-05-22"]').trigger('mouseenter')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('none')
+  })
+
+  it('marks start, end and in-range roles for a committed range', async () => {
+    const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-19"]').attributes('data-range-role')).toBe('start')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-25"]').attributes('data-range-role')).toBe('end')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
+  })
+
+  it('cancels an in-progress selection on outside click', async () => {
+    const wrapper = mountRange()
+    await openAndClickDays(wrapper, ['2026-05-19'])
+    document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-19"]').attributes('data-range-role')).toBe('none')
+  })
+
+  it('emits null on clear', async () => {
+    const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
+    await wrapper.get('[data-test="clear"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
+  })
+
+  it('disables days outside min/max', async () => {
+    const wrapper = mountRange({min: '2026-05-10', max: '2026-05-20'})
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
+    expect((outside.element as HTMLButtonElement).disabled).toBe(true)
+    await outside.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('sets aria-invalid on error', () => {
+    const wrapper = mountRange({error: 'Période requise'})
+    expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.text()).toContain('Période requise')
+  })
+
+  it('does not open when disabled', async () => {
+    const wrapper = mountRange({disabled: true})
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+})

app/components/malio/date/DateRange.vue

@@ -0,0 +1,140 @@
+<template>
+  <CalendarField
+    :id="id"
+    :display-value="displayValue"
+    :sync-to="validRange?.start ?? null"
+    :name="name"
+    :label="label"
+    :placeholder="placeholder"
+    :required="required"
+    :disabled="disabled"
+    :readonly="readonly"
+    :hint="hint"
+    :error="error"
+    :success="success"
+    :clearable="clearable"
+    :input-class="inputClass"
+    :label-class="labelClass"
+    :group-class="groupClass"
+    v-bind="$attrs"
+    @clear="onClear"
+    @close="onClose"
+  >
+    <template #default="{ currentMonth, currentYear, close }">
+      <MonthGrid
+        :month="currentMonth"
+        :year="currentYear"
+        :range-start="rangeStart"
+        :range-end="rangeEnd"
+        :preview-date="previewDate"
+        :min="min"
+        :max="max"
+        @select="(iso) => onSelectDay(iso, close)"
+        @hover="onHover"
+      />
+    </template>
+  </CalendarField>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import CalendarField from './internal/CalendarField.vue'
+import MonthGrid from './internal/MonthGrid.vue'
+import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
+import {normalizeRange, type DateRangeValue} from './composables/dateRange'
+
+defineOptions({name: 'MalioDateRange', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    name?: string
+    label?: string
+    modelValue?: DateRangeValue | null
+    placeholder?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    min?: string
+    max?: string
+    clearable?: boolean
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    label: '',
+    modelValue: undefined,
+    placeholder: 'JJ/MM/AAAA',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+    min: undefined,
+    max: undefined,
+    clearable: true,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+  },
+)
+
+const emit = defineEmits<{(e: 'update:modelValue', value: DateRangeValue | null): void}>()
+
+const pendingStart = ref<string | null>(null)
+const hoverDate = ref<string | null>(null)
+const isSelecting = computed(() => pendingStart.value !== null)
+
+const validRange = computed<DateRangeValue | null>(() => {
+  const v = props.modelValue
+  if (v && isValidIso(v.start) && isValidIso(v.end)) return v
+  return null
+})
+
+const rangeStart = computed(() =>
+  isSelecting.value ? pendingStart.value : (validRange.value?.start ?? null),
+)
+const rangeEnd = computed(() =>
+  isSelecting.value ? null : (validRange.value?.end ?? null),
+)
+const previewDate = computed(() => (isSelecting.value ? hoverDate.value : null))
+
+const displayValue = computed(() => {
+  if (isSelecting.value || !validRange.value) return ''
+  return `${formatIsoToDisplay(validRange.value.start)} - ${formatIsoToDisplay(validRange.value.end)}`
+})
+
+const onSelectDay = (iso: string, close: () => void) => {
+  if (pendingStart.value === null) {
+    pendingStart.value = iso
+    hoverDate.value = null
+    return
+  }
+  emit('update:modelValue', normalizeRange(pendingStart.value, iso))
+  pendingStart.value = null
+  hoverDate.value = null
+  close()
+}
+
+const onHover = (iso: string | null) => {
+  if (isSelecting.value) hoverDate.value = iso
+}
+
+const onClose = () => {
+  pendingStart.value = null
+  hoverDate.value = null
+}
+
+const onClear = () => {
+  emit('update:modelValue', null)
+  pendingStart.value = null
+  hoverDate.value = null
+}
+</script>

app/components/malio/date/DateWeek.test.ts

@@ -0,0 +1,122 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import DateWeek from './DateWeek.vue'
+
+type DateWeekProps = {
+  modelValue?: string | null
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  error?: string
+  min?: string
+  max?: string
+}
+
+const DateWeekForTest = DateWeek as DefineComponent<DateWeekProps>
+const mountWeek = (props: DateWeekProps = {}) =>
+  mount(DateWeekForTest, {props, attachTo: document.body})
+
+describe('MalioDateWeek', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+  })
+  afterEach(() => vi.useRealTimers())
+
+  it('renders the label and calendar icon', () => {
+    const wrapper = mountWeek({label: 'Semaine'})
+    expect(wrapper.get('label').text()).toBe('Semaine')
+    expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
+  })
+
+  it('displays the formatted week when modelValue is set', () => {
+    const wrapper = mountWeek({modelValue: '2026-W21'})
+    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
+    expect(input.value).toBe('Semaine 21 (18/05 → 24/05/2026)')
+  })
+
+  it('shows an empty field without a value', () => {
+    const wrapper = mountWeek()
+    const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
+    expect(input.value).toBe('')
+  })
+
+  it('opens on the month of the selected week', async () => {
+    const wrapper = mountWeek({modelValue: '2026-W01'}) // lundi 2025-12-29
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
+  })
+
+  it('selects the week when a day is clicked', async () => {
+    const wrapper = mountWeek()
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+
+  it('selects the week when the week number is clicked', async () => {
+    const wrapper = mountWeek()
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+
+  it('previews the whole week on day hover', async () => {
+    const wrapper = mountWeek()
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('mouseenter')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-24"]').attributes('data-range-role')).toBe('end')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
+  })
+
+  it('previews the whole week on week-number hover', async () => {
+    const wrapper = mountWeek()
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('mouseenter')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
+  })
+
+  it('marks the committed week number', async () => {
+    const wrapper = mountWeek({modelValue: '2026-W21'})
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    expect(wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').attributes('data-marked')).toBe('true')
+    expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
+  })
+
+  it('emits null on clear', async () => {
+    const wrapper = mountWeek({modelValue: '2026-W21'})
+    await wrapper.get('[data-test="clear"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
+  })
+
+  it('disables a week fully outside min/max', async () => {
+    const wrapper = mountWeek({min: '2026-05-18', max: '2026-05-31'})
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    const earlyWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-11"]')
+    expect((earlyWeek.element as HTMLButtonElement).disabled).toBe(true)
+    const selectableWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]')
+    expect((selectableWeek.element as HTMLButtonElement).disabled).toBe(false)
+  })
+
+  it('does not open when disabled', async () => {
+    const wrapper = mountWeek({disabled: true})
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+
+  it('does not open when readonly', async () => {
+    const wrapper = mountWeek({readonly: true, modelValue: '2026-W21'})
+    await wrapper.get('[data-test="date-input"]').trigger('click')
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+
+  it('sets aria-invalid on error', () => {
+    const wrapper = mountWeek({error: 'Semaine requise'})
+    expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.text()).toContain('Semaine requise')
+  })
+})

app/components/malio/date/DateWeek.vue

@@ -0,0 +1,123 @@
+<template>
+  <CalendarField
+    :id="id"
+    :display-value="displayValue"
+    :sync-to="validWeek?.monday ?? null"
+    :name="name"
+    :label="label"
+    :placeholder="placeholder"
+    :required="required"
+    :disabled="disabled"
+    :readonly="readonly"
+    :hint="hint"
+    :error="error"
+    :success="success"
+    :clearable="clearable"
+    :input-class="inputClass"
+    :label-class="labelClass"
+    :group-class="groupClass"
+    v-bind="$attrs"
+    @clear="onClear"
+    @close="onClose"
+  >
+    <template #default="{ currentMonth, currentYear, close }">
+      <MonthGrid
+        :month="currentMonth"
+        :year="currentYear"
+        :range-start="activeMonday"
+        :range-end="activeSunday"
+        :marked-week-start="validWeek?.monday ?? null"
+        interactive-week-number
+        :min="min"
+        :max="max"
+        @select="(iso) => onSelect(iso, close)"
+        @hover="onHover"
+      />
+    </template>
+  </CalendarField>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import CalendarField from './internal/CalendarField.vue'
+import MonthGrid from './internal/MonthGrid.vue'
+import {formatWeekDisplay, isValidIsoWeek, isoWeekToMonday, mondayOf, sundayOf, toIsoWeek} from './composables/dateWeek'
+
+defineOptions({name: 'MalioDateWeek', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    name?: string
+    label?: string
+    modelValue?: string | null
+    placeholder?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    min?: string
+    max?: string
+    clearable?: boolean
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    label: '',
+    modelValue: undefined,
+    placeholder: 'JJ/MM/AAAA',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+    min: undefined,
+    max: undefined,
+    clearable: true,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+  },
+)
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
+
+const hoverWeekStart = ref<string | null>(null)
+
+const validWeek = computed(() => {
+  if (props.modelValue && isValidIsoWeek(props.modelValue)) {
+    return {monday: isoWeekToMonday(props.modelValue) as string}
+  }
+  return null
+})
+
+const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
+const activeSunday = computed(() => (activeMonday.value ? sundayOf(activeMonday.value) : null))
+
+const displayValue = computed(() => (validWeek.value ? formatWeekDisplay(props.modelValue as string) : ''))
+
+const onSelect = (iso: string, close: () => void) => {
+  emit('update:modelValue', toIsoWeek(iso))
+  hoverWeekStart.value = null
+  close()
+}
+
+const onHover = (iso: string | null) => {
+  hoverWeekStart.value = iso ? mondayOf(iso) : null
+}
+
+const onClose = () => {
+  hoverWeekStart.value = null
+}
+
+const onClear = () => {
+  emit('update:modelValue', null)
+  hoverWeekStart.value = null
+}
+</script>

app/components/malio/date/composables/dateFormat.test.ts

@@ -0,0 +1,62 @@
+import {describe, expect, it} from 'vitest'
+import {formatIsoToDisplay, isDateInRange, isValidIso, parseDisplayToIso} from './dateFormat'
+
+describe('dateFormat', () => {
+  describe('isValidIso', () => {
+    it('accepts a real ISO date', () => {
+      expect(isValidIso('2026-05-19')).toBe(true)
+    })
+    it('rejects a malformed string', () => {
+      expect(isValidIso('19/05/2026')).toBe(false)
+      expect(isValidIso('2026-5-9')).toBe(false)
+      expect(isValidIso('')).toBe(false)
+    })
+    it('rejects an impossible date', () => {
+      expect(isValidIso('2026-02-30')).toBe(false)
+      expect(isValidIso('2026-13-01')).toBe(false)
+    })
+    it('accepts Feb 29 on a leap year and rejects it otherwise', () => {
+      expect(isValidIso('2024-02-29')).toBe(true)
+      expect(isValidIso('2026-02-29')).toBe(false)
+    })
+  })
+
+  describe('formatIsoToDisplay', () => {
+    it('formats ISO to DD/MM/YYYY', () => {
+      expect(formatIsoToDisplay('2026-05-19')).toBe('19/05/2026')
+    })
+    it('returns empty string for null or invalid input', () => {
+      expect(formatIsoToDisplay(null)).toBe('')
+      expect(formatIsoToDisplay('nope')).toBe('')
+    })
+  })
+
+  describe('parseDisplayToIso', () => {
+    it('parses DD/MM/YYYY to ISO', () => {
+      expect(parseDisplayToIso('19/05/2026')).toBe('2026-05-19')
+    })
+    it('returns null for malformed or impossible input', () => {
+      expect(parseDisplayToIso('2026-05-19')).toBeNull()
+      expect(parseDisplayToIso('31/02/2026')).toBeNull()
+      expect(parseDisplayToIso('')).toBeNull()
+    })
+  })
+
+  describe('isDateInRange', () => {
+    it('returns true when no bounds are given', () => {
+      expect(isDateInRange('2026-05-19')).toBe(true)
+    })
+    it('respects the min bound (inclusive)', () => {
+      expect(isDateInRange('2026-05-19', '2026-05-19')).toBe(true)
+      expect(isDateInRange('2026-05-18', '2026-05-19')).toBe(false)
+    })
+    it('respects the max bound (inclusive)', () => {
+      expect(isDateInRange('2026-05-19', undefined, '2026-05-19')).toBe(true)
+      expect(isDateInRange('2026-05-20', undefined, '2026-05-19')).toBe(false)
+    })
+    it('respects both bounds', () => {
+      expect(isDateInRange('2026-05-15', '2026-05-10', '2026-05-20')).toBe(true)
+      expect(isDateInRange('2026-05-25', '2026-05-10', '2026-05-20')).toBe(false)
+    })
+  })
+})

app/components/malio/date/composables/dateFormat.ts

@@ -0,0 +1,26 @@
+export function isValidIso(iso: string): boolean {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return false
+  const [y, m, d] = iso.split('-').map(Number)
+  const date = new Date(y, m - 1, d)
+  return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d
+}
+
+export function formatIsoToDisplay(iso: string | null): string {
+  if (!iso || !isValidIso(iso)) return ''
+  const [y, m, d] = iso.split('-')
+  return `${d}/${m}/${y}`
+}
+
+export function parseDisplayToIso(display: string): string | null {
+  const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(display.trim())
+  if (!match) return null
+  const [, dd, mm, yyyy] = match
+  const iso = `${yyyy}-${mm}-${dd}`
+  return isValidIso(iso) ? iso : null
+}
+
+export function isDateInRange(iso: string, min?: string, max?: string): boolean {
+  if (min && iso < min) return false
+  if (max && iso > max) return false
+  return true
+}

app/components/malio/date/composables/dateRange.test.ts

@@ -0,0 +1,57 @@
+import {describe, expect, it} from 'vitest'
+import {dayRangeRole, normalizeRange, resolveRangeBounds} from './dateRange'
+
+describe('dateRange', () => {
+  describe('normalizeRange', () => {
+    it('keeps an already ordered pair', () => {
+      expect(normalizeRange('2026-05-19', '2026-05-25')).toEqual({start: '2026-05-19', end: '2026-05-25'})
+    })
+    it('swaps a reversed pair', () => {
+      expect(normalizeRange('2026-05-25', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-25'})
+    })
+    it('handles an equal pair', () => {
+      expect(normalizeRange('2026-05-19', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-19'})
+    })
+  })
+
+  describe('resolveRangeBounds', () => {
+    it('returns null without a start', () => {
+      expect(resolveRangeBounds(null, null, null)).toBeNull()
+    })
+    it('returns a single-point range when only start is set', () => {
+      expect(resolveRangeBounds('2026-05-19', null, null)).toEqual({lo: '2026-05-19', hi: '2026-05-19'})
+    })
+    it('orders start and committed end', () => {
+      expect(resolveRangeBounds('2026-05-19', '2026-05-25', null)).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
+    })
+    it('uses preview when end is not set', () => {
+      expect(resolveRangeBounds('2026-05-19', null, '2026-05-22')).toEqual({lo: '2026-05-19', hi: '2026-05-22'})
+    })
+    it('inverts when preview is before start', () => {
+      expect(resolveRangeBounds('2026-05-19', null, '2026-05-10')).toEqual({lo: '2026-05-10', hi: '2026-05-19'})
+    })
+    it('prioritises committed end over preview', () => {
+      expect(resolveRangeBounds('2026-05-19', '2026-05-25', '2026-05-30')).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
+    })
+  })
+
+  describe('dayRangeRole', () => {
+    const bounds = {lo: '2026-05-19', hi: '2026-05-25'}
+    it('returns none without bounds', () => {
+      expect(dayRangeRole('2026-05-20', null)).toBe('none')
+    })
+    it('returns single when lo === hi and matches', () => {
+      expect(dayRangeRole('2026-05-19', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('single')
+      expect(dayRangeRole('2026-05-20', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('none')
+    })
+    it('returns start, end and in-range', () => {
+      expect(dayRangeRole('2026-05-19', bounds)).toBe('start')
+      expect(dayRangeRole('2026-05-25', bounds)).toBe('end')
+      expect(dayRangeRole('2026-05-22', bounds)).toBe('in-range')
+    })
+    it('returns none outside the bounds', () => {
+      expect(dayRangeRole('2026-05-10', bounds)).toBe('none')
+      expect(dayRangeRole('2026-05-30', bounds)).toBe('none')
+    })
+  })
+})

app/components/malio/date/composables/dateRange.ts

@@ -0,0 +1,31 @@
+export type DateRangeValue = {start: string; end: string}
+
+export function normalizeRange(a: string, b: string): DateRangeValue {
+  return a <= b ? {start: a, end: b} : {start: b, end: a}
+}
+
+export function resolveRangeBounds(
+  start: string | null,
+  end: string | null,
+  preview: string | null,
+): {lo: string; hi: string} | null {
+  if (!start) return null
+  const other = end ?? preview
+  if (!other) return {lo: start, hi: start}
+  return start <= other ? {lo: start, hi: other} : {lo: other, hi: start}
+}
+
+export type DayRangeRole = 'none' | 'single' | 'start' | 'end' | 'in-range'
+
+export function dayRangeRole(
+  iso: string,
+  bounds: {lo: string; hi: string} | null,
+): DayRangeRole {
+  if (!bounds) return 'none'
+  const {lo, hi} = bounds
+  if (lo === hi) return iso === lo ? 'single' : 'none'
+  if (iso === lo) return 'start'
+  if (iso === hi) return 'end'
+  if (iso > lo && iso < hi) return 'in-range'
+  return 'none'
+}

app/components/malio/date/composables/dateWeek.test.ts

@@ -0,0 +1,74 @@
+import {describe, expect, it} from 'vitest'
+import {
+  formatWeekDisplay,
+  isValidIsoWeek,
+  isoWeekToMonday,
+  mondayOf,
+  sundayOf,
+  toIsoWeek,
+} from './dateWeek'
+
+describe('dateWeek', () => {
+  describe('mondayOf / sundayOf', () => {
+    it('returns Monday and Sunday of a midweek date', () => {
+      expect(mondayOf('2026-05-20')).toBe('2026-05-18') // mercredi
+      expect(sundayOf('2026-05-20')).toBe('2026-05-24')
+    })
+    it('keeps Monday on a Monday', () => {
+      expect(mondayOf('2026-05-18')).toBe('2026-05-18')
+    })
+    it('returns the preceding Monday for a Sunday', () => {
+      expect(mondayOf('2026-05-24')).toBe('2026-05-18')
+    })
+  })
+
+  describe('toIsoWeek', () => {
+    it('returns the ISO week of a date', () => {
+      expect(toIsoWeek('2026-05-20')).toBe('2026-W21')
+    })
+    it('handles year boundaries', () => {
+      expect(toIsoWeek('2026-01-01')).toBe('2026-W01')
+      expect(toIsoWeek('2025-12-31')).toBe('2026-W01')
+      expect(toIsoWeek('2027-01-01')).toBe('2026-W53')
+    })
+  })
+
+  describe('isoWeekToMonday', () => {
+    it('returns the Monday of a week string', () => {
+      expect(isoWeekToMonday('2026-W21')).toBe('2026-05-18')
+    })
+    it('round-trips with toIsoWeek', () => {
+      for (const w of ['2026-W01', '2026-W21', '2026-W53', '2024-W09']) {
+        const monday = isoWeekToMonday(w)
+        expect(monday).not.toBeNull()
+        expect(toIsoWeek(monday as string)).toBe(w)
+      }
+    })
+    it('returns null for invalid input', () => {
+      expect(isoWeekToMonday('2026-21')).toBeNull()
+      expect(isoWeekToMonday('2026-W00')).toBeNull()
+      expect(isoWeekToMonday('2026-W54')).toBeNull()
+      expect(isoWeekToMonday('2025-W53')).toBeNull() // 2025 n'a que 52 semaines ISO
+    })
+  })
+
+  describe('isValidIsoWeek', () => {
+    it('accepts a real ISO week', () => {
+      expect(isValidIsoWeek('2026-W21')).toBe(true)
+    })
+    it('rejects malformed or impossible weeks', () => {
+      expect(isValidIsoWeek('2026-21')).toBe(false)
+      expect(isValidIsoWeek('2026-W00')).toBe(false)
+      expect(isValidIsoWeek('2026-W54')).toBe(false)
+    })
+  })
+
+  describe('formatWeekDisplay', () => {
+    it('formats a week as a human label', () => {
+      expect(formatWeekDisplay('2026-W21')).toBe('Semaine 21 (18/05 → 24/05/2026)')
+    })
+    it('returns empty string for invalid input', () => {
+      expect(formatWeekDisplay('2026-W54')).toBe('')
+    })
+  })
+})

app/components/malio/date/composables/dateWeek.ts

@@ -0,0 +1,67 @@
+import {formatIsoToDisplay} from './dateFormat'
+
+const parseUtc = (iso: string): Date => {
+  const [y, m, d] = iso.split('-').map(Number)
+  return new Date(Date.UTC(y, m - 1, d))
+}
+
+const toIso = (d: Date): string => {
+  const y = d.getUTCFullYear()
+  const m = String(d.getUTCMonth() + 1).padStart(2, '0')
+  const day = String(d.getUTCDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+export function mondayOf(iso: string): string {
+  const d = parseUtc(iso)
+  const dayNum = d.getUTCDay() || 7 // dimanche = 7
+  d.setUTCDate(d.getUTCDate() - (dayNum - 1))
+  return toIso(d)
+}
+
+export function sundayOf(iso: string): string {
+  const d = parseUtc(mondayOf(iso))
+  d.setUTCDate(d.getUTCDate() + 6)
+  return toIso(d)
+}
+
+export function toIsoWeek(iso: string): string {
+  const d = parseUtc(iso)
+  const dayNum = d.getUTCDay() || 7
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum) // jeudi de la semaine
+  const isoYear = d.getUTCFullYear()
+  const yearStart = new Date(Date.UTC(isoYear, 0, 1))
+  const week = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
+  return `${isoYear}-W${String(week).padStart(2, '0')}`
+}
+
+export function isoWeekToMonday(week: string): string | null {
+  const m = /^(\d{4})-W(\d{2})$/.exec(week)
+  if (!m) return null
+  const year = Number(m[1])
+  const w = Number(m[2])
+  if (w < 1 || w > 53) return null
+  // Lundi de la semaine 1 = lundi de la semaine contenant le 4 janvier
+  const jan4 = new Date(Date.UTC(year, 0, 4))
+  const jan4Day = jan4.getUTCDay() || 7
+  const monday = new Date(jan4)
+  monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (w - 1) * 7)
+  const iso = toIso(monday)
+  // Garde-fou : la semaine 53 n'existe pas pour toutes les années
+  if (toIsoWeek(iso) !== week) return null
+  return iso
+}
+
+export function isValidIsoWeek(week: string): boolean {
+  return isoWeekToMonday(week) !== null
+}
+
+export function formatWeekDisplay(week: string): string {
+  const monday = isoWeekToMonday(week)
+  if (!monday) return ''
+  const sunday = sundayOf(monday)
+  const w = Number(week.slice(6))
+  const startDdMm = formatIsoToDisplay(monday).slice(0, 5) // "18/05"
+  const endFull = formatIsoToDisplay(sunday) // "24/05/2026"
+  return `Semaine ${w} (${startDdMm} → ${endFull})`
+}

app/components/malio/date/composables/useCalendarPopover.test.ts

@@ -0,0 +1,64 @@
+import {describe, expect, it} from 'vitest'
+import {defineComponent, h, ref} from 'vue'
+import {mount} from '@vue/test-utils'
+import {useCalendarPopover} from './useCalendarPopover'
+
+const mountHost = () => {
+  const api: ReturnType<typeof useCalendarPopover> = {} as never
+  const Host = defineComponent({
+    setup() {
+      const root = ref<HTMLElement | null>(null)
+      Object.assign(api, useCalendarPopover(root))
+      return () => h('div', {ref: root}, 'host')
+    },
+  })
+  const wrapper = mount(Host, {attachTo: document.body})
+  return {wrapper, api}
+}
+
+describe('useCalendarPopover', () => {
+  it('starts closed in days view', () => {
+    const {api} = mountHost()
+    expect(api.isOpen.value).toBe(false)
+    expect(api.viewMode.value).toBe('days')
+  })
+
+  it('open() opens in days view', () => {
+    const {api} = mountHost()
+    api.open()
+    expect(api.isOpen.value).toBe(true)
+    expect(api.viewMode.value).toBe('days')
+  })
+
+  it('toggleView() switches between days and months', () => {
+    const {api} = mountHost()
+    api.open()
+    api.toggleView()
+    expect(api.viewMode.value).toBe('months')
+    api.toggleView()
+    expect(api.viewMode.value).toBe('days')
+  })
+
+  it('close() resets isOpen and viewMode', () => {
+    const {api} = mountHost()
+    api.open()
+    api.toggleView()
+    api.close()
+    expect(api.isOpen.value).toBe(false)
+    expect(api.viewMode.value).toBe('days')
+  })
+
+  it('closes on outside mousedown', () => {
+    const {api} = mountHost()
+    api.open()
+    document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
+    expect(api.isOpen.value).toBe(false)
+  })
+
+  it('stays open on inside mousedown', () => {
+    const {wrapper, api} = mountHost()
+    api.open()
+    wrapper.element.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
+    expect(api.isOpen.value).toBe(true)
+  })
+})

app/components/malio/date/composables/useCalendarPopover.ts

@@ -0,0 +1,28 @@
+import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
+
+export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
+  const isOpen = ref(false)
+  const viewMode = ref<'days' | 'months'>('days')
+
+  const open = () => {
+    isOpen.value = true
+    viewMode.value = 'days'
+  }
+  const close = () => {
+    isOpen.value = false
+    viewMode.value = 'days'
+  }
+  const toggleView = () => {
+    viewMode.value = viewMode.value === 'days' ? 'months' : 'days'
+  }
+
+  const onMouseDown = (event: MouseEvent) => {
+    if (!isOpen.value || !rootRef.value) return
+    if (!rootRef.value.contains(event.target as Node)) close()
+  }
+
+  onMounted(() => document.addEventListener('mousedown', onMouseDown))
+  onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
+
+  return {isOpen, viewMode, open, close, toggleView}
+}

app/components/malio/date/composables/useCalendarView.test.ts

@@ -0,0 +1,68 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {ref} from 'vue'
+import {useCalendarView} from './useCalendarView'
+
+describe('useCalendarView', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+  })
+  afterEach(() => vi.useRealTimers())
+
+  it('initialises to the current month and year', () => {
+    const {currentMonth, currentYear} = useCalendarView(ref('days'))
+    expect(currentMonth.value).toBe(4)
+    expect(currentYear.value).toBe(2026)
+  })
+
+  it('goToNext advances the month in days view', () => {
+    const {currentMonth, goToNext} = useCalendarView(ref('days'))
+    goToNext()
+    expect(currentMonth.value).toBe(5)
+  })
+
+  it('rolls December to January and bumps the year', () => {
+    const {currentMonth, currentYear, goToNext} = useCalendarView(ref('days'))
+    currentMonth.value = 11
+    goToNext()
+    expect(currentMonth.value).toBe(0)
+    expect(currentYear.value).toBe(2027)
+  })
+
+  it('rolls January to December backwards', () => {
+    const {currentMonth, currentYear, goToPrev} = useCalendarView(ref('days'))
+    currentMonth.value = 0
+    goToPrev()
+    expect(currentMonth.value).toBe(11)
+    expect(currentYear.value).toBe(2025)
+  })
+
+  it('navigates the year in months view', () => {
+    const {currentYear, goToNext, goToPrev} = useCalendarView(ref('months'))
+    goToNext()
+    expect(currentYear.value).toBe(2027)
+    goToPrev()
+    expect(currentYear.value).toBe(2026)
+  })
+
+  it('selectMonth sets the current month', () => {
+    const {currentMonth, selectMonth} = useCalendarView(ref('days'))
+    selectMonth(0)
+    expect(currentMonth.value).toBe(0)
+  })
+
+  it('syncToIso sets month/year from a valid ISO', () => {
+    const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
+    syncToIso('2025-12-25')
+    expect(currentMonth.value).toBe(11)
+    expect(currentYear.value).toBe(2025)
+  })
+
+  it('syncToIso falls back to today for null/invalid', () => {
+    const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
+    syncToIso('2025-12-25')
+    syncToIso(null)
+    expect(currentMonth.value).toBe(4)
+    expect(currentYear.value).toBe(2026)
+  })
+})

app/components/malio/date/composables/useCalendarView.ts

@@ -0,0 +1,51 @@
+import {ref, type Ref} from 'vue'
+import {isValidIso} from './dateFormat'
+
+export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
+  const today = new Date()
+  const currentMonth = ref(today.getMonth())
+  const currentYear = ref(today.getFullYear())
+
+  const goToPrev = () => {
+    if (viewMode.value === 'months') {
+      currentYear.value -= 1
+      return
+    }
+    if (currentMonth.value === 0) {
+      currentMonth.value = 11
+      currentYear.value -= 1
+    } else {
+      currentMonth.value -= 1
+    }
+  }
+
+  const goToNext = () => {
+    if (viewMode.value === 'months') {
+      currentYear.value += 1
+      return
+    }
+    if (currentMonth.value === 11) {
+      currentMonth.value = 0
+      currentYear.value += 1
+    } else {
+      currentMonth.value += 1
+    }
+  }
+
+  const selectMonth = (m: number) => {
+    currentMonth.value = m
+  }
+
+  const syncToIso = (iso: string | null) => {
+    if (iso && isValidIso(iso)) {
+      currentMonth.value = Number(iso.slice(5, 7)) - 1
+      currentYear.value = Number(iso.slice(0, 4))
+    } else {
+      const now = new Date()
+      currentMonth.value = now.getMonth()
+      currentYear.value = now.getFullYear()
+    }
+  }
+
+  return {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso}
+}

app/components/malio/date/composables/useMonthMatrix.test.ts

@@ -0,0 +1,69 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {ref} from 'vue'
+import {useMonthMatrix} from './useMonthMatrix'
+
+describe('useMonthMatrix', () => {
+  it('always produces 6 weeks of 7 days', () => {
+    const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai 2026
+    expect(weeks.value).toHaveLength(6)
+    weeks.value.forEach(week => expect(week.days).toHaveLength(7))
+  })
+
+  it('starts every week on a Monday', () => {
+    const {weeks} = useMonthMatrix(ref(4), ref(2026))
+    weeks.value.forEach(week => {
+      const first = new Date(`${week.days[0].isoDate}T00:00:00`)
+      expect(first.getDay()).toBe(1) // 1 = lundi
+    })
+  })
+
+  it('flags exactly the days of the current month', () => {
+    const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai = 31 jours
+    const currentMonthDays = weeks.value
+      .flatMap(w => w.days)
+      .filter(d => d.isCurrentMonth)
+    expect(currentMonthDays).toHaveLength(31)
+    expect(currentMonthDays.every(d => d.isoDate.startsWith('2026-05'))).toBe(true)
+  })
+
+  it('handles leap year February (29 days)', () => {
+    const {weeks} = useMonthMatrix(ref(1), ref(2024)) // février 2024
+    const days = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth)
+    expect(days).toHaveLength(29)
+  })
+
+  it('assigns ISO week 1 to the week containing Jan 4th', () => {
+    const {weeks} = useMonthMatrix(ref(0), ref(2026)) // janvier 2026
+    const weekWithJan4 = weeks.value.find(w =>
+      w.days.some(d => d.isoDate === '2026-01-04'),
+    )
+    expect(weekWithJan4?.weekNumber).toBe(1)
+  })
+
+  it('reacts to month/year changes', () => {
+    const month = ref(4)
+    const year = ref(2026)
+    const {weeks} = useMonthMatrix(month, year)
+    const mayCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
+    month.value = 1 // février
+    year.value = 2024
+    const febCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
+    expect(mayCount).toBe(31)
+    expect(febCount).toBe(29)
+  })
+
+  describe('isToday', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+      vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+    })
+    afterEach(() => vi.useRealTimers())
+
+    it('flags only today', () => {
+      const {weeks} = useMonthMatrix(ref(4), ref(2026))
+      const todays = weeks.value.flatMap(w => w.days).filter(d => d.isToday)
+      expect(todays).toHaveLength(1)
+      expect(todays[0].isoDate).toBe('2026-05-19')
+    })
+  })
+})

app/components/malio/date/composables/useMonthMatrix.ts

@@ -0,0 +1,60 @@
+import {computed, type ComputedRef, type Ref} from 'vue'
+
+export type DayCell = {
+  isoDate: string
+  day: number
+  isCurrentMonth: boolean
+  isToday: boolean
+}
+export type WeekRow = {
+  weekNumber: number
+  days: DayCell[]
+}
+
+const toIso = (d: Date): string => {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+const isoWeek = (d: Date): number => {
+  const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
+  const dayNum = target.getUTCDay() || 7 // dimanche = 7
+  target.setUTCDate(target.getUTCDate() + 4 - dayNum) // jeudi de la semaine
+  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
+  return Math.ceil((((target.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
+}
+
+export function useMonthMatrix(
+  month: Ref<number>,
+  year: Ref<number>,
+): {weeks: ComputedRef<WeekRow[]>} {
+  const weeks = computed<WeekRow[]>(() => {
+    const todayIso = toIso(new Date())
+    const first = new Date(year.value, month.value, 1)
+    // recule jusqu'au lundi (getDay : 0 = dimanche)
+    const offset = (first.getDay() + 6) % 7
+    const start = new Date(year.value, month.value, 1 - offset)
+
+    const rows: WeekRow[] = []
+    const cursor = new Date(start)
+    for (let w = 0; w < 6; w++) {
+      const days: DayCell[] = []
+      for (let i = 0; i < 7; i++) {
+        const iso = toIso(cursor)
+        days.push({
+          isoDate: iso,
+          day: cursor.getDate(),
+          isCurrentMonth: cursor.getMonth() === month.value,
+          isToday: iso === todayIso,
+        })
+        cursor.setDate(cursor.getDate() + 1)
+      }
+      rows.push({weekNumber: isoWeek(new Date(`${days[0].isoDate}T00:00:00`)), days})
+    }
+    return rows
+  })
+
+  return {weeks}
+}

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

@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <div
+      ref="root"
+      :class="mergedGroupClass"
+    >
+      <input
+        :id="inputId"
+        :name="name"
+        data-test="date-input"
+        readonly
+        autocomplete="off"
+        :class="mergedInputClass"
+        :required="required"
+        :disabled="disabled"
+        :value="displayValue"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        :aria-expanded="isOpen"
+        aria-haspopup="dialog"
+        v-bind="attrs"
+        placeholder="_"
+        type="text"
+        @click="onFieldClick"
+      >
+
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+
+      <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
+        <button
+          v-if="showClear"
+          type="button"
+          data-test="clear"
+          class="text-m-muted hover:text-m-primary"
+          aria-label="Effacer la date"
+          @click.stop="emit('clear')"
+        >
+          <Icon
+            icon="mdi:close"
+            :width="16"
+            :height="16"
+          />
+        </button>
+        <Icon
+          data-test="calendar-icon"
+          icon="mdi:calendar-blank"
+          :width="24"
+          :height="24"
+          :class="iconStateClass"
+        />
+      </div>
+
+      <div
+        v-if="isOpen"
+        data-test="popover"
+        role="dialog"
+        class="absolute left-0 right-0 top-full z-20 box-border w-full rounded-b-md bg-white p-[10px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+      >
+        <CalendarHeader
+          :view-mode="viewMode"
+          :current-month="currentMonth"
+          :current-year="currentYear"
+          @prev="goToPrev"
+          @next="goToNext"
+          @toggle-view="toggleView"
+        />
+        <slot
+          v-if="viewMode === 'days'"
+          :current-month="currentMonth"
+          :current-year="currentYear"
+          :close="closePopover"
+        />
+        <MonthPicker
+          v-else
+          :selected-month="currentMonth"
+          @select="onSelectMonth"
+        />
+      </div>
+    </div>
+
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+        hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useAttrs, useId, watch} from 'vue'
+import {Icon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+import CalendarHeader from './CalendarHeader.vue'
+import MonthPicker from './MonthPicker.vue'
+import {useCalendarPopover} from '../composables/useCalendarPopover'
+import {useCalendarView} from '../composables/useCalendarView'
+
+defineOptions({name: 'MalioCalendarField', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    displayValue: string
+    syncTo: string | null
+    id?: string
+    name?: string
+    label?: string
+    placeholder?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    clearable?: boolean
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    label: '',
+    placeholder: 'JJ/MM/AAAA',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+    clearable: true,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+  },
+)
+
+const emit = defineEmits<{(e: 'clear' | 'close'): void}>()
+
+const attrs = useAttrs()
+const generatedId = useId()
+const root = ref<HTMLElement | null>(null)
+
+const {isOpen, viewMode, open, close: closePopover, toggleView} = useCalendarPopover(root)
+const {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso} = useCalendarView(viewMode)
+
+const inputId = computed(() => props.id?.toString() || `malio-date-${generatedId}`)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const isFilled = computed(() => props.displayValue.length > 0)
+const showClear = computed(() =>
+  props.clearable && isFilled.value && !props.disabled && !props.readonly,
+)
+const describedBy = computed(() =>
+  (props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
+)
+
+watch(isOpen, (value) => {
+  if (!value) emit('close')
+})
+
+const onFieldClick = () => {
+  if (props.disabled || props.readonly) return
+  if (isOpen.value) {
+    closePopover()
+    return
+  }
+  syncToIso(props.syncTo)
+  open()
+}
+
+watch(() => props.syncTo, (value) => {
+  if (isOpen.value) syncToIso(value)
+})
+
+const onSelectMonth = (m: number) => {
+  selectMonth(m)
+  toggleView()
+}
+
+const mergedGroupClass = computed(() =>
+  twMerge('relative flex h-12 w-full items-center', props.groupClass),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
+    isFilled.value ? 'border-black' : 'border-m-muted',
+    props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : '',
+    hasError.value
+      ? 'border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : 'focus:border-m-primary',
+    isOpen.value ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left font-medium text-sm transition-transform duration-150',
+    (isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
+    hasError.value
+      ? 'text-m-danger'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : isOpen.value
+          ? 'text-m-primary'
+          : 'peer-placeholder-shown:text-m-muted text-black',
+    props.labelClass,
+  ),
+)
+
+const iconStateClass = computed(() => {
+  if (hasError.value) return 'text-m-danger'
+  if (hasSuccess.value) return 'text-m-success'
+  if (isOpen.value) return 'text-m-primary'
+  if (isFilled.value) return 'text-black'
+  return 'text-m-muted'
+})
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex h-[36px] justify-between border-b border-black/60 mb-3">
+    <button
+      type="button"
+      data-test="header-prev"
+      class="ml-2 flex self-start rounded"
+      :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
+      @click="emit('prev')"
+    >
+      <Icon
+        icon="mdi:chevron-left"
+        :width="25"
+        :height="25"
+      />
+    </button>
+
+    <button
+      type="button"
+      data-test="header-toggle"
+      class="flex gap-1 rounded text-base font-medium"
+      @click="emit('toggle-view')"
+    >
+      <span class="mt-[2px]">{{ label }}</span>
+      <Icon
+        icon="mdi:chevron-down"
+        :width="25"
+        :height="25"
+      />
+    </button>
+
+    <button
+      type="button"
+      data-test="header-next"
+      class="mr-2 flex self-start rounded"
+      :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
+      @click="emit('next')"
+    >
+      <Icon
+        icon="mdi:chevron-right"
+        :width="25"
+        :height="25"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {Icon} from '@iconify/vue'
+
+defineOptions({name: 'MalioDateCalendarHeader'})
+
+const props = defineProps<{
+  viewMode: 'days' | 'months'
+  currentMonth: number
+  currentYear: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'prev' | 'next' | 'toggle-view'): void
+}>()
+
+const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+
+const label = computed(() => {
+  const name = monthsLong[props.currentMonth]
+  return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
+})
+</script>

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

@@ -0,0 +1,178 @@
+<template>
+  <div
+    data-test="month-grid"
+    @mouseleave="emit('hover', null)"
+  >
+    <div class="grid grid-cols-[auto_repeat(7,minmax(0,1fr))]">
+      <div class="mr-[12px] flex h-8 w-[35px] items-center justify-center text-[14px] font-medium opacity-[60%]">
+        S
+      </div>
+      <div
+        v-for="d in dayLabels"
+        :key="d"
+        class="flex h-8 items-center justify-center text-[14px] font-medium opacity-[60%]"
+      >
+        {{ d }}
+      </div>
+
+      <template
+        v-for="(week, wIndex) in weeks"
+        :key="week.days[0].isoDate"
+      >
+        <component
+          :is="interactiveWeekNumber ? 'button' : 'div'"
+          data-test="week-number"
+          :data-week-start="week.days[0].isoDate"
+          :data-marked="markedWeekStart === week.days[0].isoDate"
+          :type="interactiveWeekNumber ? 'button' : undefined"
+          :disabled="interactiveWeekNumber ? !weekSelectable(week) : undefined"
+          class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center p-[10px] text-sm"
+          :class="[
+            weekNumberClass(week),
+            wIndex === 0 ? 'rounded-t-md' : '',
+            wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
+          ]"
+          @click="onWeekNumberClick(week)"
+          @mouseenter="onWeekNumberHover(week)"
+        >
+          {{ week.weekNumber }}
+        </component>
+        <button
+          v-for="cell in week.days"
+          :key="cell.isoDate"
+          type="button"
+          data-test="day"
+          :data-iso="cell.isoDate"
+          :data-range-role="roleOf(cell)"
+          :disabled="!inRange(cell.isoDate)"
+          :aria-label="ariaLabel(cell)"
+          :aria-disabled="!inRange(cell.isoDate)"
+          class="relative flex h-[45px] w-full items-center justify-center"
+          :class="inRange(cell.isoDate) ? 'cursor-pointer' : 'cursor-not-allowed'"
+          @click="onSelect(cell.isoDate)"
+          @mouseenter="emit('hover', cell.isoDate)"
+        >
+          <span
+            v-if="roleOf(cell) === 'in-range'"
+            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 bg-m-primary-light"
+          />
+          <span
+            v-else-if="roleOf(cell) === 'start'"
+            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-l-full bg-m-primary-light"
+          />
+          <span
+            v-else-if="roleOf(cell) === 'end'"
+            class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-r-full bg-m-primary-light"
+          />
+          <span
+            class="relative flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors duration-100"
+            :class="cellClass(cell)"
+          >
+            {{ cell.day }}
+          </span>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, toRef} from 'vue'
+import {useMonthMatrix, type DayCell, type WeekRow} from '../composables/useMonthMatrix'
+import {isDateInRange} from '../composables/dateFormat'
+import {dayRangeRole, resolveRangeBounds, type DayRangeRole} from '../composables/dateRange'
+
+defineOptions({name: 'MalioDateMonthGrid'})
+
+const props = withDefaults(
+  defineProps<{
+    month: number
+    year: number
+    selectedDate?: string | null
+    rangeStart?: string | null
+    rangeEnd?: string | null
+    previewDate?: string | null
+    interactiveWeekNumber?: boolean
+    markedWeekStart?: string | null
+    min?: string
+    max?: string
+  }>(),
+  {
+    selectedDate: null,
+    rangeStart: undefined,
+    rangeEnd: undefined,
+    previewDate: undefined,
+    interactiveWeekNumber: false,
+    markedWeekStart: null,
+    min: undefined,
+    max: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'select', iso: string): void
+  (e: 'hover', iso: string | null): void
+}>()
+
+const dayLabels = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
+const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+
+const {weeks} = useMonthMatrix(toRef(props, 'month'), toRef(props, 'year'))
+
+const inRange = (iso: string) => isDateInRange(iso, props.min, props.max)
+
+const weekSelectable = (week: WeekRow) => week.days.some(d => inRange(d.isoDate))
+
+const weekNumberClass = (week: WeekRow) => {
+  if (props.markedWeekStart === week.days[0].isoDate) return 'bg-m-primary text-white'
+  const parts = ['bg-m-primary-light']
+  parts.push(week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60')
+  if (props.interactiveWeekNumber && weekSelectable(week)) parts.push('cursor-pointer')
+  return parts.join(' ')
+}
+
+const onWeekNumberClick = (week: WeekRow) => {
+  if (!props.interactiveWeekNumber || !weekSelectable(week)) return
+  emit('select', week.days[0].isoDate)
+}
+
+const onWeekNumberHover = (week: WeekRow) => {
+  if (!props.interactiveWeekNumber || !weekSelectable(week)) return
+  emit('hover', week.days[0].isoDate)
+}
+
+const isRangeMode = computed(() => props.rangeStart !== undefined)
+const bounds = computed(() =>
+  isRangeMode.value
+    ? resolveRangeBounds(props.rangeStart ?? null, props.rangeEnd ?? null, props.previewDate ?? null)
+    : null,
+)
+
+const roleOf = (cell: DayCell): DayRangeRole => {
+  if (isRangeMode.value) return dayRangeRole(cell.isoDate, bounds.value)
+  return props.selectedDate === cell.isoDate ? 'single' : 'none'
+}
+
+const ariaLabel = (cell: DayCell) => {
+  const [, m, d] = cell.isoDate.split('-')
+  return `${Number(d)} ${monthsLong[Number(m) - 1]} ${cell.isoDate.slice(0, 4)}`
+}
+
+const cellClass = (cell: DayCell) => {
+  if (!inRange(cell.isoDate)) return 'text-m-muted/30'
+  const role = roleOf(cell)
+  if (role === 'start' || role === 'end' || role === 'single') return 'bg-m-primary text-white'
+  if (role === 'in-range') return 'text-black'
+  const parts = ['hover:bg-m-primary/10']
+  if (cell.isToday) parts.push('border border-m-primary text-m-primary')
+  else if (cell.isCurrentMonth) parts.push('text-black')
+  else parts.push('opacity-[60%]')
+  return parts.join(' ')
+}
+
+const onSelect = (iso: string) => {
+  if (!inRange(iso)) return
+  emit('select', iso)
+}
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <div
+    data-test="month-picker"
+    class="grid grid-cols-3 gap-3"
+  >
+    <button
+      v-for="(name, index) in months"
+      :key="name"
+      type="button"
+      data-test="month"
+      :data-month="index"
+      class="flex h-[45px] w-full items-center justify-center"
+      @click="emit('select', index)"
+    >
+      <span
+        class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
+        :class="index === selectedMonth
+          ? 'bg-m-primary text-white'
+          : 'text-black hover:bg-m-primary/10'"
+      >
+        {{ name }}
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({name: 'MalioDateMonthPicker'})
+
+defineProps<{selectedMonth?: number}>()
+
+const emit = defineEmits<{(e: 'select', month: number): void}>()
+
+const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+  'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+</script>

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

@@ -0,0 +1,122 @@
+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 Drawer from './Drawer.vue'
+
+type DrawerProps = {
+  modelValue?: boolean
+  title?: string
+  showClose?: boolean
+  id?: string
+  drawerClass?: string
+}
+
+const DrawerForTest = Drawer as DefineComponent<DrawerProps>
+
+function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>) {
+  return mount(DrawerForTest, {
+    props,
+    slots,
+    global: {
+      stubs: {
+        Teleport: true,
+      },
+    },
+  })
+}
+
+describe('MalioDrawer', () => {
+  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', () => {
+    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', () => {
+    const wrapper = mountComponent(
+      { modelValue: true },
+      { default: '<p data-test="content">Contenu du drawer</p>' },
+    )
+    expect(wrapper.find('[data-test="content"]').text()).toBe('Contenu du drawer')
+  })
+
+  it('emits update:modelValue false on backdrop click', async () => {
+    const wrapper = mountComponent({ modelValue: true })
+    await wrapper.find('[data-test="backdrop"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  it('emits update:modelValue false on close button click', async () => {
+    const wrapper = mountComponent({ modelValue: true })
+    await wrapper.find('[data-test="close-button"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  it('shows close button by default', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
+  })
+
+  it('hides close button when showClose is false', () => {
+    const wrapper = mountComponent({ modelValue: true, showClose: false })
+    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
+  })
+
+  it('close button renders mdi:close icon', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    const icon = wrapper.findComponent(IconifyIcon)
+    expect(icon.props('icon')).toBe('mdi:close')
+  })
+
+  it('uses custom id when provided', () => {
+    const wrapper = mountComponent({ modelValue: true, id: 'my-drawer' })
+    expect(wrapper.find('.fixed').attributes('id')).toBe('my-drawer')
+  })
+
+  it('generates an id when not provided', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    const id = wrapper.find('.fixed').attributes('id')
+    expect(id).toMatch(/^malio-drawer-/)
+  })
+
+  it('has role="dialog" and aria-modal on panel', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    const panel = wrapper.find('[data-test="panel"]')
+    expect(panel.attributes('role')).toBe('dialog')
+    expect(panel.attributes('aria-modal')).toBe('true')
+  })
+
+  it('aria-labelledby links to title id', () => {
+    const wrapper = mountComponent({ modelValue: true, id: 'test-drawer' })
+    const panel = wrapper.find('[data-test="panel"]')
+    expect(panel.attributes('aria-labelledby')).toBe('test-drawer-title')
+    expect(wrapper.find('h2').attributes('id')).toBe('test-drawer-title')
+  })
+
+  it('applies drawerClass to the panel', () => {
+    const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-lg' })
+    const panel = wrapper.find('[data-test="panel"]')
+    expect(panel.classes()).toContain('max-w-lg')
+  })
+
+  it('works in uncontrolled mode', () => {
+    const wrapper = mountComponent()
+    // Without modelValue, defaults to closed
+    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
+  })
+
+  it('close button has aria-label "Fermer"', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
+  })
+})

app/components/malio/drawer/Drawer.vue

@@ -0,0 +1,139 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      name="drawer"
+      appear
+      @after-leave="isRendered = false"
+    >
+      <div
+        v-if="isRendered && isOpen"
+        :id="componentId"
+        class="fixed inset-0 z-50 flex justify-end"
+        v-bind="attrs"
+      >
+        <div
+          class="absolute inset-0 bg-black/40"
+          data-test="backdrop"
+          @click="close"
+        />
+
+        <div
+          :class="twMerge(
+            'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
+            drawerClass,
+          )"
+          role="dialog"
+          :aria-modal="true"
+          :aria-labelledby="titleId"
+          data-test="panel"
+        >
+          <div class="flex items-center justify-between px-5 pb-8 pt-8">
+            <h2
+              :id="titleId"
+              class="text-[32px] font-semibold text-m-primary"
+            >
+              {{ title }}
+            </h2>
+            <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"
+              data-test="close-button"
+              @click="close"
+            >
+              <IconifyIcon
+                icon="mdi:close"
+                :width="24"
+                :height="24"
+              />
+            </button>
+          </div>
+
+          <div
+            class="flex-1 overflow-y-auto px-5"
+          >
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, useId, watch } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'MalioDrawer', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    modelValue?: boolean
+    title?: string
+    showClose?: boolean
+    drawerClass?: string
+  }>(),
+  {
+    id: '',
+    modelValue: undefined,
+    title: '',
+    showClose: true,
+    drawerClass: '',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const componentId = computed(() => props.id || `malio-drawer-${generatedId}`)
+const titleId = computed(() => `${componentId.value}-title`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(false)
+
+const isOpen = computed(() =>
+  isControlled.value ? props.modelValue! : localValue.value,
+)
+
+const isRendered = ref(isOpen.value)
+
+watch(isOpen, (val) => {
+  if (val) isRendered.value = true
+})
+
+function close() {
+  if (!isControlled.value) {
+    localValue.value = false
+  }
+  emit('update:modelValue', false)
+}
+</script>
+
+<style scoped>
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.drawer-enter-active > div:last-child,
+.drawer-leave-active > div:last-child {
+  transition: transform 0.3s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-from > div:last-child,
+.drawer-leave-to > div:last-child {
+  transform: translateX(100%);
+}
+</style>

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

@@ -161,19 +161,19 @@ describe('MalioInputText', () => {
   it('shows error message without label and icon', () => {
     const wrapper = mountInput({error: 'Error message test'})
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
   })
 
   it('shows error message with label and without icon', () => {
     const wrapper = mountInput({error: 'Error message test', label: 'Error message'})
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
   })
 
   it('shows error message with label and icon', () => {
@@ -183,19 +183,19 @@ describe('MalioInputText', () => {
       iconName: 'mdi:key-outline',
     })
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
   })
 
   it('shows error message with icon and without label', () => {
     const wrapper = mountInput({error: 'Error message test', iconName: 'mdi:key-outline'})
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
   })
 
   it('shows success message without label and icon', () => {
@@ -240,10 +240,10 @@ describe('MalioInputText', () => {
       success: 'Success message test',
     })
 
-    expect(wrapper.find('p.text-m-error').exists()).toBe(true)
+    expect(wrapper.find('p.text-m-danger').exists()).toBe(true)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
     expect(wrapper.get('input').classes()).not.toContain('border-m-success')
   })
 
@@ -265,7 +265,7 @@ describe('MalioInputText', () => {
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('top-1/2')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
   })
@@ -277,9 +277,9 @@ describe('MalioInputText', () => {
       label: 'Password',
     })
 
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    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

@@ -53,7 +53,7 @@ describe('MalioInputAmount', () => {
 
     expect(wrapper.get('[data-test="icon"]').exists()).toBe(true)
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
   })
 
   it('generates an amount-specific id', () => {
@@ -87,7 +87,7 @@ describe('MalioInputAmount', () => {
 
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
     expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Montant invalide')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Montant invalide')
   })
 
   it('keeps dots as the decimal separator on input', async () => {
@@ -156,8 +156,22 @@ describe('MalioInputAmount', () => {
       iconPosition: 'left',
     })
 
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    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

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div
       :class="mergedGroupClass"
     >
@@ -38,13 +39,7 @@
         :width="iconSize"
         :height="iconSize"
         data-test="icon"
-      :class="[
+        :class="[iconStateClass, iconPositionClass]"
-      hasError
-        ? 'text-m-error'
-        : hasSuccess
-          ? 'text-m-success' : iconColor,
-      iconPositionClass,
-    ]"
       />
 
     </div>
@@ -53,7 +48,7 @@
       :id="`${inputId}-describedby`"
       :class="[
           hasError
-          ? 'text-m-error'
+            ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
@@ -62,6 +57,7 @@
     >
       {{ hint || error || success }}
     </p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -133,17 +129,17 @@ const isFilled = computed(() => currentValue.value.trim().length > 0)
 
 const mergedGroupClass = computed(() =>
   twMerge(
-    'relative mt-4 flex h-12 w-full items-center',
+    '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 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
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? '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',
@@ -159,7 +155,7 @@ const mergedLabelClass = computed(() =>
     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-error'
+      ? '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',
@@ -220,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'
 })
 
@@ -230,9 +226,18 @@ const focusPaddingClass = computed(() => {
 })
 
 const iconPositionClass = computed(() => {
-  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  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/InputNumber.test.ts

@@ -0,0 +1,165 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import InputNumber from './InputNumber.vue'
+
+type InputNumberProps = {
+  modelValue?: string | null
+  label?: string
+  readonly?: boolean
+  min?: number | string
+  max?: number | string
+}
+
+const InputNumberForTest = InputNumber as DefineComponent<InputNumberProps>
+
+const mountInputNumber = (props: InputNumberProps = {}) =>
+  mount(InputNumberForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputNumber', () => {
+  it('renders the input with a fixed 22px height', () => {
+    const wrapper = mountInputNumber()
+    const input = wrapper.get('input')
+
+    expect(input.classes()).toContain('h-[22px]')
+  })
+
+  it('renders the increment and decrement buttons with a fixed 20px height', () => {
+    const wrapper = mountInputNumber()
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons).toHaveLength(2)
+  })
+
+  it('still emits update:modelValue on input', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('99')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['99'])
+  })
+
+  it('filters letters from the input value', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('a1b2c3')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['123'])
+    expect(input.element.value).toBe('123')
+  })
+
+  it('formats large numbers with spaces in the input display', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('1000000')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1000000'])
+    expect(input.element.value).toBe('1 000 000')
+  })
+
+  it('accepts decimal values with commas', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('12,5')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
+    expect(input.element.value).toBe('12.5')
+  })
+
+  it('keeps a trailing decimal separator while typing', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('12,')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.'])
+    expect(input.element.value).toBe('12.')
+  })
+
+  it('accepts a decimal starting with a comma', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue(',5')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
+    expect(input.element.value).toBe('0.5')
+  })
+
+  it('increments the current value when clicking plus', async () => {
+    const wrapper = mountInputNumber({modelValue: '2'})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3'])
+  })
+
+  it('increments decimal values with a step of 1', async () => {
+    const wrapper = mountInputNumber({modelValue: '1.5'})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2.5'])
+  })
+
+  it('decrements the current value when clicking minus', async () => {
+    const wrapper = mountInputNumber({modelValue: '2'})
+
+    await wrapper.findAll('button')[0].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1'])
+  })
+
+  it('does not change the value from buttons when readonly', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', readonly: true})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('disables minus and prevents decrement at min', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', min: 2})
+    const minusButton = wrapper.findAll('button')[0]
+
+    expect(minusButton.attributes('disabled')).toBeDefined()
+
+    await minusButton.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('disables plus and prevents increment at max', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', max: 2})
+    const plusButton = wrapper.findAll('button')[1]
+
+    expect(plusButton.attributes('disabled')).toBeDefined()
+
+    await plusButton.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('clamps manual input to max', async () => {
+    const wrapper = mountInputNumber({modelValue: '', max: 5})
+    const input = wrapper.get('input')
+
+    await input.setValue('12')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['5'])
+    expect(input.element.value).toBe('5')
+  })
+})

app/components/malio/input/InputNumber.vue

@@ -0,0 +1,305 @@
+<template>
+  <div>
+    <div :class="mergedGroupClass" >
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+      <button
+        type="button"
+        :disabled="isMinusDisabled"
+        @click="decrement"
+      >
+        <IconifyIcon
+          icon="mdi:minus"
+          :class="mergedButtonMinusClass"
+        />
+      </button>
+      <input
+        :id="inputId"
+        :name="name"
+        autocomplete="off"
+        :class="mergedInputClass"
+        :style="inputWidthStyle"
+        :value="displayedValue"
+        :required="required"
+        :disabled="disabled"
+        :readonly="readonly"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        v-bind="attrs"
+        type="text"
+        inputmode="numeric"
+        placeholder="_"
+        @input="onInput"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      >
+      <button
+        type="button"
+        :disabled="isPlusDisabled"
+        @click="increment"
+      >
+        <IconifyIcon
+          icon="mdi:plus"
+          :class="mergedButtonPlusClass"
+        />
+      </button>
+
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-m-muted',
+          '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: 'MalioInputNumber', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    min?: number | string
+    max?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    min: undefined,
+    max: undefined,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+
+const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+
+// Ajoute un separateur de milliers pour l'affichage dans le champ.
+const formatDisplayValue = (value: string) => {
+  if (!value) return ''
+  const [integerPart = '', decimalPart] = value.split('.')
+  const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+
+  if (decimalPart !== undefined) {
+    return `${formattedIntegerPart}.${decimalPart}`
+  }
+
+  return formattedIntegerPart
+}
+
+// Valeur visible dans l'input, avec formatage des milliers.
+const displayedValue = computed(() => formatDisplayValue(currentValue.value))
+const inputCharacterWidth = computed(() => Math.max(displayedValue.value.length, 1))
+
+// Transforme min/max en nombres utilisables.
+const parseBound = (value: number | string | undefined) => {
+  if (value === undefined || value === '') return undefined
+  const parsedValue = Number.parseFloat(String(value).replace(',', '.'))
+  return Number.isNaN(parsedValue) ? undefined : parsedValue
+}
+
+const minValue = computed(() => parseBound(props.min))
+const maxValue = computed(() => parseBound(props.max))
+
+// Recupere la valeur numerique brute actuellement saisie.
+const currentNumericValue = computed(() => {
+  if (currentValue.value === '') return undefined
+  const parsedValue = Number.parseFloat(currentValue.value)
+  return Number.isNaN(parsedValue) ? undefined : parsedValue
+})
+
+const inputWidthStyle = computed(() => ({
+  width: `calc(${inputCharacterWidth.value}ch + 30px)`,
+  maxWidth: '100%',
+}))
+
+const isMinusDisabled = computed(() =>
+  props.disabled || currentNumericValue.value <= minValue.value,
+)
+
+const isPlusDisabled = computed(() =>
+  props.disabled || currentNumericValue.value >= maxValue.value,
+
+)
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    ' peer h-[22px] min-w-0 border bg-white text-center outline-none placeholder:text-transparent text-lg border-x-0 border-black',
+    props.disabled ? 'cursor-not-allowed text-black/60' : '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'
+        : '',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'cursor-pointer text-black mr-4 text-[18px]',
+    hasError.value ? 'text-m-danger' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    props.disabled ? 'cursor-not-allowed text-black/60' : '',
+    props.labelClass,
+  ),
+)
+
+const mergedButtonMinusClass = computed(() =>
+  twMerge(
+    'h-[22px] w-[40px] border border-black rounded-s-[3px]',
+    isMinusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
+    hasError.value
+      ? 'border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : '',
+  ),
+)
+
+const mergedButtonPlusClass = computed(() =>
+  twMerge(
+    'h-[22px] w-[40px] border border-black rounded-e-[3px]',
+    isPlusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
+    hasError.value
+      ? 'border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : '',
+  ),
+)
+
+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
+}>()
+
+// Met a jour l'etat local si besoin puis emet la valeur brute.
+const updateValue = (value: string) => {
+  if (!isControlled.value) {
+    localValue.value = value
+  }
+  emit('update:modelValue', value)
+}
+
+// Force la valeur a rester entre les bornes min et max.
+const clampValue = (value: number) => {
+  if (minValue.value !== undefined && value < minValue.value) return minValue.value
+  if (maxValue.value !== undefined && value > maxValue.value) return maxValue.value
+  return value
+}
+
+// Garde uniquement les chiffres et la virgule puis applique les bornes.
+const normalizeValue = (value: string) => {
+  const sanitizedValue = value
+    .replace(/[^\d,.]/g, '')
+    .replace(/,/g, '.')
+
+  const [integerPart = '', ...decimalParts] = sanitizedValue.split('.')
+  const decimalPart = decimalParts.join('')
+  const hasDecimalSeparator = sanitizedValue.includes('.')
+
+  if (hasDecimalSeparator) {
+    const normalizedValue = `${integerPart || '0'}.${decimalPart}`
+    const parsedValue = Number.parseFloat(normalizedValue)
+
+    if (Number.isNaN(parsedValue)) return ''
+
+    const clampedValue = clampValue(parsedValue)
+    if (clampedValue !== parsedValue) return String(clampedValue)
+
+    return decimalPart === '' ? `${integerPart || '0'}.` : normalizedValue
+  }
+
+  return integerPart === '' ? '' : String(clampValue(Number.parseFloat(integerPart)))
+}
+
+// Reformate l'affichage dans le champ tout en conservant une valeur brute pour le v-model.
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const normalizedValue = normalizeValue(target.value)
+
+  target.value = formatDisplayValue(normalizedValue)
+  updateValue(normalizedValue)
+}
+
+// Retourne la valeur numerique courante, ou 0 si le champ est vide.
+const getNumericValue = () => {
+  const parsedValue = Number.parseFloat(currentValue.value || '0')
+  return Number.isNaN(parsedValue) ? 0 : parsedValue
+}
+
+// Retire 1 a la valeur si l'action est autorisee.
+const decrement = () => {
+  if (props.disabled || props.readonly || isMinusDisabled.value) return
+  updateValue(String(clampValue(getNumericValue() - 1)))
+}
+
+// Ajoute 1 a la valeur si l'action est autorisee.
+const increment = () => {
+  if (props.disabled || props.readonly || isPlusDisabled.value) return
+  updateValue(String(clampValue(getNumericValue() + 1)))
+}
+</script>

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

@@ -0,0 +1,188 @@
+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 InputPassword from './InputPassword.vue'
+
+type InputPasswordProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  maxLength?: number | string
+  minLength?: number | string
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  displayIcon?: boolean
+}
+
+const InputPasswordForTest = InputPassword as DefineComponent<InputPasswordProps>
+
+const mountComponent = (props: InputPasswordProps = {}) =>
+  mount(InputPasswordForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputPassword', () => {
+  it('renders the initial input value', () => {
+    const wrapper = mountComponent({modelValue: 'secret123'})
+
+    expect(wrapper.get('input').element.value).toBe('secret123')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountComponent({label: 'Mot de passe'})
+
+    expect(wrapper.get('label').text()).toBe('Mot de passe')
+  })
+
+  it('has type password by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('input').attributes('type')).toBe('password')
+  })
+
+  it('toggles to type text when icon is clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    expect(wrapper.get('input').attributes('type')).toBe('text')
+  })
+
+  it('toggles back to password on second click', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    expect(wrapper.get('input').attributes('type')).toBe('password')
+  })
+
+  it('does not render icon when displayIcon is false', () => {
+    const wrapper = mountComponent({displayIcon: false})
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
+  })
+
+  it('renders icon by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
+  })
+
+  it('shows eye-off-outline icon when password is hidden', () => {
+    const wrapper = mountComponent()
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:eye-off-outline')
+  })
+
+  it('shows eye-outline icon when password is visible', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:eye-outline')
+  })
+
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mountComponent({modelValue: ''})
+
+    await wrapper.get('input').setValue('new password')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new password'])
+  })
+
+  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: 'Mot de passe requis'})
+
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Mot de passe requis')
+    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: 'Mot de passe valide'})
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Mot de passe 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('links label to input via for/id', () => {
+    const wrapper = mountComponent({id: 'pwd', label: 'Password'})
+
+    expect(wrapper.get('input').attributes('id')).toBe('pwd')
+    expect(wrapper.get('label').attributes('for')).toBe('pwd')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mountComponent({label: 'Password'})
+
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-input-password-')).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('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

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <div
+      :class="mergedGroupClass"
+    >
+      <input
+        :id="inputId"
+        :name="name"
+        :autocomplete="autocomplete"
+        :class="mergedInputClass"
+        :required="required"
+        :maxlength="maxLength"
+        :minlength="minLength"
+        :disabled="disabled"
+        :value="currentValue"
+        :readonly="readonly"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        v-bind="attrs"
+        placeholder="_"
+        :type="isPasswordVisible ? 'text' : 'password'"
+        @input="onInput"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      >
+
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+
+      <IconifyIcon
+        v-if="displayIcon"
+        :icon="isPasswordVisible ? 'mdi:eye-outline' : 'mdi:eye-off-outline'"
+        :width="24"
+        :height="24"
+        data-test="icon"
+        :class="[
+        iconStateClass,
+        'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
+      ]"
+        @click="toggleVisibility"
+      />
+
+    </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: 'MalioInputPassword', 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
+    maxLength?: number | string
+    minLength?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    displayIcon?: boolean
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: 'off',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    maxLength: undefined,
+    minLength: undefined,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+    displayIcon: true,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+const isPasswordVisible = ref(false)
+
+const toggleVisibility = () => {
+  isPasswordVisible.value = !isPasswordVisible.value
+}
+
+const inputId = computed(() => props.id?.toString() || `malio-input-password-${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.displayIcon ? '!pr-10' : '',
+    'focus:pl-[11px]',
+    props.inputClass,
+  ),
+)
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
+    'left-3',
+    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 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>
+.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/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

@@ -0,0 +1,165 @@
+import {afterEach, describe, expect, it} from 'vitest'
+import {flushPromises, mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import InputRichText from './InputRichText.vue'
+
+type InputRichTextProps = {
+  id?: string
+  label?: string
+  modelValue?: string | null
+  placeholder?: string
+  minHeight?: string
+  editable?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  outputFormat?: 'markdown' | 'html'
+  groupClass?: string
+  labelClass?: string
+  editorClass?: string
+}
+
+const InputRichTextForTest = InputRichText as DefineComponent<InputRichTextProps>
+
+const mountComponent = async (props: InputRichTextProps = {}) => {
+  const wrapper = mount(InputRichTextForTest, {
+    props,
+    attachTo: document.body,
+  })
+  await flushPromises()
+  return wrapper
+}
+
+afterEach(() => {
+  document.body.replaceChildren()
+})
+
+describe('MalioInputRichText', () => {
+  it('renders the label and reuses a provided id', async () => {
+    const wrapper = await mountComponent({id: 'custom-rt-id', label: 'Description'})
+
+    const label = wrapper.get('label')
+    expect(label.text()).toBe('Description')
+    expect(label.attributes('for')).toBe('custom-rt-id')
+    expect(wrapper.get('#custom-rt-id').exists()).toBe(true)
+  })
+
+  it('generates an id when missing', async () => {
+    const wrapper = await mountComponent({label: 'Description'})
+
+    const labelFor = wrapper.get('label').attributes('for')
+    expect(labelFor?.startsWith('malio-input-rich-text-')).toBe(true)
+  })
+
+  it('renders the toolbar buttons in editable mode', async () => {
+    const wrapper = await mountComponent({modelValue: ''})
+
+    const buttons = wrapper.findAll('button[type="button"]')
+    expect(buttons.length).toBeGreaterThanOrEqual(13)
+    expect(wrapper.find('button[title="Gras"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Italique"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Lien"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Couleur du texte"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Surlignage"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Annuler"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Rétablir"]').exists()).toBe(true)
+  })
+
+  it('opens and closes the text color palette', async () => {
+    const wrapper = await mountComponent({modelValue: ''})
+
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
+
+    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
+
+    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
+  })
+
+  it('opens the highlight palette and closes the color palette', async () => {
+    const wrapper = await mountComponent({modelValue: ''})
+
+    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
+
+    await wrapper.get('button[title="Surlignage"]').trigger('click')
+    expect(wrapper.find('[aria-label="Palette de surlignage"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
+  })
+
+  it('disables color and highlight buttons when readonly', async () => {
+    const wrapper = await mountComponent({readonly: true, modelValue: ''})
+
+    expect(wrapper.get('button[title="Couleur du texte"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('button[title="Surlignage"]').attributes('disabled')).toBeDefined()
+  })
+
+  it('does not render the toolbar in readonly display mode (editable=false)', async () => {
+    const wrapper = await mountComponent({editable: false, modelValue: '**hi**'})
+
+    expect(wrapper.find('button[title="Gras"]').exists()).toBe(false)
+  })
+
+  it('disables toolbar buttons when disabled', async () => {
+    const wrapper = await mountComponent({disabled: true, modelValue: ''})
+
+    const boldBtn = wrapper.get('button[title="Gras"]')
+    expect(boldBtn.attributes('disabled')).toBeDefined()
+  })
+
+  it('disables toolbar buttons when readonly', async () => {
+    const wrapper = await mountComponent({readonly: true, modelValue: ''})
+
+    const boldBtn = wrapper.get('button[title="Gras"]')
+    expect(boldBtn.attributes('disabled')).toBeDefined()
+  })
+
+  it('shows hint message in muted color', async () => {
+    const wrapper = await mountComponent({hint: 'Helpful hint'})
+
+    expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
+  })
+
+  it('shows error state on wrapper, label and message', async () => {
+    const wrapper = await mountComponent({label: 'Description', error: 'Editor error'})
+
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
+    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
+  })
+
+  it('shows success state on wrapper, label and message', async () => {
+    const wrapper = await mountComponent({label: 'Description', success: 'Editor success'})
+
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('p.text-m-success').text()).toBe('Editor success')
+    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-success')
+  })
+
+  it('prioritizes error over success', async () => {
+    const wrapper = await mountComponent({error: 'Editor error', success: 'Editor success'})
+
+    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
+    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
+  })
+
+  it('sets aria-invalid and aria-describedby on the editor content when error', async () => {
+    const wrapper = await mountComponent({id: 'rt-aria', error: 'Boom'})
+
+    const editorContent = wrapper.find('[aria-invalid="true"]')
+    expect(editorContent.exists()).toBe(true)
+    expect(editorContent.attributes('aria-describedby')).toBe('rt-aria-describedby')
+  })
+
+  it('renders initial markdown content visually', async () => {
+    const wrapper = await mountComponent({modelValue: '## Mon titre\n\nUn paragraphe.'})
+
+    const html = wrapper.html()
+    expect(html).toContain('Mon titre')
+    expect(html).toContain('Un paragraphe.')
+  })
+})

app/components/malio/input/InputRichText.vue

@@ -0,0 +1,574 @@
+<template>
+  <div :class="mergedGroupClass">
+    <label
+      v-if="label"
+      :for="editorId"
+      :class="mergedLabelClass"
+    >
+      {{ label }}
+    </label>
+
+    <!-- Mode lecture seule (rendu uniquement) -->
+    <div
+      v-if="!editable"
+      :id="editorId"
+      :class="mergedReadonlyClass"
+    >
+      <EditorContent :editor="editor" />
+    </div>
+
+    <!-- Mode éditable -->
+    <div
+      v-else
+      :id="editorId"
+      :class="mergedEditorWrapperClass"
+      @click="focusEditor"
+    >
+      <div
+        class="flex flex-wrap items-center gap-0.5 border-b border-m-border bg-m-bg p-1"
+        @click.stop
+      >
+        <button
+          v-for="btn in toolbarButtons"
+          :key="btn.key"
+          type="button"
+          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
+          :class="btn.isActive() ? 'bg-m-primary/15 text-m-primary' : ''"
+          :title="btn.title"
+          :disabled="disabled || readonly"
+          :aria-label="btn.title"
+          :aria-pressed="btn.isActive()"
+          @mousedown.prevent
+          @click="btn.action()"
+        >
+          <IconifyIcon :icon="btn.icon" :width="18" :height="18" />
+        </button>
+
+        <span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
+
+        <div class="relative">
+          <button
+            type="button"
+            class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
+            :class="colorPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
+            title="Couleur du texte"
+            aria-label="Couleur du texte"
+            :aria-expanded="colorPickerOpen"
+            :disabled="disabled || readonly"
+            @mousedown.prevent
+            @click="toggleColorPicker"
+          >
+            <IconifyIcon icon="mdi:format-color-text" :width="18" :height="18" />
+            <span
+              class="-mt-0.5 block h-1 w-4 rounded-sm"
+              :style="{ backgroundColor: currentTextColor ?? 'transparent' }"
+              aria-hidden="true"
+            />
+          </button>
+          <div
+            v-if="colorPickerOpen"
+            class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
+            role="dialog"
+            aria-label="Palette couleur du texte"
+          >
+            <div class="grid grid-cols-4 gap-1">
+              <button
+                v-for="swatch in textColorSwatches"
+                :key="swatch.value"
+                type="button"
+                class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
+                :class="currentTextColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
+                :style="{ backgroundColor: swatch.value }"
+                :title="swatch.label"
+                :aria-label="swatch.label"
+                @mousedown.prevent
+                @click="applyTextColor(swatch.value)"
+              />
+            </div>
+            <button
+              type="button"
+              class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
+              @mousedown.prevent
+              @click="applyTextColor(null)"
+            >
+              <IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
+              Aucune couleur
+            </button>
+          </div>
+        </div>
+
+        <div class="relative">
+          <button
+            type="button"
+            class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
+            :class="highlightPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
+            title="Surlignage"
+            aria-label="Surlignage"
+            :aria-expanded="highlightPickerOpen"
+            :disabled="disabled || readonly"
+            @mousedown.prevent
+            @click="toggleHighlightPicker"
+          >
+            <IconifyIcon icon="mdi:marker" :width="18" :height="18" />
+            <span
+              class="-mt-0.5 block h-1 w-4 rounded-sm"
+              :style="{ backgroundColor: currentHighlightColor ?? 'transparent' }"
+              aria-hidden="true"
+            />
+          </button>
+          <div
+            v-if="highlightPickerOpen"
+            class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
+            role="dialog"
+            aria-label="Palette de surlignage"
+          >
+            <div class="grid grid-cols-4 gap-1">
+              <button
+                v-for="swatch in highlightSwatches"
+                :key="swatch.value"
+                type="button"
+                class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
+                :class="currentHighlightColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
+                :style="{ backgroundColor: swatch.value }"
+                :title="swatch.label"
+                :aria-label="swatch.label"
+                @mousedown.prevent
+                @click="applyHighlight(swatch.value)"
+              />
+            </div>
+            <button
+              type="button"
+              class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
+              @mousedown.prevent
+              @click="applyHighlight(null)"
+            >
+              <IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
+              Aucun surlignage
+            </button>
+          </div>
+        </div>
+
+        <span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
+
+        <button
+          type="button"
+          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
+          title="Annuler"
+          aria-label="Annuler"
+          :disabled="disabled || readonly || !editor?.can().undo()"
+          @mousedown.prevent
+          @click="editor?.chain().focus().undo().run()"
+        >
+          <IconifyIcon icon="mdi:undo" :width="18" :height="18" />
+        </button>
+        <button
+          type="button"
+          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
+          title="Rétablir"
+          aria-label="Rétablir"
+          :disabled="disabled || readonly || !editor?.can().redo()"
+          @mousedown.prevent
+          @click="editor?.chain().focus().redo().run()"
+        >
+          <IconifyIcon icon="mdi:redo" :width="18" :height="18" />
+        </button>
+      </div>
+
+      <EditorContent
+        :editor="editor"
+        class="malio-rich-text flex flex-1 cursor-text"
+        :style="{ minHeight }"
+        :aria-invalid="hasError || undefined"
+        :aria-describedby="describedBy"
+      />
+    </div>
+
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${editorId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px]',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useId, watch } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import { TextStyle } from '@tiptap/extension-text-style'
+import Color from '@tiptap/extension-color'
+import Highlight from '@tiptap/extension-highlight'
+import { Markdown } from 'tiptap-markdown'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'MalioInputRichText', inheritAttrs: false })
+
+type OutputFormat = 'markdown' | 'html'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    modelValue?: string | null | undefined
+    placeholder?: string
+    minHeight?: string
+    editable?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    outputFormat?: OutputFormat
+    groupClass?: string
+    labelClass?: string
+    editorClass?: string
+  }>(),
+  {
+    id: '',
+    label: '',
+    modelValue: undefined,
+    placeholder: '',
+    minHeight: '160px',
+    editable: true,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+    outputFormat: 'html',
+    groupClass: '',
+    labelClass: '',
+    editorClass: '',
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const generatedId = useId()
+const editor = shallowRef<Editor>()
+const isFocused = shallowRef(false)
+
+const editorId = computed(() => props.id?.toString() || `malio-input-rich-text-${generatedId}`)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const isInteractionLocked = computed(() => props.disabled || props.readonly)
+
+const describedBy = computed(() =>
+  hasError.value || hasSuccess.value || props.hint ? `${editorId.value}-describedby` : undefined,
+)
+
+const mergedGroupClass = computed(() => twMerge('w-full', props.groupClass))
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'mb-1 block text-sm font-medium',
+    hasError.value
+      ? 'text-m-danger'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : isFocused.value
+          ? 'text-m-primary'
+          : 'text-m-text',
+    props.disabled ? 'text-black/60' : '',
+    props.labelClass,
+  ),
+)
+
+const mergedEditorWrapperClass = computed(() =>
+  twMerge(
+    'rich-text-wrapper flex flex-col overflow-hidden rounded-md border bg-white transition-colors',
+    hasError.value
+      ? 'border-m-danger focus-within:border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success focus-within:border-m-success'
+        : isFocused.value
+          ? 'border-m-primary'
+          : 'border-m-muted hover:border-m-text/60',
+    props.disabled ? 'cursor-not-allowed bg-m-bg/50 opacity-70' : '',
+    props.editorClass,
+  ),
+)
+
+const mergedReadonlyClass = computed(() =>
+  twMerge(
+    'malio-rich-text prose prose-sm max-w-none rounded-md border border-m-border bg-white p-3',
+    'prose-headings:font-semibold prose-a:text-m-primary',
+    'prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none',
+    'prose-pre:bg-m-text prose-pre:text-white',
+    props.editorClass,
+  ),
+)
+
+const focusEditor = () => {
+  if (isInteractionLocked.value) return
+  closePickers()
+  editor.value?.commands.focus()
+}
+
+const htmlPattern = /<\/?[a-z][\s\S]*>/i
+
+const normalizeEditorInput = (value: string | null | undefined): string => {
+  const content = (value ?? '').replace(/\r\n?/g, '\n')
+  if (htmlPattern.test(content)) return content
+  return content.split('\n').join('\n\n').replace(/\n{3,}/g, '\n\n')
+}
+
+const promptForLink = () => {
+  if (!editor.value) return
+  const previous = editor.value.getAttributes('link').href as string | undefined
+  const url = window.prompt('URL du lien (vide pour retirer)', previous ?? '')
+  if (url === null) return
+  if (url === '') {
+    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+    return
+  }
+  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+}
+
+type ColorSwatch = { label: string; value: string }
+
+const textColorSwatches: ColorSwatch[] = [
+  { label: 'Rouge', value: '#bf2600' },
+  { label: 'Orange', value: '#ff8b00' },
+  { label: 'Jaune', value: '#ffc400' },
+  { label: 'Vert', value: '#00875a' },
+  { label: 'Turquoise', value: '#00a3bf' },
+  { label: 'Bleu', value: '#0747a6' },
+  { label: 'Violet', value: '#5243aa' },
+  { label: 'Gris', value: '#42526e' },
+]
+
+const highlightSwatches: ColorSwatch[] = [
+  { label: 'Rouge', value: '#fdd0c8' },
+  { label: 'Orange', value: '#ffe2c2' },
+  { label: 'Jaune', value: '#fff0b3' },
+  { label: 'Vert', value: '#c6edd0' },
+  { label: 'Turquoise', value: '#c1ecf0' },
+  { label: 'Bleu', value: '#cce0ff' },
+  { label: 'Violet', value: '#dfd8fa' },
+  { label: 'Gris', value: '#dfe1e6' },
+]
+
+const colorPickerOpen = ref(false)
+const highlightPickerOpen = ref(false)
+
+const closePickers = () => {
+  colorPickerOpen.value = false
+  highlightPickerOpen.value = false
+}
+
+const toggleColorPicker = () => {
+  highlightPickerOpen.value = false
+  colorPickerOpen.value = !colorPickerOpen.value
+}
+
+const toggleHighlightPicker = () => {
+  colorPickerOpen.value = false
+  highlightPickerOpen.value = !highlightPickerOpen.value
+}
+
+const applyTextColor = (value: string | null) => {
+  if (!editor.value) return
+  if (value === null) {
+    editor.value.chain().focus().unsetColor().run()
+  } else {
+    editor.value.chain().focus().setColor(value).run()
+  }
+  colorPickerOpen.value = false
+}
+
+const applyHighlight = (value: string | null) => {
+  if (!editor.value) return
+  if (value === null) {
+    editor.value.chain().focus().unsetHighlight().run()
+  } else {
+    editor.value.chain().focus().setHighlight({ color: value }).run()
+  }
+  highlightPickerOpen.value = false
+}
+
+const currentTextColor = computed(() => {
+  const attrs = editor.value?.getAttributes('textStyle') as { color?: string } | undefined
+  return attrs?.color ?? null
+})
+
+const currentHighlightColor = computed(() => {
+  const attrs = editor.value?.getAttributes('highlight') as { color?: string } | undefined
+  return attrs?.color ?? null
+})
+
+const toolbarButtons = computed(() => {
+  const e = editor.value
+  return [
+    { key: 'bold', icon: 'mdi:format-bold', title: 'Gras', isActive: () => !!e?.isActive('bold'), action: () => e?.chain().focus().toggleBold().run() },
+    { key: 'italic', icon: 'mdi:format-italic', title: 'Italique', isActive: () => !!e?.isActive('italic'), action: () => e?.chain().focus().toggleItalic().run() },
+    { key: 'strike', icon: 'mdi:format-strikethrough', title: 'Barré', isActive: () => !!e?.isActive('strike'), action: () => e?.chain().focus().toggleStrike().run() },
+    { key: 'h2', icon: 'mdi:format-header-2', title: 'Titre H2', isActive: () => !!e?.isActive('heading', { level: 2 }), action: () => e?.chain().focus().toggleHeading({ level: 2 }).run() },
+    { key: 'h3', icon: 'mdi:format-header-3', title: 'Titre H3', isActive: () => !!e?.isActive('heading', { level: 3 }), action: () => e?.chain().focus().toggleHeading({ level: 3 }).run() },
+    { key: 'bulletList', icon: 'mdi:format-list-bulleted', title: 'Liste à puces', isActive: () => !!e?.isActive('bulletList'), action: () => e?.chain().focus().toggleBulletList().run() },
+    { key: 'orderedList', icon: 'mdi:format-list-numbered', title: 'Liste numérotée', isActive: () => !!e?.isActive('orderedList'), action: () => e?.chain().focus().toggleOrderedList().run() },
+    { key: 'blockquote', icon: 'mdi:format-quote-close', title: 'Citation', isActive: () => !!e?.isActive('blockquote'), action: () => e?.chain().focus().toggleBlockquote().run() },
+    { key: 'code', icon: 'mdi:code-tags', title: 'Code inline', isActive: () => !!e?.isActive('code'), action: () => e?.chain().focus().toggleCode().run() },
+    { key: 'codeBlock', icon: 'mdi:code-braces-box', title: 'Bloc de code', isActive: () => !!e?.isActive('codeBlock'), action: () => e?.chain().focus().toggleCodeBlock().run() },
+    { key: 'link', icon: 'mdi:link-variant', title: 'Lien', isActive: () => !!e?.isActive('link'), action: promptForLink },
+  ]
+})
+
+const getCurrentValue = (): string => {
+  if (!editor.value) return ''
+  if (props.outputFormat === 'html') return editor.value.getHTML()
+  const storage = (editor.value.storage as unknown as Record<string, { getMarkdown?: () => string } | undefined>).markdown
+  return storage?.getMarkdown ? storage.getMarkdown() : editor.value.getHTML()
+}
+
+const handleDocumentMousedown = (event: MouseEvent) => {
+  if (!colorPickerOpen.value && !highlightPickerOpen.value) return
+  const target = event.target as Node | null
+  if (!target) return
+  const popovers = document.querySelectorAll(`#${editorId.value} [role="dialog"]`)
+  const triggers = document.querySelectorAll(`#${editorId.value} [aria-expanded]`)
+  for (const node of [...popovers, ...triggers]) {
+    if (node.contains(target)) return
+  }
+  closePickers()
+}
+
+const handleDocumentKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && (colorPickerOpen.value || highlightPickerOpen.value)) {
+    closePickers()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleDocumentMousedown)
+  document.addEventListener('keydown', handleDocumentKeydown)
+
+  editor.value = new Editor({
+    content: normalizeEditorInput(props.modelValue),
+    editable: props.editable && !props.disabled && !props.readonly,
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [2, 3] },
+        link: {
+          openOnClick: false,
+          autolink: true,
+          HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
+        },
+      }),
+      TextStyle,
+      Color.configure({ types: ['textStyle'] }),
+      Highlight.configure({ multicolor: true }),
+      Placeholder.configure({
+        placeholder: props.placeholder,
+      }),
+      Markdown.configure({
+        html: true,
+        tightLists: true,
+        bulletListMarker: '-',
+        linkify: true,
+        breaks: false,
+        transformPastedText: true,
+        transformCopiedText: true,
+      }),
+    ],
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm max-w-none w-full p-3 focus:outline-none prose-headings:font-semibold prose-a:text-m-primary prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-m-text prose-pre:text-white',
+      },
+    },
+    onUpdate: () => {
+      emit('update:modelValue', getCurrentValue())
+    },
+    onFocus: () => {
+      isFocused.value = true
+    },
+    onBlur: () => {
+      isFocused.value = false
+    },
+  })
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleDocumentMousedown)
+  document.removeEventListener('keydown', handleDocumentKeydown)
+  editor.value?.destroy()
+})
+
+watch(() => props.modelValue, (incoming) => {
+  if (!editor.value) return
+  if ((incoming ?? '') === getCurrentValue()) return
+  editor.value.commands.setContent(normalizeEditorInput(incoming), { emitUpdate: false })
+})
+
+watch(() => [props.editable, props.disabled, props.readonly], () => {
+  editor.value?.setEditable(props.editable && !props.disabled && !props.readonly)
+})
+</script>
+ 
+<style scoped>
+.malio-rich-text :deep(.ProseMirror) {
+  outline: none;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.malio-rich-text :deep(.ProseMirror > *:first-child) {
+  margin-top: 0;
+}
+.malio-rich-text :deep(.ProseMirror > *:last-child) {
+  margin-bottom: 0;
+}
+.malio-rich-text :deep(.ProseMirror p.is-editor-empty:first-child::before) {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--m-muted));
+  pointer-events: none;
+  height: 0;
+}
+.malio-rich-text :deep(h2) {
+  margin: 0.75rem 0 0.5rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+  color: rgb(var(--m-text));
+}
+.malio-rich-text :deep(h3) {
+  margin: 0.65rem 0 0.4rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  color: rgb(var(--m-text));
+}
+.malio-rich-text :deep(p) {
+  margin: 0.45rem 0;
+}
+.malio-rich-text :deep(ul),
+.malio-rich-text :deep(ol) {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+.malio-rich-text :deep(ul) {
+  list-style: disc;
+}
+.malio-rich-text :deep(ol) {
+  list-style: decimal;
+}
+.malio-rich-text :deep(blockquote) {
+  margin: 0.75rem 0;
+  border-left: 3px solid rgb(var(--m-border));
+  padding-left: 0.75rem;
+  color: rgb(var(--m-muted));
+}
+</style>

app/components/malio/input/InputText.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div
       :class="mergedGroupClass"
     >
@@ -38,13 +39,7 @@
         :width="iconSize"
         :height="iconSize"
         data-test="icon"
-      :class="[
+        :class="[iconStateClass, iconPositionClass]"
-      hasError
-        ? 'text-m-error'
-        : hasSuccess
-          ? 'text-m-success' : iconColor,
-      iconPositionClass,
-    ]"
       />
 
     </div>
@@ -53,7 +48,7 @@
       :id="`${inputId}-describedby`"
       :class="[
           hasError
-          ? 'text-m-error'
+            ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
@@ -62,6 +57,7 @@
     >
       {{ hint || error || success }}
     </p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -138,17 +134,17 @@ const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
 const mergedGroupClass = computed(() =>
   twMerge(
-    'relative mt-4 flex h-12 w-full items-center',
+    '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 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
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? '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',
@@ -164,7 +160,7 @@ const mergedLabelClass = computed(() =>
     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-error'
+      ? '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',
@@ -200,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'
 })
 
@@ -210,9 +206,18 @@ const focusPaddingClass = computed(() => {
 })
 
 const iconPositionClass = computed(() => {
-  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  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.test.ts

@@ -118,9 +118,9 @@ describe('MalioInputTextArea', () => {
       },
     })
 
-    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
     expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true')
   })
 
@@ -145,8 +145,8 @@ describe('MalioInputTextArea', () => {
       },
     })
 
-    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
   })
 })

app/components/malio/input/InputTextArea.vue

@@ -1,21 +1,19 @@
 <template>
-  <div
+  <div :class="mergedGroupClass">
-    class="relative mt-4 w-full"
-  >
     <textarea
       :id="inputId"
       :name="name"
 
       :autocomplete="autocomplete"
-      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent 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-error focus:border-m-error focus:pl-[11px]'
+        ? 'border-m-danger focus:border-m-danger'
         : hasSuccess
-          ? 'border-m-success focus:border-m-success focus:pl-[11px]'
+          ? 'border-m-success focus:border-m-success'
-          : 'focus:border-m-primary focus:pl-[11px]',
+          : 'focus:border-m-primary',
       textInput,
       showCounterComputed ? 'pb-6' : '',
       rounded,
@@ -43,7 +41,7 @@
     shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
     disabled ? 'text-black/60' : '',
     hasError
-      ? 'text-m-error'
+      ? 'text-m-danger'
       : hasSuccess
         ? 'text-m-success'
         : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
@@ -67,7 +65,7 @@
       :id="`${inputId}-describedby`"
       :class="[
         hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
@@ -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

@@ -0,0 +1,189 @@
+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 InputUpload from './InputUpload.vue'
+
+type InputUploadProps = {
+  id?: string
+  label?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  disabled?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  displayIcon?: boolean
+  accept?: string
+}
+
+const InputUploadForTest = InputUpload as DefineComponent<InputUploadProps>
+
+const mountComponent = (props: InputUploadProps = {}) =>
+  mount(InputUploadForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputUpload', () => {
+  it('renders the initial display value', () => {
+    const wrapper = mountComponent({modelValue: 'document.pdf'})
+
+    expect(wrapper.get('input[type="text"]').element.value).toBe('document.pdf')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountComponent({label: 'Téléverser un fichier'})
+
+    expect(wrapper.get('label').text()).toBe('Téléverser un fichier')
+  })
+
+  it('has a hidden file input', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('input[type="file"]').exists()).toBe(true)
+    expect(wrapper.find('input[type="file"]').classes()).toContain('hidden')
+  })
+
+  it('text input is readonly', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('input[type="text"]').attributes('readonly')).toBeDefined()
+  })
+
+  it('renders icon by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
+  })
+
+  it('does not render icon when displayIcon is false', () => {
+    const wrapper = mountComponent({displayIcon: false})
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
+  })
+
+  it('shows the correct upload icon', () => {
+    const wrapper = mountComponent()
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:cloud-arrow-up-outline')
+  })
+
+  it('emits update:modelValue when a file is selected', async () => {
+    const wrapper = mountComponent({modelValue: ''})
+    const fileInput = wrapper.find('input[type="file"]')
+    const file = new File(['content'], 'test.pdf', {type: 'application/pdf'})
+
+    Object.defineProperty(fileInput.element, 'files', {
+      value: [file],
+    })
+    await fileInput.trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test.pdf'])
+  })
+
+  it('emits file-selected with the File object when a file is selected', async () => {
+    const wrapper = mountComponent({modelValue: ''})
+    const fileInput = wrapper.find('input[type="file"]')
+    const file = new File(['content'], 'test.pdf', {type: 'application/pdf'})
+
+    Object.defineProperty(fileInput.element, 'files', {
+      value: [file],
+    })
+    await fileInput.trigger('change')
+
+    expect(wrapper.emitted('file-selected')?.[0]).toEqual([file])
+  })
+
+  it('sets disabled on both inputs when disabled is true', () => {
+    const wrapper = mountComponent({disabled: true})
+
+    expect(wrapper.get('input[type="text"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input[type="file"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input[type="text"]').classes()).toContain('cursor-not-allowed')
+  })
+
+  it('shows error message and styles', () => {
+    const wrapper = mountComponent({error: 'Fichier requis'})
+
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Fichier requis')
+    expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-danger')
+    expect(wrapper.get('input[type="text"]').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: 'Fichier valide'})
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Fichier valide')
+    expect(wrapper.get('input[type="text"]').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 hint message', () => {
+    const wrapper = mountComponent({hint: 'PDF uniquement'})
+
+    expect(wrapper.get('p.text-m-muted').text()).toBe('PDF uniquement')
+  })
+
+  it('links label to input via for/id', () => {
+    const wrapper = mountComponent({id: 'upload', label: 'Fichier'})
+
+    expect(wrapper.get('input[type="text"]').attributes('id')).toBe('upload')
+    expect(wrapper.get('label').attributes('for')).toBe('upload')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mountComponent({label: 'Fichier'})
+
+    const inputId = wrapper.get('input[type="text"]').attributes('id')
+
+    expect(inputId?.startsWith('malio-input-upload-')).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[type="text"]').attributes('aria-invalid')).toBe('false')
+  })
+
+  it('passes accept attribute to file input', () => {
+    const wrapper = mountComponent({accept: '.pdf,.doc'})
+
+    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

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <div
+      :class="mergedGroupClass"
+    >
+      <input
+        ref="fileInputRef"
+        type="file"
+        :accept="accept"
+        class="hidden"
+        :disabled="disabled"
+        @change="onFileChange"
+      >
+
+      <input
+        :id="inputId"
+        :class="mergedInputClass"
+        :disabled="disabled"
+        :value="currentDisplayValue"
+        :readonly="true"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        v-bind="attrs"
+        placeholder="_"
+        type="text"
+        @click="openFilePicker"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      >
+
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+
+      <IconifyIcon
+        v-if="displayIcon"
+        icon="mdi:cloud-arrow-up-outline"
+        :width="24"
+        :height="24"
+        data-test="icon"
+        :class="[
+        iconStateClass,
+        'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
+      ]"
+      />
+
+    </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: 'MalioInputUpload', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    disabled?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    displayIcon?: boolean
+    accept?: string
+  }>(),
+  {
+    id: '',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+    displayIcon: true,
+    accept: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const inputId = computed(() => props.id?.toString() || `malio-input-upload-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentDisplayValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const shouldFloatLabel = computed(() => isFocused.value || currentDisplayValue.value.length > 0)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+const isFilled = computed(() => currentDisplayValue.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-pointer',
+    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.displayIcon ? '!pr-10' : '',
+    'focus:pl-[11px]',
+    props.inputClass,
+  ),
+)
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
+    'left-3',
+    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
+  (event: 'file-selected', file: File): void
+}>()
+
+const openFilePicker = () => {
+  if (props.disabled) return
+  fileInputRef.value?.click()
+}
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    const fileName = file.name
+    if (!isControlled.value) {
+      localValue.value = fileName
+    }
+    emit('update:modelValue', fileName)
+    emit('file-selected', file)
+  }
+}
+
+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>
+.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/radio/RadioButton.test.ts

@@ -112,8 +112,8 @@ describe('MalioRadioButton', () => {
     })
 
     expect(wrapper.get('.radio-control').classes()).toContain('is-error')
-    expect(wrapper.get('.radio-text').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-text').classes()).toContain('text-m-danger')
-    expect(wrapper.get('.radio-message').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger')
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
   })
 
@@ -137,7 +137,7 @@ describe('MalioRadioButton', () => {
     expect(wrapper.get('.radio-control').classes()).toContain('is-error')
     expect(wrapper.get('.radio-control').classes()).not.toContain('is-success')
     expect(wrapper.get('.radio-message').text()).toBe('Selection required')
-    expect(wrapper.get('.radio-message').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger')
   })
 
   it('merges custom classes on group, input and label', () => {
@@ -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,15 +121,16 @@ 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',
-    hasError.value ? 'text-m-error' : '',
+    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' : '',
     props.labelClass,
@@ -136,7 +141,7 @@ const mergedMessageClass = computed(() =>
   twMerge(
     'radio-message ml-3 -mt-1 text-xs',
     hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : 'text-m-muted',
@@ -160,6 +165,10 @@ const onChange = (event: Event) => {
     return
   }
 
+  if (!isControlled.value) {
+    localValue.value = props.value
+  }
+
   emit('update:modelValue', props.value)
 }
 </script>
@@ -170,11 +179,11 @@ const onChange = (event: Event) => {
 }
 
 .radio-control.is-error input[type='radio'] {
-  border-color: rgb(var(--m-error) / 1);
+  border-color: rgb(var(--m-danger) / 1);
 }
 
 .radio-control.is-error .radio-dot {
-  color: rgb(var(--m-error) / 1);
+  color: rgb(var(--m-danger) / 1);
 }
 
 .radio-control.is-success input[type='radio'] {

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
@@ -88,11 +86,46 @@ describe('MalioSelect', () => {
     })
 
     await wrapper.get('button').trigger('click')
-    await wrapper.findAll('li')[2].trigger('click')
+    await wrapper.findAll('li')[1].trigger('click')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
   })
 
+  it('does not render empty option when emptyOptionLabel is empty', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options: [
+          {label: 'AM', value: 'am'},
+          {label: 'PM', value: 'pm'},
+        ],
+      },
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const items = wrapper.findAll('li[role="option"]')
+    expect(items).toHaveLength(2)
+    expect(items[0].text()).toBe('AM')
+    expect(items[1].text()).toBe('PM')
+  })
+
+  it('renders empty option when emptyOptionLabel is provided', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options: [{label: 'AM', value: 'am'}],
+        emptyOptionLabel: 'Choisir...',
+      },
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const items = wrapper.findAll('li[role="option"]')
+    expect(items).toHaveLength(2)
+    expect(items[0].text()).toBe('Choisir...')
+  })
+
   it('renders the empty option with muted text style', async () => {
     const wrapper = mount(SelectForTest, {
       props: {
@@ -139,9 +172,9 @@ describe('MalioSelect', () => {
       },
     })
 
-    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.get('button').classes()).toContain('border-m-danger')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
     expect(wrapper.get('button').attributes('aria-invalid')).toBe('true')
   })
 
@@ -170,8 +203,8 @@ describe('MalioSelect', () => {
       },
     })
 
-    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.get('button').classes()).toContain('border-m-danger')
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
   })
 })

app/components/malio/select/Select.vue

@@ -1,30 +1,31 @@
 <template>
+  <div>
     <div
       ref="root"
-    class="relative mt-4 w-full"
+      :class="mergedGroupClass"
-    :class="[minWidth, maxWidth]"
     >
     <button
       :id="buttonId"
+      ref="buttonRef"
       type="button"
-      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-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-error !border-b-0'
+                ? 'rounded-b-none !border !border-m-danger !border-b-0'
-                : 'rounded-t-none !border-2 !border-m-error !border-t-0'
+                : 'rounded-t-none !border !border-m-danger !border-t-0'
-              : 'border-m-error'
+              : 'border-m-danger'
             : hasSuccess
               ? isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
+                  ? 'rounded-b-none !border !border-m-success !border-b-0'
-                  : 'rounded-t-none !border-2 !border-m-success !border-t-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-b-none !border !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
+                  : 'rounded-t-none !border !border-m-primary !border-t-0'
                 : isOptionSelected
                   ? 'border-black'
                   : 'border-m-muted',
@@ -46,7 +47,7 @@
         :class="[
           isOpen ? 'top-2  z-30' : 'top-2',
           hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
               : isOpen
@@ -75,7 +76,7 @@
         class="absolute right-3 top-1/2 -translate-y-1/2"
         :class="[
           hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
               : 'text-current'
@@ -98,25 +99,33 @@
       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'
+          ? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
-          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+          : 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
         hasError
           ? 'select-scrollbar-error'
           : hasSuccess
             ? 'select-scrollbar-success'
             : 'select-scrollbar-primary',
         hasError
-          ? 'border-m-error'
+          ? 'border-m-danger'
           : hasSuccess
             ? 'border-m-success'
             : '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"
@@ -140,7 +149,7 @@
       :id="`${buttonId}-describedby`"
       :class="[
         hasError
-        ? 'text-m-error'
+          ? 'text-m-danger'
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
@@ -149,11 +158,13 @@
     >
       {{ error || success || hint }}
     </p>
+  </div>
 </template>
 
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
 
 defineOptions({name: 'MalioSelect', inheritAttrs: false})
 
@@ -169,13 +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: '',
@@ -183,19 +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')
@@ -204,10 +216,13 @@ const buttonId = `custom-select-btn-${uid}`
 const listboxId = `custom-select-listbox-${uid}`
 const listRef = ref<HTMLElement | null>(null)
 const listHeight = ref(0)
-const normalizedOptions = computed<Option[]>(() => [
+const normalizedOptions = computed<Option[]>(() => {
-  {label: props.emptyOptionLabel, value: null},
+  if (!props.emptyOptionLabel) return props.options
-  ...props.options,
+  return [{label: props.emptyOptionLabel, value: null}, ...props.options]
-])
+})
+const mergedGroupClass = computed(() =>
+  twMerge('relative w-full h-12 flex items-center', props.groupClass),
+)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isOptionSelected = computed(() =>
@@ -296,6 +311,7 @@ function toggle() {
 function select(value: string | number | null) {
   emit('update:modelValue', value)
   close()
+  buttonRef.value?.blur()
 }
 
 function onClickOutside(e: MouseEvent) {
@@ -313,9 +329,23 @@ 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;
 }
 
 :deep(.select-scrollbar-primary) {

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

@@ -0,0 +1,185 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import SelectCheckbox from './SelectCheckbox.vue'
+
+type Option = {
+  label: string
+  value: string | number
+}
+
+type SelectCheckboxProps = {
+  modelValue: Array<string | number>
+  options?: Option[]
+  emptyOptionLabel?: string
+  label?: string
+  hint?: string
+  error?: string
+  success?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  displayTag?: boolean
+  displaySelectAll?: boolean
+  selectAllLabel?: string
+  disabled?: boolean
+  groupClass?: string
+}
+
+const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
+
+const options: Option[] = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Canada', value: 'ca'},
+]
+
+describe('MalioSelectCheckbox', () => {
+  it('renders checkbox inputs for options', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect(checkboxes).toHaveLength(options.length)
+  })
+
+  it('emits an array with the toggled option value', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+    const checkboxInputs = wrapper.findAll('input[type="checkbox"]')
+    await checkboxInputs[1].setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['fr', 'be']])
+  })
+
+  it('shows the selected count over the total count in the trigger', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'ca'], options},
+    })
+
+    expect(wrapper.text()).toContain('2/3')
+  })
+
+  it('shows 0 over the total count when nothing is selected', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    expect(wrapper.text()).toContain('0/3')
+  })
+
+  it('hides the summary when displayTag is enabled and options are selected', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'ca'], options, displayTag: true},
+    })
+
+    expect(wrapper.text()).not.toContain('2/3')
+    expect(wrapper.text()).toContain('France')
+    expect(wrapper.text()).toContain('Canada')
+  })
+
+  it('hides the summary when displayTag is enabled and nothing is selected', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displayTag: true, emptyOptionLabel: 'Aucune selection'},
+    })
+
+    expect(wrapper.text()).not.toContain('0/3')
+    expect(wrapper.text()).toContain('Aucune selection')
+  })
+
+  it('does not show select all checkbox by default', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect(checkboxes).toHaveLength(options.length)
+  })
+
+  it('shows select all checkbox when displaySelectAll is true', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect(checkboxes).toHaveLength(options.length + 1)
+    expect(wrapper.text()).toContain('Tout sélectionner')
+  })
+
+  it('shows custom select all label', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displaySelectAll: true, selectAllLabel: 'Sélectionner tout'},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.text()).toContain('Sélectionner tout')
+  })
+
+  it('emits all values when select all is clicked and none selected', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    await checkboxes[0].setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['fr', 'be', 'ca']])
+  })
+
+  it('emits empty array when select all is clicked and all selected', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'be', 'ca'], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    await checkboxes[0].setValue(false)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+  })
+
+  it('select all checkbox is checked when all options are selected', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'be', 'ca'], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect((checkboxes[0].element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('select all checkbox is unchecked when not all options are selected', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('applies groupClass via twMerge', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options: [], groupClass: 'mt-4'},
+    })
+    const root = wrapper.find('button').element.parentElement
+    expect(root?.className).toContain('mt-4')
+  })
+})

app/components/malio/select/SelectCheckbox.vue

@@ -0,0 +1,443 @@
+<template>
+  <div>
+    <div
+      ref="root"
+      :class="mergedGroupClass"
+    >
+    <button
+      :id="buttonId"
+      ref="buttonRef"
+      type="button"
+      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
+      :class="[
+          hasError
+            ? isOpen
+              ? openDirection === 'down'
+                ? '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 !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 !border-m-primary !border-b-0'
+                  : 'rounded-t-none !border !border-m-primary !border-t-0'
+                : isOptionSelected
+                  ? 'border-black'
+                  : 'border-m-muted',
+          disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
+          label ? 'min-h-[40px]' : 'h-[40px] py-0',
+          rounded,
+          textField,
+  ]"
+      :aria-expanded="isOpen"
+      :aria-controls="listboxId"
+      :aria-invalid="hasError"
+      :aria-describedby="describedBy"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <label
+        v-if="label"
+        class="floating-label pointer-events-none absolute left-3 inline-block origin-left transition-transform duration-150 font-medium"
+        :class="[
+          isOpen ? 'top-2  z-30' : 'top-2',
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : isOpen
+                ? 'text-m-primary'
+                : isOptionSelected
+                  ? 'text-black'
+                  : 'text-m-muted',
+          textLabel,
+        ]"
+        :style="labelTransformStyle"
+      >
+        {{ label }}
+      </label>
+
+      <div
+        v-if="displayTags && selectedOptions.length > 0"
+        class="flex flex-wrap items-center justify-start gap-1"
+        :class="[label ? 'pt-1' : '']"
+      >
+        <span
+          v-for="option in selectedOptions"
+          :key="String(option.value)"
+          class="inline-flex max-w-full items-center rounded-md border border-black px-2 text-sm leading-none text-black"
+        >
+          <span class="truncate pb-[2px]">{{ option.label }}</span>
+        </span>
+      </div>
+
+      <span
+        v-else-if="displayTag && emptyOptionLabel"
+        class="block truncate text-right"
+        :class="[
+          textValue,
+          label ? 'pl-24' : '',
+          'text-m-muted'
+        ]"
+      >
+        {{ emptyOptionLabel }}
+      </span>
+
+      <span
+        v-if="!displayTag"
+        class="block truncate text-right"
+        :class="[
+          textValue,
+          label ? 'pl-24' : '',
+          isOptionSelected ? 'text-black' : 'text-m-muted'
+        ]"
+      >
+        {{ selectionSummary }}
+      </span>
+
+      <span
+        class="absolute right-3 top-1/2 -translate-y-1/2"
+        :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-current'
+        ]"
+      >
+      <slot name="icon">
+        <IconifyIcon
+          icon="mdi:chevron-down"
+          width="20"
+          class="transition-transform duration-300"
+          :class="isOpen ? 'rotate-180' : 'rotate-0'"
+        />
+      </slot>
+    </span>
+    </button>
+
+    <ul
+      v-if="isOpen"
+      :id="listboxId"
+      ref="listRef"
+      role="listbox"
+      :aria-labelledby="buttonId"
+      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
+      :class="[
+        openDirection === 'down'
+          ? '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
+            ? 'select-scrollbar-success'
+            : 'select-scrollbar-primary',
+        hasError
+          ? 'border-m-danger'
+          : hasSuccess
+            ? 'border-m-success'
+            : '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-if="displaySelectAll && normalizedOptions.length > 0"
+        class="border-b border-m-muted/30 px-3 py-2"
+        @mousedown.prevent
+      >
+        <Checkbox
+          :model-value="allSelected"
+          :label="selectAllLabel"
+          :disabled="disabled"
+          group-class="!mt-0"
+          label-class="option-checkbox w-full cursor-pointer font-semibold"
+          tabindex="-1"
+          @update:model-value="toggleAll"
+        />
+      </li>
+      <li
+        v-for="(opt, index) in normalizedOptions"
+        :id="optionId(index)"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="isChecked(opt.value)"
+        class="px-3 py-2"
+        :class="[
+            index === activeIndex ? 'bg-m-muted/10' : '',
+            isChecked(opt.value) ? 'bg-m-muted/10 font-semibold' : '',
+            'text-black'
+          ]"
+        @mouseenter="activeIndex = index"
+        @mousedown.prevent
+      >
+        <Checkbox
+          :model-value="isChecked(opt.value)"
+          :label="opt.label || '\u00A0'"
+          :disabled="disabled"
+          group-class="!mt-0"
+          label-class="option-checkbox w-full cursor-pointer"
+          tabindex="-1"
+          @update:model-value="toggleOption(opt.value)"
+        />
+      </li>
+    </ul>
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${buttonId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+import Checkbox from '../checkbox/Checkbox.vue'
+
+defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
+
+type Option = {
+  label: string;
+  value: string | number
+}
+const props = withDefaults(defineProps<{
+  modelValue: Array<string | number>
+  options?: Option[]
+  emptyOptionLabel?: string
+  label?: string
+  hint?: string
+  error?: string
+  success?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  displayTag?: boolean
+  displaySelectAll?: boolean
+  selectAllLabel?: string
+  disabled?: boolean
+  groupClass?: string
+  noOptionsText?: string
+}>(), {
+  options: () => [],
+  emptyOptionLabel: '',
+  label: '',
+  hint: '',
+  error: '',
+  success: '',
+  textField: 'text-lg',
+  textValue: 'text-lg',
+  textLabel: 'text-sm',
+  rounded: 'rounded-md',
+  displayTag: false,
+  displaySelectAll: false,
+  selectAllLabel: 'Tout sélectionner',
+  disabled: false,
+  groupClass: '',
+  noOptionsText: 'Aucune option disponible',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Array<string | number>): void
+}>()
+const root = ref<HTMLElement | null>(null)
+const buttonRef = ref<HTMLButtonElement | null>(null)
+const isOpen = ref(false)
+const activeIndex = ref(-1)
+const openDirection = ref<'down' | 'up'>('down')
+const uid = useId()
+const buttonId = `custom-select-btn-${uid}`
+const listboxId = `custom-select-listbox-${uid}`
+const listRef = ref<HTMLElement | null>(null)
+const listHeight = ref(0)
+const normalizedOptions = computed<Option[]>(() => props.options)
+const mergedGroupClass = computed(() =>
+  twMerge('relative w-full h-12 flex items-center', props.groupClass),
+)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const isOptionSelected = computed(() =>
+  props.modelValue.length > 0
+)
+const selectedOptions = computed(() =>
+  normalizedOptions.value.filter(option => props.modelValue.includes(option.value)),
+)
+const displayTags = computed(() =>
+  props.displayTag && selectedOptions.value.length > 0,
+)
+const shouldFloatLabel = computed(() =>
+  isOpen.value || displayTags.value
+)
+const selectionSummary = computed(() =>
+  `${props.modelValue.length}/${normalizedOptions.value.length}`
+)
+const allSelected = computed(() =>
+  normalizedOptions.value.length > 0
+  && normalizedOptions.value.every(opt => props.modelValue.includes(opt.value)),
+)
+const describedBy = computed(() =>
+  (hasError.value || hasSuccess.value || !!props.hint) ? `${buttonId}-describedby` : undefined,
+)
+
+function optionId(index: number) {
+  return `custom-select-opt-${uid}-${index}`
+}
+
+function updateOpenDirection() {
+  if (!root.value) return
+
+  const rect = root.value.getBoundingClientRect()
+  const estimatedListHeight = Math.min(normalizedOptions.value.length * 40, 240)
+  const spaceBelow = window.innerHeight - rect.bottom
+  const spaceAbove = rect.top
+
+  openDirection.value =
+    spaceBelow >= estimatedListHeight || spaceBelow >= spaceAbove
+      ? 'down'
+      : 'up'
+}
+
+function open() {
+  updateOpenDirection()
+  isOpen.value = true
+
+  const selectedIndex = normalizedOptions.value.findIndex(o => props.modelValue.includes(o.value))
+  activeIndex.value = selectedIndex >= 0 ? selectedIndex : 0
+
+  nextTick(() => {
+    if (openDirection.value === 'up' && listRef.value) {
+      listHeight.value = listRef.value.offsetHeight
+    } else {
+      listHeight.value = 0
+    }
+  })
+}
+
+const labelTransformStyle = computed(() => {
+  // label non flottant
+  if (!shouldFloatLabel.value) {
+    return {}
+  }
+
+  // fermé ou ouverture vers le bas : comportement classique
+  if (!isOpen.value || openDirection.value === 'down') {
+    return {
+      transform: 'translateY(-1.15rem) scale(0.9)',
+    }
+  }
+
+  // ouverture vers le haut : on remonte en fonction de la hauteur de la liste
+  const extraOffset = 8 // marge visuelle au-dessus de la liste en px
+  const total = 4 +listHeight.value + extraOffset
+  // 18 ≈ 1.15rem pour garder la même base que votre flottant actuel
+
+  return {
+    transform: `translateY(-${total}px) scale(0.9)`,
+  }
+})
+
+function close() {
+  isOpen.value = false
+}
+
+function toggle() {
+  if (props.disabled) return
+  if (isOpen.value) {
+    close()
+    return
+  }
+  open()
+}
+
+function isChecked(value: string | number) {
+  return props.modelValue.includes(value)
+}
+
+function toggleOption(value: string | number) {
+  if (isChecked(value)) {
+    emit('update:modelValue', props.modelValue.filter(item => item !== value))
+  } else {
+    emit('update:modelValue', [...props.modelValue, value])
+  }
+  nextTick(() => buttonRef.value?.focus())
+}
+
+function toggleAll() {
+  if (allSelected.value) {
+    emit('update:modelValue', [])
+  } else {
+    emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
+  }
+  nextTick(() => buttonRef.value?.focus())
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (!root.value) return
+  if (!root.value.contains(e.target as Node)) close()
+}
+
+onMounted(() => document.addEventListener('mousedown', onClickOutside))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
+</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;
+  scrollbar-gutter: stable;
+}
+
+: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/sidebar/Sidebar.test.ts

@@ -0,0 +1,205 @@
+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 Sidebar from './Sidebar.vue'
+
+type SidebarItem = {
+  label: string
+  to: string
+}
+
+type SidebarSection = {
+  label?: string
+  icon?: string
+  items: SidebarItem[]
+}
+
+type SidebarProps = {
+  sections: SidebarSection[]
+  modelValue?: boolean
+  id?: string
+  sidebarClass?: string
+  toggleClass?: string
+}
+
+const SidebarForTest = Sidebar as DefineComponent<SidebarProps>
+
+const sections: SidebarSection[] = [
+  {
+    label: 'LOGISTIQUE / TRANSPORT',
+    icon: 'mdi:truck-delivery',
+    items: [
+      {label: 'Réception / Expédition', to: '/reception'},
+      {label: 'Validation expédition', to: '/validation'},
+    ],
+  },
+  {
+    label: 'COMMERCIAL',
+    icon: 'mdi:handshake',
+    items: [
+      {label: 'Répertoire Fournisseurs', to: '/fournisseurs'},
+    ],
+  },
+]
+
+const stubs = {
+  NuxtLink: {
+    template: '<a :href="to" v-bind="$attrs"><slot /></a>',
+    props: ['to'],
+  },
+}
+
+function mountComponent(props: SidebarProps, slots?: Record<string, string>) {
+  return mount(SidebarForTest, {
+    props,
+    slots,
+    global: {stubs},
+  })
+}
+
+describe('MalioSidebar', () => {
+  it('renders expanded by default', () => {
+    const wrapper = mountComponent({sections})
+    const aside = wrapper.find('aside')
+    expect(aside.classes()).toContain('w-[280px]')
+  })
+
+  it('renders section labels with icons when expanded', () => {
+    const wrapper = mountComponent({sections})
+    const sectionHeaders = wrapper.findAll('nav > div > div')
+    expect(sectionHeaders).toHaveLength(2)
+    expect(sectionHeaders[0].text()).toContain('LOGISTIQUE / TRANSPORT')
+    expect(sectionHeaders[1].text()).toContain('COMMERCIAL')
+  })
+
+  it('renders all menu items with icons and labels', () => {
+    const wrapper = mountComponent({sections})
+    const links = wrapper.findAll('a')
+    expect(links).toHaveLength(3)
+    expect(links[0].text()).toContain('Réception / Expédition')
+    expect(links[1].text()).toContain('Validation expédition')
+    expect(links[2].text()).toContain('Répertoire Fournisseurs')
+  })
+
+  it('renders NuxtLink with correct to prop', () => {
+    const wrapper = mountComponent({sections})
+    const links = wrapper.findAll('a')
+    expect(links[0].attributes('href')).toBe('/reception')
+    expect(links[2].attributes('href')).toBe('/fournisseurs')
+  })
+
+  it('renders section icons via IconifyIcon', () => {
+    const wrapper = mountComponent({sections})
+    const icons = wrapper.findAllComponents(IconifyIcon)
+    // 2 section icons + 1 toggle chevron = 3
+    expect(icons).toHaveLength(3)
+    expect(icons[0].props('icon')).toBe('mdi:truck-delivery')
+    expect(icons[1].props('icon')).toBe('mdi:handshake')
+  })
+
+  it('toggle button shows chevron-left when expanded', () => {
+    const wrapper = mountComponent({sections})
+    const toggleIcon = wrapper.findAllComponents(IconifyIcon).at(-1)!
+    expect(toggleIcon.props('icon')).toBe('mdi:chevron-left')
+  })
+
+  it('collapses on toggle click in uncontrolled mode', async () => {
+    const wrapper = mountComponent({sections})
+    const toggleBtn = wrapper.find('button')
+
+    await toggleBtn.trigger('click')
+
+    const aside = wrapper.find('aside')
+    expect(aside.classes()).toContain('w-[72px]')
+  })
+
+  it('hides section label text when collapsed but keeps section icon', async () => {
+    const wrapper = mountComponent({sections})
+    await wrapper.find('button').trigger('click')
+
+    const sectionHeaders = wrapper.findAll('nav > div > div')
+    expect(sectionHeaders).toHaveLength(2)
+    // Label text spans are hidden
+    sectionHeaders.forEach((header) => {
+      expect(header.findAll('span').filter(s => s.classes().includes('text-[11px]'))).toHaveLength(0)
+    })
+  })
+
+  it('hides item text when collapsed', async () => {
+    const wrapper = mountComponent({sections})
+    await wrapper.find('button').trigger('click')
+
+    const itemSpans = wrapper.findAll('a span')
+    expect(itemSpans).toHaveLength(0)
+  })
+
+  it('toggle button shows chevron-right when collapsed', async () => {
+    const wrapper = mountComponent({sections})
+    await wrapper.find('button').trigger('click')
+
+    const toggleIcon = wrapper.findAllComponents(IconifyIcon).at(-1)!
+    expect(toggleIcon.props('icon')).toBe('mdi:chevron-right')
+  })
+
+  it('emits update:modelValue on toggle click', async () => {
+    const wrapper = mountComponent({sections, modelValue: false})
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+
+  it('respects modelValue in controlled mode', () => {
+    const wrapper = mountComponent({sections, modelValue: true})
+    const aside = wrapper.find('aside')
+    expect(aside.classes()).toContain('w-[72px]')
+  })
+
+  it('renders logo slot when expanded', () => {
+    const wrapper = mountComponent({sections}, {
+      logo: '<img alt="Malio" src="/logo.svg" />',
+    })
+    expect(wrapper.find('img[alt="Malio"]').exists()).toBe(true)
+  })
+
+  it('renders logo-collapsed slot when collapsed', async () => {
+    const wrapper = mountComponent({sections}, {
+      'logo-collapsed': '<img alt="M" src="/logo-m.svg" />',
+    })
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.find('img[alt="M"]').exists()).toBe(true)
+  })
+
+  it('uses custom id when provided', () => {
+    const wrapper = mountComponent({sections, id: 'my-sidebar'})
+    expect(wrapper.find('aside').attributes('id')).toBe('my-sidebar')
+  })
+
+  it('toggle button has correct aria-label', async () => {
+    const wrapper = mountComponent({sections})
+    const btn = wrapper.find('button')
+    expect(btn.attributes('aria-label')).toBe('Plier le menu')
+
+    await btn.trigger('click')
+    expect(btn.attributes('aria-label')).toBe('Déplier le menu')
+  })
+
+  it('section without label does not render a section header', () => {
+    const noLabelSections: SidebarSection[] = [
+      {items: [{label: 'Item', to: '/'}]},
+    ]
+    const wrapper = mountComponent({sections: noLabelSections})
+    expect(wrapper.findAll('nav > div > div')).toHaveLength(0)
+  })
+
+  it('renders section icon in collapsed mode', async () => {
+    const wrapper = mountComponent({sections})
+    await wrapper.find('button').trigger('click')
+
+    const icons = wrapper.findAllComponents(IconifyIcon)
+    // 2 section icons + 1 toggle = 3
+    expect(icons[0].props('icon')).toBe('mdi:truck-delivery')
+    expect(icons[1].props('icon')).toBe('mdi:handshake')
+  })
+})

app/components/malio/sidebar/Sidebar.vue

@@ -0,0 +1,139 @@
+<template>
+  <aside
+    :id="componentId"
+    :class="twMerge(
+      'relative flex h-full flex-col bg-m-bg',
+      collapsed ? 'w-[72px]' : 'w-[280px]',
+      sidebarClass,
+    )"
+    v-bind="$attrs"
+  >
+    <div :class="['px-[20px] py-[14px]', collapsed ? '' : 'mx-[10px] border-b-2 border-m-primary']">
+      <slot
+        v-if="collapsed"
+        name="logo-collapsed"
+      />
+      <slot
+        v-else
+        name="logo"
+      />
+    </div>
+
+    <nav class="flex-1 overflow-y-auto mb-4">
+      <div
+        v-for="(section, sectionIndex) in sections"
+        :key="sectionIndex"
+        :class="collapsed ? 'first:border-t-2 first:border-m-primary' : 'mx-[10px] border-t-2 border-m-primary first:border-t-0'"
+      >
+        <div
+          v-if="section.label"
+          :class="[
+            'flex items-center gap-2 px-[10px] pt-2 pb-3',
+            collapsed ? 'justify-center pt-[40px]' : '',
+          ]"
+        >
+          <IconifyIcon
+            v-if="section.icon"
+            :icon="section.icon"
+            :width="24"
+            class="shrink-0 text-m-primary"
+          />
+          <span
+            v-if="!collapsed"
+            class="text-[15px] font-bold uppercase text-m-primary"
+          >
+            {{ section.label }}
+          </span>
+        </div>
+        <ul>
+          <li
+            v-for="item in section.items"
+            :key="item.to"
+            :class="collapsed ? '' : 'pb-2 last:pb-1'"
+          >
+            <NuxtLink
+              :to="item.to"
+              :class="twMerge(
+                'block truncate rounded-md text-[15px] text-m-text text-black transition-colors hover:bg-m-surface leading-[150%]',
+                collapsed ? 'px-3 text-center' : 'pl-[42px] pr-3',
+              )"
+            >
+              <span v-if="!collapsed">{{ item.label }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <button
+      type="button"
+      :aria-label="collapsed ? 'Déplier le menu' : 'Plier le menu'"
+      :class="twMerge(
+        'absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2 z-10',
+        'flex h-8 w-8 items-center justify-center rounded-full border border-m-border bg-white shadow-sm',
+        'cursor-pointer transition-colors hover:bg-m-surface',
+        toggleClass,
+      )"
+      @click="toggleCollapse"
+    >
+      <IconifyIcon
+        :icon="collapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
+        :width="18"
+      />
+    </button>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioSidebar', inheritAttrs: false})
+
+export type SidebarItem = {
+  label: string
+  to: string
+}
+
+export type SidebarSection = {
+  label?: string
+  icon?: string
+  items: SidebarItem[]
+}
+
+const props = withDefaults(defineProps<{
+  sections: SidebarSection[]
+  modelValue?: boolean
+  id?: string
+  sidebarClass?: string
+  toggleClass?: string
+}>(), {
+  modelValue: undefined,
+  id: '',
+  sidebarClass: '',
+  toggleClass: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const generatedId = useId()
+const componentId = computed(() => props.id || `malio-sidebar-${generatedId}`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(false)
+
+const collapsed = computed(() =>
+  isControlled.value ? props.modelValue! : localValue.value,
+)
+
+function toggleCollapse() {
+  const newValue = !collapsed.value
+  if (!isControlled.value) {
+    localValue.value = newValue
+  }
+  emit('update:modelValue', newValue)
+}
+</script>

app/components/malio/site/SiteSelector.test.ts

@@ -0,0 +1,154 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import SiteSelector from './SiteSelector.vue'
+
+type Site = {
+  id: string
+  name: string
+  color: string
+}
+
+type SiteSelectorProps = {
+  sites: Site[]
+  modelValue?: string
+  id?: string
+  groupClass?: string
+  tileClass?: string
+  labelClass?: string
+}
+
+const SiteSelectorForTest = SiteSelector as DefineComponent<SiteSelectorProps>
+
+const sites: Site[] = [
+  {id: 'chatellerault', name: 'Châtellerault', color: '#2563eb'},
+  {id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a'},
+  {id: 'pommevic', name: 'Pommevic', color: '#dc2626'},
+]
+
+function mountComponent(props: SiteSelectorProps) {
+  return mount(SiteSelectorForTest, {props})
+}
+
+describe('MalioSiteSelector', () => {
+  it('renders one tile per site with the site name', () => {
+    const wrapper = mountComponent({sites})
+    const tiles = wrapper.findAll('[role="radio"]')
+    expect(tiles).toHaveLength(3)
+    expect(tiles[0]!.text()).toBe('Châtellerault')
+    expect(tiles[1]!.text()).toBe('Saint-Jean')
+    expect(tiles[2]!.text()).toBe('Pommevic')
+  })
+
+  it('has role="radiogroup" on the wrapper', () => {
+    const wrapper = mountComponent({sites})
+    expect(wrapper.find('[role="radiogroup"]').exists()).toBe(true)
+  })
+
+  it('selects the first site by default in uncontrolled mode', () => {
+    const wrapper = mountComponent({sites})
+    const tiles = wrapper.findAll('[role="radio"]')
+    expect(tiles[0]!.attributes('aria-checked')).toBe('true')
+    expect(tiles[1]!.attributes('aria-checked')).toBe('false')
+    expect(tiles[2]!.attributes('aria-checked')).toBe('false')
+  })
+
+  it('paints all tiles with the selected site color', () => {
+    const wrapper = mountComponent({sites, modelValue: 'saint-jean'})
+    const tiles = wrapper.findAll('[role="radio"]')
+    for (const tile of tiles) {
+      expect(tile.attributes('style')).toContain('background-color: rgb(22, 163, 74)')
+    }
+  })
+
+  it('applies opacity 1 on the selected tile and 0.4 on the others', () => {
+    const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
+    const tiles = wrapper.findAll('[role="radio"]')
+    expect(tiles[0]!.attributes('style')).toContain('opacity: 1')
+    expect(tiles[1]!.attributes('style')).toContain('opacity: 0.4')
+    expect(tiles[2]!.attributes('style')).toContain('opacity: 0.4')
+  })
+
+  it('updates the shared color when the selection changes', async () => {
+    const wrapper = mountComponent({sites})
+    let tiles = wrapper.findAll('[role="radio"]')
+    expect(tiles[0]!.attributes('style')).toContain('background-color: rgb(37, 99, 235)')
+
+    await tiles[2]!.trigger('click')
+    tiles = wrapper.findAll('[role="radio"]')
+    for (const tile of tiles) {
+      expect(tile.attributes('style')).toContain('background-color: rgb(220, 38, 38)')
+    }
+  })
+
+  it('emits update:modelValue with the clicked site id', async () => {
+    const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
+    const tiles = wrapper.findAll('[role="radio"]')
+
+    await tiles[1]!.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['saint-jean'])
+  })
+
+  it('emits change with the full selected site object', async () => {
+    const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
+    const tiles = wrapper.findAll('[role="radio"]')
+
+    await tiles[2]!.trigger('click')
+
+    expect(wrapper.emitted('change')?.[0]).toEqual([
+      {id: 'pommevic', name: 'Pommevic', color: '#dc2626'},
+    ])
+  })
+
+  it('respects modelValue in controlled mode', () => {
+    const wrapper = mountComponent({sites, modelValue: 'pommevic'})
+    const tiles = wrapper.findAll('[role="radio"]')
+    expect(tiles[0]!.attributes('aria-checked')).toBe('false')
+    expect(tiles[1]!.attributes('aria-checked')).toBe('false')
+    expect(tiles[2]!.attributes('aria-checked')).toBe('true')
+  })
+
+  it('switches selection on click in uncontrolled mode', async () => {
+    const wrapper = mountComponent({sites})
+    const tiles = wrapper.findAll('[role="radio"]')
+
+    await tiles[1]!.trigger('click')
+
+    expect(tiles[0]!.attributes('aria-checked')).toBe('false')
+    expect(tiles[1]!.attributes('aria-checked')).toBe('true')
+    expect(tiles[2]!.attributes('aria-checked')).toBe('false')
+  })
+
+  it('sets roving tabindex (active = 0, others = -1)', () => {
+    const wrapper = mountComponent({sites, modelValue: 'saint-jean'})
+    const tiles = wrapper.findAll('[role="radio"]')
+    expect(tiles[0]!.attributes('tabindex')).toBe('-1')
+    expect(tiles[1]!.attributes('tabindex')).toBe('0')
+    expect(tiles[2]!.attributes('tabindex')).toBe('-1')
+  })
+
+  it('merges groupClass, tileClass and labelClass via twMerge', () => {
+    const wrapper = mountComponent({
+      sites,
+      groupClass: 'rounded-none bg-black',
+      tileClass: 'py-10',
+      labelClass: 'text-xs',
+    })
+    const group = wrapper.find('[role="radiogroup"]')
+    expect(group.classes()).toContain('rounded-none')
+    expect(group.classes()).toContain('bg-black')
+
+    const tile = wrapper.find('[role="radio"]')
+    expect(tile.classes()).toContain('py-10')
+    expect(tile.classes()).not.toContain('py-4')
+
+    const label = tile.find('span')
+    expect(label.classes()).toContain('text-xs')
+  })
+
+  it('uses a custom id when provided', () => {
+    const wrapper = mountComponent({sites, id: 'my-selector'})
+    expect(wrapper.find('[role="radiogroup"]').attributes('id')).toBe('my-selector')
+  })
+})

app/components/malio/site/SiteSelector.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    v-bind="$attrs"
+    :id="componentId"
+    role="radiogroup"
+    :class="mergedGroupClass"
+  >
+    <button
+      v-for="site in sites"
+      :key="site.id"
+      type="button"
+      role="radio"
+      :aria-checked="activeId === site.id"
+      :tabindex="activeId === site.id ? 0 : -1"
+      :style="{
+        backgroundColor: activeColor,
+        opacity: activeId === site.id ? 1 : 0.4,
+      }"
+      :class="mergedTileClass"
+      @click="select(site.id)"
+    >
+      <span :class="mergedLabelClass">{{ site.name }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useId} from 'vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioSiteSelector', inheritAttrs: false})
+
+type Site = {
+  id: string
+  name: string
+  color: string
+}
+
+const props = withDefaults(defineProps<{
+  sites: Site[]
+  modelValue?: string
+  id?: string
+  groupClass?: string
+  tileClass?: string
+  labelClass?: string
+}>(), {
+  modelValue: undefined,
+  id: '',
+  groupClass: '',
+  tileClass: '',
+  labelClass: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'change', site: Site): void
+}>()
+
+const generatedId = useId()
+const componentId = computed(() => props.id || `malio-site-selector-${generatedId}`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(props.sites.length > 0 ? props.sites[0]!.id : '')
+
+const activeId = computed(() =>
+  isControlled.value ? props.modelValue! : localValue.value,
+)
+
+const activeColor = computed(() =>
+  props.sites.find((s) => s.id === activeId.value)?.color ?? '',
+)
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'flex w-full',
+    props.groupClass,
+  ),
+)
+
+const mergedTileClass = computed(() =>
+  twMerge(
+    'flex-1 cursor-pointer px-6 py-4 text-center transition-opacity focus:outline-none',
+    props.tileClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'text-white font-bold uppercase tracking-wide',
+    props.labelClass,
+  ),
+)
+
+function select(id: string) {
+  const site = props.sites.find((s) => s.id === id)
+  if (!site) return
+
+  if (!isControlled.value) {
+    localValue.value = id
+  }
+  emit('update:modelValue', id)
+  emit('change', site)
+}
+</script>

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

@@ -0,0 +1,187 @@
+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 TabList from './TabList.vue'
+
+type Tab = {
+  key: string
+  label: string
+  icon?: string
+  disabled?: boolean
+}
+
+type TabListProps = {
+  tabs: Tab[]
+  modelValue?: string
+  id?: string
+}
+
+const TabListForTest = TabList as DefineComponent<TabListProps>
+
+const tabs: Tab[] = [
+  {key: 'home', label: 'Accueil', icon: 'mdi:home'},
+  {key: 'settings', label: 'Paramètres'},
+  {key: 'profile', label: 'Profil', icon: 'mdi:account'},
+]
+
+function mountComponent(props: TabListProps, slots?: Record<string, string>) {
+  return mount(TabListForTest, {
+    props,
+    slots,
+  })
+}
+
+describe('MalioTabList', () => {
+  it('renders all tab buttons with correct labels', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(3)
+    expect(buttons[0].text()).toContain('Accueil')
+    expect(buttons[1].text()).toContain('Paramètres')
+    expect(buttons[2].text()).toContain('Profil')
+  })
+
+  it('renders icons for tabs that have one', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[0].find('svg').exists()).toBe(true)
+    expect(buttons[2].find('svg').exists()).toBe(true)
+  })
+
+  it('does not render icon when tab has no icon', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[1].find('svg').exists()).toBe(false)
+  })
+
+  it('first tab is active by default in uncontrolled mode', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[0].attributes('aria-selected')).toBe('true')
+    expect(buttons[1].attributes('aria-selected')).toBe('false')
+    expect(buttons[2].attributes('aria-selected')).toBe('false')
+  })
+
+  it('shows the panel content for the active tab (v-show)', () => {
+    const wrapper = mountComponent({tabs}, {
+      home: '<p>Home content</p>',
+      settings: '<p>Settings content</p>',
+      profile: '<p>Profile content</p>',
+    })
+    const panels = wrapper.findAll('[role="tabpanel"]')
+    expect(panels[0].attributes('style')).toBeUndefined()
+    expect(panels[1].attributes('style')).toContain('display: none')
+    expect(panels[2].attributes('style')).toContain('display: none')
+  })
+
+  it('switches tab on click in uncontrolled mode', async () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+
+    await buttons[1].trigger('click')
+
+    expect(buttons[1].attributes('aria-selected')).toBe('true')
+    expect(buttons[0].attributes('aria-selected')).toBe('false')
+  })
+
+  it('emits update:modelValue on click in controlled mode', async () => {
+    const wrapper = mountComponent({tabs, modelValue: 'home'})
+    const buttons = wrapper.findAll('[role="tab"]')
+
+    await buttons[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['profile'])
+  })
+
+  it('respects modelValue for active tab in controlled mode', () => {
+    const wrapper = mountComponent({tabs, modelValue: 'settings'})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[0].attributes('aria-selected')).toBe('false')
+    expect(buttons[1].attributes('aria-selected')).toBe('true')
+    expect(buttons[2].attributes('aria-selected')).toBe('false')
+  })
+
+  it('sets correct aria-controls and aria-labelledby', () => {
+    const wrapper = mountComponent({tabs, id: 'test'})
+    const buttons = wrapper.findAll('[role="tab"]')
+    const panels = wrapper.findAll('[role="tabpanel"]')
+
+    expect(buttons[0].attributes('aria-controls')).toBe('test-panel-home')
+    expect(buttons[1].attributes('aria-controls')).toBe('test-panel-settings')
+    expect(panels[0].attributes('aria-labelledby')).toBe('test-tab-home')
+    expect(panels[1].attributes('aria-labelledby')).toBe('test-tab-settings')
+  })
+
+  it('has role="tablist" on the tab container', () => {
+    const wrapper = mountComponent({tabs})
+    expect(wrapper.find('[role="tablist"]').exists()).toBe(true)
+  })
+
+  it('active tab has tabindex 0, others have -1', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[0].attributes('tabindex')).toBe('0')
+    expect(buttons[1].attributes('tabindex')).toBe('-1')
+    expect(buttons[2].attributes('tabindex')).toBe('-1')
+  })
+
+  it('renders icon props correctly via findComponent', () => {
+    const wrapper = mount(TabListForTest, {
+      props: {tabs},
+    })
+    const icons = wrapper.findAllComponents(IconifyIcon)
+    expect(icons).toHaveLength(2)
+    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

@@ -0,0 +1,95 @@
+<template>
+  <div v-bind="$attrs">
+    <div
+      role="tablist"
+      class="flex justify-center gap-[60px] border-b border-m-primary"
+    >
+      <button
+        v-for="tab in tabs"
+        :id="`${componentId}-tab-${tab.key}`"
+        :key="tab.key"
+        role="tab"
+        type="button"
+        :aria-selected="activeTab === tab.key"
+        :aria-controls="`${componentId}-panel-${tab.key}`"
+        :aria-disabled="!!tab.disabled"
+        :tabindex="activeTab === tab.key ? 0 : -1"
+        :disabled="tab.disabled"
+        :class="[
+          'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
+          activeTab === tab.key
+            ? 'cursor-pointer text-m-primary after:content-[\'\'] after:absolute after:-bottom-[3px] after:left-0 after:right-0 after:h-[3px] after:bg-m-primary'
+            : 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="tab.iconSize ?? 24"
+        />
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <div
+      v-for="tab in tabs"
+      v-show="activeTab === tab.key"
+      :id="`${componentId}-panel-${tab.key}`"
+      :key="tab.key"
+      role="tabpanel"
+      :aria-labelledby="`${componentId}-tab-${tab.key}`"
+    >
+      <slot :name="tab.key" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+
+defineOptions({name: 'MalioTabList', inheritAttrs: false})
+
+type Tab = {
+  key: string
+  label: string
+  icon?: string
+  iconSize?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  tabs: Tab[]
+  modelValue?: string
+  id?: string
+}>(), {
+  modelValue: undefined,
+  id: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const generatedId = useId()
+const componentId = computed(() => props.id || `malio-tab-list-${generatedId}`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(props.tabs.length > 0 ? props.tabs[0].key : '')
+
+const activeTab = computed(() =>
+  isControlled.value ? props.modelValue! : localValue.value,
+)
+
+function selectTab(key: string) {
+  const tab = props.tabs.find(t => t.key === key)
+  if (tab?.disabled) return
+  if (!isControlled.value) {
+    localValue.value = key
+  }
+  emit('update:modelValue', key)
+}
+</script>