From 82c4cfaa90d35b4c131d5c658acda03f4924e659 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 26 Mar 2026 07:40:04 +0000
Subject: [PATCH] feat: Ajout de composant (#23)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

## Description de la PR

## Modification du .env

## Check list

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

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: https://gitea.malio.fr/MALIO-DEV/malio-layer-ui/pulls/23
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
---
 .claude/settings.local.json                   |  18 +
 .../skills/creating-malio-component/SKILL.md  | 223 ++++++++
 .playground/pages/composant/button/button.vue | 112 ++++
 .../pages/composant/button/buttonIcon.vue     | 155 ++++++
 .../pages/composant/checkbox/checkbox.vue     | 101 ++++
 .playground/pages/composant/drawer/drawer.vue |  49 ++
 .../composant/{ => input}/inputAmount.vue     |   0
 .../pages/composant/input/inputNumber.vue     |  80 +++
 .../pages/composant/input/inputPassword.vue   |  99 ++++
 .../pages/composant/{ => input}/inputText.vue |   0
 .../composant/{ => input}/inputTextArea.vue   |   2 +-
 .../pages/composant/input/inputUpload.vue     |  88 +++
 .../composant/{ => radio}/radioButton.vue     |   2 +-
 .../pages/composant/{ => select}/select.vue   |   0
 .../pages/composant/select/selectCheckbox.vue | 193 +++++++
 .../pages/composant/sidebar/sidebar.vue       | 131 +++++
 .playground/pages/composant/tab/tabList.vue   |  66 +++
 .playground/pages/composant/time/time.vue     |  87 +++
 .playground/pages/index.vue                   | 105 +++-
 CHANGELOG.md                                  |  17 +-
 CLAUDE.md                                     |  64 +++
 COMPONENTS.md                                 | 386 +++++++++++++
 app/assets/css/malio.css                      |  41 +-
 app/components/malio/button/Button.test.ts    | 218 ++++++++
 app/components/malio/button/Button.vue        | 102 ++++
 .../malio/button/ButtonIcon.test.ts           | 151 ++++++
 app/components/malio/button/ButtonIcon.vue    |  76 +++
 .../malio/checkbox/Checkbox.test.ts           | 142 +++++
 app/components/malio/checkbox/Checkbox.vue    | 227 ++++++++
 app/components/malio/drawer/Drawer.test.ts    | 122 +++++
 app/components/malio/drawer/Drawer.vue        | 139 +++++
 .../malio/{ => input}/Input.test.ts           |  40 +-
 .../malio/{ => input}/InputAmount.test.ts     |   6 +-
 .../malio/{ => input}/InputAmount.vue         |  10 +-
 .../malio/input/InputNumber.test.ts           | 165 ++++++
 app/components/malio/input/InputNumber.vue    | 303 +++++++++++
 .../malio/input/InputPassword.test.ts         | 174 ++++++
 app/components/malio/input/InputPassword.vue  | 209 +++++++
 .../malio/{ => input}/InputText.vue           |  10 +-
 .../malio/{ => input}/InputTextArea.test.ts   |  10 +-
 .../malio/{ => input}/InputTextArea.vue       |   6 +-
 .../malio/input/InputUpload.test.ts           | 175 ++++++
 app/components/malio/input/InputUpload.vue    | 209 +++++++
 .../malio/{ => radio}/RadioButton.test.ts     |   6 +-
 .../malio/{ => radio}/RadioButton.vue         |   8 +-
 .../malio/{ => select}/Select.test.ts         |  10 +-
 app/components/malio/{ => select}/Select.vue  |  24 +-
 .../malio/select/SelectCheckbox.test.ts       | 178 ++++++
 .../malio/select/SelectCheckbox.vue           | 410 ++++++++++++++
 app/components/malio/sidebar/Sidebar.test.ts  | 205 +++++++
 app/components/malio/sidebar/Sidebar.vue      | 139 +++++
 app/components/malio/tab/TabList.test.ts      | 137 +++++
 app/components/malio/tab/TabList.vue          |  87 +++
 app/components/malio/time/Time.test.ts        |  79 +++
 app/components/malio/time/Time.vue            | 264 +++++++++
 app/story/button/button.story.vue             | 148 +++++
 app/story/button/buttonIcon.story.vue         | 242 +++++++++
 app/story/checkbox/inputCheckbox.story.vue    | 178 ++++++
 app/story/drawer/drawer.story.vue             | 123 +++++
 app/story/{ => input}/inputAmount.story.vue   |  69 ++-
 app/story/input/inputNumber.story.vue         |  83 +++
 app/story/input/inputPassword.story.vue       | 252 +++++++++
 app/story/{ => input}/inputText.story.vue     |  89 ++-
 app/story/{ => input}/inputTextArea.story.vue |  80 ++-
 app/story/input/inputUpload.story.vue         | 236 ++++++++
 app/story/{ => radio}/RadioButton.story.vue   |   2 +-
 app/story/{ => select}/InputSelect.story.vue  |  82 ++-
 app/story/select/selectCheckbox.story.vue     | 213 ++++++++
 app/story/sidebar/sidebarMenu.story.vue       | 227 ++++++++
 app/story/tab/tabList.story.vue               | 109 ++++
 app/story/time/inputTime.story.vue            |  89 +++
 docs/superpowers/plans/2026-03-20-tab-list.md | 511 ++++++++++++++++++
 memory/MEMORY.md                              |   3 +
 memory/user_profile.md                        |   7 +
 nuxt.config.ts                                |  31 +-
 public/LOGO_MALIO.png                         | Bin 0 -> 5824 bytes
 public/LOGO_MALIO_COLLAPSED.png               | Bin 0 -> 2237 bytes
 tailwind.config.ts                            |  21 +-
 78 files changed, 8700 insertions(+), 155 deletions(-)
 create mode 100644 .claude/settings.local.json
 create mode 100644 .claude/skills/creating-malio-component/SKILL.md
 create mode 100644 .playground/pages/composant/button/button.vue
 create mode 100644 .playground/pages/composant/button/buttonIcon.vue
 create mode 100644 .playground/pages/composant/checkbox/checkbox.vue
 create mode 100644 .playground/pages/composant/drawer/drawer.vue
 rename .playground/pages/composant/{ => input}/inputAmount.vue (100%)
 create mode 100644 .playground/pages/composant/input/inputNumber.vue
 create mode 100644 .playground/pages/composant/input/inputPassword.vue
 rename .playground/pages/composant/{ => input}/inputText.vue (100%)
 rename .playground/pages/composant/{ => input}/inputTextArea.vue (96%)
 create mode 100644 .playground/pages/composant/input/inputUpload.vue
 rename .playground/pages/composant/{ => radio}/radioButton.vue (97%)
 rename .playground/pages/composant/{ => select}/select.vue (100%)
 create mode 100644 .playground/pages/composant/select/selectCheckbox.vue
 create mode 100644 .playground/pages/composant/sidebar/sidebar.vue
 create mode 100644 .playground/pages/composant/tab/tabList.vue
 create mode 100644 .playground/pages/composant/time/time.vue
 create mode 100644 CLAUDE.md
 create mode 100644 COMPONENTS.md
 create mode 100644 app/components/malio/button/Button.test.ts
 create mode 100644 app/components/malio/button/Button.vue
 create mode 100644 app/components/malio/button/ButtonIcon.test.ts
 create mode 100644 app/components/malio/button/ButtonIcon.vue
 create mode 100644 app/components/malio/checkbox/Checkbox.test.ts
 create mode 100644 app/components/malio/checkbox/Checkbox.vue
 create mode 100644 app/components/malio/drawer/Drawer.test.ts
 create mode 100644 app/components/malio/drawer/Drawer.vue
 rename app/components/malio/{ => input}/Input.test.ts (88%)
 rename app/components/malio/{ => input}/InputAmount.test.ts (97%)
 rename app/components/malio/{ => input}/InputAmount.vue (96%)
 create mode 100644 app/components/malio/input/InputNumber.test.ts
 create mode 100644 app/components/malio/input/InputNumber.vue
 create mode 100644 app/components/malio/input/InputPassword.test.ts
 create mode 100644 app/components/malio/input/InputPassword.vue
 rename app/components/malio/{ => input}/InputText.vue (96%)
 rename app/components/malio/{ => input}/InputTextArea.test.ts (95%)
 rename app/components/malio/{ => input}/InputTextArea.vue (97%)
 create mode 100644 app/components/malio/input/InputUpload.test.ts
 create mode 100644 app/components/malio/input/InputUpload.vue
 rename app/components/malio/{ => radio}/RadioButton.test.ts (99%)
 rename app/components/malio/{ => radio}/RadioButton.vue (96%)
 rename app/components/malio/{ => select}/Select.test.ts (95%)
 rename app/components/malio/{ => select}/Select.vue (94%)
 create mode 100644 app/components/malio/select/SelectCheckbox.test.ts
 create mode 100644 app/components/malio/select/SelectCheckbox.vue
 create mode 100644 app/components/malio/sidebar/Sidebar.test.ts
 create mode 100644 app/components/malio/sidebar/Sidebar.vue
 create mode 100644 app/components/malio/tab/TabList.test.ts
 create mode 100644 app/components/malio/tab/TabList.vue
 create mode 100644 app/components/malio/time/Time.test.ts
 create mode 100644 app/components/malio/time/Time.vue
 create mode 100644 app/story/button/button.story.vue
 create mode 100644 app/story/button/buttonIcon.story.vue
 create mode 100644 app/story/checkbox/inputCheckbox.story.vue
 create mode 100644 app/story/drawer/drawer.story.vue
 rename app/story/{ => input}/inputAmount.story.vue (70%)
 create mode 100644 app/story/input/inputNumber.story.vue
 create mode 100644 app/story/input/inputPassword.story.vue
 rename app/story/{ => input}/inputText.story.vue (62%)
 rename app/story/{ => input}/inputTextArea.story.vue (63%)
 create mode 100644 app/story/input/inputUpload.story.vue
 rename app/story/{ => radio}/RadioButton.story.vue (98%)
 rename app/story/{ => select}/InputSelect.story.vue (61%)
 create mode 100644 app/story/select/selectCheckbox.story.vue
 create mode 100644 app/story/sidebar/sidebarMenu.story.vue
 create mode 100644 app/story/tab/tabList.story.vue
 create mode 100644 app/story/time/inputTime.story.vue
 create mode 100644 docs/superpowers/plans/2026-03-20-tab-list.md
 create mode 100644 memory/MEMORY.md
 create mode 100644 memory/user_profile.md
 create mode 100644 public/LOGO_MALIO.png
 create mode 100644 public/LOGO_MALIO_COLLAPSED.png

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..8aaa994
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,18 @@
+{
+  "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/)"
+    ]
+  }
+}
diff --git a/.claude/skills/creating-malio-component/SKILL.md b/.claude/skills/creating-malio-component/SKILL.md
new file mode 100644
index 0000000..1e6695d
--- /dev/null
+++ b/.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/<nomComposant>.vue` (camelCase)
+
+La page est auto-détectée par `index.vue` via `import.meta.glob`. Inclure des variantes représentatives dans une grille :
+
+```html
+<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+  <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 |
+| Page playground non détectée | Vérifier le nom du fichier en camelCase dans `.playground/pages/composant/` |
+| Padding input pas ajusté avec icône | Ajouter `!pr-10` (ou équivalent) quand une icône est présente à droite |
+| Story sans initial state | Toujours initialiser les `ref` avec des valeurs pour que les variantes soient visibles dès le chargement |
+| CHANGELOG oublié | Toujours ajouter la ligne dans `### Added` avant de commit |
+| COMPONENTS.md pas mis à jour | Ajouter la doc du composant dans `COMPONENTS.md` — c'est la référence pour les projets consommateurs |
diff --git a/.playground/pages/composant/button/button.vue b/.playground/pages/composant/button/button.vue
new file mode 100644
index 0000000..76c4edc
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/button/buttonIcon.vue b/.playground/pages/composant/button/buttonIcon.vue
new file mode 100644
index 0000000..a32423a
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/checkbox/checkbox.vue b/.playground/pages/composant/checkbox/checkbox.vue
new file mode 100644
index 0000000..1c9f39f
--- /dev/null
+++ b/.playground/pages/composant/checkbox/checkbox.vue
@@ -0,0 +1,101 @@
+<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>
+      <MalioCheckbox
+        v-model="simpleValue"
+        label="Accepter les conditions"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Coche par default</h2>
+      <MalioCheckbox
+        v-model="checkedValue"
+        label="Recevoir la newsletter"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint</h2>
+      <MalioCheckbox
+        v-model="hintValue"
+        label="J'accepte le traitement des donnees"
+        hint="Vous pouvez retirer votre consentement a tout moment."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioCheckbox
+        :model-value="false"
+        label="Accepter les CGU"
+        error="Ce champ est obligatoire."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioCheckbox
+        :model-value="true"
+        label="Adresse vérifiée"
+        success="Choix valide."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          :model-value="true"
+          label="Option désactivée"
+          disabled
+        />
+        <MalioCheckbox
+          :model-value="true"
+          label="Option readonly"
+          readonly
+        />
+      </div>
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          label="Option 1"
+        />
+        <MalioCheckbox
+          label="Option 2"
+        />
+        <MalioCheckbox
+          label="Option 3"
+        />
+    </div>
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          v-for="option in options"
+          :key="option"
+          :label="option"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioCheckbox from '../../../../app/components/malio/checkbox/Checkbox.vue'
+const simpleValue = ref(false)
+const checkedValue = ref(true)
+const hintValue = ref(false)
+const options = [
+  'Option A',
+  'Option B',
+  'Option C',
+  'Option D',
+
+]
+</script>
diff --git a/.playground/pages/composant/drawer/drawer.vue b/.playground/pages/composant/drawer/drawer.vue
new file mode 100644
index 0000000..0c87902
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/inputAmount.vue b/.playground/pages/composant/input/inputAmount.vue
similarity index 100%
rename from .playground/pages/composant/inputAmount.vue
rename to .playground/pages/composant/input/inputAmount.vue
diff --git a/.playground/pages/composant/input/inputNumber.vue b/.playground/pages/composant/input/inputNumber.vue
new file mode 100644
index 0000000..7313ebf
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/input/inputPassword.vue b/.playground/pages/composant/input/inputPassword.vue
new file mode 100644
index 0000000..54a8dc0
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/input/inputText.vue
similarity index 100%
rename from .playground/pages/composant/inputText.vue
rename to .playground/pages/composant/input/inputText.vue
diff --git a/.playground/pages/composant/inputTextArea.vue b/.playground/pages/composant/input/inputTextArea.vue
similarity index 96%
rename from .playground/pages/composant/inputTextArea.vue
rename to .playground/pages/composant/input/inputTextArea.vue
index e093158..677937a 100644
--- a/.playground/pages/composant/inputTextArea.vue
+++ b/.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('')
diff --git a/.playground/pages/composant/input/inputUpload.vue b/.playground/pages/composant/input/inputUpload.vue
new file mode 100644
index 0000000..5aa3afe
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/radioButton.vue b/.playground/pages/composant/radio/radioButton.vue
similarity index 97%
rename from .playground/pages/composant/radioButton.vue
rename to .playground/pages/composant/radio/radioButton.vue
index 7e32afe..f231e82 100644
--- a/.playground/pages/composant/radioButton.vue
+++ b/.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'},
diff --git a/.playground/pages/composant/select.vue b/.playground/pages/composant/select/select.vue
similarity index 100%
rename from .playground/pages/composant/select.vue
rename to .playground/pages/composant/select/select.vue
diff --git a/.playground/pages/composant/select/selectCheckbox.vue b/.playground/pages/composant/select/selectCheckbox.vue
new file mode 100644
index 0000000..4764d96
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/sidebar/sidebar.vue b/.playground/pages/composant/sidebar/sidebar.vue
new file mode 100644
index 0000000..533306e
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/tab/tabList.vue b/.playground/pages/composant/tab/tabList.vue
new file mode 100644
index 0000000..f48d61f
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/composant/time/time.vue b/.playground/pages/composant/time/time.vue
new file mode 100644
index 0000000..cbc9b0b
--- /dev/null
+++ b/.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>
diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
index 17e7186..6b07306 100644
--- a/.playground/pages/index.vue
+++ b/.playground/pages/index.vue
@@ -9,17 +9,41 @@
         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)"
+      <nav class="mt-6 flex flex-col gap-1">
+        <div
+          v-for="group in groups"
+          :key="group.category"
         >
-          {{ item.label }}
-        </button>
+          <button
+            type="button"
+            class="flex w-full items-center justify-between rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary/10"
+            @click="toggleCategory(group.category)"
+          >
+            {{ group.category }}
+            <span
+              class="text-xs transition-transform duration-200"
+              :class="openCategories.has(group.category) ? 'rotate-90' : ''"
+            >
+              &#9654;
+            </span>
+          </button>
+
+          <div
+            v-if="openCategories.has(group.category)"
+            class="ml-3 flex flex-col gap-1 border-l border-gray-300 pl-2"
+          >
+            <button
+              v-for="item in group.items"
+              :key="item.name"
+              type="button"
+              class="rounded px-3 py-1.5 text-left text-sm text-black hover:bg-m-primary hover:text-white"
+              :class="selectedName === item.name ? 'bg-m-primary/50 text-white' : ''"
+              @click="selectItem(item.name)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
       </nav>
     </aside>
 
