feat(select) : tags SelectCheckbox restylés + props maxTags et color (MUI-49)

- Style des tags : fond m-bg, sans bordure, texte 18px/500
- Fix du rognage des jambages (g) sans agrandir le tag
- Prop maxTags : limite le nombre de tags affichés + badge "+N"
- Champ color par option : couleur de fond du tag (sinon m-bg)
- Tests, COMPONENTS.md et CHANGELOG.md mis à jour

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

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

@@ -6,6 +6,7 @@ import SelectCheckbox from './SelectCheckbox.vue'
 type Option = {
   label: string
   value: string | number
+  color?: string
 }
 
 type SelectCheckboxProps = {
@@ -21,6 +22,7 @@ type SelectCheckboxProps = {
   textLabel?: string
   rounded?: string
   displayTag?: boolean
+  maxTags?: number
   displaySelectAll?: boolean
   selectAllLabel?: string
   disabled?: boolean
@@ -380,4 +382,63 @@ describe('MalioSelectCheckbox', () => {
     expect(msg.exists()).toBe(true)
     expect(msg.classes()).not.toContain('min-h-[1rem]')
   })
+
+  it('affiche tous les tags par défaut (maxTags non fourni)', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'be', 'ca'], options, displayTag: true},
+    })
+
+    expect(wrapper.find('[data-test="tags-overflow"]').exists()).toBe(false)
+    expect(wrapper.text()).toContain('France')
+    expect(wrapper.text()).toContain('Belgique')
+    expect(wrapper.text()).toContain('Canada')
+  })
+
+  it('limite le nombre de tags affichés et ajoute un badge +N', () => {
+    const manyOptions: Option[] = [
+      {label: 'France', value: 'fr'},
+      {label: 'Belgique', value: 'be'},
+      {label: 'Canada', value: 'ca'},
+      {label: 'Suisse', value: 'ch'},
+      {label: 'Allemagne', value: 'de'},
+    ]
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'be', 'ca', 'ch', 'de'], options: manyOptions, displayTag: true, maxTags: 3},
+    })
+
+    expect(wrapper.text()).toContain('France')
+    expect(wrapper.text()).toContain('Belgique')
+    expect(wrapper.text()).toContain('Canada')
+    expect(wrapper.text()).not.toContain('Suisse')
+    expect(wrapper.text()).not.toContain('Allemagne')
+    expect(wrapper.get('[data-test="tags-overflow"]').text()).toBe('+2')
+  })
+
+  it('n’affiche pas de badge +N quand le nombre de tags est sous la limite', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'be'], options, displayTag: true, maxTags: 3},
+    })
+
+    expect(wrapper.find('[data-test="tags-overflow"]').exists()).toBe(false)
+  })
+
+  it('applique la couleur de fond fournie par l’option', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options: [{label: 'France', value: 'fr', color: '#fde2e2'}], displayTag: true},
+    })
+
+    const tag = wrapper.findAll('span.inline-flex')[0]
+    expect(tag.attributes('style')).toContain('background-color')
+    expect(tag.classes()).not.toContain('bg-m-bg')
+  })
+
+  it('utilise bg-m-bg quand l’option n’a pas de couleur', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options, displayTag: true},
+    })
+
+    const tag = wrapper.findAll('span.inline-flex')[0]
+    expect(tag.classes()).toContain('bg-m-bg')
+    expect(tag.attributes('style')).toBeFalsy()
+  })
 })