# MalioSiteSelector
Sélecteur horizontal pour choisir **un site** (usine ou lieu) parmi une liste. Les tuiles occupent une largeur proportionnelle du conteneur. La couleur du site sélectionné est appliquée à toutes les tuiles ; la tuile active est opaque (opacité 1), les autres sont atténuées (opacité 0.4).
---
## Props détaillées
### sites
- Type : `Array<{ id: string; name: string; color: string }>`
- Requis : oui
- Description : Liste des sites à afficher. `color` est un hex (ex : `'#0055ff'`). La couleur du site actuellement sélectionné est appliquée à toutes les tuiles.
### modelValue
- Type : `string`
- Description : `id` du site sélectionné (v-model). Sans `v-model`, le premier site est sélectionné par défaut (mode non contrôlé).
### id
- Type : `string`
- Description : Identifiant HTML du conteneur. Auto-généré si absent.
### groupClass / tileClass / labelClass
- Type : `string`
- Description : Classes Tailwind additionnelles fusionnées via `twMerge` sur, respectivement, le conteneur `
`, chaque tuile et le libellé.
---
## Comportement
- **Toujours un site sélectionné.** Re-cliquer sur la tuile active ne la désélectionne pas.
- **Couleur partagée.** Le `background-color` de toutes les tuiles suit la couleur du site sélectionné. Changer de site met à jour instantanément la couleur de la bande.
- **Pas de gestion d'overflow** : les tuiles se répartissent proportionnellement sur toute la largeur disponible.
---
## Accessibilité
- `role="radiogroup"` sur le conteneur.
- `role="radio"` avec `aria-checked` sur chaque tuile.
- Roving `tabindex` : la tuile active est focusable (`tabindex="0"`), les autres sont exclues du tab order (`tabindex="-1"`).
- Activation par Enter/Space via l'élément `