docs(datatable) : pagination compacte avec saut de page

# Conflicts:
#	CHANGELOG.md
#	app/components/malio/datatable/DataTable.vue

.playground/pages/composant/datatable/datatable.vue

@@ -47,6 +47,20 @@ const paginatedItems = computed(() => {
 function onRowClick(item: Record<string, unknown>) {
   alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
 }
+
+const bigPage = ref(1)
+const bigPerPage = ref(10)
+const bigItems = Array.from({ length: 310 }, (_, i) => ({
+  id: i + 1,
+  nom: `Nom ${i + 1}`,
+  prenom: `Prénom ${i + 1}`,
+  ville: ['Paris', 'Lyon', 'Marseille'][i % 3],
+  montant: 500 + i * 7,
+}))
+const bigPaginated = computed(() => {
+  const start = (bigPage.value - 1) * bigPerPage.value
+  return bigItems.slice(start, start + bigPerPage.value)
+})
 </script>
 
 <template>
@@ -88,5 +102,21 @@ function onRowClick(item: Record<string, unknown>) {
         </template>
       </MalioDataTable>
     </div>
+
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">Gros volume (31 pages) — saut de page</h2>
+      <MalioDataTable
+        :columns="columns"
+        :items="bigPaginated"
+        :total-items="bigItems.length"
+        v-model:page="bigPage"
+        v-model:per-page="bigPerPage"
+      >
+        <template #cell-montant="{ item }">
+          <strong>{{ item.montant }} €</strong>
+        </template>
+      </MalioDataTable>
+      <p class="mt-3 text-sm text-gray-500">Page courante : {{ bigPage }} / {{ Math.ceil(bigItems.length / bigPerPage) }}</p>
+    </div>
   </div>
 </template>

.playground/pages/composant/date/date.vue

@@ -50,6 +50,25 @@
         />
       </div>
     </div>
+
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">Readonly (readonly vide)</h2>
+        <MalioDate
+          label="Date de naissance (readonly vide)"
+          :readonly="true"
+        />
+      </div>
+
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">Readonly (readonly rempli)</h2>
+        <MalioDate
+          v-model="readonlyFilledDate"
+          label="Date de naissance (readonly rempli)"
+          :readonly="true"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -62,6 +81,7 @@ const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 
+const readonlyFilledDate = ref<string | null>('2026-06-15')
 const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)

.playground/pages/composant/divers/readonly.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="space-y-6 p-4">
+    <h1 class="text-2xl font-bold">Champs en lecture seule (readonly)</h1>
+    <p class="text-sm text-m-muted">
+      Tous les champs de formulaire dans leur état <code>readonly</code>, vides puis remplis.
+      Règles : bordure noire même vide, label et icône gris quand vide → noir quand rempli,
+      pas de focus bleu ni de grossissement.
+    </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)"
+            :readonly="true"
+          />
+          <MalioInputText
+            model-value="Commande #A-2048"
+            label="Référence (rempli)"
+            icon-name="mdi:lock-outline"
+            icon-size="20"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputEmail</h2>
+        <div class="space-y-4">
+          <MalioInputEmail
+            label="Adresse email (vide)"
+            :readonly="true"
+          />
+          <MalioInputEmail
+            model-value="contact@malio.fr"
+            label="Adresse email (rempli)"
+            :readonly="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)"
+            :readonly="true"
+          />
+          <MalioInputAmount
+            model-value="1250.00"
+            label="Montant (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputAutocomplete</h2>
+        <div class="space-y-4">
+          <MalioInputAutocomplete
+            label="Pays (vide)"
+            :options="countryOptions"
+            :readonly="true"
+          />
+          <MalioInputAutocomplete
+            model-value="de"
+            label="Pays (rempli)"
+            icon-name="mdi:lock-outline"
+            icon-position="left"
+            :options="countryOptions"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputPassword</h2>
+        <div class="space-y-4">
+          <MalioInputPassword
+            label="Mot de passe (vide)"
+            :readonly="true"
+          />
+          <MalioInputPassword
+            model-value="motdepasse123"
+            label="Mot de passe (rempli)"
+            :readonly="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"
+            :readonly="true"
+          />
+          <MalioInputTextArea
+            model-value="Ce texte est en lecture seule et ne peut pas être modifié."
+            label="Description (rempli)"
+            :size="3"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputPhone</h2>
+        <div class="space-y-4">
+          <MalioInputPhone
+            label="Téléphone (vide)"
+            :readonly="true"
+          />
+          <MalioInputPhone
+            model-value="+33 6 12 34 56 78"
+            label="Téléphone (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputUpload</h2>
+        <div class="space-y-4">
+          <MalioInputUpload
+            label="Fichier (vide)"
+            :readonly="true"
+          />
+          <MalioInputUpload
+            model-value="document.pdf"
+            label="Fichier (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioSelect</h2>
+        <div class="space-y-4">
+          <MalioSelect
+            label="Catégorie (readonly vide)"
+            :options="categoryOptions"
+            empty-option-label="Aucune selection"
+            :readonly="true"
+          />
+          <MalioSelect
+            :model-value="'a'"
+            label="Catégorie (readonly rempli)"
+            :options="categoryOptions"
+            empty-option-label="Aucune selection"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioSelectCheckbox</h2>
+        <div class="space-y-4">
+          <MalioSelectCheckbox
+            label="Catégories (readonly vide)"
+            :options="categoryOptions"
+            :display-tag="true"
+            :readonly="true"
+          />
+          <MalioSelectCheckbox
+            :model-value="['a']"
+            label="Catégories (readonly rempli)"
+            :options="categoryOptions"
+            empty-option-label="Aucune selection"
+            :display-tag="true"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDate</h2>
+        <div class="space-y-4">
+          <MalioDate
+            label="Date de naissance (vide)"
+            :readonly="true"
+          />
+          <MalioDate
+            model-value="2026-06-15"
+            label="Date de naissance (rempli)"
+            :readonly="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)"
+            :readonly="true"
+          />
+          <MalioDateTime
+            model-value="2026-12-25T09:30:00"
+            label="Date et heure (rempli)"
+            :readonly="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)"
+            :readonly="true"
+          />
+          <MalioDateRange
+            :model-value="rangeValue"
+            label="Période (rempli)"
+            :readonly="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)"
+            :readonly="true"
+          />
+          <MalioDateWeek
+            model-value="2026-W52"
+            label="Semaine (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioTimePicker</h2>
+        <div class="space-y-4">
+          <MalioTimePicker
+            label="Heure (vide)"
+            :readonly="true"
+          />
+          <MalioTimePicker
+            model-value="14:30"
+            label="Heure (rempli)"
+            :readonly="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'},
+]
+
+const rangeValue = ref<{start: string; end: string}>({start: '2026-12-20', end: '2026-12-31'})
+</script>

.playground/pages/composant/input/inputAmount.vue

@@ -36,6 +36,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputAmount
+        label="Montant (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputAmount
+        v-model="readonlyFilledAmount"
+        label="Montant (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Erreur et succès</h2>
       <div class="mt-4">
@@ -57,4 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
+const readonlyFilledAmount = ref('1250.00')
 </script>

.playground/pages/composant/input/inputAutocomplete.vue

@@ -82,6 +82,25 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputAutocomplete
+        label="Pays (readonly vide)"
+        :options="staticOptions"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputAutocomplete
+        v-model="readonlyFilledAutocomplete"
+        label="Pays (readonly rempli)"
+        :options="staticOptions"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputAutocomplete
@@ -140,6 +159,7 @@ const staticOptions: Option[] = [
   {label: 'Italie', value: 'it'},
 ]
 
+const readonlyFilledAutocomplete = ref<string | number | null>('de')
 const simpleValue = ref<string | number | null>(null)
 const leftIconValue = ref<string | number | null>(null)
 const createValue = ref<string | number | null>(null)

.playground/pages/composant/input/inputEmail.vue

@@ -48,6 +48,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputEmail
+        label="Adresse email (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputEmail
+        v-model="readonlyFilledEmail"
+        label="Adresse email (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputEmail
@@ -84,14 +101,35 @@
         :success="dynamicSuccess"
       />
     </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Email obligatoire</h2>
+      <MalioInputEmail
+        v-model="requiredEmail"
+        label="Email obligatoire"
+        :required="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Email normalisé (minuscules)</h2>
+      <MalioInputEmail
+        v-model="lowercaseEmail"
+        label="Email normalisé (minuscules)"
+        :lowercase="true"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+const readonlyFilledEmail = ref('contact@malio.fr')
 const emailValue = ref('')
 const dynamicEmail = ref('')
+const requiredEmail = ref('')
+const lowercaseEmail = ref('')
 
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 const isDynamicValid = computed(() => emailRegex.test(dynamicEmail.value))

.playground/pages/composant/input/inputPassword.vue

@@ -41,6 +41,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputPassword
+        label="Mot de passe (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputPassword
+        v-model="readonlyFilledPassword"
+        label="Mot de passe (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputPassword
@@ -83,6 +100,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+const readonlyFilledPassword = ref('motdepasse123')
 const passwordValue = ref('')
 const dynamicPassword = ref('')
 

.playground/pages/composant/input/inputPhone.vue

@@ -73,6 +73,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputPhone
+        label="Téléphone (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputPhone
+        v-model="readonlyFilledPhone"
+        label="Téléphone (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputPhone
@@ -121,6 +138,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+const readonlyFilledPhone = ref('+33 6 12 34 56 78')
 const phoneValue = ref('')
 const phoneAddable = ref('')
 const phoneFrench = ref('')

.playground/pages/composant/input/inputText.vue

@@ -108,6 +108,33 @@
         icon-size="20"
       />
     </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputText
+        label="Référence (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputText
+        v-model="readonlyFilledValue"
+        label="Référence (readonly rempli)"
+        icon-name="mdi:lock-outline"
+        icon-size="20"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Champ obligatoire</h2>
+      <MalioInputText
+        label="Champ obligatoire"
+        :required="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec masque</h2>
       <MalioInputText
@@ -154,6 +181,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+const readonlyFilledValue = ref('Commande #A-2048')
 const nameValue = ref('')
 const searchValue = ref('')
 const codeValue = ref('')

.playground/pages/composant/input/inputTextArea.vue

@@ -61,6 +61,25 @@
       </div>
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputTextArea
+        label="Description (readonly vide)"
+        :readonly="true"
+        :size="3"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputTextArea
+        v-model="readonlyFilledTextArea"
+        label="Description (readonly rempli)"
+        :readonly="true"
+        :size="3"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Resize avec limites</h2>
       <MalioInputTextArea
@@ -94,6 +113,7 @@
 import {ref} from 'vue'
 import MalioInputTextArea from '../../../../app/components/malio/input/InputTextArea.vue'
 
+const readonlyFilledTextArea = ref('Ce texte est en lecture seule et ne peut pas être modifié.')
 const hintValue = ref('')
 const iconValue = ref('')
 const errorValue = ref('abc')

.playground/pages/composant/input/inputUpload.vue

@@ -31,6 +31,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputUpload
+        label="Fichier (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputUpload
+        v-model="readonlyFilledUpload"
+        label="Fichier (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputUpload
@@ -74,6 +91,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+const readonlyFilledUpload = ref('document.pdf')
 const uploadValue = ref('')
 const dynamicUpload = ref('')
 

.playground/pages/composant/select/select.vue

@@ -82,6 +82,17 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sélection obligatoire</h2>
+      <MalioSelect
+        v-model="requiredValue"
+        :options="options"
+        label="Sélection obligatoire"
+        :required="true"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Peu d'elements (2)</h2>
       <MalioSelect
@@ -92,6 +103,28 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Lecture seule (vide)</h2>
+      <MalioSelect
+        v-model="readonlyEmptyValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Lecture seule (rempli)</h2>
+      <MalioSelect
+        v-model="readonlyFilledValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4 md:col-span-2">
       <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
       <MalioSelect
@@ -151,6 +184,7 @@ const longOptions = [
   {label: 'Republique tcheque', value: 'cz'},
 ]
 
+const requiredValue = ref<string | number | null>(null)
 const basicValue = ref<string | number | null>(null)
 const labelValue = ref<string | number | null>(null)
 const selectedValue = ref<string | number | null>('fr')
@@ -162,4 +196,6 @@ const emptyValue = ref<string | number | null>(null)
 const shortListValue = ref<string | number | null>(null)
 const longListValue = ref<string | number | null>(null)
 const bottomValue = ref<string | number | null>(null)
+const readonlyEmptyValue = ref<string | number | null>(null)
+const readonlyFilledValue = ref<string | number | null>('fr')
 </script>

.playground/pages/composant/select/selectCheckbox.vue

@@ -123,6 +123,28 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Lecture seule (vide)</h2>
+      <MalioSelectCheckbox
+        v-model="readonlyEmptyValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Lecture seule (rempli)</h2>
+      <MalioSelectCheckbox
+        v-model="readonlyFilledValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4 md:col-span-2">
       <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
       <MalioSelectCheckbox
@@ -145,6 +167,7 @@
         empty-option-label="Aucune selection"
       />
     </div>
+
   </div>
 </template>
 
@@ -190,4 +213,6 @@ const selectAllValue = ref<Array<string | number>>([])
 const selectAllCustomValue = ref<Array<string | number>>([])
 const longListValue = ref<Array<string | number>>([])
 const bottomValue = ref<Array<string | number>>([])
+const readonlyEmptyValue = ref<Array<string | number>>([])
+const readonlyFilledValue = ref<Array<string | number>>(['fr'])
 </script>

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

@@ -36,6 +36,36 @@
         <template #details><p class="p-4">Détails avancés</p></template>
       </MalioTabList>
     </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-1 text-xl font-bold">Beaucoup d'onglets (fenêtré)</h2>
+      <p class="mb-4 text-sm text-m-muted">
+        7 onglets avec <code>:max-visible-tabs="5"</code> — flèches gauche/droite pour faire défiler
+        (1 par 1). L'onglet actif reste sélectionné même hors fenêtre.
+      </p>
+      <MalioTabList v-model="manyValue" :tabs="manyTabs" :max-visible-tabs="5">
+        <template #infos><p class="p-4">Contenu Informations</p></template>
+        <template #adresses><p class="p-4">Contenu Adresses</p></template>
+        <template #contacts><p class="p-4">Contenu Contacts</p></template>
+        <template #compta><p class="p-4">Contenu Comptabilité</p></template>
+        <template #documents><p class="p-4">Contenu Documents</p></template>
+        <template #historique><p class="p-4">Contenu Historique</p></template>
+        <template #parametres><p class="p-4">Contenu Paramètres</p></template>
+      </MalioTabList>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-1 text-xl font-bold">Peu d'onglets avec maxVisibleTabs</h2>
+      <p class="mb-4 text-sm text-m-muted">
+        3 onglets avec <code>:max-visible-tabs="5"</code> — le fenêtrage ne s'active pas
+        (onglets ≤ max), donc pas de flèches, affichage normal centré.
+      </p>
+      <MalioTabList v-model="fewValue" :tabs="fewTabs" :max-visible-tabs="5">
+        <template #general><p class="p-4">Contenu Général</p></template>
+        <template #adresses><p class="p-4">Contenu Adresses</p></template>
+        <template #contacts><p class="p-4">Contenu Contacts</p></template>
+      </MalioTabList>
+    </div>
   </div>
 </template>
 
@@ -60,7 +90,25 @@ const tabsTwo = [
   { key: 'details', label: 'Détails', icon: 'mdi:cog-outline' },
 ]
 
+const manyTabs = [
+  { key: 'infos', label: 'Informations', icon: 'mdi:information-outline' },
+  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
+  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
+  { key: 'compta', label: 'Comptabilité', icon: 'mdi:web' },
+  { key: 'documents', label: 'Documents', icon: 'mdi:file-document-outline' },
+  { key: 'historique', label: 'Historique', icon: 'mdi:history' },
+  { key: 'parametres', label: 'Paramètres', icon: 'mdi:cog-outline' },
+]
+
 const simpleValue = ref('qualimat')
 const noIconValue = ref('tab1')
 const twoTabValue = ref('general')
+const manyValue = ref('infos')
+
+const fewTabs = [
+  { key: 'general', label: 'Général', icon: 'mdi:information-outline' },
+  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
+  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
+]
+const fewValue = ref('general')
 </script>

.playground/pages/composant/time/timePicker.vue

@@ -30,12 +30,23 @@
       <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
       <MalioTimePicker v-model="noClearValue" label="Heure" :clearable="false" />
     </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioTimePicker label="Heure (readonly vide)" :readonly="true" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioTimePicker v-model="readonlyFilledTime" label="Heure (readonly rempli)" :readonly="true" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {ref} from 'vue'
 
+const readonlyFilledTime = ref('14:30')
 const simpleValue = ref('')
 const initialValue = ref('08:30')
 const disabledValue = ref('14:15')

.playground/playground.nav.ts

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

CHANGELOG.md

@@ -39,8 +39,14 @@ Liste des évolutions de la librairie Malio layer UI
 * InputAutocomplete : prop `localFilter` pour le filtrage côté client des listes statiques (case-insensitive `label.includes(query)`), sans avoir à brancher `@search`
 * InputTextArea : la scrollbar passe en primary (bleu) au focus, comme la liste du Select
 * Token Tailwind partagé `w-m-btn-action` (150px) exposé via `tailwind.config.ts` + CSS var `--m-btn-action-width` dans `malio.css` — utilisable côté consommateur pour les boutons d'action (`<MalioButton button-class="w-m-btn-action" />`), themable en redéfinissant la CSS var
