From 1cbd54a91df8fa966018bf3b2f63efc35dd09a6f Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 26 May 2026 17:02:13 +0200
Subject: [PATCH] =?UTF-8?q?docs(accordion):=20mise=20=C3=A0=20jour=20CHANG?=
 =?UTF-8?q?ELOG=20et=20COMPONENTS=20[#MUI-37]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md  |  1 +
 COMPONENTS.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5e9180..466fc12 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-33] Développer le composant Datepicker
 * [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire)
 * [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
+* [#MUI-37] Création d'un composant accordéon
 
 ### Changed
 * [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
diff --git a/COMPONENTS.md b/COMPONENTS.md
index 15bf628..715e076 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -694,6 +694,54 @@ const tabs = computed(() => [
 
 ---
 
+## MalioAccordion
+
+Accordéon compositionnel : `<MalioAccordion>` enveloppe des `<MalioAccordionItem>`. Plusieurs panneaux ouverts (`multiple`, défaut) ou un seul (`single`). Pensé pour les filtres en drawer et les FAQ.
+
+### MalioAccordion
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `mode` | `'single' \| 'multiple'` | `'multiple'` | Un seul ou plusieurs panneaux ouverts |
+| `modelValue` | `string \| string[]` | `undefined` | Clés ouvertes (v-model). `string[]` en `multiple`, `string` en `single` |
+| `id` | `string` | auto | Préfixe des IDs d'accessibilité |
+| `groupClass` | `string` | `''` | Classes du conteneur (twMerge) |
+
+**Events :** `update:modelValue(value: string | string[])`
+
+### MalioAccordionItem
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `title` | `string` | — | Texte de l'en-tête |
+| `value` | `string` | auto | Clé unique de la section |
+| `defaultOpen` | `boolean` | `false` | Ouvert au montage (mode non contrôlé) |
+| `disabled` | `boolean` | `false` | En-tête non cliquable |
+| `headerClass` | `string` | `''` | Override classes en-tête (twMerge) |
+| `panelClass` | `string` | `''` | Override classes panneau (twMerge) |
+
+**Slot :** par défaut = contenu du panneau.
+
+```vue
+<!-- Filtres : plusieurs sections ouvertes -->
+<MalioAccordion v-model="ouverts">
+  <MalioAccordionItem title="Prix" value="prix">
+    <MalioInputAmount v-model="prix" />
+  </MalioAccordionItem>
+  <MalioAccordionItem title="Catégorie" value="cat">
+    <MalioCheckbox v-model="cats" />
+  </MalioAccordionItem>
+</MalioAccordion>
+
+<!-- FAQ : une seule section ouverte -->
+<MalioAccordion mode="single">
+  <MalioAccordionItem title="Question 1" value="q1">Réponse 1</MalioAccordionItem>
+  <MalioAccordionItem title="Question 2" value="q2">Réponse 2</MalioAccordionItem>
+</MalioAccordion>
+```
+
+---
+
 ## MalioSidebar
 
 Barre latérale de navigation rétractable.