fix: component style (#80)

| 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: admin malio <malio@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #80
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.playground/pages/composant/divers/disabled.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="space-y-6 p-4">
+    <h1 class="text-2xl font-bold">Champs désactivés (disabled)</h1>
+    <p class="text-sm text-m-muted">
+      Tous les champs de formulaire dans leur état <code>disabled</code>, vides puis remplis.
+      Règles : texte + label grisés, <code>cursor-not-allowed</code>, et <strong>aucune affordance
+      interactive</strong> (pas de bouton « + », pas de croix « x », pas de chevron, pas d'œil ;
+      tags et valeurs grisés).
+    </p>
+
+    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputText</h2>
+        <div class="space-y-4">
+          <MalioInputText
+            label="Référence (vide)"
+            :disabled="true"
+          />
+          <MalioInputText
+            model-value="Commande #A-2048"
+            label="Référence (rempli)"
+            icon-name="mdi:lock-outline"
+            icon-size="20"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputEmail (addable → pas de « + »)</h2>
+        <div class="space-y-4">
+          <MalioInputEmail
+            label="Adresse email (vide)"
+            :addable="true"
+            :disabled="true"
+          />
+          <MalioInputEmail
+            model-value="contact@malio.fr"
+            label="Adresse email (rempli)"
+            :addable="true"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputPhone (addable → pas de « + »)</h2>
+        <div class="space-y-4">
+          <MalioInputPhone
+            label="Téléphone (vide)"
+            :addable="true"
+            :disabled="true"
+          />
+          <MalioInputPhone
+            model-value="+33 6 12 34 56 78"
+            label="Téléphone (rempli)"
+            :addable="true"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputPassword (pas d'œil)</h2>
+        <div class="space-y-4">
+          <MalioInputPassword
+            label="Mot de passe (vide)"
+            :disabled="true"
+          />
+          <MalioInputPassword
+            model-value="motdepasse123"
+            label="Mot de passe (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputAmount</h2>
+        <div class="space-y-4">
+          <MalioInputAmount
+            label="Montant (vide)"
+            :disabled="true"
+          />
+          <MalioInputAmount
+            model-value="1250.00"
+            label="Montant (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputNumber</h2>
+        <div class="space-y-4">
+          <MalioInputNumber
+            label="Quantité (vide)"
+            :disabled="true"
+          />
+          <MalioInputNumber
+            model-value="42"
+            label="Quantité (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputTextArea</h2>
+        <div class="space-y-4">
+          <MalioInputTextArea
+            label="Description (vide)"
+            :size="3"
+            :disabled="true"
+          />
+          <MalioInputTextArea
+            model-value="Ce texte est désactivé et ne peut pas être modifié."
+            label="Description (rempli)"
+            :size="3"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputUpload (pas de croix)</h2>
+        <div class="space-y-4">
+          <MalioInputUpload
+            label="Fichier (vide)"
+            :disabled="true"
+          />
+          <MalioInputUpload
+            model-value="document.pdf"
+            label="Fichier (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputAutocomplete (pas de chevron)</h2>
+        <div class="space-y-4">
+          <MalioInputAutocomplete
+            label="Pays (vide)"
+            :options="countryOptions"
+            :disabled="true"
+          />
+          <MalioInputAutocomplete
+            model-value="de"
+            label="Pays (rempli)"
+            :options="countryOptions"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioSelect (pas de chevron)</h2>
+        <div class="space-y-4">
+          <MalioSelect
+            label="Catégorie (vide)"
+            :options="categoryOptions"
+            empty-option-label="Aucune sélection"
+            :disabled="true"
+          />
+          <MalioSelect
+            :model-value="'a'"
+            label="Catégorie (rempli)"
+            :options="categoryOptions"
+            empty-option-label="Aucune sélection"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioSelectCheckbox — version tags (grisés)</h2>
+        <div class="space-y-4">
+          <MalioSelectCheckbox
+            label="Catégories (vide)"
+            :options="categoryOptions"
+            :display-tag="true"
+            :disabled="true"
+          />
+          <MalioSelectCheckbox
+            :model-value="['a', 'b', 'c']"
+            label="Catégories (rempli)"
+            :options="categoryOptions"
+            :display-tag="true"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDate (pas de croix)</h2>
+        <div class="space-y-4">
+          <MalioDate
+            label="Date de naissance (vide)"
+            :disabled="true"
+          />
+          <MalioDate
+            model-value="2026-06-15"
+            label="Date de naissance (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDateTime</h2>
+        <div class="space-y-4">
+          <MalioDateTime
+            label="Date et heure (vide)"
+            :disabled="true"
+          />
+          <MalioDateTime
+            model-value="2026-12-25T09:30:00"
+            label="Date et heure (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDateRange</h2>
+        <div class="space-y-4">
+          <MalioDateRange
+            label="Période (vide)"
+            :disabled="true"
+          />
+          <MalioDateRange
+            :model-value="rangeValue"
+            label="Période (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDateWeek</h2>
+        <div class="space-y-4">
+          <MalioDateWeek
+            label="Semaine (vide)"
+            :disabled="true"
+          />
+          <MalioDateWeek
+            model-value="2026-W52"
+            label="Semaine (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioTimePicker (pas de croix)</h2>
+        <div class="space-y-4">
+          <MalioTimePicker
+            label="Heure (vide)"
+            :disabled="true"
+          />
+          <MalioTimePicker
+            model-value="14:30"
+            label="Heure (rempli)"
+            :disabled="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+type Option = {label: string; value: string | number}
+
+const countryOptions: Option[] = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Luxembourg', value: 'lu'},
+  {label: 'Allemagne', value: 'de'},
+]
+
+const categoryOptions: Option[] = [
+  {label: 'Catégorie A', value: 'a'},
+  {label: 'Catégorie B', value: 'b'},
+  {label: 'Catégorie C', value: 'c'},
+]
+
+const rangeValue = ref<{start: string; end: string}>({start: '2026-12-20', end: '2026-12-31'})
+</script>

.playground/pages/composant/tab/tabList.vue

@@ -1,5 +1,65 @@
 <template>
   <div class="grid grid-cols-1 items-start gap-6">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-1 text-xl font-bold">Bac à sable (tous les cas)</h2>
+      <p class="mb-4 text-sm text-m-muted">
+        Règle les paramètres puis <strong>redimensionne le cadre en pointillés</strong>
+        (poignée en bas à droite) pour voir le nombre d'onglets s'adapter et les flèches apparaître.
+      </p>
+
+      <div class="mb-4 flex flex-wrap items-end gap-4 text-sm">
+        <label class="flex flex-col gap-1">Nb onglets : {{ sbCount }}
+          <input
+            v-model.number="sbCount"
+            type="range"
+            min="1"
+            max="15"
+            class="w-40"
+          >
+        </label>
+        <label class="flex flex-col gap-1">maxVisibleTabs (0 = auto)
+          <input
+            v-model.number="sbMax"
+            type="number"
+            min="0"
+            max="15"
+            class="w-20 rounded border px-2 py-1"
+          >
+        </label>
+        <label class="flex items-center gap-2">
+          <input
+            v-model="sbIcons"
+            type="checkbox"
+          > Icônes
+        </label>
+        <label class="flex items-center gap-2">
+          <input
+            v-model="sbLong"
+            type="checkbox"
+          > Labels longs
+        </label>
+      </div>
+
+      <div
+        class="resize-x overflow-hidden rounded border-2 border-dashed border-m-muted p-3"
+        style="width: 100%; min-width: 280px;"
+      >
+        <MalioTabList
+          v-model="sbValue"
+          :tabs="sbTabs"
+          :max-visible-tabs="sbMaxProp"
+        >
+          <template
+            v-for="t in sbTabs"
+            #[t.key]
+            :key="t.key"
+          >
+            <p class="p-4">Contenu : {{ t.label }}</p>
+          </template>
+        </MalioTabList>
+      </div>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Simple</h2>
       <MalioTabList v-model="simpleValue" :tabs="tabs">
@@ -70,7 +130,35 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+
+// --- Bac à sable interactif ---
+const sbCount = ref(9)
+const sbMax = ref(0)
+const sbIcons = ref(true)
+const sbLong = ref(false)
+
+const SB_LABELS = [
+  'Informations', 'Adresses', 'Contacts', 'Comptabilité', 'Documents',
+  'Historique', 'Paramètres', 'Qualité', 'Facturation', 'Accueil',
+  'Notifications', 'Statistiques', 'Équipe', 'Sécurité', 'Étiquettes',
+]
+const SB_ICONS = [
+  'mdi:information-outline', 'mdi:map-marker-outline', 'mdi:account-box-outline', 'mdi:web',
+  'mdi:file-document-outline', 'mdi:history', 'mdi:cog-outline', 'mdi:check-decagram-outline',
+  'mdi:receipt-text-outline', 'mdi:home', 'mdi:bell-outline', 'mdi:chart-bar',
+  'mdi:account-group-outline', 'mdi:lock-outline', 'mdi:tag-outline',
+]
+
+const sbTabs = computed(() =>
+  Array.from({ length: sbCount.value }, (_, i) => ({
+    key: `sb${i}`,
+    label: sbLong.value ? `${SB_LABELS[i % SB_LABELS.length]} détaillé` : SB_LABELS[i % SB_LABELS.length],
+    icon: sbIcons.value ? SB_ICONS[i % SB_ICONS.length] : undefined,
+  })),
+)
+const sbMaxProp = computed(() => (sbMax.value > 0 ? sbMax.value : undefined))
+const sbValue = ref('sb0')
 
 const tabs = [
   { key: 'qualimat', label: 'Qualimat', icon: 'mdi:certificate-outline' },

.playground/playground.nav.ts

@@ -70,6 +70,7 @@ export const navSections: SidebarSection[] = [
     icon: 'mdi:dots-horizontal',
     items: [
       {label: 'Champs readonly', to: '/composant/divers/readonly'},
+      {label: 'Champs disabled', to: '/composant/divers/disabled'},
       {label: 'Heure', to: '/composant/time/time'},
       {label: 'Sélecteur de site', to: '/composant/site/siteSelector'},
       {label: 'Formulaire client', to: '/composant/form/client'},