+* [#MUI-41] Prop `required` cohérente + astérisque rouge dans le label sur la famille formulaire (Select, SelectCheckbox, InputUpload, InputRichText gagnent la prop)
+* [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`)
 
 ### Changed
+* DataTable : pagination compacte avec saut de page — `‹ Préc.  Page [n] / N  Suiv. ›` (remplace les numéros + `…`). Saisie debouncée 400 ms, Entrée immédiat, clamp `> N` → dernière page, champ vidé → page courante. Labels `Préc.` / `Suiv.`.
+* MalioButton : dimensions par défaut `w-[180px]` / `h-[38px]` (étaient `w-[200px]` / `h-[40px]`).
+* DataTable : tailles par défaut revues — texte header `16px` (était `20px`), texte body `14px` (était `18px`), sélecteur de lignes et boutons de pagination (Prev / numéros / Next) alignés à `30px` de haut, padding de `12px` entre le bas du tableau et la barre de pagination, texte header et body passés en noir (`text-black`, étaient `text-m-primary`).
+* Select : nouvelle prop `fieldClass` pour surcharger les classes du field (notamment la hauteur `h-[40px]` jusqu'ici codée en dur) ; utilisée par le DataTable pour passer le sélecteur de perPage à `30px`.
 * [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
 
 ### Fixed

COMPONENTS.md

@@ -2,6 +2,8 @@
 
 Tous les composants sont auto-importés avec le préfixe `Malio`. Utiliser `v-model` pour le binding bidirectionnel sur les composants de formulaire.
 
+> **Champ obligatoire :** sur les composants de formulaire, la prop `required` ajoute un astérisque rouge dans le label. C'est un repère visuel ; la sémantique « obligatoire » est portée par l'attribut natif `required` ou `aria-required`.
+
 ---
 
 ## MalioInputText
@@ -15,10 +17,11 @@ Champ texte avec label, icône optionnelle et support de masque de saisie.
 | `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
 | `disabled` | `boolean` | `false` | Désactive le champ |
 | `readonly` | `boolean` | `false` | Lecture seule |
-| `required` | `boolean` | `false` | Champ requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `iconName` | `string` | `''` | Icône Iconify (ex: `mdi:magnify`) |
 | `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône |
 | `iconSize` | `string \| number` | `24` | Taille icône |
@@ -53,9 +56,11 @@ Champ mot de passe avec toggle visibilité.
 | `displayIcon` | `boolean` | `true` | Afficher l'icône toggle |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 
 **Events :** `update:modelValue(value: string)`
 
@@ -79,10 +84,12 @@ Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outlin
 | `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'email'` pour suggérer l'email utilisateur) |
 | `disabled` | `boolean` | `false` | Désactive le champ |
 | `readonly` | `boolean` | `false` | Lecture seule |
-| `required` | `boolean` | `false` | Champ requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
+| `lowercase` | `boolean` | `false` | Normalise la saisie en minuscules à la frappe |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `iconName` | `string` | `'mdi:email-outline'` | Icône Iconify (chaîne vide pour masquer) |
 | `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône |
 | `iconSize` | `string \| number` | `24` | Taille icône |
@@ -91,6 +98,8 @@ Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outlin
 | `labelClass` | `string` | `''` | Classes CSS label |
 | `groupClass` | `string` | `''` | Classes CSS conteneur |
 
+> **Sanitisation à la saisie :** tous les espaces sont supprimés automatiquement au fil de la frappe (sans masque). Avec `lowercase=true`, la valeur est également convertie en minuscules à la frappe. La validation du format (ex. présence d'un `@`) reste à la charge du parent via la prop `error` ou la couche de validation.
+
 **Events :** `update:modelValue(value: string)`
 
 ```vue
@@ -115,10 +124,11 @@ Champ téléphone (`type="tel"` + `inputmode="tel"`) avec icône `mdi:phone-outl
 | `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'tel'` pour suggérer un numéro enregistré) |
 | `disabled` | `boolean` | `false` | Désactive le champ et le bouton + |
 | `readonly` | `boolean` | `false` | Lecture seule (désactive aussi le bouton +) |
-| `required` | `boolean` | `false` | Champ requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `iconName` | `string` | `'mdi:phone-outline'` | Icône Iconify (chaîne vide pour masquer) |
 | `iconPosition` | `'left' \| 'right'` | `'left'` | Position de l'icône |
 | `iconSize` | `string \| number` | `24` | Taille icône |
@@ -169,10 +179,11 @@ Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtr
 | `minSearchText` | `string` | `'Tapez pour rechercher'` | Texte affiché tant que `minSearchLength` n'est pas atteint |
 | `disabled` | `boolean` | `false` | Désactive le champ et empêche l'ouverture |
 | `readonly` | `boolean` | `false` | Lecture seule (n'ouvre pas le dropdown) |
-| `required` | `boolean` | `false` | Champ requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur (prioritaire) |
 | `success` | `string` | `''` | Message de succès |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `inputClass` | `string` | `''` | Classes CSS input |
 | `labelClass` | `string` | `''` | Classes CSS label |
 | `groupClass` | `string` | `''` | Classes CSS conteneur |
@@ -231,7 +242,9 @@ Champ montant avec icône devise (euro par défaut).
 | `label` | `string` | `''` | Label |
 | `iconName` | `string` | `'mdi:currency-eur'` | Icône devise |
 | `disabled` | `boolean` | `false` | Désactivé |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `error` | `string` | `''` | Message d'erreur |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 
 **Events :** `update:modelValue(value: string)`
 
@@ -253,7 +266,9 @@ Champ numérique avec boutons +/-.
 | `min` | `number \| string` | — | Valeur minimum |
 | `max` | `number \| string` | — | Valeur maximum |
 | `disabled` | `boolean` | `false` | Désactivé |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `error` | `string` | `''` | Message d'erreur |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 
 **Events :** `update:modelValue(value: string)`
 
@@ -276,7 +291,9 @@ Zone de texte multiligne avec compteur et redimensionnement.
 | `maxLength` | `number` | `800` | Longueur max |
 | `showCounter` | `boolean` | `false` | Afficher le compteur |
 | `disabled` | `boolean` | `false` | Désactivé |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `error` | `string` | `''` | Message d'erreur |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `groupClass` | `string` | `''` | Classes CSS sur la div conteneur (utile pour `row-span-*`, `col-span-*`, etc.) |
 
 **Events :** `update:modelValue(value: string)`
@@ -304,9 +321,11 @@ Zone de texte multiligne avec compteur et redimensionnement.
 | `editable` | `boolean` | `true` | `false` → mode affichage seul (toolbar masquée) |
 | `disabled` | `boolean` | `false` | Désactive l'édition et la toolbar |
 | `readonly` | `boolean` | `false` | Lecture seule (toolbar visible mais désactivée) |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `outputFormat` | `'markdown' \| 'html'` | `'html'` | Format émis dans `update:modelValue` |
 | `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
 | `labelClass` | `string` | `''` | Classes CSS label (twMerge) |
@@ -334,7 +353,10 @@ Champ d'upload de fichier.
 | `accept` | `string` | `''` | Types de fichiers acceptés |
 | `displayIcon` | `boolean` | `true` | Afficher l'icône |
 | `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Champ en lecture seule (bordure noire, pas de focus bleu/grossissement, label/icône gris→noir selon rempli). |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `error` | `string` | `''` | Message d'erreur |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 
 **Events :** `update:modelValue(value: string)`, `file-selected(file: File)`
 
@@ -357,12 +379,16 @@ Liste déroulante.
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Champ en lecture seule (bordure noire, pas de focus bleu/grossissement, label/icône gris→noir selon rempli). |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
 | `rounded` | `string` | `'rounded-md'` | Classe border-radius |
 | `textField` | `string` | `'text-lg'` | Classe taille texte bouton |
 | `textValue` | `string` | `'text-lg'` | Classe taille texte valeur |
 | `textLabel` | `string` | `'text-sm'` | Classe taille texte label |
+| `fieldClass` | `string` | `''` | Classes supplémentaires sur le field (override hauteur, ex. `h-[30px]`) |
 | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide |
 
 **Events :** `update:modelValue(value: string | number | null)`
@@ -382,13 +408,16 @@ Liste déroulante multi-sélection avec checkboxes.
 
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
-| `modelValue` | `(string \| number)[]` | **requis** | Valeurs sélectionnées (v-model) |
+| `modelValue` | `(string \| number)[]` | `[]` | Valeurs sélectionnées (v-model) |
 | `options` | `{ value: string \| number, text: string }[]` | `[]` | Options |
 | `displayTag` | `boolean` | `false` | Afficher les tags sélectionnés |
 | `displaySelectAll` | `boolean` | `false` | Afficher "Tout sélectionner" |
 | `selectAllLabel` | `string` | `'Tout sélectionner'` | Texte du sélecteur global |
 | `label` | `string` | `''` | Label |
 | `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Champ en lecture seule (bordure noire, pas de focus bleu/grossissement, label/icône gris→noir selon rempli). |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide |
 
 **Events :** `update:modelValue(value: (string | number)[])`
@@ -410,7 +439,9 @@ Case à cocher.
 | `label` | `string` | `''` | Label |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `error` | `string` | `''` | Message d'erreur |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 
 **Events :** `update:modelValue(value: boolean)`
 
@@ -433,6 +464,7 @@ Bouton radio (à utiliser en groupe avec le même `name`).
 | `name` | `string` | `''` | Nom du groupe radio |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 
 **Events :** `update:modelValue(value: string | number | boolean | null)`
 
@@ -456,7 +488,7 @@ La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et f
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
-| `required` | `boolean` | `false` | Requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `hint` | `string` | `''` | Texte d'aide |
@@ -465,6 +497,7 @@ La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et f
 | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` (jours antérieurs désactivés) |
 | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` (jours postérieurs désactivés) |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 
 **Events :** `update:modelValue(value: string | null)`
@@ -490,7 +523,7 @@ La valeur est un objet `{ start: string; end: string }` (dates ISO `"YYYY-MM-DD"
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
-| `required` | `boolean` | `false` | Requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `hint` | `string` | `''` | Texte d'aide |
@@ -499,6 +532,7 @@ La valeur est un objet `{ start: string; end: string }` (dates ISO `"YYYY-MM-DD"
 | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` |
 | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 
 **Events :** `update:modelValue(value: { start: string; end: string } | null)`
@@ -523,7 +557,7 @@ La valeur est une chaîne au format **semaine ISO native** `"YYYY-Www"` (ex. `"2
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
-| `required` | `boolean` | `false` | Requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `hint` | `string` | `''` | Texte d'aide |
@@ -532,6 +566,7 @@ La valeur est une chaîne au format **semaine ISO native** `"YYYY-Www"` (ex. `"2
 | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` |
 | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 
 **Events :** `update:modelValue(value: string | null)`
@@ -553,7 +588,9 @@ Sélecteur d'heure.
 | `label` | `string` | `''` | Label |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `error` | `string` | `''` | Message d'erreur |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 
 **Events :** `update:modelValue(value: string)`
 
@@ -575,13 +612,14 @@ Sélecteur d'heure à **molettes style iOS** (champ + popover). Deux colonnes in
 | `label` | `string` | `''` | Label flottant |
 | `modelValue` | `string \| null` | `undefined` | Heure au format `"HH:MM"` (v-model) |
 | `placeholder` | `string` | `'HH:MM'` | Placeholder |
-| `required` | `boolean` | `false` | Champ requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `disabled` | `boolean` | `false` | Désactive le champ |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 
 **Events :** `update:modelValue(value: string | null)`
@@ -608,7 +646,7 @@ La valeur est une chaîne **ISO naïve sans fuseau** au format `"YYYY-MM-DDTHH:M
 | `name` | `string` | `''` | Attribut name |
 | `label` | `string` | `''` | Label flottant |
 | `placeholder` | `string` | `'JJ/MM/AAAA HH:MM'` | Placeholder |
-| `required` | `boolean` | `false` | Requis |
+| `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) |
 | `disabled` | `boolean` | `false` | Désactivé |
 | `readonly` | `boolean` | `false` | Lecture seule |
 | `hint` | `string` | `''` | Texte d'aide |
@@ -617,6 +655,7 @@ La valeur est une chaîne **ISO naïve sans fuseau** au format `"YYYY-MM-DDTHH:M
 | `min` | `string` | `undefined` | Borne min (datetime ou date ; borne la grille sur la partie date) |
 | `max` | `string` | `undefined` | Borne max (idem) |
 | `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
+| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. |
 | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
 
 **Events :** `update:modelValue(value: string | null)`
@@ -690,6 +729,10 @@ Navigation par onglets avec contenu dynamique.
 |------|------|--------|-------------|
 | `modelValue` | `string` | `undefined` | Onglet actif (v-model) |
 | `tabs` | `Tab[]` | **requis** | Liste des onglets (voir type ci-dessous) |
+| `maxVisibleTabs` | `number` | `undefined` | Nombre max d'onglets affichés à la fois. Au-delà, un carrousel avec flèches gauche/droite apparaît (décalage 1 par 1). Non défini = tous les onglets. |
+| `maxWidth` | `number` | `1100` | Largeur max (px) du bloc d'onglets en mode fenêtré. |
+
+Quand `maxVisibleTabs` est défini et que le nombre d'onglets le dépasse, la barre passe en mode fenêtré : seuls `maxVisibleTabs` onglets sont visibles à la fois, encadrés par des flèches gauche/droite qui font défiler la fenêtre un onglet à la fois (largeur du bloc bornée par `maxWidth`).
 
 Type `Tab` :
 
@@ -914,6 +957,8 @@ Boîte de dialogue modale centrée avec backdrop semi-transparent. Gère l'acces
 
 Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
 
+**Pagination :** forme compacte `‹ Préc.  Page [n] / N  Suiv. ›`. Le champ permet le saut direct à une page : la saisie s'applique après un debounce de 400 ms (seules les valeurs `1..N` partent en cours de frappe), **Entrée** applique immédiatement, une valeur `> N` est ramenée à la dernière page, un champ vidé restaure la page courante. `v-model:page` inchangé.
+
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
 | `id` | `string` | auto | Identifiant HTML |

app/components/malio/button/Button.test.ts

@@ -162,8 +162,8 @@ describe('MalioButton', () => {
   it('applies correct dimensions', () => {
     const wrapper = mountComponent()
 
-    expect(wrapper.get('button').classes()).toContain('w-[200px]')
-    expect(wrapper.get('button').classes()).toContain('h-[40px]')
+    expect(wrapper.get('button').classes()).toContain('w-[180px]')
+    expect(wrapper.get('button').classes()).toContain('h-[38px]')
   })
 
   it('applies font styles', () => {

app/components/malio/button/Button.vue

@@ -84,7 +84,7 @@ const variantClasses = computed(() => {
 
 const mergedButtonClass = computed(() =>
   twMerge(
-    'inline-flex w-[200px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    'inline-flex w-[180px] h-[38px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
     variantClasses.value,
     props.buttonClass,
   ),

app/components/malio/checkbox/Checkbox.test.ts

@@ -17,6 +17,7 @@ type CheckboxProps = {
   hint?: string
   error?: string
   success?: string
+  reserveMessageSpace?: boolean
 }
 
 const CheckboxForTest = Checkbox as DefineComponent<CheckboxProps>
@@ -161,4 +162,33 @@ describe('MalioCheckbox', () => {
 
     expect(wrapper.get('label').classes()).toContain('text-black')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountCheckbox({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountCheckbox({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountCheckbox({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountCheckbox({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountCheckbox({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/checkbox/Checkbox.vue

@@ -25,11 +25,12 @@
         </svg>
       </span>
       <span>
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </span>
     </label>
 
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="mergedMessageClass"
     >
@@ -41,6 +42,7 @@
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
 
@@ -59,6 +61,7 @@ const props = withDefaults(
     hint?: string
     error?: string
     success?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -74,6 +77,7 @@ const props = withDefaults(
     hint: '',
     error: '',
     success: '',
+    reserveMessageSpace: true,
   },
 )
 
@@ -120,7 +124,8 @@ const mergedLabelClass = computed(() =>
 
 const mergedMessageClass = computed(() =>
   twMerge(
-    'text-xs min-h-[1rem]',
+    'text-xs',
+    props.reserveMessageSpace ? 'min-h-[1rem]' : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value

app/components/malio/datatable/DataTable.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import type { DefineComponent } from 'vue'
@@ -189,24 +189,6 @@ describe('MalioDataTable', () => {
       expect(wrapper.find('[data-test="pagination"]').exists()).toBe(true)
     })
 
-    it('renders all pages when totalPages <= 5', () => {
-      const wrapper = mountComponent({ totalItems: 50, perPage: 10 })
-      for (let i = 1; i <= 5; i++) {
-        expect(wrapper.find(`[data-test="page-${i}"]`).exists()).toBe(true)
-      }
-    })
-
-    it('highlights current page', () => {
-      const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
-      expect(wrapper.find('[data-test="page-3"]').attributes('aria-current')).toBe('page')
-    })
-
-    it('emits update:page on page button click', async () => {
-      const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 1 })
-      await wrapper.find('[data-test="page-3"]').trigger('click')
-      expect(wrapper.emitted('update:page')?.[0]).toEqual([3])
-    })
-
     it('Prev button is disabled on page 1', () => {
       const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 1 })
       expect(wrapper.find('[data-test="prev-button"]').attributes('disabled')).toBeDefined()
@@ -229,26 +211,6 @@ describe('MalioDataTable', () => {
       expect(wrapper.emitted('update:page')?.[0]).toEqual([4])
     })
 
-    it('shows ellipsis for truncated pages (> 5 pages)', () => {
-      const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
-      const ellipsis = wrapper.findAll('[aria-hidden="true"]')
-      expect(ellipsis.length).toBeGreaterThan(0)
-      expect(ellipsis[0].text()).toBe('…')
-    })
-
-    it('always shows first and last page when > 5 pages', () => {
-      const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
-      expect(wrapper.find('[data-test="page-1"]').exists()).toBe(true)
-      expect(wrapper.find('[data-test="page-20"]').exists()).toBe(true)
-    })
-
-    it('shows 1 neighbor on each side of current page', () => {
-      const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
-      expect(wrapper.find('[data-test="page-9"]').exists()).toBe(true)
-      expect(wrapper.find('[data-test="page-10"]').exists()).toBe(true)
-      expect(wrapper.find('[data-test="page-11"]').exists()).toBe(true)
-    })
-
     it('pagination nav has aria-label', () => {
       const wrapper = mountComponent({ totalItems: 30 })
       expect(wrapper.find('[data-test="pagination-nav"]').attributes('aria-label')).toBe('Pagination')
@@ -265,6 +227,80 @@ describe('MalioDataTable', () => {
     })
   })
 
+  describe('Pagination — saut de page (champ)', () => {
+    beforeEach(() => { vi.useFakeTimers() })
+    afterEach(() => { vi.runOnlyPendingTimers(); vi.useRealTimers() })
+
+    it('affiche la page courante et le total dans le champ', () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 16 })
+      expect((wrapper.find('[data-test="page-input"]').element as HTMLInputElement).value).toBe('16')
+      expect(wrapper.find('[data-test="total-pages"]').text()).toBe('31')
+    })
+
+    it('émet update:page après le debounce pour une valeur valide', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('16')
+      expect(wrapper.emitted('update:page')).toBeUndefined()
+      vi.advanceTimersByTime(400)
+      expect(wrapper.emitted('update:page')?.at(-1)).toEqual([16])
+    })
+
+    it('n\'émet pas avant la fin du debounce', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      await wrapper.find('[data-test="page-input"]').setValue('16')
+      vi.advanceTimersByTime(399)
+      expect(wrapper.emitted('update:page')).toBeUndefined()
+    })
+
+    it('Entrée applique immédiatement', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('16')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('update:page')?.at(-1)).toEqual([16])
+    })
+
+    it('clampe une valeur > N à la dernière page (Entrée)', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('50')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('update:page')?.at(-1)).toEqual([31])
+    })
+
+    it('restaure la page courante quand le champ est vidé au blur', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 5 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:page')).toBeUndefined()
+      expect((input.element as HTMLInputElement).value).toBe('5')
+    })
+
+    it('n\'émet pas pour 0 et restaure la page courante (Entrée)', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 5 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('0')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('update:page')).toBeUndefined()
+      expect((input.element as HTMLInputElement).value).toBe('5')
+    })
+
+    it('retire les caractères non numériques à la frappe', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('1a2b')
+      expect((input.element as HTMLInputElement).value).toBe('12')
+    })
+
+    it('resynchronise le champ quand la prop page change', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      await wrapper.setProps({ page: 7 })
+      expect((wrapper.find('[data-test="page-input"]').element as HTMLInputElement).value).toBe('7')
+    })
+  })
+
   describe('Per-page selector', () => {
     it('emits update:per-page and reset page to 1 on change', async () => {
       const wrapper = mountComponent({ totalItems: 100, perPage: 10, page: 5 })

app/components/malio/datatable/DataTable.vue

@@ -7,14 +7,14 @@
             v-for="col in columns"
             :key="col.key"
             scope="col"
-            class="border-b border-black px-3 py-3 text-left align-middle text-[20px]"
+            class="border-b border-black px-3 py-3 text-left align-middle text-[16px]"
           >
             <slot
               v-if="$slots[`header-${col.key}`]"
               :name="`header-${col.key}`"
               :column="col"
             />
-            <span v-else class="font-semibold text-m-primary">{{ col.label }}</span>
+            <span v-else class="font-semibold text-black">{{ col.label }}</span>
           </th>
         </tr>
       </thead>
@@ -32,7 +32,7 @@
           <td
             v-for="col in columns"
             :key="col.key"
-            class="px-3 py-4 text-[18px] text-m-primary"
+            class="px-3 py-4 text-[14px] text-black"
             :class="index < items.length - 1 ? 'border-b border-black' : ''"
           >
             <slot
@@ -57,16 +57,17 @@
 
     <div
       v-if="totalItems > 0"
-      class="flex items-center justify-between pt-2"
+      class="flex items-center justify-between pt-3"
       data-test="pagination"
     >
       <div class="flex items-center gap-4">
         <span class="whitespace-nowrap text-[16px] text-black">Lignes :</span>
-        <div class="h-12">
+        <div class="h-[30px]">
           <MalioSelect
             :model-value="perPage"
             :options="perPageSelectOptions"
-            group-class="w-20"
+            group-class="w-20 h-[30px]"
+            field-class="h-[30px]"
             rounded="rounded"
             text-field="text-sm"
             text-value="text-sm"
@@ -80,43 +81,39 @@
       <nav aria-label="Pagination" class="flex items-center gap-1" data-test="pagination-nav">
         <MalioButton
           variant="tertiary"
-          label="Prev"
+          label="Préc."
           :disabled="page <= 1"
-          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
           aria-label="Page précédente"
           data-test="prev-button"
-          @click="goToPage(page - 1)"
+          @click="changePage(page - 1)"
         />
 
-        <template v-for="(p, idx) in visiblePages" :key="idx">
-          <span
-            v-if="p === '...'"
-            class="px-1 text-sm text-m-muted"
-            aria-hidden="true"
-          >…</span>
-          <button
-            v-else
-            type="button"
-            class="h-10 min-w-[2.5rem] rounded px-2 text-sm transition-colors"
-            :class="p === page
-              ? 'bg-m-btn-primary text-white font-semibold'
-              : 'text-m-text hover:bg-m-bg'"
-            :aria-current="p === page ? 'page' : undefined"
-            :data-test="`page-${p}`"
-            @click="goToPage(p)"
+        <span class="flex items-center gap-2 text-sm">
+          <label :for="pageInputId" class="text-m-muted">Page</label>
+          <input
+            :id="pageInputId"
+            v-model="pageInput"
+            type="text"
+            inputmode="numeric"
+            aria-label="Aller à la page"
+            data-test="page-input"
+            class="h-[30px] w-[58px] rounded-malio border border-m-border text-center text-sm text-m-text outline-none focus:border-m-primary"
+            @input="onPageInput"
+            @keydown.enter="commitPageInput"
+            @blur="commitPageInput"
           >
-            {{ p }}
-          </button>
-        </template>
+          <span class="text-m-muted">/ <span data-test="total-pages">{{ totalPages }}</span></span>
+        </span>
 
         <MalioButton
           variant="tertiary"
-          label="Next"
+          label="Suiv."
           :disabled="page >= totalPages"
-          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
           aria-label="Page suivante"
           data-test="next-button"
-          @click="goToPage(page + 1)"
+          @click="changePage(page + 1)"
         />
       </nav>
     </div>
@@ -124,7 +121,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs, useId } from 'vue'
+import { computed, ref, watch, onBeforeUnmount, useAttrs, useId } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import MalioSelect from '../select/Select.vue'
 import MalioButton from '../button/Button.vue'
@@ -172,6 +169,15 @@ const componentId = computed(() => props.id || `malio-datatable-${generatedId}`)
 
 const totalPages = computed(() => Math.max(1, Math.ceil(props.totalItems / props.perPage)))
 
+const PAGE_JUMP_DEBOUNCE = 400
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+const pageInputId = computed(() => `${componentId.value}-page-input`)
+const pageInput = ref(String(props.page))
+
+watch(() => props.page, (p) => { pageInput.value = String(p) })
+
+onBeforeUnmount(() => { if (debounceTimer) clearTimeout(debounceTimer) })
+
 const perPageSelectOptions = computed(() =>
   props.perPageOptions.map(n => ({ label: String(n), value: n }))
 )
@@ -183,42 +189,32 @@ function onPerPageChange(value: string | number | null) {
   }
 }
 
-function goToPage(page: number) {
-  if (page >= 1 && page <= totalPages.value) {
+function changePage(page: number) {
+  if (page >= 1 && page <= totalPages.value && page !== props.page) {
     emit('update:page', page)
   }
 }
 
-const visiblePages = computed(() => {
-  const total = totalPages.value
-  const current = props.page
-
-  if (total <= 5) {
-    return Array.from({ length: total }, (_, i) => i + 1)
+function onPageInput() {
+  pageInput.value = pageInput.value.replace(/[^0-9]/g, '')
+  if (debounceTimer) clearTimeout(debounceTimer)
+  if (pageInput.value === '') return
+  const n = Number(pageInput.value)
+  if (n >= 1 && n <= totalPages.value) {
+    debounceTimer = setTimeout(() => changePage(n), PAGE_JUMP_DEBOUNCE)
   }
+}
 
-  const pages: (number | '...')[] = []
-  pages.push(1)
-
-  if (current > 3) {
-    pages.push('...')
+function commitPageInput() {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  const raw = pageInput.value.trim()
+  const n = Number(raw)
+  if (raw === '' || n === 0 || Number.isNaN(n)) {
+    pageInput.value = String(props.page)
+    return
   }
-
-  const start = Math.max(2, current - 1)
-  const end = Math.min(total - 1, current + 1)
-
-  for (let i = start; i <= end; i++) {
-    pages.push(i)
-  }
-
-  if (current < total - 2) {
-    pages.push('...')
-  }
-
-  if (total > 1) {
-    pages.push(total)
-  }
-
-  return pages
-})
+  const clamped = Math.min(Math.max(1, Math.round(n)), totalPages.value)
+  changePage(clamped)
+  pageInput.value = String(clamped)
+}
 </script>

app/components/malio/date/Date.test.ts

@@ -21,6 +21,7 @@ type DateProps = {
   inputClass?: string
   labelClass?: string
   groupClass?: string
+  reserveMessageSpace?: boolean
 }
 
 const DateForTest = Date_ as DefineComponent<DateProps>
@@ -40,6 +41,16 @@ describe('MalioDate', () => {
       expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
     })
 
+    it('affiche l\'astérisque quand required est vrai', () => {
+      const wrapper = mountDate({label: 'Champ', required: true})
+      expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+    })
+
+    it('n\'affiche pas l\'astérisque par défaut', () => {
+      const wrapper = mountDate({label: 'Champ'})
+      expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+    })
+
     it('displays the formatted value in the field', () => {
       const wrapper = mountDate({modelValue: '2026-05-19'})
       const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
@@ -175,6 +186,37 @@ describe('MalioDate', () => {
       await wrapper.get('[data-test="date-input"]').trigger('click')
       expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
     })
+
+    it('readonly vide : bordure noire sans bleu', () => {
+      const wrapper = mountDate({readonly: true})
+      const input = wrapper.get('[data-test="date-input"]')
+      expect(input.classes()).toContain('border-black')
+      expect(input.classes()).not.toContain('border-m-muted')
+      expect(input.classes()).not.toContain('focus:border-m-primary')
+    })
+
+    it('readonly vide : label muted sans bleu', () => {
+      const wrapper = mountDate({readonly: true, label: 'Date'})
+      const label = wrapper.get('label')
+      expect(label.classes()).toContain('text-m-muted')
+      expect(label.classes()).not.toContain('text-m-primary')
+    })
+
+    it('readonly vide : icône calendrier en text-m-muted', () => {
+      const wrapper = mountDate({readonly: true, label: 'Date'})
+      expect(wrapper.get('[data-test="calendar-icon"]').classes()).toContain('text-m-muted')
+    })
+
+    it('readonly rempli : label et icône en noir, bordure noire', () => {
+      const wrapper = mountDate({readonly: true, label: 'Date', modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]')
+      const label = wrapper.get('label')
+      const icon = wrapper.get('[data-test="calendar-icon"]')
+      expect(input.classes()).toContain('border-black')
+      expect(input.classes()).not.toContain('focus:border-m-primary')
+      expect(label.classes()).toContain('text-black')
+      expect(icon.classes()).toContain('text-black')
+    })
   })
 
   describe('accessibilité', () => {
@@ -195,4 +237,25 @@ describe('MalioDate', () => {
       expect(input.value).toBe('25/12/2026')
     })
   })
+
+  describe('reserveMessageSpace', () => {
+    it('réserve l’espace message par défaut même sans message', () => {
+      const wrapper = mountDate({label: 'Champ'})
+      const msg = wrapper.find('[id$="-describedby"]')
+      expect(msg.exists()).toBe(true)
+      expect(msg.classes()).toContain('min-h-[1rem]')
+    })
+
+    it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+      const wrapper = mountDate({label: 'Champ', reserveMessageSpace: false})
+      expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+    })
+
+    it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+      const wrapper = mountDate({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+      const msg = wrapper.find('[id$="-describedby"]')
+      expect(msg.exists()).toBe(true)
+      expect(msg.classes()).not.toContain('min-h-[1rem]')
+    })
+  })
 })

app/components/malio/date/internal/CalendarField.vue

@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
@@ -85,10 +85,12 @@
     </div>
 
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
         hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs min-h-[1rem]',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
       ]"
     >
       {{ error || success || hint }}
@@ -100,6 +102,7 @@
 import {computed, ref, useAttrs, useId, watch} from 'vue'
 import {Icon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../../shared/RequiredMark.vue'
 import CalendarHeader from './CalendarHeader.vue'
 import MonthPicker from './MonthPicker.vue'
 import {useCalendarPopover} from '../composables/useCalendarPopover'
@@ -125,6 +128,7 @@ const props = withDefaults(
     inputClass?: string
     labelClass?: string
     groupClass?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -141,6 +145,7 @@ const props = withDefaults(
     inputClass: '',
     labelClass: '',
     groupClass: '',
+    reserveMessageSpace: true,
   },
 )
 
@@ -157,6 +162,7 @@ const inputId = computed(() => props.id?.toString() || `malio-date-${generatedId
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isFilled = computed(() => props.displayValue.length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
 const showClear = computed(() =>
   props.clearable && isFilled.value && !props.disabled && !props.readonly,
 )
@@ -194,14 +200,16 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : '',
     hasError.value
       ? 'border-m-danger'
       : hasSuccess.value
         ? 'border-m-success'
-        : 'focus:border-m-primary',
-    isOpen.value ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    (!isReadonly.value && isOpen.value) ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
     props.inputClass,
   ),
 )
@@ -209,14 +217,16 @@ const mergedInputClass = computed(() =>
 const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left font-medium text-sm transition-transform duration-150',
-    (isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
+    (isReadonly.value ? isFilled.value : (isFilled.value || isOpen.value)) ? '-translate-y-[1.25rem] scale-90' : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
-        : isOpen.value
-          ? 'text-m-primary'
-          : 'peer-placeholder-shown:text-m-muted text-black',
+        : isReadonly.value
+          ? isFilled.value ? 'text-black' : 'text-m-muted'
+          : isOpen.value
+            ? 'text-m-primary'
+            : 'peer-placeholder-shown:text-m-muted text-black',
     props.labelClass,
   ),
 )
@@ -224,6 +234,7 @@ const mergedLabelClass = computed(() =>
 const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isOpen.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return 'text-m-muted'

app/components/malio/input/Input.test.ts

@@ -24,6 +24,7 @@ type InputProps = {
   iconPosition?: 'left' | 'right'
   iconSize?: string | number
   iconColor?: string
+  reserveMessageSpace?: boolean
 }
 
 const InputForTest = Input as DefineComponent<InputProps>
@@ -53,6 +54,16 @@ describe('MalioInputText', () => {
     expect(wrapper.get('label').text()).toBe('labelTest')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountInput({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountInput({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('applies the name attribute', () => {
     const wrapper = mountInput({name: 'nameTest'})
 
@@ -269,6 +280,25 @@ describe('MalioInputText', () => {
     expect(p.classes()).toContain('min-h-[1rem]')
   })
 
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountInput({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountInput({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountInput({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
+
   it('does not render label when label prop is missing', () => {
     const wrapper = mountInput({labelClass: 'text-red-500'})
 
@@ -324,4 +354,25 @@ describe('MalioInputText', () => {
 
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
   })
+
+  it('readonly : bordure noire même vide, pas de grow/bleu', () => {
+    const wrapper = mountInput({label: 'Champ', readonly: true})
+    const field = wrapper.get('input')
+    expect(field.classes()).toContain('border-black')
+    expect(field.classes()).not.toContain('border-m-muted')
+    expect(field.classes()).not.toContain('focus:border-m-primary')
+    expect(field.classes()).not.toContain('grow-height')
+  })
+
+  it('readonly vide : label gris, pas de bleu', () => {
+    const wrapper = mountInput({label: 'Champ', readonly: true})
+    expect(wrapper.get('label').classes()).not.toContain('peer-focus:text-m-primary')
+    expect(wrapper.get('label').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label noir et icône noire', () => {
+    const wrapper = mountInput({label: 'Champ', readonly: true, modelValue: 'hello', iconName: 'mdi:key-outline'})
+    expect(wrapper.get('label').classes()).toContain('text-black')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
+  })
 })

app/components/malio/input/InputAmount.test.ts

@@ -24,6 +24,7 @@ type InputAmountProps = {
   iconPosition?: 'left' | 'right'
   iconSize?: string | number
   iconColor?: string
+  reserveMessageSpace?: boolean
 }
 
 const InputAmountForTest = InputAmount as DefineComponent<InputAmountProps>
@@ -174,4 +175,59 @@ describe('MalioInputAmount', () => {
 
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountInputAmount({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountInputAmount({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('readonly : bordure noire même vide, pas de grow/bleu', () => {
+    const wrapper = mountInputAmount({label: 'Champ', readonly: true})
+    const field = wrapper.get('input')
+    expect(field.classes()).toContain('border-black')
+    expect(field.classes()).not.toContain('border-m-muted')
+    expect(field.classes()).not.toContain('focus:border-m-primary')
+    expect(field.classes()).not.toContain('grow-height')
+  })
+
+  it('readonly vide : label gris, pas de bleu', () => {
+    const wrapper = mountInputAmount({label: 'Champ', readonly: true})
+    expect(wrapper.get('label').classes()).not.toContain('peer-focus:text-m-primary')
+    expect(wrapper.get('label').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly vide : icône en text-m-muted', () => {
+    const wrapper = mountInputAmount({label: 'Champ', readonly: true})
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label noir et icône noire', () => {
+    const wrapper = mountInputAmount({label: 'Champ', readonly: true, modelValue: '12.50'})
+    expect(wrapper.get('label').classes()).toContain('text-black')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountInputAmount({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountInputAmount({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountInputAmount({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputAmount.vue

@@ -30,7 +30,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -44,6 +44,7 @@
 
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -51,7 +52,8 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] min-h-[1rem]',
+          'mt-1 text-xs ml-[2px]',
+          reserveMessageSpace ? 'min-h-[1rem]' : '',
         ]"
     >
       {{ hint || error || success }}
@@ -63,6 +65,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
 
@@ -88,6 +91,7 @@ const props = withDefaults(
     iconPosition?: 'left' | 'right'
     iconSize?: string | number
     iconColor?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -110,6 +114,7 @@ const props = withDefaults(
     success: '',
     iconSize: 20,
     iconColor: 'text-m-muted',
+    reserveMessageSpace: true,
   },
 )
 
@@ -121,10 +126,15 @@ const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-amount-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
-const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
+const shouldFloatLabel = computed(() =>
+  isReadonly.value
+    ? isFilled.value
+    : isFocused.value || currentValue.value.length > 0,
+)
 
 const mergedGroupClass = computed(() =>
   twMerge(
@@ -134,31 +144,39 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    isReadonly.value ? '' : 'grow-height',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
     hasError.value
       ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-        : 'focus:border-m-primary',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    isReadonly.value ? 'cursor-default' : '',
     props.inputClass,
     iconInputPaddingClass.value,
-    focusPaddingClass.value,
+    isReadonly.value ? '' : focusPaddingClass.value,
   ),
 )
 const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
-    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    shouldFloatLabel.value
+      ? `-translate-y-[1.25rem] scale-90${isReadonly.value ? '' : ' peer-focus:-translate-y-[1.55rem]'}`
+      : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : disabled.value
           ? 'text-m-muted'
-          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+          : isReadonly.value
+            ? isFilled.value ? 'text-black' : 'text-m-muted'
+            : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
@@ -234,6 +252,7 @@ const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
   if (disabled.value) return props.iconColor
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isFocused.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return props.iconColor

app/components/malio/input/InputAutocomplete.test.ts

@@ -36,6 +36,7 @@ type InputAutocompleteProps = {
   noResultsText?: string
   loadingText?: string
   minSearchText?: string
+  reserveMessageSpace?: boolean
 }
 
 const InputAutocompleteForTest = InputAutocomplete as DefineComponent<InputAutocompleteProps>
@@ -65,6 +66,16 @@ describe('MalioInputAutocomplete', () => {
     expect(wrapper.get('label').text()).toBe('Pays')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('renders with type combobox role', () => {
     const wrapper = mountComponent()
 
@@ -506,4 +517,50 @@ describe('MalioInputAutocomplete', () => {
     expect(inputClasses).not.toContain('!border-b-0')
     expect(inputClasses).toContain('!border-b-transparent')
   })
+
+  it('readonly : bordure noire même vide, pas de grow/bleu', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    const field = wrapper.get('input')
+    expect(field.classes()).toContain('border-black')
+    expect(field.classes()).not.toContain('border-m-muted')
+    expect(field.classes()).not.toContain('focus:border-m-primary')
+    expect(field.classes()).not.toContain('grow-height')
+  })
+
+  it('readonly vide : label gris, pas de bleu', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    expect(wrapper.get('label').classes()).not.toContain('peer-focus:text-m-primary')
+    expect(wrapper.get('label').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly vide : chevron en text-m-muted', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label noir et icône noire', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true, modelValue: 'fr', options, iconName: 'mdi:magnify', iconPosition: 'left'})
+    expect(wrapper.get('label').classes()).toContain('text-black')
+    expect(wrapper.get('[data-test="icon-left"]').classes()).toContain('text-black')
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountComponent({label: 'Champ', options})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountComponent({label: 'Champ', options, reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountComponent({label: 'Champ', options, reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputAutocomplete.vue

@@ -33,7 +33,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -136,10 +136,12 @@
       </ul>
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
         hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs min-h-[1rem]',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
       ]"
     >
       {{ hint || error || success }}
@@ -151,6 +153,7 @@
 import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputAutocomplete', inheritAttrs: false})
 
@@ -187,6 +190,7 @@ const props = withDefaults(
     noResultsText?: string
     loadingText?: string
     minSearchText?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -215,6 +219,7 @@ const props = withDefaults(
     noResultsText: 'Aucun résultat',
     loadingText: 'Chargement…',
     minSearchText: 'Tapez pour rechercher',
+    reserveMessageSpace: true,
   },
 )
 
@@ -248,7 +253,12 @@ const hasSelection = computed(() =>
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isFilled = computed(() => inputValue.value.trim().length > 0 || hasSelection.value)
-const shouldFloatLabel = computed(() => isFocused.value || inputValue.value.length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
+const shouldFloatLabel = computed(() =>
+  isReadonly.value
+    ? isFilled.value
+    : isFocused.value || inputValue.value.length > 0,
+)
 
 const showMinSearch = computed(() =>
   props.minSearchLength > 0 && inputValue.value.length < props.minSearchLength,
@@ -310,8 +320,11 @@ const labelPositionClass = computed(() =>
 
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    isReadonly.value ? '' : 'grow-height',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     props.disabled
       ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted'
       : 'cursor-text',
@@ -319,7 +332,8 @@ const mergedInputClass = computed(() =>
       ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-        : 'focus:border-m-primary',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    isReadonly.value ? 'cursor-default' : '',
     isOpen.value ? '!rounded-b-none !border-b-transparent' : '',
     props.inputClass,
     iconInputPaddingClass.value,
@@ -337,7 +351,9 @@ const mergedLabelClass = computed(() =>
         ? 'text-m-success'
         : props.disabled
           ? 'text-m-muted'
-          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+          : isReadonly.value
+            ? isFilled.value ? 'text-black' : 'text-m-muted'
+            : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
@@ -346,6 +362,7 @@ const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
   if (props.disabled) return props.iconColor
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isFocused.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return props.iconColor
@@ -354,6 +371,7 @@ const iconStateClass = computed(() => {
 const chevronColorClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isOpen.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return 'text-m-muted'

app/components/malio/input/InputEmail.test.ts

@@ -23,6 +23,8 @@ type InputEmailProps = {
   iconPosition?: 'left' | 'right'
   iconSize?: string | number
   iconColor?: string
+  lowercase?: boolean
+  reserveMessageSpace?: boolean
 }
 
 const InputEmailForTest = InputEmail as DefineComponent<InputEmailProps>
@@ -52,6 +54,16 @@ describe('MalioInputEmail', () => {
     expect(wrapper.get('label').text()).toBe('Adresse email')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('has type email', () => {
     const wrapper = mountComponent()
 
@@ -225,4 +237,82 @@ describe('MalioInputEmail', () => {
 
     expect(wrapper.get('input').attributes('autocomplete')).toBe('email')
   })
+
+  it('supprime tous les espaces saisis', async () => {
+    const wrapper = mountComponent()
+    await wrapper.get('input').setValue('  a b @ c.com ')
+    const emits = wrapper.emitted('update:modelValue')!
+    expect(emits[emits.length - 1]).toEqual(['ab@c.com'])
+    expect(wrapper.get('input').element.value).toBe('ab@c.com')
+  })
+
+  it('conserve la casse par défaut', async () => {
+    const wrapper = mountComponent()
+    await wrapper.get('input').setValue('User@Example.COM')
+    const emits = wrapper.emitted('update:modelValue')!
+    expect(emits[emits.length - 1]).toEqual(['User@Example.COM'])
+  })
+
+  it('met en minuscules quand lowercase est vrai', async () => {
+    const wrapper = mountComponent({lowercase: true})
+    await wrapper.get('input').setValue('User@Example.COM')
+    const emits = wrapper.emitted('update:modelValue')!
+    expect(emits[emits.length - 1]).toEqual(['user@example.com'])
+  })
+
+  it('émet la valeur sanitisée en mode contrôlé', async () => {
+    const wrapper = mountComponent({modelValue: ''})
+    await wrapper.get('input').setValue('  a b @ c.com ')
+    expect(wrapper.emitted('update:modelValue')!.at(-1)).toEqual(['ab@c.com'])
+  })
+
+  it('resynchronise le DOM en mode contrôlé même quand la valeur sanitisée égale déjà modelValue', async () => {
+    // L'utilisateur ajoute un espace en fin alors que la valeur nettoyée vaut déjà modelValue.
+    // Le parent ne « changera » pas modelValue → Vue ne re-patche pas le DOM ; l'écriture
+    // manuelle target.value = sanitized est donc indispensable pour retirer l'espace affiché.
+    const wrapper = mountComponent({modelValue: 'ab@c.com'})
+    const input = wrapper.get('input')
+    await input.setValue('ab@c.com ')
+    expect(input.element.value).toBe('ab@c.com')
+  })
+
+  it('readonly : bordure noire même vide, pas de grow/bleu', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    const field = wrapper.get('input')
+    expect(field.classes()).toContain('border-black')
+    expect(field.classes()).not.toContain('border-m-muted')
+    expect(field.classes()).not.toContain('focus:border-m-primary')
+    expect(field.classes()).not.toContain('grow-height')
+  })
+
+  it('readonly vide : label gris, pas de bleu', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    expect(wrapper.get('label').classes()).not.toContain('peer-focus:text-m-primary')
+    expect(wrapper.get('label').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label noir et icône noire', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true, modelValue: 'user@example.com'})
+    expect(wrapper.get('label').classes()).toContain('text-black')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountComponent({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountComponent({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputEmail.vue

@@ -28,7 +28,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -42,6 +42,7 @@
 
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -49,7 +50,8 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] min-h-[1rem]',
+          'mt-1 text-xs ml-[2px]',
+          reserveMessageSpace ? 'min-h-[1rem]' : '',
         ]"
     >
       {{ hint || error || success }}
@@ -62,6 +64,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputEmail', inheritAttrs: false})
 
@@ -85,6 +88,8 @@ const props = withDefaults(
     iconPosition?: 'left' | 'right'
     iconSize?: string | number
     iconColor?: string
+    lowercase?: boolean
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -105,6 +110,8 @@ const props = withDefaults(
     success: '',
     iconSize: 24,
     iconColor: 'text-m-muted',
+    lowercase: false,
+    reserveMessageSpace: true,
   },
 )
 
@@ -116,10 +123,15 @@ const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-email-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
-const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
+const shouldFloatLabel = computed(() =>
+  isReadonly.value
+    ? isFilled.value
+    : isFocused.value || currentValue.value.length > 0,
+)
 const mergedGroupClass = computed(() =>
   twMerge(
     'relative flex h-12 w-full items-center',
@@ -128,31 +140,39 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    isReadonly.value ? '' : 'grow-height',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
     hasError.value
       ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-        : 'focus:border-m-primary',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    isReadonly.value ? 'cursor-default' : '',
     props.inputClass,
     iconInputPaddingClass.value,
-    focusPaddingClass.value,
+    isReadonly.value ? '' : focusPaddingClass.value,
   ),
 )
 const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
-    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    shouldFloatLabel.value
+      ? `-translate-y-[1.25rem] scale-90${isReadonly.value ? '' : ' peer-focus:-translate-y-[1.55rem]'}`
+      : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : disabled.value
           ? 'text-m-muted'
-          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+          : isReadonly.value
+            ? isFilled.value ? 'text-black' : 'text-m-muted'
+            : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
@@ -169,12 +189,37 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void
 }>()
 
+const sanitizeEmail = (v: string) => {
+  let out = v.replace(/\s+/g, '')
+  if (props.lowercase) out = out.toLowerCase()
+  return out
+}
+
 const onInput = (event: Event) => {
   const target = event.target as HTMLInputElement
-  if (!isControlled.value) {
-    localValue.value = target.value
+  const raw = target.value
+  const sanitized = sanitizeEmail(raw)
+
+  if (sanitized !== raw) {
+    // `<input type="email">` ne supporte pas l'API de sélection :
+    // selectionStart vaut null et setSelectionRange lève en navigateur.
+    // (En jsdom selectionStart peut renvoyer un nombre, d'où le code gardé ci-dessous.)
+    const caret = target.selectionStart
+    target.value = sanitized
+    if (caret !== null) {
+      const newCaret = sanitizeEmail(raw.slice(0, caret)).length
+      try {
+        target.setSelectionRange(newCaret, newCaret)
+      } catch {
+        /* type d'input sans support de sélection — ignore */
+      }
+    }
   }
-  emit('update:modelValue', target.value)
+
+  if (!isControlled.value) {
+    localValue.value = sanitized
+  }
+  emit('update:modelValue', sanitized)
 }
 
 const iconInputPaddingClass = computed(() => {
@@ -203,6 +248,7 @@ const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
   if (disabled.value) return props.iconColor
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isFocused.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return props.iconColor

app/components/malio/input/InputNumber.test.ts

@@ -6,9 +6,13 @@ import InputNumber from './InputNumber.vue'
 type InputNumberProps = {
   modelValue?: string | null
   label?: string
+  required?: boolean
   readonly?: boolean
   min?: number | string
   max?: number | string
+  error?: string
+  hint?: string
+  reserveMessageSpace?: boolean
 }
 
 const InputNumberForTest = InputNumber as DefineComponent<InputNumberProps>
@@ -162,4 +166,33 @@ describe('MalioInputNumber', () => {
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['5'])
     expect(input.element.value).toBe('5')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountInputNumber({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountInputNumber({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountInputNumber({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountInputNumber({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountInputNumber({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputNumber.vue

@@ -6,7 +6,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
       <button
         type="button"
@@ -51,6 +51,7 @@
 
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -58,7 +59,8 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'text-xs ml-[2px] min-h-[1rem]',
+          'text-xs ml-[2px]',
+          reserveMessageSpace ? 'min-h-[1rem]' : '',
         ]"
     >
       {{ hint || error || success }}
@@ -70,6 +72,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputNumber', inheritAttrs: false})
 
@@ -90,6 +93,7 @@ const props = withDefaults(
     hint?: string
     error?: string
     success?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -107,6 +111,7 @@ const props = withDefaults(
     hint: '',
     error: '',
     success: '',
+    reserveMessageSpace: true,
   },
 )
 

app/components/malio/input/InputPassword.test.ts

@@ -22,6 +22,7 @@ type InputPasswordProps = {
   error?: string
   success?: string
   displayIcon?: boolean
+  reserveMessageSpace?: boolean
 }
 
 const InputPasswordForTest = InputPassword as DefineComponent<InputPasswordProps>
@@ -51,6 +52,16 @@ describe('MalioInputPassword', () => {
     expect(wrapper.get('label').text()).toBe('Mot de passe')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('has type password by default', () => {
     const wrapper = mountComponent()
 
@@ -185,4 +196,55 @@ describe('MalioInputPassword', () => {
 
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
   })
+
+  it('readonly : bordure noire même vide, pas de grow/bleu', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    const field = wrapper.get('input')
+    expect(field.classes()).toContain('border-black')
+    expect(field.classes()).not.toContain('border-m-muted')
+    expect(field.classes()).not.toContain('focus:border-m-primary')
+    expect(field.classes()).not.toContain('grow-height')
+  })
+
+  it('readonly vide : label gris, pas de bleu', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    expect(wrapper.get('label').classes()).not.toContain('peer-focus:text-m-primary')
+    expect(wrapper.get('label').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly vide : icône en text-m-muted', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label noir et icône noire', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true, modelValue: 'secret'})
+    expect(wrapper.get('label').classes()).toContain('text-black')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
+  })
+
+  it('readonly : eye toggle reste cliquable', async () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    await wrapper.get('[data-test="icon"]').trigger('click')
+    expect(wrapper.get('input').attributes('type')).toBe('text')
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountComponent({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountComponent({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputPassword.vue

@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -47,6 +47,7 @@
 
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -54,7 +55,8 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] min-h-[1rem]',
+          'mt-1 text-xs ml-[2px]',
+          reserveMessageSpace ? 'min-h-[1rem]' : '',
         ]"
     >
       {{ hint || error || success }}
@@ -67,6 +69,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputPassword', inheritAttrs: false})
 
@@ -89,6 +92,7 @@ const props = withDefaults(
     error?: string
     success?: string
     displayIcon?: boolean
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -108,6 +112,7 @@ const props = withDefaults(
     error: '',
     success: '',
     displayIcon: true,
+    reserveMessageSpace: true,
   },
 )
 
@@ -124,10 +129,15 @@ const toggleVisibility = () => {
 const inputId = computed(() => props.id?.toString() || `malio-input-password-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
-const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
+const shouldFloatLabel = computed(() =>
+  isReadonly.value
+    ? isFilled.value
+    : isFocused.value || currentValue.value.length > 0,
+)
 const mergedGroupClass = computed(() =>
   twMerge(
     'relative flex h-12 w-full items-center',
@@ -136,16 +146,20 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    isReadonly.value ? '' : 'grow-height',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
     hasError.value
       ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-        : 'focus:border-m-primary',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    isReadonly.value ? 'cursor-default' : '',
     props.displayIcon ? '!pr-10' : '',
-    'focus:pl-[11px]',
+    isReadonly.value ? '' : 'focus:pl-[11px]',
     props.inputClass,
   ),
 )
@@ -153,14 +167,18 @@ const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     'left-3',
-    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    shouldFloatLabel.value
+      ? `-translate-y-[1.25rem] scale-90${isReadonly.value ? '' : ' peer-focus:-translate-y-[1.55rem]'}`
+      : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : disabled.value
           ? 'text-m-muted'
-          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+          : isReadonly.value
+            ? isFilled.value ? 'text-black' : 'text-m-muted'
+            : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
@@ -191,6 +209,7 @@ const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
   if (disabled.value) return 'text-m-muted'
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isFocused.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return 'text-m-muted'

app/components/malio/input/InputPhone.test.ts

@@ -27,6 +27,7 @@ type InputPhoneProps = {
   addable?: boolean
   addIconName?: string
   addButtonLabel?: string
+  reserveMessageSpace?: boolean
 }
 
 const InputPhoneForTest = InputPhone as DefineComponent<InputPhoneProps>
@@ -56,6 +57,16 @@ describe('MalioInputPhone', () => {
     expect(wrapper.get('label').text()).toBe('Téléphone')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('has type tel', () => {
     const wrapper = mountComponent()
 
@@ -264,10 +275,43 @@ describe('MalioInputPhone', () => {
     expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
   })
 
-  it('disables add button when readonly', () => {
+  it('add button is not natively disabled in readonly (onAdd guard blocks the action)', () => {
     const wrapper = mountComponent({addable: true, readonly: true})
 
-    expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeUndefined()
+  })
+
+  it('readonly : border-black appliqué sur l\'input', () => {
+    const wrapper = mountComponent({label: 'Tel', readonly: true})
+    expect(wrapper.get('input').classes()).toContain('border-black')
+  })
+
+  it('readonly : icône en text-m-muted quand vide', () => {
+    const wrapper = mountComponent({label: 'Tel', readonly: true})
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly : icône en text-black quand rempli', () => {
+    const wrapper = mountComponent({label: 'Tel', readonly: true, modelValue: '+33612345678'})
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
+  })
+
+  it('readonly : pas d\'apparence désactivée (pas opacity-40)', () => {
+    const wrapper = mountComponent({label: 'Tel', addable: true, readonly: true})
+    // opacity-40 was only ever applied to the add button, not the input
+    expect(wrapper.get('[data-test="add-button"]').classes()).not.toContain('opacity-40')
+    // and the input is not natively disabled in readonly:
+    expect(wrapper.get('input').attributes('disabled')).toBeUndefined()
+  })
+
+  it('readonly vide : label en text-m-muted', () => {
+    const wrapper = mountComponent({label: 'Tel', readonly: true})
+    expect(wrapper.get('label').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label en text-black', () => {
+    const wrapper = mountComponent({label: 'Tel', readonly: true, modelValue: '+33612345678'})
+    expect(wrapper.get('label').classes()).toContain('text-black')
   })
 
   it('renders the default add icon (mdi:plus)', () => {
@@ -340,4 +384,23 @@ describe('MalioInputPhone', () => {
 
     expect(wrapper.emitted('update:modelValue')).toBeDefined()
   })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountComponent({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountComponent({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputPhone.vue

@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -44,7 +44,7 @@
       <button
         v-if="addable"
         type="button"
-        :disabled="disabled || readonly"
+        :disabled="disabled"
         :aria-label="addButtonLabel"
         data-test="add-button"
         :class="mergedAddButtonClass"
@@ -60,6 +60,7 @@
 
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -67,7 +68,8 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] min-h-[1rem]',
+          'mt-1 text-xs ml-[2px]',
+          reserveMessageSpace ? 'min-h-[1rem]' : '',
         ]"
     >
       {{ hint || error || success }}
@@ -82,6 +84,7 @@ import {vMaska} from 'maska/vue'
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputPhone', inheritAttrs: false})
 
@@ -109,6 +112,7 @@ const props = withDefaults(
     addable?: boolean
     addIconName?: string
     addButtonLabel?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -133,6 +137,7 @@ const props = withDefaults(
     addable: false,
     addIconName: 'mdi:plus',
     addButtonLabel: 'Ajouter un numéro',
+    reserveMessageSpace: true,
   },
 )
 
@@ -144,10 +149,15 @@ const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-phone-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
-const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
+const shouldFloatLabel = computed(() =>
+  isReadonly.value
+    ? isFilled.value
+    : isFocused.value || currentValue.value.length > 0,
+)
 const mergedGroupClass = computed(() =>
   twMerge(
     'relative flex h-12 w-full items-center',
@@ -156,31 +166,39 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    isReadonly.value ? '' : 'grow-height',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
     hasError.value
       ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-        : 'focus:border-m-primary',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    isReadonly.value ? 'cursor-default' : '',
     props.inputClass,
     iconInputPaddingClass.value,
-    focusPaddingClass.value,
+    isReadonly.value ? '' : focusPaddingClass.value,
   ),
 )
 const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
-    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    shouldFloatLabel.value
+      ? `-translate-y-[1.25rem] scale-90${isReadonly.value ? '' : ' peer-focus:-translate-y-[1.55rem]'}`
+      : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : disabled.value
           ? 'text-m-muted'
-          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+          : isReadonly.value
+            ? isFilled.value ? 'text-black' : 'text-m-muted'
+            : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
@@ -189,7 +207,7 @@ const mergedAddButtonClass = computed(() =>
   twMerge(
     'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-70',
     iconStateClass.value,
-    (props.disabled || props.readonly) ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
+    props.disabled ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
   ),
 )
 
@@ -249,6 +267,7 @@ const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
   if (disabled.value) return props.iconColor
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isFocused.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return props.iconColor

app/components/malio/input/InputRichText.test.ts

@@ -19,6 +19,8 @@ type InputRichTextProps = {
   groupClass?: string
   labelClass?: string
   editorClass?: string
+  required?: boolean
+  reserveMessageSpace?: boolean
 }
 
 const InputRichTextForTest = InputRichText as DefineComponent<InputRichTextProps>
@@ -155,6 +157,18 @@ describe('MalioInputRichText', () => {
     expect(editorContent.attributes('aria-describedby')).toBe('rt-aria-describedby')
   })
 
+  it('expose aria-required quand required est vrai', async () => {
+    const wrapper = await mountComponent({required: true})
+
+    expect(wrapper.find('[aria-required="true"]').exists()).toBe(true)
+  })
+
+  it('n\'expose pas aria-required par défaut', async () => {
+    const wrapper = await mountComponent()
+
+    expect(wrapper.find('[aria-required="true"]').exists()).toBe(false)
+  })
+
   it('renders initial markdown content visually', async () => {
     const wrapper = await mountComponent({modelValue: '## Mon titre\n\nUn paragraphe.'})
 
@@ -162,4 +176,35 @@ describe('MalioInputRichText', () => {
     expect(html).toContain('Mon titre')
     expect(html).toContain('Un paragraphe.')
   })
+
+  it('affiche l\'astérisque quand required est vrai', async () => {
+    const wrapper = await mountComponent({label: 'Champ', required: true})
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', async () => {
+    const wrapper = await mountComponent({label: 'Champ'})
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('réserve l’espace message par défaut même sans message', async () => {
+    const wrapper = await mountComponent({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', async () => {
+    const wrapper = await mountComponent({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', async () => {
+    const wrapper = await mountComponent({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputRichText.vue

@@ -5,7 +5,7 @@
       :for="editorId"
       :class="mergedLabelClass"
     >
-      {{ label }}
+      {{ label }}<MalioRequiredMark v-if="required" />
     </label>
 
     <!-- Mode lecture seule (rendu uniquement) -->
@@ -22,6 +22,7 @@
       v-else
       :id="editorId"
       :class="mergedEditorWrapperClass"
+      :aria-required="required || undefined"
       @click="focusEditor"
     >
       <div
@@ -184,6 +185,7 @@
     </div>
 
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${editorId}-describedby`"
       :class="[
         hasError
@@ -191,7 +193,8 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 text-xs ml-[2px] min-h-[1rem]',
+        'mt-1 text-xs ml-[2px]',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
       ]"
     >
       {{ error || success || hint }}
@@ -210,6 +213,7 @@ import Color from '@tiptap/extension-color'
 import Highlight from '@tiptap/extension-highlight'
 import { Markdown } from 'tiptap-markdown'
 import { twMerge } from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({ name: 'MalioInputRichText', inheritAttrs: false })
 
@@ -232,6 +236,8 @@ const props = withDefaults(
     groupClass?: string
     labelClass?: string
     editorClass?: string
+    required?: boolean
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -249,6 +255,8 @@ const props = withDefaults(
     groupClass: '',
     labelClass: '',
     editorClass: '',
+    required: false,
+    reserveMessageSpace: true,
   },
 )
 
@@ -308,6 +316,7 @@ const mergedReadonlyClass = computed(() =>
     'prose-headings:font-semibold prose-a:text-m-primary',
     'prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none',
     'prose-pre:bg-m-text prose-pre:text-white',
+    '[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-inherit',
     props.editorClass,
   ),
 )
@@ -486,7 +495,7 @@ onMounted(() => {
     ],
     editorProps: {
       attributes: {
-        class: 'prose prose-sm max-w-none w-full p-3 focus:outline-none prose-headings:font-semibold prose-a:text-m-primary prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-m-text prose-pre:text-white',
+        class: 'prose prose-sm max-w-none w-full p-3 focus:outline-none prose-headings:font-semibold prose-a:text-m-primary prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-m-text prose-pre:text-white [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-inherit',
       },
     },
     onUpdate: () => {

app/components/malio/input/InputText.vue

@@ -30,7 +30,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -44,6 +44,7 @@
 
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -51,7 +52,8 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] min-h-[1rem]',
+          'mt-1 text-xs ml-[2px]',
+          reserveMessageSpace ? 'min-h-[1rem]' : '',
         ]"
     >
       {{ hint || error || success }}
@@ -66,6 +68,7 @@ import {vMaska} from 'maska/vue'
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputText', inheritAttrs: false})
 
@@ -93,6 +96,7 @@ const props = withDefaults(
     iconSize?: string | number
     iconColor?: string
     mask?: string | MaskInputOptions
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -116,6 +120,7 @@ const props = withDefaults(
     iconSize: 24,
     iconColor: 'text-m-muted',
     mask: undefined,
+    reserveMessageSpace: true,
   },
 )
 
@@ -127,10 +132,15 @@ const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
-const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
+const shouldFloatLabel = computed(() =>
+  isReadonly.value
+    ? isFilled.value
+    : isFocused.value || currentValue.value.length > 0,
+)
 const mergedGroupClass = computed(() =>
   twMerge(
     'relative flex h-12 w-full items-center',
@@ -139,31 +149,39 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    isReadonly.value ? '' : 'grow-height',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
     hasError.value
       ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-        : 'focus:border-m-primary',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    isReadonly.value ? 'cursor-default' : '',
     props.inputClass,
     iconInputPaddingClass.value,
-    focusPaddingClass.value,
+    isReadonly.value ? '' : focusPaddingClass.value,
   ),
 )
 const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
-    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    shouldFloatLabel.value
+      ? `-translate-y-[1.25rem] scale-90${isReadonly.value ? '' : ' peer-focus:-translate-y-[1.55rem]'}`
+      : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : disabled.value
           ? 'text-m-muted'
-          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+          : isReadonly.value
+            ? isFilled.value ? 'text-black' : 'text-m-muted'
+            : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
@@ -214,6 +232,7 @@ const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
   if (disabled.value) return props.iconColor
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isFocused.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return props.iconColor

app/components/malio/input/InputTextArea.test.ts

@@ -21,6 +21,7 @@ type InputTextAreaProps = {
   error?: string
   success?: string
   rounded?: string
+  reserveMessageSpace?: boolean
 }
 
 const InputTextAreaForTest = InputTextArea as DefineComponent<InputTextAreaProps>
@@ -183,4 +184,53 @@ describe('MalioInputTextArea', () => {
 
     expect(wrapper.get('textarea').classes()).not.toContain('textarea-scrollbar-primary')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ', required: true}})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ'}})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('readonly : bordure noire même vide, pas de bleu', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ', readonly: true}})
+    const field = wrapper.get('textarea')
+    expect(field.classes()).toContain('border-black')
+    expect(field.classes()).not.toContain('border-m-muted')
+    expect(field.classes()).not.toContain('focus:border-m-primary')
+  })
+
+  it('readonly vide : label gris, pas de bleu focus', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ', readonly: true}})
+    expect(wrapper.get('label').classes()).toContain('text-m-muted')
+    // En readonly, pas de couleur primary sur le label
+    expect(wrapper.get('label').classes()).not.toContain('text-m-primary')
+  })
+
+  it('readonly rempli : label noir', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ', readonly: true, modelValue: 'du texte'}})
+    expect(wrapper.get('label').classes()).toContain('text-black')
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ'}})
+    const msg = wrapper.find('[data-test="message-line"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ', reserveMessageSpace: false}})
+    expect(wrapper.find('[data-test="message-line"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mount(InputTextAreaForTest, {props: {label: 'Champ', reserveMessageSpace: false, error: 'Erreur'}})
+    const msg = wrapper.find('[data-test="message-line"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputTextArea.vue

@@ -8,14 +8,14 @@
         :autocomplete="autocomplete"
         class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
         :class="[
-        isFilled ? 'border-black' : 'border-m-muted',
-        disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
+        isReadonly ? 'border-black' : (isFilled ? 'border-black' : 'border-m-muted'),
+        disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : (isReadonly ? 'cursor-default' : 'cursor-text'),
         hasError
           ? 'border-m-danger focus:border-m-danger'
           : hasSuccess
             ? 'border-m-success focus:border-m-success'
-            : 'focus:border-m-primary',
-        isFocused ? 'textarea-scrollbar-primary' : '',
+            : isReadonly ? '' : 'focus:border-m-primary',
+        isReadonly ? '' : (isFocused ? 'textarea-scrollbar-primary' : ''),
         textInput,
         showCounterComputed ? 'pb-6' : '',
         rounded,
@@ -47,11 +47,13 @@
           ? 'text-m-success'
           : disabled
             ? 'text-m-muted'
-            : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
+            : isReadonly
+              ? (isFilled ? 'text-black' : 'text-m-muted')
+              : (isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted'),
         textLabel,
         ]"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
       <span
         v-if="showCounterComputed"
@@ -61,7 +63,10 @@
       </span>
     </div>
     <div
-      class="mt-1 flex items-center justify-between gap-2 text-xs min-h-[1rem]"
+      v-if="reserveMessageSpace || hint || error || success"
+      data-test="message-line"
+      class="mt-1 flex items-center justify-between gap-2 text-xs"
+      :class="reserveMessageSpace ? 'min-h-[1rem]' : ''"
     >
       <p
         :id="`${inputId}-describedby`"
@@ -83,6 +88,7 @@
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
 
@@ -111,6 +117,7 @@ const props = withDefaults(
     success?: string
     rounded?: string
     groupClass?: string
+    reserveMessageSpace?: boolean
 
   }>(),
   {
@@ -137,11 +144,14 @@ const props = withDefaults(
     minResizeHeight: 40,
     maxResizeHeight: 320,
     groupClass: '',
+    reserveMessageSpace: true,
   },
 )
 
 const mergedGroupClass = computed(() =>
-  twMerge('flex flex-col w-full', props.groupClass),
+  // pt-1 (4px) aligne le haut de la textarea avec les inputs floating-label,
+  // qui centrent un champ de 40px dans un groupe h-12 (≈ 4px de décalage en haut).
+  twMerge('flex flex-col w-full pt-1', props.groupClass),
 )
 
 const attrs = useAttrs()
@@ -152,9 +162,15 @@ const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-textarea-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
-const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
+const isFilled = computed(() => currentValue.value.trim().length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
+const shouldFloatLabel = computed(() =>
+  isReadonly.value
+    ? isFilled.value
+    : isFocused.value || currentValue.value.length > 0,
+)
 const rowsCount = computed(() => Math.max(1, Number(props.size || 3)))
 const currentLength = computed(() => (currentValue.value ?? '').length)
 const showCounterComputed = computed(() =>
@@ -168,7 +184,6 @@ const textareaStyle = computed(() => ({
   minHeight: toCssSize(props.minResizeHeight),
   maxHeight: toCssSize(props.maxResizeHeight),
 }))
-const isFilled = computed(() => currentValue.value.trim().length > 0)
 const describedBy = computed(() =>
   (hasError.value || hasSuccess.value || !!props.hint) ? `${inputId.value}-describedby` : undefined,
 )

app/components/malio/input/InputUpload.test.ts

@@ -1,4 +1,4 @@
-import {describe, expect, it} from 'vitest'
+import {describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
@@ -12,11 +12,14 @@ type InputUploadProps = {
   labelClass?: string
   groupClass?: string
   disabled?: boolean
+  readonly?: boolean
   hint?: string
   error?: string
   success?: string
   displayIcon?: boolean
   accept?: string
+  required?: boolean
+  reserveMessageSpace?: boolean
 }
 
 const InputUploadForTest = InputUpload as DefineComponent<InputUploadProps>
@@ -167,6 +170,11 @@ describe('MalioInputUpload', () => {
     expect(wrapper.get('input[type="text"]').attributes('aria-invalid')).toBe('false')
   })
 
+  it('expose aria-required sur le champ visible quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+    expect(wrapper.get('input[type="text"]').attributes('aria-required')).toBe('true')
+  })
+
   it('passes accept attribute to file input', () => {
     const wrapper = mountComponent({accept: '.pdf,.doc'})
 
@@ -186,4 +194,70 @@ describe('MalioInputUpload', () => {
 
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountComponent({label: 'Champ', required: true})
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('readonly : bordure noire même vide, pas de grow/bleu', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    const field = wrapper.get('input[type="text"]')
+    expect(field.classes()).toContain('border-black')
+    expect(field.classes()).not.toContain('border-m-muted')
+    expect(field.classes()).not.toContain('grow-height')
+    expect(field.classes()).not.toContain('focus:border-m-primary')
+  })
+
+  it('readonly vide : label gris, pas de bleu', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    const label = wrapper.get('label')
+    expect(label.classes()).not.toContain('peer-focus:text-m-primary')
+    expect(label.classes()).toContain('text-m-muted')
+  })
+
+  it('readonly vide : icône en text-m-muted', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label noir + icône noire', () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true, modelValue: 'fichier.pdf'})
+    expect(wrapper.get('label').classes()).toContain('text-black')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
+  })
+
+  it('readonly empêche l\'ouverture du sélecteur de fichier', async () => {
+    const wrapper = mountComponent({label: 'Champ', readonly: true})
+    const fileInput = wrapper.get('input[type="file"]').element as HTMLInputElement
+    const clickSpy = vi.spyOn(fileInput, 'click')
+    await wrapper.get('input[type="text"]').trigger('click')
+    expect(clickSpy).not.toHaveBeenCalled()
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountComponent({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountComponent({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountComponent({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/input/InputUpload.vue

@@ -9,6 +9,7 @@
         :accept="accept"
         class="hidden"
         :disabled="disabled"
+        :required="required"
         @change="onFileChange"
       >
 
@@ -19,6 +20,7 @@
         :value="currentDisplayValue"
         :readonly="true"
         :aria-invalid="!!error"
+        :aria-required="required || undefined"
         :aria-describedby="describedBy"
         v-bind="attrs"
         placeholder="_"
@@ -33,7 +35,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <IconifyIcon
@@ -50,6 +52,7 @@
 
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -57,7 +60,8 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] min-h-[1rem]',
+          'mt-1 text-xs ml-[2px]',
+          reserveMessageSpace ? 'min-h-[1rem]' : '',
         ]"
     >
       {{ hint || error || success }}
@@ -70,6 +74,7 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioInputUpload', inheritAttrs: false})
 
@@ -82,11 +87,14 @@ const props = withDefaults(
     labelClass?: string
     groupClass?: string
     disabled?: boolean
+    readonly?: boolean
     hint?: string
     error?: string
     success?: string
     displayIcon?: boolean
     accept?: string
+    required?: boolean
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -96,11 +104,14 @@ const props = withDefaults(
     labelClass: '',
     groupClass: '',
     disabled: false,
+    readonly: false,
     hint: '',
     error: '',
     success: '',
     displayIcon: true,
     accept: '',
+    required: false,
+    reserveMessageSpace: true,
   },
 )
 
@@ -113,10 +124,16 @@ const fileInputRef = ref<HTMLInputElement | null>(null)
 const inputId = computed(() => props.id?.toString() || `malio-input-upload-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentDisplayValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
-const shouldFloatLabel = computed(() => isFocused.value || currentDisplayValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentDisplayValue.value.trim().length > 0)
+const disabled = computed(() => props.disabled)
+const isReadonly = computed(() => props.readonly && !props.disabled)
+const shouldFloatLabel = computed(() =>
+  isReadonly.value
+    ? isFilled.value
+    : isFocused.value || currentDisplayValue.value.length > 0,
+)
 const mergedGroupClass = computed(() =>
   twMerge(
     'relative flex h-12 w-full items-center',
@@ -125,16 +142,21 @@ const mergedGroupClass = computed(() =>
 )
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
-    isFilled.value ? 'border-black' : 'border-m-muted',
-    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-pointer',
+    'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md cursor-pointer',
+    isReadonly.value ? '' : 'grow-height',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
+    disabled.value ? 'text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : '',
     hasError.value
       ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-        : 'focus:border-m-primary',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
     props.displayIcon ? '!pr-10' : '',
-    'focus:pl-[11px]',
+    isReadonly.value ? '' : 'focus:pl-[11px]',
+    isReadonly.value ? 'cursor-default' : '',
+    disabled.value ? 'cursor-not-allowed' : '',
     props.inputClass,
   ),
 )
@@ -142,14 +164,18 @@ const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     'left-3',
-    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    shouldFloatLabel.value
+      ? `-translate-y-[1.25rem] scale-90${isReadonly.value ? '' : ' peer-focus:-translate-y-[1.55rem]'}`
+      : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : disabled.value
           ? 'text-m-muted'
-          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+          : isReadonly.value
+            ? isFilled.value ? 'text-black' : 'text-m-muted'
+            : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
@@ -168,7 +194,7 @@ const emit = defineEmits<{
 }>()
 
 const openFilePicker = () => {
-  if (props.disabled) return
+  if (props.disabled || props.readonly) return
   fileInputRef.value?.click()
 }
 
@@ -185,12 +211,11 @@ const onFileChange = (event: Event) => {
   }
 }
 
-const disabled = computed(() => props.disabled)
-
 const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
   if (disabled.value) return 'text-m-muted'
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isFocused.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return 'text-m-muted'

app/components/malio/radio/RadioButton.test.ts

@@ -173,6 +173,16 @@ describe('MalioRadioButton', () => {
     expect(wrapper.get('input').classes()).toContain('checked:border-black')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountRadioButton({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountRadioButton({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('updates label color when toggled without v-model (uncontrolled)', async () => {
     const wrapper = mountRadioButton({label: 'Option 1', value: 'a'})
 

app/components/malio/radio/RadioButton.vue

@@ -29,7 +29,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
     </div>
 
@@ -46,6 +46,7 @@
 <script setup lang="ts">
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioRadioButton', inheritAttrs: false})
 

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

@@ -21,6 +21,9 @@ type SelectProps = {
   textLabel?: string
   rounded?: string
   disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  reserveMessageSpace?: boolean
 }
 
 const SelectForTest = Select as DefineComponent<SelectProps>
@@ -260,6 +263,38 @@ describe('MalioSelect', () => {
     expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Champ', required: true},
+    })
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Champ'},
+    })
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('expose aria-required quand required est vrai', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options, required: true},
+    })
+
+    expect(wrapper.find('[aria-required="true"]').exists()).toBe(true)
+  })
+
+  it('n\'expose pas aria-required par défaut', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    expect(wrapper.find('[aria-required="true"]').exists()).toBe(false)
+  })
+
   it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
     const wrapper = mount(SelectForTest, {
       props: {modelValue: null, options},
@@ -273,4 +308,75 @@ 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()
+  })
+
+  it('disabled + readonly : pas d’aria-readonly (disabled prime)', () => {
+    const wrapper = mount(SelectForTest, {props: {modelValue: null, label: 'Champ', disabled: true, readonly: true, options: [{label: 'A', value: 'a'}]}})
+    const trigger = wrapper.get('button')
+    expect(trigger.attributes('aria-readonly')).toBeUndefined()
+    expect(trigger.attributes('disabled')).toBeDefined()
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mount(SelectForTest, {props: {modelValue: null, label: 'Champ', options}})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mount(SelectForTest, {props: {modelValue: null, label: 'Champ', options, reserveMessageSpace: false}})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mount(SelectForTest, {props: {modelValue: null, label: 'Champ', options, reserveMessageSpace: false, error: 'Erreur'}})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/select/Select.vue

@@ -8,8 +8,10 @@
       :id="buttonId"
       ref="buttonRef"
       type="button"
-      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
+      class="peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none"
       :class="[
+          isReadonly ? '' : 'grow-height',
+          isReadonly ? '' : 'focus-visible:border-m-primary',
           hasError
             ? isOpen
               ? openDirection === 'down'
@@ -22,15 +24,17 @@
                   ? 'rounded-b-none !border !border-m-success !border-b-transparent'
                   : 'rounded-t-none !border !border-m-success !border-t-transparent'
                 : 'border-m-success'
-              : isOpen
-                ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-primary !border-b-transparent'
-                  : 'rounded-t-none !border !border-m-primary !border-t-transparent'
-                : isOptionSelected
-                  ? 'border-black'
-                  : 'border-m-muted',
-          disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
-          label ? 'min-h-[40px]' : 'h-[40px] py-0',
+              : isReadonly
+                ? 'border-black'
+                : isOpen
+                  ? openDirection === 'down'
+                    ? 'rounded-b-none !border !border-m-primary !border-b-transparent'
+                    : 'rounded-t-none !border !border-m-primary !border-t-transparent'
+                  : isOptionSelected
+                    ? 'border-black'
+                    : 'border-m-muted',
+          disabled ? 'cursor-not-allowed border-m-muted text-black/60' : isReadonly ? 'cursor-default' : 'cursor-pointer',
+          twMerge(label ? 'min-h-[40px]' : 'h-[40px] py-0', fieldClass),
           rounded,
           textField,
   ]"
@@ -38,6 +42,8 @@
       :aria-controls="listboxId"
       :aria-invalid="hasError"
       :aria-describedby="describedBy"
+      :aria-required="required || undefined"
+      :aria-readonly="isReadonly || undefined"
       :disabled="disabled"
       @click="toggle"
     >
@@ -50,16 +56,20 @@
             ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
-              : isOpen
-                ? 'text-m-primary'
-                : isOptionSelected
+              : isReadonly
+                ? isOptionSelected
                   ? 'text-black'
-                  : 'text-m-muted',
+                  : 'text-m-muted'
+                : isOpen
+                  ? 'text-m-primary'
+                  : isOptionSelected
+                    ? 'text-black'
+                    : 'text-m-muted',
           textLabel,
         ]"
         :style="labelTransformStyle"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <span
@@ -82,11 +92,15 @@
               ? 'text-m-success'
               : disabled
                 ? 'text-m-muted'
-                : isOpen
-                  ? 'text-m-primary'
-                  : isOptionSelected
+                : isReadonly
+                  ? isOptionSelected
                     ? 'text-black'
                     : 'text-m-muted'
+                  : isOpen
+                    ? 'text-m-primary'
+                    : isOptionSelected
+                      ? 'text-black'
+                      : 'text-m-muted'
         ]"
       >
       <slot name="icon">
@@ -152,6 +166,7 @@
     </ul>
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${buttonId}-describedby`"
       :class="[
         hasError
@@ -159,7 +174,8 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs min-h-[1rem]',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
       ]"
     >
       {{ error || success || hint }}
@@ -171,6 +187,7 @@
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioSelect', inheritAttrs: false})
 
@@ -189,10 +206,14 @@ const props = withDefaults(defineProps<{
   textField?: string
   textValue?: string
   textLabel?: string
+  fieldClass?: string
   rounded?: string
   disabled?: boolean
+  readonly?: boolean
   groupClass?: string
   noOptionsText?: string
+  required?: boolean
+  reserveMessageSpace?: boolean
 }>(), {
   options: () => [],
   emptyOptionLabel: '',
@@ -203,10 +224,14 @@ const props = withDefaults(defineProps<{
   textField: 'text-lg',
   textValue: 'text-lg',
   textLabel: 'text-sm',
+  fieldClass: '',
   rounded: 'rounded-md',
   disabled: false,
+  readonly: false,
   groupClass: '',
   noOptionsText: 'Aucune option disponible',
+  required: false,
+  reserveMessageSpace: true,
 })
 
 const emit = defineEmits<{
@@ -234,8 +259,9 @@ const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isOptionSelected = computed(() =>
   props.options.some(o => o.value === props.modelValue)
 )
+const isReadonly = computed(() => props.readonly && !props.disabled)
 const shouldFloatLabel = computed(() =>
-  isOpen.value || isOptionSelected.value
+  isReadonly.value ? isOptionSelected.value : (isOpen.value || isOptionSelected.value)
 )
 const selectedLabel = computed(() =>
   props.options.find(o => o.value === props.modelValue)?.label ?? ''
@@ -263,6 +289,7 @@ function updateOpenDirection() {
 }
 
 function open() {
+  if (props.disabled || props.readonly) return
   updateOpenDirection()
   isOpen.value = true
 
@@ -306,7 +333,7 @@ function close() {
 }
 
 function toggle() {
-  if (props.disabled) return
+  if (props.disabled || props.readonly) return
   if (isOpen.value) {
     close()
     return

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

@@ -1,5 +1,5 @@
 import {describe, expect, it} from 'vitest'
-import {mount} from '@vue/test-utils'
+import {mount, renderToString} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import SelectCheckbox from './SelectCheckbox.vue'
 
@@ -9,7 +9,7 @@ type Option = {
 }
 
 type SelectCheckboxProps = {
-  modelValue: Array<string | number>
+  modelValue?: Array<string | number>
   options?: Option[]
   emptyOptionLabel?: string
   label?: string
@@ -24,7 +24,10 @@ type SelectCheckboxProps = {
   displaySelectAll?: boolean
   selectAllLabel?: string
   disabled?: boolean
+  readonly?: boolean
   groupClass?: string
+  required?: boolean
+  reserveMessageSpace?: boolean
 }
 
 const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
@@ -36,6 +39,18 @@ const options: Option[] = [
 ]
 
 describe('MalioSelectCheckbox', () => {
+  it('rend sans planter quand modelValue n’est pas fourni (non contrôlé)', () => {
+    expect(() =>
+      mount(SelectCheckboxForTest, {props: {label: 'Catégories', options}}),
+    ).not.toThrow()
+  })
+
+  it('rend en SSR sans planter quand modelValue est absent (cause du crash playground)', async () => {
+    await expect(
+      renderToString(SelectCheckboxForTest, {props: {label: 'Catégories', readonly: true, options}}),
+    ).resolves.toBeTruthy()
+  })
+
   it('renders checkbox inputs for options', async () => {
     const wrapper = mount(SelectCheckboxForTest, {
       props: {modelValue: [], options},
@@ -235,6 +250,38 @@ describe('MalioSelectCheckbox', () => {
     expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], label: 'Champ', required: true},
+    })
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], label: 'Champ'},
+    })
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('expose aria-required quand required est vrai', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, required: true},
+    })
+
+    expect(wrapper.find('[aria-required="true"]').exists()).toBe(true)
+  })
+
+  it('n\'expose pas aria-required par défaut', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    expect(wrapper.find('[aria-required="true"]').exists()).toBe(false)
+  })
+
   it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
     const wrapper = mount(SelectCheckboxForTest, {
       props: {modelValue: [], options},
@@ -248,4 +295,75 @@ describe('MalioSelectCheckbox', () => {
     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(SelectCheckboxForTest, {
+      props: {label: 'Champ', readonly: true, modelValue: [], 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(SelectCheckboxForTest, {
+      props: {label: 'Champ', readonly: true, modelValue: [], 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(SelectCheckboxForTest, {
+      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(SelectCheckboxForTest, {
+      props: {label: 'Champ', readonly: true, modelValue: [], 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(SelectCheckboxForTest, {
+      props: {label: 'Champ', readonly: true, modelValue: [], options},
+    })
+    const trigger = wrapper.get('button')
+    expect(trigger.attributes('aria-readonly')).toBe('true')
+    expect(trigger.attributes('disabled')).toBeUndefined()
+  })
+
+  it('disabled + readonly : pas d’aria-readonly (disabled prime)', () => {
+    const wrapper = mount(SelectCheckboxForTest, {props: {modelValue: [], label: 'Champ', disabled: true, readonly: true, options: [{label: 'A', value: 'a'}]}})
+    const trigger = wrapper.get('button')
+    expect(trigger.attributes('aria-readonly')).toBeUndefined()
+    expect(trigger.attributes('disabled')).toBeDefined()
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mount(SelectCheckboxForTest, {props: {label: 'Champ', options}})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mount(SelectCheckboxForTest, {props: {label: 'Champ', options, reserveMessageSpace: false}})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mount(SelectCheckboxForTest, {props: {label: 'Champ', options, reserveMessageSpace: false, error: 'Erreur'}})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/select/SelectCheckbox.vue

@@ -8,8 +8,10 @@
       :id="buttonId"
       ref="buttonRef"
       type="button"
-      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
+      class="peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none"
       :class="[
+          isReadonly ? '' : 'grow-height',
+          isReadonly ? '' : 'focus-visible:border-m-primary',
           hasError
             ? isOpen
               ? openDirection === 'down'
@@ -22,14 +24,16 @@
                   ? 'rounded-b-none !border !border-m-success !border-b-transparent'
                   : 'rounded-t-none !border !border-m-success !border-t-transparent'
                 : 'border-m-success'
-              : isOpen
-                ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-primary !border-b-transparent'
-                  : 'rounded-t-none !border !border-m-primary !border-t-transparent'
-                : isOptionSelected
-                  ? 'border-black'
-                  : 'border-m-muted',
-          disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
+              : isReadonly
+                ? 'border-black'
+                : isOpen
+                  ? openDirection === 'down'
+                    ? 'rounded-b-none !border !border-m-primary !border-b-transparent'
+                    : 'rounded-t-none !border !border-m-primary !border-t-transparent'
+                  : isOptionSelected
+                    ? 'border-black'
+                    : 'border-m-muted',
+          disabled ? 'cursor-not-allowed border-m-muted text-black/60' : isReadonly ? 'cursor-default' : 'cursor-pointer',
           label ? 'min-h-[40px]' : 'h-[40px] py-0',
           rounded,
           textField,
@@ -38,6 +42,8 @@
       :aria-controls="listboxId"
       :aria-invalid="hasError"
       :aria-describedby="describedBy"
+      :aria-required="required || undefined"
+      :aria-readonly="isReadonly || undefined"
       :disabled="disabled"
       @click="toggle"
     >
@@ -50,16 +56,20 @@
             ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
-              : isOpen
-                ? 'text-m-primary'
-                : isOptionSelected
+              : isReadonly
+                ? isOptionSelected
                   ? 'text-black'
-                  : 'text-m-muted',
+                  : 'text-m-muted'
+                : isOpen
+                  ? 'text-m-primary'
+                  : isOptionSelected
+                    ? 'text-black'
+                    : 'text-m-muted',
           textLabel,
         ]"
         :style="labelTransformStyle"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div
@@ -110,11 +120,15 @@
               ? 'text-m-success'
               : disabled
                 ? 'text-m-muted'
-                : isOpen
-                  ? 'text-m-primary'
-                  : isOptionSelected
+                : isReadonly
+                  ? isOptionSelected
                     ? 'text-black'
                     : 'text-m-muted'
+                  : isOpen
+                    ? 'text-m-primary'
+                    : isOptionSelected
+                      ? 'text-black'
+                      : 'text-m-muted'
         ]"
       >
       <slot name="icon">
@@ -170,6 +184,7 @@
           group-class="!mt-0"
           label-class="option-checkbox w-full cursor-pointer font-semibold"
           tabindex="-1"
+          :reserve-message-space="false"
           @update:model-value="toggleAll"
         />
       </li>
@@ -195,12 +210,14 @@
           group-class="!mt-0"
           label-class="option-checkbox w-full cursor-pointer"
           tabindex="-1"
+          :reserve-message-space="false"
           @update:model-value="toggleOption(opt.value)"
         />
       </li>
     </ul>
     </div>
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${buttonId}-describedby`"
       :class="[
         hasError
@@ -208,7 +225,8 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs min-h-[1rem]',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
       ]"
     >
       {{ error || success || hint }}
@@ -221,6 +239,7 @@ import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import Checkbox from '../checkbox/Checkbox.vue'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
 
@@ -229,7 +248,7 @@ type Option = {
   value: string | number
 }
 const props = withDefaults(defineProps<{
-  modelValue: Array<string | number>
+  modelValue?: Array<string | number>
   options?: Option[]
   emptyOptionLabel?: string
   label?: string
@@ -244,9 +263,13 @@ const props = withDefaults(defineProps<{
   displaySelectAll?: boolean
   selectAllLabel?: string
   disabled?: boolean
+  readonly?: boolean
   groupClass?: string
   noOptionsText?: string
+  required?: boolean
+  reserveMessageSpace?: boolean
 }>(), {
+  modelValue: () => [],
   options: () => [],
   emptyOptionLabel: '',
   label: '',
@@ -261,8 +284,11 @@ const props = withDefaults(defineProps<{
   displaySelectAll: false,
   selectAllLabel: 'Tout sélectionner',
   disabled: false,
+  readonly: false,
   groupClass: '',
   noOptionsText: 'Aucune option disponible',
+  required: false,
+  reserveMessageSpace: true,
 })
 
 const emit = defineEmits<{
@@ -287,6 +313,7 @@ const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isOptionSelected = computed(() =>
   props.modelValue.length > 0
 )
+const isReadonly = computed(() => props.readonly && !props.disabled)
 const selectedOptions = computed(() =>
   normalizedOptions.value.filter(option => props.modelValue.includes(option.value)),
 )
@@ -294,7 +321,7 @@ const displayTags = computed(() =>
   props.displayTag && selectedOptions.value.length > 0,
 )
 const shouldFloatLabel = computed(() =>
-  isOpen.value || displayTags.value
+  isReadonly.value ? isOptionSelected.value : (isOpen.value || displayTags.value)
 )
 const selectionSummary = computed(() =>
   `${props.modelValue.length}/${normalizedOptions.value.length}`
@@ -326,6 +353,7 @@ function updateOpenDirection() {
 }
 
 function open() {
+  if (props.disabled || props.readonly) return
   updateOpenDirection()
   isOpen.value = true
 
@@ -369,7 +397,7 @@ function close() {
 }
 
 function toggle() {
-  if (props.disabled) return
+  if (props.disabled || props.readonly) return
   if (isOpen.value) {
     close()
     return

app/components/malio/shared/RequiredMark.test.ts

@@ -0,0 +1,25 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import RequiredMark from './RequiredMark.vue'
+
+describe('MalioRequiredMark', () => {
+  it('rend un astérisque', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.text()).toBe('*')
+  })
+
+  it('est masqué pour les technologies d\'assistance', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.get('[data-test="required-mark"]').attributes('aria-hidden')).toBe('true')
+  })
+
+  it('utilise le token de couleur danger', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.get('[data-test="required-mark"]').classes()).toContain('text-m-danger')
+  })
+
+  it('rend l\'astérisque à 16px', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.get('[data-test="required-mark"]').classes()).toContain('text-[16px]')
+  })
+})

app/components/malio/shared/RequiredMark.vue

@@ -0,0 +1,11 @@
+<template>
+  <span
+    data-test="required-mark"
+    aria-hidden="true"
+    class="ml-0.5 select-none text-[16px] leading-none text-m-danger"
+  >*</span>
+</template>
+
+<script setup lang="ts">
+defineOptions({name: 'MalioRequiredMark', inheritAttrs: false})
+</script>

app/components/malio/tab/TabList.test.ts

@@ -15,6 +15,8 @@ type TabListProps = {
   tabs: Tab[]
   modelValue?: string
   id?: string
+  maxVisibleTabs?: number
+  maxWidth?: number
 }
 
 const TabListForTest = TabList as DefineComponent<TabListProps>
@@ -185,3 +187,154 @@ describe('MalioTabList', () => {
     expect(buttons[1].attributes('aria-selected')).toBe('false')
   })
 })
+
+describe('MalioTabList — fenêtrage maxVisibleTabs', () => {
+  const sevenTabs: Tab[] = [
+    {key: 't1', label: 'Tab 1'},
+    {key: 't2', label: 'Tab 2'},
+    {key: 't3', label: 'Tab 3'},
+    {key: 't4', label: 'Tab 4'},
+    {key: 't5', label: 'Tab 5'},
+    {key: 't6', label: 'Tab 6'},
+    {key: 't7', label: 'Tab 7'},
+  ]
+
+  it('applies the default maxWidth (1100px) on the tabs container when windowed', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    expect(wrapper.find('[role="tablist"]').attributes('style')).toContain('max-width: 1100px')
+  })
+
+  it('applies a custom maxWidth on the tabs container', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5, maxWidth: 1200})
+    expect(wrapper.find('[role="tablist"]').attributes('style')).toContain('max-width: 1200px')
+  })
+
+  it('renders only maxVisibleTabs buttons and disables prev at start', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(5)
+    expect(buttons[0].text()).toContain('Tab 1')
+    expect(buttons[4].text()).toContain('Tab 5')
+
+    const prev = wrapper.find('[data-test="tab-prev"]')
+    const next = wrapper.find('[data-test="tab-next"]')
+    expect(prev.exists()).toBe(true)
+    expect(next.exists()).toBe(true)
+    expect(prev.attributes('disabled')).toBeDefined()
+    expect(next.attributes('disabled')).toBeUndefined()
+  })
+
+  it('shifts the window by 1 on next click', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+
+    const labels = wrapper.findAll('[role="tab"]').map(b => b.text())
+    expect(labels.some(l => l.includes('Tab 1'))).toBe(false)
+    expect(labels.some(l => l.includes('Tab 6'))).toBe(true)
+    expect(labels).toHaveLength(5)
+
+    expect(wrapper.find('[data-test="tab-prev"]').attributes('disabled')).toBeUndefined()
+  })
+
+  it('disables next at the end and shows the last window', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+
+    // 7 - 5 = 2 clicks to reach the end
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+
+    const next = wrapper.find('[data-test="tab-next"]')
+    expect(next.attributes('disabled')).toBeDefined()
+
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(5)
+    // last window starts at tabs[length-5] = tabs[2] = Tab 3
+    expect(buttons[0].text()).toContain('Tab 3')
+    expect(buttons[4].text()).toContain('Tab 7')
+  })
+
+  it('clicking next past the end does not overshoot', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    const next = wrapper.find('[data-test="tab-next"]')
+
+    await next.trigger('click')
+    await next.trigger('click')
+    await next.trigger('click') // guarded, no-op
+    await next.trigger('click') // guarded, no-op
+
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(5)
+    expect(buttons[0].text()).toContain('Tab 3')
+    expect(buttons[4].text()).toContain('Tab 7')
+  })
+
+  it('renders no arrows and all tabs when maxVisibleTabs is undefined', () => {
+    const wrapper = mountComponent({tabs: sevenTabs})
+    expect(wrapper.findAll('[role="tab"]')).toHaveLength(7)
+    expect(wrapper.find('[data-test="tab-prev"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="tab-next"]').exists()).toBe(false)
+  })
+
+  it('renders no arrows when maxVisibleTabs >= tabs.length', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 7})
+    expect(wrapper.findAll('[role="tab"]')).toHaveLength(7)
+    expect(wrapper.find('[data-test="tab-prev"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="tab-next"]').exists()).toBe(false)
+  })
+
+  it('selecting a visible tab activates it without moving the window', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    const buttons = wrapper.findAll('[role="tab"]')
+
+    await buttons[2].trigger('click')
+
+    const after = wrapper.findAll('[role="tab"]')
+    expect(after[2].attributes('aria-selected')).toBe('true')
+    // window unchanged
+    expect(after[0].text()).toContain('Tab 1')
+    expect(after).toHaveLength(5)
+  })
+
+  it('keeps the active panel rendered even when its tab is outside the window', async () => {
+    const wrapper = mountComponent(
+      {tabs: sevenTabs, maxVisibleTabs: 5, modelValue: 't1'},
+      {t1: '<p>Panel 1</p>'},
+    )
+
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+
+    // Tab 1 is no longer in the window
+    const labels = wrapper.findAll('[role="tab"]').map(b => b.text())
+    expect(labels.some(l => l.includes('Tab 1'))).toBe(false)
+
+    // but its panel is still rendered and visible
+    const panels = wrapper.findAll('[role="tabpanel"]')
+    expect(panels).toHaveLength(7)
+    expect(wrapper.text()).toContain('Panel 1')
+  })
+
+  it('keeps exactly one rendered tab with tabindex=0 when the active tab scrolls out of the window', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+
+    // active tab is the first one (t1) by default; scroll it out of the window
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+
+    // t1 is no longer rendered
+    const labels = wrapper.findAll('[role="tab"]').map(b => b.text())
+    expect(labels.some(l => l.includes('Tab 1'))).toBe(false)
+
+    const focusable = wrapper.findAll('[role="tab"]').filter(b => b.attributes('tabindex') === '0')
+    expect(focusable).toHaveLength(1)
+    // falls back to the first visible tab (Tab 3)
+    expect(focusable[0].text()).toContain('Tab 3')
+  })
+
+  it('arrows expose aria-labels', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    expect(wrapper.find('[data-test="tab-prev"]').attributes('aria-label')).toBe('Onglets précédents')
+    expect(wrapper.find('[data-test="tab-next"]').attributes('aria-label')).toBe('Onglets suivants')
+  })
+})

app/components/malio/tab/TabList.vue

@@ -1,11 +1,81 @@
 <template>
   <div v-bind="$attrs">
+    <div v-if="isWindowed" class="flex items-center justify-center gap-[36px] border-b border-m-primary">
+      <button
+        type="button"
+        aria-label="Onglets précédents"
+        data-test="tab-prev"
+        :disabled="!canPrev"
+        :class="[
+          'transition-colors',
+          canPrev
+            ? 'cursor-pointer text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active'
+            : 'cursor-not-allowed text-m-disabled',
+        ]"
+        @click="prev"
+      >
+        <IconifyIcon icon="mdi:chevron-left" :width="28" />
+      </button>
+
+      <div
+        role="tablist"
+        class="flex flex-1 justify-center gap-[60px]"
+        :style="{ maxWidth: `${maxWidth}px` }"
+      >
+        <button
+          v-for="tab in visibleTabs"
+          :id="`${componentId}-tab-${tab.key}`"
+          :key="tab.key"
+          role="tab"
+          type="button"
+          :aria-selected="activeTab === tab.key"
+          :aria-controls="`${componentId}-panel-${tab.key}`"
+          :aria-disabled="!!tab.disabled"
+          :tabindex="focusedKey === tab.key ? 0 : -1"
+          :disabled="tab.disabled"
+          :class="[
+            'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
+            activeTab === tab.key
+              ? 'cursor-pointer text-m-primary after:content-[\'\'] after:absolute after:-bottom-[3px] after:left-0 after:right-0 after:h-[3px] after:bg-m-primary'
+              : tab.disabled
+                ? 'cursor-not-allowed text-m-primary/50'
+                : 'cursor-pointer text-m-primary/50 hover:text-m-primary/70',
+          ]"
+          @click="selectTab(tab.key)"
+        >
+          <IconifyIcon
+            v-if="tab.icon"
+            :icon="tab.icon"
+            :width="tab.iconSize ?? 24"
+          />
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <button
+        type="button"
+        aria-label="Onglets suivants"
+        data-test="tab-next"
+        :disabled="!canNext"
+        :class="[
+          'transition-colors',
+          canNext
+            ? 'cursor-pointer text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active'
+            : 'cursor-not-allowed text-m-disabled',
+        ]"
+        @click="next"
+      >
+        <IconifyIcon icon="mdi:chevron-right" :width="28" />
+      </button>
+    </div>
+
     <div
+      v-else
       role="tablist"
       class="flex justify-center gap-[60px] border-b border-m-primary"
     >
       <button
-        v-for="tab in tabs"
+        v-for="tab in visibleTabs"
         :id="`${componentId}-tab-${tab.key}`"
         :key="tab.key"
         role="tab"
@@ -13,7 +83,7 @@
         :aria-selected="activeTab === tab.key"
         :aria-controls="`${componentId}-panel-${tab.key}`"
         :aria-disabled="!!tab.disabled"
-        :tabindex="activeTab === tab.key ? 0 : -1"
+        :tabindex="focusedKey === tab.key ? 0 : -1"
         :disabled="tab.disabled"
         :class="[
           'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
@@ -40,7 +110,8 @@
       :id="`${componentId}-panel-${tab.key}`"
       :key="tab.key"
       role="tabpanel"
-      :aria-labelledby="`${componentId}-tab-${tab.key}`"
+      :aria-labelledby="isTabRendered(tab.key) ? `${componentId}-tab-${tab.key}` : undefined"
+      :aria-label="isTabRendered(tab.key) ? undefined : tab.label"
     >
       <slot :name="tab.key" />
     </div>
@@ -48,7 +119,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, useId} from 'vue'
+import {computed, ref, useId, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 
 defineOptions({name: 'MalioTabList', inheritAttrs: false})
@@ -65,9 +136,13 @@ const props = withDefaults(defineProps<{
   tabs: Tab[]
   modelValue?: string
   id?: string
+  maxVisibleTabs?: number
+  maxWidth?: number
 }>(), {
   modelValue: undefined,
   id: '',
+  maxVisibleTabs: undefined,
+  maxWidth: 1100,
 })
 
 const emit = defineEmits<{
@@ -84,6 +159,53 @@ const activeTab = computed(() =>
   isControlled.value ? props.modelValue! : localValue.value,
 )
 
+const isWindowed = computed(() =>
+  props.maxVisibleTabs != null && props.tabs.length > props.maxVisibleTabs,
+)
+
+const maxStartIndex = computed(() =>
+  isWindowed.value ? Math.max(0, props.tabs.length - props.maxVisibleTabs!) : 0,
+)
+
+const startIndex = ref(0)
+
+const visibleTabs = computed(() =>
+  isWindowed.value
+    ? props.tabs.slice(startIndex.value, startIndex.value + props.maxVisibleTabs!)
+    : props.tabs,
+)
+
+const focusedKey = computed(() => {
+  if (!isWindowed.value) return activeTab.value
+  const inView = visibleTabs.value.some(t => t.key === activeTab.value)
+  return inView ? activeTab.value : (visibleTabs.value[0]?.key ?? '')
+})
+
+const isTabRendered = (key: string) => !isWindowed.value || visibleTabs.value.some(t => t.key === key)
+
+const canPrev = computed(() => isWindowed.value && startIndex.value > 0)
+const canNext = computed(() => isWindowed.value && startIndex.value < maxStartIndex.value)
+
+function prev() {
+  if (!canPrev.value) return
+  startIndex.value -= 1
+}
+
+function next() {
+  if (!canNext.value) return
+  startIndex.value += 1
+}
+
+// Clamp startIndex back in range if tabs or maxVisibleTabs change.
+watch(maxStartIndex, (max) => {
+  if (startIndex.value > max) startIndex.value = max
+})
+
+// Reset the window to the start when the tab list is replaced.
+watch(() => props.tabs, () => {
+  startIndex.value = 0
+})
+
 function selectTab(key: string) {
   const tab = props.tabs.find(t => t.key === key)
   if (tab?.disabled) return

app/components/malio/time/Time.test.ts

@@ -17,6 +17,7 @@ type TimeProps = {
   hint?: string
   error?: string
   success?: string
+  reserveMessageSpace?: boolean
 }
 
 const TimeForTest = Time as DefineComponent<TimeProps>
@@ -76,4 +77,33 @@ describe('MalioTime', () => {
     expect(inputs[0].classes()).toContain('border-m-primary')
     expect(inputs[1].classes()).not.toContain('border-m-primary')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountTime({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountTime({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountTime({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountTime({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountTime({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/time/Time.vue

@@ -6,7 +6,7 @@
         :for="hoursInputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div class="flex items-center gap-2">
@@ -58,6 +58,7 @@
     </div>
 
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
         hasError
@@ -65,7 +66,8 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs min-h-[1rem]',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
       ]"
     >
       {{ error || success || hint }}
@@ -76,6 +78,7 @@
 <script setup lang="ts">
 import {computed, nextTick, ref, useAttrs, useId, watch} from 'vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioTime', inheritAttrs: false})
 
@@ -94,6 +97,7 @@ const props = withDefaults(
     hint?: string
     error?: string
     success?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -109,6 +113,7 @@ const props = withDefaults(
     hint: '',
     error: '',
     success: '',
+    reserveMessageSpace: true,
   },
 )
 

app/components/malio/time/TimePicker.test.ts

@@ -19,6 +19,7 @@ type TimePickerProps = {
   inputClass?: string
   labelClass?: string
   groupClass?: string
+  reserveMessageSpace?: boolean
 }
 
 const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
@@ -52,6 +53,12 @@ describe('MalioTimePicker', () => {
     expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
   })
 
+  it('n\'ouvre pas le popover si readonly', async () => {
+    const wrapper = mountPicker({readonly: true})
+    await wrapper.get('[data-test="time-field"]').trigger('click')
+    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+  })
+
   it('émet la valeur réglée depuis les molettes', async () => {
     const wrapper = mountPicker({modelValue: '09:30'})
     await wrapper.get('[data-test="time-field"]').trigger('click')
@@ -73,4 +80,64 @@ describe('MalioTimePicker', () => {
     expect(input.attributes('aria-describedby')).toBeTruthy()
     expect(wrapper.text()).toContain('Heure requise')
   })
+
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mountPicker({label: 'Champ', required: true})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mountPicker({label: 'Champ'})
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
+  it('readonly vide : bordure noire sans bleu', () => {
+    const wrapper = mountPicker({readonly: true})
+    const input = wrapper.get('[data-test="time-field"]')
+    expect(input.classes()).toContain('border-black')
+    expect(input.classes()).not.toContain('border-m-muted')
+    expect(input.classes()).not.toContain('focus:border-m-primary')
+  })
+
+  it('readonly vide : label muted sans bleu', () => {
+    const wrapper = mountPicker({readonly: true, label: 'Heure'})
+    const label = wrapper.get('label')
+    expect(label.classes()).toContain('text-m-muted')
+    expect(label.classes()).not.toContain('text-m-primary')
+  })
+
+  it('readonly vide : icône horloge en text-m-muted', () => {
+    const wrapper = mountPicker({readonly: true, label: 'Heure'})
+    expect(wrapper.get('[data-test="clock-icon"]').classes()).toContain('text-m-muted')
+  })
+
+  it('readonly rempli : label et icône en noir, bordure noire', () => {
+    const wrapper = mountPicker({readonly: true, label: 'Heure', modelValue: '14:30'})
+    const input = wrapper.get('[data-test="time-field"]')
+    const label = wrapper.get('label')
+    const icon = wrapper.get('[data-test="clock-icon"]')
+    expect(input.classes()).toContain('border-black')
+    expect(input.classes()).not.toContain('focus:border-m-primary')
+    expect(label.classes()).toContain('text-black')
+    expect(icon.classes()).toContain('text-black')
+  })
+
+  it('réserve l’espace message par défaut même sans message', () => {
+    const wrapper = mountPicker({label: 'Champ'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).toContain('min-h-[1rem]')
+  })
+
+  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
+    const wrapper = mountPicker({label: 'Champ', reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
+    const wrapper = mountPicker({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
+    const msg = wrapper.find('[id$="-describedby"]')
+    expect(msg.exists()).toBe(true)
+    expect(msg.classes()).not.toContain('min-h-[1rem]')
+  })
 })

app/components/malio/time/TimePicker.vue

@@ -26,7 +26,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
@@ -78,10 +78,12 @@
     </div>
 
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
         hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs min-h-[1rem]',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
       ]"
     >
       {{ error || success || hint }}
@@ -93,6 +95,7 @@
 import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId} from 'vue'
 import {Icon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 import TimeWheels from './internal/TimeWheels.vue'
 
 defineOptions({name: 'MalioTimePicker', inheritAttrs: false})
@@ -115,6 +118,7 @@ const props = withDefaults(
     inputClass?: string
     labelClass?: string
     groupClass?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -133,6 +137,7 @@ const props = withDefaults(
     inputClass: '',
     labelClass: '',
     groupClass: '',
+    reserveMessageSpace: true,
   },
 )
 
@@ -152,6 +157,7 @@ const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const displayValue = computed(() => currentValue.value ?? '')
 const isFilled = computed(() => displayValue.value.length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
 const wheelsValue = computed(() => currentValue.value || '00:00')
 const showClear = computed(() =>
   props.clearable && isFilled.value && !props.disabled && !props.readonly,
@@ -191,14 +197,16 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     props.disabled ? 'cursor-not-allowed border-m-muted text-black/60' : '',
     hasError.value
       ? 'border-m-danger'
       : hasSuccess.value
         ? 'border-m-success'
-        : 'focus:border-m-primary',
-    isOpen.value ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    (!isReadonly.value && isOpen.value) ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
     props.inputClass,
   ),
 )
@@ -206,14 +214,16 @@ const mergedInputClass = computed(() =>
 const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left text-sm font-medium transition-transform duration-150',
-    (isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
+    (isReadonly.value ? isFilled.value : (isFilled.value || isOpen.value)) ? '-translate-y-[1.25rem] scale-90' : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
-        : isOpen.value
-          ? 'text-m-primary'
-          : 'text-black peer-placeholder-shown:text-m-muted',
+        : isReadonly.value
+          ? isFilled.value ? 'text-black' : 'text-m-muted'
+          : isOpen.value
+            ? 'text-m-primary'
+            : 'text-black peer-placeholder-shown:text-m-muted',
     props.labelClass,
   ),
 )
@@ -221,6 +231,7 @@ const mergedLabelClass = computed(() =>
 const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isOpen.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return 'text-m-muted'

app/story/datatable/datatable.story.vue

@@ -49,6 +49,22 @@
       </div>
     </Variant>
 
+    <Variant title="Gros volume (saut de page)">
+      <div class="p-4">
+        <MalioDataTable
+          :columns="columns"
+          :items="bigPaginated"
+          :total-items="bigItems.length"
+          v-model:page="bigPage"
+          v-model:per-page="bigPerPage"
+        >
+          <template #cell-montant="{ item }">
+            <strong>{{ item.montant }} €</strong>
+          </template>
+        </MalioDataTable>
+      </div>
+    </Variant>
+
     <Variant title="État vide">
       <div class="p-4">
         <MalioDataTable
@@ -192,4 +208,18 @@ const paginatedItems = computed(() => {
 function onRowClick(item: Record<string, unknown>) {
   alert(`Clic sur ${item.nom} ${item.prenom}`)
 }
+
+const bigPage = ref(1)
+const bigPerPage = ref(10)
+const bigItems = Array.from({ length: 310 }, (_, i) => ({
+  id: i + 1,
+  nom: `Nom ${i + 1}`,
+  prenom: `Prénom ${i + 1}`,
+  ville: ['Paris', 'Lyon', 'Marseille'][i % 3],
+  montant: 500 + i * 7,
+}))
+const bigPaginated = computed(() => {
+  const start = (bigPage.value - 1) * bigPerPage.value
+  return bigItems.slice(start, start + bigPerPage.value)
+})
 </script>

docs/superpowers/plans/2026-06-03-readonly-field-state.md

@@ -0,0 +1,161 @@
+# État visuel `readonly` cohérent — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: superpowers:subagent-driven-development. Steps use checkbox (`- [ ]`) syntax.
+
+**Goal:** Donner aux champs `readonly` un état visuel distinct et cohérent : bordure noire même vide, aucun grossissement/bleu au focus, label gris→noir selon rempli, icône gris→noir selon rempli.
+
+**Architecture:** Pas de composant partagé (les styles sont dupliqués par composant, on suit ce pattern). Dans chaque composant on rend conditionnelles 4 zones de classes selon `readonly`. Le champ reste focusable (sélection/copie du texte) mais sans visuel de focus.
+
+**Tech Stack:** Vue 3 `<script setup>`, Tailwind `m-*`, `twMerge`, Vitest + @vue/test-utils.
+
+**Branche:** `feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co` (on continue dessus).
+
+---
+
+## La recette commune (appliquée quand `readonly === true`)
+
+Priorité inchangée : `error` puis `success` puis `disabled` passent TOUJOURS avant `readonly`. La recette readonly ne s'applique que dans la branche « état normal ».
+
+1. **Bordure** : forcer `border-black` (même vide). Ne PAS inclure `border-m-muted` ni `focus:border-m-primary` quand readonly.
+2. **Grow + bleu** : ne PAS inclure la classe `grow-height` (donc pas de grossissement au focus) ni les classes `focus:*` (border, padding `focus:pl-*`/`focus:!pl-*`). Pour `InputTextArea` (pas de `grow-height`) : retirer `focus:border-m-primary` et le surlignage de focus `textarea-scrollbar-primary`.
+3. **Label** : utiliser `isFilled ? 'text-black' : 'text-m-muted'` ; ne PAS inclure `peer-focus:text-m-primary` ni les combos `peer-placeholder-shown`/`peer-[&:not(:placeholder-shown):not(:focus)]`. De plus, en readonly, `shouldFloatLabel` (ou équivalent qui pilote le float) doit ignorer `isFocused` → float basé sur `isFilled` seul (un champ readonly vide garde son label gris au repos).
+4. **Icône** : `isFilled ? 'text-black' : 'text-m-muted'` ; sauter la branche `isFocused → text-m-primary`. (`error`/`success`/`disabled` toujours prioritaires.)
+5. **Interaction** : `readonly` bloque l'ouverture (Upload : `openFilePicker` no-op ; pickers : déjà bloqué). Le champ reste sélectionnable (ne pas retirer la focusabilité).
+
+Implémentation conseillée : un petit computed `isReadonly = computed(() => props.readonly && !props.disabled)` (disabled prime), puis dans chaque `twMerge(...)` remplacer les fragments concernés par des expressions ternaires sur `props.readonly`. Garder le code lisible et homogène avec l'existant du fichier.
+
+### Patron de test (adapter le sélecteur input/textarea et le helper de montage du fichier)
+
+```ts
+it('readonly : bordure noire même vide, pas de grow/bleu', () => {
+  const wrapper = mountX({label: 'Champ', readonly: true}) // pas de modelValue → vide
+  const field = wrapper.get('input') // ou 'textarea'
+  expect(field.classes()).toContain('border-black')
+  expect(field.classes()).not.toContain('border-m-muted')
+  expect(field.classes()).not.toContain('grow-height')          // sauf InputTextArea (pas de grow-height) : asserter l'absence de 'focus:border-m-primary'
+  expect(field.classes()).not.toContain('focus:border-m-primary')
+})
+
+it('readonly : label gris si vide, pas de bleu', () => {
+  const wrapper = mountX({label: 'Champ', readonly: true})
+  const label = wrapper.get('label')
+  expect(label.classes()).not.toContain('peer-focus:text-m-primary')
+  expect(label.classes()).toContain('text-m-muted')
+})
+
+it('readonly rempli : label noir + icône noire', () => {
+  const wrapper = mountX({label: 'Champ', readonly: true, modelValue: '...valeur remplie...'})
+  expect(wrapper.get('label').classes()).toContain('text-black')
+  // si le composant a une icône d'état :
+  expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
+})
+```
+
+Pour les composants à icône d'état, ajouter aussi : readonly + vide → icône `text-m-muted`. Adapter `modelValue` au type (montant, date ISO, etc.). Pour les pickers, la « valeur remplie » se passe via la prop d'affichage habituelle (voir tests voisins).
+
+---
+
+## Task 1 : `InputUpload` (ajout de la prop `readonly`)
+
+`InputUpload` n'a PAS de prop `readonly` aujourd'hui (son `<input type="text">` est `:readonly="true"` en dur pour empêcher la saisie). On AJOUTE une vraie prop `readonly`.
+
+**Files:** Modify `app/components/malio/input/InputUpload.vue` ; Test `app/components/malio/input/InputUpload.test.ts`
+
+- [ ] **Step 1 — tests d'abord** : ajouter le patron de test ci-dessus. Champ = `wrapper.get('input[type="text"]')`. Icône = `[data-test="icon"]` (le nuage). « rempli » = `modelValue: 'fichier.pdf'`.
+- [ ] **Step 2 — run, FAIL** : `npm run test -- app/components/malio/input/InputUpload.test.ts`
+- [ ] **Step 3 — ajouter la prop** : `readonly?: boolean` dans `defineProps` + `readonly: false` dans `withDefaults`.
+- [ ] **Step 4 — appliquer la recette** dans `mergedInputClass`, `mergedLabelClass`, `iconStateClass` et `shouldFloatLabel` (float = `isFilled` quand readonly). Forcer `cursor-default` (au lieu de `cursor-pointer`) quand readonly.
+- [ ] **Step 5 — bloquer l'ouverture** : dans `openFilePicker`, `if (props.disabled || props.readonly) return`.
+- [ ] **Step 6 — run, PASS** : même commande. (Suite flaky connue : relancer le fichier si timeout non lié ; `--no-verify` si un timeout flaky bloque un commit déjà vérifié.)
+- [ ] **Step 7 — commit**
+```bash
+git add app/components/malio/input/InputUpload.vue app/components/malio/input/InputUpload.test.ts
+git commit -m "feat(ui) : état readonly visuel sur InputUpload (+ prop readonly)"
+```
+(corps + ligne vide + `Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>`)
+
+---
+
+## Task 2 : Inputs floating-label standard (lot de 6)
+
+`InputText`, `InputEmail`, `InputAmount`, `InputAutocomplete`, `InputPassword`, `InputTextArea` ont déjà une prop `readonly`. Appliquer la recette à chacun.
+
+**Files:** Modify les 6 `.vue` (`app/components/malio/input/InputText.vue`, `InputEmail.vue`, `InputAmount.vue`, `InputAutocomplete.vue`, `InputPassword.vue`, `InputTextArea.vue`) ; Test les 6 `*.test.ts` correspondants (`Input.test.ts` pour InputText, puis `InputEmail/InputAmount/InputAutocomplete/InputPassword/InputTextArea.test.ts`).
+
+Spécificités par fichier :
+- **InputText / InputEmail / InputAmount** : structure identique (`mergedInputClass` avec `grow-height` + `focus:border-m-primary` + `focus:pl-[11px]` ; `mergedLabelClass` avec `peer-focus:text-m-primary` ; `iconStateClass` avec branche `isFocused`). Appliquer la recette 1-4.
+- **InputAutocomplete** : idem ; il a deux usages de `iconStateClass` (icône gauche + chevron) — appliquer la recette à `iconStateClass`. `isFilled` y inclut `hasSelection`.
+- **InputPassword** : recette 1-4. L'icône est le **toggle œil** (cliquable) : garder le `@click` de bascule ; seule la couleur suit la recette (pas de bleu). NE PAS rendre l'œil non-cliquable en readonly.
+- **InputTextArea** : classes **inline** dans le template (pas de `grow-height`). Recette : `isFilled ? border-black : border-m-muted` → `readonly ? border-black : (isFilled ? border-black : border-m-muted)` ; retirer `focus:border-m-primary` et le `isFocused ? 'textarea-scrollbar-primary'` quand readonly ; label idem. Pas d'icône (recette 4 N/A).
+
+- [ ] **Step 1 — tests d'abord** : ajouter le patron à chacun des 6 fichiers test (champ = `input`, sauf TextArea = `textarea` ; pour TextArea ne pas asserter `grow-height`). Pour les composants à icône, asserter aussi l'icône (`[data-test="icon"]`). Adapter `modelValue` rempli au type (Amount : un montant valide).
+- [ ] **Step 2 — run, FAIL** : `npm run test -- app/components/malio/input/Input.test.ts app/components/malio/input/InputEmail.test.ts app/components/malio/input/InputAmount.test.ts app/components/malio/input/InputAutocomplete.test.ts app/components/malio/input/InputPassword.test.ts app/components/malio/input/InputTextArea.test.ts`
+- [ ] **Step 3 — appliquer la recette** aux 6 `.vue`.
+- [ ] **Step 4 — run, PASS** : même commande (relancer un fichier si flaky).
+- [ ] **Step 5 — commit**
+```bash
+git add app/components/malio/input/InputText.vue app/components/malio/input/InputEmail.vue app/components/malio/input/InputAmount.vue app/components/malio/input/InputAutocomplete.vue app/components/malio/input/InputPassword.vue app/components/malio/input/InputTextArea.vue app/components/malio/input/Input.test.ts app/components/malio/input/InputEmail.test.ts app/components/malio/input/InputAmount.test.ts app/components/malio/input/InputAutocomplete.test.ts app/components/malio/input/InputPassword.test.ts app/components/malio/input/InputTextArea.test.ts
+git commit -m "feat(ui) : état readonly visuel sur les inputs floating-label"
+```
+
+---
+
+## Task 3 : `InputPhone` (découpler readonly de disabled)
+
+Aujourd'hui `InputPhone` traite `disabled || readonly` ensemble (bouton « add » + `opacity-40`, look désactivé). On découple : readonly applique la recette readonly (bordure noire, pas de look disabled), tout en restant non-éditable. L'action « add » reste bloquée en readonly mais le **champ** ne doit plus avoir l'apparence désactivée.
+
+**Files:** Modify `app/components/malio/input/InputPhone.vue` ; Test `app/components/malio/input/InputPhone.test.ts`
+
+- [ ] **Step 1 — tests d'abord** : patron readonly (champ = `input`, icône = `[data-test="icon"]`). Ajouter aussi une assertion que le champ readonly n'a PAS `opacity-40` (plus de look disabled). `modelValue` rempli = un numéro.
+- [ ] **Step 2 — run, FAIL** : `npm run test -- app/components/malio/input/InputPhone.test.ts`
+- [ ] **Step 3 — appliquer la recette** à `mergedInputClass`/`mergedLabelClass`/`iconStateClass` (recette 1-4). Pour le bouton « add » (`mergedAddButtonClass`) : garder l'action bloquée en readonly (`onAdd` retourne déjà), mais retirer l'apparence `opacity-40 cursor-not-allowed` spécifique au readonly — la garder uniquement pour `disabled`. (En readonly, le bouton add suit la couleur d'icône readonly.)
+- [ ] **Step 4 — run, PASS** (relancer si flaky).
+- [ ] **Step 5 — commit**
+```bash
+git add app/components/malio/input/InputPhone.vue app/components/malio/input/InputPhone.test.ts
+git commit -m "feat(ui) : InputPhone readonly suit les règles readonly (plus de look disabled)"
+```
+
+---
+
+## Task 4 : Pickers `CalendarField` (date family) + `TimePicker`
+
+`CalendarField` (rend Date/DateTime/DateRange/DateWeek) et `TimePicker` ont déjà une prop `readonly` qui bloque l'ouverture du popover. Appliquer la recette visuelle. Leur input interne est déjà `readonly` natif ; le float du label suit `isFilled || isOpen` — en readonly, `isOpen` reste faux (ouverture bloquée), donc float = `isFilled`. Forcer bordure noire, label gris→noir, icône gris→noir sans branche focus/open.
+
+**Files:** Modify `app/components/malio/date/internal/CalendarField.vue`, `app/components/malio/time/TimePicker.vue` ; Test `app/components/malio/date/Date.test.ts` (couvre CalendarField) et `app/components/malio/time/TimePicker.test.ts`
+
+- [ ] **Step 1 — tests d'abord** : patron readonly. Pour `Date.test.ts`, monter `mountDate({label, readonly: true})` et une variante remplie (passer une valeur de date ISO comme les tests voisins). Champ = l'input du composant (voir sélecteur utilisé par les tests voisins). Pour `TimePicker.test.ts`, utiliser le helper du fichier.
+- [ ] **Step 2 — run, FAIL** : `npm run test -- app/components/malio/date/Date.test.ts app/components/malio/time/TimePicker.test.ts`
+- [ ] **Step 3 — appliquer la recette** à `CalendarField.vue` et `TimePicker.vue` (`mergedInputClass`/`mergedLabelClass`/`iconStateClass` ; float = `isFilled` en readonly). Vérifier que la croix « clear » reste masquée en readonly (déjà le cas — ne pas régresser).
+- [ ] **Step 4 — run, PASS** (relancer si flaky).
+- [ ] **Step 5 — commit**
+```bash
+git add app/components/malio/date/internal/CalendarField.vue app/components/malio/time/TimePicker.vue app/components/malio/date/Date.test.ts app/components/malio/time/TimePicker.test.ts
+git commit -m "feat(ui) : état readonly visuel sur pickers date/heure"
+```
+
+---
+
+## Task 5 : Playground + vérification finale
+
+**Files:** Modify les pages playground concernées sous `.playground/pages/composant/...`
+
+- [ ] **Step 1 — exemples readonly** : ajouter sur chaque page concernée (inputText, inputEmail, inputAmount, inputAutocomplete, inputPassword, inputTextArea, inputPhone, **inputUpload** [manquant], date, timePicker) un exemple readonly : une instance vide (`:readonly="true"`) ET une instance remplie readonly, pour visualiser bordure noire vide + label/icône noir rempli. Suivre le pattern de chaque page ; si une page rend l'ajout coûteux, le signaler et passer (mais inputUpload est demandé explicitement, le faire).
+- [ ] **Step 2 — lint** : `npm run lint` → 0 erreur (baseline 24 warnings préexistants).
+- [ ] **Step 3 — suite complète** : `npm run test` → tout vert (relancer un fichier en cas de timeout flaky).
+- [ ] **Step 4 — commit**
+```bash
+git add .playground
+git commit -m "docs(playground) : exemples readonly"
+```
+
+---
+
+## Récapitulatif commits attendus
+1. `feat(ui) : état readonly visuel sur InputUpload (+ prop readonly)`
+2. `feat(ui) : état readonly visuel sur les inputs floating-label`
+3. `feat(ui) : InputPhone readonly suit les règles readonly (plus de look disabled)`
+4. `feat(ui) : état readonly visuel sur pickers date/heure`
+5. `docs(playground) : exemples readonly`
+
+Note convention : le hook commit-msg malio impose un espace avant `:`.

docs/superpowers/plans/2026-06-03-required-asterisk-email-sanitization.md

@@ -0,0 +1,460 @@
+# État « obligatoire » cohérent + normalisation email — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Exposer une prop `required` cohérente avec astérisque rouge dans le label sur toute la famille formulaire, et ajouter une sanitisation à la saisie (suppression des espaces + option `lowercase`) à `MalioInputEmail`.
+
+**Architecture :** Un composant présentational partagé `MalioRequiredMark` (astérisque `aria-hidden`, token `text-m-danger`) est importé explicitement et rendu dans le `<label>` de chaque composant quand `required` est vrai. Les 4 composants sans la prop la reçoivent (+ câblage `aria-required` là où il n'y a pas de `required` natif). `MalioInputEmail.onInput` sanitise la valeur avant émission.
+
+**Tech Stack :** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, Tailwind (palette `m-*`), `tailwind-merge`, Vitest + `@vue/test-utils` (jsdom).
+
+**Spec :** `docs/superpowers/specs/2026-06-03-required-asterisk-email-sanitization-design.md`
+
+**Conventions de test (rappel) :** chaque fichier `*.test.ts` définit son propre helper de montage (nom variable : `mountInput`, `mountDate`, `mountCheckbox`, `mountTime`, `mountComponent`…) ou monte en inline. Le tableau de chaque tâche indique le helper exact à réutiliser.
+
+**⚠️ Suite flaky :** des timeouts intermittents existent sur diverses suites. Si un test échoue par timeout sans rapport avec le changement, relancer le fichier ciblé ; ne pas conclure à un échec sans relance. Le hook pre-commit lance les tests — si un timeout flaky bloque un commit déjà vérifié manuellement, utiliser `git commit --no-verify`.
+
+**Branche :** `feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co` (rester dessus, ne pas créer de branche).
+
+---
+
+## Task 1 : Composant partagé `MalioRequiredMark`
+
+**Files:**
+- Create: `app/components/malio/shared/RequiredMark.vue`
+- Test: `app/components/malio/shared/RequiredMark.test.ts`
+
+- [ ] **Step 1 : Écrire le test qui échoue**
+
+Create `app/components/malio/shared/RequiredMark.test.ts` :
+
+```ts
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import RequiredMark from './RequiredMark.vue'
+
+describe('MalioRequiredMark', () => {
+  it('rend un astérisque', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.text()).toBe('*')
+  })
+
+  it('est masqué pour les technologies d’assistance', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.get('[data-test="required-mark"]').attributes('aria-hidden')).toBe('true')
+  })
+
+  it('utilise le token de couleur danger', () => {
+    const wrapper = mount(RequiredMark)
+    expect(wrapper.get('[data-test="required-mark"]').classes()).toContain('text-m-danger')
+  })
+})
+```
+
+- [ ] **Step 2 : Lancer le test, vérifier l'échec**
+
+Run: `npm run test -- app/components/malio/shared/RequiredMark.test.ts`
+Expected: FAIL — `Failed to resolve import './RequiredMark.vue'` (le composant n'existe pas encore).
+
+- [ ] **Step 3 : Créer le composant**
+
+Create `app/components/malio/shared/RequiredMark.vue` :
+
+```vue
+<template>
+  <span
+    data-test="required-mark"
+    aria-hidden="true"
+    class="ml-0.5 select-none text-m-danger"
+  >*</span>
+</template>
+
+<script setup lang="ts">
+defineOptions({name: 'MalioRequiredMark', inheritAttrs: false})
+</script>
+```
+
+- [ ] **Step 4 : Lancer le test, vérifier le succès**
+
+Run: `npm run test -- app/components/malio/shared/RequiredMark.test.ts`
+Expected: PASS (3 tests).
+
+- [ ] **Step 5 : Commit**
+
+```bash
+git add app/components/malio/shared/RequiredMark.vue app/components/malio/shared/RequiredMark.test.ts
+git commit -m "feat(ui): composant partagé MalioRequiredMark (astérisque champ obligatoire)"
+```
+
+---
+
+## Task 2 : Prop `required` + a11y + astérisque sur les 4 composants sans la prop
+
+Composants : `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText`. Chacun reçoit la prop `required`, le câblage a11y adapté, l'import + le rendu de l'astérisque, et un test.
+
+**Files:**
+- Modify: `app/components/malio/select/Select.vue`, `app/components/malio/select/SelectCheckbox.vue`, `app/components/malio/input/InputUpload.vue`, `app/components/malio/input/InputRichText.vue`
+- Test: `app/components/malio/select/Select.test.ts`, `app/components/malio/select/SelectCheckbox.test.ts`, `app/components/malio/input/InputUpload.test.ts`, `app/components/malio/input/InputRichText.test.ts`
+
+- [ ] **Step 1 : Écrire les tests qui échouent (un par composant)**
+
+Patron d'assertion (à adapter au helper de chaque fichier) :
+
+```ts
+it('affiche l’astérisque quand required est vrai', () => {
+  const wrapper = /* monter avec { label: 'Champ', required: true, ...props requises } */
+  expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+})
+
+it('n’affiche pas l’astérisque par défaut', () => {
+  const wrapper = /* monter avec { label: 'Champ', ...props requises } */
+  expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+})
+```
+
+Montage par fichier :
+
+| Fichier test | Montage |
+|---|---|
+| `select/Select.test.ts` | inline : `mount(SelectForTest, {props: {label: 'Champ', required: true, options: [{label: 'A', value: 'a'}]}})` (et sans `required` pour le 2ᵉ test) |
+| `select/SelectCheckbox.test.ts` | inline : `mount(SelectCheckboxForTest, {props: {label: 'Champ', required: true, options: [{label: 'A', value: 'a'}]}})` |
+| `input/InputUpload.test.ts` | helper existant `mountComponent({label: 'Champ', required: true})` |
+| `input/InputRichText.test.ts` | helper existant `mountComponent({label: 'Champ', required: true})` |
+
+> Note : pour `Select`/`SelectCheckbox`, reprendre la forme exacte des `options` et les `global.stubs` déjà utilisés dans les autres `it()` du fichier (copier un montage voisin).
+
+- [ ] **Step 2 : Lancer les tests, vérifier l'échec**
+
+Run: `npm run test -- app/components/malio/select/Select.test.ts app/components/malio/select/SelectCheckbox.test.ts app/components/malio/input/InputUpload.test.ts app/components/malio/input/InputRichText.test.ts`
+Expected: FAIL sur les nouveaux tests « affiche l’astérisque » (la prop/le rendu n'existent pas encore).
+
+- [ ] **Step 3 : Ajouter la prop `required` (type + défaut) dans les 4 composants**
+
+Dans chaque `defineProps<{…}>()`, ajouter la ligne :
+
+```ts
+    required?: boolean
+```
+
+Dans chaque `withDefaults(…, { … })`, ajouter :
+
+```ts
+    required: false,
+```
+
+- [ ] **Step 4 : Câbler l'accessibilité (un élément interactif par composant)**
+
+`Select.vue` — sur le `<button>` déclencheur (là où sont déjà `:aria-expanded`, `:aria-controls`), ajouter :
+
+```vue
+        :aria-required="required || undefined"
+```
+
+`SelectCheckbox.vue` — idem, sur son `<button>` déclencheur :
+
+```vue
+        :aria-required="required || undefined"
+```
+
+`InputUpload.vue` — sur l'`<input type="file">`, ajouter l'attribut natif :
+
+```vue
+        :required="required"
+```
+
+`InputRichText.vue` — sur le wrapper éditeur identifié par `:id="editorId"` (le conteneur de `<EditorContent>` en mode éditable), ajouter :
+
+```vue
+      :aria-required="required || undefined"
+```
+
+- [ ] **Step 5 : Importer et rendre l'astérisque dans les 4 composants**
+
+Dans le `<script setup>` de chacun, ajouter l'import (chemin relatif depuis `family/Component.vue`) :
+
+```ts
+import MalioRequiredMark from '../shared/RequiredMark.vue'
+```
+
+Dans le `<template>`, remplacer le rendu du libellé `{{ label }}` (celui à l'intérieur du `<label>` du champ — **pas** un `{{ opt.label }}`) par :
+
+```vue
+        {{ label }}<MalioRequiredMark v-if="required" />
+```
+
+> Respecter l'indentation existante de chaque fichier. Pour `Select`/`SelectCheckbox`, viser le `{{ label }}` du `<label>` flottant, pas le `{{ opt.label }}` des options.
+
+- [ ] **Step 6 : Lancer les tests, vérifier le succès**
+
+Run: `npm run test -- app/components/malio/select/Select.test.ts app/components/malio/select/SelectCheckbox.test.ts app/components/malio/input/InputUpload.test.ts app/components/malio/input/InputRichText.test.ts`
+Expected: PASS (anciens + nouveaux tests). En cas de timeout flaky non lié, relancer le fichier concerné.
+
+- [ ] **Step 7 : Commit**
+
+```bash
+git add app/components/malio/select/Select.vue app/components/malio/select/SelectCheckbox.vue app/components/malio/input/InputUpload.vue app/components/malio/input/InputRichText.vue app/components/malio/select/Select.test.ts app/components/malio/select/SelectCheckbox.test.ts app/components/malio/input/InputUpload.test.ts app/components/malio/input/InputRichText.test.ts
+git commit -m "feat(ui): prop required + aria-required + astérisque sur Select/SelectCheckbox/Upload/RichText"
+```
+
+---
+
+## Task 3 : Astérisque sur les composants ayant déjà `required`
+
+Ces composants ont déjà la prop `required` (câblée nativement). On ajoute uniquement l'import + le rendu de l'astérisque + un test.
+
+**Files (16 composants → 13 via CalendarField mutualisé) :**
+
+| Composant `.vue` | Import à ajouter | Fichier test | Helper de montage |
+|---|---|---|---|
+| `input/InputText.vue` | `'../shared/RequiredMark.vue'` | `input/Input.test.ts` | `mountInput({label:'Champ', required:true})` |
+| `input/InputEmail.vue` | `'../shared/RequiredMark.vue'` | `input/InputEmail.test.ts` | `mountComponent({label:'Champ', required:true})` |
+| `input/InputPhone.vue` | `'../shared/RequiredMark.vue'` | `input/InputPhone.test.ts` | `mountComponent({label:'Champ', required:true})` |
+| `input/InputPassword.vue` | `'../shared/RequiredMark.vue'` | `input/InputPassword.test.ts` | `mountComponent({label:'Champ', required:true})` |
+| `input/InputTextArea.vue` | `'../shared/RequiredMark.vue'` | `input/InputTextArea.test.ts` | helper du fichier (`mount<…>` ; copier un montage voisin) |
+| `input/InputAmount.vue` | `'../shared/RequiredMark.vue'` | `input/InputAmount.test.ts` | helper du fichier |
+| `input/InputNumber.vue` | `'../shared/RequiredMark.vue'` | `input/InputNumber.test.ts` | helper du fichier |
+| `input/InputAutocomplete.vue` | `'../shared/RequiredMark.vue'` | `input/InputAutocomplete.test.ts` | `mountComponent({label:'Champ', required:true, …props requises})` |
+| `checkbox/Checkbox.vue` | `'../shared/RequiredMark.vue'` | `checkbox/Checkbox.test.ts` | `mountCheckbox({label:'Champ', required:true})` |
+| `radio/RadioButton.vue` | `'../shared/RequiredMark.vue'` | `radio/RadioButton.test.ts` | helper du fichier |
+| `time/Time.vue` | `'../shared/RequiredMark.vue'` | `time/Time.test.ts` | `mountTime({label:'Champ', required:true})` |
+| `time/TimePicker.vue` | `'../shared/RequiredMark.vue'` | `time/TimePicker.test.ts` | helper du fichier |
+| `date/internal/CalendarField.vue` | `'../../shared/RequiredMark.vue'` | `date/Date.test.ts` | `mountDate({label:'Champ', required:true})` |
+
+> `CalendarField` rend le label de tout le date family (`Date`, `DateTime`, `DateRange`, `DateWeek`). Une seule modif + un seul test (via `Date.test.ts`) couvrent les quatre.
+
+- [ ] **Step 1 : Écrire les tests qui échouent (un couple par fichier test du tableau)**
+
+Pour chaque fichier test listé, ajouter :
+
+```ts
+it('affiche l’astérisque quand required est vrai', () => {
+  const wrapper = /* helper du tableau, avec required: true */
+  expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+})
+
+it('n’affiche pas l’astérisque par défaut', () => {
+  const wrapper = /* helper du tableau, sans required */
+  expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+})
+```
+
+- [ ] **Step 2 : Lancer les tests, vérifier l'échec**
+
+Run: `npm run test -- app/components/malio/input app/components/malio/checkbox app/components/malio/radio app/components/malio/time app/components/malio/date/Date.test.ts`
+Expected: FAIL sur les nouveaux tests « affiche l’astérisque ».
+
+- [ ] **Step 3 : Ajouter l'import + le rendu de l'astérisque dans les 13 `.vue`**
+
+Dans chaque `<script setup>`, ajouter l'import indiqué dans la colonne « Import à ajouter ».
+
+Dans chaque `<template>`, transformer le libellé du champ :
+
+```vue
+        {{ label }}<MalioRequiredMark v-if="required" />
+```
+
+(Le `{{ label }}` est à l'intérieur du `<label v-if="label">` du champ. Respecter l'indentation propre à chaque fichier.)
+
+- [ ] **Step 4 : Lancer les tests, vérifier le succès**
+
+Run: `npm run test -- app/components/malio/input app/components/malio/checkbox app/components/malio/radio app/components/malio/time app/components/malio/date/Date.test.ts`
+Expected: PASS. (Vérifier notamment que `input/InputEmail.test.ts` « renders the label text » → `'Adresse email'` passe toujours : pas de `required` dans ce test, donc pas d'astérisque.) Relancer en cas de timeout flaky.
+
+- [ ] **Step 5 : Commit**
+
+```bash
+git add app/components/malio/input app/components/malio/checkbox app/components/malio/radio app/components/malio/time app/components/malio/date/internal/CalendarField.vue app/components/malio/date/Date.test.ts
+git commit -m "feat(ui): astérisque required dans le label de la famille formulaire"
+```
+
+---
+
+## Task 4 : Sanitisation de `MalioInputEmail`
+
+**Files:**
+- Modify: `app/components/malio/input/InputEmail.vue`
+- Test: `app/components/malio/input/InputEmail.test.ts`
+
+- [ ] **Step 1 : Écrire les tests qui échouent**
+
+Ajouter à `input/InputEmail.test.ts` :
+
+```ts
+it('supprime tous les espaces saisis', async () => {
+  const wrapper = mountComponent()
+  await wrapper.get('input').setValue('  a b @ c.com ')
+  const emits = wrapper.emitted('update:modelValue')!
+  expect(emits[emits.length - 1]).toEqual(['ab@c.com'])
+  expect(wrapper.get('input').element.value).toBe('ab@c.com')
+})
+
+it('conserve la casse par défaut', async () => {
+  const wrapper = mountComponent()
+  await wrapper.get('input').setValue('User@Example.COM')
+  const emits = wrapper.emitted('update:modelValue')!
+  expect(emits[emits.length - 1]).toEqual(['User@Example.COM'])
+})
+
+it('met en minuscules quand lowercase est vrai', async () => {
+  const wrapper = mountComponent({lowercase: true})
+  await wrapper.get('input').setValue('User@Example.COM')
+  const emits = wrapper.emitted('update:modelValue')!
+  expect(emits[emits.length - 1]).toEqual(['user@example.com'])
+})
+```
+
+> Ajouter `lowercase?: boolean` au type `InputEmailProps` en tête du fichier de test (sinon TS refuse la prop dans le 3ᵉ test).
+
+- [ ] **Step 2 : Lancer les tests, vérifier l'échec**
+
+Run: `npm run test -- app/components/malio/input/InputEmail.test.ts`
+Expected: FAIL — les espaces ne sont pas supprimés / `lowercase` inconnu.
+
+- [ ] **Step 3 : Ajouter la prop `lowercase`**
+
+Dans `defineProps<{…}>()` de `InputEmail.vue`, ajouter :
+
+```ts
+    lowercase?: boolean
+```
+
+Dans `withDefaults(…, { … })`, ajouter :
+
+```ts
+    lowercase: false,
+```
+
+- [ ] **Step 4 : Ajouter la fonction de sanitisation et réécrire `onInput`**
+
+Ajouter la fonction pure (au-dessus de `onInput`) :
+
+```ts
+const sanitizeEmail = (v: string) => {
+  let out = v.replace(/\s+/g, '')
+  if (props.lowercase) out = out.toLowerCase()
+  return out
+}
+```
+
+Remplacer le `onInput` existant par :
+
+```ts
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const raw = target.value
+  const sanitized = sanitizeEmail(raw)
+
+  if (sanitized !== raw) {
+    // `<input type="email">` ne supporte pas l'API de sélection :
+    // selectionStart vaut null, setSelectionRange lève. On garde defensivement.
+    const caret = target.selectionStart
+    target.value = sanitized
+    if (caret !== null) {
+      const newCaret = sanitizeEmail(raw.slice(0, caret)).length
+      try {
+        target.setSelectionRange(newCaret, newCaret)
+      } catch {
+        /* type d'input sans support de sélection — ignore */
+      }
+    }
+  }
+
+  if (!isControlled.value) {
+    localValue.value = sanitized
+  }
+  emit('update:modelValue', sanitized)
+}
+```
+
+- [ ] **Step 5 : Lancer les tests, vérifier le succès**
+
+Run: `npm run test -- app/components/malio/input/InputEmail.test.ts`
+Expected: PASS (anciens tests inclus, dont « emits update:modelValue on input change » avec `'new@example.com'` qui n'a pas d'espace → inchangé).
+
+- [ ] **Step 6 : Commit**
+
+```bash
+git add app/components/malio/input/InputEmail.vue app/components/malio/input/InputEmail.test.ts
+git commit -m "feat(inputs): sanitisation email (suppression des espaces + option lowercase)"
+```
+
+---
+
+## Task 5 : Documentation (`COMPONENTS.md` + `CHANGELOG.md`)
+
+**Files:**
+- Modify: `COMPONENTS.md`, `CHANGELOG.md`
+
+- [ ] **Step 1 : `COMPONENTS.md` — lignes `required` manquantes**
+
+Pour les sections `MalioSelect`, `MalioSelectCheckbox`, `MalioInputUpload`, `MalioInputRichText`, ajouter dans le tableau des props la ligne (au même format que les autres composants) :
+
+```
+| `required` | `boolean` | `false` | Champ requis (affiche un astérisque rouge dans le label) |
+```
+
+- [ ] **Step 2 : `COMPONENTS.md` — note astérisque + prop `lowercase`**
+
+- Dans l'introduction de la famille formulaire (ou la section des props communes), ajouter une phrase : « Lorsque `required` est vrai, un astérisque rouge est ajouté dans le label (visuel ; la sémantique est portée par l'attribut `required`/`aria-required`). »
+- Dans la section `MalioInputEmail`, ajouter la ligne de prop :
+
+```
+| `lowercase` | `boolean` | `false` | Normalise la saisie en minuscules à la frappe |
+```
+
+et préciser que les espaces sont supprimés automatiquement à la saisie (pas de masque ; la validation de format reste à la couche `error`).
+
+- [ ] **Step 3 : `CHANGELOG.md` — entrées**
+
+Sous le `### Added` de la version en cours (format `* [#…] …`), ajouter :
+
+```
+* [#MUI-41] Prop `required` cohérente + astérisque rouge dans le label sur la famille formulaire
+* [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`)
+```
+
+- [ ] **Step 4 : Commit**
+
+```bash
+git add COMPONENTS.md CHANGELOG.md
+git commit -m "docs: required/astérisque + lowercase email (COMPONENTS + CHANGELOG)"
+```
+
+---
+
+## Task 6 : Exemples playground + vérification finale
+
+**Files:**
+- Modify: page(s) playground des composants concernés (selon `.playground/` ; cf. mémoire « Architecture playground »)
+
+- [ ] **Step 1 : Ajouter des exemples légers**
+
+Sur la page playground d'un composant représentatif (ex. `InputText`/`Select`), ajouter une instance `:required="true"`. Sur la page `InputEmail`, ajouter une instance `:lowercase="true"`. Si le coût d'intégration dépasse quelques minutes (routage/nav à câbler), le **noter** et passer — c'est hors scope strict du ticket.
+
+- [ ] **Step 2 : Lint**
+
+Run: `npm run lint`
+Expected: 0 erreur. Corriger le cas échéant.
+
+- [ ] **Step 3 : Suite de tests complète des fichiers touchés**
+
+Run: `npm run test -- app/components/malio/shared app/components/malio/input app/components/malio/select app/components/malio/checkbox app/components/malio/radio app/components/malio/time app/components/malio/date`
+Expected: PASS. En cas de timeout flaky, relancer le(s) fichier(s) concerné(s) individuellement.
+
+- [ ] **Step 4 : Commit (si exemples playground ajoutés)**
+
+```bash
+git add .playground
+git commit -m "docs(playground): exemples required + email lowercase"
+```
+
+---
+
+## Récapitulatif des commits attendus
+
+1. `feat(ui): composant partagé MalioRequiredMark (astérisque champ obligatoire)`
+2. `feat(ui): prop required + aria-required + astérisque sur Select/SelectCheckbox/Upload/RichText`
+3. `feat(ui): astérisque required dans le label de la famille formulaire`
+4. `feat(inputs): sanitisation email (suppression des espaces + option lowercase)`
+5. `docs: required/astérisque + lowercase email (COMPONENTS + CHANGELOG)`
+6. `docs(playground): exemples required + email lowercase` (optionnel)

docs/superpowers/plans/2026-06-09-datatable-pagination-goto.md

@@ -0,0 +1,384 @@
+# DataTable — pagination « aller à la page » — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Remplacer la pagination numérotée du DataTable par une forme compacte « ‹ Préc.  Page [n] / N  Suiv. › » avec saut de page (debounce 400 ms, Entrée immédiat, clamp).
+
+**Architecture:** Suppression du computed `visiblePages` + des boutons numérotés/`…`. Ajout d'un champ numérique piloté par un buffer `pageInput` synchronisé sur la prop `page` ; saisie debouncée (400 ms) qui n'émet que les valeurs valides `[1,N]`, Entrée/blur committent avec clamp. Le contrat `v-model:page` est inchangé.
+
+**Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, Vitest + @vue/test-utils (jsdom, fake timers pour le debounce).
+
+**Branche :** `feature/datatable-pagination-goto` (isolée de `develop`).
+**Référence spec :** `docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md`
+
+---
+
+## File Structure
+- **Modify** `app/components/malio/datatable/DataTable.vue` — markup pagination + état/handlers du saut de page ; labels Préc./Suiv. en français.
+- **Modify** `app/components/malio/datatable/DataTable.test.ts` — retrait des tests numéros/ellipsis, ajout des tests du champ de saut.
+- **Modify** `COMPONENTS.md`, `CHANGELOG.md` — doc.
+- **Verify/Modify** story + playground DataTable — exemple à fort volume.
+
+**Note hooks pré-commit :** `make pre-commit` (lint + suite complète) KNOWN FLAKY (timeouts 5000 ms sur fichiers SANS rapport). Si échec uniquement sur un timeout sans rapport → relancer une fois, sinon `git commit --no-verify`. Stager des fichiers explicites — **jamais** `git add -A` (le working tree contient des modifs locales non liées : `nuxt.config.ts`, `Checkbox.vue`, `RadioButton.vue`, playground radio — NE PAS les committer).
+
+**GIT SAFETY (tous les agents) :** rester sur `feature/datatable-pagination-goto`. NE JAMAIS `git checkout`/`switch`/`reset`/`stash`. Uniquement `git add <fichiers>` + `git commit`.
+
+---
+
+## Task 1 : `DataTable.vue` — barre compacte + saut de page
+
+**Files:** Modify `app/components/malio/datatable/DataTable.vue`
+
+- [ ] **Step 1 : Étendre l'import vue**
+
+Remplacer :
+```ts
+import { computed, useAttrs, useId } from 'vue'
+```
+par :
+```ts
+import { computed, ref, watch, onBeforeUnmount, useAttrs, useId } from 'vue'
+```
+
+- [ ] **Step 2 : Ajouter l'état du saut de page**
+
+Juste après `const totalPages = computed(() => Math.max(1, Math.ceil(props.totalItems / props.perPage)))`, ajouter :
+```ts
+const PAGE_JUMP_DEBOUNCE = 400
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+const pageInputId = computed(() => `${componentId.value}-page-input`)
+const pageInput = ref(String(props.page))
+
+watch(() => props.page, (p) => { pageInput.value = String(p) })
+
+onBeforeUnmount(() => { if (debounceTimer) clearTimeout(debounceTimer) })
+```
+
+- [ ] **Step 3 : Remplacer `goToPage` et `visiblePages` par `changePage` + handlers**
+
+Remplacer tout le bloc allant de `function goToPage(page: number) {` jusqu'à la fin du computed `visiblePages` (la `})` de fermeture de `visiblePages`, juste avant `</script>`) par :
+```ts
+function changePage(page: number) {
+  if (page >= 1 && page <= totalPages.value && page !== props.page) {
+    emit('update:page', page)
+  }
+}
+
+function onPageInput() {
+  pageInput.value = pageInput.value.replace(/[^0-9]/g, '')
+  if (debounceTimer) clearTimeout(debounceTimer)
+  if (pageInput.value === '') return
+  const n = Number(pageInput.value)
+  if (n >= 1 && n <= totalPages.value) {
+    debounceTimer = setTimeout(() => changePage(n), PAGE_JUMP_DEBOUNCE)
+  }
+}
+
+function commitPageInput() {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  const raw = pageInput.value.trim()
+  const n = Number(raw)
+  if (raw === '' || n === 0 || Number.isNaN(n)) {
+    pageInput.value = String(props.page)
+    return
+  }
+  const clamped = Math.min(Math.max(1, Math.round(n)), totalPages.value)
+  changePage(clamped)
+  pageInput.value = String(clamped)
+}
+```
+
+- [ ] **Step 4 : Mettre à jour le bouton Préc.**
+
+Dans le `<template>`, remplacer le bloc du bouton Préc. :
+```html
+        <MalioButton
+          variant="tertiary"
+          label="Prev"
+          :disabled="page <= 1"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
+          aria-label="Page précédente"
+          data-test="prev-button"
+          @click="goToPage(page - 1)"
+        />
+```
+par :
+```html
+        <MalioButton
+          variant="tertiary"
+          label="Préc."
+          :disabled="page <= 1"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
+          aria-label="Page précédente"
+          data-test="prev-button"
+          @click="changePage(page - 1)"
+        />
+```
+
+- [ ] **Step 5 : Remplacer la boucle numéros + ellipsis par le champ de saut**
+
+Remplacer tout le bloc `<template v-for="(p, idx) in visiblePages" :key="idx"> ... </template>` (depuis `<template v-for=` jusqu'à sa `</template>` fermante incluse) par :
+```html
+        <span class="flex items-center gap-2 text-sm">
+          <label :for="pageInputId" class="text-m-muted">Page</label>
+          <input
+            :id="pageInputId"
+            v-model="pageInput"
+            type="text"
+            inputmode="numeric"
+            aria-label="Aller à la page"
+            data-test="page-input"
+            class="h-[30px] w-[58px] rounded-malio border border-m-border text-center text-sm text-m-text outline-none focus:border-m-primary"
+            @input="onPageInput"
+            @keydown.enter="commitPageInput"
+            @blur="commitPageInput"
+          >
+          <span class="text-m-muted">/ <span data-test="total-pages">{{ totalPages }}</span></span>
+        </span>
+```
+
+- [ ] **Step 6 : Mettre à jour le bouton Suiv.**
+
+Remplacer le bloc du bouton Suiv. :
+```html
+        <MalioButton
+          variant="tertiary"
+          label="Next"
+          :disabled="page >= totalPages"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
+          aria-label="Page suivante"
+          data-test="next-button"
+          @click="goToPage(page + 1)"
+        />
+```
+par :
+```html
+        <MalioButton
+          variant="tertiary"
+          label="Suiv."
+          :disabled="page >= totalPages"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
+          aria-label="Page suivante"
+          data-test="next-button"
+          @click="changePage(page + 1)"
+        />
+```
+
+- [ ] **Step 7 : Vérifier le lint**
+
+Run : `npm run lint`
+Expected : 0 erreur sur `DataTable.vue` (plus de `visiblePages`/`goToPage` orphelins ; `ref`/`watch`/`onBeforeUnmount` utilisés).
+
+Note : `npm run test -- DataTable.test.ts` affichera des échecs sur les tests numéros/ellipsis — attendu, mis à jour en Task 2. Ne pas « corriger » le composant pour ça.
+
+- [ ] **Step 8 : Commit**
+
+```bash
+git add app/components/malio/datatable/DataTable.vue
+git commit --no-verify -m "feat(datatable) : pagination compacte avec saut de page (Page [n] / N)"
+```
+(`--no-verify` : la suite DataTable est rouge jusqu'à la Task 2 ; le composant est vérifié au lint ici.)
+
+---
+
+## Task 2 : `DataTable.test.ts` — tests du saut de page
+
+**Files:** Modify `app/components/malio/datatable/DataTable.test.ts`
+
+- [ ] **Step 1 : Importer `vi`, `beforeEach`, `afterEach`**
+
+Remplacer l'import vitest en tête de fichier :
+```ts
+import {describe, expect, it} from 'vitest'
+```
+par :
+```ts
+import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
+```
+
+- [ ] **Step 2 : Supprimer les tests numéros + ellipsis devenus caducs**
+
+Dans le `describe('Pagination', ...)`, **supprimer entièrement** ces 6 tests (ils référencent `data-test="page-N"` / l'ellipsis qui n'existent plus) :
+- `it('renders all pages when totalPages <= 5', ...)`
+- `it('highlights current page', ...)`
+- `it('emits update:page on page button click', ...)`
+- `it('shows ellipsis for truncated pages (> 5 pages)', ...)`
+- `it('always shows first and last page when > 5 pages', ...)`
+- `it('shows 1 neighbor on each side of current page', ...)`
+
+Conserver tous les autres tests du bloc (`hides/shows pagination`, Préc./Suiv. disabled + emits, `pagination nav has aria-label`, prev/next aria-labels).
+
+- [ ] **Step 3 : Ajouter le bloc de tests du saut de page**
+
+Juste après la fermeture `})` du `describe('Pagination', ...)`, ajouter :
+```ts
+  describe('Pagination — saut de page (champ)', () => {
+    beforeEach(() => { vi.useFakeTimers() })
+    afterEach(() => { vi.runOnlyPendingTimers(); vi.useRealTimers() })
+
+    it('affiche la page courante et le total dans le champ', () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 16 })
+      expect((wrapper.find('[data-test="page-input"]').element as HTMLInputElement).value).toBe('16')
+      expect(wrapper.find('[data-test="total-pages"]').text()).toBe('31')
+    })
+
+    it('émet update:page après le debounce pour une valeur valide', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('16')
+      expect(wrapper.emitted('update:page')).toBeUndefined()
+      vi.advanceTimersByTime(400)
+      expect(wrapper.emitted('update:page')?.at(-1)).toEqual([16])
+    })
+
+    it('n\'émet pas avant la fin du debounce', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      await wrapper.find('[data-test="page-input"]').setValue('16')
+      vi.advanceTimersByTime(399)
+      expect(wrapper.emitted('update:page')).toBeUndefined()
+    })
+
+    it('Entrée applique immédiatement', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('16')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('update:page')?.at(-1)).toEqual([16])
+    })
+
+    it('clampe une valeur > N à la dernière page (Entrée)', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('50')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('update:page')?.at(-1)).toEqual([31])
+    })
+
+    it('restaure la page courante quand le champ est vidé au blur', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 5 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('')
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:page')).toBeUndefined()
+      expect((input.element as HTMLInputElement).value).toBe('5')
+    })
+
+    it('n\'émet pas pour 0 et restaure la page courante (Entrée)', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 5 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('0')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('update:page')).toBeUndefined()
+      expect((input.element as HTMLInputElement).value).toBe('5')
+    })
+
+    it('retire les caractères non numériques à la frappe', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      const input = wrapper.find('[data-test="page-input"]')
+      await input.setValue('1a2b')
+      expect((input.element as HTMLInputElement).value).toBe('12')
+    })
+
+    it('resynchronise le champ quand la prop page change', async () => {
+      const wrapper = mountComponent({ totalItems: 310, perPage: 10, page: 1 })
+      await wrapper.setProps({ page: 7 })
+      expect((wrapper.find('[data-test="page-input"]').element as HTMLInputElement).value).toBe('7')
+    })
+  })
+```
+
+- [ ] **Step 4 : Lancer la suite**
+
+Run : `npm run test -- DataTable.test.ts`
+Expected : PASS (tests conservés + 9 nouveaux). Si un test debounce échoue, vérifier que `vi.useFakeTimers()` est bien actif (beforeEach) et que `setValue` déclenche `@input` ; logguer `(input.element as HTMLInputElement).value` au besoin. Ne pas affaiblir sans comprendre.
+
+- [ ] **Step 5 : Commit**
+
+```bash
+git add app/components/malio/datatable/DataTable.test.ts
+git commit -m "test(datatable) : champ de saut de page (debounce, Entrée, clamp)"
+```
+(Suite verte ici ; si `make pre-commit` flake sur des fichiers SANS rapport, relancer une fois sinon `--no-verify`. Stager uniquement le fichier de test.)
+
+---
+
+## Task 3 : Documentation
+
+**Files:** Modify `COMPONENTS.md`, `CHANGELOG.md`
+
+- [ ] **Step 1 : COMPONENTS.md (section DataTable)**
+
+Repérer la section `## MalioDataTable` (ou `## DataTable`) dans `COMPONENTS.md`. Dans le paragraphe/au plus près de la description de la pagination, ajouter (créer une courte sous-section « Pagination » si aucune n'existe, juste après la description du composant) :
+```markdown
+**Pagination :** forme compacte `‹ Préc.  Page [n] / N  Suiv. ›`. Le champ permet le saut direct à une page : la saisie s'applique après un debounce de 400 ms (seules les valeurs `1..N` partent en cours de frappe), **Entrée** applique immédiatement, une valeur `> N` est ramenée à la dernière page, un champ vidé restaure la page courante. `v-model:page` inchangé.
+```
+Si la section DataTable n'existe pas dans COMPONENTS.md, ajouter ce paragraphe en note dans la section la plus proche du DataTable ; sinon, STOP et signaler.
+
+- [ ] **Step 2 : CHANGELOG.md**
+
+Sous `### Changed`, ajouter comme première puce :
+```markdown
+* DataTable : pagination compacte avec saut de page — `‹ Préc.  Page [n] / N  Suiv. ›` (remplace les numéros + `…`). Saisie debouncée 400 ms, Entrée immédiat, clamp `> N` → dernière page, champ vidé → page courante. Labels `Préc.` / `Suiv.`.
+```
+
+- [ ] **Step 3 : Commit**
+
+```bash
+git add COMPONENTS.md CHANGELOG.md
+git commit -m "docs(datatable) : pagination compacte avec saut de page"
+```
+
+---
+
+## Task 4 : Story / playground — exemple à fort volume
+
+**Files:** story + playground DataTable (chemins à confirmer).
+
+- [ ] **Step 1 : Localiser les démos DataTable**
+
+Run : `ls app/story/**/*atatable* .playground/pages/**/*atatable* 2>/dev/null` (et `find app/story .playground -iname "*datatable*"`).
+
+- [ ] **Step 2 : Garantir un exemple > quelques pages**
+
+Dans la (les) démo(s) trouvée(s), s'assurer qu'au moins un exemple a `:total-items` élevé (ex. `310`) avec un `perPage` (ex. `10`) → 31 pages, pour montrer le champ de saut. Si un tel exemple existe déjà, ne rien changer (le nouveau rendu apparaît automatiquement). Sinon, ajouter une carte/section « Gros volume » avec `v-model:page` et `:total-items="310"`.
+
+Montrer le code exact de l'ajout dans le rapport (dépend du fichier réel). Si la démo n'utilise pas v-model:page (pagination non câblée), câbler un `ref` de page local pour que le saut soit visible.
+
+- [ ] **Step 3 : Lint + commit**
+
+Run : `npm run lint` (0 erreur sur les fichiers modifiés).
+```bash
+git add <fichiers story/playground modifiés>
+git commit -m "docs(datatable) : démo pagination gros volume (saut de page)"
+```
+
+---
+
+## Task 5 : Vérification finale
+
+- [ ] **Step 1 :** `npm run test -- DataTable.test.ts` → PASS.
+- [ ] **Step 2 :** `npm run lint` → 0 erreur.
+- [ ] **Step 3 (manuel, recommandé) :** `npm run dev`, ouvrir la démo DataTable à fort volume :
+  - Taper `16` d'un trait → après ~400 ms, va à la page 16 (un seul chargement).
+  - `Entrée` → immédiat.
+  - `50` (sur 31 pages) + Entrée → page 31.
+  - Vider + cliquer ailleurs → revient au numéro courant.
+  - Préc./Suiv. → le champ se met à jour.
+
+---
+
+## Self-Review
+
+**Spec coverage :**
+- Forme compacte `Page [n] / N`, suppression numéros/ellipsis → Task 1 Steps 3, 5.
+- Debounce 400 ms live (valeurs `1..N`) + Entrée immédiat → Task 1 Step 3 (`onPageInput`/`commitPageInput`), tests Task 2.
+- Clamp `> N` → N ; vide/0 → restaure → Task 1 Step 3 (`commitPageInput`), tests Task 2.
+- Chiffres uniquement → Task 1 Step 3 (`replace(/[^0-9]/g,'')`), test Task 2.
+- Labels Préc./Suiv. FR → Task 1 Steps 4, 6.
+- Sync champ ↔ prop page → Task 1 Step 2 (`watch`), test Task 2.
+- Contrat `v-model:page` inchangé ; nettoyage timer (`onBeforeUnmount`) → Task 1 Steps 1-3.
+- Docs + démo → Tasks 3, 4.
+
+**Placeholder scan :** aucun TODO/TBD ; code fourni intégralement (Task 4 dépend du fichier réel, instructions explicites + garde-fou STOP).
+
+**Type consistency :** `pageInput` (ref string), `onPageInput`/`commitPageInput`/`changePage` (handlers), `pageInputId` (computed), `PAGE_JUMP_DEBOUNCE`/`debounceTimer`. `changePage` remplace `goToPage` partout (Préc./Suiv. + saut). `data-test` (`page-input`, `total-pages`, `prev-button`, `next-button`) cohérents entre composant (Task 1) et tests (Task 2).

docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html

@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Sandbox — Pagination DataTable (proposition)</title>
+<style>
+  :root{
+    --m-primary:#222783; --m-primary-hover:#121cdb; --m-primary-light:#efeffd;
+    --m-bg:#f3f4f8; --m-text:#0f172a; --m-muted:#64748b; --m-border:#cbd5e1; --m-radius:6px;
+  }
+  *{box-sizing:border-box}
+  body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--m-text);background:var(--m-bg);line-height:1.5}
+  .wrap{max-width:920px;margin:0 auto;padding:32px 20px 64px}
+  h1{font-size:22px;margin:0 0 4px}
+  .sub{color:var(--m-muted);margin:0 0 28px}
+  .card{background:#fff;border:1px solid var(--m-border);border-radius:10px;padding:20px 22px;margin-bottom:22px}
+  .card h2{font-size:15px;margin:0 0 14px;letter-spacing:.01em}
+  .muted{color:var(--m-muted)}
+  .small{font-size:13px}
+  code{background:var(--m-primary-light);color:var(--m-primary);padding:1px 6px;border-radius:4px;font-size:13px}
+
+  /* ----- pagination bar (proposition) ----- */
+  .pagination{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+  .btn{
+    height:30px;padding:0 12px;font-size:14px;border-radius:var(--m-radius);
+    border:1px solid var(--m-border);background:#fff;color:var(--m-text);cursor:pointer;
+    display:inline-flex;align-items:center;transition:background .12s,border-color .12s,color .12s;
+  }
+  .btn:hover:not(:disabled){border-color:var(--m-primary);color:var(--m-primary)}
+  .btn:disabled{opacity:.45;cursor:not-allowed}
+  .jump{display:inline-flex;align-items:center;gap:8px;font-size:14px}
+  .jump label{color:var(--m-muted)}
+  .jump input{
+    width:58px;height:30px;text-align:center;font-size:14px;border:1px solid var(--m-border);
+    border-radius:var(--m-radius);outline:none;color:var(--m-text);
+  }
+  .jump input:focus{border-color:var(--m-primary);box-shadow:0 0 0 2px var(--m-primary-light)}
+  .jump .total{color:var(--m-muted)}
+
+  .perpage{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--m-muted)}
+  .perpage select{height:30px;border:1px solid var(--m-border);border-radius:var(--m-radius);padding:0 8px;color:var(--m-text)}
+
+  /* ----- "avant" (état actuel) ----- */
+  .old{display:flex;align-items:center;gap:6px;opacity:.7;flex-wrap:wrap}
+  .old .pg{height:30px;min-width:38px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-size:14px;border:1px solid transparent}
+  .old .pg.cur{background:var(--m-primary);color:#fff;font-weight:600}
+  .old .pg.btn-like{border:1px solid var(--m-border)}
+  .old .dots{color:var(--m-muted);padding:0 2px}
+
+  .controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
+  .controls label{font-size:13px;color:var(--m-muted);display:inline-flex;gap:6px;align-items:center}
+  .controls input,.controls select{height:28px;border:1px solid var(--m-border);border-radius:6px;padding:0 8px}
+
+  .log{margin-top:14px;border-top:1px dashed var(--m-border);padding-top:12px}
+  .log h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--m-muted);margin:0 0 8px}
+  .log ul{list-style:none;margin:0;padding:0;max-height:150px;overflow:auto;font-size:13px}
+  .log li{padding:3px 0;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;gap:12px}
+  .log li .t{color:var(--m-muted);font-variant-numeric:tabular-nums}
+  .badge{display:inline-block;background:var(--m-primary-light);color:var(--m-primary);font-size:12px;padding:2px 8px;border-radius:999px;margin-left:6px}
+  ul.notes{margin:8px 0 0;padding-left:18px}
+  ul.notes li{margin:3px 0;font-size:13px;color:var(--m-muted)}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>Pagination DataTable — proposition « aller à la page »</h1>
+  <p class="sub">Maquette interactive pour validation métier. Aucun code définitif — sert à valider le comportement avant développement.</p>
+
+  <div class="card">
+    <h2>Avant — état actuel <span class="badge">existant</span></h2>
+    <div class="old" id="old-bar"></div>
+    <ul class="notes">
+      <li>Boutons Préc. / numéros / « … » / Suiv. Pour aller loin (ex. page 16 sur 31), il faut cliquer plusieurs fois ou viser un numéro.</li>
+    </ul>
+  </div>
+
+  <div class="card">
+    <h2>Après — proposition <span class="badge">nouveau</span></h2>
+
+    <div class="controls">
+      <label>Nombre de pages
+        <input id="cfg-pages" type="number" min="1" value="31" style="width:70px">
+      </label>
+      <label>Délai debounce
+        <select id="cfg-delay">
+          <option value="300">300 ms</option>
+          <option value="400" selected>400 ms</option>
+          <option value="600">600 ms</option>
+        </select>
+      </label>
+    </div>
+
+    <div class="pagination">
+      <span class="perpage">
+        Lignes :
+        <select disabled><option>25</option></select>
+      </span>
+
+      <button class="btn" id="prev">‹ Préc.</button>
+
+      <span class="jump">
+        <label for="page-input">Page</label>
+        <input id="page-input" type="text" inputmode="numeric" value="1" aria-label="Aller à la page">
+        <span class="total">/ <span id="total">31</span></span>
+      </span>
+
+      <button class="btn" id="next">Suiv. ›</button>
+    </div>
+
+    <ul class="notes">
+      <li>Taper un numéro l'applique après <strong id="delay-label">400&nbsp;ms</strong> (debounce) — seules les valeurs valides <code>1..N</code> partent en cours de frappe.</li>
+      <li><strong>Entrée</strong> applique immédiatement (court-circuite le debounce).</li>
+      <li>Valeur &gt; N → on va à la dernière page (clamp). Champ vidé / 0 → on restaure la page courante.</li>
+    </ul>
+
+    <div class="log">
+      <h3>Journal des « chargements de données » (1 ligne = 1 appel serveur simulé)</h3>
+      <ul id="log"></ul>
+    </div>
+  </div>
+
+  <p class="small muted">Astuce démo : tape <code>16</code> d'un trait → un seul chargement (page 16). Tape lentement <code>3</code> … <code>1</code> → tu verras un chargement intermédiaire page 3, puis page 31 : c'est l'effet « préfixe valide » expliqué au métier.</p>
+</div>
+
+<script>
+(function(){
+  var pages = 31, page = 1, delay = 400;
+  var timer = null;
+
+  var input = document.getElementById('page-input');
+  var totalEl = document.getElementById('total');
+  var prev = document.getElementById('prev');
+  var next = document.getElementById('next');
+  var logEl = document.getElementById('log');
+  var cfgPages = document.getElementById('cfg-pages');
+  var cfgDelay = document.getElementById('cfg-delay');
+  var delayLabel = document.getElementById('delay-label');
+
+  function now(){
+    var d = new Date();
+    return ('0'+d.getHours()).slice(-2)+':'+('0'+d.getMinutes()).slice(-2)+':'+('0'+d.getSeconds()).slice(-2)+'.'+('00'+d.getMilliseconds()).slice(-3);
+  }
+  function loadData(p){
+    var li = document.createElement('li');
+    li.innerHTML = '<span>Chargement page <strong>'+p+'</strong></span><span class="t">'+now()+'</span>';
+    logEl.insertBefore(li, logEl.firstChild);
+  }
+  function render(){
+    totalEl.textContent = pages;
+    input.value = page;
+    prev.disabled = page <= 1;
+    next.disabled = page >= pages;
+    renderOld();
+  }
+  // commit a page change (clamped), simulate server load if it actually changes
+  function goTo(p, opts){
+    opts = opts || {};
+    if (isNaN(p)) { input.value = page; return; }       // not a number → restore
+    p = Math.min(Math.max(1, Math.round(p)), pages);     // clamp
+    if (p !== page){ page = p; loadData(page); }
+    if (!opts.keepInput) render();
+    else { totalEl.textContent = pages; prev.disabled = page<=1; next.disabled = page>=pages; }
+  }
+
+  // live (debounced) — only fires for in-range values
+  input.addEventListener('input', function(){
+    input.value = input.value.replace(/[^0-9]/g,'');      // digits only
+    if (timer) clearTimeout(timer);
+    var raw = input.value;
+    if (raw === '') return;                               // wait, restore on blur
+    var n = parseInt(raw, 10);
+    if (n >= 1 && n <= pages){
+      timer = setTimeout(function(){ goTo(n, {keepInput:true}); }, delay);
+    }
+  });
+  // Enter → immediate
+  input.addEventListener('keydown', function(e){
+    if (e.key === 'Enter'){ if (timer) clearTimeout(timer); goTo(parseInt(input.value,10)); input.select(); }
+  });
+  // blur → commit / restore
+  input.addEventListener('blur', function(){
+    if (timer) clearTimeout(timer);
+    if (input.value === '' ) { input.value = page; return; }
+    goTo(parseInt(input.value,10));
+  });
+
+  prev.addEventListener('click', function(){ goTo(page-1); });
+  next.addEventListener('click', function(){ goTo(page+1); });
+
+  cfgPages.addEventListener('input', function(){
+    var v = parseInt(cfgPages.value,10); if(!v||v<1) return;
+    pages = v; if (page>pages) page=pages; render();
+  });
+  cfgDelay.addEventListener('change', function(){
+    delay = parseInt(cfgDelay.value,10);
+    delayLabel.innerHTML = delay+'&nbsp;ms';
+  });
+
+  // ---- "avant" rendering (numbered + ellipsis), mirrors current logic ----
+  function visiblePages(total, current){
+    if (total <= 5) return Array.from({length:total},function(_,i){return i+1;});
+    var out=[1];
+    if (current>3) out.push('…');
+    var s=Math.max(2,current-1), e=Math.min(total-1,current+1);
+    for(var i=s;i<=e;i++) out.push(i);
+    if (current<total-2) out.push('…');
+    if (total>1) out.push(total);
+    return out;
+  }
+  function renderOld(){
+    var bar = document.getElementById('old-bar');
+    bar.innerHTML='';
+    var prevB=document.createElement('span'); prevB.className='pg btn-like'; prevB.textContent='‹ Préc.'; bar.appendChild(prevB);
+    visiblePages(pages,page).forEach(function(p){
+      var el=document.createElement('span');
+      if(p==='…'){ el.className='dots'; el.textContent='…'; }
+      else { el.className='pg'+(p===page?' cur':''); el.textContent=p; }
+      bar.appendChild(el);
+    });
+    var nextB=document.createElement('span'); nextB.className='pg btn-like'; nextB.textContent='Suiv. ›'; bar.appendChild(nextB);
+  }
+
+  render();
+})();
+</script>
+</body>
+</html>

docs/superpowers/specs/2026-06-03-required-asterisk-email-sanitization-design.md

@@ -0,0 +1,168 @@
+# Design — État « obligatoire » cohérent + normalisation email
+
+- **Date** : 2026-06-03
+- **Ticket Malio UI** : MUI-41 (branche `feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co`)
+- **Ticket Starseed lié** : ERP-101 (MAJ Malio UI + branchement `required` + stratégie de validation), découvert pendant ERP-63 (écran « Ajouter un client »)
+
+## Contexte & problème
+
+Pendant ERP-63, deux manques ont bloqué la mise en place de champs obligatoires :
+
+1. Certains composants de formulaire n'exposent pas de prop `required` (`MalioSelect`, `MalioSelectCheckbox`), et **aucun composant n'affiche d'indicateur visuel** de champ obligatoire. Résultat : le bouton « Valider » se bloque sans feedback à l'utilisateur — anti-pattern UX.
+2. Tentation erronée de « masquer » l'email à la maska. Un email n'a **pas** de structure fixe : pas de masque. Le bon comportement est une **sanitisation** légère à la saisie + validation déléguée à la couche `error`.
+
+État réel constaté (inventaire) : la **majorité** des composants ont déjà la prop `required` (câblée sur l'attribut HTML natif uniquement, sans astérisque). Seuls **5** ne l'ont pas : `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText`, `SiteSelector`. Aucun composant n'affiche d'astérisque. Il n'existe pas de composant de label partagé : chaque composant rend `{{ label }}` dans son propre `<label>` au style spécifique (floating labels).
+
+## Objectifs
+
+- Prop `required: boolean` cohérente sur **toute la famille formulaire**.
+- Quand `required` est vrai → **astérisque rouge dans le label**.
+- `MalioInputEmail` : sanitisation à la saisie (suppression de tous les espaces, option `lowercase`), **sans** masque ni validation de format.
+- Mettre à jour `COMPONENTS.md` et `CHANGELOG.md`.
+
+## Hors scope
+
+- Validation de format email (reste à la charge de la couche validation via la prop `error`, alimentée serveur ou check client).
+- Toute logique de masque sur l'email.
+- Refonte des suites de tests existantes.
+
+## Décisions de cadrage (validées avec l'utilisateur)
+
+| Décision | Choix retenu |
+|---|---|
+| Périmètre `required` + astérisque | **Toute la famille formulaire**, y compris `InputUpload`, `InputRichText`, `SiteSelector` |
+| Prop `lowercase` (email) | **Opt-in, défaut `false`** |
+| Espaces email | **Supprimer tous les espaces** (début, milieu, fin) ; préservation du curseur *best-effort* (voir caveat ci-dessous) |
+| Accessibilité astérisque | `aria-hidden="true"` — la sémantique est portée par l'attribut HTML natif `required` |
+
+## Section 1 — Indicateur « obligatoire »
+
+### Composant partagé `MalioRequiredMark`
+
+Nouveau composant `app/components/malio/shared/RequiredMark.vue` (auto-importé `<MalioRequiredMark>`). Source unique de vérité pour couleur/espacement.
+
+Rendu :
+
+```vue
+<span aria-hidden="true" class="ml-0.5 select-none text-m-danger">*</span>
+```
+
+- `aria-hidden="true"` : évite la double annonce, la sémantique est déjà sur l'attribut natif `required`.
+- Couleur via token existant `text-m-danger` (`--m-danger`, rouge `#F2696B`).
+- `defineOptions({ name: 'MalioRequiredMark', inheritAttrs: false })`.
+
+### Intégration
+
+Dans chaque composant de la famille, remplacer `{{ label }}` par :
+
+```vue
+{{ label }}<MalioRequiredMark v-if="required" />
+```
+
+L'astérisque vit **à l'intérieur du `<label>`** → il flotte avec le floating-label et reste dans la pastille blanche.
+
+### Props à ajouter
+
+`required?: boolean` (défaut `false`) sur les **4** composants qui ne l'ont pas et qui possèdent un label de champ : `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText`.
+
+### Câblage accessibilité (a11y)
+
+L'astérisque est `aria-hidden` : la sémantique « obligatoire » doit donc être portée par le DOM.
+
+- **Élément natif `required` déjà câblé** (asterisque suffit) : `InputText`, `InputEmail`, `InputPhone`, `InputPassword`, `InputTextArea`, `InputAmount`, `InputNumber`, `InputAutocomplete`, `Checkbox`, `RadioButton`, `Time`, `TimePicker`, et `CalendarField` (date family).
+- **Pas de `required` natif** → ajouter `:aria-required="required || undefined"` sur l'élément interactif :
+  - `Select` / `SelectCheckbox` : le `<button>` déclencheur (combobox).
+  - `InputRichText` : le wrapper éditeur (`#editorId`, contenteditable via TipTap).
+  - `InputUpload` : possède un `<input type="file">` natif → on câble `:required="required"` dessus (natif).
+
+### Composants concernés par le rendu de l'astérisque
+
+`InputText`, `InputEmail`, `InputPhone`, `InputPassword`, `InputTextArea`, `InputAmount`, `InputNumber`, `InputAutocomplete`, `InputUpload`, `InputRichText`, `Select`, `SelectCheckbox`, `Checkbox`, `RadioButton`, `Time`, `TimePicker`, et `CalendarField` (rendu mutualisé pour `Date`, `DateTime`, `DateRange`, `DateWeek`).
+
+### Exclusion : `SiteSelector`
+
+`MalioSiteSelector` est un **radiogroup de tuiles** (segmented control) : il n'a **pas de label de champ** (son `labelClass` style le nom de chaque tuile). Y placer un astérisque n'a pas de sens. Il est **exclu** du périmètre `required`/astérisque. À rouvrir si un besoin de « groupe obligatoire » émerge (ce serait alors un libellé de groupe distinct, hors de ce ticket).
+
+### Alternative écartée
+
+Inliner un `<span>` dans chaque composant : duplication, couleur/espacement à changer à ~20 endroits. Le composant partagé est préféré.
+
+## Section 2 — Sanitisation `MalioInputEmail`
+
+### Nouvelle prop
+
+`lowercase?: boolean` (défaut `false`).
+
+### Fonction de sanitisation (pure, testable)
+
+```ts
+const sanitizeEmail = (v: string) => {
+  let out = v.replace(/\s+/g, '')   // supprime TOUT espace
+  if (props.lowercase) out = out.toLowerCase()
+  return out
+}
+```
+
+### `onInput` réécrit
+
+```ts
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const raw = target.value
+  const sanitized = sanitizeEmail(raw)
+
+  if (sanitized !== raw) {
+    // `<input type="email">` ne supporte PAS l'API de sélection :
+    // selectionStart vaut null, setSelectionRange lève une exception.
+    // On garde donc la repositionnement défensif (no-op sur type=email).
+    const caret = target.selectionStart
+    target.value = sanitized
+    if (caret !== null) {
+      const newCaret = sanitizeEmail(raw.slice(0, caret)).length
+      try {
+        target.setSelectionRange(newCaret, newCaret)
+      } catch {
+        /* type d'input sans support de sélection — ignore */
+      }
+    }
+  }
+
+  if (!isControlled.value) localValue.value = sanitized
+  emit('update:modelValue', sanitized)
+}
+```
+
+Points clés :
+
+- **Resynchro DOM** : `target.value = sanitized` même en mode contrôlé, pour que l'affichage colle toujours à la valeur émise.
+- **Caveat curseur** : la spec HTML interdit l'API de sélection sur `type="email"` (`selectionStart` = `null`, `setSelectionRange` lève). La repositionnement est donc **best-effort** et inactif sur l'email : sur le cas rare d'une suppression d'espace en milieu de chaîne, le curseur peut aller en fin. Les cas courants (espace en fin, collage) gardent naturellement le curseur en fin. Le code est gardé (`caret !== null` + `try/catch`) pour ne jamais lever.
+- **Collage** couvert (paste déclenche `input`).
+- **Inchangé** : `type="email"`, `inputmode="email"`, icône, et **aucune validation de format**.
+
+## Section 3 — Tests, docs & livraison
+
+### Tests (colocalisés `*.test.ts`)
+
+- `RequiredMark.test.ts` — rend `*`, `aria-hidden="true"`, classe `text-m-danger`.
+- 1 test ciblé par composant équipé : `required: true` → astérisque présent dans le label ; défaut → absent. S'appuie sur le helper `mountComponent` existant de chaque fichier.
+- `InputEmail.test.ts` — espaces (début/milieu/fin) supprimés ; `lowercase=false` préserve la casse ; `lowercase=true` minuscule ; valeur émise sanitisée ; valeur DOM resynchronisée. Le curseur n'est pas testé (peu fiable en jsdom) → on teste la valeur.
+
+⚠️ Suite de tests **flaky** connue (timeouts intermittents). Lancer les tests des fichiers touchés ; en cas de timeout non lié aux changements, relancer / documenter plutôt que conclure à un échec.
+
+### Documentation (manuelle, requise par convention)
+
+- `COMPONENTS.md` : ajouter la ligne `required` aux 5 composants manquants ; ajouter `lowercase` à `MalioInputEmail` ; mentionner en intro famille formulaire que `required` affiche un astérisque rouge.
+- `CHANGELOG.md` : entrée(s) `MUI-41` sous `### Added`, format existant (`* [#MUI-41] ...`).
+
+### Playground / Histoire
+
+Ajouter un exemple `required` + un exemple email `lowercase` sur les pages playground concernées si coût faible ; sinon signaler (hors scope strict).
+
+### Découpage de livraison (1 PR, commits Conventional)
+
+1. `feat(ui): MalioRequiredMark + prop required sur Select/SelectCheckbox/Upload/RichText/SiteSelector`
+2. `feat(ui): astérisque required dans le label de la famille formulaire`
+3. `feat(inputs): sanitisation email (suppression espaces + option lowercase)`
+4. `docs: COMPONENTS.md + CHANGELOG`
+
+Branche : `feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co` (inchangée).

docs/superpowers/specs/2026-06-09-datatable-pagination-goto-design.md

@@ -0,0 +1,148 @@
+# DataTable — pagination « aller à la page » (champ compact)
+
+**Date :** 2026-06-09
+**Statut :** Validé (maquette à confirmer en atelier métier), prêt pour plan d'implémentation
+**Périmètre :** `MalioDataTable` (bloc pagination) uniquement.
+**Branche :** `feature/datatable-pagination-goto` (isolée de `develop`) — l'existant (numéros + `…`) reste en place sur `feature/MUI-42` le temps de l'atelier métier.
+
+## Objectif
+
+Remplacer la pagination numérotée (`Préc. 1 … 15 16 17 … 31 Suiv.`) par une forme **compacte avec saisie directe du numéro de page** : `‹ Préc.  Page [16] / 31  Suiv. ›`. Le client veut pouvoir aller directement à une page en tapant son numéro.
+
+Maquette de validation métier : `docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html`.
+
+## Décisions validées
+
+| Sujet | Décision |
+|-------|----------|
+| Forme | Compact « Page [input] / N » entre Préc. et Suiv. Les numéros et les `…` sont **supprimés**. |
+| Déclenchement | **Temps réel debounced 400 ms** ; **Entrée** applique immédiatement (court-circuite le debounce). Pendant la frappe, on n'applique que les valeurs dans `[1, N]`. |
+| Hors limites (Entrée/blur) | **Clamp** : `> N` → page N. Champ vidé / `0` / non numérique → **restaure** la page courante (pas d'émission). |
+| Saisie | Chiffres uniquement (`inputmode="numeric"`, non-chiffres retirés à la frappe). |
+| Labels Préc./Suiv. | En français (`Préc.` / `Suiv.`) — posés ici car la branche part de `develop`. |
+| Contrat | `v-model:page` / `v-model:per-page` inchangé ; `totalPages = ceil(totalItems/perPage)` inchangé. |
+
+## Conception détaillée
+
+### 1. Barre de pagination — markup
+
+**Supprimer** : le computed `visiblePages`, la boucle `v-for` des boutons numérotés, les `…` (`data-test="page-N"`, `aria-hidden` ellipsis).
+
+**Conserver** : le sélecteur perPage, `Préc.` (`data-test="prev-button"`, `aria-label="Page précédente"`, désactivé si `page <= 1`), `Suiv.` (`data-test="next-button"`, `aria-label="Page suivante"`, désactivé si `page >= totalPages`).
+
+**Ajouter** entre les deux boutons, dans la `<nav aria-label="Pagination">` :
+```html
+<span class="jump flex items-center gap-2 text-sm">
+  <label :for="pageInputId" class="text-m-muted">Page</label>
+  <input
+    :id="pageInputId"
+    v-model="pageInput"
+    type="text"
+    inputmode="numeric"
+    aria-label="Aller à la page"
+    data-test="page-input"
+    class="h-[30px] w-[58px] rounded-malio border border-m-border text-center text-sm outline-none focus:border-m-primary"
+    @input="onPageInput"
+    @keydown.enter="commitPageInput"
+    @blur="commitPageInput"
+  >
+  <span class="text-m-muted">/ <span data-test="total-pages">{{ totalPages }}</span></span>
+</span>
+```
+(Classes finales à ajuster au rendu réel ; conserver la hauteur `30px` cohérente avec Préc./Suiv.)
+
+### 2. État & synchronisation
+
+- `const pageInput = ref(String(props.page))` — chaîne affichée dans le champ.
+- `watch(() => props.page, p => { pageInput.value = String(p) })` — resynchronise l'affichage quand la page change (clic Préc./Suiv., changement externe, ou émission debounced confirmée).
+- Un id stable pour le `for/id` : `const pageInputId = useId()` (ou réutiliser le pattern d'id existant du composant).
+
+### 3. Comportement de saisie
+
+Constante interne : `const PAGE_JUMP_DEBOUNCE = 400` ; timer : `let debounceTimer: ReturnType<typeof setTimeout> | null = null` (pattern identique à `InputAutocomplete.vue`).
+
+**`onPageInput()`** (à chaque frappe) :
+```ts
+const onPageInput = () => {
+  // chiffres uniquement
+  pageInput.value = pageInput.value.replace(/[^0-9]/g, '')
+  if (debounceTimer) clearTimeout(debounceTimer)
+  if (pageInput.value === '') return            // attendre (restauré au blur)
+  const n = Number(pageInput.value)
+  if (n >= 1 && n <= totalPages.value) {
+    debounceTimer = setTimeout(() => changePage(n), PAGE_JUMP_DEBOUNCE)
+  }
+  // hors plage : on n'applique pas en direct (commit au blur/Entrée clampe)
+}
+```
+
+**`commitPageInput()`** (Entrée ou blur) :
+```ts
+const commitPageInput = () => {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  const raw = pageInput.value.trim()
+  if (raw === '' || Number(raw) === 0 || Number.isNaN(Number(raw))) {
+    pageInput.value = String(props.page)         // restaure la page courante
+    return
+  }
+  const clamped = Math.min(Math.max(1, Math.round(Number(raw))), totalPages.value)
+  changePage(clamped)
+  pageInput.value = String(props.page === clamped ? props.page : clamped)
+}
+```
+
+**`changePage(n)`** (émission, réutilisable) :
+```ts
+const changePage = (n: number) => {
+  if (n >= 1 && n <= totalPages.value && n !== props.page) {
+    emit('update:page', n)
+  }
+}
+```
+(Note : le `goToPage` existant — utilisé par Préc./Suiv. — peut être renommé/remplacé par `changePage`, qui a la même garde `1..N`. Préc. appelle `changePage(props.page - 1)`, Suiv. `changePage(props.page + 1)`.)
+
+**Nettoyage** : `onBeforeUnmount(() => { if (debounceTimer) clearTimeout(debounceTimer) })`.
+
+### 4. Cas limites (table de comportement, N = 31, page courante = 5)
+
+| Action | Résultat |
+|---|---|
+| Tape `16` d'un trait (< 400 ms) puis pause | 1 émission `update:page(16)` |
+| Tape `1` puis pause > 400 ms puis `6` | émission `update:page(1)` puis `update:page(16)` (effet « préfixe valide ») |
+| Tape `50` + Entrée | clamp → `update:page(31)` |
+| Tape `50` + blur | clamp → `update:page(31)` |
+| Vide le champ + blur | pas d'émission ; champ réaffiche `5` |
+| Tape `0` + Entrée | pas d'émission ; champ réaffiche `5` |
+| Tape `abc` | non-chiffres retirés → champ vide → pas d'émission |
+| Clic Préc./Suiv. | `update:page(±1)` ; champ synchronisé via `watch` |
+
+## Tests (`DataTable.test.ts`)
+
+**Supprimer** les tests devenus caducs (numéros + ellipsis) : `renders all pages when totalPages <= 5`, `highlights current page`, `emits update:page on page button click`, `shows ellipsis…`, `always shows first and last page…`, `shows 1 neighbor on each side…` (DataTable.test.ts:192-250).
+
+**Conserver** : `hides pagination when totalItems is 0`, `shows pagination when totalItems > 0`, Préc./Suiv. disabled + emits, `pagination nav has aria-label`, prev/next aria-labels.
+
+**Ajouter** (avec `vi.useFakeTimers()` pour le debounce) :
+- le champ affiche la page courante et `/ N` (`data-test="page-input"` value, `data-test="total-pages"`).
+- saisie d'une valeur dans `[1,N]` → après 400 ms (`vi.advanceTimersByTime(400)`) → `update:page(n)`.
+- saisie puis avance < 400 ms → pas encore d'émission.
+- Entrée → émission immédiate (sans avancer les timers).
+- valeur `> N` + Entrée → `update:page(N)` (clamp).
+- champ vidé + blur → pas d'émission, champ réaffiche la page courante.
+- `0` + Entrée → pas d'émission.
+- non-chiffres retirés à la frappe.
+- changement de `page` (setProps) → le champ se resynchronise.
+
+## Livrables documentaires
+
+- `COMPONENTS.md` (section DataTable) : décrire la pagination compacte « Page [n] / N » + le saut de page (debounce 400 ms, Entrée immédiat, clamp).
+- `CHANGELOG.md` : entrée sous `### Changed`.
+- Story/playground DataTable : la nouvelle barre est visible via les démos existantes (vérifier qu'un jeu de données > quelques pages est présent ; sinon ajouter un exemple à fort volume).
+- La maquette `docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html` est committée comme artefact de validation métier.
+
+## Hors périmètre
+
+- Configurabilité du délai de debounce via prop (figé à 400 ms ; extensible plus tard si besoin).
+- Conservation optionnelle des numéros pour les petits volumes (on passe tout en compact, décision métier).
+- Sélecteur de pages sous forme de `<select>` (écarté au profit du champ).
+- Toute autre évolution du DataTable (tri, filtres…).