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.vue

@@ -89,13 +89,25 @@
         :class="[label ? 'pt-1' : '']"
       >
         <span
-          v-for="option in selectedOptions"
+          v-for="option in visibleTags"
           :key="String(option.value)"
-          class="inline-flex max-w-full items-center rounded-md border px-2 text-sm leading-none"
-          :class="disabled ? 'border-black/40 text-black/60' : 'border-black text-black'"
+          class="inline-flex max-w-full items-center rounded-md px-2 pt-[2px] pb-0 text-lg font-medium leading-[normal]"
+          :class="[
+            option.color ? '' : 'bg-m-bg',
+            disabled ? 'text-black/60' : 'text-black',
+          ]"
+          :style="option.color ? { backgroundColor: option.color } : undefined"
         >
           <span class="truncate pb-[2px]">{{ option.label }}</span>
         </span>
+        <span
+          v-if="hiddenTagsCount > 0"
+          data-test="tags-overflow"
+          class="inline-flex items-center rounded-md bg-m-bg px-2 pt-[2px] pb-0 text-lg font-medium leading-[normal]"
+          :class="disabled ? 'text-black/60' : 'text-black'"
+        >
+          <span class="pb-[2px]">+{{ hiddenTagsCount }}</span>
+        </span>
       </div>
 
       <span
@@ -269,7 +281,8 @@ const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRin
 
 type Option = {
   label: string;
-  value: string | number
+  value: string | number;
+  color?: string
 }
 const props = withDefaults(defineProps<{
   modelValue?: Array<string | number>
@@ -284,6 +297,7 @@ const props = withDefaults(defineProps<{
   textLabel?: string
   rounded?: string
   displayTag?: boolean
+  maxTags?: number
   displaySelectAll?: boolean
   selectAllLabel?: string
   disabled?: boolean
@@ -305,6 +319,7 @@ const props = withDefaults(defineProps<{
   textLabel: 'text-sm',
   rounded: 'rounded-md',
   displayTag: false,
+  maxTags: 0,
   displaySelectAll: false,
   selectAllLabel: 'Tout sélectionner',
   disabled: false,
@@ -347,6 +362,12 @@ const selectedOptions = computed(() =>
 const displayTags = computed(() =>
   props.displayTag && selectedOptions.value.length > 0,
 )
+const visibleTags = computed(() =>
+  props.maxTags > 0 ? selectedOptions.value.slice(0, props.maxTags) : selectedOptions.value,
+)
+const hiddenTagsCount = computed(() =>
+  props.maxTags > 0 ? Math.max(selectedOptions.value.length - props.maxTags, 0) : 0,
+)
 const shouldFloatLabel = computed(() =>
   isReadonly.value ? isOptionSelected.value : (isOpen.value || displayTags.value)
 )