@@ -48,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, shallowRef } from 'vue'
+import {computed, reactive, ref, watch, shallowRef} from 'vue'
 
 type LoadedModule = {
   default: unknown
@@ -59,8 +83,13 @@ type Item = {
   label: string
 }
 
-const componentModules = import.meta.glob('../../app/components/malio/*.vue')
-const demoModules = import.meta.glob('./composant/*.vue')
+type Group = {
+  category: string
+  items: Item[]
+}
+
+const componentModules = import.meta.glob('../../app/components/malio/**/*.vue')
+const demoModules = import.meta.glob('./composant/**/*.vue')
 
 const demoByName: Record<string, () => Promise<LoadedModule>> =
   Object.fromEntries(
@@ -70,31 +99,55 @@ const demoByName: Record<string, () => Promise<LoadedModule>> =
     }),
   )
 
-const items = computed<Item[]>(() =>
-  Object.keys(componentModules).map((file) => {
-    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
-    return {
-      name,
-      label: name,
-    }
-  }),
-)
+const groups = computed<Group[]>(() => {
+  const categoryMap = new Map<string, Item[]>()
 
+  Object.keys(componentModules).forEach((file) => {
+    const parts = file.split('/')
+    const name = parts.pop()?.replace('.vue', '') ?? ''
+    const category = parts.pop() ?? ''
+
+    if (!categoryMap.has(category)) {
+      categoryMap.set(category, [])
+    }
+    categoryMap.get(category)!.push({name, label: name})
+  })
+
+  return Array.from(categoryMap.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([category, items]) => ({
+      category: category.charAt(0).toUpperCase() + category.slice(1),
+      items: items.sort((a, b) => a.label.localeCompare(b.label)),
+    }))
+})
+
+const openCategories = reactive(new Set<string>())
 const selectedName = ref('')
 const hasInitializedSelection = ref(false)
 
 watch(
-  items,
+  groups,
   (val) => {
     if (!hasInitializedSelection.value && val.length > 0) {
-      selectedName.value = val[0].name
+      openCategories.add(val[0].category)
+      if (val[0].items.length > 0) {
+        selectedName.value = val[0].items[0].name
+      }
       hasInitializedSelection.value = true
     }
   },
-  { immediate: true },
+  {immediate: true},
 )
 
-function selectOrToggle(name: string) {
+function toggleCategory(category: string) {
+  if (openCategories.has(category)) {
+    openCategories.delete(category)
+  } else {
+    openCategories.add(category)
+  }
+}
+
+function selectItem(name: string) {
   selectedName.value = selectedName.value === name ? '' : name
 }
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 546484e..223c25c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,10 +7,23 @@ 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
 
 ### Changed
 
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..6e659a9
--- /dev/null
+++ b/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)
diff --git a/COMPONENTS.md b/COMPONENTS.md
new file mode 100644
index 0000000..770d20a
--- /dev/null
+++ b/COMPONENTS.md
@@ -0,0 +1,386 @@
+# @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" />
+```
+
+---
+
+## 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 |
+
+**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" />
+```
+
+---
+
+## 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 |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `error` | `string` | `''` | Message d'erreur |
+
+**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..." />
+```
+
+---
+
+## 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é |
+
+**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` | `{ key: string, label: string, icon?: string }[]` | **requis** | Liste des onglets |
+
+**Events :** `update:modelValue(value: string)`
+**Slots :** Un slot nommé par `tab.key` pour le contenu de chaque onglet
+
+```vue
+<MalioTabList v-model="activeTab" :tabs="[{ key: 'infos', label: 'Informations' }, { key: 'docs', label: 'Documents', icon: 'mdi:file' }]">
+  <template #infos>Contenu infos</template>
+  <template #docs>Contenu docs</template>
+</MalioTabList>
+```
+
+---
+
+## 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>
+```
diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
index 0fa1352..6aa38c7 100644
--- a/app/assets/css/malio.css
+++ b/app/assets/css/malio.css
@@ -4,16 +4,37 @@
 
 @layer base {
   :root {
-    /* Couleurs en RGB “space separated” pour Tailwind */
-    --m-primary: 34 39 131;       /* Couleur principal*/
-    --m-secondary: 48 73 152;     /* Couleur secondaire */
-    --m-tertiary: 243 244 248;    /* Couleur tertiaire (background) */
-    --m-border: 203 213 225;      /* Couleur des bordures */
-    --m-text: 15 23 42;           /*  Couleur du texte */
-    --m-muted: 100 116 139;       /* Couleur pour les éléments désactivés ou secondaires */
-    --m-bg: 243 244 248;          /* Couleur de fond générale */
+    /* ── Globales ── */
+    --m-primary: 34 39 131;         /* #222783 - Bleu Malio */
+    --m-bg: 243 244 248;            /* #F3F4F8 - Fond de page */
+    --m-surface: 243 244 248;       /* #F3F4F8 - Fond hover/cartes */
+    --m-text: 15 23 42;             /* #0F172A */
+    --m-muted: 100 116 139;         /* #64748B */
+    --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 */
-    --m-success: 15 149 70;       /* vert pour les succès  */
+    /* ── Boutons Primary ── */
+    --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: 8px;
   }
 }
diff --git a/app/components/malio/button/Button.test.ts b/app/components/malio/button/Button.test.ts
new file mode 100644
index 0000000..2534828
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/app/components/malio/button/Button.vue b/app/components/malio/button/Button.vue
new file mode 100644
index 0000000..c6e3205
--- /dev/null
+++ b/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>
diff --git a/app/components/malio/button/ButtonIcon.test.ts b/app/components/malio/button/ButtonIcon.test.ts
new file mode 100644
index 0000000..ec5b85b
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/app/components/malio/button/ButtonIcon.vue b/app/components/malio/button/ButtonIcon.vue
new file mode 100644
index 0000000..9534324
--- /dev/null
+++ b/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>
diff --git a/app/components/malio/checkbox/Checkbox.test.ts b/app/components/malio/checkbox/Checkbox.test.ts
new file mode 100644
index 0000000..9915c01
--- /dev/null
+++ b/app/components/malio/checkbox/Checkbox.test.ts
@@ -0,0 +1,142 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Checkbox from './Checkbox.vue'
+
+type CheckboxProps = {
+  id?: string
+  label?: string
+  name?: string
+  modelValue?: boolean | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+}
+
+const CheckboxForTest = Checkbox as DefineComponent<CheckboxProps>
+
+const mountCheckbox = (props: CheckboxProps = {}) =>
+  mount(CheckboxForTest, {props})
+
+describe('MalioCheckbox', () => {
+  it('renders a checkbox input', () => {
+    const wrapper = mountCheckbox()
+
+    expect(wrapper.get('input').attributes('type')).toBe('checkbox')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountCheckbox({label: 'Accept terms'})
+
+    expect(wrapper.get('label').text()).toContain('Accept terms')
+  })
+
+  it('uses a provided id on input and label', () => {
+    const wrapper = mountCheckbox({
+      id: 'checkbox-id',
+      label: 'Accept terms',
+    })
+
+    expect(wrapper.get('input').attributes('id')).toBe('checkbox-id')
+    expect(wrapper.get('label').attributes('for')).toBe('checkbox-id')
+  })
+
+  it('generates an id when none is provided', () => {
+    const wrapper = mountCheckbox({label: 'Accept terms'})
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-checkbox-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('applies the name attribute', () => {
+    const wrapper = mountCheckbox({name: 'terms'})
+
+    expect(wrapper.get('input').attributes('name')).toBe('terms')
+  })
+
+  it('reflects the checked state from modelValue', () => {
+    const wrapper = mountCheckbox({modelValue: true})
+
+    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('emits update:modelValue when toggled', async () => {
+    const wrapper = mountCheckbox({modelValue: false})
+    const input = wrapper.get('input')
+
+    await input.setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+
+  it('does not emit when readonly', async () => {
+    const wrapper = mountCheckbox({
+      modelValue: true,
+      readonly: true,
+    })
+    const input = wrapper.get('input')
+
+    await input.setValue(false)
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect((input.element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('sets disabled and required attributes', () => {
+    const wrapper = mountCheckbox({
+      disabled: true,
+      required: true,
+    })
+
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input').attributes('required')).toBeDefined()
+  })
+
+  it('shows a hint message and links it with aria-describedby', () => {
+    const wrapper = mountCheckbox({hint: 'Required field'})
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(wrapper.get('p').text()).toBe('Required field')
+    expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
+  })
+
+  it('shows an error state and message', () => {
+    const wrapper = mountCheckbox({
+      label: 'Accept terms',
+      error: 'You must accept',
+    })
+
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p').text()).toBe('You must accept')
+  })
+
+  it('shows success only when there is no error', () => {
+    const wrapper = mountCheckbox({
+      success: 'Valid',
+      error: 'Invalid',
+    })
+
+    expect(wrapper.get('p').text()).toBe('Invalid')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
+  })
+
+  it('shows success styles and message when there is no error', () => {
+    const wrapper = mountCheckbox({
+      label: 'Accept terms',
+      success: 'Valid',
+      modelValue: true,
+    })
+
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('p').text()).toBe('Valid')
+    expect(wrapper.get('p').classes()).toContain('text-m-success')
+  })
+})
diff --git a/app/components/malio/checkbox/Checkbox.vue b/app/components/malio/checkbox/Checkbox.vue
new file mode 100644
index 0000000..f4a3a43
--- /dev/null
+++ b/app/components/malio/checkbox/Checkbox.vue
@@ -0,0 +1,227 @@
+<template>
+  <div :class="mergedGroupClass">
+    <input
+      :id="inputId"
+      :name="name"
+      :checked="isChecked"
+      :required="required"
+      :disabled="disabled"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      :class="mergedInputClass"
+      v-bind="attrs"
+      type="checkbox"
+      @change="onChange"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      <span>
+        <svg width="12" height="10" viewBox="0 0 12 10" aria-hidden="true">
+          <polyline points="1.5 6 4.5 9 10.5 1"/>
+        </svg>
+      </span>
+      <span>
+        {{ label }}
+      </span>
+    </label>
+
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="mergedMessageClass"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, useAttrs, useId} from 'vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: boolean | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+  }>(),
+  {
+    id: '',
+    label: '',
+    name: '',
+    modelValue: undefined,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
+const isChecked = computed(() => !!props.modelValue)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const disabled = computed(() => props.disabled)
+
+const describedBy = computed(() => {
+  if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
+  return `${inputId.value}-describedby`
+})
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'checkbox-wrapper-4 mt-4 w-full',
+    props.groupClass,
+  ),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    'inp-cbx peer',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'cbx text-black',
+    disabled.value ? 'cursor-not-allowed text-black/60' : '',
+    hasError.value ? 'text-m-danger' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    props.labelClass,
+  ),
+)
+
+const mergedMessageClass = computed(() =>
+  twMerge(
+    'text-xs',
+    hasError.value
+      ? 'text-m-danger'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'text-m-muted',
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const onChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+
+  if (props.readonly) {
+    target.checked = isChecked.value
+    return
+  }
+
+  emit('update:modelValue', target.checked)
+}
+</script>
+
+<style scoped>
+.cbx {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.cbx span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cbx span:first-child {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  transform: scale(1);
+  border: 2px solid rgb(0, 0, 0);
+  transition: all 0.1s ease;
+}
+
+.cbx span:first-child svg {
+  position: absolute;
+  top: 2px;
+  left: 1px;
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 16px;
+  stroke-dashoffset: 16px;
+  transition: all 0.125s ease;
+}
+
+.cbx span:last-child {
+  padding-left: 12px;
+  line-height: 18px;
+}
+
+.inp-cbx {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.inp-cbx:checked + .cbx span:first-child svg {
+  stroke-dashoffset: 0;
+}
+
+.inp-cbx + .cbx.text-m-danger span:first-child {
+  border-color: rgb(var(--m-danger) / 1);
+}
+.cbx.text-m-danger span:first-child svg {
+  stroke: rgb(var(--m-danger) / 1);
+}
+.inp-cbx:checked + .cbx.text-m-danger span:first-child {
+  border-color: rgb(var(--m-danger) / 1);
+}
+
+.inp-cbx + .cbx.text-m-success span:first-child {
+  border-color: rgb(var(--m-success) / 1);
+}
+.cbx.text-m-success span:first-child svg {
+  stroke: rgb(var(--m-success) / 1);
+}
+.inp-cbx:checked + .cbx.text-m-success span:first-child {
+  border-color: rgb(var(--m-success) / 1);
+}
+
+.inp-cbx:disabled + .cbx {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>
diff --git a/app/components/malio/drawer/Drawer.test.ts b/app/components/malio/drawer/Drawer.test.ts
new file mode 100644
index 0000000..8fd6ff3
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/app/components/malio/drawer/Drawer.vue b/app/components/malio/drawer/Drawer.vue
new file mode 100644
index 0000000..41eec7d
--- /dev/null
+++ b/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>
diff --git a/app/components/malio/Input.test.ts b/app/components/malio/input/Input.test.ts
similarity index 88%
rename from app/components/malio/Input.test.ts
rename to app/components/malio/input/Input.test.ts
index 317dcf5..8accb92 100644
--- a/app/components/malio/Input.test.ts
+++ b/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('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
+    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('input').classes()).toContain('border-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    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('input').classes()).toContain('border-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
+    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('input').classes()).toContain('border-m-error')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
+    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.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.find('p.text-m-danger').exists()).toBe(true)
+    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,7 +277,7 @@ 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')
   })
diff --git a/app/components/malio/InputAmount.test.ts b/app/components/malio/input/InputAmount.test.ts
similarity index 97%
rename from app/components/malio/InputAmount.test.ts
rename to app/components/malio/input/InputAmount.test.ts
index 222ce8a..6a57f54 100644
--- a/app/components/malio/InputAmount.test.ts
+++ b/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,7 +156,7 @@ 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')
   })
diff --git a/app/components/malio/InputAmount.vue b/app/components/malio/input/InputAmount.vue
similarity index 96%
rename from app/components/malio/InputAmount.vue
rename to app/components/malio/input/InputAmount.vue
index ed3a4d7..4012ea0 100644
--- a/app/components/malio/InputAmount.vue
+++ b/app/components/malio/input/InputAmount.vue
@@ -40,7 +40,7 @@
       data-test="icon"
       :class="[
       hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
         : hasSuccess
           ? 'text-m-success' : iconColor,
       iconPositionClass,
@@ -53,7 +53,7 @@
     :id="`${inputId}-describedby`"
     :class="[
         hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
@@ -143,7 +143,7 @@ const mergedInputClass = computed(() =>
     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 +159,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',
@@ -230,7 +230,7 @@ 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`
 })
 </script>
diff --git a/app/components/malio/input/InputNumber.test.ts b/app/components/malio/input/InputNumber.test.ts
new file mode 100644
index 0000000..7b0ccac
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/app/components/malio/input/InputNumber.vue b/app/components/malio/input/InputNumber.vue
new file mode 100644
index 0000000..0146d72
--- /dev/null
+++ b/app/components/malio/input/InputNumber.vue
@@ -0,0 +1,303 @@
+<template>
+  <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>
+</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 mt-4 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>
diff --git a/app/components/malio/input/InputPassword.test.ts b/app/components/malio/input/InputPassword.test.ts
new file mode 100644
index 0000000..48eed58
--- /dev/null
+++ b/app/components/malio/input/InputPassword.test.ts
@@ -0,0 +1,174 @@
+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')
+  })
+})
diff --git a/app/components/malio/input/InputPassword.vue b/app/components/malio/input/InputPassword.vue
new file mode 100644
index 0000000..1f90287
--- /dev/null
+++ b/app/components/malio/input/InputPassword.vue
@@ -0,0 +1,209 @@
+<template>
+  <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="[
+      hasError
+        ? 'text-m-danger'
+        : hasSuccess
+          ? 'text-m-success' : 'text-m-muted',
+      'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
+    ]"
+      @click="toggleVisibility"
+    />
+
+  </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>
+</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 mt-4 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',
+    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)
+</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>
diff --git a/app/components/malio/InputText.vue b/app/components/malio/input/InputText.vue
similarity index 96%
rename from app/components/malio/InputText.vue
rename to app/components/malio/input/InputText.vue
index d1dc77d..b514638 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/input/InputText.vue
@@ -40,7 +40,7 @@
       data-test="icon"
       :class="[
       hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
         : hasSuccess
           ? 'text-m-success' : iconColor,
       iconPositionClass,
@@ -53,7 +53,7 @@
     :id="`${inputId}-describedby`"
     :class="[
         hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
