fix : component.md

COMPONENTS.md

@@ -961,3 +961,33 @@ Tableau de données presentational avec pagination, filtres par slots et lignes
   v-model:per-page="perPage"
 />
 ```
+
+---
+
+## MalioSiteSelector
+
+Sélecteur de site sous forme de tuiles segmentées (`role="radiogroup"`). Chaque site occupe une tuile de largeur égale ; la tuile active s'affiche pleine opacité dans sa couleur (`site.color`), les autres sont atténuées. Pattern contrôlé (`v-model`) ou non contrôlé (premier site sélectionné par défaut).
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `sites` | `{ id: string, name: string, color: string }[]` | **requis** | Liste des sites (la `color` colore la tuile active) |
+| `modelValue` | `string` | `undefined` | `id` du site sélectionné (v-model) |
+| `id` | `string` | auto | Identifiant HTML du conteneur |
+| `groupClass` | `string` | `''` | Classes CSS du conteneur (twMerge) |
+| `tileClass` | `string` | `''` | Classes CSS de chaque tuile (twMerge) |
+| `labelClass` | `string` | `''` | Classes CSS du label de tuile (twMerge) |
+
+**Events :**
+- `update:modelValue(value: string)` — `id` du site sélectionné (v-model)
+- `change(site: Site)` — émis avec l'objet site complet sélectionné
+
+```vue
+<MalioSiteSelector
+  v-model="siteId"
+  :sites="[
+    { id: 'paris', name: 'Paris', color: '#2563eb' },
+    { id: 'lyon', name: 'Lyon', color: '#16a34a' },
+  ]"
+  @change="onSiteChange"
+/>
+```