feat(playground) : options Fond mouvant/Benne en space-between

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.playground/pages/composant/form/client.vue

@@ -68,6 +68,24 @@
           ]"
         />
         <MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
+        <MalioRadioGroup
+          v-model="prestationChoice"
+          :options="prestationOptions"
+          inline
+          required
+          content-class="justify-between"
+          error="Sélection requise"
+        />
+        <MalioSelect
+          v-model="fournisseur"
+          value=""
+          label="Fournisseur"
+          error="Sélection requise"
+          :options="[
+            {label: 'Fournisseur 1', value: 'Fournisseur 1'},
+            {label: 'Fournisseur 2', value: 'Fournisseur 2'},
+          ]"
+        />
       </div>
 
       <div class="mt-12 flex justify-center">
@@ -188,6 +206,12 @@ const distributeur = ref<string>('')
 const phones = ref<string[]>([''])
 const nomDistributeur = ref<string>('')
 const nomCourtier = ref<string>('')
+const fournisseur = ref<string>('')
+const prestationChoice = ref<string | null>(null)
+const prestationOptions = [
+  {label: 'Fond mouvant', value: 'fond-mouvant'},
+  {label: 'Benne', value: 'benne'},
+]
 
 function addPhoneInput() {
   phones.value.push('')

.playground/pages/composant/input/inputAutocomplete.vue

@@ -47,31 +47,6 @@
       </p>
     </div>
 
-    <div class="rounded-lg border-2 border-m-primary p-4 md:col-span-2">
-      <h2 class="mb-1 text-xl font-bold">allowCreate + BAN (test MUI-48)</h2>
-      <p class="mb-3 text-sm text-m-muted">
-        Tapez au moins 3 caractères → suggestions de la Base Adresse Nationale.
-        <strong>Repro :</strong> sélectionnez une adresse dans la liste, puis
-        <kbd>Ctrl</kbd>+<kbd>A</kbd> et <kbd>Ctrl</kbd>+<kbd>V</kbd> pour coller une autre valeur
-        par-dessus. La valeur collée doit rester (le champ ne doit ni se vider, ni faire redescendre le label).
-      </p>
-      <MalioInputAutocomplete
-        v-model="banValue"
-        label="Adresse"
-        :options="banOptions"
-        :loading="banLoading"
-        :min-search-length="3"
-        allow-create
-        icon-name="mdi:map-marker-outline"
-        icon-position="left"
-        @search="onSearchBan"
-        @create="onCreateBan"
-      />
-      <p class="mt-2 text-sm text-m-muted">
-        v-model : <code>{{ banValue ?? 'null' }}</code>
-      </p>
-    </div>
-
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec création (allowCreate)</h2>
       <MalioInputAutocomplete
@@ -224,40 +199,4 @@ const onSearchApi = async (query: string) => {
 const onSelectApi = (option: Option | null) => {
   apiSelected.value = option
 }
-
-// allowCreate + BAN (test MUI-48) : recherche nationale sur la Base Adresse Nationale.
-const banValue = ref<string | number | null>(null)
-const banOptions = ref<Option[]>([])
-const banLoading = ref(false)
-let banFetchId = 0
-
-const onSearchBan = async (query: string) => {
-  if (query.length < 3) {
-    banOptions.value = []
-    banLoading.value = false
-    return
-  }
-  const requestId = ++banFetchId
-  banLoading.value = true
-  try {
-    const params = new URLSearchParams({q: query, limit: '8'})
-    const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`)
-    const data = await response.json() as {features: {properties: {label: string}}[]}
-    if (requestId !== banFetchId) return
-    banOptions.value = data.features.map(f => ({
-      label: f.properties.label,
-      value: f.properties.label,
-    }))
-  } catch (err) {
-    if (requestId !== banFetchId) return
-    banOptions.value = []
-    console.error('Erreur lors du chargement des adresses BAN', err)
-  } finally {
-    if (requestId === banFetchId) banLoading.value = false
-  }
-}
-
-const onCreateBan = (value: string) => {
-  console.log('BAN — valeur libre créée :', value)
-}
 </script>

.playground/pages/composant/radio/radioGroup.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="space-y-8 p-8">
+    <section>
+      <h2 class="mb-4 text-xl font-bold">Aligné avec un select (en ligne, erreur)</h2>
+      <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+        <MalioRadioGroup v-model="prestation" :options="yesNo" inline error="Sélection requise" />
+        <MalioSelect
+          v-model="fournisseur"
+          label="Fournisseur"
+          error="Sélection requise"
+          :options="[
+            {label: 'Fournisseur 1', value: 'Fournisseur 1'},
+            {label: 'Fournisseur 2', value: 'Fournisseur 2'},
+          ]"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2 class="mb-4 text-xl font-bold">Empilé avec label</h2>
+      <MalioRadioGroup v-model="categorie" :options="categories" label="Catégorie" />
+    </section>
+
+    <section>
+      <h2 class="mb-4 text-xl font-bold">Slot custom + requis</h2>
+      <MalioRadioGroup v-model="civilite" inline required label="Civilité">
+        <MalioRadioButton value="M" label="Monsieur" />
+        <MalioRadioButton value="Mme" label="Madame" />
+      </MalioRadioGroup>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const yesNo = [
+  {label: 'Oui', value: 'oui'},
+  {label: 'Non', value: 'non'},
+]
+const categories = [
+  {label: 'Catégorie 1', value: 'cat1'},
+  {label: 'Catégorie 2', value: 'cat2'},
+]
+
+const prestation = ref<string | null>(null)
+const fournisseur = ref<string>('')
+const categorie = ref<string | null>(null)
+const civilite = ref<string | null>(null)
+</script>

.playground/pages/composant/sidebar/sidebar.vue

@@ -10,18 +10,6 @@
       <template #logo-collapsed>
         <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
       </template>
-      <template #footer>
-        <div class="flex items-center gap-3">
-          <Icon name="mdi:account-circle" size="32" class="text-m-primary" />
-          <div class="leading-tight">
-            <p class="text-[14px] font-semibold text-m-text">Tristan</p>
-            <p class="text-[12px] text-m-muted">Administrateur</p>
-          </div>
-        </div>
-      </template>
-      <template #footer-collapsed>
-        <Icon name="mdi:account-circle" size="28" class="mx-auto block text-m-primary" />
-      </template>
     </MalioSidebar>
 
     <MalioSidebar
@@ -34,18 +22,6 @@
       <template #logo-collapsed>
         <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
       </template>
-      <template #footer>
-        <button
-          type="button"
-          class="flex w-full items-center gap-2 text-[15px] text-m-text hover:text-m-primary"
-        >
-          <Icon name="mdi:logout" size="20" />
-          Déconnexion
-        </button>
-      </template>
-      <template #footer-collapsed>
-        <Icon name="mdi:logout" size="20" class="mx-auto block text-m-text" />
-      </template>
     </MalioSidebar>
   </div>
 </template>

.playground/playground.nav.ts

@@ -45,6 +45,7 @@ export const navSections: SidebarSection[] = [
       {label: 'Select Checkbox', to: '/composant/select/selectCheckbox'},
       {label: 'Checkbox', to: '/composant/checkbox/checkbox'},
       {label: 'Radio', to: '/composant/radio/radioButton'},
+      {label: 'Radio (groupe)', to: '/composant/radio/radioGroup'},
     ],
   },
   {

CHANGELOG.md

@@ -57,7 +57,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-44] MalioDate / MalioDateTime : event `update:rawValue` (string) exposant la saisie brute sur un canal séparé pour la validation back-autoritative — saisie invalide (non parsable ou hors `min`/`max`) → texte trimmé tel que tapé, saisie valide/vide + clear + sélection au calendrier → `''`. `modelValue` reste `string` ISO `| null` (la saisie invalide n'y transite jamais) ; le parent construit son payload via `valid ? modelValue : rawValue`.
 * [#MUI-45] MalioDate : prop `markedDates` (`Record<"YYYY-MM-DD", 'success' | 'danger'>`) appliquant un fond tokenisé par jour dans la grille (générique, fourni par le consommateur ; précédence sélection/`today` > variante marquée > défaut) + event `month-change` (`{ month: 0-11, year }`) émis à l'ouverture du popover et à chaque navigation de mois. Sert l'écran *Heures* de SIRH (jours validés en vert, chargement du mois visible à la volée).
 * Calendrier (Date/DateRange/DateTime/DateWeek) : sélecteur d'année (3ᵉ niveau de navigation — jours → mois → années) et grisage des mois et années hors `min`/`max`.
-* MalioSidebar : slots `footer` / `footer-collapsed` pour ajouter un contenu en bas de la sidebar (profil, déconnexion, version…). Toujours collé en bas (la nav `flex-1` le pousse), reste visible quand la liste de liens scrolle ; bordure haute `m-primary` en mode déplié, à l'image du bloc logo.
+* [#MUI-radio-group] Création d'un composant radio group (message unique, alignement select)
 
 ### Changed
 * Cohérence du mode **`disabled`** sur toute la famille formulaire (calqué sur InputText : texte + label grisés, `cursor-not-allowed`, aucune affordance interactive). Concrètement, quand `disabled` : le **bouton « + »** d'ajout disparaît (InputPhone, InputEmail), l'**œil** de révélation disparaît (InputPassword), le **chevron** disparaît (Select, SelectCheckbox, InputAutocomplete), la **croix d'effacement** reste masquée (date, upload, time), le **label** passe en `text-m-muted` (Select, SelectCheckbox, famille Date via CalendarField, TimePicker), et les **tags** du SelectCheckbox + la valeur du Select passent en gris. (InputText, InputAmount, InputNumber, InputTextArea, InputRichText, Checkbox, RadioButton, InputUpload étaient déjà conformes.)
@@ -72,8 +72,6 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-42] Button / ButtonIcon : l'anneau de focus passe du halo `ring-2 ring-m-primary/50` à l'anneau standard `.m-focus-ring` (outline plein, offset 2px), pour l'homogénéité avec les autres composants.
 
 ### Fixed
-* [#MUI-48] InputAutocomplete : après avoir **sélectionné une suggestion** dans la liste, un **collage qui remplace tout** (Ctrl+A puis Ctrl+V, sans re-cliquer dans le champ) **vidait le champ** au lieu de prendre la valeur collée (label qui redescend, dropdown « Tapez pour rechercher »). Cause : `onSelect` repassait `isFocused` à `false` alors que l'input gardait le focus DOM (option cliquée en `mousedown.prevent`) ; le `watch` de synchronisation, non protégé, remettait `inputValue` à `''`. `onInput` resynchronise désormais `isFocused`. La sélection à la souris n'était pas affectée (re-clic réalignant l'état).
-* [#MUI-47] Sidebar : la **bande de ~4px en haut/bas d'un lien** (padding du `<li>` qui porte le fond de hover) était survolée mais **non cliquable**. Le padding vertical passe du `<li>` à l'`<a>` (`py-1`), si bien que toute la zone survolée devient cliquable — sans changement visuel. Les côtés n'étaient pas affectés (`<a>` en `block`, pas de padding horizontal sur le `<li>`).
 * Sidebar : le **lien actif** reste actif sur les **sous-routes** (match par préfixe via `useRoute().path` au lieu de l'`active-class` de NuxtLink qui dépendait de l'imbrication des routes) — ex. `/supplier` reste surligné sur `/supplier/1/edit`. Nouvelle option `exact: true` par item pour forcer le match strict.
 * Famille Date (CalendarField) : le **clic sur le picto calendrier** ouvre désormais le popover (le `<Icon>` en overlay absolu interceptait le clic sans le traiter, et ne le laissait pas retomber sur l'input). Couvre Date, DateTime, DateRange, DateWeek. La croix d'effacement conserve son comportement (efface sans ouvrir).
 * Famille Date editable (MalioDate, MalioDateTime) : la saisie clavier est désormais **bornée par champ** sur le premier **et** le second chiffre (jour `01-31`, mois `01-12`, heure `00-23`, minute `00-59`) — une valeur hors plage (`99/99/9999`, un jour `33`, un mois `19`…) ne peut plus être tapée (auparavant saisissable puis rejetée a posteriori par la validation). Les impossibilités calendaires fines (`31/02`, 29/02 non bissextile, hors `min`/`max`) restent captées par la validation. Implémenté via `buildBoundedMask(template)` (CalendarField) : un `preProcess` maska valide chaque champ progressivement (un chiffre n'est accepté que s'il reste une complétion valide dans la plage) ; il distingue le mois des minutes (même lettre `M`) selon la présence d'heures dans le gabarit.

COMPONENTS.md

@@ -499,6 +499,47 @@ Bouton radio (à utiliser en groupe avec le même `name`).
 
 ---
 
+## MalioRadioGroup
+
+Groupe de boutons radio : possède la valeur, le `name` partagé et **un seul** message (erreur/succès/aide) avec espace réservé comme les autres champs — un groupe en ligne s'aligne donc avec un `MalioSelect` voisin. Les options sont déclarées via `:options` ou via le slot par défaut (`<MalioRadioButton>`).
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| number \| boolean \| null` | `undefined` | Valeur sélectionnée (v-model) |
+| `options` | `{label, value, disabled?}[]` | `[]` | Options déclaratives |
+| `label` | `string` | `''` | Label de groupe (legend, lié par `aria-labelledby`) |
+| `name` | `string` | auto | Nom natif partagé des radios |
+| `inline` | `boolean` | `false` | Disposition horizontale |
+| `disabled` | `boolean` | `false` | Désactive tout le groupe |
+| `readonly` | `boolean` | `false` | Lecture seule |
+| `required` | `boolean` | `false` | Champ requis (astérisque dans la legend) |
+| `hint` / `error` / `success` | `string` | `''` | Message unique du groupe |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve la ligne de message (alignement) |
+| `groupClass` | `string` | `''` | Override `twMerge` du conteneur du groupe |
+| `contentClass` | `string` | `''` | Override `twMerge` de la zone des radios (ex. `justify-between`) |
+| `inputClass` | `string` | `''` | Override `twMerge` propagé à l'`input` de chaque radio |
+| `labelClass` | `string` | `''` | Override `twMerge` du **label de groupe** (legend), pas des labels d'options |
+
+**Events :** `update:modelValue(value: string | number | boolean | null)`
+
+**Accessibilité :** conteneur `role="radiogroup"`, `aria-labelledby` (si `label`), `aria-invalid` et `aria-describedby` sur le message unique. Les radios enfants héritent de l'état d'erreur/désactivé du groupe.
+
+```vue
+<MalioRadioGroup
+  v-model="prestation"
+  :options="[{label: 'Oui', value: 'oui'}, {label: 'Non', value: 'non'}]"
+  inline
+  error="Sélection requise"
+/>
+
+<MalioRadioGroup v-model="civilite" label="Civilité" inline>
+  <MalioRadioButton value="M" label="Monsieur" />
+  <MalioRadioButton value="Mme" label="Madame" />
+</MalioRadioGroup>
+```
+
+---
+
 ## MalioDate
 
 Sélecteur de date unique avec popover (grille de calendrier + vue mois/année).
@@ -893,16 +934,12 @@ Barre latérale de navigation rétractable.
 **Lien actif :** un lien est marqué actif (texte `m-primary` + semi-bold) quand la route courante **est ce lien ou une de ses sous-routes** (match par préfixe) — ex. `/supplier` reste actif sur `/supplier/1/edit`. Mettre `exact: true` sur l'item force le match strict (actif uniquement sur la route exacte). Indépendant de l'imbrication des routes côté consommateur.
 
 **Events :** `update:modelValue(value: boolean)`
-**Slots :** `logo` (sidebar ouverte), `logo-collapsed` (sidebar fermée), `footer` (bas, sidebar ouverte), `footer-collapsed` (bas, sidebar fermée)
-
-Le footer est **toujours collé en bas** : la nav occupe l'espace restant (`flex-1`) et pousse le footer vers le bas, qui reste visible même quand la liste de liens scrolle.
+**Slots :** `logo` (sidebar ouverte), `logo-collapsed` (sidebar fermée)
 
 ```vue
 <MalioSidebar v-model="isOpen" :sections="menuSections">
   <template #logo><img src="/logo.png" /></template>
   <template #logo-collapsed><img src="/logo-small.png" /></template>
-  <template #footer><UserProfile /></template>
-  <template #footer-collapsed><Icon name="mdi:account" /></template>
 </MalioSidebar>
 ```
 

app/components/malio/input/InputAutocomplete.test.ts

@@ -1,6 +1,6 @@
 import {describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
-import {defineComponent, nextTick, ref, type DefineComponent} from 'vue'
+import type {DefineComponent} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import InputAutocomplete from './InputAutocomplete.vue'
 
@@ -569,40 +569,4 @@ describe('MalioInputAutocomplete', () => {
     expect(msg.exists()).toBe(true)
     expect(msg.classes()).not.toContain('min-h-[1rem]')
   })
-
-  // MUI-48 : après avoir sélectionné une option dans la liste, le champ garde le focus DOM
-  // mais isFocused interne passe à false (clic option en mousedown.prevent). Un collage qui
-  // remplace tout (Ctrl+A puis Ctrl+V) déclenche update:modelValue(null) ; le watch ne doit
-  // PAS vider la valeur collée. Régression : le champ se vidait au lieu de prendre le texte collé.
-  it('MUI-48 : un collage après sélection dans la liste remplace la valeur (ne la vide pas)', async () => {
-    const Harness = defineComponent({
-      components: {InputAutocomplete},
-      setup() {
-        const val = ref<string | number | null>(null)
-        const opts = ref([{label: '10 Rue de la Paix', value: '10 Rue de la Paix'}])
-        return {val, opts}
-      },
-      template: '<InputAutocomplete v-model="val" :options="opts" allow-create />',
-    })
-
-    const wrapper = mount(Harness, {
-      attachTo: document.body,
-      global: {stubs: {IconifyIcon: {template: '<span data-test="icon" v-bind="$attrs" />'}}},
-    })
-    const input = wrapper.get('input')
-
-    // saisie puis sélection d'une suggestion (commit, focus DOM conservé)
-    await input.trigger('focus')
-    await input.setValue('10')
-    await wrapper.findAll('[data-test="option"]')[0].trigger('click')
-    await nextTick()
-    expect(input.element.value).toBe('10 Rue de la Paix')
-
-    // Ctrl+A puis Ctrl+V : input toujours focalisé DOM, aucun nouvel évènement focus
-    await input.setValue('25 Avenue Victor Hugo')
-    await nextTick()
-
-    expect(input.element.value).toBe('25 Avenue Victor Hugo')
-    wrapper.unmount()
-  })
 })

app/components/malio/input/InputAutocomplete.vue

@@ -393,11 +393,6 @@ const scheduleSearch = () => {
 
 const onInput = (event: Event) => {
   const target = event.target as HTMLInputElement
-  // Un évènement input prouve que le champ est en cours d'édition : on resynchronise
-  // isFocused, qu'une sélection précédente (onSelect) a pu passer à false tout en gardant
-  // le focus DOM (clic option en mousedown.prevent). Sans ça, le watch ci-dessous remettrait
-  // inputValue à '' au collage et la valeur collée serait perdue (MUI-48).
-  isFocused.value = true
   inputValue.value = target.value
   if (!isOpen.value) isOpen.value = true
   activeIndex.value = -1

app/components/malio/radio/RadioButton.test.ts

@@ -1,7 +1,9 @@
-import {describe, expect, it} from 'vitest'
+import {computed, ref} from 'vue'
+import {describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import RadioButton from './RadioButton.vue'
+import {radioGroupContextKey, type RadioGroupContext, type RadioValue} from './context'
 
 type RadioButtonProps = {
   id?: string
@@ -193,3 +195,67 @@ describe('MalioRadioButton', () => {
     expect(wrapper.get('.radio-text').classes()).toContain('text-black')
   })
 })
+
+const makeGroupCtx = (over: Partial<{
+  selected: RadioValue; error: boolean; success: boolean
+  disabled: boolean; readonly: boolean; required: boolean
+}> = {}) => {
+  const selected = ref<RadioValue>(over.selected ?? null)
+  const select = vi.fn((v: RadioValue) => { selected.value = v })
+  const ctx: RadioGroupContext = {
+    name: computed(() => 'grp'),
+    isSelected: (v) => selected.value === v,
+    select,
+    hasError: computed(() => !!over.error),
+    hasSuccess: computed(() => !!over.success),
+    disabled: computed(() => !!over.disabled),
+    readonly: computed(() => !!over.readonly),
+    required: computed(() => !!over.required),
+    describedBy: computed(() => 'grp-describedby'),
+  }
+  return {ctx, select, selected}
+}
+
+const mountInGroup = (props: RadioButtonProps, ctx: RadioGroupContext) =>
+  mount(RadioButtonForTest, {
+    props,
+    global: {provide: {[radioGroupContextKey as symbol]: ctx}},
+  })
+
+describe('MalioRadioButton dans un groupe', () => {
+  it('hérite du name du groupe', () => {
+    const {ctx} = makeGroupCtx()
+    const wrapper = mountInGroup({value: 'a', label: 'A'}, ctx)
+    expect(wrapper.get('input').attributes('name')).toBe('grp')
+  })
+
+  it('coché selon isSelected du groupe', () => {
+    const {ctx} = makeGroupCtx({selected: 'a'})
+    const wrapper = mountInGroup({value: 'a', label: 'A'}, ctx)
+    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('appelle ctx.select au change au lieu d\'émettre', async () => {
+    const {ctx, select} = makeGroupCtx()
+    const wrapper = mountInGroup({value: 'b', label: 'B'}, ctx)
+    await wrapper.get('input').trigger('change')
+    expect(select).toHaveBeenCalledWith('b')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('reflète l\'erreur du groupe et ne rend aucun message propre', () => {
+    const {ctx} = makeGroupCtx({error: true})
+    const wrapper = mountInGroup({value: 'a', label: 'A', hint: 'ignoré'}, ctx)
+    expect(wrapper.get('.radio-control').classes()).toContain('is-error')
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.find('.radio-message').exists()).toBe(false)
+    expect(wrapper.get('input').attributes('aria-describedby')).toBe('grp-describedby')
+  })
+
+  it('hérite de disabled/required du groupe', () => {
+    const {ctx} = makeGroupCtx({disabled: true, required: true})
+    const wrapper = mountInGroup({value: 'a', label: 'A'}, ctx)
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input').attributes('required')).toBeDefined()
+  })
+})

app/components/malio/radio/RadioButton.vue

@@ -1,15 +1,15 @@
 <template>
   <div :class="mergedGroupClass">
     <div :class="mergedControlClass">
-      <label :for="inputId" class="radio-indicator relative flex cursor-pointer items-center p-3">
+      <label :for="inputId" :class="indicatorClass">
         <input
           :id="inputId"
-          :name="name"
+          :name="resolvedName"
           :value="value"
           :checked="isChecked"
-          :required="required"
-          :disabled="disabled"
-          :aria-invalid="!!error"
+          :required="resolvedRequired"
+          :disabled="resolvedDisabled"
+          :aria-invalid="hasError"
           :aria-describedby="describedBy"
           :class="mergedInputClass"
           v-bind="attrs"
@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}<MalioRequiredMark v-if="required" />
+        {{ label }}<MalioRequiredMark v-if="resolvedRequired" />
       </label>
     </div>
 
@@ -44,9 +44,10 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, useAttrs, useId} from 'vue'
+import {computed, inject, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {radioGroupContextKey, type RadioValue} from './context'
 
 defineOptions({name: 'MalioRadioButton', inheritAttrs: false})
 
@@ -55,8 +56,8 @@ const props = withDefaults(
     id?: string
     label?: string
     name?: string
-    modelValue?: string | number | boolean | null | undefined
-    value?: string | number | boolean | null | undefined
+    modelValue?: RadioValue
+    value?: RadioValue
     inputClass?: string
     labelClass?: string
     groupClass?: string
@@ -87,27 +88,45 @@ const props = withDefaults(
 
 const attrs = useAttrs()
 const generatedId = useId()
-const localValue = ref<string | number | boolean | null | undefined>(undefined)
+const localValue = ref<RadioValue>(undefined)
+const group = inject(radioGroupContextKey, null)
 
 const inputId = computed(() => props.id?.toString() || `malio-radio-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
-const isChecked = computed(() =>
-  isControlled.value ? props.modelValue === props.value : localValue.value === props.value,
+
+const resolvedName = computed(() => (group ? group.name.value : props.name))
+const resolvedDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))
+const resolvedReadonly = computed(() => props.readonly || (group?.readonly.value ?? false))
+const resolvedRequired = computed(() => props.required || (group?.required.value ?? false))
+
+const isChecked = computed(() => {
+  if (group) return group.isSelected(props.value)
+  return isControlled.value ? props.modelValue === props.value : localValue.value === props.value
+})
+
+const hasError = computed(() => (group ? group.hasError.value : !!props.error))
+const hasSuccess = computed(() =>
+  group ? group.hasSuccess.value : !!props.success && !hasError.value,
+)
+
+const shouldShowMessage = computed(
+  () => !group && !!(props.hint || hasError.value || hasSuccess.value),
 )
-const hasError = computed(() => !!props.error)
-const hasSuccess = computed(() => !!props.success && !hasError.value)
-const disabled = computed(() => props.disabled)
-const shouldShowMessage = computed(() => !!(props.hint || hasError.value || hasSuccess.value))
 
 const describedBy = computed(() => {
+  if (group) return group.describedBy.value
   if (!shouldShowMessage.value) return undefined
   return `${inputId.value}-describedby`
 })
 
 const mergedGroupClass = computed(() =>
+  twMerge(group ? 'radio-item w-auto' : 'radio-item mt-4 w-full', props.groupClass),
+)
+
+const indicatorClass = computed(() =>
   twMerge(
-    'radio-item mt-4 w-full',
-    props.groupClass,
+    'radio-indicator relative flex cursor-pointer items-center',
+    group ? 'px-3 py-2.5' : 'p-3',
   ),
 )
 
@@ -116,7 +135,7 @@ const mergedControlClass = computed(() =>
     'radio-control flex items-center',
     hasError.value ? 'is-error' : '',
     hasSuccess.value ? 'is-success' : '',
-    disabled.value ? 'is-disabled' : '',
+    resolvedDisabled.value ? 'is-disabled' : '',
   ),
 )
 
@@ -133,7 +152,7 @@ const mergedLabelClass = computed(() =>
     isChecked.value ? 'text-black' : 'text-m-muted',
     hasError.value ? 'text-m-danger' : '',
     hasSuccess.value ? 'text-m-success' : '',
-    disabled.value ? 'cursor-not-allowed text-black/60' : '',
+    resolvedDisabled.value ? 'cursor-not-allowed text-black/60' : '',
     props.labelClass,
   ),
 )
@@ -150,22 +169,27 @@ const mergedMessageClass = computed(() =>
 )
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: string | number | boolean | null | undefined): void
+  (event: 'update:modelValue', value: RadioValue): void
 }>()
 
 const onClick = (event: MouseEvent) => {
-  if (!props.readonly) return
+  if (!resolvedReadonly.value) return
 
   event.preventDefault()
 }
 
 const onChange = (event: Event) => {
-  if (props.readonly) {
+  if (resolvedReadonly.value) {
     const target = event.target as HTMLInputElement
     target.checked = isChecked.value
     return
   }
 
+  if (group) {
+    group.select(props.value)
+    return
+  }
+
   if (!isControlled.value) {
     localValue.value = props.value
   }
@@ -205,8 +229,4 @@ const onChange = (event: Event) => {
   cursor: not-allowed;
   opacity: 0.6;
 }
-
-.radio-item:has(+ .radio-item) .radio-message {
-  display: none;
-}
 </style>

app/components/malio/radio/RadioGroup.test.ts

@@ -0,0 +1,114 @@
+import {describe, expect, it} from 'vitest'
+import {h} from 'vue'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import RadioGroup from './RadioGroup.vue'
+import RadioButton from './RadioButton.vue'
+
+type Opt = {label: string; value: string; disabled?: boolean}
+type RadioGroupProps = {
+  modelValue?: string | number | boolean | null
+  options?: Opt[]
+  label?: string
+  name?: string
+  inline?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  reserveMessageSpace?: boolean
+  groupClass?: string
+  inputClass?: string
+  labelClass?: string
+}
+
+const RadioGroupForTest = RadioGroup as DefineComponent<RadioGroupProps>
+
+const options: Opt[] = [
+  {label: 'Oui', value: 'oui'},
+  {label: 'Non', value: 'non'},
+]
+
+const mountGroup = (props: RadioGroupProps = {}) =>
+  mount(RadioGroupForTest, {props: {options, ...props}})
+
+describe('MalioRadioGroup', () => {
+  it('rend une option par entrée et un seul role=radiogroup', () => {
+    const wrapper = mountGroup()
+    expect(wrapper.findAll('input[type="radio"]')).toHaveLength(2)
+    expect(wrapper.findAll('[role="radiogroup"]')).toHaveLength(1)
+  })
+
+  it('partage le même name natif entre les radios', () => {
+    const wrapper = mountGroup({name: 'prestation'})
+    const names = wrapper.findAll('input').map(i => i.attributes('name'))
+    expect(names).toEqual(['prestation', 'prestation'])
+  })
+
+  it('coche selon modelValue', () => {
+    const wrapper = mountGroup({modelValue: 'non'})
+    const inputs = wrapper.findAll('input')
+    expect((inputs[1].element as HTMLInputElement).checked).toBe(true)
+    expect((inputs[0].element as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('émet update:modelValue au clic sur une option', async () => {
+    const wrapper = mountGroup()
+    await wrapper.findAll('input')[1].trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['non'])
+  })
+
+  it('affiche UN seul message d\'erreur réservant l\'espace', () => {
+    const wrapper = mountGroup({error: 'Sélection requise'})
+    const msgs = wrapper.findAll('[id$="-describedby"]')
+    expect(msgs).toHaveLength(1)
+    expect(msgs[0].text()).toBe('Sélection requise')
+    expect(msgs[0].classes()).toContain('min-h-[1rem]')
+    expect(msgs[0].classes()).toContain('text-m-danger')
+    expect(wrapper.find('.radio-message').exists()).toBe(false)
+  })
+
+  it('propage l\'erreur aux radios enfants', () => {
+    const wrapper = mountGroup({error: 'Sélection requise'})
+    expect(wrapper.findAll('.radio-control.is-error')).toHaveLength(2)
+    expect(wrapper.findAll('input').every(i => i.attributes('aria-invalid') === 'true')).toBe(true)
+  })
+
+  it('reserveMessageSpace=false sans message : aucune ligne réservée', () => {
+    const wrapper = mountGroup({reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('rend la legend et la lie via aria-labelledby', () => {
+    const wrapper = mountGroup({label: 'Prestation'})
+    const legendId = wrapper.find('[id$="-label"]').attributes('id')
+    expect(wrapper.get('[id$="-label"]').text()).toContain('Prestation')
+    expect(wrapper.get('[role="radiogroup"]').attributes('aria-labelledby')).toBe(legendId)
+  })
+
+  it('inline : la zone radios réserve la hauteur d\'un champ (h-12 du select)', () => {
+    const wrapper = mountGroup({inline: true})
+    expect(wrapper.get('[role="radiogroup"]').classes()).toContain('min-h-[3rem]')
+  })
+
+  it('contentClass est fusionné sur la zone des radios', () => {
+    const wrapper = mountGroup({inline: true, contentClass: 'justify-between'})
+    expect(wrapper.get('[role="radiogroup"]').classes()).toContain('justify-between')
+  })
+
+  it('accepte des radios via le slot par défaut', () => {
+    const wrapper = mount(RadioGroupForTest, {
+      props: {modelValue: 'b'},
+      slots: {
+        default: () => [
+          h(RadioButton, {value: 'a', label: 'A'}),
+          h(RadioButton, {value: 'b', label: 'B'}),
+        ],
+      },
+    })
+    expect(wrapper.findAll('input')).toHaveLength(2)
+    expect((wrapper.findAll('input')[1].element as HTMLInputElement).checked).toBe(true)
+  })
+})

app/components/malio/radio/RadioGroup.vue

@@ -0,0 +1,159 @@
+<template>
+  <div :class="mergedGroupClass">
+    <span
+      v-if="label"
+      :id="`${groupId}-label`"
+      :class="mergedLabelClass"
+    >
+      {{ label }}<MalioRequiredMark v-if="required" />
+    </span>
+
+    <div
+      role="radiogroup"
+      :aria-labelledby="label ? `${groupId}-label` : undefined"
+      :aria-invalid="hasError || undefined"
+      :aria-describedby="describedBy"
+      :class="contentZoneClass"
+    >
+      <MalioRadioButton
+        v-for="(option, index) in options"
+        :key="`${groupId}-opt-${index}`"
+        :label="option.label"
+        :value="option.value"
+        :disabled="option.disabled"
+        :input-class="inputClass"
+      />
+      <slot />
+    </div>
+
+    <p
+      v-if="reserveMessageSpace || hint || error || success"
+      :id="`${groupId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, provide, ref, useId} from 'vue'
+import {twMerge} from 'tailwind-merge'
+import MalioRadioButton from './RadioButton.vue'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {radioGroupContextKey, type RadioValue} from './context'
+
+defineOptions({name: 'MalioRadioGroup', inheritAttrs: false})
+
+interface RadioOption {
+  label: string
+  value: RadioValue
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: RadioValue
+    options?: RadioOption[]
+    label?: string
+    name?: string
+    inline?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    required?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    reserveMessageSpace?: boolean
+    groupClass?: string
+    contentClass?: string
+    inputClass?: string
+    labelClass?: string
+  }>(),
+  {
+    modelValue: undefined,
+    options: () => [],
+    label: '',
+    name: '',
+    inline: false,
+    disabled: false,
+    readonly: false,
+    required: false,
+    hint: '',
+    error: '',
+    success: '',
+    reserveMessageSpace: true,
+    groupClass: '',
+    contentClass: '',
+    inputClass: '',
+    labelClass: '',
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: RadioValue): void
+}>()
+
+const generatedId = useId()
+const groupId = computed(() => props.name || `malio-radio-group-${generatedId}`)
+
+const localValue = ref<RadioValue>(undefined)
+const isControlled = computed(() => props.modelValue !== undefined)
+const selectedValue = computed(() =>
+  isControlled.value ? props.modelValue : localValue.value,
+)
+
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const shouldShowMessage = computed(() => !!(props.hint || hasError.value || hasSuccess.value))
+const describedBy = computed(() =>
+  props.reserveMessageSpace || shouldShowMessage.value
+    ? `${groupId.value}-describedby`
+    : undefined,
+)
+
+const select = (value: RadioValue) => {
+  if (props.readonly || props.disabled) return
+  if (!isControlled.value) localValue.value = value
+  emit('update:modelValue', value)
+}
+
+provide(radioGroupContextKey, {
+  name: computed(() => groupId.value),
+  isSelected: (value: RadioValue) => selectedValue.value === value,
+  select,
+  hasError,
+  hasSuccess,
+  disabled: computed(() => props.disabled),
+  readonly: computed(() => props.readonly),
+  required: computed(() => props.required),
+  describedBy,
+})
+
+const contentZoneClass = computed(() =>
+  twMerge(
+    props.inline
+      ? 'flex flex-wrap items-center gap-x-6 min-h-[3rem]'
+      : 'flex flex-col gap-y-1',
+    props.contentClass,
+  ),
+)
+
+const mergedGroupClass = computed(() => twMerge('w-full', props.groupClass))
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'mb-1 block text-sm text-m-text',
+    hasError.value ? 'text-m-danger' : '',
+    props.labelClass,
+  ),
+)
+</script>

app/components/malio/radio/context.ts

@@ -0,0 +1,17 @@
+import type {ComputedRef, InjectionKey} from 'vue'
+
+export type RadioValue = string | number | boolean | null | undefined
+
+export interface RadioGroupContext {
+  name: ComputedRef<string>
+  isSelected: (value: RadioValue) => boolean
+  select: (value: RadioValue) => void
+  hasError: ComputedRef<boolean>
+  hasSuccess: ComputedRef<boolean>
+  disabled: ComputedRef<boolean>
+  readonly: ComputedRef<boolean>
+  required: ComputedRef<boolean>
+  describedBy: ComputedRef<string | undefined>
+}
+
+export const radioGroupContextKey: InjectionKey<RadioGroupContext> = Symbol('MalioRadioGroup')

app/components/malio/sidebar/Sidebar.test.ts

@@ -107,24 +107,19 @@ describe('MalioSidebar', () => {
     expect(links[2].attributes('href')).toBe('/fournisseurs')
   })
 
-  it('hover : fond + couleur + semi-bold portés par le <li>', () => {
+  it('hover : fond + couleur + semi-bold tous portés par le <li> (texte non figé sur le <a>)', () => {
     const wrapper = mountComponent({sections})
     const li = wrapper.find('li')
     expect(li.classes()).toContain('hover:bg-m-primary/10')
     expect(li.classes()).toContain('hover:text-m-primary')
     expect(li.classes()).toContain('hover:font-semibold')
     expect(li.classes()).toContain('text-black')
-  })
-
-  it('zone cliquable : le padding vertical est sur le <a>, pas sur le <li> (pas de bande morte au survol)', () => {
-    const wrapper = mountComponent({sections})
-    // Le padding vertical doit appartenir à la cible de clic (<a>) pour que toute
-    // la bande survolée soit cliquable — sinon pt-1/pb-1 sur le <li> crée une
-    // bande colorée mais non cliquable en haut et en bas du lien.
-    const li = wrapper.find('li')
-    expect(li.classes()).not.toContain('pt-1')
-    expect(li.classes()).not.toContain('pb-1')
-    expect(wrapper.find('a').classes()).toContain('py-1')
+    expect(li.classes()).toContain('pt-1')
+    expect(li.classes()).toContain('pb-1')
+    // Le <a> ne fige PAS sa couleur (sinon le texte resterait noir sur les bandes
+    // pt-1/pb-1 hors du <a> alors que le fond du <li> est bleu).
+    expect(wrapper.find('a').classes()).not.toContain('text-black')
+    expect(wrapper.find('a').classes()).not.toContain('hover:text-m-primary')
   })
 
   it('actif : route exacte → lien en primary + semi-bold, sans fond', () => {
@@ -244,43 +239,6 @@ describe('MalioSidebar', () => {
     expect(wrapper.find('img[alt="M"]').exists()).toBe(true)
   })
 
-  it('renders footer slot when expanded', () => {
-    const wrapper = mountComponent({sections}, {
-      footer: '<a href="/logout">Déconnexion</a>',
-    })
-    expect(wrapper.find('a[href="/logout"]').exists()).toBe(true)
-    expect(wrapper.text()).toContain('Déconnexion')
-  })
-
-  it('renders footer-collapsed slot when collapsed', async () => {
-    const wrapper = mountComponent({sections}, {
-      'footer-collapsed': '<span>FC</span>',
-    })
-    await wrapper.find('button').trigger('click')
-    expect(wrapper.text()).toContain('FC')
-  })
-
-  it('footer is rendered after the nav (pushed to the bottom)', () => {
-    const wrapper = mountComponent({sections}, {
-      footer: '<span class="ft">Footer</span>',
-    })
-    const children = wrapper.find('aside').element.children
-    const navIndex = Array.from(children).findIndex(el => el.tagName === 'NAV')
-    const footerEl = wrapper.find('.ft').element
-    const footerWrapperIndex = Array.from(children).findIndex(el => el.contains(footerEl))
-    expect(footerWrapperIndex).toBeGreaterThan(navIndex)
-  })
-
-  it('does not render a footer container when no footer slot is provided', () => {
-    const wrapper = mountComponent({sections})
-    // Seuls le bloc logo et le <nav> sont des conteneurs (+ le bouton toggle).
-    // Aucun div de footer ne doit apparaître après le <nav>.
-    const children = Array.from(wrapper.find('aside').element.children)
-    const navIndex = children.findIndex(el => el.tagName === 'NAV')
-    const after = children.slice(navIndex + 1)
-    expect(after.some(el => el.tagName === 'DIV')).toBe(false)
-  })
-
   it('uses custom id when provided', () => {
     const wrapper = mountComponent({sections, id: 'my-sidebar'})
     expect(wrapper.find('aside').attributes('id')).toBe('my-sidebar')

app/components/malio/sidebar/Sidebar.vue

@@ -49,14 +49,14 @@
           <li
             v-for="item in section.items"
             :key="item.to"
-            :class="collapsed ? '' : 'text-black hover:bg-m-primary/10 hover:font-semibold hover:text-m-primary'"
+            :class="collapsed ? '' : 'text-black hover:bg-m-primary/10 hover:font-semibold hover:text-m-primary pt-1 pb-1'"
           >
             <NuxtLink
               :to="item.to"
               active-class="!text-m-primary font-semibold"
               :class="twMerge(
                 'block truncate text-[15px] leading-[150%]',
-                collapsed ? 'px-3 text-center' : 'pl-[32px] py-1',
+                collapsed ? 'px-3 text-center' : 'pl-[32px]',
                 isActive(item) ? '!text-m-primary font-semibold' : '',
               )"
             >
@@ -67,20 +67,6 @@
       </div>
     </nav>
 
-    <div
-      v-if="$slots.footer || $slots['footer-collapsed']"
-      :class="['px-[20px] py-[14px]', collapsed ? '' : 'mx-[10px] border-t-2 border-m-primary']"
-    >
-      <slot
-        v-if="collapsed"
-        name="footer-collapsed"
-      />
-      <slot
-        v-else
-        name="footer"
-      />
-    </div>
-
     <button
       type="button"
       :aria-label="collapsed ? 'Déplier le menu' : 'Plier le menu'"

app/story/radio/RadioGroup.story.vue

@@ -0,0 +1,59 @@
+<template>
+  <Story title="Input/RadioGroup">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Empilé</h2>
+        <MalioRadioGroup v-model="stacked" :options="options" label="Catégorie" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">En ligne</h2>
+        <MalioRadioGroup v-model="inline" :options="yesNo" inline label="Prestation" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioRadioGroup v-model="errored" :options="yesNo" inline error="Sélection requise" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioRadioGroup v-model="ok" :options="yesNo" inline success="Enregistré" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioRadioGroup v-model="disabled" :options="options" disabled label="Catégorie" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Requis + slot</h2>
+        <MalioRadioGroup v-model="slotted" required label="Civilité" inline>
+          <MalioRadioButton value="M" label="Monsieur" />
+          <MalioRadioButton value="Mme" label="Madame" />
+        </MalioRadioGroup>
+      </div>
+    </div>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {label: 'Catégorie 1', value: 'cat1'},
+  {label: 'Catégorie 2', value: 'cat2'},
+  {label: 'Catégorie 3', value: 'cat3'},
+]
+const yesNo = [
+  {label: 'Oui', value: 'oui'},
+  {label: 'Non', value: 'non'},
+]
+
+const stacked = ref<string | null>(null)
+const inline = ref<string | null>('oui')
+const errored = ref<string | null>(null)
+const ok = ref<string | null>('oui')
+const disabled = ref<string | null>('cat2')
+const slotted = ref<string | null>(null)
+</script>

app/story/sidebar/sidebarMenu.story.vue

@@ -43,37 +43,6 @@
         </div>
       </div>
     </Variant>
-
-    <Variant title="Avec footer (collé en bas)">
-      <div class="flex h-[600px] border rounded-lg overflow-hidden">
-        <MalioSidebar
-          v-model="collapsed3"
-          :sections="sectionsLong"
-        >
-          <template #logo>
-            <span class="text-2xl font-bold text-m-primary">Malio</span>
-          </template>
-          <template #logo-collapsed>
-            <span class="text-2xl font-bold text-m-primary">M</span>
-          </template>
-          <template #footer>
-            <div class="leading-tight">
-              <p class="text-[14px] font-semibold text-m-text">Tristan</p>
-              <p class="text-[12px] text-m-muted">Administrateur</p>
-            </div>
-          </template>
-          <template #footer-collapsed>
-            <span class="block text-center text-[14px] font-bold text-m-primary">T</span>
-          </template>
-        </MalioSidebar>
-
-        <div class="flex-1 p-6 bg-white">
-          <p class="text-m-muted">
-            Le footer reste collé en bas même quand la nav scrolle.
-          </p>
-        </div>
-      </div>
-    </Variant>
   </Story>
 </template>
 
@@ -125,15 +94,6 @@ entre les deux états.
 
 - Contenu affiché en haut quand la sidebar est pliée.
 
-### footer
-
-- Contenu affiché en bas quand la sidebar est dépliée (profil, déconnexion, version…).
-- Toujours collé en bas : la nav occupe l'espace restant (`flex-1`) et pousse le footer.
-
-### footer-collapsed
-
-- Contenu affiché en bas quand la sidebar est pliée.
-
 ------------------------------------------------------------------------
 
 ## Comportement
@@ -167,7 +127,6 @@ import MalioSidebar from '../../components/malio/sidebar/Sidebar.vue'
 
 const collapsed1 = ref(false)
 const collapsed2 = ref(false)
-const collapsed3 = ref(false)
 
 const sectionsShort = [
   {

docs/superpowers/specs/2026-06-24-radio-group-design.md

@@ -0,0 +1,170 @@
+# MalioRadioGroup — conception
+
+## Problème
+
+`RadioButton.vue` porte le message (`error`/`success`/`hint`) sur **chaque** radio et
+masque tous les messages sauf le dernier via un hack CSS
+(`.radio-item:has(+ .radio-item) .radio-message { display: none }`). Conséquences :
+
+- impossible d'aligner un groupe de radios sur un `MalioSelect` (cercles centrés sur la
+  box, message sur la même ligne que le message du select) ;
+- pas de `reserveMessageSpace` alors que c'est la convention de tous les autres champs
+  (Select, Input*, Date, Time, Checkbox) ;
+- l'affichage « un seul message » est un effet de bord CSS fragile.
+
+Toutes les libs matures (MUI `RadioGroup`/`FormHelperText`, Vuetify `v-radio-group`,
+Element Plus `el-radio-group`, Ant Design `Radio.Group`) résolvent ça avec un **parent
+de groupe** qui possède la valeur, le `name` partagé et l'unique message. Le codebase a
+déjà ce précédent : `Accordion` + `AccordionItem` via `provide/inject` et un
+`context.ts`.
+
+## Décisions
+
+1. **Nouveau composant parent `MalioRadioGroup`** (les `RadioButton` deviennent des
+   inputs simples). `RadioButton` reste utilisable seul.
+2. **API enfants** : prop `:options` (principal, cohérent avec `MalioSelect`) **+ slot
+   par défaut** en repli (cas custom).
+3. **Label de groupe** : prop `label` **optionnelle**, rendue au-dessus en `<legend>`
+   (accessibilité). Omise → le groupe s'aligne directement avec un select.
+
+## Architecture
+
+Calquée sur `Accordion`/`AccordionItem`.
+
+### `app/components/malio/radio/context.ts` (nouveau)
+
+```ts
+import type {InjectionKey} from 'vue'
+
+export type RadioValue = string | number | boolean | null | undefined
+
+export interface RadioGroupContext {
+  name: ComputedRef<string>
+  selectedValue: ComputedRef<RadioValue>
+  isSelected: (value: RadioValue) => boolean
+  select: (value: RadioValue) => void
+  hasError: ComputedRef<boolean>
+  hasSuccess: ComputedRef<boolean>
+  disabled: ComputedRef<boolean>
+  readonly: ComputedRef<boolean>
+  required: ComputedRef<boolean>
+  describedBy: ComputedRef<string | undefined>
+}
+
+export const radioGroupContextKey: InjectionKey<RadioGroupContext> =
+  Symbol('MalioRadioGroup')
+```
+
+### `app/components/malio/radio/RadioGroup.vue` (nouveau)
+
+`defineOptions({name: 'MalioRadioGroup', inheritAttrs: false})`.
+
+**Props**
+
+| prop | type | défaut | rôle |
+|------|------|--------|------|
+| `modelValue` | `RadioValue` | `undefined` | valeur sélectionnée (contrôlé/non-contrôlé) |
+| `options` | `{label, value, disabled?}[]` | `[]` | radios déclaratifs |
+| `label` | `string` | `''` | legend optionnelle au-dessus |
+| `name` | `string` | auto (`useId`) | `name` partagé des inputs |
+| `inline` | `boolean` | `false` | orientation horizontale |
+| `disabled` / `readonly` / `required` | `boolean` | `false` | propagés au groupe |
+| `hint` / `error` / `success` | `string` | `''` | message unique |
+| `reserveMessageSpace` | `boolean` | `true` | réserve `min-h-[1rem]` (comme Select) |
+| `groupClass` / `inputClass` / `labelClass` | `string` | `''` | overrides `twMerge` |
+
+**Rendu**
+
+```html
+<div :class="mergedGroupClass">
+  <span v-if="label" :id="`${groupId}-label`" :class="mergedLabelClass">
+    {{ label }}<MalioRequiredMark v-if="required" />
+  </span>
+
+  <div
+    role="radiogroup"
+    :aria-labelledby="label ? `${groupId}-label` : undefined"
+    :aria-invalid="hasError || undefined"
+    :aria-describedby="describedBy"
+    :class="contentClass"
+  >
+    <!-- options -->
+    <MalioRadioButton
+      v-for="opt in options" :key="..."
+      :label="opt.label" :value="opt.value" :disabled="opt.disabled"
+    />
+    <!-- ou slot custom -->
+    <slot />
+  </div>
+
+  <p
+    v-if="reserveMessageSpace || hasError || hasSuccess || hint"
+    :id="`${groupId}-describedby`"
+    :class="messageClass"  <!-- identique au Select : 'mt-1 ml-[2px] text-xs' (+min-h-[1rem]) -->
+  >
+    {{ error || success || hint }}
+  </p>
+</div>
+```
+
+- `contentClass` : `inline` → `flex flex-wrap items-center gap-x-6 min-h-10` ;
+  empilé → `flex flex-col`. Le `min-h-10` fait coïncider la rangée de radios avec la box
+  d'un `MalioSelect` (h-10), donc les cercles se centrent sur la box du select.
+- `messageClass` reprend **exactement** le markup du message de `Select.vue`
+  (`mt-1 ml-[2px] text-xs`, couleur `text-m-danger`/`text-m-success`/`text-m-muted`,
+  `min-h-[1rem]` si `reserveMessageSpace`) → alignement automatique avec le message du
+  select voisin.
+- `v-model` géré ici : `select(value)` émet `update:modelValue` (et tient `localValue`
+  en non-contrôlé).
+- `provide(radioGroupContextKey, …)`.
+
+### `app/components/malio/radio/RadioButton.vue` (modifié)
+
+- `const group = inject(radioGroupContextKey, null)`.
+- **Dans un groupe** :
+  - `name` = `group.name` ; `isChecked` = `group.isSelected(value)` ;
+  - styling erreur/succès (cercles rouges/verts) piloté par `group.hasError`/`hasSuccess` ;
+  - `disabled`/`readonly`/`required` = groupe **OU** prop locale ;
+  - au `change` → `group.select(value)` (au lieu d'`emit('update:modelValue')`) ;
+  - **n'affiche aucun message** (`shouldShowMessage = false`) ;
+  - `aria-describedby` = `group.describedBy`.
+- **Hors groupe** : comportement actuel inchangé.
+- **Supprimer** le CSS `.radio-item:has(+ .radio-item) .radio-message { display: none }`
+  (remplacé par le vrai groupe).
+
+## Usage cible (remplace le hack du formulaire client)
+
+```html
+<MalioRadioGroup
+  v-model="prestationChoice"
+  :options="prestationOptions"
+  inline
+  error="Sélection requise"
+/>
+```
+
+Les cercles s'alignent sur la box du `MalioSelect` voisin et le message sur le message
+du select, sans réglage manuel.
+
+## Tests
+
+- `RadioGroup.test.ts` (nouveau) : rendu options + slot, `v-model` (contrôlé/non),
+  message unique, `reserveMessageSpace`, état erreur propagé aux enfants (`aria-invalid`,
+  classe `is-error`), `inline`, `disabled`/`readonly`/`required`, a11y
+  (`role=radiogroup`, `aria-labelledby`, `aria-describedby`).
+- `RadioButton.test.ts` : ajuster — vérifier le mode groupé (inject) et conserver le
+  mode standalone. Retirer le test du hack CSS s'il existe.
+
+## Documentation & playground
+
+- `app/story/radio/RadioGroup.story.vue` (Histoire).
+- Page playground : variantes du groupe + entrée nav (`playground.nav.ts`).
+- Revert `client.vue` vers `MalioRadioGroup` (retirer `<style scoped>` et le `<p>`
+  manuel).
+- Mise à jour manuelle de `COMPONENTS.md` + `CHANGELOG.md`.
+
+## Hors périmètre (YAGNI)
+
+- Pas de groupe de checkbox (séparé).
+- Pas de validation/form-state global.
+- Pas de layout en grille interne au groupe (inline / empilé suffisent).