@@ -148,7 +148,7 @@ const mergedInputClass = computed(() =>
     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 +164,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',
@@ -210,7 +210,7 @@ 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`
 })
 </script>
diff --git a/app/components/malio/InputTextArea.test.ts b/app/components/malio/input/InputTextArea.test.ts
similarity index 95%
rename from app/components/malio/InputTextArea.test.ts
rename to app/components/malio/input/InputTextArea.test.ts
index 5398e6c..e5819fd 100644
--- a/app/components/malio/InputTextArea.test.ts
+++ b/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('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    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')
   })
 })
diff --git a/app/components/malio/InputTextArea.vue b/app/components/malio/input/InputTextArea.vue
similarity index 97%
rename from app/components/malio/InputTextArea.vue
rename to app/components/malio/input/InputTextArea.vue
index c3294f5..d8900b6 100644
--- a/app/components/malio/InputTextArea.vue
+++ b/app/components/malio/input/InputTextArea.vue
@@ -12,7 +12,7 @@
       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 focus:pl-[11px]'
         : hasSuccess
           ? 'border-m-success focus:border-m-success focus:pl-[11px]'
           : 'focus:border-m-primary focus:pl-[11px]',
@@ -43,7 +43,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 +67,7 @@
       :id="`${inputId}-describedby`"
       :class="[
         hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
diff --git a/app/components/malio/input/InputUpload.test.ts b/app/components/malio/input/InputUpload.test.ts
new file mode 100644
index 0000000..fbd7c27
--- /dev/null
+++ b/app/components/malio/input/InputUpload.test.ts
@@ -0,0 +1,175 @@
+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')
+  })
+})
diff --git a/app/components/malio/input/InputUpload.vue b/app/components/malio/input/InputUpload.vue
new file mode 100644
index 0000000..d46b25e
--- /dev/null
+++ b/app/components/malio/input/InputUpload.vue
@@ -0,0 +1,209 @@
+<template>
+  <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="[
+      hasError
+        ? 'text-m-danger'
+        : hasSuccess
+          ? 'text-m-success' : 'text-m-muted',
+      '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>
+</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 mt-4 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',
+    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)
+</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>
diff --git a/app/components/malio/RadioButton.test.ts b/app/components/malio/radio/RadioButton.test.ts
similarity index 99%
rename from app/components/malio/RadioButton.test.ts
rename to app/components/malio/radio/RadioButton.test.ts
index 5a10947..acb93d1 100644
--- a/app/components/malio/RadioButton.test.ts
+++ b/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-message').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-text').classes()).toContain('text-m-danger')
+    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', () => {
diff --git a/app/components/malio/RadioButton.vue b/app/components/malio/radio/RadioButton.vue
similarity index 96%
rename from app/components/malio/RadioButton.vue
rename to app/components/malio/radio/RadioButton.vue
index 06fac78..d2c457d 100644
--- a/app/components/malio/RadioButton.vue
+++ b/app/components/malio/radio/RadioButton.vue
@@ -125,7 +125,7 @@ const mergedInputClass = computed(() =>
 const mergedLabelClass = computed(() =>
   twMerge(
     'radio-text mt-px cursor-pointer text-black',
-    hasError.value ? 'text-m-error' : '',
+    hasError.value ? 'text-m-danger' : '',
     hasSuccess.value ? 'text-m-success' : '',
     disabled.value ? 'cursor-not-allowed text-black/60' : '',
     props.labelClass,
@@ -136,7 +136,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',
@@ -170,11 +170,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'] {
diff --git a/app/components/malio/Select.test.ts b/app/components/malio/select/Select.test.ts
similarity index 95%
rename from app/components/malio/Select.test.ts
rename to app/components/malio/select/Select.test.ts
index b629c15..67deae8 100644
--- a/app/components/malio/Select.test.ts
+++ b/app/components/malio/select/Select.test.ts
@@ -139,9 +139,9 @@ describe('MalioSelect', () => {
       },
     })
 
-    expect(wrapper.get('button').classes()).toContain('border-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('button').classes()).toContain('border-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
     expect(wrapper.get('button').attributes('aria-invalid')).toBe('true')
   })
 
@@ -170,8 +170,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')
   })
 })
diff --git a/app/components/malio/Select.vue b/app/components/malio/select/Select.vue
similarity index 94%
rename from app/components/malio/Select.vue
rename to app/components/malio/select/Select.vue
index 67a5215..6e604d9 100644
--- a/app/components/malio/Select.vue
+++ b/app/components/malio/select/Select.vue
@@ -1,8 +1,7 @@
 <template>
   <div
     ref="root"
-    class="relative mt-4 w-full"
-    :class="[minWidth, maxWidth]"
+    :class="mergedGroupClass"
   >
     <button
       :id="buttonId"
@@ -12,9 +11,9 @@
           hasError
             ? isOpen
               ? openDirection === 'down'
-                ? 'rounded-b-none !border-2 !border-m-error !border-b-0'
-                : 'rounded-t-none !border-2 !border-m-error !border-t-0'
-              : 'border-m-error'
+                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
+                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
+              : 'border-m-danger'
             : hasSuccess
               ? isOpen
                 ? openDirection === 'down'
@@ -46,7 +45,7 @@
         :class="[
           isOpen ? 'top-2  z-30' : 'top-2',
           hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
               : isOpen
@@ -75,7 +74,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'
@@ -109,7 +108,7 @@
             ? 'select-scrollbar-success'
             : 'select-scrollbar-primary',
         hasError
-          ? 'border-m-error'
+          ? 'border-m-danger'
           : hasSuccess
             ? 'border-m-success'
             : 'border-m-primary'
@@ -140,7 +139,7 @@
     :id="`${buttonId}-describedby`"
     :class="[
       hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
         : hasSuccess
           ? 'text-m-success'
           : 'text-m-muted',
@@ -154,6 +153,7 @@
 <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})
 
@@ -176,6 +176,7 @@ const props = withDefaults(defineProps<{
   textLabel?: string
   rounded?: string
   disabled?: boolean
+  groupClass?: string
 }>(), {
   options: () => [],
   emptyOptionLabel: '',
@@ -190,6 +191,7 @@ const props = withDefaults(defineProps<{
   textLabel: 'text-sm',
   rounded: 'rounded-md',
   disabled: false,
+  groupClass: '',
 })
 
 const emit = defineEmits<{
@@ -208,6 +210,9 @@ const normalizedOptions = computed<Option[]>(() => [
   {label: props.emptyOptionLabel, value: null},
   ...props.options,
 ])
+const mergedGroupClass = computed(() =>
+  twMerge('relative mt-4 w-full', props.minWidth, props.maxWidth, props.groupClass),
+)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isOptionSelected = computed(() =>
@@ -315,7 +320,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
 
 :deep(ul[role="listbox"]) {
   scrollbar-width: auto;
-  scrollbar-gutter: stable;
 }
 
 :deep(.select-scrollbar-primary) {
diff --git a/app/components/malio/select/SelectCheckbox.test.ts b/app/components/malio/select/SelectCheckbox.test.ts
new file mode 100644
index 0000000..8b87322
--- /dev/null
+++ b/app/components/malio/select/SelectCheckbox.test.ts
@@ -0,0 +1,178 @@
+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
+  minWidth?: string
+  maxWidth?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  displayTag?: boolean
+  displaySelectAll?: boolean
+  selectAllLabel?: string
+  disabled?: boolean
+}
+
+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)
+  })
+})
diff --git a/app/components/malio/select/SelectCheckbox.vue b/app/components/malio/select/SelectCheckbox.vue
new file mode 100644
index 0000000..2f8547d
--- /dev/null
+++ b/app/components/malio/select/SelectCheckbox.vue
@@ -0,0 +1,410 @@
+<template>
+  <div
+    ref="root"
+    class="relative mt-4 w-full"
+    :class="[minWidth, maxWidth]"
+  >
+    <button
+      :id="buttonId"
+      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="[
+          hasError
+            ? isOpen
+              ? openDirection === 'down'
+                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
+                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
+              : 'border-m-danger'
+            : hasSuccess
+              ? isOpen
+                ? openDirection === 'down'
+                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
+                  : 'rounded-t-none !border-2 !border-m-success !border-t-0'
+                : 'border-m-success'
+              : isOpen
+                ? openDirection === 'down'
+                  ? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
+                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
+            : 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="[
+          shouldFloatLabel ? 'top-2 z-30' : 'top-1/2 -translate-y-1/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-2 bg-white"
+      :class="[
+        openDirection === 'down'
+          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
+          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+        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="displaySelectAll"
+        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>
+</template>
+
+<script setup lang="ts">
+import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+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
+  minWidth?: string
+  maxWidth?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  displayTag?: boolean
+  displaySelectAll?: boolean
+  selectAllLabel?: string
+  disabled?: boolean
+}>(), {
+  options: () => [],
+  emptyOptionLabel: '',
+  label: '',
+  hint: '',
+  error: '',
+  success: '',
+  minWidth: 'w-96',
+  maxWidth: '',
+  textField: 'text-lg',
+  textValue: 'text-lg',
+  textLabel: 'text-sm',
+  rounded: 'rounded-md',
+  displayTag: false,
+  displaySelectAll: false,
+  selectAllLabel: 'Tout sélectionner',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Array<string | number>): void
+}>()
+const root = ref<HTMLElement | 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 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 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(() => {
+  if (!shouldFloatLabel.value) {
+    return undefined
+  }
+
+  if (!isOpen.value || openDirection.value === 'down') {
+    return {
+      transform: 'translateY(-1.15rem) scale(0.9)',
+    }
+  }
+
+  const extraOffset = 8 // marge visuelle au-dessus de la liste en px
+  const total = 4 + listHeight.value + extraOffset
+
+  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()
+}
+
+const allSelected = computed(() =>
+  normalizedOptions.value.length > 0
+  && normalizedOptions.value.every(opt => props.modelValue.includes(opt.value)),
+)
+
+function toggleAll() {
+  if (allSelected.value) {
+    emit('update:modelValue', [])
+  } else {
+    emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
+  }
+}
+
+function isChecked(value: string | number) {
+  return props.modelValue.includes(value)
+}
+
+function toggleOption(value: string | number) {
+  if (isChecked(value)) {
+    emit('update:modelValue', props.modelValue.filter(item => item !== value))
+    return
+  }
+
+  emit('update:modelValue', [...props.modelValue, value])
+}
+
+function onClickOutside(e: MouseEvent) {
+  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;
+}
+
+: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>
diff --git a/app/components/malio/sidebar/Sidebar.test.ts b/app/components/malio/sidebar/Sidebar.test.ts
new file mode 100644
index 0000000..ba0a3ab
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/app/components/malio/sidebar/Sidebar.vue b/app/components/malio/sidebar/Sidebar.vue
new file mode 100644
index 0000000..99a39ba
--- /dev/null
+++ b/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>
diff --git a/app/components/malio/tab/TabList.test.ts b/app/components/malio/tab/TabList.test.ts
new file mode 100644
index 0000000..cbefe27
--- /dev/null
+++ b/app/components/malio/tab/TabList.test.ts
@@ -0,0 +1,137 @@
+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
+}
+
+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')
+  })
+})
diff --git a/app/components/malio/tab/TabList.vue b/app/components/malio/tab/TabList.vue
new file mode 100644
index 0000000..3ae39db
--- /dev/null
+++ b/app/components/malio/tab/TabList.vue
@@ -0,0 +1,87 @@
+<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}`"
+        :tabindex="activeTab === tab.key ? 0 : -1"
+        :class="[
+          'flex items-center gap-[18px] text-[24px] font-medium transition-colors cursor-pointer',
+          activeTab === tab.key
+            ? 'border-b-2 border-m-primary text-m-primary font-bold outline-b'
+            : 'border-transparent text-m-primary/50 hover:text-m-primary/70',
+        ]"
+        @click="selectTab(tab.key)"
+      >
+        <IconifyIcon
+          v-if="tab.icon"
+          :icon="tab.icon"
+          :width="20"
+        />
+        {{ 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
+}
+
+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) {
+  if (!isControlled.value) {
+    localValue.value = key
+  }
+  emit('update:modelValue', key)
+}
+</script>
diff --git a/app/components/malio/time/Time.test.ts b/app/components/malio/time/Time.test.ts
new file mode 100644
index 0000000..277f20b
--- /dev/null
+++ b/app/components/malio/time/Time.test.ts
@@ -0,0 +1,79 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Time from './Time.vue'
+
+type TimeProps = {
+  id?: string
+  label?: string
+  name?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+}
+
+const TimeForTest = Time as DefineComponent<TimeProps>
+
+const mountTime = (props: TimeProps = {}) =>
+  mount(TimeForTest, {props})
+
+describe('MalioTime', () => {
+  it('renders two text inputs and a separator', () => {
+    const wrapper = mountTime()
+
+    expect(wrapper.findAll('input')).toHaveLength(2)
+    expect(wrapper.text()).toContain(':')
+  })
+
+  it('uses separate ids for hours and minutes inputs', () => {
+    const wrapper = mountTime({label: 'Horaire'})
+    const inputs = wrapper.findAll('input')
+
+    expect(inputs[0].attributes('id')).toContain('-hours')
+    expect(inputs[1].attributes('id')).toContain('-minutes')
+    expect(wrapper.get('label').attributes('for')).toBe(inputs[0].attributes('id'))
+  })
+
+  it('clamps values to 24 hours and 59 minutes', async () => {
+    const wrapper = mountTime({modelValue: ''})
+    const inputs = wrapper.findAll('input')
+
+    await inputs[0].setValue('99')
+    await inputs[1].setValue('88')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['23:59'])
+    expect((inputs[0].element as HTMLInputElement).value).toBe('23')
+    expect((inputs[1].element as HTMLInputElement).value).toBe('59')
+  })
+
+  it('pads single digits on blur', async () => {
+    const wrapper = mountTime({modelValue: ''})
+    const inputs = wrapper.findAll('input')
+
+    await inputs[0].setValue('7')
+    await inputs[0].trigger('blur')
+    await inputs[1].setValue('5')
+    await inputs[1].trigger('blur')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['07:05'])
+    expect((inputs[0].element as HTMLInputElement).value).toBe('07')
+    expect((inputs[1].element as HTMLInputElement).value).toBe('05')
+  })
+
+  it('applies the primary border to the focused field', async () => {
+    const wrapper = mountTime()
+    const inputs = wrapper.findAll('input')
+
+    await inputs[0].trigger('focus')
+
+    expect(inputs[0].classes()).toContain('border-m-primary')
+    expect(inputs[1].classes()).not.toContain('border-m-primary')
+  })
+})
diff --git a/app/components/malio/time/Time.vue b/app/components/malio/time/Time.vue
new file mode 100644
index 0000000..61060e9
--- /dev/null
+++ b/app/components/malio/time/Time.vue
@@ -0,0 +1,264 @@
+<template>
+  <div>
+    <div :class="mergedGroupClass">
+      <label
+        v-if="label"
+        :for="hoursInputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+
+      <div class="flex items-center gap-2">
+        <input
+          :id="hoursInputId"
+          :name="hoursName"
+          autocomplete="off"
+          :class="mergedInputClass('hours')"
+          :required="required"
+          :disabled="disabled"
+          :readonly="readonly"
+          :aria-invalid="!!error"
+          :aria-describedby="describedBy"
+          :value="hoursValue"
+          v-bind="attrs"
+          type="text"
+          inputmode="numeric"
+          placeholder="00"
+          maxlength="2"
+          @input="onHoursInput"
+          @focus="activeField = 'hours'"
+          @blur="onHoursBlur"
+        >
+
+        <span class="text-[18px] text-black">:</span>
+
+        <input
+          ref="minutesInputRef"
+          :id="minutesInputId"
+          :name="minutesName"
+          autocomplete="off"
+          :class="mergedInputClass('minutes')"
+          :required="required"
+          :disabled="disabled"
+          :readonly="readonly"
+          :aria-invalid="!!error"
+          :aria-describedby="describedBy"
+          :value="minutesValue"
+          v-bind="attrs"
+          type="text"
+          inputmode="numeric"
+          placeholder="00"
+          maxlength="2"
+          @input="onMinutesInput"
+          @focus="activeField = 'minutes'"
+          @blur="onMinutesBlur"
+        >
+      </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, nextTick, ref, useAttrs, useId, watch} from 'vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioTime', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const hoursValue = ref('')
+const minutesValue = ref('')
+const activeField = ref<'hours' | 'minutes' | null>(null)
+const minutesInputRef = ref<HTMLInputElement | null>(null)
+
+const inputId = computed(() => props.id?.toString() || `malio-time-${generatedId}`)
+const hoursInputId = computed(() => `${inputId.value}-hours`)
+const minutesInputId = computed(() => `${inputId.value}-minutes`)
+const hoursName = computed(() => (props.name ? `${props.name}-hours` : ''))
+const minutesName = computed(() => (props.name ? `${props.name}-minutes` : ''))
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const padSegment = (value: string) => (value === '' ? '' : value.padStart(2, '0'))
+
+const sanitizeDigits = (value: string) =>
+  value.replace(/\D/g, '').slice(0, 2)
+
+const normalizeHours = (value: string) => {
+  const digits = sanitizeDigits(value)
+  if (digits === '') return ''
+  if (Number.parseInt(digits, 10) > 23) return '23'
+  return digits
+}
+
+const normalizeMinutes = (value: string) => {
+  const digits = sanitizeDigits(value)
+  if (digits === '') return ''
+  if (Number.parseInt(digits, 10) > 59) return '59'
+  return digits
+}
+
+const parseTimeValue = (value: string | null | undefined) => {
+  if (!value) return {hours: '', minutes: ''}
+
+  const [rawHours = '', rawMinutes = ''] = value.split(':')
+
+  return {
+    hours: normalizeHours(rawHours),
+    minutes: normalizeMinutes(rawMinutes),
+  }
+}
+
+const syncFromModelValue = (value: string | null | undefined) => {
+  if (activeField.value) return
+  const parsedValue = parseTimeValue(value)
+  hoursValue.value = parsedValue.hours
+  minutesValue.value = parsedValue.minutes
+}
+
+watch(() => props.modelValue, syncFromModelValue, {immediate: true})
+
+const describedBy = computed(() =>
+  (props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
+)
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex w-full items-center',
+    props.groupClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'mt-px mr-4 cursor-pointer text-black text-[18px]',
+    hasError.value ? 'text-m-danger' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    props.disabled ? 'cursor-not-allowed text-black/60' : '',
+    props.labelClass
+  ),
+)
+
+const mergedInputClass = (field: 'hours' | 'minutes') =>
+  twMerge(
+    'h-[30px] w-10 border bg-white text-center text-[18px] outline-none rounded-md placeholder:text-m-muted',
+    props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
+    hasError.value
+      ? 'focus:border-2 border-m-danger focus:border-m-danger'
+      : hasSuccess.value
+        ? 'focus:border-2 border-m-success focus:border-m-success'
+        : activeField.value === field
+          ? 'border-2 border-m-primary text-m-primary'
+          : 'border-black text-black',
+    props.inputClass,
+  )
+
+const emitCurrentValue = (pad = false) => {
+  if (!hoursValue.value && !minutesValue.value) {
+    emit('update:modelValue', '')
+    return
+  }
+
+  const h = pad ? padSegment(hoursValue.value || '0') : (hoursValue.value || '00')
+  const m = pad ? padSegment(minutesValue.value || '0') : (minutesValue.value || '00')
+
+  emit('update:modelValue', `${h}:${m}`)
+}
+
+const onHoursInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const normalizedValue = normalizeHours(target.value)
+
+  hoursValue.value = normalizedValue
+  target.value = normalizedValue
+  emitCurrentValue()
+
+  if (normalizedValue.length === 2) {
+    nextTick(() => minutesInputRef.value?.focus())
+  }
+}
+
+const onMinutesInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const normalizedValue = normalizeMinutes(target.value)
+
+  minutesValue.value = normalizedValue
+  target.value = normalizedValue
+  emitCurrentValue()
+}
+
+const formatFieldOnBlur = (field: 'hours' | 'minutes') => {
+  if (field === 'hours' && hoursValue.value) {
+    hoursValue.value = padSegment(hoursValue.value)
+  }
+
+  if (field === 'minutes' && minutesValue.value) {
+    minutesValue.value = padSegment(minutesValue.value)
+  }
+
+  emitCurrentValue(true)
+}
+
+const onHoursBlur = () => {
+  formatFieldOnBlur('hours')
+  activeField.value = null
+}
+
+const onMinutesBlur = () => {
+  formatFieldOnBlur('minutes')
+  activeField.value = null
+}
+</script>
diff --git a/app/story/button/button.story.vue b/app/story/button/button.story.vue
new file mode 100644
index 0000000..a1ecf04
--- /dev/null
+++ b/app/story/button/button.story.vue
@@ -0,0 +1,148 @@
+<template>
+  <Story title="Button/Button">
+    <Variant title="Primary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <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="Valider" />
+        <MalioButton label="Valider" icon-name="mdi:check" />
+        <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="Valider" button-class="bg-m-btn-primary-hover" />
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" icon-name="mdi:check" />
+        <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="Valider" button-class="bg-m-btn-primary-active" />
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" icon-name="mdi:check" />
+        <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="Valider" disabled />
+        <MalioButton label="Valider" disabled icon-name="mdi:check" />
+      </div>
+    </Variant>
+
+    <Variant title="Secondary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <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>
+    </Variant>
+
+    <Variant title="Tertiary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <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="Voir plus" variant="tertiary" />
+        <MalioButton label="Voir plus" variant="tertiary" icon-name="mdi:arrow-right" />
+        <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="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" icon-name="mdi:arrow-right" />
+        <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="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" icon-name="mdi:arrow-right" />
+        <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="Voir plus" variant="tertiary" disabled />
+        <MalioButton label="Voir plus" variant="tertiary" disabled icon-name="mdi:arrow-right" />
+      </div>
+    </Variant>
+
+    <Variant title="Danger">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <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="Supprimer" variant="danger" />
+        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" 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="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" />
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash-can-outline" 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="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" />
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash-can-outline" 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="Supprimer" variant="danger" disabled />
+        <MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash-can-outline" icon-position="left" />
+      </div>
+    </Variant>
+
+    <Variant title="Largeur personnalisée">
+      <div class="flex flex-col items-start gap-3 p-4">
+        <MalioButton label="Pleine largeur" button-class="w-full" />
+        <MalioButton label="Compact" button-class="w-auto px-6" />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioButton
+
+Bouton d'action avec 4 variantes visuelles et support d'icône optionnelle.
+
+## Props
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto-généré | Identifiant HTML du bouton |
+| `label` | `string` | `''` | Texte du bouton (peut aussi être fourni via le slot par défaut) |
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger'` | `'primary'` | Variante visuelle |
+| `disabled` | `boolean` | `false` | Désactive le bouton |
+| `buttonClass` | `string` | `''` | Classes CSS additionnelles (fusionnées via `twMerge`) |
+| `iconName` | `string` | `''` | Nom de l'icône Iconify (ex: `mdi:check`) |
+| `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône par rapport au texte |
+| `iconSize` | `string \| number` | `20` | Taille de l'icône en pixels |
+
+## Variantes
+
+- **Primary** : Fond `m-btn-primary`, texte blanc — action principale
+- **Secondary** : Fond `m-btn-secondary`, texte blanc — action secondaire
+- **Tertiary** : Bordure et texte `m-btn-primary`, fond transparent — action tertiaire
+- **Danger** : Fond `m-btn-danger`, texte blanc — action destructrice
+
+## États
+
+Chaque variante a 4 états visuels : Default, Hover, Active, Disabled.
+
+## Dimensions par défaut
+
+- Largeur : 240px (`w-[240px]`), personnalisable via `buttonClass`
+- Hauteur : 40px (`h-[40px]`)
+- Police : 16px bold, line-height 150%
+
+## Accessibilité
+
+- `type="button"` évite la soumission de formulaire involontaire
+- Support `disabled` natif
+- Focus visible avec `focus-visible:ring-2`
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `click` | `MouseEvent` | Émis au clic (pas émis si `disabled`) |
+</docs>
+
+<script setup lang="ts">
+import MalioButton from '../../components/malio/button/Button.vue'
+
+defineOptions({ name: 'ButtonStory' })
+</script>
diff --git a/app/story/button/buttonIcon.story.vue b/app/story/button/buttonIcon.story.vue
new file mode 100644
index 0000000..c840199
--- /dev/null
+++ b/app/story/button/buttonIcon.story.vue
@@ -0,0 +1,242 @@
+<template>
+  <Story title="Button/Icon">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <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"
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+          />
+          <MalioButtonIcon
+            icon="mdi:bell-outline"
+            aria-label="Notifications"
+          />
+        </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:cog-outline"
+            aria-label="Paramètres"
+          />
+          <MalioButtonIcon
+            icon="mdi:format-list-bulleted"
+            aria-label="Liste"
+          />
+          <MalioButtonIcon
+            icon="mdi:view-grid-outline"
+            aria-label="Grille"
+          />
+          <MalioButtonIcon
+            icon="mdi:folder-outline"
+            aria-label="Dossier"
+          />
+          <MalioButtonIcon
+            icon="mdi:delete-outline"
+            aria-label="Supprimer"
+          />
+        </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
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+            disabled
+          />
+        </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:close"
+            aria-label="Fermer"
+            variant="ghost"
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+            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">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>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioButtonIcon
+
+Bouton contenant uniquement une icône, sans texte. Utilisé pour des actions
+rapides et compactes (retour, modifier, supprimer, etc.).
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML du bouton.
+-   Comportement: Si non fourni, un id unique est généré automatiquement.
+
+### icon
+
+-   Type: string
+-   **Requis**
+-   Description: Nom de l'icône Iconify (ex: `mdi:arrow-left`).
+
+### ariaLabel
+
+-   Type: string
+-   **Requis**
+-   Description: Label d'accessibilité du bouton. Obligatoire car le bouton
+    n'a pas de texte visible.
+
+### iconSize
+
+-   Type: string | number
+-   Défaut: 24
+-   Description: Taille de l'icône en pixels.
+
+### buttonClass
+
+-   Type: string
+-   Description: Classes CSS additionnelles appliquées au bouton.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive le bouton.
+
+### variant
+
+-   Type: `'filled' | 'ghost'`
+-   Défaut: `filled`
+-   Description: Variante visuelle du bouton.
+-   `filled` : fond coloré, icône blanche.
+-   `ghost` : sans fond, icône colorée.
+
+------------------------------------------------------------------------
+
+## Comportement visuel
+
+### Variante `filled` (défaut)
+
+-   **Default** : fond `#222783`, icône blanche
+-   **Hover** : fond `#121CDB`
+-   **Active** : fond `#212567`
+-   **Disabled** : fond `#CCCCDF`
+
+### Variante `ghost`
+
+-   **Default** : icône `#222783`, sans fond
+-   **Hover** : icône `#121CDB`
+-   **Active** : icône `#212567`
+-   **Disabled** : icône `#CCCCDF`
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   `aria-label` est requis pour décrire l'action du bouton.
+-   `type="button"` pour éviter les soumissions de formulaire accidentelles.
+
+------------------------------------------------------------------------
+
+## Events
+
+### click
+
+-   Émis au clic sur le bouton.
+-   Non émis si le bouton est `disabled`.
+-   Retourne l'événement `MouseEvent` natif.
+
+</docs>
+
+<script setup lang="ts">
+import MalioButtonIcon from '../../components/malio/button/ButtonIcon.vue'
+</script>
diff --git a/app/story/checkbox/inputCheckbox.story.vue b/app/story/checkbox/inputCheckbox.story.vue
new file mode 100644
index 0000000..1e54560
--- /dev/null
+++ b/app/story/checkbox/inputCheckbox.story.vue
@@ -0,0 +1,178 @@
+<template>
+  <Story title="Input/Checkbox">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioCheckbox
+          v-model="simpleValue"
+          label="Accepter les conditions"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Coché</h2>
+        <MalioCheckbox
+          v-model="checkedValue"
+          label="Newsletter activée"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioCheckbox
+          v-model="hintValue"
+          label="Recevoir les notifications"
+          hint="Vous pouvez désactiver à tout moment"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioCheckbox
+          v-model="disabledValue"
+          label="Option verrouillée"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioCheckbox
+          v-model="readonlyValue"
+          label="Accepté par l'utilisateur"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioCheckbox
+          v-model="errorValue"
+          label="Accepter les conditions"
+          error="Vous devez accepter les conditions"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioCheckbox
+          v-model="successValue"
+          label="Conditions acceptées"
+          success="Merci"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioCheckbox
+
+Composant checkbox custom avec `v-model`, message d'aide, et états visuels
+`error` / `success`.
+
+------------------------------------------------------------------------
+
+## Props
+
+### id
+
+- Type: `string`
+- Description: Identifiant HTML du checkbox.
+- Comportement: si absent, un id unique est généré automatiquement.
+
+### label
+
+- Type: `string`
+- Description: Texte affiche a cote de la case.
+
+### name
+
+- Type: `string`
+- Description: Attribut `name` du champ.
+
+### modelValue
+
+- Type: `boolean | null | undefined`
+- Description: État coche du composant.
+
+### inputClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées a l'input natif.
+
+### labelClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées au label.
+
+### groupClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées au conteneur.
+
+### required
+
+- Type: `boolean`
+- Description: Ajoute l'attribut HTML `required`.
+
+### disabled
+
+- Type: `boolean`
+- Description: Désactive le composant.
+
+### readonly
+
+- Type: `boolean`
+- Description: Empêche la mise a jour du `v-model` tout en gardant
+  l'affichage courant.
+
+### hint
+
+- Type: `string`
+- Description: Message d'aide affiche sous le checkbox.
+
+### error
+
+- Type: `string`
+- Description: Message d'erreur.
+- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
+  d'erreur au texte et a la case.
+
+### success
+
+- Type: `string`
+- Description: Message de succès.
+- Effet: applique la couleur de succès au texte et a la case si `error`
+  est absent.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+- `aria-invalid` est active si `error` existe.
+- `aria-describedby` pointe vers le message affiche.
+- L'input natif reste present pour conserver le comportement formulaire.
+
+------------------------------------------------------------------------
+
+## Event
+
+### update:modelValue
+
+- Émis a chaque changement de l'état coche.
+- Retourne un booléen `true` ou `false`.
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioCheckbox from '../../components/malio/checkbox/Checkbox.vue'
+
+const simpleValue = ref(false)
+const checkedValue = ref(true)
+const hintValue = ref(false)
+const disabledValue = ref(true)
+const readonlyValue = ref(true)
+const errorValue = ref(false)
+const successValue = ref(true)
+</script>
diff --git a/app/story/drawer/drawer.story.vue b/app/story/drawer/drawer.story.vue
new file mode 100644
index 0000000..b7061ed
--- /dev/null
+++ b/app/story/drawer/drawer.story.vue
@@ -0,0 +1,123 @@
+<template>
+  <Story title="Overlay/Drawer">
+    <Variant title="Simple">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showSimple = true"
+        >
+          Ouvrir le drawer
+        </button>
+        <MalioDrawer v-model="showSimple" title="Détails">
+          <p>Contenu simple du drawer.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Avec formulaire">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showForm = true"
+        >
+          Ouvrir le formulaire
+        </button>
+        <MalioDrawer v-model="showForm" title="Nouveau contact">
+          <div class="flex flex-col gap-4">
+            <MalioInputText v-model="formNom" label="Nom" />
+            <MalioInputText v-model="formPrenom" label="Prénom" />
+            <MalioButton label="Enregistrer" button-class="w-full" @click="showForm = false" />
+          </div>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Sans bouton fermer">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showNoClose = true"
+        >
+          Ouvrir (sans croix)
+        </button>
+        <MalioDrawer v-model="showNoClose" title="Information" :show-close="false">
+          <p>Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Largeur personnalisée">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showWide = true"
+        >
+          Ouvrir (large)
+        </button>
+        <MalioDrawer v-model="showWide" title="Drawer large" drawer-class="max-w-2xl">
+          <p>Ce drawer utilise une largeur personnalisée via la prop drawerClass.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioDrawer
+
+Panneau latéral (drawer) qui s'ouvre depuis la droite avec un fond semi-transparent.
+
+## Props détaillées
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto-généré | Identifiant HTML du drawer |
+| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
+| `title` | `string` | `''` | Titre affiché dans le header |
+| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
+| `drawerClass` | `string` | `''` | Classes CSS additionnelles sur le panneau (fusionnées via `twMerge`) |
+
+## Comportement
+
+- Le drawer s'ouvre en glissant depuis la droite avec une transition
+- Un backdrop semi-transparent couvre le reste de la page
+- Clic sur le backdrop ferme le drawer
+- Bouton de fermeture (croix) en haut à droite, masquable via `showClose`
+- Contenu scrollable si plus haut que la fenêtre
+- Teleport vers `<body>` pour éviter les problèmes de z-index
+
+## Accessibilité
+
+- `role="dialog"` et `aria-modal="true"` sur le panneau
+- `aria-labelledby` lié au titre
+- Bouton fermer avec `aria-label="Fermer"`
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `boolean` | Émis à la fermeture (backdrop ou bouton) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Contenu du drawer |
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioDrawer from '../../components/malio/drawer/Drawer.vue'
+import MalioInputText from '../../components/malio/input/InputText.vue'
+import MalioButton from '../../components/malio/button/Button.vue'
+
+defineOptions({ name: 'DrawerStory' })
+
+const showSimple = ref(false)
+const showForm = ref(false)
+const showNoClose = ref(false)
+const showWide = ref(false)
+
+const formNom = ref('Dupont')
+const formPrenom = ref('Jean')
+</script>
diff --git a/app/story/inputAmount.story.vue b/app/story/input/inputAmount.story.vue
similarity index 70%
rename from app/story/inputAmount.story.vue
rename to app/story/input/inputAmount.story.vue
index 84939de..97defe3 100644
--- a/app/story/inputAmount.story.vue
+++ b/app/story/input/inputAmount.story.vue
@@ -1,8 +1,59 @@
 <template>
