fix: readonly component style + TabList + required component (#61)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #61
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/time/TimePicker.test.ts

@@ -19,6 +19,7 @@ type TimePickerProps = {
   inputClass?: string
   labelClass?: string
   groupClass?: string
+  reserveMessageSpace?: boolean
 }
 
 const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
@@ -52,6 +53,12 @@ describe('MalioTimePicker', () => {
     expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
   })
 
+  it('n\'ouvre pas le popover si readonly', async () => {
+    const wrapper = mountPicker({readonly: true})
+    await wrapper.get('[data-test="time-field"]').trigger('click')
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+
   it('émet la valeur réglée depuis les molettes', async () => {
     const wrapper = mountPicker({modelValue: '09:30'})
     await wrapper.get('[data-test="time-field"]').trigger('click')
@@ -73,4 +80,64 @@ describe('MalioTimePicker', () => {
     expect(input.attributes('aria-describedby')).toBeTruthy()
     expect(wrapper.text()).toContain('Heure requise')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountPicker({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountPicker({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('readonly vide : bordure noire sans bleu', () => {
+    const wrapper = mountPicker({readonly: true})
+    const input = wrapper.get('[data-test="time-field"]')
+    expect(input.classes()).toContain('border-black')
+    expect(input.classes()).not.toContain('border-m-muted')
+    expect(input.classes()).not.toContain('focus:border-m-primary')
+  })
+
+  it('readonly vide : label muted sans bleu', () => {
+    const wrapper = mountPicker({readonly: true, label: 'Heure'})
+    const label = wrapper.get('label')
+    expect(label.classes()).toContain('text-m-muted')
+    expect(label.classes()).not.toContain('text-m-primary')
+  })
+
+  it('readonly vide : icône horloge en text-m-muted', () => {
+    const wrapper = mountPicker({readonly: true, label: 'Heure'})
+    expect(wrapper.get('[data-test="clock-icon"]').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label et icône en noir, bordure noire', () => {
+    const wrapper = mountPicker({readonly: true, label: 'Heure', modelValue: '14:30'})
+    const input = wrapper.get('[data-test="time-field"]')
+    const label = wrapper.get('label')
+    const icon = wrapper.get('[data-test="clock-icon"]')
+    expect(input.classes()).toContain('border-black')
+    expect(input.classes()).not.toContain('focus:border-m-primary')
+    expect(label.classes()).toContain('text-black')
+    expect(icon.classes()).toContain('text-black')
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountPicker({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountPicker({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountPicker({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })