docs(playground) : exemples readonly Select/SelectCheckbox (+ page DIVERS)

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

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

@@ -136,6 +136,44 @@
         </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"
+            empty-option-label="Aucune selection"
+            :readonly="true"
+          />
+          <MalioSelectCheckbox
+            :model-value="['a']"
+            label="Catégories (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">MalioDate</h2>
         <div class="space-y-4">
@@ -228,5 +266,10 @@ const countryOptions: Option[] = [
   {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>