-  <Story
-    title="Input/Amount"
-  >
-      <MalioInputAmount/>
+  <Story title="Input/Amount">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputAmount
+          v-model="simpleValue"
+          label="Montant"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputAmount
+          v-model="hintValue"
+          label="Montant HT"
+          hint="Montant hors taxes en euros"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputAmount
+          v-model="disabledValue"
+          label="Montant"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputAmount
+          v-model="readonlyValue"
+          label="Montant"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputAmount
+          v-model="errorValue"
+          label="Montant"
+          error="Le montant doit être supérieur à 0"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputAmount
+          v-model="successValue"
+          label="Montant"
+          success="Montant valide"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -196,5 +247,13 @@ Composant input dédié à la saisie d’un montant décimal avec label flottant
 </docs>
 
 <script setup lang="ts">
-import MalioInputAmount from '../components/malio/InputAmount.vue'
+import {ref} from 'vue'
+import MalioInputAmount from '../../components/malio/input/InputAmount.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('1500.00')
+const readonlyValue = ref('2450.75')
+const errorValue = ref('0.00')
+const successValue = ref('350.50')
 </script>
diff --git a/app/story/input/inputNumber.story.vue b/app/story/input/inputNumber.story.vue
new file mode 100644
index 0000000..4a0cb3e
--- /dev/null
+++ b/app/story/input/inputNumber.story.vue
@@ -0,0 +1,83 @@
+<template>
+  <Story title="Input/Number">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <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>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputNumber from '../../components/malio/input/InputNumber.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>
diff --git a/app/story/input/inputPassword.story.vue b/app/story/input/inputPassword.story.vue
new file mode 100644
index 0000000..94524fb
--- /dev/null
+++ b/app/story/input/inputPassword.story.vue
@@ -0,0 +1,252 @@
+<template>
+  <Story title="Input/Password">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputPassword
+          v-model="simpleValue"
+          label="Mot de passe"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
+        <MalioInputPassword
+          v-model="noIconValue"
+          label="Mot de passe"
+          :display-icon="false"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputPassword
+          v-model="hintValue"
+          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">Désactivé</h2>
+        <MalioInputPassword
+          v-model="disabledValue"
+          label="Mot de passe"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputPassword
+          v-model="readonlyValue"
+          label="Mot de passe"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputPassword
+          v-model="errorValue"
+          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
+          v-model="successValue"
+          label="Mot de passe"
+          success="Mot de passe valide"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputPassword
+
+Composant input mot de passe avec label flottant, toggle de visibilité
+(icône oeil), états visuels (erreur / succès) et accessibilité.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML de l'input.
+-   Comportement: Si non fourni, un id unique est généré
+automatiquement.
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+-   Comportement: Si absent, aucun label n'est rendu.
+
+### name
+
+-   Type: string
+-   Description: Attribut name de l'input (utile pour les formulaires).
+
+### autocomplete
+
+-   Type: string
+-   Description: Active ou configure l'autocomplétion navigateur.
+-   Défaut: off
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Valeur contrôlée du composant.
+-   Comportement:
+-   Si défini → composant contrôlé (v-model).
+-   Sinon → gestion interne de l'état.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### inputClass
+
+-   Type: string
+-   Description: Classes CSS appliquées à l'input.
+
+### labelClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+
+### groupClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au conteneur.
+
+------------------------------------------------------------------------
+
+## Validation & Contraintes
+
+### required
+
+-   Type: boolean
+-   Description: Ajoute l'attribut HTML required.
+
+### maxLength
+
+-   Type: number | string
+-   Description: Longueur maximale autorisée.
+
+### minLength
+
+-   Type: number | string
+-   Description: Longueur minimale autorisée.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le champ.
+
+### readonly
+
+-   Type: boolean
+-   Description: Rend le champ non modifiable mais focusable.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d'aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d'erreur.
+-   Effet:
+-   Active l'état visuel erreur.
+-   aria-invalid=true
+-   Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès.
+-   Effet:
+-   Actif uniquement si error est absent.
+
+------------------------------------------------------------------------
+
+## Icône de visibilité
+
+### displayIcon
+
+-   Type: boolean
+-   Défaut: true
+-   Description: Affiche ou masque l'icône toggle de visibilité.
+-   Comportement:
+-   `true` : affiche une icône oeil cliquable à droite de l'input.
+-   `false` : pas d'icône, le type reste `password`.
+
+### Icônes utilisées
+
+-   `mdi:eye-off-outline` : mot de passe masqué (état par défaut).
+-   `mdi:eye-outline` : mot de passe visible (après clic).
+
+### Couleur de l'icône
+
+-   `text-m-muted` par défaut.
+-   `text-m-danger` si la prop `error` est renseignée.
+-   `text-m-success` si la prop `success` est renseignée.
+
+------------------------------------------------------------------------
+
+## Comportement
+
+-   Au clic sur l'icône, le type de l'input alterne entre `password` et `text`.
+-   Aucune validation interne.
+-   Les états sont pilotés uniquement par les props.
+
+## Priorité visuelle
+
+1.  error
+2.  success
+3.  neutre
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   aria-invalid est activé si error existe.
+-   aria-describedby référence dynamiquement le message affiché.
+-   Fonctionne avec ou sans v-model.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque modification de l'input.
+-   Permet l'utilisation avec v-model.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputPassword from '../../components/malio/input/InputPassword.vue'
+
+const simpleValue = ref('')
+const noIconValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('motdepasse123')
+const readonlyValue = ref('lectureseule')
+const errorValue = ref('abc')
+const successValue = ref('Str0ngP@ss!')
+</script>
diff --git a/app/story/inputText.story.vue b/app/story/input/inputText.story.vue
similarity index 62%
rename from app/story/inputText.story.vue
rename to app/story/input/inputText.story.vue
index e6db366..63492e8 100644
--- a/app/story/inputText.story.vue
+++ b/app/story/input/inputText.story.vue
@@ -1,8 +1,77 @@
 <template>
