feat: Ajout de composant (#23)

| 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: #23
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

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>