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>

app/story/date/datePicker.story.vue

@@ -82,6 +82,20 @@
           success="Enregistrée"
         />
       </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Statuts par jour (markedDates) + @month-change</h2>
+        <MalioDate
+          v-model="markedValue"
+          label="Jours validés / à corriger"
+          hint="Ouvre le calendrier : jours verts (success) et rouges (danger)"
+          :marked-dates="markedDates"
+          @month-change="onMonthChange"
+        />
+        <p class="mt-2 text-sm text-m-muted">
+          Mois affiché : <code>{{ shownMonth }}</code>
+        </p>
+      </div>
     </div>
   </Story>
 </template>
@@ -102,4 +116,20 @@ const initialValue = ref<string | null>(todayIso)
 const boundedValue = ref<string | null>(null)
 const errorValue = ref<string | null>(null)
 const editableValue = ref<string | null>(null)
+
+const ym = `${now.getFullYear()}-${pad(now.getMonth() + 1)}`
+const markedDates = ref<Record<string, 'success' | 'danger'>>({
+  [`${ym}-05`]: 'success',
+  [`${ym}-06`]: 'success',
+  [`${ym}-12`]: 'success',
+  [`${ym}-09`]: 'danger',
+  [`${ym}-20`]: 'danger',
+})
+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}`
+}
 </script>