-  <Story
-    title="Input/Text"
-  >
-      <MalioInputText/>
+  <Story title="Input/Text">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputText
+          v-model="simpleValue"
+          label="Nom"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputText
+          v-model="hintValue"
+          label="Email"
+          hint="Votre adresse email professionnelle"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputText
+          v-model="disabledValue"
+          label="Nom"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputText
+          v-model="readonlyValue"
+          label="Nom"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputText
+          v-model="errorValue"
+          label="Email"
+          error="Adresse email invalide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputText
+          v-model="successValue"
+          label="Email"
+          success="Email valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec masque (téléphone)</h2>
+        <MalioInputText
+          v-model="maskValue"
+          label="Téléphone"
+          mask="## ## ## ## ##"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
+        <MalioInputText
+          v-model="iconValue"
+          label="Recherche"
+          icon-name="mdi:magnify"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -196,5 +265,15 @@ largeur.
 </docs>
 
 <script setup lang="ts">
-import MalioInputText from '../components/malio/InputText.vue'
+import {ref} from 'vue'
+import MalioInputText from '../../components/malio/input/InputText.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('Jean Dupont')
+const readonlyValue = ref('Marie Martin')
+const errorValue = ref('jean@')
+const successValue = ref('jean@example.com')
+const maskValue = ref('06 12 34 56 78')
+const iconValue = ref('')
 </script>
diff --git a/app/story/inputTextArea.story.vue b/app/story/input/inputTextArea.story.vue
similarity index 63%
rename from app/story/inputTextArea.story.vue
rename to app/story/input/inputTextArea.story.vue
index ef903ed..bd37584 100644
--- a/app/story/inputTextArea.story.vue
+++ b/app/story/input/inputTextArea.story.vue
@@ -1,8 +1,69 @@
 <template>
-  <Story
-    title="Input/TextArea"
-  >
-      <MalioInputTextArea/>
+  <Story title="Input/TextArea">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputTextArea
+          v-model="simpleValue"
+          label="Description"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputTextArea
+          v-model="hintValue"
+          label="Commentaire"
+          hint="255 caractères maximum"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputTextArea
+          v-model="disabledValue"
+          label="Description"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputTextArea
+          v-model="readonlyValue"
+          label="Description"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputTextArea
+          v-model="errorValue"
+          label="Description"
+          error="Ce champ est obligatoire"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputTextArea
+          v-model="successValue"
+          label="Description"
+          success="Description valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec compteur</h2>
+        <MalioInputTextArea
+          v-model="counterValue"
+          label="Bio"
+          :max-length="100"
+          :show-counter="true"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -188,5 +249,14 @@ redimensionnement.
 </docs>
 
 <script setup lang="ts">
-import MalioInputTextArea from '../components/malio/InputTextArea.vue'
+import {ref} from 'vue'
+import MalioInputTextArea from '../../components/malio/input/InputTextArea.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('Texte non modifiable')
+const readonlyValue = ref('Texte en lecture seule')
+const errorValue = ref('')
+const successValue = ref('Description complète et détaillée du projet.')
+const counterValue = ref('Un texte de démonstration')
 </script>
