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

## MUI-49 — Revoir le style des tags dans le multi-select

### Style des tags
- Fond `m-bg`, **sans bordure**, padding `2px / 8px`
- Texte **18px / weight 500 / line-height normal**
- Correction du rognage des jambages (`g` de « Belgique ») sans agrandir le tag

### Nouvelles props
- `maxTags` (`number`, défaut `0`) : limite le nombre de tags affichés ; au-delà un tag **`+N`** résume le surplus. `0` = tous les tags.
- Champ `color?` par option : couleur de fond du tag (sinon `m-bg`).

### Divers
- 5 nouveaux tests (maxTags, badge +N, color, fallback m-bg)
- Playground : exemples « max tags (3) » et « couleurs »
- `COMPONENTS.md` et `CHANGELOG.md` mis à jour

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #89
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

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()
+  })
 })