feat(ui) : état readonly visuel sur Select et SelectCheckbox

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

app/components/malio/select/Select.test.ts

@@ -21,6 +21,7 @@ type SelectProps = {
   textLabel?: string
   rounded?: string
   disabled?: boolean
+  readonly?: boolean
   required?: boolean
 }
 
@@ -306,4 +307,49 @@ describe('MalioSelect', () => {
     expect(buttonClasses).not.toContain('!border-b-0')
     expect(buttonClasses).toContain('!border-b-transparent')
   })
+
+  it('readonly : bordure noire même sans sélection, pas de grow/bleu', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Champ', readonly: true, options: [{label: 'A', value: 'a'}]},
+    })
+    const trigger = wrapper.get('button')
+    expect(trigger.classes()).toContain('border-black')
+    expect(trigger.classes()).not.toContain('border-m-muted')
+    expect(trigger.classes()).not.toContain('grow-height')
+    expect(trigger.classes()).not.toContain('focus-visible:border-m-primary')
+  })
+
+  it('readonly vide : label gris, pas de bleu', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Champ', readonly: true, options: [{label: 'A', value: 'a'}]},
+    })
+    const label = wrapper.get('label')
+    expect(label.classes()).not.toContain('text-m-primary')
+    expect(label.classes()).toContain('text-m-muted')
+  })
+
+  it('readonly sélectionné : label noir + chevron noir', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {label: 'Champ', readonly: true, modelValue: 'a', options: [{label: 'A', value: 'a'}]},
+    })
+    expect(wrapper.get('label').classes()).toContain('text-black')
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
+  })
+
+  it('readonly empêche l’ouverture du dropdown', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Champ', readonly: true, options: [{label: 'A', value: 'a'}]},
+    })
+    await wrapper.get('button').trigger('click')
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('readonly expose aria-readonly et reste focusable (pas disabled)', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Champ', readonly: true, options},
+    })
+    const trigger = wrapper.get('button')
+    expect(trigger.attributes('aria-readonly')).toBe('true')
+    expect(trigger.attributes('disabled')).toBeUndefined()
+  })
 })