CHANGELOG.md

@@ -33,6 +33,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-34] Revoir le système de playground
 
 ### Changed
+* [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
 
 ### Fixed
 * Hauteur des boutons de pagination du datatable alignée sur le select (40px)

COMPONENTS.md

@@ -584,28 +584,59 @@ Barre latérale de navigation rétractable.
 
 ## MalioDrawer
 
-Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transparent.
+Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdrop semi-transparent. Gère l'accessibilité (focus-trap, restitution du focus, `Échap`), le verrouillage du scroll de la page et un empilement correct de plusieurs drawers.
 
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |
 | `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
-| `title` | `string` | `''` | Titre affiché dans le header |
+| `side` | `'right' \| 'left'` | `'right'` | Côté d'apparition |
 | `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
-| `drawerClass` | `string` | `''` | Classes CSS panneau (twMerge) |
+| `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
+| `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
+| `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
+| `drawerClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-2xl` (twMerge) |
+| `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
+| `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
+| `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
+| `footerClass` | `string` | `''` | Classes CSS wrapper du footer (aucune position imposée) |
 
-**Events :** `update:modelValue(value: boolean)`
-**Slots :** `default` (contenu du drawer)
+**Events :** `update:modelValue(value: boolean)`, `close()`
+
+**Slots :**
+- `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
+- `default` — contenu (zone scrollable).
+- `footer` — rendu dans la zone scrollable, sans positionnement imposé : le consommateur choisit (`sticky bottom-0`, `fixed`, ou rien).
 
 ```vue
-<MalioDrawer v-model="isOpen" title="Détails">
+<MalioDrawer v-model="isOpen">
+  <template #header>
+    <h2 class="text-[24px] font-bold">Détails</h2>
+  </template>
   <p>Contenu du drawer</p>
 </MalioDrawer>
-<MalioDrawer v-model="isOpen" title="Sans croix" :show-close="false">
-  <p>Fermeture uniquement via backdrop</p>
+
+<!-- Côté gauche, largeur custom -->
+<MalioDrawer v-model="isOpen" side="left" drawer-class="max-w-2xl">
+  <template #header><h2>Navigation</h2></template>
+  <p>Drawer large depuis la gauche</p>
 </MalioDrawer>
-<MalioDrawer v-model="isOpen" title="Large" drawer-class="max-w-2xl">
-  <p>Drawer plus large</p>
+
+<!-- Footer collé en bas (le consommateur applique le positionnement) -->
+<MalioDrawer v-model="isOpen">
+  <template #header><h2>Formulaire</h2></template>
+  <MalioInputText label="Nom" />
+  <template #footer>
+    <div class="sticky bottom-0 bg-white py-4">
+      <MalioButton label="Enregistrer" button-class="w-full" @click="isOpen = false" />
+    </div>
+  </template>
+</MalioDrawer>
+
+<!-- Non fermable au backdrop / Échap (croix uniquement) -->
+<MalioDrawer v-model="isOpen" :dismissable="false" :close-on-escape="false">
+  <template #header><h2>Action requise</h2></template>
+  <p>Fermeture via la croix uniquement</p>
 </MalioDrawer>
 ```