feat(ui) : MalioDate — markedDates (statut par jour) + event month-change (#MUI-45)

MonthGrid : prop markedDates (Record<ISO, 'success'|'danger'>) appliquant un fond
tokenisé par jour (bg-m-success/15 / bg-m-danger/15). Précédence : sélection (primary)
> variante marquée ; today garde sa bordure ET reçoit le fond marqué.

CalendarField : emit month-change { month: 0-11, year } à l'ouverture du popover et
à chaque navigation de mois (watch sur isOpen + currentMonth/currentYear).

Date : expose markedDates (passée à MonthGrid via le slot) et réémet month-change.

Tests MonthGrid (variantes + précédence today/sélection) et Date (month-change à
l'ouverture/nav + passthrough markedDates). Doc COMPONENTS.md + CHANGELOG + story +
playground. Sert l'écran Heures de SIRH (jours validés en vert, chargement du mois visible).

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

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

@@ -78,11 +78,29 @@
         />
       </div>
     </div>
+
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">markedDates + @month-change</h2>
+        <MalioDate
+          v-model="markedValue"
+          label="Calendrier avec statuts par jour"
+          hint="Jours verts = validés, rouges = à corriger"
+          :marked-dates="markedDates"
+          @month-change="onMonthChange"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Mois affiché : <code>{{ shownMonth }}</code></p>
+          <p class="mt-1 text-m-success">● success : {{ successDays.join(', ') }}</p>
+          <p class="text-m-danger">● danger : {{ dangerDays.join(', ') }}</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
 
 const pad = (n: number) => String(n).padStart(2, '0')
 const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
@@ -95,4 +113,20 @@ const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
 const editableValue = ref<string | null>(null)
+
+// Démo markedDates : quelques jours du mois courant marqués success / danger.
+const ym = `${now.getFullYear()}-${pad(now.getMonth() + 1)}`
+const successDays = [`${ym}-05`, `${ym}-06`, `${ym}-12`]
+const dangerDays = [`${ym}-09`, `${ym}-20`]
+const markedDates = computed<Record<string, 'success' | 'danger'>>(() => ({
+  ...Object.fromEntries(successDays.map(d => [d, 'success' as const])),
+  ...Object.fromEntries(dangerDays.map(d => [d, 'danger' as const])),
+}))
+const markedValue = ref<string | null>(null)
+const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+const shownMonth = ref('—')
+const onMonthChange = ({month, year}: {month: number, year: number}) => {
+  shownMonth.value = `${monthsLong[month]} ${year} (month=${month})`
+}
 </script>