diff --git a/app/story/input/inputUpload.story.vue b/app/story/input/inputUpload.story.vue
new file mode 100644
index 0000000..87439a5
--- /dev/null
+++ b/app/story/input/inputUpload.story.vue
@@ -0,0 +1,236 @@
+<template>
+  <Story title="Input/Upload">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputUpload
+          v-model="simpleValue"
+          label="Fichier"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
+        <MalioInputUpload
+          v-model="noIconValue"
+          label="Fichier"
+          :display-icon="false"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputUpload
+          v-model="hintValue"
+          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">Désactivé</h2>
+        <MalioInputUpload
+          v-model="disabledValue"
+          label="Fichier"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly (avec fichier)</h2>
+        <MalioInputUpload
+          v-model="readonlyValue"
+          label="Fichier"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputUpload
+          v-model="errorValue"
+          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
+          v-model="successValue"
+          label="Fichier"
+          success="Fichier valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
+        <MalioInputUpload
+          v-model="acceptValue"
+          label="Document PDF"
+          accept=".pdf"
+          hint="Seuls les fichiers PDF sont acceptés"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputUpload
+
+Composant input d'upload de fichier avec label flottant, icône cloud,
+affichage du nom du fichier sélectionné, états visuels (erreur / succès)
+et accessibilité.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML de l'input.
+-   Comportement: Si non fourni, un id unique est généré automatiquement.
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+-   Comportement: Si absent, aucun label n'est rendu.
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Nom du fichier sélectionné (valeur contrôlée).
+-   Comportement:
+-   Si défini → composant contrôlé (v-model).
+-   Sinon → gestion interne de l'état.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### inputClass
+
+-   Type: string
+-   Description: Classes CSS appliquées à l'input texte.
+
+### labelClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+
+### groupClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au conteneur.
+
+### displayIcon
+
+-   Type: boolean
+-   Défaut: true
+-   Description: Affiche ou masque l'icône d'upload.
+
+------------------------------------------------------------------------
+
+## Validation & Contraintes
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le champ.
+
+### accept
+
+-   Type: string
+-   Description: Types de fichiers acceptés (ex: `.pdf,.doc`).
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d'aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d'erreur.
+-   Effet:
+-   Active l'état visuel erreur.
+-   aria-invalid=true
+-   Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès.
+-   Effet:
+-   Actif uniquement si error est absent.
+
+------------------------------------------------------------------------
+
+## Icône
+
+-   `mdi:cloud-arrow-up-outline` : icône d'upload affichée à droite.
+
+### Couleur de l'icône
+
+-   `text-m-muted` par défaut.
+-   `text-m-danger` si la prop `error` est renseignée.
+-   `text-m-success` si la prop `success` est renseignée.
+
+------------------------------------------------------------------------
+
+## Comportement
+
+-   Au clic sur l'input texte, le sélecteur de fichier natif s'ouvre.
+-   Le nom du fichier sélectionné est affiché dans l'input.
+-   L'input texte est en readonly — la saisie manuelle n'est pas autorisée.
+
+## Priorité visuelle
+
+1.  error
+2.  success
+3.  neutre
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   aria-invalid est activé si error existe.
+-   aria-describedby référence dynamiquement le message affiché.
+-   Fonctionne avec ou sans v-model.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis quand un fichier est sélectionné (valeur = nom du fichier).
+-   Permet l'utilisation avec v-model.
+
+### file-selected
+
+-   Émis quand un fichier est sélectionné (valeur = objet File).
+-   Permet d'accéder au fichier pour l'upload.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputUpload from '../../components/malio/input/InputUpload.vue'
+
+const simpleValue = ref('')
+const noIconValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('document.pdf')
+const readonlyValue = ref('rapport.pdf')
+const errorValue = ref('image.bmp')
+const successValue = ref('rapport.pdf')
+const acceptValue = ref('')
+</script>
diff --git a/app/story/RadioButton.story.vue b/app/story/radio/RadioButton.story.vue
similarity index 98%
rename from app/story/RadioButton.story.vue
rename to app/story/radio/RadioButton.story.vue
index a577296..a501dfd 100644
--- a/app/story/RadioButton.story.vue
+++ b/app/story/radio/RadioButton.story.vue
@@ -169,7 +169,7 @@ et les états visuels de validation.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioRadioButton from '../components/malio/RadioButton.vue'
+import MalioRadioButton from '../../components/malio/radio/RadioButton.vue'
 
 const options = [
   {label: 'Option 1', value: 'option1'},
diff --git a/app/story/InputSelect.story.vue b/app/story/select/InputSelect.story.vue
similarity index 61%
rename from app/story/InputSelect.story.vue
rename to app/story/select/InputSelect.story.vue
index 7939beb..1bc516e 100644
--- a/app/story/InputSelect.story.vue
+++ b/app/story/select/InputSelect.story.vue
@@ -1,11 +1,67 @@
 <template>
-  <Story
-    title="Select"
-  >
-      <MalioSelect
-        v-model="value"
-        :options="options"
-      />
+  <Story title="Select/Select">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioSelect
+          v-model="simpleValue"
+          :options="options"
+          label="Pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Valeur présélectionnée</h2>
+        <MalioSelect
+          v-model="preselectedValue"
+          :options="options"
+          label="Pays"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioSelect
+          v-model="disabledValue"
+          :options="options"
+          label="Pays"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioSelect
+          v-model="hintValue"
+          :options="options"
+          label="Pays"
+          hint="Sélectionnez votre pays de résidence"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioSelect
+          v-model="errorValue"
+          :options="options"
+          label="Pays"
+          error="Ce champ est obligatoire"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioSelect
+          v-model="successValue"
+          :options="options"
+          label="Pays"
+          success="Sélection validée"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -121,9 +177,15 @@ largeur.
 </docs>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import MalioSelect from '../components/malio/Select.vue'
-const value = ref<string | number | null>(null)
+import {ref} from 'vue'
+import MalioSelect from '../../components/malio/select/Select.vue'
+
+const simpleValue = ref<string | number | null>(null)
+const preselectedValue = ref<string | number | null>('fr')
+const disabledValue = ref<string | number | null>('be')
+const hintValue = ref<string | number | null>(null)
+const errorValue = ref<string | number | null>(null)
+const successValue = ref<string | number | null>('ch')
 const options = [
   { label: 'France', value: 'fr' },
   { label: 'Belgique', value: 'be' },
diff --git a/app/story/select/selectCheckbox.story.vue b/app/story/select/selectCheckbox.story.vue
new file mode 100644
index 0000000..87f7562
--- /dev/null
+++ b/app/story/select/selectCheckbox.story.vue
@@ -0,0 +1,213 @@
+<template>
+  <Story title="Select/Checkbox">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioSelectCheckbox
+          v-model="simpleValue"
+          :options="options"
+          label="Pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec tags</h2>
+        <MalioSelectCheckbox
+          v-model="tagValue"
+          :options="options"
+          label="Pays"
+          :display-tag="true"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioSelectCheckbox
+          v-model="hintValue"
+          :options="options"
+          label="Pays"
+          hint="Sélectionnez un ou plusieurs pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioSelectCheckbox
+          v-model="disabledValue"
+          :options="options"
+          label="Pays"
+          disabled
+        />
+      </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="Sélectionnez au moins un pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioSelectCheckbox
+          v-model="successValue"
+          :options="options"
+          label="Pays"
+          success="Sélection validée"
+        />
+      </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 sélection"
+        />
+      </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 sélection"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioSelectCheckbox
+
+Composant select avec checkboxes multiples, label flottant, tags optionnels,
+états visuels (erreur / succès) et option "tout sélectionner".
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### modelValue
+
+-   Type: Array<string | number>
+-   Description: Tableau des valeurs sélectionnées.
+
+### options
+
+-   Type: Array<{ label: string; value: string | number }>
+-   Description: Liste des options disponibles.
+
+### emptyOptionLabel
+
+-   Type: string
+-   Description: Texte affiché quand aucune option n'est sélectionnée (mode tag).
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### displayTag
+
+-   Type: boolean
+-   Défaut: false
+-   Description: Affiche les sélections sous forme de tags au lieu du compteur.
+
+### displaySelectAll
+
+-   Type: boolean
+-   Défaut: false
+-   Description: Affiche une checkbox "Tout sélectionner / Tout désélectionner" en haut de la liste.
+
+### selectAllLabel
+
+-   Type: string
+-   Défaut: "Tout sélectionner"
+-   Description: Label de la checkbox de sélection globale.
+
+### minWidth / maxWidth
+
+-   Type: string
+-   Description: Classes Tailwind pour contraindre la largeur.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d'aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d'erreur. Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès. Actif si error est absent.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le composant.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   `aria-expanded` et `aria-controls` sur le bouton.
+-   `role="listbox"` sur la liste, `role="option"` et `aria-selected` sur chaque option.
+-   `aria-invalid` activé si error existe.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque changement de sélection.
+-   Retourne un tableau de valeurs.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioSelectCheckbox from '../../components/malio/select/SelectCheckbox.vue'
+
+const options = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Allemagne', value: 'de'},
+]
+
+const simpleValue = ref<Array<string | number>>([])
+const tagValue = ref<Array<string | number>>(['fr', 'be'])
+const hintValue = ref<Array<string | number>>([])
+const disabledValue = ref<Array<string | number>>(['fr', 'ch'])
+const errorValue = ref<Array<string | number>>([])
+const successValue = ref<Array<string | number>>(['be', 'ca'])
+const selectAllValue = ref<Array<string | number>>([])
+const selectAllCustomValue = ref<Array<string | number>>([])
+</script>
diff --git a/app/story/sidebar/sidebarMenu.story.vue b/app/story/sidebar/sidebarMenu.story.vue
new file mode 100644
index 0000000..b27a7e0
--- /dev/null
+++ b/app/story/sidebar/sidebarMenu.story.vue
@@ -0,0 +1,227 @@
+<template>
+  <Story title="Navigation/Sidebar">
+    <Variant title="Peu de liens">
+      <div class="flex h-[600px] border rounded-lg overflow-hidden">
+        <MalioSidebar
+          v-model="collapsed1"
+          :sections="sectionsShort"
+        >
+          <template #logo>
+            <span class="text-2xl font-bold text-m-primary">Malio</span>
+          </template>
+          <template #logo-collapsed>
+            <span class="text-2xl font-bold text-m-primary">M</span>
+          </template>
+        </MalioSidebar>
+
+        <div class="flex-1 p-6 bg-white">
+          <p class="text-m-muted">
+            Sidebar avec peu de liens, pas de scroll.
+          </p>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Beaucoup de liens (scroll)">
+      <div class="flex h-[600px] border rounded-lg overflow-hidden">
+        <MalioSidebar
+          v-model="collapsed2"
+          :sections="sectionsLong"
+        >
+          <template #logo>
+            <span class="text-2xl font-bold text-m-primary">Malio</span>
+          </template>
+          <template #logo-collapsed>
+            <span class="text-2xl font-bold text-m-primary">M</span>
+          </template>
+        </MalioSidebar>
+
+        <div class="flex-1 p-6 bg-white">
+          <p class="text-m-muted">
+            Sidebar avec beaucoup de liens, scroll visible.
+          </p>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioSidebar
+
+Composant de navigation latérale avec support déplié/plié, sections groupées,
+icônes et liens NuxtLink. Un bouton circulaire avec chevron permet de toggle
+entre les deux états.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### sections
+
+- Type: `Array<{ label?: string; items: Array<{ label: string; icon: string; to: string }> }>`
+- Description: Liste des sections du menu. Chaque section a un label optionnel et une liste d'items.
+
+### modelValue
+
+- Type: `boolean`
+- Description: Contrôle l'état plié/déplié (`true` = plié). Supporte `v-model`.
+
+### id
+
+- Type: `string`
+- Description: ID custom pour le composant.
+
+### sidebarClass
+
+- Type: `string`
+- Description: Classes Tailwind additionnelles pour le conteneur sidebar.
+
+### toggleClass
+
+- Type: `string`
+- Description: Classes Tailwind additionnelles pour le bouton toggle.
+
+------------------------------------------------------------------------
+
+## Slots
+
+### logo
+
+- Contenu affiché en haut quand la sidebar est dépliée.
+
+### logo-collapsed
+
+- Contenu affiché en haut quand la sidebar est pliée.
+
+------------------------------------------------------------------------
+
+## Comportement
+
+- **Déplié** : affiche le logo, les labels de section et les items avec texte + icône.
+- **Plié** : affiche le logo réduit et les icônes seules.
+- **Toggle** : bouton circulaire positionné au centre du bord droit, chevron gauche/droite.
+- **Contrôlé / non-contrôlé** : fonctionne avec ou sans `v-model`.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+- `aria-label` sur le bouton toggle ("Plier le menu" / "Déplier le menu").
+- Navigation sémantique avec `<nav>` et `<ul>/<li>`.
+- Liens via `NuxtLink` pour le routing côté client.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+- Émis à chaque toggle.
+- Retourne `true` (plié) ou `false` (déplié).
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioSidebar from '../../components/malio/sidebar/Sidebar.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>
diff --git a/app/story/tab/tabList.story.vue b/app/story/tab/tabList.story.vue
new file mode 100644
index 0000000..e62c6e0
--- /dev/null
+++ b/app/story/tab/tabList.story.vue
@@ -0,0 +1,109 @@
+<template>
+  <Story title="Tab/List">
+    <div class="grid grid-cols-1 gap-6">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec icônes</h2>
+        <MalioTabList v-model="withIcons" :tabs="tabs">
+          <template #qualimat><p class="p-4">Contenu onglet Qualimat</p></template>
+          <template #adresses><p class="p-4">Contenu onglet Adresses</p></template>
+          <template #contacts><p class="p-4">Contenu onglet Contacts</p></template>
+          <template #comptabilite><p class="p-4">Contenu onglet 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="withoutIcons" :tabs="tabsNoIcon">
+          <template #tab1><p class="p-4">Contenu onglet 1</p></template>
+          <template #tab2><p class="p-4">Contenu onglet 2</p></template>
+        </MalioTabList>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Deuxième onglet actif par défaut</h2>
+        <MalioTabList v-model="secondActive" :tabs="tabs">
+          <template #qualimat><p class="p-4">Contenu Qualimat</p></template>
+          <template #adresses><p class="p-4">Contenu Adresses (actif par défaut)</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>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioTabList
+
+Navigation par onglets avec icônes optionnelles et gestion show/hide des panneaux via slots nommés.
+
+---
+
+## Props détaillées
+
+### tabs
+
+- Type: `Array<{ key: string; label: string; icon?: string }>`
+- Requis: oui
+- Description: Définit les onglets. Chaque entrée correspond à un slot nommé par `key`.
+
+### modelValue
+
+- Type: `string`
+- Description: Clé de l'onglet actif. Sans v-model, le premier onglet est actif par défaut (mode non contrôlé).
+
+### id
+
+- Type: `string`
+- Description: Préfixe pour les IDs d'accessibilité. Auto-généré si absent.
+
+---
+
+## Slots
+
+Un slot nommé par `tab.key` pour chaque onglet. Le contenu du slot est affiché/masqué automatiquement.
+
+```html
+<MalioTabList :tabs="[{ key: 'foo', label: 'Foo' }]">
+  <template #foo>Contenu de Foo</template>
+</MalioTabList>
+```
+
+---
+
+## Accessibilité
+
+- `role="tablist"` sur le conteneur
+- `role="tab"` avec `aria-selected`, `aria-controls`, `tabindex` sur chaque bouton
+- `role="tabpanel"` avec `aria-labelledby` sur chaque panneau
+
+---
+
+## Events
+
+### update:modelValue
+
+- Émis au clic sur un onglet
+- Retourne la clé (`string`) de l'onglet sélectionné
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioTabList from '../../components/malio/tab/TabList.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' },
+]
+
+const withIcons = ref('qualimat')
+const withoutIcons = ref('tab1')
+const secondActive = ref('adresses')
+</script>
diff --git a/app/story/time/inputTime.story.vue b/app/story/time/inputTime.story.vue
new file mode 100644
index 0000000..2bd4031
--- /dev/null
+++ b/app/story/time/inputTime.story.vue
@@ -0,0 +1,89 @@
+<template>
+  <Story title="Input/Time">
+    <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>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioTime from '../../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>
diff --git a/docs/superpowers/plans/2026-03-20-tab-list.md b/docs/superpowers/plans/2026-03-20-tab-list.md
new file mode 100644
index 0000000..52c2216
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-20-tab-list.md
@@ -0,0 +1,511 @@
+# TabList Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Créer un composant `MalioTabList` — barre d'onglets horizontale avec icônes, gestion show/hide des panneaux via slots nommés, pattern contrôlé/non-contrôlé.
+
+**Architecture:** Composant unique `TabList.vue` dans `app/components/malio/tab/`. Props `tabs` (tableau `{key, label, icon?}`) + `modelValue` (clé active). Slots nommés par `tab.key` pour le contenu des panneaux. Couleur active `text-m-primary`, inactif `text-m-primary/50` (50% opacité). Bordure active `border-m-primary`, bordure commune `border-m-border`.
+
+**Tech Stack:** Vue 3 Composition API, TypeScript, Tailwind CSS, @iconify/vue, Vitest + @vue/test-utils
+
+**Ticket:** MUI-11
+
+---
+
+## File Structure
+
+| Fichier | Responsabilité |
+|---------|---------------|
+| `app/components/malio/tab/TabList.vue` | Composant principal |
+| `app/components/malio/tab/TabList.test.ts` | Tests unitaires |
+| `.playground/pages/composant/tab/tabList.vue` | Page playground |
+| `app/story/tab/tabList.story.vue` | Story Histoire |
+| `CHANGELOG.md` | Ajout ligne MUI-11 |
+
+---
+
+### Task 1: Créer le composant TabList.vue
+
+**Files:**
+- Create: `app/components/malio/tab/TabList.vue`
+
+- [ ] **Step 1: Créer le fichier composant**
+
+```vue
+<template>
+  <div>
+    <div
+      role="tablist"
+      class="flex border-b border-m-border"
+    >
+      <button
+        v-for="tab in tabs"
+        :id="`${prefix}-tab-${tab.key}`"
+        :key="tab.key"
+        role="tab"
+        type="button"
+        :aria-selected="activeTab === tab.key"
+        :aria-controls="`${prefix}-panel-${tab.key}`"
+        :tabindex="activeTab === tab.key ? 0 : -1"
+        class="flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors border-b-2 -mb-px cursor-pointer"
+        :class="activeTab === tab.key
+          ? 'border-m-primary text-m-primary font-bold'
+          : 'border-transparent text-m-primary/50 hover:text-m-primary/70'"
+        @click="selectTab(tab.key)"
+      >
+        <IconifyIcon
+          v-if="tab.icon"
+          :icon="tab.icon"
+          width="20"
+        />
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <div
+      v-for="tab in tabs"
+      :id="`${prefix}-panel-${tab.key}`"
+      :key="tab.key"
+      v-show="activeTab === tab.key"
+      role="tabpanel"
+      :aria-labelledby="`${prefix}-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 })
+
+export type Tab = {
+  key: string
+  label: string
+  icon?: string
+}
+
+const props = withDefaults(defineProps<{
+  tabs: Tab[]
+  modelValue?: string
+  id?: string
+}>(), {
+  modelValue: undefined,
+  id: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const generatedId = useId()
+const prefix = computed(() => props.id ?? `malio-tab-list-${generatedId}`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(props.tabs[0]?.key)
+
+const activeTab = computed(() =>
+  isControlled.value ? props.modelValue : localValue.value,
+)
+
+function selectTab(key: string) {
+  if (isControlled.value) {
+    emit('update:modelValue', key)
+  } else {
+    localValue.value = key
+  }
+}
+</script>
+```
+
+- [ ] **Step 2: Vérifier que le fichier compile**
+
+Run: `npm run dev:prepare`
+Expected: pas d'erreur
+
+---
+
+### Task 2: Créer les tests TabList.test.ts
+
+**Files:**
+- Create: `app/components/malio/tab/TabList.test.ts`
+
+- [ ] **Step 1: Écrire les tests**
+
+```ts
+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
+}
+
+type TabListProps = {
+  tabs: Tab[]
+  modelValue?: string
+  id?: string
+}
+
+const TabListForTest = TabList as DefineComponent<TabListProps>
+
+const tabs: Tab[] = [
+  { 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' },
+]
+
+const mountComponent = (props: TabListProps, slots?: Record<string, string>) =>
+  mount(TabListForTest, {
+    props,
+    slots,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioTabList', () => {
+  it('renders all tab buttons', () => {
+    const wrapper = mountComponent({ tabs })
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(3)
+    expect(buttons[0].text()).toContain('Qualimat')
+    expect(buttons[1].text()).toContain('Adresses')
+    expect(buttons[2].text()).toContain('Contacts')
+  })
+
+  it('renders icons for tabs that have one', () => {
+    const wrapper = mountComponent({ tabs })
+    const icons = wrapper.findAll('[data-test="icon"]')
+    expect(icons).toHaveLength(3)
+  })
+
+  it('does not render icon when tab has no icon', () => {
+    const tabsNoIcon: Tab[] = [
+      { key: 'a', label: 'A' },
+      { key: 'b', label: 'B' },
+    ]
+    const wrapper = mountComponent({ tabs: tabsNoIcon })
+    const icons = wrapper.findAll('[data-test="icon"]')
+    expect(icons).toHaveLength(0)
+  })
+
+  it('first tab is active by default in uncontrolled mode', () => {
+    const wrapper = mountComponent({ tabs })
+    const firstTab = wrapper.findAll('[role="tab"]')[0]
+    expect(firstTab.attributes('aria-selected')).toBe('true')
+  })
+
+  it('shows the panel content for the active tab', () => {
+    const wrapper = mountComponent(
+      { tabs },
+      { qualimat: '<p>Contenu Qualimat</p>', adresses: '<p>Contenu Adresses</p>' },
+    )
+    const panels = wrapper.findAll('[role="tabpanel"]')
+    const qualimatPanel = panels.find(p => p.attributes('aria-labelledby')?.includes('qualimat'))
+    const adressesPanel = panels.find(p => p.attributes('aria-labelledby')?.includes('adresses'))
+    expect(qualimatPanel?.isVisible()).toBe(true)
+    expect(adressesPanel?.isVisible()).toBe(false)
+  })
+
+  it('switches tab on click in uncontrolled mode', async () => {
+    const wrapper = mountComponent(
+      { tabs },
+      { qualimat: '<p>Contenu Q</p>', adresses: '<p>Contenu A</p>' },
+    )
+    const tabButtons = wrapper.findAll('[role="tab"]')
+    await tabButtons[1].trigger('click')
+
+    const panels = wrapper.findAll('[role="tabpanel"]')
+    const qualimatPanel = panels.find(p => p.attributes('aria-labelledby')?.includes('qualimat'))
+    const adressesPanel = panels.find(p => p.attributes('aria-labelledby')?.includes('adresses'))
+    expect(qualimatPanel?.isVisible()).toBe(false)
+    expect(adressesPanel?.isVisible()).toBe(true)
+  })
+
+  it('emits update:modelValue on click in controlled mode', async () => {
+    const wrapper = mountComponent({ tabs, modelValue: 'qualimat' })
+    const tabButtons = wrapper.findAll('[role="tab"]')
+    await tabButtons[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['adresses'])
+  })
+
+  it('respects modelValue for active tab in controlled mode', () => {
+    const wrapper = mountComponent({ tabs, modelValue: 'adresses' })
+    const tabButtons = wrapper.findAll('[role="tab"]')
+    expect(tabButtons[1].attributes('aria-selected')).toBe('true')
+    expect(tabButtons[0].attributes('aria-selected')).toBe('false')
+  })
+
+  it('sets correct aria-controls and aria-labelledby', () => {
+    const wrapper = mountComponent({ tabs, id: 'test' })
+    const firstTab = wrapper.findAll('[role="tab"]')[0]
+    const firstPanel = wrapper.findAll('[role="tabpanel"]')[0]
+    expect(firstTab.attributes('aria-controls')).toBe('test-panel-qualimat')
+    expect(firstPanel.attributes('aria-labelledby')).toBe('test-tab-qualimat')
+    expect(firstPanel.attributes('id')).toBe('test-panel-qualimat')
+  })
+
+  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, modelValue: 'adresses' })
+    const tabButtons = wrapper.findAll('[role="tab"]')
+    expect(tabButtons[0].attributes('tabindex')).toBe('-1')
+    expect(tabButtons[1].attributes('tabindex')).toBe('0')
+    expect(tabButtons[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[0].props('icon')).toBe('mdi:certificate-outline')
+  })
+})
+```
+
+- [ ] **Step 2: Lancer les tests**
+
+Run: `npm run test`
+Expected: tous les tests passent
+
+- [ ] **Step 3: Lancer le lint**
+
+Run: `npm run lint`
+Expected: pas d'erreur
+
+---
+
+### Task 3: Créer la page playground
+
+**Files:**
+- Create: `.playground/pages/composant/tab/tabList.vue`
+
+- [ ] **Step 1: Créer la page**
+
+```vue
+<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>
+      <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>
+```
+
+---
+
+### Task 4: Créer la story Histoire
+
+**Files:**
+- Create: `app/story/tab/tabList.story.vue`
+
+- [ ] **Step 1: Créer la story**
+
+```vue
+<template>
+  <Story title="Tab/List">
+    <div class="grid grid-cols-1 gap-6">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec icônes</h2>
+        <MalioTabList v-model="withIcons" :tabs="tabs">
+          <template #qualimat><p class="p-4">Contenu onglet Qualimat</p></template>
+          <template #adresses><p class="p-4">Contenu onglet Adresses</p></template>
+          <template #contacts><p class="p-4">Contenu onglet Contacts</p></template>
+          <template #comptabilite><p class="p-4">Contenu onglet 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="withoutIcons" :tabs="tabsNoIcon">
+          <template #tab1><p class="p-4">Contenu onglet 1</p></template>
+          <template #tab2><p class="p-4">Contenu onglet 2</p></template>
+        </MalioTabList>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Deuxième onglet actif par défaut</h2>
+        <MalioTabList v-model="secondActive" :tabs="tabs">
+          <template #qualimat><p class="p-4">Contenu Qualimat</p></template>
+          <template #adresses><p class="p-4">Contenu Adresses (actif par défaut)</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>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioTabList
+
+Navigation par onglets avec icônes optionnelles et gestion show/hide des panneaux via slots nommés.
+
+---
+
+## Props détaillées
+
+### tabs
+
+- Type: `Array<{ key: string; label: string; icon?: string }>`
+- Requis: oui
+- Description: Définit les onglets. Chaque entrée correspond à un slot nommé par `key`.
+
+### modelValue
+
+- Type: `string`
+- Description: Clé de l'onglet actif. Sans v-model, le premier onglet est actif par défaut (mode non contrôlé).
+
+### id
+
+- Type: `string`
+- Description: Préfixe pour les IDs d'accessibilité. Auto-généré si absent.
+
+---
+
+## Slots
+
+Un slot nommé par `tab.key` pour chaque onglet. Le contenu du slot est affiché/masqué automatiquement.
+
+```html
+<MalioTabList :tabs="[{ key: 'foo', label: 'Foo' }]">
+  <template #foo>Contenu de Foo</template>
+</MalioTabList>
+```
+
+---
+
+## Accessibilité
+
+- `role="tablist"` sur le conteneur
+- `role="tab"` avec `aria-selected`, `aria-controls`, `tabindex` sur chaque bouton
+- `role="tabpanel"` avec `aria-labelledby` sur chaque panneau
+
+---
+
+## Events
+
+### update:modelValue
+
+- Émis au clic sur un onglet
+- Retourne la clé (`string`) de l'onglet sélectionné
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioTabList from '../../components/malio/tab/TabList.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' },
+]
+
+const withIcons = ref('qualimat')
+const withoutIcons = ref('tab1')
+const secondActive = ref('adresses')
+</script>
+```
+
+---
+
+### Task 5: Mettre à jour le CHANGELOG
+
+**Files:**
+- Modify: `CHANGELOG.md:9`
+
+- [ ] **Step 1: Ajouter la ligne**
+
+Ajouter après la dernière entrée `### Added` :
+```
+* [#MUI-11] Création d'un composant navigation par onglets
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add app/components/malio/tab/TabList.vue app/components/malio/tab/TabList.test.ts .playground/pages/composant/tab/tabList.vue app/story/tab/tabList.story.vue CHANGELOG.md
+git commit -m "feat: [#MUI-11] création du composant TabList"
+```
diff --git a/memory/MEMORY.md b/memory/MEMORY.md
new file mode 100644
index 0000000..73bfad5
--- /dev/null
+++ b/memory/MEMORY.md
@@ -0,0 +1,3 @@
+# Memory Index
+
+- [user_profile.md](user_profile.md) - User context and project role
diff --git a/memory/user_profile.md b/memory/user_profile.md
new file mode 100644
index 0000000..a4b0932
--- /dev/null
+++ b/memory/user_profile.md
@@ -0,0 +1,7 @@
+---
+name: user_profile
+description: User works on malio-layer-ui component library and consuming Nuxt applications, communicates in French
+type: user
+---
+
+Développeur sur le projet @malio/layer-ui et les applications Nuxt qui le consomment. Communique en français.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a9302c3..7331919 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,28 +7,15 @@ export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss','@nuxt/icon'],
   css: [join(dir, 'app/assets/css/malio.css')],
 
