feat : barre header, slot #header, bouton fermer et ARIA du MalioDrawer

app/components/malio/drawer/Drawer.vue

@@ -25,9 +25,38 @@
           )"
           role="dialog"
           aria-modal="true"
+          :aria-labelledby="hasHeader ? headerId : undefined"
+          :aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
           tabindex="-1"
           data-test="panel"
         >
+          <div
+            v-if="hasHeader || showClose"
+            :class="twMerge('flex items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
+            data-test="header"
+          >
+            <div
+              :id="headerId"
+              class="min-w-0 flex-1"
+              data-test="header-content"
+            >
+              <slot name="header" />
+            </div>
+            <button
+              v-if="showClose"
+              type="button"
+              aria-label="Fermer"
+              class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
+              data-test="close-button"
+              @click="close"
+            >
+              <IconifyIcon
+                icon="mdi:cancel-bold"
+                :width="16"
+                :height="16"
+              />
+            </button>
+          </div>
           <div
             :class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
             data-test="body"
@@ -41,7 +70,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useAttrs, useId } from 'vue'
+import { computed, ref, useAttrs, useId, useSlots } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
 import { twMerge } from 'tailwind-merge'
 
 defineOptions({ name: 'MalioDrawer', inheritAttrs: false })
@@ -87,6 +117,10 @@ const generatedId = useId()
 
 const componentId = computed(() => props.id || `malio-drawer-${generatedId}`)
 
+const slots = useSlots()
+const headerId = computed(() => `${componentId.value}-header`)
+const hasHeader = computed(() => !!slots.header)
+
 const isControlled = computed(() => props.modelValue !== undefined)
 const localValue = ref(false)
 const isOpen = computed(() =>