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/date/Date.test.ts

@@ -21,6 +21,7 @@ type DateProps = {
   inputClass?: string
   labelClass?: string
   groupClass?: string
+  reserveMessageSpace?: boolean
 }
 
 const DateForTest = Date_ as DefineComponent<DateProps>
@@ -40,6 +41,16 @@ describe('MalioDate', () => {
       expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
     })
 
+    it('affiche l\'astérisque quand required est vrai', () => {
+      const wrapper = mountDate({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 = mountDate({label: 'Champ'})
+      expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+    })
+
     it('displays the formatted value in the field', () => {
       const wrapper = mountDate({modelValue: '2026-05-19'})
       const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
@@ -175,6 +186,37 @@ describe('MalioDate', () => {
       await wrapper.get('[data-test="date-input"]').trigger('click')
       expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
     })
+
+    it('readonly vide : bordure noire sans bleu', () => {
+      const wrapper = mountDate({readonly: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      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 = mountDate({readonly: true, label: 'Date'})
+      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 calendrier en text-m-muted', () => {
+      const wrapper = mountDate({readonly: true, label: 'Date'})
+      expect(wrapper.get('[data-test="calendar-icon"]').classes()).toContain('text-m-muted')
+    })
+
+    it('readonly rempli : label et icône en noir, bordure noire', () => {
+      const wrapper = mountDate({readonly: true, label: 'Date', modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]')
+      const label = wrapper.get('label')
+      const icon = wrapper.get('[data-test="calendar-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')
+    })
   })
 
   describe('accessibilité', () => {
@@ -195,4 +237,25 @@ describe('MalioDate', () => {
       expect(input.value).toBe('25/12/2026')
     })
   })
+
+  describe('reserveMessageSpace', () => {
+    it('réserve l’espace message par défaut même sans message', () => {
+      const wrapper = mountDate({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 = mountDate({label: 'Champ', reserveMessageSpace: false})
+      expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+    })
+
+    it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+      const wrapper = mountDate({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]')
+    })
+  })
 })