+  components: [
+    {
+      path: join(dir, 'app/components/malio'),
+      prefix: 'Malio',
+      pathPrefix: false,
+    },
+  ],
+
   tailwindcss: {
-    config: {
-      theme: {
-        extend: {
-          borderRadius: {
-            malio: 'var(--m-radius)',
-          },
-          colors: {
-            m: {
-              primary: 'rgb(var(--m-primary) / <alpha-value>)',
-              secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
-              tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
-              border: 'rgb(var(--m-border) / <alpha-value>)',
-              text: 'rgb(var(--m-text) / <alpha-value>)',
-              muted: 'rgb(var(--m-muted) / <alpha-value>)',
-              bg: 'rgb(var(--m-bg) / <alpha-value>)',
-              error: 'rgb(var(--m-error) / <alpha-value>)',
-              success: 'rgb(var(--m-success) / <alpha-value>)',
-            }
-          }
-        }
-      }
-    }
+    configPath: join(dir, 'tailwind.config.ts'),
   }
 })
diff --git a/public/LOGO_MALIO.png b/public/LOGO_MALIO.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb5ba4649acc35e84d1e7a0b7ce0be030f99d9af
GIT binary patch
literal 5824
zcmV;x7C-5UP)<h;3K|Lk000e1NJLTq004jh001lq1^@s6t>Ca;00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=000&{Nkl<Zcmd@+30zdw`sd!cvoP#4FbK#lj0-M_+jA$EBCXt?
zOTA3fv?P~IGs{x3)yy=^B~i--S5nIiGt|IbAVp*oWs`MafLWR4&b|M0hPgB|3<HSo
z-}L%^zkxgF-t*mazU_R=IRii|K+`nK&OHo$tlNMcXagS$I5^mwAH2r~e^Ve<Z2alf
z>e|NXIF9R?#)@j0AR_||hZCbP45Q6EAZEcfgZf5%fO7BHO*DoF;ymH6;P~-P@E&@k
zMIQvH&$12YSJg_@PhmK&W7?}Ea?kq!jDnX2;J|SIew}MT|Ie=Z_`6I0Y^5<LE~f&{
zZ3g(80+D;Kc0_5FVhm;`-x>``?>_#+!d+1lcbGrSFkim8`{u@7ufNIa;$Dk;2jyvQ
zUHCwwJF?ydpVgN$^>8+@VkXiaBow<2rGL^bNC?H`Pi-nHsRuQ`m*K#{fg~H*GA-Fd
zNK(yhNZvUFm2a;fV>!%~0=D7sI|Up7aGZtf2^Izj7T)}Eb>@JipL64^2920#P<+{Y
z16h#wCU?}N|9EVYdAlvUGeWqX##!CMFDow`$pjf0xGi(JGA?<tugDFspa_}2i$yp*
z?~Ncwe{3uQP?%d~BqR7AY`fZP=;VYeBd6~#d}i*U@3XVB`S2bA8~|)mpEe3C@Ys`>
z(E~}VsTouJ{zVU6cGi2GsF5!?znFB8VKkbI$6E!XF&0K?iobr*dI><^kN=SKxw{L8
z2LCV^Kj*+pU+%n|)u`1ClPfhLWmWQL`#hPbNJzXTas=O}RrT}tb*J_nyB&{Al}VB*
zGHKl}EZ?r_E(@<5LeDUahW|+;vM&B52EBTuIUXcHCx0vqk}EVJv`roQ-vmUnva&K>
z%GHwnAt3@t!zNlo+mH7j6hN-~{MWn4qJqB|S``2|VC>eNis+)EA|859oxElkB~|zl
z)3-cp@&#;YGfrVF!dm;OorhCD3k>pbh&Av33lM$2J6$}+-_H#&%x8c!(1c8-^Gr?6
za|M4f*ja#SEHJ>6-m)(z7D=iu?Z7ugc*r%E$Qf0wNv=U!?N4LGon{QCB_cJwbUH?3
z{}}COfCA9Ow=!+i?BnD8m(#?q2gY|I=p$#c-lgedEV8(wyVH=DU$f=l8S?`2>p~#c
z^4Na;E|}kY>!ajZ$oT_+{>KSG|4`qQ$_g1;_$;g+o4`q!IH(H`7s|n340Z(onJ&Ub
z<aU1T{?lv$q2-KTcgwcv2SELE{4~rN2i##x?=o%Z*`uekKXrHG{G-f212Hk(6hj9E
zu6S5dk7EGk&Y*t{h2hqXQX+2c*ntl11Tr9U)lrEBQ4`$yge0~03}Q5ynY@PR)-#1^
zL(X4PQdXEksqG2_rN2k4_xJ%zNu2w|!dC_l$1ys~#fhlmbJ-~ePRtN2o;|R{5uCs_
zV^PRC{KP#U@X7LbKBVcnn2pRJrcF<XQ0<%_<T7p<bP!h?pFz&w@TvQ@1_c<Mzkj3v
zFv*?|mqlOwX!(<UnfA0(O$jyN0MIVR1bWe6)!Be?w(cQjYm+w|#JxPqxuf3BLf@I(
zL3&pCL;(JI&Yv~d$cs2k+PhuZC@z;xo&DkFdhDaITbS$?YDbLL-rgUk+VS!Le$0Z=
zG`*Wianj2+oSXOKuMfa~%lR`OhrMUe|MsR~+k^9QkFmXY(0`M1VHYms`{q~4y36ad
zeq|B`Z$Mw)dbL(x64l?YaA;&eT}R&CzH}sX26<ezOZ>hY1L3!fCj3pwp@ubrpIP35
zBBv>PE(5R!Fa!0C+8o!##|1e)k5vFnjuVxUkwL_Ld1>PHJCzHw^CeHfOpBYOR!wvf
z@eL#i>bi#t@4mMsB|h%WC(oD&h!}4`V}5B_(n2<uC4jc6nLw3Qa$#Cp{ziDI0FMa}
z9oBEVGNHJ%t{(wCf2O@kqV!n3Wcc>s{R1n2{kb+Xe*M-fPYrx-cbrG>Px`?-go`s5
za5*f%;}YP^FL}o2<w_m!>i4N~^w8k5$Is@kg-u0F{id~dv^yW|<LyH4J$Wns^_K??
zV&<nfFmZ-1^@k9_g1uq%rg=D%H9T@MOB}o5CtuoJ{-F0uQ%3Eh!6Re@O~gPSdd!^f
z4qVH4_#zw=aC7C-@MFa1;f8Wn0F`F_By}p^gGqPBbHg`+nM+Q7b~Jw4Dux)T8KtWs
z;X=*v7njMvD=!b(4j!WbAb`oVd3lAkQ&{+)Q+`+}2QN>L`Vn4M*qJXIj#a;O{ZCK1
z_5ASE-eVbjfrk?n65!Ed+4dGXoBhX}^B+iOE?j+TR?jhCWu~TPMMGQ-=)NtBVABVH
znxRyw^=fksLA1}kS2GZ0uZ;EY>}*1J{f9)NM~?&8p!tQ2Sv6Muj%94?>hEr0X7zdl
z&gBqA6h%J@^NoVD<lQsFIYA#7q*C<@5uskRyDJw-L~Hmk4_6-O5iX)`=TyDvB97B1
zp1$jcZa{6+u-PnN{^3AvGN@FKy;i|u<0|WSp$|bANYMIx3B>%+;a^@maW3b4w-6y$
z;O=C!#BINk#-Ola!NCIH#N$Mcn|rzrD$Gl!<)cN|X%k^xL!;rDF=4B<I?4iZNPvLe
ze>&$KG&tG*L8Um4XmDSVJC{L>7=<+T`t9;@n5FYaNorJ@rSpfpqtfU>M}S#sModXq
zbL33!<=&BgB!(lVw^NYdn4EY7-aT9d=Du;F^wXV}!=1Qn8E{ZAX+G%|5hsV1ZGgAH
zg@#JQYUNqe$2KklMX`E{y$!kdB>P5AOW295pILFw2(1Z#+t&AD;)_b^EQrkI;q<XI
z?E?J{!C8Ys?b8su$Jc6&p_j)cFADIr%={s(kLu%>@SwQC4ex;UXB?RkQxg{7FRl9!
zg_KmwGAgPu(T$CIP*JS_rR6ec&KrPSp#{do3uv-pq=6zL`}mPt6VmSy1n>b42#n?n
z#hWU+g?mGl2P|_sLcymDkc9<Bb)dRdC3kk>-sZ9i=#$aK1;uqhTHgqtv2<`L8nAps
zuGE9l`d5cd-un&!z(QPX`T)#Y(K9mQH>$CA1dTPx2}<a2Ihf#1zAz?aT5M2o@LbZ|
z!9e}|2X5XV@^+=oQ^uub4cO*4qc>g8mn;Gu18n=@bn&|zlXrxgRn!<@u`u#sxtwry
z=9EvJ(DUQ|y}MlGaolCD&LlhaMsei%--=dc=2VUB9_9s=fyN>62$9f*hQ*jr;DCTM
zf561uM^ueEA2eR`dvMv%XXjV5#|#bKv0?F$wUZ}5(NKBQvj3`WzmAGexOvpm!&&6S
zC+OxS18Tju7oWP5TfJ%5{_DpfZweW{;dTZ?f7N%7p}5h@qCLQ=4x9MLd$$GS)|UdS
zoj>1ypXVwmYw*(P3^bGfMiMC$^6!ry-@U@5k?jH|TzhZ*`J3HBy~q~K$1yUepq74X
z!Qj3RQkQo9<n6KXGbi@WoiskMV$876l6A|X&;5RC{-`Sl=Q>NJsyk|p9(gphqt+zQ
zeD}l5>4QS)OfH9QF-GHD@72)zH_q}nlQ3(^q)GkcHu_`hVxxbP++N*9DBy0XtX4w$
znbjbm7Dt2$$<?3znr>POjPJ1PR1ERS3>30;#s!yYLs?yxzBVd$-MMG2`#=A@xKUpj
zhlK@uZYnHpperQ`P*ttKXHD!Ai|%(cCSJB7d9J6oiwjg=3rj_?a5Ar;M&6jema}s4
zh-_Q9neS0ie!7xtEBZs1YoD@FhkQnd+?0ZZJ#K5t_rcK8nF}dmes)0(p~`!QJAHbn
zipjFt=uexXF#PJN1uMIUd#{r#wHEv_P&DD;!FPiNy6M2=Jlhojb(zBT4gaGJa*}7!
z?jv+I>^_`v=J@e!C-bdM$b_K*oZd6@eR<B?#M)&e`wi;Tbzj`7=<{vu8n#7{#8bCF
z_i*P~OcoI&Gq;LR-FsJPS~Cr8;6Y<zJ@_ql9*mo>x9&3ib%1D-azoOkTB3}ktxSJO
znT&{gYwQ4%uSK?nixGm$i7#!`YYh1;9Jip4z|)C3bRsjJ5hA++pj8vx#jA(Rs3?;v
zaQshm4<(5eDHf6Q-#;UV2^q{hyg-N<?R(?J!I`HMX3k^6IM7Z&1W7!X6{a&#0_#Fj
zb&ZO6^@V}a?Inn5OvvOBcavWmmX|L<_#8?Ij9cc;+<djGpS#7lQ0f3GK+ehqLozy&
zJ~jyfYt51|Bkz|;Eg}dcU^11?J0+#a!}t!nh;WQBlq-9^GOhP>a7{song@u?i5NOp
z11F!=ZT{wZFC+3+%9~gRcfcZoT)R;|TO@L^Y=`C>E(emY*2i4JI+#y42@5sxDe-3L
z1Oi8cwDgB??Ppn7NohkPm^ZusTh^gldjQdA@qhYCyafDm>t#>m<qUq$E}ej`?IXr$
zJ*Cxiw{IMO+1-VA-T=97ej9~WQGNaNo4!cN96mMSY;|?Dajod6xwi!wcPl2q5Xa(u
z8l4`S64QNWXYfyr>Gw%_rOe?R!O}`ui^!y2rU3&7_@;GKfy`m#;NU|fNm|SorIG)*
zTNQ(@+pquzEm?ib8xcJ3(vp}Osk#=o^8BGTv4evIv{J2$2_3yx89Dyzn;W)Xnf>F%
zoS^TUvWAbe{kf`E84SHxi-9-DHK1pxXVRk<SWv&&&xva(Kx=>lK|uk{r3^I3x*e{Y
z`f&roI+e8Q5h1*+RFhVC0jRBO?2fMOG6(kxsAJ)rFjE>4Ib1$k@uvEqPyw{fm|0(=
zMzSJ8gowyd-z8-p+;%_%IE}i>N%`;kfkyy^LhI)2WJwcsBMAog4lV<ogg{^8=^lUJ
zAW$qT<k>2k`-)st4WM%n>hDvjYSh9y3Aeco?fI9~DLv7(on65&aP$z}*Hz?+O`VW8
zP1NVF^{lB>+=U^AF*9YWpNlgGdh0NZTR!@^M>W?NhT}GH1C55G1)T&vNj=tr&*OoX
zWP+Ytr}quG^VxtTTdp817RzWwal0e(4E>F+sR(LrXc7W;`R!Fth=YYIb8{s)-sFr~
z#^6ve2o|em^`hbFk7}-4J8?t1sXKk524~@1;6NZ^JCn4H=(Jwe=ma_m8QE3Nt}ZR7
z3zK!m^O<&i0CvFO^Rz<Cr*G}^Fsn`Lkym=|+c{fKCoOa#DJnJpek}&2jAob(^YHkL
ziIK}6#d~GIna5FExA9=b?%};Uzs@?DDy2pU90>aK@zDSq0<Y0g{PgtnPMtiKH!7oe
zY)hR%!X^$ApiHiP0pJW?d>7;4l(OK`Ec13I)*lZCe&_t+(Z8L4&7-$i^hsU4T7n7{
zMR%*g*7u)6r-vRn-V%87O04?}Jo(^ScJ)~Bh=2qK9dwb(G;Y9w0EKLx?oKV7JvM=Z
zhZ1gJX9Pa^QqgQapKTRQ89+pkAO&6HZ48WJhxPo0Oh2)a*^XrONK?8s)KhhM`_y+z
zeqY|@`iWOuzy4}UkIrs~>LvEM2*XZ`_c`&{^x5RR6`jC~?K@K#!)%~%B<S5;lxkfo
z@r6aT<L3)v!6N|5$sitN7f8?s9?Sefy&Cii^E!>L+c+0M<E)_z=Tr46q59aI$>xZd
zI=yW7$fckro5$RXj1(zfojo8AbOI3WVg0)vgeA`w?JyJ!+;t#5u%qE6Gv3_?{)mSj
zu|u6xKw}#_qT83X^=b=7vDp}X=0e_*);4q417uZ3{d@n8ZpPYzSv&O4^jd@dWfPCu
zv;h1eZ<KMu#fLSQ51mq-d@a)K9<ACvdJ%d1%2xT&7gt#)D>|e7sPBT=QFj`(B#PH9
z@Pr0=l50QzC7sFfw+A0%xuz^S@}d);<Lij$6qe2%bg`~ZMVeRePz5w3&=c?T^w-DD
zD|l@IqRWo&Zi+LrDi@)Ax%oYf#sHp<?iSy!YM==j;kqh+4kqk+ReSO4OxdSlY07V&
z+*1FZ;GyQ)rLWoDBG<ad-dguKvVT_Z#h!@{+p4z;VNgxqN95)uesWt9ljCm-5B!IH
z6rUQNe5L4HPdBc^{SpbYyh6u$J<N4jm4a~q6L8a>d*$$3Og^SHJj{-)goIl@OW*$~
zFFec(ZNF;92SYYPexVdU8b5tGXiqiJG&p1E=eeP57;nrg6W|bB^!IN}CA<Q2`18LC
zc3W}x!;Thv+6h?V_UUU23u`glD(}x`Lpw%clOm$GUt}tfw2j{^V#c*RE_w8ZFE8bb
zL%j58hYWB`zz%#dIj;0!y%tqG|7@nQE+S_t{Z8elk>hv#Y_9-@tnln5Czr>5{9}3F
zo<4e*syB}yXt>0%CXW{{G!@c}n$@m#)D-$50{;ZB&o#B)hD3fH5_3t1i#_dpr*Vhz
z^ymA`Oi3$D6bks}yNNNFC8Q~e8s*&ML;B6Q3yY?W>G3UWZ#2iT>)@^4Aw$3T?&#^P
z-aR9{Aw4LE{V^w|g7?MV-+Qn7_+mkXSY%-K0-_}g?PNk5qMah*=z)FwFGP<B{ia_x
z;XRy7P+9p^LD&AMoRf03Xi9oc6(J7yrcjFB96#)Az)0%$$zA{619r}6R+e@<QdlcL
z`~?2X@a>jKM?;5hd0nrkhC$6Y({h-p#4(h9rhd4Xw{y>t^qoONx7NElvm4+t!FTKR
zk<f+DA$)z@AR#GeF#v&fIm;C~%!x;62m<E;2LscR_TbvhirE*^3J!+^31FIqG5JmD
zc5#?DEmLa89y*yhE?(YL(r|-`9$4U^!-Iv!=d8|Rps=5+tdvP4nX3nyQu@tS#G%jZ
zF>7Ao)fFSvO6`4}-q0fJh|D}6)(pae1i;gs=SdK(5H6SSf!_&qZU8dhs71*8l}OcC
zq*%0u&nK<`2Zm$2rX3meuh41vIn{7FxRsKjXa*S5?OlD{j2|~wE?nPR?vzGzhS@|+
zDph7d=KEVSAA!Rk+GKo?qHD{=FfVYivRZ+`IzziQf-pd^Fhk)3DIVnS{=w;QW`5it
z(*^<u1(VR@NxNs9`ex_sz>;FA+}3ViyEss&2fdw~oN9d769KQ5-CX&EE#@QmTb$Z8
z`5;7oO6*h5jSYV~H@^l~sB~=+#ket50&@vPCH3;RW23{<PR`q4#Al<3<w(F}T4#<A
ztEjoVMlk33UNfqz<kI4jdZ5vgMw@OP-JxsLh9ahlDml3KK&p?75N%64K7n)StEqcT
zIS`vlLr5eF;$ekcWqt}sSs~+m03JV(T0KUQlpH!JBwWtv(n=XuS>DjDf``cxpjrR2
z=hI27m^tTXU$|26L0Od|9G#DAK6(WwqSKLp)KgTi?%r9izc6s++NC2ezWtg}1B`QI
z8E7pWLp?BCPMm4r3Y_?@zF!R~#HVQ;?5AuV6F^}prL#9~IA0n*BZo@e%mC=lI+JAE
zr>4zf|C1lD8GroPnY@s+TZL0{3#88$KCBN$=QZI?T%#k^!Cl=;{C!-n4EtBWkp<JD
z?j+_mg}-e@XLf)76lorKOhDT?q}ZByvV*Jn(B!dWGz;fv1?ectkIUh)HH{h-+k+^b
zKDw8L*&qp;7Eb0wGY4Ml9$}33?%AZ3y?N0#PA<0xI-6p*hW`V^+%Mvs{U|j60000<
KMNUMnLSTa5ty-)A

literal 0
HcmV?d00001

diff --git a/public/LOGO_MALIO_COLLAPSED.png b/public/LOGO_MALIO_COLLAPSED.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a3d052e726d1930841b6844321e061b74557929
GIT binary patch
literal 2237
zcmV;u2txOXP)<h;3K|Lk000e1NJLTq001HY001Zm1^@s6o7^a*00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=000O$Nkl<Zcmd^D3vg7`8UD|``^auKStIOjl9eT7^I%YDaU)Qn
zBn|=wXq9QwmeGQx)?%ehr(^B3A`gpJEsWDNQ=1m8&_T4;=`dxa8Kp3W(P)W6>V%SL
zNWzj$$g}%?-TU`G&e^@YNftVFI^%dIcX#i-=l}oj|Nh50Cjg(JLE!%|GK>_=US6#;
zn{4dfteb7T()-HEY2-NR!XMV%U@dnUYP@}uSDt-4enEPsldj}6^T9svo;3*}6q3Xg
zn}Rqx?DwAQnHI>xwTIuB<yufLiXtEa=uJg1*7=*I=i8n;E4>yqAjIM3@;}(!mir~M
zW73;hkcf?thKmmRUeG#Q_Ql6)-OKMgm52sFR!le^f+HWl+;Qxi_i8;$jYP~Jj08t9
zDqXSA7zRhXG4G}ghcqDMA$pt24%thMTlPFNP(;4cIh)+wNdi~Gz0sGdd$K^t1B>Uc
z`h9S`SB!;Jz0vTfWNUIVo8q(t5R&4Fpz_0Lam=?`R}`_Qzg%y*#aU6fdC$?&!o8;_
zgG|rvGkAy5p>sdzDKTsH+ibTL>+)}`kRl>$B(fG+ktiaW5eRUozC|`2NHlO6owse;
z&#->Kq4fCRKm5D*zBUqpbUujBz2=R8(Foo#f1%d5n`$0;IvySrWe`LOjI3VPoMl>j
zLuddb2_!0dNk&Aw`_B7i`DZuSD$ON%bDg{Uo`B47K_dV!xd~h><Y($+nZnWqTZl?E
zs;U|7Ff$O;UZ@Jnl!gMAiKo74%{`0x0|W0*9@9)u`B1T{zzq>WJnn-qd+4tD$=%7s
zn4(8khbkjfb%q~Gxuvynj1Z;BR9V>tF@{61cz@;1(ejqR#+Lx~Rx7)8h2_Da3;y@D
zemSbwHzi^LMI)tGLspK^pqO%1g`k>K*o^b}3uE9kZaXsGl?_6^uUKgP-aoy@oy>}7
z`L|pmZ*<W>AhK4GEjb+!qV<%d9x6<h<@;d6>pyCRshyS_Y%E>^1!l{drtXte9z(j@
z_d{|5Rd19}1Wnbj#x^}8>K~ne8Q7)b6Jv$T)~7M2zH#%{ieI^W-nWnHQ=U1hRy3j@
zH%0{)q23|2BTdZIpUDWvr6z085n9P45xa^NOMcv-l|Q@FzD92r=D8mAJx*=Fvie_q
zBO1DjDKd}+B&}M^l_PTbK{}QM<v~%%L<xxy+A25xnrf62UGR8jwf27~tOL1xX;_T*
zI}QLwk-Cqf+{{p%Av>l4f}9q;WIc&dj*E4&G$t}<#yp3^z0oe+CjBi{?IT0c_Ojhw
zCqQlOoMZ0Fd7{qXlv<-&eNqVWh|nfc5V~$4(qz=u88KPS(aYXOogt6q8YaR+Vo}A{
z_a&Rlw-(rSOYIL``VwVB(NMBzM{_LX6BQ5=8iUEo^|Zgb#b~h=sLZmNIg*vOcVwx^
z>kHxhneE+S!5OCBDLjwx^B>@Cz89YQZC@z`Auw^PqiP)uE0Iizgew$>`~P@}5PjMR
zUW*Zq_8xUHNd5S><H%4P^@J8UahXTR!)Fga@>py5Dx_CitghL<+>loUgqH=06ltD}
z_qR2BJRUu=6_0&!xf)uU8fATAb-ZJ7OKD%w&Q>eb^KpFdihF-WMZKJ`tUHs7XPe)B
zvw5x2?;C9~nCua2iHCH3a9~$QM**_MCT&KX8Hl{-p{B2<fSL4pb@q<8Q3<Tt1$4q-
za`w`_gP^X!dTKz@(3QM!YRkiCUaHCOJi6Hq6TMQ8KMk6u2G?Bl7#%>%H6>svCKG+%
zS%vz!90IFKPKV-H;j&F_ebQ|LGzm*V!O+l&5zx4<_=k|u+;Rb-3vhaQ06FGfC^iS%
z8#%*`%6?TzAQ5>H1J2bCb>o7S&(~@_naRIY-H;qWP%**m%Y8s~CO#U7e|3?|(01&*
zf9B$$mzA!FsbKT|@gBiCxBBFlx1NhEy6c5QWnb97*6vzg4%0Y_3=@jnj6i4+vK&pV
z2E54_nV1-yBhP>L)z$avIQWayAVAF-g>6nqM5X=cpwV<g>3yY(8vf>9x$6{YGm`O;
zrYJ{fSaU~hwKwu(mqG)zRW=V*%(WlAtHGw{egLKtPTE}xL}N%1=5#Rl(UDCsB}|y!
zDrWVPOdu?$3GJ{F{<^vm;vJ5htaO{|=`0xxIsRhp^ZBhUwlH!R_2yzi*uG9VFPO#t
zb4~ALm{TK82t$XtIxEQp#I(HL9(d7pOa6*1$l__=?<UUwss859H-B0g35>TI&2t1p
zzLN_MzSo?s8;N!+N~Sb4T_$l%gjJ3T{;AW!kDh!KxF_z^FW&W5LRth<-Bif|zqj?1
zPH(Hc0%Q4t4Xz@S&j(rLs~Z(|T0wxE`;pWkLZOXlItlskoye}8+p7LfLGV--dmnfH
z?2}(r9cG4myN(ZZbaW)Lfq*8FXbR388ahd35!r5A9k=fL_!;DdaPmmyrJt`ZEZ=s!
zW%j_+a}Lg{wLkgRso^~^ZBNqb)mWh2SvxX9Bc!)==_6KJkDlN7FXza?Ti@8Z!_qCC
z&>`3}d123ie(T;7|CWysB3xsjT2%BVlaUM{Jg@RckR?|JyE5IJ?ST*0W$9NA<!~KC
zNj`#f@yN00$@{Q$^bp9@Gud<ouL}gEk4b7^$TioRR238W6bAv4Q(;y^Q@4Zcz)Udb
ze)qo|seVeP1|};<3}&0vXepIWFv>q_h^fE{V}Zb@!c1O)OZw#165t4!<FQ%V_gW(o
zJ9X0K<x@|}k_7tt<Rlf~e;Ya|tJ6WBS3|K?BBevtd!0G<c^m%$qPdWfz-r7H00000
LNkvXXu0mjfSXV?s

literal 0
HcmV?d00001

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 61735b1..c812b6d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,6 +4,7 @@ export default {
   content: [
     './app/**/*.{vue,js,ts}',
     './app/**/*.story.{vue,js,ts}',
+    './.playground/**/*.{vue,js,ts}',
     './histoire.setup.ts',
     './histoire.config.ts',
   ],
@@ -15,18 +16,30 @@ export default {
       colors: {
         m: {
           primary: 'rgb(var(--m-primary) / <alpha-value>)',
-          secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
-          tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
+          surface: 'rgb(var(--m-surface) / <alpha-value>)',
           border: 'rgb(var(--m-border) / <alpha-value>)',
           text: 'rgb(var(--m-text) / <alpha-value>)',
           muted: 'rgb(var(--m-muted) / <alpha-value>)',
           bg: 'rgb(var(--m-bg) / <alpha-value>)',
-          error: 'rgb(var(--m-error) / <alpha-value>)',
+          disabled: 'rgb(var(--m-disabled) / <alpha-value>)',
+          danger: 'rgb(var(--m-danger) / <alpha-value>)',
           success: 'rgb(var(--m-success) / <alpha-value>)',
+          'btn-primary': 'rgb(var(--m-btn-primary) / <alpha-value>)',
+          'btn-primary-hover': 'rgb(var(--m-btn-primary-hover) / <alpha-value>)',
+          'btn-primary-active': 'rgb(var(--m-btn-primary-active) / <alpha-value>)',
+          'btn-secondary': 'rgb(var(--m-btn-secondary) / <alpha-value>)',
+          'btn-secondary-hover': 'rgb(var(--m-btn-secondary-hover) / <alpha-value>)',
+          'btn-secondary-active': 'rgb(var(--m-btn-secondary-active) / <alpha-value>)',
+          'btn-danger': 'rgb(var(--m-btn-danger) / <alpha-value>)',
+          'btn-danger-hover': 'rgb(var(--m-btn-danger-hover) / <alpha-value>)',
+          'btn-danger-active': 'rgb(var(--m-btn-danger-active) / <alpha-value>)',
+          'site-blue': 'rgb(var(--m-site-blue) / <alpha-value>)',
+          'site-yellow': 'rgb(var(--m-site-yellow) / <alpha-value>)',
+          'site-green': 'rgb(var(--m-site-green) / <alpha-value>)',
         },
       },
       fontFamily: {
-        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
+        sans: ['"Inter"', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
       },
     },
   },